[V0_FILE]markdown:file="README.md" isMerged="true" # Marketing landing pages *Automatically synced with your [v0.app](https://v0.app) deployments* [![Deployed on Vercel](https://img.shields.io/badge/Deployed%20on-Vercel-black?style=for-the-badge&logo=vercel)](https://vercel.com/basitsa/v0-marketing-landing-pages) [![Built with v0](https://img.shields.io/badge/Built%20with-v0.app-black?style=for-the-badge)](https://v0.app/chat/ofWjY24NFfg) ## Overview This repository will stay in sync with your deployed chats on [v0.app](https://v0.app). Any changes you make to your deployed app will be automatically pushed to this repository from [v0.app](https://v0.app). ## Deployment Your project is live at: **[https://vercel.com/basitsa/v0-marketing-landing-pages](https://vercel.com/basitsa/v0-marketing-landing-pages)** ## Build your app Continue building your app on: **[https://v0.app/chat/ofWjY24NFfg](https://v0.app/chat/ofWjY24NFfg)** ## How It Works 1. Create and modify your project using [v0.app](https://v0.app) 2. Deploy your chats from the v0 interface 3. Changes are automatically pushed to this repository 4. Vercel deploys the latest version from this repository [V0_FILE]css:file="app/globals.css" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* إضافة جميع tokens المطلوبة مع الحفاظ على الألوان المخصصة */ --background: oklch(0.98 0.01 120); --foreground: oklch(0.25 0.02 140); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.02 140); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 140); --primary: oklch(0.45 0.12 145); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.88 0.05 85); --secondary-foreground: oklch(0.25 0.02 140); --muted: oklch(0.94 0.01 120); --muted-foreground: oklch(0.55 0.02 140); --accent: oklch(0.65 0.15 50); --accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.88 0.02 120); --input: oklch(0.92 0.02 120); --ring: oklch(0.45 0.12 145); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.75rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.45 0.12 145); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.18 0.02 140); --foreground: oklch(0.95 0.01 120); --card: oklch(0.22 0.02 140); --card-foreground: oklch(0.95 0.01 120); --popover: oklch(0.22 0.02 140); --popover-foreground: oklch(0.95 0.01 120); --primary: oklch(0.55 0.15 145); --primary-foreground: oklch(0.99 0 0); --secondary: oklch(0.35 0.05 85); --secondary-foreground: oklch(0.95 0.01 120); --muted: oklch(0.28 0.02 140); --muted-foreground: oklch(0.65 0.02 140); --accent: oklch(0.55 0.15 50); --accent-foreground: oklch(0.99 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.32 0.02 140); --input: oklch(0.28 0.02 140); --ring: oklch(0.55 0.15 145); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Cairo", "Geist", "Geist Fallback", system-ui, -apple-system; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Cairo } from "next/font/google" import { Analytics } from "@vercel/analytics/next" import "./globals.css" // استخدام خط Cairo العربي للعنوان والنص const cairo = Cairo({ subsets: ["arabic", "latin"], display: "swap", }) export const metadata: Metadata = { title: { default: "سدر الجوري - منتجات السدر الطبيعية للشعر والبشرة", template: "%s | سدر الجوري", }, description: "سدر الجوري - متجر السدر الطبيعي الأول في السعودية. اكتشف فوائد السدر للشعر والبشرة والجسم. عسل السدر الجبلي، زيت السدر، سدر مطحون، شامبو السدر ومنتجات طبيعية 100%", keywords: "سدر الجوري، السدر، سدر، jujube، السدر للشعر، فوائد السدر للشعر، ماسك السدر للشعر، عسل السدر، زيت السدر، النبق، شجرة السدر، سدر مطحون، شامبو السدر، ورق السدر، السدر للبشرة، السدر للوجه، sidr, ziziphus, jujube tree, jujube benefits", authors: [{ name: "سدر الجوري" }], creator: "سدر الجوري", publisher: "سدر الجوري", formatDetection: { telephone: false, }, metadataBase: new URL("https://sidr-aljouri.com"), alternates: { canonical: "/", }, openGraph: { type: "website", locale: "ar_SA", url: "https://sidr-aljouri.com", siteName: "سدر الجوري", title: "سدر الجوري - منتجات السدر الطبيعية للشعر والبشرة", description: "متجر السدر الطبيعي الأول في السعودية. عسل السدر الجبلي، زيت السدر، سدر مطحون ومنتجات طبيعية 100%. Jujube natural products", images: [ { url: "/og-image.jpg", width: 1200, height: 630, alt: "سدر الجوري - منتجات السدر الطبيعية", }, ], }, twitter: { card: "summary_large_image", title: "سدر الجوري - منتجات السدر الطبيعية", description: "متجر السدر الطبيعي الأول في السعودية. منتجات طبيعية 100% للشعر والبشرة", images: ["/og-image.jpg"], }, robots: { index: true, follow: true, googleBot: { index: true, follow: true, "max-video-preview": -1, "max-image-preview": "large", "max-snippet": -1, }, }, icons: { icon: [ { url: "/icon-light-32x32.png", media: "(prefers-color-scheme: light)", }, { url: "/icon-dark-32x32.png", media: "(prefers-color-scheme: dark)", }, { url: "/icon.svg", type: "image/svg+xml", }, ], apple: "/apple-icon.png", }, verification: { google: "your-google-verification-code", yandex: "your-yandex-verification-code", }, generator: 'v0.app' } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" import { Navigation } from "@/components/navigation" import { Footer } from "@/components/footer" import { CTASection } from "@/components/cta-section" import { BenefitCard } from "@/components/benefit-card" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Sparkles, Heart, Star, ArrowLeft, CheckCircle2, Droplet, Sun } from "lucide-react" import Link from "next/link" import Image from "next/image" import type { Metadata } from "next" export const metadata: Metadata = { title: "سدر الجوري - منتجات السدر الطبيعية للشعر والبشرة والجسم", description: "اكتشف منتجات السدر الطبيعية من سدر الجوري. عسل السدر الجبلي، زيت السدر للشعر، سدر مطحون، شامبو السدر الطبيعي. فوائد السدر للشعر والبشرة والجسم. منتجات طبيعية 100% بدون كيماويات", keywords: "السدر، سدر، jujube، سدر الجوري، فوائد السدر، السدر للشعر، السدر للبشرة، عسل السدر، زيت السدر، سدر مطحون، شامبو السدر، النبق، شجرة السدر، منتجات طبيعية، sidr products, jujube benefits, ziziphus, jujube oil, jujube honey", openGraph: { title: "سدر الجوري - منتجات السدر الطبيعية", description: "عسل السدر الجبلي، زيت السدر، سدر مطحون ومنتجات طبيعية 100% للشعر والبشرة. Natural Jujube Products", url: "https://sidr-aljouri.com", siteName: "سدر الجوري", images: [ { url: "/og-image-home.jpg", width: 1200, height: 630, alt: "منتجات السدر الطبيعية من سدر الجوري", }, ], locale: "ar_SA", type: "website", }, twitter: { card: "summary_large_image", title: "سدر الجوري - منتجات السدر الطبيعية", description: "عسل السدر الجبلي، زيت السدر، سدر مطحون ومنتجات طبيعية 100%", images: ["/og-image-home.jpg"], }, alternates: { canonical: "https://sidr-aljouri.com", }, } export default function HomePage() { return ( <> {/* Hero Section */}

