Initial commit for Greenlens

2026-03-16 21:31:46 +01:00
parent 307135671f
commit 05d4f6e78b
573 changed files with 54233 additions and 1891 deletions
--- a/greenlns-landing/components/Navbar.tsx
+++ b/greenlns-landing/components/Navbar.tsx
@@ -0,0 +1,123 @@
+'use client'
+
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { useLang } from '@/context/LangContext'
+import type { Lang } from '@/lib/i18n'
+
+const LANGS: { code: Lang; label: string; flag: string }[] = [
+  { code: 'de', label: 'DE', flag: 'DE' },
+  { code: 'en', label: 'EN', flag: 'EN' },
+  { code: 'es', label: 'ES', flag: 'ES' },
+]
+
+export default function Navbar() {
+  const [scrolled, setScrolled] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+  const { lang, setLang, t } = useLang()
+
+  useEffect(() => {
+    const onScroll = () => setScrolled(window.scrollY > 40)
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <nav className={`navbar${scrolled ? ' scrolled' : ''}`} id="navbar" role="navigation" aria-label="Main navigation">
+      <div className="container">
+        <Link href="/" className="nav-logo" aria-label="GreenLens Home">
+          GREENLENS
+        </Link>
+
+        <div className={`nav-links${menuOpen ? ' nav-links--open' : ''}`}>
+          <a href="#features" onClick={() => setMenuOpen(false)}>{t.nav.features}</a>
+          <a href="#intelligence" onClick={() => setMenuOpen(false)}>{t.nav.tech}</a>
+          <a href="#faq" onClick={() => setMenuOpen(false)}>FAQ</a>
+          <a href="#how" onClick={() => setMenuOpen(false)}>{t.nav.how}</a>
+          <Link href="/support" onClick={() => setMenuOpen(false)}>Support</Link>
+          <a href="#cta" onClick={() => setMenuOpen(false)}>{t.nav.download}</a>
+
+          <div className="lang-switcher" role="group" aria-label="Language selector">
+            {LANGS.map((l) => (
+              <button
+                key={l.code}
+                className={`lang-btn${lang === l.code ? ' lang-btn--active' : ''}`}
+                onClick={() => {
+                  setLang(l.code)
+                  setMenuOpen(false)
+                }}
+                aria-label={`Switch to ${l.label}`}
+                aria-pressed={lang === l.code}
+              >
+                <span>{l.flag}</span>
+                <span>{l.label}</span>
+              </button>
+            ))}
+          </div>
+
+          <a href="#cta" className="nav-cta" onClick={() => setMenuOpen(false)}>{t.nav.cta}</a>
+        </div>
+
+        <button
+          className="nav-hamburger"
+          aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+          aria-expanded={menuOpen}
+          onClick={() => setMenuOpen((o) => !o)}
+        >
+          <span />
+          <span />
+          <span />
+        </button>
+      </div>
+
+      <style jsx>{`
+        .nav-links--open {
+          display: flex !important;
+          flex-direction: column;
+          position: absolute;
+          top: 100%;
+          left: 0;
+          right: 0;
+          background: rgba(19,31,22,0.97);
+          backdrop-filter: blur(18px);
+          padding: 1.5rem 2rem;
+          gap: 1rem;
+          border-top: 1px solid rgba(244,241,232,0.08);
+        }
+        .lang-switcher {
+          display: flex;
+          align-items: center;
+          gap: 2px;
+          background: rgba(244,241,232,0.07);
+          border: 1px solid rgba(244,241,232,0.12);
+          border-radius: 999px;
+          padding: 3px;
+        }
+        .lang-btn {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          background: transparent;
+          border: none;
+          color: rgba(244,241,232,0.6);
+          font-size: 0.7rem;
+          font-weight: 600;
+          letter-spacing: 0.04em;
+          padding: 4px 10px;
+          border-radius: 999px;
+          cursor: pointer;
+          transition: background 0.2s, color 0.2s;
+          white-space: nowrap;
+        }
+        .lang-btn:hover {
+          color: rgba(244,241,232,0.9);
+          background: rgba(244,241,232,0.1);
+        }
+        .lang-btn--active {
+          background: rgba(244,241,232,0.15);
+          color: #fff;
+        }
+      `}</style>
+    </nav>
+  )
+}