classify web

components/PagesComponent/LandingPage/LandingHeader.jsx

@@ -0,0 +1,141 @@
+"use client";
+import { t } from "@/utils";
+import { useSelector } from "react-redux";
+import { CurrentLanguageData } from "@/redux/reducer/languageSlice";
+import { settingsData } from "@/redux/reducer/settingSlice";
+import LanguageDropdown from "../../Common/LanguageDropdown";
+import LandingMobileMenu from "@/components/PagesComponent/LandingPage/LandingMobileMenu";
+import { useState, useEffect } from "react";
+import CustomImage from "@/components/Common/CustomImage";
+import CustomLink from "@/components/Common/CustomLink";
+
+const LandingHeader = () => {
+  const CurrentLanguage = useSelector(CurrentLanguageData);
+  const settings = useSelector(settingsData);
+  const [isShowMobileMenu, setIsShowMobileMenu] = useState(false);
+  const [activeSection, setActiveSection] = useState("anythingYouWant");
+
+  const handleMobileMenuClose = () => {
+    if (isShowMobileMenu) {
+      setIsShowMobileMenu(false);
+    }
+  };
+
+  // Intersection Observer to track which section is currently visible
+  useEffect(() => {
+    const sections = ["anythingYouWant", "work_process", "faq", "ourBlogs"];
+    const observerOptions = {
+      root: null,
+      rootMargin: "0px", // Trigger when section is 20% from top
+      threshold: 0.7,
+    };
+    const observerCallback = (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveSection(entry.target.id);
+        }
+      });
+    };
+    const observer = new IntersectionObserver(
+      observerCallback,
+      observerOptions
+    );
+    // Observe all sections
+    sections.forEach((sectionId) => {
+      const element = document.getElementById(sectionId);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+    // Cleanup observer on component unmount
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <>
+      <header className="sticky top-0 z-50 bg-white shadow-xs">
+        <nav className="shadow-md">
+          <div className="container py-5 lg:flex lg:items-center lg:justify-between">
+            <div className="flex w-100 items-center justify-between">
+              <CustomImage
+                src={settings?.header_logo}
+                className="w-full h-[52px] object-contain ltr:object-left rtl:object-right max-w-[195px]"
+                alt="logo"
+                width={195}
+                height={52}
+              />
+
+              <LandingMobileMenu
+                isOpen={isShowMobileMenu}
+                setIsOpen={setIsShowMobileMenu}
+                activeSection={activeSection}
+              />
+            </div>
+            <div className="hidden lg:flex gap-6">
+              <ul className="flex items-center gap-6">
+                <li>
+                  <CustomLink
+                    href="#anythingYouWant"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "anythingYouWant"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                  >
+                    {t("home")}
+                  </CustomLink>
+                </li>
+                <li>
+                  <CustomLink
+                    href="#work_process"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "work_process"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                    onClick={handleMobileMenuClose}
+                  >
+                    {t("whyChooseUs")}
+                  </CustomLink>
+                </li>
+                <li>
+                  <CustomLink
+                    href="#faq"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "faq"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                    onClick={handleMobileMenuClose}
+                  >
+                    {t("faqs")}
+                  </CustomLink>
+                </li>
+                <li>
+                  <CustomLink
+                    href="#ourBlogs"
+                    className={`cursor-pointer transition-all duration-200 ${
+                      activeSection === "ourBlogs"
+                        ? "text-primary"
+                        : "hover:text-primary"
+                    }`}
+                    onClick={handleMobileMenuClose}
+                  >
+                    {t("blog")}
+                  </CustomLink>
+                </li>
+              </ul>
+            </div>
+            <div className="hidden lg:flex">
+              <LanguageDropdown />
+            </div>
+          </div>
+        </nav>
+      </header>
+    </>
+  );
+};
+
+export default LandingHeader;