Refine global card system

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

@@ -1,14 +1,29 @@
 import type { Metadata } from "next";
-import { Compass, Layers3, Users } from "lucide-react";
+import {
+  ArrowRight,
+  Blocks,
+  BriefcaseBusiness,
+  Compass,
+  Layers3,
+  MessageSquareMore,
+  Sparkles,
+  Workflow,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
+import { SiteLogo } from "@/components/layout/site-logo";
 import { MotionFade } from "@/components/motion-fade";
-import { buildLocalizedMetadata } from "@/lib/metadata";
-import { resolveLocale } from "@/lib/locale";
 import { AppCard } from "@/components/ui/app-card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import { CardContent } from "@/components/ui/card";
+import { getSiteSettings, getSiteSettingsMediaBindings } from "@/lib/app-config";
+import { getLocalizedPath, resolveLocale } from "@/lib/locale";
+import { buildLocalizedMetadata } from "@/lib/metadata";
 
 type AboutPageProps = {
   params: {
@@ -16,6 +31,8 @@ type AboutPageProps = {
   };
 };
 
+export const dynamic = "force-dynamic";
+
 export async function generateMetadata({
   params: { locale },
 }: AboutPageProps): Promise<Metadata> {
@@ -32,7 +49,68 @@ export async function generateMetadata({
 
 export default async function AboutPage({ params: { locale } }: AboutPageProps) {
   const localeKey = resolveLocale(locale);
-  const t = await getTranslations({ locale: localeKey, namespace: "aboutPage" });
+  const [t, siteSettings, mediaBindings] = await Promise.all([
+    getTranslations({ locale: localeKey, namespace: "aboutPage" }),
+    getSiteSettings(),
+    getSiteSettingsMediaBindings(),
+  ]);
+  const siteName = siteSettings.locales[localeKey].siteName;
+
+  const valueItems = [
+    {
+      icon: Compass,
+      title: t("valueA"),
+      text: t("valueAText"),
+    },
+    {
+      icon: Layers3,
+      title: t("valueB"),
+      text: t("valueBText"),
+    },
+    {
+      icon: MessageSquareMore,
+      title: t("valueC"),
+      text: t("valueCText"),
+    },
+  ];
+
+  const processItems = [
+    {
+      icon: Sparkles,
+      title: t("processOne"),
+      text: t("processOneText"),
+    },
+    {
+      icon: Blocks,
+      title: t("processTwo"),
+      text: t("processTwoText"),
+    },
+    {
+      icon: Workflow,
+      title: t("processThree"),
+      text: t("processThreeText"),
+    },
+  ];
+
+  const statItems = [
+    {
+      value: t("statOneValue"),
+      label: t("statOneLabel"),
+      text: t("statOneText"),
+    },
+    {
+      value: t("statTwoValue"),
+      label: t("statTwoLabel"),
+      text: t("statTwoText"),
+    },
+    {
+      value: t("statThreeValue"),
+      label: t("statThreeLabel"),
+      text: t("statThreeText"),
+    },
+  ];
+
+  const highlightItems = [t("highlightOne"), t("highlightTwo"), t("highlightThree")];
 
   return (
     <>
@@ -43,70 +121,222 @@ export default async function AboutPage({ params: { locale } }: AboutPageProps)
         description={t("intro")}
       />
 
-      <Container className="flex flex-col gap-section pb-12 lg:pb-16">
+      <Container className="relative z-10 flex flex-col gap-6 pb-12 lg:pb-16">
         <MotionFade delay={0.05}>
-        <AppCard>
-          <CardContent className="p-6 lg:p-8">
-            <h2 className="text-2xl font-semibold text-foreground">
-              {t("valuesTitle")}
-            </h2>
-            <div className="mt-6 grid gap-4 md:grid-cols-3">
-              {[
-                {
-                  icon: Compass,
-                  title: t("valueA"),
-                  text: t("valueAText"),
-                },
-                {
-                  icon: Layers3,
-                  title: t("valueB"),
-                  text: t("valueBText"),
-                },
-                {
-                  icon: Users,
-                  title: t("valueC"),
-                  text: t("valueCText"),
-                },
-              ].map((item) => {
+          <section className="grid gap-6 lg:grid-cols-12">
+            <AppCard className="overflow-hidden lg:col-span-7">
+              <CardContent className="p-6 lg:p-8">
+                <Badge
+                  variant="outline"
+                  className="border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                >
+                  {t("storyEyebrow")}
+                </Badge>
+
+                <h2 className="mt-5 max-w-[11ch] text-balance text-4xl font-semibold leading-[0.92] tracking-[-0.06em] text-foreground sm:text-5xl lg:text-6xl">
+                  {t("storyTitle")}
+                </h2>
+
+                <div className="mt-6 grid gap-5 lg:grid-cols-[minmax(0,1fr)_minmax(12rem,15rem)] lg:items-start">
+                  <div className="space-y-4">
+                    <p className="text-sm leading-7 text-muted-foreground sm:text-base">
+                      {t("storyTextOne")}
+                    </p>
+                    <p className="text-sm leading-7 text-muted-foreground sm:text-base">
+                      {t("storyTextTwo")}
+                    </p>
+                  </div>
+
+                  <div className="grid gap-3">
+                    {highlightItems.map((item) => (
+                      <AppCard key={item} padding="sm" className="text-sm font-medium leading-6 text-foreground/84">
+                        {item}
+                      </AppCard>
+                    ))}
+                  </div>
+                </div>
+
+                <div className="mt-8 flex flex-wrap gap-3">
+                  <Button asChild size="lg" className="min-w-[11rem]">
+                    <Link href={getLocalizedPath(localeKey, "/contact")}>
+                      {t("primaryCta")}
+                      <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")}>
+                      {t("secondaryCta")}
+                    </Link>
+                  </Button>
+                </div>
+              </CardContent>
+            </AppCard>
+
+            <AppCard className="overflow-hidden lg:col-span-5">
+              <CardContent className="p-5">
+                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+                  <AppCard className="sm:col-span-2 lg:col-span-4">
+                    <CardContent className="p-4">
+                    <div className="flex items-center justify-between gap-4">
+                      <div>
+                        <p className="text-xs font-medium uppercase tracking-[0.18em] text-foreground/48">
+                          {t("logoEyebrow")}
+                        </p>
+                        <p className="mt-2 max-w-[16rem] text-sm leading-6 text-muted-foreground">
+                          {t("logoText")}
+                        </p>
+                      </div>
+                      <SiteLogo
+                        alt={siteName}
+                        priority
+                        lightLogoUrl={mediaBindings.siteLogoLight?.url}
+                        darkLogoUrl={mediaBindings.siteLogoDark?.url}
+                        className="h-10 sm:h-11"
+                      />
+                    </div>
+                    </CardContent>
+                  </AppCard>
+
+                  <AppCard padding="none" className="overflow-hidden sm:col-span-1 lg:col-span-2">
+                    <div className="relative min-h-[9rem] overflow-hidden rounded-nested">
+                      <Image
+                        src="/uploads/portfolio/demo-cover.svg"
+                        alt={t("galleryAltOne")}
+                        fill
+                        sizes="(min-width: 1024px) 16rem, (min-width: 640px) 50vw, 100vw"
+                        className="object-cover"
+                      />
+                    </div>
+                  </AppCard>
+
+                  <AppCard className="min-h-[9rem] sm:col-span-1 lg:col-span-2">
+                    <CardContent className="flex h-full flex-col justify-between p-4">
+                      <div className="flex items-center gap-3 text-foreground/86">
+                        <BriefcaseBusiness className="h-5 w-5 text-brand-primary" />
+                        <span className="text-sm font-medium">{t("availabilityLabel")}</span>
+                      </div>
+                      <p className="text-sm leading-6 text-muted-foreground">
+                        {t("availabilityText")}
+                      </p>
+                    </CardContent>
+                  </AppCard>
+
+                  <AppCard padding="none" className="overflow-hidden sm:col-span-2 lg:col-span-4">
+                    <div className="relative min-h-[13rem] overflow-hidden rounded-nested">
+                      <Image
+                        src="/uploads/portfolio/demo-cover.svg"
+                        alt={t("galleryAltTwo")}
+                        fill
+                        sizes="(min-width: 1024px) 28rem, (min-width: 640px) 100vw, 100vw"
+                        className="object-cover"
+                      />
+                    </div>
+                  </AppCard>
+                </div>
+              </CardContent>
+            </AppCard>
+          </section>
+        </MotionFade>
+
+        <MotionFade delay={0.1}>
+          <section className="grid gap-6 lg:grid-cols-12">
+            <AppCard className="lg:col-span-3">
+              <CardContent className="flex h-full flex-col p-6">
+                <Badge
+                  variant="outline"
+                  className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                >
+                  {t("valuesEyebrow")}
+                </Badge>
+                <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
+                  {t("valuesTitle")}
+                </h2>
+                <p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
+                  {t("valuesIntro")}
+                </p>
+              </CardContent>
+            </AppCard>
+
+            {valueItems.map((item) => {
+              const Icon = item.icon;
+
+              return (
+                <AppCard key={item.title} className="lg:col-span-3">
+                  <CardContent className="p-5">
+                    <div className="flex h-11 w-11 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/80" />
+                    </div>
+                    <h3 className="mt-4 text-lg font-semibold text-foreground">{item.title}</h3>
+                    <p className="mt-3 text-sm leading-6 text-muted-foreground">{item.text}</p>
+                  </CardContent>
+                </AppCard>
+              );
+            })}
+          </section>
+        </MotionFade>
+
+        <MotionFade delay={0.15}>
+          <section className="grid gap-6 lg:grid-cols-12">
+            <AppCard className="lg:col-span-4">
+              <CardContent className="flex h-full flex-col p-6 lg:p-7">
+                <Badge
+                  variant="outline"
+                  className="w-fit border-border/70 bg-background/80 px-3 py-1.5 text-[0.72rem] font-semibold tracking-[0.18em] text-foreground/60"
+                >
+                  {t("processEyebrow")}
+                </Badge>
+                <h2 className="mt-4 text-3xl font-semibold tracking-[-0.04em] text-foreground sm:text-4xl">
+                  {t("processTitle")}
+                </h2>
+                <p className="mt-4 max-w-[28rem] text-sm leading-7 text-muted-foreground">
+                  {t("processIntro")}
+                </p>
+
+                <div className="mt-6 grid gap-3 sm:grid-cols-3 lg:grid-cols-1">
+                  {statItems.map((item) => (
+                    <AppCard key={item.label} layer="single" padding="sm" className="shadow-none">
+                      <p className="text-3xl font-semibold tracking-[-0.05em] text-foreground">
+                        {item.value}
+                      </p>
+                      <h3 className="mt-2 text-sm font-semibold uppercase tracking-[0.14em] text-foreground/58">
+                        {item.label}
+                      </h3>
+                      <p className="mt-2 text-sm leading-6 text-muted-foreground">{item.text}</p>
+                    </AppCard>
+                  ))}
+                </div>
+              </CardContent>
+            </AppCard>
+
+            <div className="grid gap-6 lg:col-span-8 lg:grid-cols-2">
+              {processItems.map((item, index) => {
                 const Icon = item.icon;
+                const isWide = index === 0;
 
                 return (
-                  <AppCard key={item.title} level={2}>
-                    <CardContent className="p-5">
-                      <Icon className="h-5 w-5 text-brand-primary" />
-                      <h3 className="mt-3 text-lg font-semibold text-foreground">
-                        {item.title}
-                      </h3>
-                      <p className="mt-2 text-sm text-muted-foreground">{item.text}</p>
+                  <AppCard key={item.title} className={isWide ? "lg:col-span-2" : ""}>
+                    <CardContent className="p-5 lg:p-6">
+                      <div className="flex items-center justify-between gap-4">
+                        <span className="inline-flex h-8 min-w-[2.5rem] items-center justify-center rounded-pill border border-border/70 px-3 text-xs font-semibold tracking-[0.18em] text-foreground/60">
+                          0{index + 1}
+                        </span>
+                        <Icon className="h-5 w-5 text-brand-primary" />
+                      </div>
+                      <h3 className="mt-5 text-xl font-semibold text-foreground">{item.title}</h3>
+                      <p className="mt-3 max-w-[34rem] text-sm leading-6 text-muted-foreground">
+                        {item.text}
+                      </p>
                     </CardContent>
                   </AppCard>
                 );
               })}
             </div>
-          </CardContent>
-        </AppCard>
-        </MotionFade>
-
-        <MotionFade delay={0.1}>
-        <AppCard>
-          <CardContent className="p-6 lg:p-8">
-            <h2 className="text-2xl font-semibold text-foreground">
-              {t("processTitle")}
-            </h2>
-            <ol className="mt-5 grid gap-3 sm:grid-cols-3">
-              {[t("processOne"), t("processTwo"), t("processThree")].map((step, index) => (
-                <AppCard key={step} level={2}>
-                  <CardContent className="p-4">
-                    <span className="mb-2 inline-flex h-6 w-6 items-center justify-center rounded-full bg-muted text-xs font-semibold text-foreground/80">
-                      {index + 1}
-                    </span>
-                    <p className="text-sm text-foreground/80">{step}</p>
-                  </CardContent>
-                </AppCard>
-              ))}
-            </ol>
-          </CardContent>
-        </AppCard>
+          </section>
         </MotionFade>
       </Container>
     </>

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

@@ -133,9 +133,11 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
                     const Icon = serviceIcons[index];
 
                     return (
-                      <div
+                      <AppCard
                         key={item}
-                        className="rounded-nested border border-border/70 bg-background/80 p-4 shadow-xs transition-colors hover:bg-accent/40"
+                        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" />
@@ -143,7 +145,7 @@ export default async function HomePage({ params: { locale } }: HomePageProps) {
                         <p className="mt-4 text-sm font-medium leading-6 text-foreground/88 sm:text-base">
                           {item}
                         </p>
-                      </div>
+                      </AppCard>
                     );
                   })}
                 </div>