import YogaImageComponent from "@/components/yoga.image.component";

const SubHeaderComponent = () =>{
    return (
        <div className="sub-banner-section">
            <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">
                                        <a className="nav-link" href="/index">Home</a>
                                    </li>
                                    <li className="nav-item active">
                                        <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>
            <section className="banner-section">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div className="banner-section-content">
                                <h1 data-aos="fade-up">About Us</h1>
                                <p data-aos="fade-right">Duis aute irure dolor in reprehenderit in volurate velit cillum nulla pariatur nostrud exercitation.</p>
                                <div className="btn_wrapper">
                                    <span className="sub_home_span">Home </span><i className="fa-solid fa-angles-right" aria-hidden="true"></i><span className="sub_span"> About</span>
                                </div>
                            </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 SubHeaderComponent;