update

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

@@ -3,9 +3,19 @@ import { getLocale, getTranslations } from "next-intl/server";
 
 import { Container } from "@/components/layout/container";
 import { PageHero } from "@/components/layout/page-hero";
+import { MotionFade } from "@/components/motion-fade";
 import { AppCard } from "@/components/ui/app-card";
+import { Badge } from "@/components/ui/badge";
+import { CapabilitiesSection } from "@/components/home/capabilities-section";
+import { ProcessSection } from "@/components/home/process-section";
+import { ContactCtaSection } from "@/components/home/contact-cta-section";
+import type {
+  CapabilitiesSectionCopy,
+  ContactCtaSectionCopy,
+  ProcessSectionCopy,
+} from "@/components/home/types";
 import { getSiteSettings } from "@/lib/app-config";
-import { resolveLocale } from "@/lib/locale";
+import { getLocalizedPath, resolveLocale } from "@/lib/locale";
 import { buildLocalizedMetadata } from "@/lib/metadata";
 
 type AboutPageProps = {
@@ -36,6 +46,38 @@ export default async function AboutPage({ params }: AboutPageProps) {
   const localeKey = resolveLocale(await getLocale().catch(() => siteSettings.defaultLocale), siteSettings.defaultLocale);
   const t = await getTranslations({ locale: localeKey, namespace: "aboutPage" });
 
+  const contactHref = getLocalizedPath(localeKey, "/contact", siteSettings.defaultLocale);
+
+  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 storyParagraphs = t.raw("story.paragraphs") as string[];
+  const toolItems = t.raw("tools.items") as string[];
+
   return (
     <>
       <PageHero
@@ -45,10 +87,62 @@ export default async function AboutPage({ params }: AboutPageProps) {
         description={t("description")}
       />
 
-      <Container className="pb-16 lg:pb-20">
-        <AppCard level={3} padding="lg" className="mx-auto max-w-3xl text-center">
-          <p className="text-lg font-medium text-foreground">{t("placeholder")}</p>
-        </AppCard>
+      <Container className="flex flex-col gap-16 pb-16 sm:gap-20 lg:gap-24 lg:pb-20">
+        <MotionFade>
+          <section className="mx-auto max-w-3xl space-y-6">
+            <p className="eyebrow text-caption font-medium text-brand-primary">
+              {t("story.eyebrow")}
+            </p>
+            <h2 className="text-balance text-h2 text-foreground">{t("story.title")}</h2>
+            <div className="space-y-4">
+              {storyParagraphs.map((paragraph) => (
+                <p key={paragraph} className="text-body-lg text-muted-foreground">
+                  {paragraph}
+                </p>
+              ))}
+            </div>
+          </section>
+        </MotionFade>
+
+        <MotionFade delay={0.06}>
+          <CapabilitiesSection copy={capabilitiesCopy} />
+        </MotionFade>
+
+        <MotionFade delay={0.08}>
+          <AppCard padding="lg">
+            <div className="space-y-5">
+              <div className="space-y-2">
+                <p className="eyebrow text-caption font-medium text-brand-primary">
+                  {t("tools.eyebrow")}
+                </p>
+                <h3 className="text-title font-semibold text-foreground">{t("tools.title")}</h3>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {toolItems.map((tool) => (
+                  <Badge key={tool} variant="secondary">
+                    {tool}
+                  </Badge>
+                ))}
+              </div>
+            </div>
+          </AppCard>
+        </MotionFade>
+
+        <MotionFade delay={0.1}>
+          <ProcessSection copy={processCopy} />
+        </MotionFade>
+
+        <MotionFade delay={0.12}>
+          <p className="mx-auto max-w-2xl text-center text-small text-muted-foreground">
+            <span className="text-brand-primary">{t("personalNote.eyebrow")}</span>
+            {" — "}
+            {t("personalNote.text")}
+          </p>
+        </MotionFade>
+
+        <MotionFade delay={0.14}>
+          <ContactCtaSection copy={contactCtaCopy} contactHref={contactHref} />
+        </MotionFade>
       </Container>
     </>
   );

messages/ar.json

@@ -270,9 +270,83 @@
   },
   "aboutPage": {
     "title": "من أنا",
-    "description": "نظرة مركزة على دراستي، دوري الحالي، ونوع شغل الواجهات الذي أقدمه.",
+    "description": "أنا مطور Full-Stack ومصمم جرافيك مقيم في برلين. بتنقل من الفكرة للكود - هوية بصرية وتصميم واجهات والهندسة يلي بتطلعهم عالنور.",
     "heroEyebrow": "من أنا",
-    "placeholder": "محتوى صفحة من أنا سينضاف هون قريباً."
+    "story": {
+      "eyebrow": "مين أنا",
+      "title": "بابني منتجات وبصمم كيف بتبين وكيف حاسس فيها المستخدم.",
+      "paragraphs": [
+        "أغلب المطورين بسلموا التصميم لغيرهم، وأغلب المصممين بسلموا الكود لغيرهم. أنا بعمل الاثنين - يعني فجوة أقل بين شكل المنتج وطريقة اشتغاله فعلياً.",
+        "خلفيتي بتغطي الهوية البصرية والتصميم بقد ما بتغطي TypeScript وأنظمة Backend، فبصمم وأنا حاسب حساب التنفيذ، وببني وأنا محافظ على الحس البصري."
+      ]
+    },
+    "capabilities": {
+      "eyebrow": "شو بعمل",
+      "title": "تطوير وتصميم، بشخص واحد.",
+      "description": "اختصاصين، جهة تواصل وحدة - من الهوية البصرية لحتى الكود الجاهز للإنتاج.",
+      "items": [
+        {
+          "title": "تطوير الواجهات",
+          "description": "واجهات Next.js وReact وTypeScript مبنية للسرعة والوضوح وقابلية الصيانة على المدى الطويل."
+        },
+        {
+          "title": "Backend والبيانات",
+          "description": "Node.js وPostgreSQL وPrisma - أنظمة موثوقة شغالة وراء الواجهة."
+        },
+        {
+          "title": "تصميم بصري وهوية",
+          "description": "هوية وتصميم UI وأنظمة تخطيط مصممة بـ Figma وIllustrator."
+        },
+        {
+          "title": "أتمتة وأدوات",
+          "description": "سير عمل داخلي وأدوات بتشيل الشغل اليدوي المتكرر."
+        }
+      ]
+    },
+    "tools": {
+      "eyebrow": "الأدوات",
+      "title": "الأدوات اليومية",
+      "items": ["Figma", "Adobe Illustrator", "Photoshop", "Next.js", "TypeScript", "Tailwind CSS", "Docker"]
+    },
+    "process": {
+      "eyebrow": "كيف بشتغل",
+      "title": "آلية عمل بتخلي التصميم والتطوير ماشيين مع بعض.",
+      "description": "أربع خطوات، بلا فجوة بين شكل المنتج وطريقة بناءه.",
+      "steps": [
+        {
+          "title": "Discover",
+          "description": "بفهم المشكلة والجمهور والقيود قبل ما افتح أي أداة."
+        },
+        {
+          "title": "Design",
+          "description": "الاتجاه البصري وبنية الـ UX بيتحددوا مع بعض، مش الواحد بعد التاني."
+        },
+        {
+          "title": "Build",
+          "description": "بنفذ بنفس العناية يلي كانت بالتصميم - كود نظيف وجاهز للإنتاج."
+        },
+        {
+          "title": "Refine",
+          "description": "بصقل التفاصيل، بجرب النتيجة، وبطلق المنتج بثقة."
+        }
+      ]
+    },
+    "personalNote": {
+      "eyebrow": "برا الشغل",
+      "text": "مقيم ببرلين. لما ما كون مصمم أو مبرمج، غالباً عم بحاول افهم الفرق بين الشغلتين."
+    },
+    "contactCta": {
+      "eyebrow": "ابدأ الحديث",
+      "title": "عندك مشروع محتاج تصميم وكود مع بعض؟",
+      "description": "هات الملخص أو السكتش الأولي أو بس المشكلة. أقدر أساعد أشكل الاتجاه وأصمم النظام وأبنيه.",
+      "contactCta": "تواصل معي",
+      "githubCta": "GitHub",
+      "emailLabel": "البريد الإلكتروني",
+      "emailValue": "hello@moh-sass.dev",
+      "availabilityLabel": "التوفر",
+      "availabilityValue": "مفتوح لشغل منتجات مركز",
+      "githubHref": "https://github.com/mohfarawati"
+    }
   },
   "contactPage": {
     "title": "تواصل",

messages/de.json

@@ -270,9 +270,83 @@
   },
   "aboutPage": {
     "title": "Über mich",
-    "description": "Ein fokussierter Überblick über meine Ausbildung, meine aktuelle Rolle und die Art von Frontend Arbeit, die ich liefere.",
+    "description": "Ich bin Full-Stack-Entwickler und Grafikdesigner mit Sitz in Berlin. Ich bewege mich von der Idee bis zum Code — visuelle Identität, Interface-Design und die Technik, die es live bringt.",
     "heroEyebrow": "Über mich",
-    "placeholder": "Der Inhalt der About Seite kommt bald hier hin."
+    "story": {
+      "eyebrow": "Wer ich bin",
+      "title": "Ich baue Produkte und gestalte, wie sie aussehen und sich anfühlen.",
+      "paragraphs": [
+        "Die meisten Entwickler geben Design ab. Die meisten Designer geben Code ab. Ich mache beides — dadurch gibt es weniger Lücken zwischen dem, wie ein Produkt aussieht, und dem, wie es tatsächlich funktioniert.",
+        "Mein Hintergrund reicht genauso weit in Marken- und visuelles Design wie in TypeScript und Backend-Systeme, deshalb gestalte ich mit Blick auf die Umsetzung und baue mit erhaltenem visuellem Urteilsvermögen."
+      ]
+    },
+    "capabilities": {
+      "eyebrow": "Was ich mache",
+      "title": "Entwicklung und Design, aus einer Hand.",
+      "description": "Zwei Disziplinen, ein Ansprechpartner — von der visuellen Identität bis zum produktionsreifen Code.",
+      "items": [
+        {
+          "title": "Frontend-Entwicklung",
+          "description": "Next.js-, React- und TypeScript-Interfaces, gebaut für Geschwindigkeit, Klarheit und langfristige Wartbarkeit."
+        },
+        {
+          "title": "Backend & Daten",
+          "description": "Node.js, PostgreSQL und Prisma — verlässliche Systeme hinter dem Interface."
+        },
+        {
+          "title": "Visuelles & Marken-Design",
+          "description": "Identität, UI-Design und Layout-Systeme, gestaltet in Figma und Illustrator."
+        },
+        {
+          "title": "Automatisierung & Tooling",
+          "description": "Interne Workflows und Tools, die manuelle, sich wiederholende Arbeit entfernen."
+        }
+      ]
+    },
+    "tools": {
+      "eyebrow": "Tools",
+      "title": "Täglicher Stack",
+      "items": ["Figma", "Adobe Illustrator", "Photoshop", "Next.js", "TypeScript", "Tailwind CSS", "Docker"]
+    },
+    "process": {
+      "eyebrow": "Wie ich arbeite",
+      "title": "Ein Prozess, der Design und Entwicklung im Takt hält.",
+      "description": "Vier Schritte, keine Übergabe-Lücke zwischen Aussehen und Umsetzung.",
+      "steps": [
+        {
+          "title": "Discover",
+          "description": "Problem, Zielgruppe und Rahmenbedingungen klären, bevor überhaupt ein Tool geöffnet wird."
+        },
+        {
+          "title": "Design",
+          "description": "Visuelle Richtung und UX-Struktur werden gemeinsam erarbeitet, nicht nacheinander."
+        },
+        {
+          "title": "Build",
+          "description": "Umsetzung mit derselben Sorgfalt wie im Design — sauberer, produktionsreifer Code."
+        },
+        {
+          "title": "Refine",
+          "description": "Details verfeinern, das Ergebnis testen und mit Zuversicht ausliefern."
+        }
+      ]
+    },
+    "personalNote": {
+      "eyebrow": "Feierabend",
+      "text": "Ansässig in Berlin. Wenn ich nicht gerade designe oder code, untersuche ich wahrscheinlich den Unterschied zwischen beidem."
+    },
+    "contactCta": {
+      "eyebrow": "Gespräch starten",
+      "title": "Ein Projekt, das Design und Code gleichzeitig braucht?",
+      "description": "Bring das Briefing, die grobe Skizze oder einfach das Problem mit. Ich kann die Richtung formen, das System entwerfen und es bauen.",
+      "contactCta": "Kontakt aufnehmen",
+      "githubCta": "GitHub",
+      "emailLabel": "E-Mail",
+      "emailValue": "hello@moh-sass.dev",
+      "availabilityLabel": "Verfügbarkeit",
+      "availabilityValue": "Offen für fokussierte Produktarbeit",
+      "githubHref": "https://github.com/mohfarawati"
+    }
   },
   "contactPage": {
     "title": "Kontakt",

messages/en.json

@@ -270,9 +270,83 @@
   },
   "aboutPage": {
     "title": "About",
-    "description": "A focused overview of my education, current role, and the kind of frontend work I deliver.",
+    "description": "I'm a full-stack developer and graphic designer based in Berlin. I move from concept to code — visual identity, interface design, and the engineering that ships it.",
     "heroEyebrow": "About",
-    "placeholder": "About page content will be added here soon."
+    "story": {
+      "eyebrow": "Who I am",
+      "title": "I build products and design the way they look and feel.",
+      "paragraphs": [
+        "Most developers hand off design. Most designers hand off code. I do both — which means fewer gaps between how a product looks and how it actually works.",
+        "My background spans brand and visual design as much as it spans TypeScript and backend systems, so I design with implementation in mind and build with visual judgment intact."
+      ]
+    },
+    "capabilities": {
+      "eyebrow": "What I do",
+      "title": "Development and design, handled by the same person.",
+      "description": "Two disciplines, one point of contact — from visual identity to production code.",
+      "items": [
+        {
+          "title": "Frontend Development",
+          "description": "Next.js, React, and TypeScript interfaces built for speed, clarity, and long-term maintainability."
+        },
+        {
+          "title": "Backend & Data",
+          "description": "Node.js, PostgreSQL, and Prisma — reliable systems working behind the interface."
+        },
+        {
+          "title": "Visual & Brand Design",
+          "description": "Identity, UI design, and layout systems crafted in Figma and Illustrator."
+        },
+        {
+          "title": "Automation & Tooling",
+          "description": "Internal workflows and tools that remove manual, repetitive work."
+        }
+      ]
+    },
+    "tools": {
+      "eyebrow": "Tools",
+      "title": "Daily stack",
+      "items": ["Figma", "Adobe Illustrator", "Photoshop", "Next.js", "TypeScript", "Tailwind CSS", "Docker"]
+    },
+    "process": {
+      "eyebrow": "How I work",
+      "title": "A process that keeps design and engineering in sync.",
+      "description": "Four steps, no handoff gap between how it looks and how it's built.",
+      "steps": [
+        {
+          "title": "Discover",
+          "description": "Understand the problem, audience, and constraints before opening any tool."
+        },
+        {
+          "title": "Design",
+          "description": "Visual direction and UX structure worked out together, not in sequence."
+        },
+        {
+          "title": "Build",
+          "description": "Implement with the same care the design had — clean, production-ready code."
+        },
+        {
+          "title": "Refine",
+          "description": "Polish detail, test the result, and ship with confidence."
+        }
+      ]
+    },
+    "personalNote": {
+      "eyebrow": "Off the clock",
+      "text": "Based in Berlin. When I'm not designing or coding, I'm probably studying the difference between the two."
+    },
+    "contactCta": {
+      "eyebrow": "Start the conversation",
+      "title": "Have a project that needs both design and code?",
+      "description": "Bring the brief, the rough sketch, or just the problem. I can shape the direction, design the system, and build it.",
+      "contactCta": "Contact me",
+      "githubCta": "GitHub",
+      "emailLabel": "Email",
+      "emailValue": "hello@moh-sass.dev",
+      "availabilityLabel": "Availability",
+      "availabilityValue": "Open for focused product work",
+      "githubHref": "https://github.com/mohfarawati"
+    }
   },
   "contactPage": {
     "title": "Contact",