منتج طبيعي 100%

اكتشف قوة السدر الطبيعي

منتجات السدر الأصلية للعناية بالشعر والبشرة والجسم. استمتع بفوائد شجرة السدر المباركة التي استخدمت منذ آلاف السنين

{[...Array(5)].map((_, i) => ( ))}

+5000 عميل راضٍ

{/* Benefits Grid */}

لماذا السدر الطبيعي؟

فوائد مذهلة لصحة الشعر والبشرة من الطبيعة مباشرة

{/* Product Categories */}

منتجاتنا المميزة

اختر المنتج المناسب لاحتياجاتك

{[ { title: "السدر للشعر", description: "لشعر قوي وصحي ولامع", image: "/sidr-powder-for-hair-care.jpg", link: "/sidr-hair", features: ["تقوية الجذور", "منع التساقط", "علاج القشرة"], }, { title: "عسل السدر", description: "عسل السدر الجبلي الأصلي", image: "/natural-sidr-honey-jar.jpg", link: "/sidr-honey", features: ["فوائد صحية", "طعم مميز", "جودة عالية"], }, { title: "زيت السدر", description: "زيت طبيعي للشعر والبشرة", image: "/sidr-oil-bottle-natural.jpg", link: "/sidr-oil", features: ["ترطيب عميق", "تغذية مكثفة", "نتائج سريعة"], }, ].map((product) => (

{product.title}

{product.description}

{feature}

))}

{/* Testimonials */}

آراء عملائنا

تجارب حقيقية من عملاء سعداء

{[ { name: "فاطمة أحمد", text: "السدر غير شعري تماماً! أصبح أقوى وأطول وأكثر كثافة. منتج رائع ونتائج واضحة", rating: 5, }, { name: "سارة محمد", text: "عسل السدر من أفضل أنواع العسل التي جربتها. طعمه مميز وفوائده الصحية رائعة", rating: 5, }, { name: "نورة عبدالله", text: "زيت السدر ممتاز للبشرة والشعر. طبيعي 100% وآمن للاستخدام اليومي. أنصح به بشدة", rating: 5, }, ].map((testimonial, i) => (

{[...Array(testimonial.rating)].map((_, i) => ( ))}

"{testimonial.text}"

{testimonial.name}

))}

{/* CTA */}

اكتشف قوة السدر الطبيعي

لماذا السدر الطبيعي؟

منتجاتنا المميزة

{product.title}

آراء عملائنا

التحضير

الانتظار

التطبيق

الشطف

{product.title}

{faq.q}

عسل السدر الجبلي الأصلي

فوائد عسل السدر الصحية

لماذا عسل السدر الخاص بنا؟

{feature.title}

منتجات عسل السدر

{product.title}