last update

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}>