sass-mohfarawati/app/[locale]/(site)/page.tsx

import type { Metadata } from "next";
import {
  ArrowRight,
  BadgeCheck,
  Blocks,
  BriefcaseBusiness,
  ChartNoAxesCombined,
  Globe,
  Package2,
  Search,
} from "lucide-react";
import Link from "next/link";
import { 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 { getSiteSettings } from "@/lib/app-config";
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";

type HomePageProps = {
  params: {
    locale: string;
  };
};

const serviceIcons = [
  BriefcaseBusiness,
  Globe,
  Package2,
  Blocks,
  Search,
  ChartNoAxesCombined,
  BadgeCheck,
];

export const dynamic = "force-dynamic";

export async function generateMetadata({
  params: { locale },
}: HomePageProps): Promise<Metadata> {
  const localeKey = resolveLocale(locale);
  const [t, siteSettings] = await Promise.all([
    getTranslations({ locale: localeKey, namespace: "homepage" }),
    getSiteSettings(),
  ]);

  return await buildLocalizedMetadata({
    locale: localeKey,
    pathname: "/",
    title: siteSettings.locales[localeKey].siteName,
    description: t("heroText"),
    applyTitleTemplate: false,
  });
}

export default async function HomePage({ params: { locale } }: HomePageProps) {
  const localeKey = resolveLocale(locale);
  const t = await getTranslations({ locale: localeKey, namespace: "homepage" });
  const serviceItems = [
    t("serviceBrand"),
    t("serviceWebsite"),
    t("serviceStore"),
    t("serviceWordPress"),
    t("serviceSeo"),
    t("serviceTracking"),
    t("serviceSystem"),
  ];

  return (
    <>
      <HomeHero
        locale={localeKey}
        kicker={t("heroKicker")}
        title={t("heroTitle")}
        description={t("heroText")}
      />

      <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 border border-border/70 bg-[linear-gradient(145deg,rgba(255,255,255,0.82),rgba(236,240,251,0.72))] text-foreground shadow-[0_24px_64px_-40px_rgba(15,23,42,0.28)] backdrop-blur-xl dark:border-white/10 dark:bg-[linear-gradient(145deg,rgba(17,24,39,0.78),rgba(10,16,30,0.7))] dark:text-primary-foreground"
          >
            <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 dark:text-primary-foreground/62">
                    {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 dark:text-primary-foreground">
                    {t("servicesTitle")}
                  </h2>
                  <p className="mt-5 max-w-[34rem] text-sm leading-7 text-muted-foreground sm:text-base dark:text-primary-foreground/76">
                    {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")}>
                        {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 dark:border-white/16 dark:bg-white/6 dark:text-primary-foreground dark:hover:bg-white/10 dark:hover:text-primary-foreground"
                    >
                      <Link href={getLocalizedPath(localeKey, "/portfolio")}>
                        {t("servicesSecondaryCta")}
                      </Link>
                    </Button>
                  </div>
                </div>

                <div className="grid gap-3 sm:grid-cols-2">
                  {serviceItems.map((item, index) => {
                    const Icon = serviceIcons[index];

                    return (
                      <div
                        key={item}
                        className="rounded-nested border border-border/70 bg-white/54 p-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.5)] transition-colors hover:bg-white/78 dark:border-white/10 dark:bg-white/6 dark:shadow-[inset_0_1px_0_rgba(255,255,255,0.08)] dark:hover:bg-white/8"
                      >
                        <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))] dark:bg-[linear-gradient(135deg,rgba(99,125,214,0.18),rgba(192,137,170,0.16))]">
                          <Icon className="h-5 w-5 text-foreground/78 dark:text-primary-foreground/78" />
                        </div>
                        <p className="mt-4 text-sm font-medium leading-6 text-foreground/88 sm:text-base dark:text-primary-foreground/88">
                          {item}
                        </p>
                      </div>
                    );
                  })}
                </div>
              </div>
            </CardContent>
          </AppCard>
        </MotionFade>
      </Container>
    </>
  );
}