last update

app/[locale]/(site)/layout.tsx

@@ -6,7 +6,8 @@ import { redirect } from "next/navigation";
 import { SiteAmbientBackdrop } from "@/components/layout/site-ambient-backdrop";
 import { SiteFooter } from "@/components/layout/site-footer";
 import { SiteHeader } from "@/components/layout/site-header";
-import { isAdminAuthenticated } from "@/lib/admin-auth";
+import { ScrollSmootherProvider } from "@/components/scroll-smoother-provider";
+import { isSuperAdmin } from "@/lib/admin-auth";
 import { getMaintenanceMode, getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
 
@@ -29,22 +30,34 @@ export default async function SiteLayout({ children, params }: SiteLayoutProps)
     getSiteSettings(),
   ]);
   const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
-  const authenticated = await isAdminAuthenticated();
+  // Server-side decision only. The header receives just this boolean and uses
+  // it purely to show/hide the Admin shortcut link — it grants no access by
+  // itself. Every admin page/action re-checks the session independently, so
+  // this value is not a security boundary, only a UI convenience.
+  const authenticated = await isSuperAdmin();
 
   if (maintenanceEnabled && !authenticated) {
     redirect(getLocalizedPath(localeKey, "/coming-soon", siteSettings.defaultLocale));
   }
 
   return (
-    <div className="relative flex min-h-screen flex-col overflow-hidden">
+    <>
+      <ScrollSmootherProvider />
       <SiteAmbientBackdrop />
       <SiteHeader
         lightLogoUrl={mediaBindings.siteLogoLight?.url}
         darkLogoUrl={mediaBindings.siteLogoDark?.url}
         defaultLocale={siteSettings.defaultLocale}
+        isSuperAdmin={authenticated}
       />
-      <main className="flex-1">{children}</main>
-      <SiteFooter defaultLocale={siteSettings.defaultLocale} />
-    </div>
+      <div id="smooth-wrapper">
+        <div id="smooth-content">
+          <div className="site-content-frame flex min-h-screen flex-col">
+            <main className="flex-1">{children}</main>
+            <SiteFooter defaultLocale={siteSettings.defaultLocale} />
+          </div>
+        </div>
+      </div>
+    </>
   );
 }

app/[locale]/(site)/page.tsx

@@ -4,14 +4,13 @@ import { getLocale, getTranslations } from "next-intl/server";
 import { Container } from "@/components/layout/container";
 import { HomeHero } from "@/components/layout/home-hero";
 import { MotionFade } from "@/components/motion-fade";
-import { BentoGridSection } from "@/components/home/bento-grid-section";
+import { MagicBentoSection } from "@/components/home/magic-bento-section";
 import { CapabilitiesSection } from "@/components/home/capabilities-section";
 import { ContactCtaSection } from "@/components/home/contact-cta-section";
 import { MarqueeSection } from "@/components/home/marquee-section";
 import { ProcessSection } from "@/components/home/process-section";
 import { ProjectsSection } from "@/components/home/projects-section";
 import type {
-  BentoSectionCopy,
   CapabilitiesSectionCopy,
   ContactCtaSectionCopy,
   MarqueeSectionCopy,
@@ -72,45 +71,40 @@ export default async function HomePage({ params }: HomePageProps) {
     getPublishedPortfolioProjects(),
   ]);
 
-  const bentoCopy: BentoSectionCopy = {
-    eyebrow: t("bento.eyebrow"),
-    title: t("bento.title"),
-    description: t("bento.description"),
-    about: {
-      eyebrow: t("bento.about.eyebrow"),
+  const bentoCards = [
+    {
+      label: t("bento.about.eyebrow"),
       title: t("bento.about.title"),
       description: t("bento.about.description"),
-      points: t.raw("bento.about.points") as string[],
     },
-    coreStack: {
-      eyebrow: t("bento.coreStack.eyebrow"),
+    {
+      label: t("bento.coreStack.eyebrow"),
       title: t("bento.coreStack.title"),
-      items: t.raw("bento.coreStack.items") as string[],
+      description: (t.raw("bento.coreStack.items") as string[]).join(" · "),
     },
-    availability: {
-      eyebrow: t("bento.availability.eyebrow"),
+    {
+      label: t("bento.availability.eyebrow"),
       title: t("bento.availability.title"),
       description: t("bento.availability.description"),
-      status: t("bento.availability.status"),
     },
-    currentFocus: {
-      eyebrow: t("bento.currentFocus.eyebrow"),
+    {
+      label: t("bento.currentFocus.eyebrow"),
       title: t("bento.currentFocus.title"),
-      items: t.raw("bento.currentFocus.items") as string[],
+      description: (t.raw("bento.currentFocus.items") as string[]).join(" · "),
     },
-    contact: {
-      eyebrow: t("bento.contact.eyebrow"),
+    {
+      label: t("bento.contact.eyebrow"),
       title: t("bento.contact.title"),
       description: t("bento.contact.description"),
-      emailLabel: t("bento.contact.emailLabel"),
-      emailValue: t("bento.contact.emailValue"),
     },
-    highlights: {
-      eyebrow: t("bento.highlights.eyebrow"),
+    {
+      label: t("bento.highlights.eyebrow"),
       title: t("bento.highlights.title"),
-      items: t.raw("bento.highlights.items") as Array<{ value: string; label: string }>,
+      description: (t.raw("bento.highlights.items") as Array<{ value: string; label: string }>)
+        .map((i) => `${i.value} ${i.label}`)
+        .join(" · "),
     },
-  };
+  ];
 
   const marqueeCopy: MarqueeSectionCopy = {
     eyebrow: t("marquee.eyebrow"),
@@ -216,7 +210,12 @@ export default async function HomePage({ params }: HomePageProps) {
         className="relative z-10 flex max-w-7xl flex-col gap-16 pb-14 pt-6 sm:gap-20 sm:pb-16 sm:pt-8 lg:gap-24 lg:pb-20 lg:pt-10"
       >
         <MotionFade>
-          <BentoGridSection copy={bentoCopy} />
+          <MagicBentoSection
+            eyebrow={t("bento.eyebrow")}
+            heading={t("bento.title")}
+            description={t("bento.description")}
+            cards={bentoCards}
+          />
         </MotionFade>
 
         <MotionFade delay={0.06}>