DESKTOP-GBA0BK8\Admin
286 lines
11 KiB
React
286 lines
11 KiB
React
/* eslint-disable no-unused-expressions */
|
|
/* eslint-disable jsx-a11y/anchor-is-valid */
|
|
import React, { useEffect, useRef, useState } from "react";
|
|
import wfb from "../../assets/images/social/wfb.svg";
|
|
import wt from "../../assets/images/social/wt.svg";
|
|
import wi from "../../assets/images/social/w-i.svg";
|
|
import wins from "../../assets/images/social/w-ins.svg";
|
|
import search from "../../assets/images/svg/search.svg";
|
|
import logo from "../../assets/images/logo/logo.svg";
|
|
import man2 from "../../assets/images/banner/man2.png";
|
|
import { Link } from "react-router-dom";
|
|
import MobileMenu from "../MobileMenu";
|
|
const HomeTwoHeader = () => {
|
|
const scrollNav = useRef(null);
|
|
const [activeMobileMenu, setActiveMobileMenu] = useState(false);
|
|
const [showSearchBar, setShowSearchBar] = useState(false);
|
|
let body = document.querySelector("body");
|
|
const handleShowSearchBar = () => {
|
|
setShowSearchBar(!showSearchBar);
|
|
};
|
|
useEffect(() => {
|
|
// scrolling nav
|
|
window.addEventListener("scroll", () => {
|
|
let windowScroll = window.scrollY > 100;
|
|
scrollNav.current.classList.toggle("rt-sticky-active", windowScroll);
|
|
});
|
|
}, []);
|
|
showSearchBar
|
|
? body.classList.add("modal-open")
|
|
: body.classList.remove("modal-open");
|
|
|
|
body.classList.contains("modal-open")
|
|
? (document.documentElement.scrollTop = 0)
|
|
: "";
|
|
return (
|
|
<section className=" xl:min-h-screen bg-[url('../images/banner/2.png')] bg-cover bg-no-repeat bg-center overflow-hidden xl:pb-[130px]">
|
|
<header className="site-header ">
|
|
<div className="bg-primary text-white py-3 md:block hidden">
|
|
<div className=" container">
|
|
<div className="grid lg:grid-cols-2 grid-cols-1 gap-5 ">
|
|
<ul className=" flex divide-x divide-white divide-opacity-25 text-base lg:justify-start justify-center">
|
|
<li className="mr-4">12893 Green Valley Street, USA 83682</li>
|
|
<li className="pl-4">
|
|
<a href="mailto:contactinfo@gmail.com">
|
|
contactinfo@gmail.com
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<ul className=" text-base flex lg:justify-end justify-center divide-x divide-white divide-opacity-25 items-center">
|
|
<li className="px-2">Follow Us On:</li>
|
|
<li className="px-2">
|
|
<a href="#">
|
|
<img src={wfb} alt="" />
|
|
</a>
|
|
</li>
|
|
<li className="px-2">
|
|
<a href="#">
|
|
<img src={wt} alt="" />
|
|
</a>
|
|
</li>
|
|
<li className="px-2">
|
|
<a href="#">
|
|
<img src={wi} alt="" />
|
|
</a>
|
|
</li>
|
|
<li className="px-2">
|
|
<a href="#">
|
|
<img src={wins} alt="" />
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="main-header py-8 header-normal2 rt-sticky top-0 w-full z-[999] "
|
|
ref={scrollNav}
|
|
>
|
|
<div className="container">
|
|
<div className=" flex items-center justify-between ">
|
|
<Link
|
|
to={"/react-templates/edumim"}
|
|
className="brand-logo flex-none lg:mr-10 md:w-auto max-w-[120px] "
|
|
>
|
|
<img src={logo} alt="" />
|
|
</Link>
|
|
<div className="flex items-center flex-1">
|
|
<div className="flex-1 main-menu relative mr-[74px]">
|
|
<ul className="menu-active-classNamees">
|
|
<li className={`menu-item-has-children `}>
|
|
<a href="#">Home</a>
|
|
<ul className="sub-menu">
|
|
<li>
|
|
<Link to={"/react-templates/edumim"}> Home One</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/home-two"}>
|
|
Home Two
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/home-three"}>
|
|
Home Three
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="menu-item-has-children">
|
|
<a href="#">Pages</a>
|
|
<ul className="sub-menu">
|
|
<li>
|
|
<Link to={"/react-templates/edumim/about"}>
|
|
About 1
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/about-two"}>
|
|
About 2
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/instructor"}>
|
|
Instructor
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/instructor-two"}>
|
|
Instructor 2
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
to={"/react-templates/edumim/instructor-details"}
|
|
>
|
|
Instructor Single
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/event"}>
|
|
Event
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/event-single"}>
|
|
Event Single
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/error"}>404</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="menu-item-has-children">
|
|
<a href="#">Courses</a>
|
|
<ul className="sub-menu">
|
|
<li>
|
|
<Link to={"/react-templates/edumim/courses"}>
|
|
Courses
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/courses-sidebar"}>
|
|
Courses Sidebar
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/single-course"}>
|
|
Single Course
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li className="menu-item-has-children">
|
|
<a href="#">Blog</a>
|
|
<ul className="sub-menu">
|
|
<li>
|
|
<Link to={"/react-templates/edumim/blog-standard"}>
|
|
Blog Standard
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/single-blog"}>
|
|
Blog Single
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li>
|
|
<Link to={"/react-templates/edumim/contacts"}>
|
|
Contacts
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
<div className=" lg:block hidden">
|
|
<div className="border border-gray rounded-md h-[46px] modal-search">
|
|
<input
|
|
type="text"
|
|
className=" block w-full rounded-md h-full border-none ring-0 focus:outline-none focus:ring-0"
|
|
placeholder="Search.."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex-none flex space-x-[18px]">
|
|
<div>
|
|
<button
|
|
type="button"
|
|
className=" md:w-[56px] md:h-[56px] h-10 w-10 rounded bg-white flex flex-col items-center justify-center modal-
|
|
trigger"
|
|
onClick={handleShowSearchBar}
|
|
>
|
|
<img src={search} alt="" />
|
|
</button>
|
|
</div>
|
|
<div className=" block lg:hidden">
|
|
<button
|
|
type="button"
|
|
className=" text-3xl md:w-[56px] h-10 w-10 md:h-[56px] rounded bg-white flex flex-col items-center justify-center menu-click"
|
|
onClick={() => setActiveMobileMenu(!activeMobileMenu)}
|
|
>
|
|
<iconify-icon
|
|
icon="cil:hamburger-menu"
|
|
rotate="180deg"
|
|
></iconify-icon>
|
|
</button>
|
|
</div>
|
|
<div className=" hidden lg:block">
|
|
<a
|
|
href="#"
|
|
className="btn bg-black text-white py-[15px] px-8"
|
|
>
|
|
Start Free Trial
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<div className="container">
|
|
<div className=" lg:hidden block">
|
|
<div className="border border-gray rounded-md h-[46px] modal-search">
|
|
<input
|
|
type="text"
|
|
className=" block w-full rounded-md h-full border-none ring-0 focus:outline-none focus:ring-0"
|
|
placeholder="Search.."
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{activeMobileMenu && (
|
|
<MobileMenu
|
|
activeMenu={activeMobileMenu}
|
|
setActiveMenu={setActiveMobileMenu}
|
|
/>
|
|
)}
|
|
<div className="container relative">
|
|
<div className="xl:max-w-[570px] xl:pt-[129px] lg:py-28 md:py-20 py-14 lg:space-y-10 space-y-6">
|
|
<div className=" lg:text-[77px] lg:leading-[106.4px] md:text-6xl md:leading-[72px] text-black font-bold text-5xl leading-[62px]">
|
|
Better <span className="text-primary">Learning Future</span> Starts
|
|
With Edumim
|
|
</div>
|
|
<div className=" plain-text text-gray leading-[30px] border-l-2 border-primary pl-4">
|
|
It is long established fact that reader distracted by the readable
|
|
content.
|
|
</div>
|
|
<div className="md:flex md:space-x-4 space-y-3 md:space-y-0 pt-5">
|
|
<a href="#" className="btn btn-primary">
|
|
Get Started Now
|
|
</a>{" "}
|
|
<a href="#" className="btn btn-black">
|
|
Get Started Now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div className="imge-box hidden xl:block absolute right-[-60px] top-1/2 -translate-y-1/2 mt-[60px] ">
|
|
<img src={man2} alt="" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HomeTwoHeader;
|