feat(home): hero availability status and CTAs

The homepage hero had no call to action (Phase 0 finding). Add a live
availability pill and primary/secondary CTAs while keeping the signature title.

- HomeHero: optional availability status pill (pulsing dot) plus primary
  (view work) and secondary (contact) CTAs, RTL-aware arrow, using the type
  scale. Backward compatible (all new props optional).
- Wire copy + hrefs from the homepage; add heroVisual.primaryCta /
  secondaryCta to en/de/ar.

Verified: JSON valid, eslint clean, no new type errors.

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

@@ -204,6 +204,9 @@ export default async function HomePage({ params }: HomePageProps) {
         kicker={t("heroVisual.kicker")}
         title={t("heroVisual.title")}
         description={t("heroVisual.description")}
+        availability={contactCtaCopy.availabilityValue}
+        primaryCta={{ label: t("heroVisual.primaryCta"), href: portfolioHref }}
+        secondaryCta={{ label: t("heroVisual.secondaryCta"), href: contactHref }}
       />
 
       <Container

components/layout/home-hero.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { ArrowLeft, ArrowRight, Mail } from "lucide-react";
+import Link from "next/link";
+
 import { HeroBadge } from "@/components/layout/hero-badge";
 import {
   HeroContentMotion,
@@ -7,12 +10,21 @@ import {
   HeroShell,
   HeroTitle,
 } from "@/components/layout/site-hero";
+import { Button } from "@/components/ui/button";
+
+type HeroCta = {
+  label: string;
+  href: string;
+};
 
 type HomeHeroProps = {
   locale: string;
   kicker: string;
   title: string;
   description: string;
+  availability?: string;
+  primaryCta?: HeroCta;
+  secondaryCta?: HeroCta;
 };
 
 export function HomeHero({
@@ -20,9 +32,13 @@ export function HomeHero({
   kicker,
   title,
   description,
+  availability,
+  primaryCta,
+  secondaryCta,
 }: HomeHeroProps) {
   const titleLines = title.split("\n").filter(Boolean);
   const isArabic = locale === "ar";
+  const DirectionIcon = isArabic ? ArrowLeft : ArrowRight;
   const lines = isArabic
     ? [
         {
@@ -67,13 +83,22 @@ export function HomeHero({
   return (
     <HeroShell showBridges>
       <HeroContentMotion variant="home">
+        {availability ? (
+          <HeroMotionItem variant="home">
+            <span className="inline-flex items-center gap-2.5 rounded-pill border border-foreground/10 bg-background/55 px-3.5 py-1.5 text-caption font-medium text-foreground/70 shadow-[var(--shadow-sm)] backdrop-blur-[18px]">
+              <span className="relative flex h-2 w-2">
+                <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-status-success opacity-70" />
+                <span className="relative inline-flex h-2 w-2 rounded-full bg-status-success" />
+              </span>
+              {availability}
+            </span>
+          </HeroMotionItem>
+        ) : null}
+
         <HeroMotionItem variant="home">
           <HeroBadge
             trailing={
-            <span
-              aria-hidden="true"
-              className="text-[0.95rem] leading-none"
-            >
+              <span aria-hidden="true" className="text-[0.95rem] leading-none">
                 👋
               </span>
             }
@@ -81,12 +106,37 @@ export function HomeHero({
             {kicker}
           </HeroBadge>
         </HeroMotionItem>
+
         <HeroTitle locale={locale} lines={lines} />
+
         <HeroMotionItem variant="home">
-          <p className="mx-auto mt-7 max-w-[33rem] whitespace-pre-line text-sm leading-7 text-foreground/68 sm:text-base sm:leading-8">
+          <p className="mx-auto mt-7 max-w-[33rem] whitespace-pre-line text-body text-foreground/68">
             {description}
           </p>
         </HeroMotionItem>
+
+        {primaryCta || secondaryCta ? (
+          <HeroMotionItem variant="home">
+            <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row">
+              {primaryCta ? (
+                <Button asChild size="lg" className="w-full sm:w-auto">
+                  <Link href={primaryCta.href}>
+                    {primaryCta.label}
+                    <DirectionIcon className="h-4 w-4" />
+                  </Link>
+                </Button>
+              ) : null}
+              {secondaryCta ? (
+                <Button asChild variant="outline" size="lg" className="w-full sm:w-auto">
+                  <Link href={secondaryCta.href}>
+                    <Mail className="h-4 w-4" />
+                    {secondaryCta.label}
+                  </Link>
+                </Button>
+              ) : null}
+            </div>
+          </HeroMotionItem>
+        ) : null}
       </HeroContentMotion>
     </HeroShell>
   );

messages/ar.json

@@ -44,6 +44,8 @@
     },
     "heroVisual": {
       "kicker": "مرحبا، أنا محمد",
+      "primaryCta": "شاهد الأعمال",
+      "secondaryCta": "تواصل معي",
       "title": "مطوّر واجهات ويب\nومصمّم جرافيك",
       "description": "أبني حلول رقمية لمشاكل حقيقية\nتبدو قوية وتعمل بكفاءة."
     },

messages/de.json

@@ -44,6 +44,8 @@
     },
     "heroVisual": {
       "kicker": "Hi, ich bin Moh",
+      "primaryCta": "Arbeiten ansehen",
+      "secondaryCta": "Kontakt aufnehmen",
       "title": "frontend\ndeveloper\n& designer",
       "description": "Ich entwickle digitale Loesungen fuer echte Probleme,\ndie gut aussehen und sauber funktionieren."
     },

messages/en.json

@@ -44,6 +44,8 @@
     },
     "heroVisual": {
       "kicker": "Hi, I am Moh",
+      "primaryCta": "View work",
+      "secondaryCta": "Get in touch",
       "title": "frontend\ndeveloper\n& designer",
       "description": "I craft digital solutions for human problems\nthat look good and work well."
     },