From 141f1a30be0c5889e037f1795ca30c5aa0d23b13 Mon Sep 17 00:00:00 2001
From: Alireza Hassani <alireza@Kamrans-MacBook-Pro.local>
Date: Thu, 13 Aug 2026 13:53:22 +0330
Subject: [PATCH] checkpoint before checking out main

---
 package.json                                |   2 +-
 prompt.txt                                  |  25 +++
 src/app/globals.css                         |  78 +++++++-
 src/app/layout.tsx                          |  23 ++-
 src/app/page.tsx                            |  92 +++------
 src/components/home/AboutSanihome.tsx       |  56 ++++++
 src/components/home/BlogCarousel.tsx        |  52 +++++
 src/components/home/FeatureBar.tsx          | 125 ++++++++++++
 src/components/home/FeaturedCategories.tsx  |  38 ++++
 src/components/home/Footer.tsx              |  81 ++++++++
 src/components/home/Header.tsx              | 187 ++++++++++++++++++
 src/components/home/HeroSlider.tsx          |  84 ++++++++
 src/components/home/SamsungCarousel.tsx     |  29 +++
 src/components/home/SpecialSaleCarousel.tsx |  48 +++++
 src/components/home/ThreeBanners.tsx        |  36 ++++
 src/components/home/TopBar.tsx              |  14 ++
 src/components/home/TopSellingCarousel.tsx  |  28 +++
 src/components/home/TwoBanners.tsx          |  38 ++++
 src/components/ui/Carousel.tsx              |  79 ++++++++
 src/components/ui/Placeholder.tsx           |  26 +++
 src/components/ui/ProductCard.tsx           |  63 ++++++
 src/components/ui/SectionTitle.tsx          |  36 ++++
 src/data/sample.ts                          | 201 ++++++++++++++++++++
 23 files changed, 1357 insertions(+), 84 deletions(-)
 create mode 100644 prompt.txt
 create mode 100644 src/components/home/AboutSanihome.tsx
 create mode 100644 src/components/home/BlogCarousel.tsx
 create mode 100644 src/components/home/FeatureBar.tsx
 create mode 100644 src/components/home/FeaturedCategories.tsx
 create mode 100644 src/components/home/Footer.tsx
 create mode 100644 src/components/home/Header.tsx
 create mode 100644 src/components/home/HeroSlider.tsx
 create mode 100644 src/components/home/SamsungCarousel.tsx
 create mode 100644 src/components/home/SpecialSaleCarousel.tsx
 create mode 100644 src/components/home/ThreeBanners.tsx
 create mode 100644 src/components/home/TopBar.tsx
 create mode 100644 src/components/home/TopSellingCarousel.tsx
 create mode 100644 src/components/home/TwoBanners.tsx
 create mode 100644 src/components/ui/Carousel.tsx
 create mode 100644 src/components/ui/Placeholder.tsx
 create mode 100644 src/components/ui/ProductCard.tsx
 create mode 100644 src/components/ui/SectionTitle.tsx
 create mode 100644 src/data/sample.ts

