Refine homepage and restore hero

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

@@ -1,27 +1,36 @@
 import type { Metadata } from "next";
-import {
-  ArrowRight,
-  BadgeCheck,
-  Blocks,
-  BriefcaseBusiness,
-  ChartNoAxesCombined,
-  Globe,
-  Package2,
-  Search,
-} from "lucide-react";
-import Link from "next/link";
 import { getLocale, getTranslations } from "next-intl/server";
 
 import { Container } from "@/components/layout/container";
 import { HomeHero } from "@/components/layout/home-hero";
-import { StackedMarqueeSection, type MarqueeRow } from "@/components/layout/stacked-marquee-section";
 import { MotionFade } from "@/components/motion-fade";
-import { getMarqueeSettings, getSiteSettings, splitMarqueeRowItems } from "@/lib/app-config";
+import { BentoGridSection } from "@/components/home/bento-grid-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,
+  ProcessSectionCopy,
+  ProjectCardCopy,
+  ProjectsSectionCopy,
+} from "@/components/home/types";
 import { buildLocalizedMetadata } from "@/lib/metadata";
-import { AppCard } from "@/components/ui/app-card";
-import { Button } from "@/components/ui/button";
-import { CardContent } from "@/components/ui/card";
 import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import {
+  getMarqueeSettings,
+  getSiteSettings,
+  splitMarqueeRowItems,
+} from "@/lib/app-config";
+import {
+  getLocalizedValue,
+  getPublishedPortfolioProjects,
+} from "@/lib/portfolio";
+import { type MarqueeRow } from "@/components/layout/stacked-marquee-section";
 
 type HomePageProps = {
   params: Promise<{
@@ -29,29 +38,22 @@ type HomePageProps = {
   }>;
 };
 
-const serviceIcons = [
-  BriefcaseBusiness,
-  Globe,
-  Package2,
-  Blocks,
-  Search,
-  ChartNoAxesCombined,
-  BadgeCheck,
-];
-
 export const dynamic = "force-dynamic";
 
 export async function generateMetadata({ params }: HomePageProps): Promise<Metadata> {
   await params;
   const siteSettings = await getSiteSettings();
-  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
+  const localeKey = resolveLocale(
+    await getLocale().catch(() => siteSettings.defaultLocale),
+    siteSettings.defaultLocale,
+  );
   const t = await getTranslations({ locale: localeKey, namespace: "homepage" });
 
   return await buildLocalizedMetadata({
     locale: localeKey,
     pathname: "/",
-    title: siteSettings.locales[localeKey].siteName,
-    description: t("heroText"),
+    title: t("meta.title"),
+    description: t("meta.description"),
     applyTitleTemplate: false,
   });
 }
@@ -59,100 +61,184 @@ export async function generateMetadata({ params }: HomePageProps): Promise<Metad
 export default async function HomePage({ params }: HomePageProps) {
   await params;
   const siteSettings = await getSiteSettings();
-  const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
-  const [t, marqueeSettings] = await Promise.all([
+  const localeKey = resolveLocale(
+    await getLocale().catch(() => siteSettings.defaultLocale),
+    siteSettings.defaultLocale,
+  );
+
+  const [t, marqueeSettings, publishedProjects] = await Promise.all([
     getTranslations({ locale: localeKey, namespace: "homepage" }),
     getMarqueeSettings(),
+    getPublishedPortfolioProjects(),
   ]);
-  const serviceItems = [
-    t("serviceBrand"),
-    t("serviceWebsite"),
-    t("serviceStore"),
-    t("serviceWordPress"),
-    t("serviceSeo"),
-    t("serviceTracking"),
-    t("serviceSystem"),
-  ];
+
+  const bentoCopy: BentoSectionCopy = {
+    eyebrow: t("bento.eyebrow"),
+    title: t("bento.title"),
+    description: t("bento.description"),
+    about: {
+      eyebrow: 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"),
+      title: t("bento.coreStack.title"),
+      items: t.raw("bento.coreStack.items") as string[],
+    },
+    availability: {
+      eyebrow: 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"),
+      title: t("bento.currentFocus.title"),
+      items: t.raw("bento.currentFocus.items") as string[],
+    },
+    contact: {
+      eyebrow: 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"),
+      title: t("bento.highlights.title"),
+      items: t.raw("bento.highlights.items") as Array<{ value: string; label: string }>,
+    },
+  };
+
+  const marqueeCopy: MarqueeSectionCopy = {
+    eyebrow: t("marquee.eyebrow"),
+    title: t("marquee.title"),
+    description: t("marquee.description"),
+  };
+
+  const projectsCopy: ProjectsSectionCopy = {
+    eyebrow: t("projects.eyebrow"),
+    title: t("projects.title"),
+    description: t("projects.description"),
+    stackLabel: t("projects.stackLabel"),
+    fallbackItems: t.raw("projects.fallbackItems") as ProjectsSectionCopy["fallbackItems"],
+  };
+
+  const capabilitiesCopy: CapabilitiesSectionCopy = {
+    eyebrow: t("capabilities.eyebrow"),
+    title: t("capabilities.title"),
+    description: t("capabilities.description"),
+    items: t.raw("capabilities.items") as CapabilitiesSectionCopy["items"],
+  };
+
+  const processCopy: ProcessSectionCopy = {
+    eyebrow: t("process.eyebrow"),
+    title: t("process.title"),
+    description: t("process.description"),
+    steps: t.raw("process.steps") as ProcessSectionCopy["steps"],
+  };
+
+  const contactCtaCopy: ContactCtaSectionCopy = {
+    eyebrow: t("contactCta.eyebrow"),
+    title: t("contactCta.title"),
+    description: t("contactCta.description"),
+    contactCta: t("contactCta.contactCta"),
+    githubCta: t("contactCta.githubCta"),
+    emailLabel: t("contactCta.emailLabel"),
+    emailValue: t("contactCta.emailValue"),
+    availabilityLabel: t("contactCta.availabilityLabel"),
+    availabilityValue: t("contactCta.availabilityValue"),
+    githubHref: t("contactCta.githubHref"),
+  };
+
   const marqueeLocale = marqueeSettings.locales[localeKey];
-  const marqueeRows: MarqueeRow[] = [
+  const marqueeRows = [
     { direction: "left", duration: 126, items: splitMarqueeRowItems(marqueeLocale.row1) },
     { direction: "right", duration: 220, items: splitMarqueeRowItems(marqueeLocale.row2) },
     { direction: "left", duration: 168, items: splitMarqueeRowItems(marqueeLocale.row3) },
     { direction: "right", duration: 144, items: splitMarqueeRowItems(marqueeLocale.row4) },
-  ];
+  ] satisfies MarqueeRow[];
+
+  const portfolioHref = getLocalizedPath(localeKey, "/portfolio", siteSettings.defaultLocale);
+  const contactHref = getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale);
+  const stackSets = t.raw("projects.stackSets") as string[][];
+
+  const selectedProjects = [
+    ...publishedProjects.filter((project) => project.isFeatured),
+    ...publishedProjects.filter((project) => !project.isFeatured),
+  ].slice(0, 3);
+
+  const projectCards: ProjectCardCopy[] = selectedProjects.map((project, index) => ({
+    title: getLocalizedValue(project.title, localeKey),
+    summary: getLocalizedValue(project.summary, localeKey),
+    stack: stackSets[index] ?? stackSets[stackSets.length - 1] ?? [],
+    href: getLocalizedPath(
+      localeKey,
+      `/portfolio/${project.slug}`,
+      siteSettings.defaultLocale,
+    ),
+    cta: t("projects.cta"),
+    meta: [
+      getLocalizedValue(project.category.name, localeKey),
+      getLocalizedValue(project.serviceLabel, localeKey),
+      String(project.projectYear),
+    ],
+    featured: index === 0,
+  }));
+
+  const fallbackProjectCards: ProjectCardCopy[] = projectsCopy.fallbackItems.map((item) => ({
+    title: item.title,
+    summary: item.summary,
+    stack: item.stack,
+    href: item.href === "/portfolio" ? portfolioHref : item.href === "/contact" ? contactHref : item.href,
+    cta: t("projects.cta"),
+    meta: [t("projects.fallbackMeta")],
+  }));
+
+  const mergedProjectCards = [
+    ...projectCards,
+    ...fallbackProjectCards.slice(0, Math.max(0, 3 - projectCards.length)),
+  ].slice(0, 3);
 
   return (
     <>
       <HomeHero
         locale={localeKey}
-        kicker={t("heroKicker")}
-        title={t("heroTitle")}
-        description={t("heroText")}
+        kicker={t("heroVisual.kicker")}
+        title={t("heroVisual.title")}
+        description={t("heroVisual.description")}
       />
 
-      <Container id="home-content" className="relative z-10 -mt-6 flex scroll-mt-28 flex-col gap-section pb-12 lg:-mt-8 lg:pb-16">
-        <MotionFade delay={0.05}>
-          <AppCard className="overflow-hidden">
-            <CardContent className="p-6 lg:p-10">
-              <div className="grid gap-8 lg:grid-cols-[minmax(0,1.05fr)_minmax(0,1fr)] lg:items-start">
-                <div>
-                  <p className="text-sm font-medium tracking-[0.08em] text-foreground/56">
-                    {t("servicesEyebrow")}
-                  </p>
-                  <h2 className="mt-4 max-w-[12ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl">
-                    {t("servicesTitle")}
-                  </h2>
-                  <p className="mt-5 max-w-[34rem] text-sm leading-7 text-muted-foreground sm:text-base">
-                    {t("servicesText")}
-                  </p>
-                  <div className="mt-8 flex flex-wrap gap-3">
-                    <Button asChild size="lg" className="min-w-[11rem]">
-                      <Link href={getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale)}>
-                        {t("servicesPrimaryCta")}
-                        <ArrowRight className="h-4 w-4" />
-                      </Link>
-                    </Button>
-                    <Button
-                      asChild
-                      size="lg"
-                      variant="outline"
-                      className="min-w-[11rem] border-border/80 bg-background/70 hover:bg-background"
-                    >
-                      <Link href={getLocalizedPath(localeKey, "/portfolio", siteSettings.defaultLocale)}>
-                        {t("servicesSecondaryCta")}
-                      </Link>
-                    </Button>
-                  </div>
-                </div>
+      <Container
+        id="home-content"
+        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} />
+        </MotionFade>
 
-                <div className="grid gap-3 sm:grid-cols-2">
-                  {serviceItems.map((item, index) => {
-                    const Icon = serviceIcons[index];
+        <MotionFade delay={0.06}>
+          <MarqueeSection copy={marqueeCopy} rows={marqueeRows} />
+        </MotionFade>
 
-                    return (
-                      <AppCard
-                        key={item}
-                        layer="single"
-                        interactive
-                        className="h-full"
-                      >
-                        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[linear-gradient(135deg,hsl(var(--hero-left)/0.42),hsl(var(--hero-right)/0.26))]">
-                          <Icon className="h-5 w-5 text-foreground/78" />
-                        </div>
-                        <p className="mt-4 text-sm font-medium leading-6 text-foreground/88 sm:text-base">
-                          {item}
-                        </p>
-                      </AppCard>
-                    );
-                  })}
-                </div>
-              </div>
-            </CardContent>
-          </AppCard>
+        <MotionFade delay={0.08}>
+          <ProjectsSection copy={projectsCopy} items={mergedProjectCards} />
+        </MotionFade>
+
+        <MotionFade delay={0.1}>
+          <CapabilitiesSection copy={capabilitiesCopy} />
+        </MotionFade>
+
+        <MotionFade delay={0.12}>
+          <ProcessSection copy={processCopy} />
+        </MotionFade>
+
+        <MotionFade delay={0.14}>
+          <ContactCtaSection copy={contactCtaCopy} contactHref={contactHref} />
         </MotionFade>
       </Container>
-
-      <StackedMarqueeSection rows={marqueeRows} className="relative z-10 mt-2 pb-10 sm:pb-12 lg:pb-14" />
     </>
   );
 }