feat: add product section components and integrate them into the homepage landing page

2026-07-29 15:50:27 +07:00
parent b43df8f35b
commit db57a22a09
10 changed files with 796 additions and 772 deletions
@@ -0,0 +1,70 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { LanguageSwitcher } from '@/components/LanguageSwitcher';
+import { useEffect, useState } from 'react';
+
+export function Navbar() {
+  const t = useTranslations();
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const floating = window.scrollY > 60;
+      setIsScrolled(floating);
+      document.body.classList.toggle('nav-is-floating', floating);
+    };
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    handleScroll();
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <div className={`nav-wrapper ${isScrolled ? 'floating' : ''}`}>
+      <div className="container">
+        <nav className="nav">
+          <div className="brand">
+            <a href="#">
+              <div className="brand-mark">
+                <img src="/brand/logo-primary.svg" alt="" />
+              </div>
+            </a>
+          </div>
+          <button className="nav-toggle" aria-label="Open menu" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M4 7h16M4 12h16M4 17h16" stroke="#fff" strokeWidth="2" strokeLinecap="round" />
+            </svg>
+          </button>
+          <div className={`nav-links ${isMenuOpen ? 'open' : ''}`} id="navLinks" onClick={() => setIsMenuOpen(false)}>
+            <a href="#" style={{ color: '#fff', opacity: 0.85 }}>
+              {t('Nav.home')}
+            </a>
+            <a href="#ecosystem" style={{ color: '#fff', opacity: 0.85 }}>
+              {t('Nav.solutions')}
+            </a>
+            <a href="#destinations" style={{ color: '#fff', opacity: 0.85 }}>
+              {t('Nav.industries')}
+            </a>
+            <a href="#pricing" style={{ color: '#fff', opacity: 0.85 }}>
+              {t('Nav.pricing')}
+            </a>
+            <a href="#contact" style={{ color: '#fff', opacity: 0.85 }}>
+              {t('Nav.contact')}
+            </a>
+            <a href="#contact" className="btn btn-orange">
+              {t('Nav.demo')}
+            </a>
+            <div className="nav-divider"></div>
+            <div onClick={(e) => e.stopPropagation()}>
+              <LanguageSwitcher />
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+  );
+}