Add special-sale title with daily flip countdown.

Show a theme-colored (#c96) hour/minute/second flip clock on the left of the sale carousel that resets each Tehran day.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/page.tsx

@@ -1,8 +1,10 @@
 import Image from "next/image";
 import Link from "next/link";
+import type { ReactNode } from "react";
 import { HeroSlider, type HeroSlide } from "@/app/components/hero-slider";
 import { ProductCarousel } from "@/app/components/product-carousel";
 import { ArticleCarousel } from "@/app/components/article-carousel";
+import { FlipCountdown } from "@/app/components/flip-countdown";
 import { SlotBanner, SlotLinkedImage } from "@/app/components/slot-media";
 import { getStaticImages, listBlogs } from "@/lib/meshkee/api";
 import { formatDate } from "@/lib/meshkee/format";
@@ -31,17 +33,20 @@ function SectionTitle({
   eyebrow,
   title,
   href,
+  aside,
 }: {
   eyebrow: string;
   title: string;
   href?: string;
+  aside?: ReactNode;
 }) {
   return (
-    <div className="section-title">
+    <div className={`section-title${aside ? " section-title-with-aside" : ""}`}>
       <div>
         <p className="eyebrow">{eyebrow}</p>
         <h2>{title}</h2>
       </div>
+      {aside}
       {href ? (
         <Link className="section-title-chevron" href={href} aria-label="مشاهده بیشتر">
           <span aria-hidden="true">‹</span>
@@ -191,8 +196,13 @@ export default async function Home() {
         </div>
       </section>
 
-      <section className="section">
+      <section className="section section-special-sale">
         <div className="container">
+          <SectionTitle
+            eyebrow="Special Sale"
+            title="فروش ویژه"
+            aside={<FlipCountdown />}
+          />
           <ProductCarousel
             products={products}
             ariaLabel="کاروسل فروش ویژه"