دليل بناء الثيمات

themes/your-theme/
├── manifest.json       # Metadata, presets, sections
├── schema.json         # Customizable settings (→ auto UI)
├── sections/           # React components
│   ├── hero.tsx
│   ├── featured-products.tsx
│   └── newsletter.tsx
└── index.ts            # Registration

{
  "id": "my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "author": "Your Name",
  "sections": ["hero", "categories-grid", "featured-products"],
  "presets": [{
    "id": "default",
    "name": "Default",
    "settings": {
      "primaryColor": "#3b82f6",
      "backgroundColor": "#ffffff",
      "headingFont": "Tajawal",
      "borderRadius": 12
    }
  }]
}

import type { ThemeSectionProps } from "@/lib/theme-engine/types";

export default function HeroSection({
  settings, storeData, locale, t
}: ThemeSectionProps) {
  return (
    <section style={{
      background: `linear-gradient(135deg, ${settings.primaryColor}, ${settings.secondaryColor})`,
      fontFamily: `'${settings.headingFont}'`,
    }}>
      <h1>{settings.heroTitle || t("hero.welcome")}</h1>
    </section>
  );
}