diff --git a/package.json b/package.json
index 6151a6f..686519b 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "sanihome-tmp",
+  "name": "sanihome",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/prompt.txt b/prompt.txt
new file mode 100644
index 0000000..340d913
--- /dev/null
+++ b/prompt.txt
@@ -0,0 +1,25 @@
+Create a website for home appliances store
+
+Create sample content
+Lang:fa
+Directions: rtl
+Use next js
+Color palette is red and dark red - light theme
+
+Design only homepage
+Use Persian font like iran-yekan or kalameh or iran sans and some cool English font
+Do not use images - show only placeholders with sizes
+
+Sections are:
+Top header bar
+Header 
+Slider- one slide in center and two slide beside each side be visible
+Featured categories
+Product Special sale carousel
+Two banner
+Product Top selling carousel
+3 banner
+Samsung brand product carousel
+About sanihome
+Latest blog carousel
+footer
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index a2dc41e..481eab9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,26 +1,84 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #fafafa;
+  --foreground: #1a1a1a;
+  --surface: #ffffff;
+  --muted: #6b7280;
+  --border: #e5e7eb;
+  --red: #dc2626;
+  --red-dark: #991b1b;
+  --red-light: #fef2f2;
+  --red-muted: #fca5a5;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --color-surface: var(--surface);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-red: var(--red);
+  --color-red-dark: var(--red-dark);
+  --color-red-light: var(--red-light);
+  --color-red-muted: var(--red-muted);
+  --font-sans: var(--font-vazirmatn);
+  --font-display: var(--font-syne);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+* {
+  box-sizing: border-box;
+}
+
+html {
+  scroll-behavior: smooth;
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-vazirmatn), system-ui, sans-serif;
+}
+
+.font-display {
+  font-family: var(--font-syne), var(--font-vazirmatn), sans-serif;
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(24px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.animate-fade-up {
+  animation: fade-up 0.6s ease-out both;
+}
+
+.animate-slide-in {
+  animation: slide-in 0.5s ease-out both;
+}
+
+.carousel-track {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.carousel-track::-webkit-scrollbar {
+  display: none;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 9852c15..f9056df 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,27 +1,30 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Vazirmatn, Syne } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+const vazirmatn = Vazirmatn({
+  variable: "--font-vazirmatn",
+  subsets: ["arabic", "latin"],
+  weight: ["400", "500", "600", "700"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const syne = Syne({
+  variable: "--font-syne",
   subsets: ["latin"],
+  weight: ["600", "700", "800"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "سانی‌هوم | فروشگاه لوازم خانگی",
+  description: "فروشگاه آنلاین لوازم خانگی — یخچال، لباسشویی، تلویزیون و بیشتر",
 };
 
 export default function RootLayout({ children }: LayoutProps<"/">) {
   return (
     <html
-      lang="en"
-      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+      lang="fa"
+      dir="rtl"
+      className={`${vazirmatn.variable} ${syne.variable} h-full antialiased`}
     >
       <body className="min-h-full flex flex-col">{children}</body>
     </html>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index c887311..3fef222 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,69 +1,35 @@
-import Image from "next/image";
+import { TopBar } from "@/components/home/TopBar";
+import { Header } from "@/components/home/Header";
+import { FeatureBar } from "@/components/home/FeatureBar";
+import { HeroSlider } from "@/components/home/HeroSlider";
+import { FeaturedCategories } from "@/components/home/FeaturedCategories";
+import { SpecialSaleCarousel } from "@/components/home/SpecialSaleCarousel";
+import { TwoBanners } from "@/components/home/TwoBanners";
+import { TopSellingCarousel } from "@/components/home/TopSellingCarousel";
+import { ThreeBanners } from "@/components/home/ThreeBanners";
+import { SamsungCarousel } from "@/components/home/SamsungCarousel";
+import { AboutSanihome } from "@/components/home/AboutSanihome";
+import { BlogCarousel } from "@/components/home/BlogCarousel";
+import { Footer } from "@/components/home/Footer";
 
 export default function Home() {
   return (
-    <div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert h-5 w-[100px]"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the{" "}
-            <code className="rounded bg-black/[.06] px-1.5 py-0.5 font-mono text-[0.9em] dark:bg-white/[.08]">
-              page.tsx
-            </code>{" "}
-            file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert h-[14px] w-4"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={14}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
+    <>
+      <TopBar />
+      <Header />
+      <main>
+        <HeroSlider />
+        <SpecialSaleCarousel />
+        <FeatureBar />
+        <FeaturedCategories />
+        <TwoBanners />
+        <TopSellingCarousel />
+        <ThreeBanners />
+        <SamsungCarousel />
+        <AboutSanihome />
+        <BlogCarousel />
       </main>
-    </div>
+      <Footer />
+    </>
   );
 }
diff --git a/src/components/home/AboutSanihome.tsx b/src/components/home/AboutSanihome.tsx
new file mode 100644
index 0000000..5a88011
--- /dev/null
+++ b/src/components/home/AboutSanihome.tsx
@@ -0,0 +1,56 @@
+import { Placeholder } from "@/components/ui/Placeholder";
+
+export function AboutSanihome() {
+  return (
+    <section className="border-y border-red-light bg-gradient-to-br from-red-light/40 via-surface to-background py-12 md:py-16">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="grid items-center gap-8 md:grid-cols-2">
+          <div className="animate-fade-up">
+            <div className="mb-4 flex flex-wrap items-baseline gap-x-3 gap-y-1">
+              <h2 className="text-2xl font-bold text-red-dark md:text-3xl">
+                درباره سانی‌هوم
+              </h2>
+              <span
+                className="font-display text-sm font-semibold tracking-wide text-red-dark/30 uppercase md:text-base"
+                lang="en"
+                dir="ltr"
+              >
+                About Sanihome
+              </span>
+            </div>
+            <p className="mb-4 leading-relaxed text-muted">
+              سانی‌هوم از سال ۱۳۹۰ به عنوان یکی از معتبرترین فروشگاه‌های آنلاین لوازم
+              خانگی در ایران فعالیت می‌کند. ما با ارائه محصولات اصل از برندهای
+              معتبر جهانی، گارانتی رسمی و خدمات پس از فروش، تجربه‌ای مطمئن برای
+              خرید لوازم خانگی فراهم کرده‌ایم.
+            </p>
+            <p className="mb-6 leading-relaxed text-muted">
+              تیم متخصص ما آماده مشاوره رایگان، ارسال سریع به سراسر کشور و
+              نصب حرفه‌ای در محل شماست.
+            </p>
+            <div className="grid grid-cols-3 gap-4">
+              {[
+                { value: "+15", label: "سال تجربه" },
+                { value: "+50K", label: "مشتری راضی" },
+                { value: "+200", label: "برند معتبر" },
+              ].map((stat) => (
+                <div key={stat.label} className="rounded-xl border border-border bg-surface p-4 text-center">
+                  <p className="font-display text-xl font-bold tracking-tight text-red-dark" lang="en" dir="ltr">
+                    {stat.value}
+                  </p>
+                  <p className="mt-1 text-xs text-muted">{stat.label}</p>
+                </div>
+              ))}
+            </div>
+          </div>
+          <Placeholder
+            width="100%"
+            height="360px"
+            label="560×360"
+            className="w-full rounded-2xl"
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/BlogCarousel.tsx b/src/components/home/BlogCarousel.tsx
new file mode 100644
index 0000000..18e2a73
--- /dev/null
+++ b/src/components/home/BlogCarousel.tsx
@@ -0,0 +1,52 @@
+import { Placeholder } from "@/components/ui/Placeholder";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { Carousel } from "@/components/ui/Carousel";
+import { blogPosts } from "@/data/sample";
+
+export function BlogCarousel() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <SectionTitle
+          title="آخرین مطالب وبلاگ"
+          enTitle="Latest Blog"
+          action="وبلاگ"
+        />
+        <Carousel ariaLabel="کاروسل وبلاگ">
+          {blogPosts.map((post) => (
+            <article
+              key={post.id}
+              className="w-[280px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[300px]"
+            >
+              <Placeholder
+                width="100%"
+                height="160px"
+                label="300×160"
+                className="w-full rounded-none border-0 border-b border-dashed"
+              />
+              <div className="p-4">
+                <div className="mb-2 flex items-center gap-2 text-[11px] text-muted">
+                  <span>{post.date}</span>
+                  <span>•</span>
+                  <span>{post.readTime} مطالعه</span>
+                </div>
+                <h3 className="mb-2 line-clamp-2 text-sm font-bold leading-relaxed">
+                  {post.title}
+                </h3>
+                <p className="line-clamp-2 text-xs leading-relaxed text-muted">
+                  {post.excerpt}
+                </p>
+                <button
+                  type="button"
+                  className="mt-3 text-xs font-medium text-red transition-colors hover:text-red-dark"
+                >
+                  ادامه مطلب ←
+                </button>
+              </div>
+            </article>
+          ))}
+        </Carousel>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/FeatureBar.tsx b/src/components/home/FeatureBar.tsx
new file mode 100644
index 0000000..08148e9
--- /dev/null
+++ b/src/components/home/FeatureBar.tsx
@@ -0,0 +1,125 @@
+function TruckIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden>
+      <path
+        d="M3 7h11v10H3V7Zm11 3h4l3 3v4h-7v-7Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <circle cx="7" cy="18" r="1.5" fill="currentColor" />
+      <circle cx="17" cy="18" r="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function ShieldIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden>
+      <path
+        d="M12 3 5 6v5c0 4.5 2.8 7.8 7 9 4.2-1.2 7-4.5 7-9V6l-7-3Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="m9.5 12 1.8 1.8 3.7-3.8"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ReturnIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden>
+      <path
+        d="M7 7H3v4"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.5 11A8 8 0 1 0 5 7.5"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+function ReviewIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-6 w-6" aria-hidden>
+      <path
+        d="M8 4h8a2 2 0 0 1 2 2v14l-6-3-6 3V6a2 2 0 0 1 2-2Z"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.5 10h5M9.5 13h3.5"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+      />
+    </svg>
+  );
+}
+
+const features = [
+  {
+    fa: "ارسال رایگان بالاتر از ۵ میلیون تومان",
+    en: "Free Shipping Over 50M",
+    Icon: TruckIcon,
+  },
+  {
+    fa: "ضمانت اصالت کالا",
+    en: "Authenticity Guarantee",
+    Icon: ShieldIcon,
+  },
+  {
+    fa: "امکان مرجوعی کالا",
+    en: "Easy Returns",
+    Icon: ReturnIcon,
+  },
+  {
+    fa: "بررسی‌های تخصصی کالا",
+    en: "Expert Reviews",
+    Icon: ReviewIcon,
+  },
+];
+
+export function FeatureBar() {
+  return (
+    <section className="border-b border-border bg-surface">
+      <div className="mx-auto max-w-7xl px-4 py-4">
+        <div className="grid grid-cols-2 gap-3 rounded-2xl border border-border bg-background p-3 md:grid-cols-4 md:gap-0 md:divide-x md:divide-x-reverse md:divide-border md:p-0">
+          {features.map(({ fa, en, Icon }) => (
+            <div
+              key={en}
+              className="flex items-center gap-3 rounded-xl bg-surface p-3 md:rounded-none md:bg-transparent md:px-5 md:py-4"
+            >
+              <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-red-light text-red">
+                <Icon />
+              </div>
+              <div className="min-w-0">
+                <p className="text-xs leading-relaxed font-medium text-foreground sm:text-sm">
+                  {fa}
+                </p>
+                <p className="font-display mt-0.5 text-[10px] tracking-wide text-muted uppercase sm:text-[11px]">
+                  {en}
+                </p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/FeaturedCategories.tsx b/src/components/home/FeaturedCategories.tsx
new file mode 100644
index 0000000..61c21c8
--- /dev/null
+++ b/src/components/home/FeaturedCategories.tsx
@@ -0,0 +1,38 @@
+import { Placeholder } from "@/components/ui/Placeholder";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { categories } from "@/data/sample";
+
+export function FeaturedCategories() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <SectionTitle
+          title="دسته‌بندی‌های پرطرفدار"
+          enTitle="Featured Categories"
+          action="همه دسته‌ها"
+        />
+        <div className="grid grid-cols-2 gap-3 sm:grid-cols-4 lg:grid-cols-8">
+          {categories.map((cat, i) => (
+            <a
+              key={cat.id}
+              href="#"
+              className="animate-slide-in group flex flex-col items-center rounded-xl border border-border bg-surface p-3 transition-all hover:border-red hover:shadow-md"
+              style={{ animationDelay: `${i * 60}ms` }}
+            >
+              <Placeholder
+                width="72px"
+                height="72px"
+                label="72×72"
+                className="mb-3 rounded-full transition-colors group-hover:border-red"
+              />
+              <span className="text-center text-xs font-medium leading-relaxed md:text-sm">
+                {cat.name}
+              </span>
+              <span className="mt-1 text-[11px] text-muted">{cat.count} محصول</span>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/Footer.tsx b/src/components/home/Footer.tsx
new file mode 100644
index 0000000..131bd76
--- /dev/null
+++ b/src/components/home/Footer.tsx
@@ -0,0 +1,81 @@
+export function Footer() {
+  return (
+    <footer className="border-t border-red-dark/20 bg-red-dark text-white">
+      <div className="mx-auto max-w-7xl px-4 py-12">
+        <div className="grid gap-8 md:grid-cols-4">
+          <div>
+            <div className="mb-4 flex items-center gap-2">
+              <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-white text-base font-bold text-red-dark">
+                S
+              </div>
+              <span className="font-display text-lg font-bold tracking-tight">
+                SANIHOME
+              </span>
+            </div>
+            <p className="text-sm leading-relaxed text-white/70">
+              فروشگاه آنلاین لوازم خانگی با بیش از ۱۵ سال سابقه. محصولات اصل،
+              گارانتی معتبر، ارسال سریع.
+            </p>
+          </div>
+
+          <div>
+            <h4 className="mb-3 text-sm font-bold">دسترسی سریع</h4>
+            <ul className="space-y-2 text-sm text-white/70">
+              {["درباره ما", "تماس با ما", "سوالات متداول", "قوانین و مقررات", "پیگیری سفارش"].map(
+                (link) => (
+                  <li key={link}>
+                    <a href="#" className="transition-colors hover:text-white">
+                      {link}
+                    </a>
+                  </li>
+                ),
+              )}
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="mb-3 text-sm font-bold">دسته‌بندی‌ها</h4>
+            <ul className="space-y-2 text-sm text-white/70">
+              {["یخچال و فریزر", "ماشین لباسشویی", "تلویزیون", "جاروبرقی", "لوازم آشپزخانه"].map(
+                (link) => (
+                  <li key={link}>
+                    <a href="#" className="transition-colors hover:text-white">
+                      {link}
+                    </a>
+                  </li>
+                ),
+              )}
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="mb-3 text-sm font-bold">تماس با ما</h4>
+            <ul className="space-y-2 text-sm text-white/70">
+              <li>تهران، خیابان ولیعصر</li>
+              <li>تلفن: ۰۲۱-۸۸۰۰۱۲۳۴</li>
+              <li>ایمیل: info@sanihome.ir</li>
+            </ul>
+            <div className="mt-4 flex gap-3">
+              {["IG", "TG", "WA"].map((social) => (
+                <a
+                  key={social}
+                  href="#"
+                  className="font-display flex h-8 w-8 items-center justify-center rounded-full border border-white/20 text-[10px] font-bold transition-colors hover:border-white hover:bg-white/10"
+                >
+                  {social}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-col items-center justify-between gap-3 border-t border-white/10 pt-6 text-xs text-white/50 md:flex-row">
+          <p>© ۱۴۰۵ سانی‌هوم — تمامی حقوق محفوظ است.</p>
+          <p className="font-display tracking-wide uppercase">
+            Designed for Sanihome
+          </p>
+        </div>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/home/Header.tsx b/src/components/home/Header.tsx
new file mode 100644
index 0000000..05575c1
--- /dev/null
+++ b/src/components/home/Header.tsx
@@ -0,0 +1,187 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { categories } from "@/data/sample";
+
+const navLinks = [
+  { label: "فروش ویژه", href: "#" },
+  { label: "درباره ما", href: "#" },
+  { label: "سوالات متداول", href: "#" },
+  { label: "تماس با ما", href: "#" },
+];
+
+const megaColumns = [
+  {
+    title: "سرمایش و گرمایش",
+    en: "Cooling & Heating",
+    items: ["یخچال و فریزر", "کولر گازی", "آبگرمکن", "بخاری"],
+  },
+  {
+    title: "شستشو",
+    en: "Laundry & Care",
+    items: ["ماشین لباسشویی", "ماشین ظرفشویی", "خشک‌کن", "اتو بخار"],
+  },
+  {
+    title: "صوتی و تصویری",
+    en: "AV & Display",
+    items: ["تلویزیون", "ساندبار", "سینمای خانگی", "پروژکتور"],
+  },
+  {
+    title: "آشپزخانه",
+    en: "Kitchen",
+    items: ["مایکروویو", "جاروبرقی", "هود", "اجاق گاز"],
+  },
+];
+
+export function Header() {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const onClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onClickOutside);
+    return () => document.removeEventListener("mousedown", onClickOutside);
+  }, []);
+
+  return (
+    <header className="sticky top-0 z-50 border-b border-border bg-surface/95 backdrop-blur-sm">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="flex items-center justify-between gap-4 py-4">
+          <div className="flex items-center gap-2">
+            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-red text-lg font-bold text-white">
+              S
+            </div>
+            <div>
+              <p className="font-display text-xl font-bold tracking-tight">
+                <span className="text-red">SANI</span>
+                <span className="text-foreground">HOME</span>
+              </p>
+              <p className="text-xs text-muted">فروشگاه لوازم خانگی</p>
+            </div>
+          </div>
+
+          <div className="hidden flex-1 px-6 md:block">
+            <div className="flex overflow-hidden rounded-xl border border-border bg-background">
+              <input
+                type="search"
+                placeholder="جستجوی محصول، برند یا دسته‌بندی..."
+                className="flex-1 bg-transparent px-4 py-2.5 text-sm outline-none placeholder:text-muted"
+              />
+              <button
+                type="button"
+                className="bg-red px-5 text-sm font-medium text-white transition-colors hover:bg-red-dark"
+              >
+                جستجو
+              </button>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-3 text-sm">
+            <button
+              type="button"
+              className="hidden items-center gap-1.5 text-muted transition-colors hover:text-red sm:flex"
+            >
+              <span>👤</span>
+              <span>ورود</span>
+            </button>
+            <button
+              type="button"
+              className="relative flex items-center gap-1.5 rounded-lg border border-border px-3 py-2 transition-colors hover:border-red hover:text-red"
+            >
+              <span>🛒</span>
+              <span className="hidden sm:inline">سبد خرید</span>
+              <span className="absolute -top-1.5 -left-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-red text-[10px] font-bold text-white">
+                ۲
+              </span>
+            </button>
+          </div>
+        </div>
+
+        <nav className="relative flex items-center gap-6 overflow-visible border-t border-border py-3 text-sm">
+          <div
+            ref={menuRef}
+            className="relative"
+            onMouseEnter={() => setMenuOpen(true)}
+            onMouseLeave={() => setMenuOpen(false)}
+          >
+            <button
+              type="button"
+              onClick={() => setMenuOpen((open) => !open)}
+              aria-expanded={menuOpen}
+              aria-haspopup="true"
+              className="flex shrink-0 items-center gap-2 rounded-lg bg-red px-4 py-2 font-medium text-white transition-colors hover:bg-red-dark"
+            >
+              <span aria-hidden>☰</span>
+              دسته‌بندی‌ها
+            </button>
+
+            {menuOpen && (
+              <div className="absolute top-full right-0 z-50 mt-0 w-[min(92vw,760px)] animate-fade-up rounded-b-2xl border border-t-0 border-border bg-surface p-5 shadow-xl">
+                <div className="mb-4 flex items-end justify-between gap-3 border-b border-border pb-3">
+                  <div>
+                    <p className="font-bold text-red-dark">همه دسته‌بندی‌ها</p>
+                    <p className="font-display text-[11px] tracking-wide text-muted uppercase">
+                      Shop by Category
+                    </p>
+                  </div>
+                  <a href="#" className="text-xs font-medium text-red hover:text-red-dark">
+                    مشاهده همه ←
+                  </a>
+                </div>
+
+                <div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-4">
+                  {megaColumns.map((column) => (
+                    <div key={column.title}>
+                      <p className="mb-0.5 text-sm font-bold text-red-dark">{column.title}</p>
+                      <p className="font-display mb-3 text-[10px] tracking-wider text-muted uppercase">
+                        {column.en}
+                      </p>
+                      <ul className="space-y-2">
+                        {column.items.map((item) => (
+                          <li key={item}>
+                            <a
+                              href="#"
+                              className="text-sm text-muted transition-colors hover:text-red"
+                            >
+                              {item}
+                            </a>
+                          </li>
+                        ))}
+                      </ul>
+                    </div>
+                  ))}
+                </div>
+
+                <div className="mt-5 grid grid-cols-2 gap-2 border-t border-border pt-4 sm:grid-cols-4">
+                  {categories.slice(0, 4).map((cat) => (
+                    <a
+                      key={cat.id}
+                      href="#"
+                      className="rounded-lg bg-red-light/50 px-3 py-2 text-center text-xs font-medium text-red-dark transition-colors hover:bg-red-light"
+                    >
+                      {cat.name}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {navLinks.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="shrink-0 text-muted transition-colors hover:text-red"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+      </div>
+    </header>
+  );
+}
diff --git a/src/components/home/HeroSlider.tsx b/src/components/home/HeroSlider.tsx
new file mode 100644
index 0000000..ff38be5
--- /dev/null
+++ b/src/components/home/HeroSlider.tsx
@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { Placeholder } from "@/components/ui/Placeholder";
+import { sliderSlides } from "@/data/sample";
+
+export function HeroSlider() {
+  const [active, setActive] = useState(1);
+
+  const positions = [
+    { offset: -1, scale: "scale-[0.92]", opacity: "opacity-55", z: "z-10" },
+    { offset: 0, scale: "scale-100", opacity: "opacity-100", z: "z-20" },
+    { offset: 1, scale: "scale-[0.92]", opacity: "opacity-55", z: "z-10" },
+  ];
+
+  return (
+    <section className="overflow-x-clip bg-gradient-to-b from-red-light/30 to-background py-4 md:py-6">
+      <div className="relative mx-auto w-full max-w-7xl px-4">
+        <div className="relative h-[220px] sm:h-[280px] md:h-[340px] lg:h-[380px]">
+          {positions.map(({ offset, scale, opacity, z }) => {
+            const isCenter = offset === 0;
+
+            return (
+              <div
+                key={offset}
+                className={`absolute top-1/2 -translate-y-1/2 transition-all duration-500 ease-out ${scale} ${opacity} ${z} ${
+                  isCenter
+                    ? "inset-x-0 w-full origin-center"
+                    : offset === -1
+                      ? "right-full mr-1.5 w-[78%] origin-right sm:w-[70%] md:w-[65%]"
+                      : "left-full ml-1.5 w-[78%] origin-left sm:w-[70%] md:w-[65%]"
+                } ${isCenter ? "" : "pointer-events-none"}`}
+              >
+                <div className="overflow-hidden rounded-2xl border border-border bg-surface shadow-lg">
+                  <Placeholder
+                    width="100%"
+                    label={isCenter ? "1280×380" : "880×350"}
+                    className={`w-full rounded-none border-0 h-[200px] sm:h-[260px] md:h-[310px] ${
+                      isCenter ? "lg:h-[380px]" : "lg:h-[350px]"
+                    }`}
+                  />
+                </div>
+              </div>
+            );
+          })}
+        </div>
+
+        <div className="mt-5 flex items-center justify-center gap-3">
+          <button
+            type="button"
+            onClick={() =>
+              setActive((prev) => (prev - 1 + sliderSlides.length) % sliderSlides.length)
+            }
+            className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-red transition-colors hover:border-red hover:bg-red-light"
+            aria-label="اسلاید قبلی"
+          >
+            →
+          </button>
+          <div className="flex gap-2">
+            {sliderSlides.map((slide, i) => (
+              <button
+                key={slide.id}
+                type="button"
+                onClick={() => setActive(i)}
+                aria-label={`اسلاید ${i + 1}`}
+                className={`h-2 rounded-full transition-all ${
+                  i === active ? "w-8 bg-red" : "w-2 bg-red-muted/50"
+                }`}
+              />
+            ))}
+          </div>
+          <button
+            type="button"
+            onClick={() => setActive((prev) => (prev + 1) % sliderSlides.length)}
+            className="flex h-9 w-9 items-center justify-center rounded-full border border-border text-red transition-colors hover:border-red hover:bg-red-light"
+            aria-label="اسلاید بعدی"
+          >
+            ←
+          </button>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/SamsungCarousel.tsx b/src/components/home/SamsungCarousel.tsx
new file mode 100644
index 0000000..0d0a170
--- /dev/null
+++ b/src/components/home/SamsungCarousel.tsx
@@ -0,0 +1,29 @@
+import { Carousel } from "@/components/ui/Carousel";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { samsungProducts } from "@/data/sample";
+
+export function SamsungCarousel() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <SectionTitle
+          title="محصولات سامسونگ"
+          enTitle="Samsung Collection"
+          action="مشاهده همه"
+        />
+        <Carousel ariaLabel="کاروسل محصولات سامسونگ">
+          {samsungProducts.map((product) => (
+            <ProductCard
+              key={product.id}
+              name={product.name}
+              brand={product.brand}
+              price={product.price}
+              variant="brand"
+            />
+          ))}
+        </Carousel>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/SpecialSaleCarousel.tsx b/src/components/home/SpecialSaleCarousel.tsx
new file mode 100644
index 0000000..4273aa9
--- /dev/null
+++ b/src/components/home/SpecialSaleCarousel.tsx
@@ -0,0 +1,48 @@
+import { Carousel } from "@/components/ui/Carousel";
+import { Placeholder } from "@/components/ui/Placeholder";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { specialSaleProducts } from "@/data/sample";
+
+function SpecialSaleBanner() {
+  return (
+    <a
+      href="#"
+      className="relative w-[220px] shrink-0 self-stretch overflow-hidden rounded-xl border border-border md:w-[240px]"
+    >
+      <Placeholder
+        width="100%"
+        label="240×380"
+        className="h-full min-h-[380px] w-full rounded-none border-0"
+      />
+    </a>
+  );
+}
+
+export function SpecialSaleCarousel() {
+  return (
+    <section className="border-y border-red-light bg-red-light/30 py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <SectionTitle
+          title="فروش ویژه"
+          enTitle="Special Sale"
+          action="مشاهده همه"
+        />
+        <Carousel ariaLabel="کاروسل فروش ویژه">
+          <SpecialSaleBanner />
+          {specialSaleProducts.map((product) => (
+            <ProductCard
+              key={product.id}
+              name={product.name}
+              brand={product.brand}
+              price={product.price}
+              oldPrice={product.oldPrice}
+              discount={product.discount}
+              variant="sale"
+            />
+          ))}
+        </Carousel>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/ThreeBanners.tsx b/src/components/home/ThreeBanners.tsx
new file mode 100644
index 0000000..36df818
--- /dev/null
+++ b/src/components/home/ThreeBanners.tsx
@@ -0,0 +1,36 @@
+import { Placeholder } from "@/components/ui/Placeholder";
+
+const banners = [
+  { title: "ماشین لباسشویی", subtitle: "از ۲۸ میلیون", label: "420×160" },
+  { title: "جاروبرقی", subtitle: "ارسال فوری", label: "420×160" },
+  { title: "لوازم آشپزخانه", subtitle: "تا ۲۰٪ تخفیف", label: "420×160" },
+];
+
+export function ThreeBanners() {
+  return (
+    <section className="border-y border-border bg-background py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="grid gap-4 md:grid-cols-3">
+          {banners.map((banner) => (
+            <a
+              key={banner.title}
+              href="#"
+              className="group relative overflow-hidden rounded-xl border border-border bg-surface transition-all hover:border-red hover:shadow-md"
+            >
+              <Placeholder
+                width="100%"
+                height="160px"
+                label={banner.label}
+                className="w-full rounded-none border-0"
+              />
+              <div className="absolute inset-0 flex flex-col items-start justify-end bg-gradient-to-t from-black/60 to-transparent p-5">
+                <h3 className="font-bold text-white">{banner.title}</h3>
+                <p className="text-sm text-white/75">{banner.subtitle}</p>
+              </div>
+            </a>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/TopBar.tsx b/src/components/home/TopBar.tsx
new file mode 100644
index 0000000..2fcb0d4
--- /dev/null
+++ b/src/components/home/TopBar.tsx
@@ -0,0 +1,14 @@
+export function TopBar() {
+  return (
+    <div className="border-b border-red-dark/10 bg-red-dark text-white">
+      <div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-2 px-4 py-2 text-xs md:text-sm">
+        <p>ارسال رایگان برای سفارش‌های بالای ۵ میلیون تومان</p>
+        <div className="flex items-center gap-4">
+          <span>پشتیبانی: ۰۲۱-۸۸۰۰۱۲۳۴</span>
+          <span className="hidden sm:inline">|</span>
+          <span className="hidden sm:inline">شنبه تا پنج‌شنبه ۹ تا ۱۸</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/home/TopSellingCarousel.tsx b/src/components/home/TopSellingCarousel.tsx
new file mode 100644
index 0000000..4164707
--- /dev/null
+++ b/src/components/home/TopSellingCarousel.tsx
@@ -0,0 +1,28 @@
+import { Carousel } from "@/components/ui/Carousel";
+import { ProductCard } from "@/components/ui/ProductCard";
+import { SectionTitle } from "@/components/ui/SectionTitle";
+import { topSellingProducts } from "@/data/sample";
+
+export function TopSellingCarousel() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <SectionTitle
+          title="پرفروش‌ترین‌ها"
+          enTitle="Top Selling"
+          action="مشاهده همه"
+        />
+        <Carousel ariaLabel="کاروسل پرفروش‌ترین‌ها">
+          {topSellingProducts.map((product) => (
+            <ProductCard
+              key={product.id}
+              name={product.name}
+              brand={product.brand}
+              price={product.price}
+            />
+          ))}
+        </Carousel>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/home/TwoBanners.tsx b/src/components/home/TwoBanners.tsx
new file mode 100644
index 0000000..3105975
--- /dev/null
+++ b/src/components/home/TwoBanners.tsx
@@ -0,0 +1,38 @@
+import { Placeholder } from "@/components/ui/Placeholder";
+
+export function TwoBanners() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="mx-auto max-w-7xl px-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          <a
+            href="#"
+            className="group relative overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
+          >
+            <Placeholder width="100%" height="200px" label="640×200" className="w-full rounded-none border-0" />
+            <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-red-dark/80 to-transparent p-6">
+              <p className="font-display text-xs tracking-widest text-red-muted uppercase">
+                Summer Sale
+              </p>
+              <h3 className="text-lg font-bold text-white">تخفیف ویژه یخچال و فریزر</h3>
+              <p className="mt-1 text-sm text-white/80">تا ۲۵٪ تخفیف — تا پایان مرداد</p>
+            </div>
+          </a>
+          <a
+            href="#"
+            className="group relative overflow-hidden rounded-2xl border border-border bg-surface transition-shadow hover:shadow-lg"
+          >
+            <Placeholder width="100%" height="200px" label="640×200" className="w-full rounded-none border-0" />
+            <div className="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-red-dark/80 to-transparent p-6">
+              <p className="font-display text-xs tracking-widest text-red-muted uppercase">
+                Smart TV
+              </p>
+              <h3 className="text-lg font-bold text-white">تلویزیون‌های هوشمند ۲۰۲۶</h3>
+              <p className="mt-1 text-sm text-white/80">QLED و OLED با اقساط ۱۲ ماهه</p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/src/components/ui/Carousel.tsx b/src/components/ui/Carousel.tsx
new file mode 100644
index 0000000..317f351
--- /dev/null
+++ b/src/components/ui/Carousel.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import { useRef } from "react";
+
+type CarouselProps = {
+  children: React.ReactNode;
+  ariaLabel: string;
+};
+
+function ChevronLeftIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5" aria-hidden>
+      <path
+        d="M14.5 6.5 9 12l5.5 5.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ChevronRightIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" className="h-5 w-5" aria-hidden>
+      <path
+        d="M9.5 6.5 15 12l-5.5 5.5"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export function Carousel({ children, ariaLabel }: CarouselProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+
+  const scroll = (direction: "prev" | "next") => {
+    const track = trackRef.current;
+    if (!track) return;
+    const amount = direction === "next" ? -280 : 280;
+    track.scrollBy({ left: amount, behavior: "smooth" });
+  };
+
+  const btnClass =
+    "absolute top-1/2 z-10 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-full border border-white/40 bg-white/40 text-red shadow-sm backdrop-blur-md transition-colors hover:border-red/40 hover:bg-white/60 hover:text-red-dark";
+
+  return (
+    <div className="relative">
+      <button
+        type="button"
+        onClick={() => scroll("prev")}
+        aria-label="قبلی"
+        className={`${btnClass} right-1`}
+      >
+        <ChevronRightIcon />
+      </button>
+      <button
+        type="button"
+        onClick={() => scroll("next")}
+        aria-label="بعدی"
+        className={`${btnClass} left-1`}
+      >
+        <ChevronLeftIcon />
+      </button>
+      <div
+        ref={trackRef}
+        role="region"
+        aria-label={ariaLabel}
+        className="carousel-track flex items-stretch gap-4 overflow-x-auto scroll-smooth px-1 py-2"
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/ui/Placeholder.tsx b/src/components/ui/Placeholder.tsx
new file mode 100644
index 0000000..a6b3b7c
--- /dev/null
+++ b/src/components/ui/Placeholder.tsx
@@ -0,0 +1,26 @@
+type PlaceholderProps = {
+  width: string;
+  height?: string;
+  label?: string;
+  className?: string;
+};
+
+export function Placeholder({
+  width,
+  height,
+  label,
+  className = "",
+}: PlaceholderProps) {
+  return (
+    <div
+      className={`relative flex shrink-0 items-center justify-center overflow-hidden border border-dashed border-red-muted/60 bg-red-light/40 ${className}`}
+      style={{ width, ...(height ? { height } : {}) }}
+      aria-hidden="true"
+    >
+      <div className="absolute inset-0 bg-[linear-gradient(135deg,transparent_45%,rgba(220,38,38,0.06)_50%,transparent_55%)]" />
+      <span className="font-display relative z-10 text-xs tracking-wider text-red-dark/50 uppercase">
+        {label ?? `${width} × ${height ?? ""}`}
+      </span>
+    </div>
+  );
+}
diff --git a/src/components/ui/ProductCard.tsx b/src/components/ui/ProductCard.tsx
new file mode 100644
index 0000000..1e4e04c
--- /dev/null
+++ b/src/components/ui/ProductCard.tsx
@@ -0,0 +1,63 @@
+import { Placeholder } from "./Placeholder";
+import { formatPrice } from "@/data/sample";
+
+type ProductCardProps = {
+  name: string;
+  brand: string;
+  price: number;
+  oldPrice?: number;
+  discount?: number;
+  variant?: "sale" | "default" | "brand";
+};
+
+export function ProductCard({
+  name,
+  brand,
+  price,
+  oldPrice,
+  discount,
+  variant = "default",
+}: ProductCardProps) {
+  return (
+    <article className="group w-[220px] shrink-0 overflow-hidden rounded-xl border border-border bg-surface transition-shadow hover:shadow-md md:w-[240px]">
+      <div className="relative">
+        <Placeholder width="100%" height="200px" label="240×200" className="w-full rounded-none border-0 border-b border-dashed" />
+        {discount && (
+          <span className="absolute top-3 right-3 rounded-md bg-red px-2 py-0.5 text-xs font-bold text-white">
+            {discount}٪
+          </span>
+        )}
+        {variant === "brand" && (
+          <span className="font-display absolute top-3 left-3 text-[10px] font-bold tracking-widest text-red-dark uppercase">
+            {brand}
+          </span>
+        )}
+      </div>
+      <div className="p-4">
+        <p className="font-display mb-1 text-[11px] tracking-wide text-muted uppercase">
+          {brand}
+        </p>
+        <h3 className="mb-3 line-clamp-2 min-h-[2.75rem] text-sm leading-relaxed font-medium">
+          {name}
+        </h3>
+        <div className="flex flex-wrap items-center gap-2">
+          <span className="text-base font-bold text-red-dark">
+            {formatPrice(price)}
+            <span className="mr-0.5 text-xs font-normal text-muted">تومان</span>
+          </span>
+          {oldPrice && (
+            <span className="text-xs text-muted line-through">
+              {formatPrice(oldPrice)}
+            </span>
+          )}
+        </div>
+        <button
+          type="button"
+          className="mt-3 w-full rounded-lg bg-red py-2 text-sm font-medium text-white transition-colors hover:bg-red-dark"
+        >
+          افزودن به سبد
+        </button>
+      </div>
+    </article>
+  );
+}
diff --git a/src/components/ui/SectionTitle.tsx b/src/components/ui/SectionTitle.tsx
new file mode 100644
index 0000000..12047d2
--- /dev/null
+++ b/src/components/ui/SectionTitle.tsx
@@ -0,0 +1,36 @@
+type SectionTitleProps = {
+  title: string;
+  enTitle: string;
+  subtitle?: string;
+  action?: string;
+};
+
+export function SectionTitle({ title, enTitle, subtitle, action }: SectionTitleProps) {
+  return (
+    <div className="mb-6 flex items-end justify-between gap-4">
+      <div>
+        <div className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
+          <h2 className="text-xl font-bold text-red-dark md:text-2xl">{title}</h2>
+          <span
+            className="font-display text-sm font-semibold tracking-wide text-red-dark/30 uppercase md:text-base"
+            lang="en"
+            dir="ltr"
+          >
+            {enTitle}
+          </span>
+        </div>
+        {subtitle && (
+          <p className="mt-1 text-sm text-muted">{subtitle}</p>
+        )}
+      </div>
+      {action && (
+        <button
+          type="button"
+          className="shrink-0 text-sm font-medium text-red transition-colors hover:text-red-dark"
+        >
+          {action} ←
+        </button>
+      )}
+    </div>
+  );
+}
diff --git a/src/data/sample.ts b/src/data/sample.ts
new file mode 100644
index 0000000..a4f9fde
--- /dev/null
+++ b/src/data/sample.ts
@@ -0,0 +1,201 @@
+export const categories = [
+  { id: 1, name: "یخچال و فریزر", count: 48 },
+  { id: 2, name: "ماشین لباسشویی", count: 36 },
+  { id: 3, name: "تلویزیون", count: 52 },
+  { id: 4, name: "جاروبرقی", count: 29 },
+  { id: 5, name: "مایکروویو", count: 18 },
+  { id: 6, name: "ظرفشویی", count: 22 },
+  { id: 7, name: "کولر و گرمایش", count: 31 },
+  { id: 8, name: "لوازم آشپزخانه", count: 64 },
+];
+
+export const specialSaleProducts = [
+  {
+    id: 1,
+    name: "یخچال فریزر ساید بای ساید سامسونگ",
+    brand: "Samsung",
+    price: 89500000,
+    oldPrice: 102000000,
+    discount: 12,
+  },
+  {
+    id: 2,
+    name: "ماشین لباسشویی ۹ کیلویی ال‌جی",
+    brand: "LG",
+    price: 42800000,
+    oldPrice: 48500000,
+    discount: 11,
+  },
+  {
+    id: 3,
+    name: "تلویزیون ۵۵ اینچ QLED سامسونگ",
+    brand: "Samsung",
+    price: 56200000,
+    oldPrice: 62000000,
+    discount: 9,
+  },
+  {
+    id: 4,
+    name: "جاروبرقی رباتیک شیائومی",
+    brand: "Xiaomi",
+    price: 18900000,
+    oldPrice: 23500000,
+    discount: 19,
+  },
+  {
+    id: 5,
+    name: "مایکروویو ۳۰ لیتری بوش",
+    brand: "Bosch",
+    price: 12400000,
+    oldPrice: 14800000,
+    discount: 16,
+  },
+  {
+    id: 6,
+    name: "ظرفشویی ۱۴ نفره بوش",
+    brand: "Bosch",
+    price: 35600000,
+    oldPrice: 39900000,
+    discount: 10,
+  },
+];
+
+export const topSellingProducts = [
+  {
+    id: 7,
+    name: "یخچال دوقلو ال‌جی",
+    brand: "LG",
+    price: 67800000,
+    sold: 124,
+  },
+  {
+    id: 8,
+    name: "تلویزیون ۶۵ اینچ OLED ال‌جی",
+    brand: "LG",
+    price: 98500000,
+    sold: 89,
+  },
+  {
+    id: 9,
+    name: "ماشین لباسشویی ۸ کیلویی سامسونگ",
+    brand: "Samsung",
+    price: 38900000,
+    sold: 156,
+  },
+  {
+    id: 10,
+    name: "کولر گازی ۲۴ هزار اینورتر",
+    brand: "Gree",
+    price: 24500000,
+    sold: 203,
+  },
+  {
+    id: 11,
+    name: "اجاق گاز رومیزی بوش",
+    brand: "Bosch",
+    price: 16800000,
+    sold: 67,
+  },
+  {
+    id: 12,
+    name: "جاروبرقی سایکلون سامسونگ",
+    brand: "Samsung",
+    price: 8900000,
+    sold: 178,
+  },
+];
+
+export const samsungProducts = [
+  {
+    id: 13,
+    name: "یخچال Bespoke سامسونگ",
+    brand: "Samsung",
+    price: 112000000,
+  },
+  {
+    id: 14,
+    name: "ماشین لباسشویی AI EcoBubble",
+    brand: "Samsung",
+    price: 45600000,
+  },
+  {
+    id: 15,
+    name: "تلویزیون Neo QLED 8K",
+    brand: "Samsung",
+    price: 185000000,
+  },
+  {
+    id: 16,
+    name: "جاروبرقی Jet ۹۰",
+    brand: "Samsung",
+    price: 21500000,
+  },
+  {
+    id: 17,
+    name: "مایکروویو Grill سامسونگ",
+    brand: "Samsung",
+    price: 13800000,
+  },
+  {
+    id: 18,
+    name: "کولر گازی WindFree",
+    brand: "Samsung",
+    price: 32800000,
+  },
+];
+
+export const blogPosts = [
+  {
+    id: 1,
+    title: "راهنمای خرید یخچال مناسب برای خانواده",
+    excerpt: "نکات مهم برای انتخاب یخچال با توجه به فضای آشپزخانه و تعداد اعضای خانواده.",
+    date: "۱۲ مرداد ۱۴۰۵",
+    readTime: "۵ دقیقه",
+  },
+  {
+    id: 2,
+    title: "مقایسه تلویزیون QLED و OLED",
+    excerpt: "تفاوت‌های فنی و کاربردی دو تکنولوژی محبوب نمایشگر در سال ۱۴۰۵.",
+    date: "۸ مرداد ۱۴۰۵",
+    readTime: "۷ دقیقه",
+  },
+  {
+    id: 3,
+    title: "چگونه مصرف برق لوازم خانگی را کاهش دهیم؟",
+    excerpt: "راهکارهای عملی برای صرفه‌جویی در قبض برق با استفاده هوشمند از لوازم برقی.",
+    date: "۳ مرداد ۱۴۰۵",
+    readTime: "۴ دقیقه",
+  },
+  {
+    id: 4,
+    title: "معرفی جدیدترین محصولات سامسونگ ۲۰۲۶",
+    excerpt: "نگاهی به سری Bespoke و Neo QLED در نمایشگاه لوازم خانگی امسال.",
+    date: "۲۸ تیر ۱۴۰۵",
+    readTime: "۶ دقیقه",
+  },
+];
+
+export const sliderSlides = [
+  {
+    id: 1,
+    title: "جشنواره تابستانه لوازم خانگی",
+    subtitle: "تا ۳۰٪ تخفیف روی برندهای منتخب",
+    cta: "مشاهده پیشنهادها",
+  },
+  {
+    id: 2,
+    title: "سری جدید Samsung Bespoke",
+    subtitle: "طراحی هوشمند برای آشپزخانه مدرن",
+    cta: "کاوش مجموعه",
+  },
+  {
+    id: 3,
+    title: "ارسال رایگان به سراسر کشور",
+    subtitle: "برای سفارش‌های بالای ۵ میلیون تومان",
+    cta: "خرید کنید",
+  },
+];
+
+export function formatPrice(price: number): string {
+  return new Intl.NumberFormat("fa-IR").format(price);
+}