160 lines
10 KiB
TypeScript
160 lines
10 KiB
TypeScript
import YogaImageComponent from "@/components/yoga.image.component";
|
|
import {YogaMainHeaderComponent_Plain} from "@/types/generated-strapi-interfaces/api/yoga-main-header-component";
|
|
export interface Props{
|
|
config: YogaMainHeaderComponent_Plain
|
|
}
|
|
const MainHeaderComponent = ({ config: {
|
|
title,
|
|
header,
|
|
headerIType,
|
|
description,
|
|
button,
|
|
image
|
|
|
|
}}: Props) => {
|
|
|
|
return (
|
|
<div className="banner-section-outer">
|
|
<header>
|
|
<div className="main_header">
|
|
<div className="container-fluid">
|
|
<nav className="navbar navbar-expand-lg navbar-light p-0">
|
|
<a className="navbar-brand" href="/index"><figure className="mb-0"><YogaImageComponent src="/assets/images/yogastic_logo.png" alt=""/></figure></a>
|
|
<button className="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span className="navbar-toggler-icon"></span>
|
|
<span className="navbar-toggler-icon"></span>
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div className="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul className="navbar-nav">
|
|
<li className="nav-item active">
|
|
<a className="nav-link" href="/index">Home</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="nav-link" href="/about">About Us</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="nav-link" href="/services">Services</a>
|
|
</li>
|
|
<li className="nav-item dropdown">
|
|
<a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false"> Pages </a>
|
|
<div className="dropdown-menu drop-down-content">
|
|
<ul className="list-unstyled drop-down-pages">
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/pricing">Pricing</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/faq">Faq</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="nav-link" href="/team">Team</a>
|
|
</li>
|
|
<li className="nav-item dropdown">
|
|
<a className="nav-link dropdown-toggle dropdown-color navbar-text-color" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true"
|
|
aria-expanded="false"> Blog </a>
|
|
<div className="dropdown-menu drop-down-content">
|
|
<ul className="list-unstyled drop-down-pages">
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/single-post">Single Post</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/infinite-scroll">Infinite Scroll</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/load-more">Load More</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/one-column">One Column</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/two-column">Two Column</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/three-column">Three Column</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/three-colum-sidbar">Three Column Sidebar</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/four-column">Four Column</a>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="dropdown-item nav-link" href="/six-column">Six Column</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li className="nav-item">
|
|
<a className="nav-link contact_us" href="/contact">Contact Us</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
{/*<!-- SOCIAL ICONS -->*/}
|
|
<div className="social-icons left_icons float-left d-table" data-aos="fade-down">
|
|
<div className="icon_content d-table-cell align-middle">
|
|
<ul className="list-unstyled p-0 m-0">
|
|
<li>
|
|
<a href="#"><i className="fa-brands fa-facebook-f" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i className="fa-brands fa-twitter" aria-hidden="true"></i></a>
|
|
</li>
|
|
<li>
|
|
<a href="#"><i className="fa-brands fa-linkedin-in" aria-hidden="true"></i></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<section className="banner-section">
|
|
<div className="container-fluid">
|
|
<div className="row" data-aos="fade-up">
|
|
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12 text-md-left text-center">
|
|
<div className="banner-section-content">
|
|
<h5>{title}</h5>
|
|
<h1 data-aos="fade-up">{header} <span className="ityped"></span></h1>
|
|
<p data-aos="fade-right">{description}</p>
|
|
<div className="btn_wrapper" data-aos="fade-up">
|
|
{button && <a className="text-decoration-none getstarted_btn" href={button.link}>{button.label}</a> }
|
|
</div>
|
|
<a className="top-btn" href="/index#footer_section">
|
|
<i className="fa-solid fa-arrow-down-long"></i>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-6 col-md-6 col-sm-12 col-xs-12">
|
|
<div className="banner-section-image">
|
|
<figure className="mb-0">
|
|
<YogaImageComponent src="/assets/images/banner_right_image.png" alt="" />
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<figure className="banner_left_top_shape left_shape mb-0">
|
|
<YogaImageComponent src="/assets/images/banner_left_top_shape.png" alt="" className="img-fluid" />
|
|
</figure>
|
|
<figure className="banner_left_bottom_shape left_shape mb-0">
|
|
<YogaImageComponent src="/assets/images/banner_left_bottom_shape.png" alt="" className="img-fluid"/>
|
|
</figure>
|
|
<figure className="banner_right_top_shape right_shape mb-0">
|
|
<YogaImageComponent src="/assets/images/banner_right_top_shape.png" alt="" className="img-fluid"/>
|
|
</figure>
|
|
<figure className="banner_right_bottom_shape right_shape mb-0">
|
|
<YogaImageComponent src="/assets/images/banner_right_bottom_shape.png" alt="" className="img-fluid"/>
|
|
</figure>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default MainHeaderComponent;
|