diff --git a/www/src/components/Hero.astro b/www/src/components/Hero.astro
deleted file mode 100644
index 40aac64..0000000
--- a/www/src/components/Hero.astro
+++ /dev/null
@@ -1,24 +0,0 @@
----
-interface Props { title: string; eyebrow?: string; description?: string; image?: string; alt?: string; }
-const { title, eyebrow, description, image, alt = '' } = Astro.props;
----
-<section class="hero">
-  <div class="container hero-grid">
-    <div>
-      {eyebrow && <p class="eyebrow">{eyebrow}</p>}
-      <h1>{title}</h1>
-      {description && <p class="hero-copy">{description}</p>}
-      <a class="button" href="/client-consultation">Get Started</a>
-    </div>
-    {image && <img src={image} alt={alt} loading="eager" />}
-  </div>
-</section>
-
-<style>
-  .hero { background: var(--color-tint); overflow: hidden; padding-block: clamp(3rem, 7vw, 5rem); }
-  .hero-grid { align-items: center; display: grid; gap: var(--space-xl); grid-template-columns: 1.05fr .95fr; }
-  .hero img { max-height: 430px; object-fit: contain; width: 100%; }
-  @media (max-width: 950px) {
-    .hero-grid { grid-template-columns: 1fr; }
-  }
-</style>
diff --git a/www/src/pages/ar/index.astro b/www/src/pages/ar/index.astro
index 6dfc18a..d86428e 100644
--- a/www/src/pages/ar/index.astro
+++ b/www/src/pages/ar/index.astro
@@ -1,11 +1,11 @@
 ---
 import { getCollection } from 'astro:content';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import Hero from '../../components/Hero.astro';
+import HomeHero from '../../components/home/HomeHero.astro';
 import BlogCard from '../../components/BlogCard.astro';
 const posts = (await getCollection('blog', ({ data }) => data.lang === 'ar' && !data.draft)).slice(0, 3);
 ---
 <BaseLayout title="معهد أريزونا للتوحد" description="موارد ودعم للأسر والأطفال المصابين بالتوحد." canonical="https://www.azinstitute4autism.com/ar" lang="ar">
-  <Hero eyebrow="Arizona Institute for Autism" title="الصحة السلوكية والتعليم الخاص" description="محتوى عربي متاح من مكتبة معهد أريزونا للتوحد." image="/assets/images/playing-boy.webp" alt="" />
+  <HomeHero section={{ type: 'hero', eyebrow: 'Arizona Institute for Autism', heading: 'الصحة السلوكية والتعليم الخاص', body: 'محتوى عربي متاح من مكتبة معهد أريزونا للتوحد.', cta: { label: 'ابدأ الآن', href: '/ar' }, image: 'playing-boy.webp', imageAlt: '' }} />
   <section class="section"><div class="container"><div class="section-heading"><h2>المكتبة</h2></div><div class="card-grid">{posts.map((post) => <BlogCard post={post} prefix="/ar" />)}</div></div></section>
 </BaseLayout>