Build New Optic website

components/SiteShell.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useEffect, useMemo, useState, startTransition } from "react";
+import { business, type Locale } from "@/config/business";
+import { createWhatsAppMessage, getDictionary, getDirection } from "@/lib/i18n";
+import AboutSection from "./AboutSection";
+import ContactSection from "./ContactSection";
+import CollectionsSection from "./CollectionsSection";
+import Footer from "./Footer";
+import HeroSection from "./HeroSection";
+import LiquidGlass from "./LiquidGlass";
+import Navbar from "./Navbar";
+import ServicesSection from "./ServicesSection";
+import TrustSection from "./TrustSection";
+import WhyChooseSection from "./WhyChooseSection";
+
+export default function SiteShell() {
+  const [locale, setLocale] = useState<Locale>("fr");
+  const t = useMemo(() => getDictionary(locale), [locale]);
+  const dir = getDirection(locale);
+  const whatsappUrl = createWhatsAppMessage(locale);
+
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = dir;
+    document.body.dir = dir;
+    document.title = t.meta.title;
+    document.querySelector('meta[name="description"]')?.setAttribute("content", t.meta.description);
+  }, [dir, locale, t.meta.description, t.meta.title]);
+
+  function changeLocale(nextLocale: Locale) {
+    startTransition(() => setLocale(nextLocale));
+  }
+
+  return (
+    <div className="overflow-hidden">
+      <LiquidGlass />
+      <Navbar locale={locale} onLocaleChange={changeLocale} t={t} whatsappUrl={whatsappUrl} />
+      <main>
+        <HeroSection t={t} whatsappUrl={whatsappUrl} />
+        <AboutSection t={t} />
+        <ServicesSection t={t} />
+        <CollectionsSection t={t} />
+        <WhyChooseSection t={t} />
+        <TrustSection t={t} />
+        <ContactSection t={t} whatsappUrl={whatsappUrl} />
+      </main>
+      <Footer t={t} locale={locale} onLocaleChange={changeLocale} />
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "Optician",
+            name: business.name,
+            address: business.address,
+            telephone: business.phone,
+            url: business.mapUrl,
+            areaServed: "Temara, Morocco"
+          })
+        }}
+      />
+    </div>
+  );
+}