Darana landing page - v0 by Vercel

Act as an expert Next.js, Tailwind CSS, and UI/UX designer. Build this as a single React component with no external data fetching or routing. Create a mobile-first, highly converting RTL Arabic Landing Page for "Darana" (دارنا), a home services marketplace in Basra, Iraq.

CRITICAL TECHNICAL REQUIREMENTS:

Tech Stack: Next.js 14, Tailwind CSS, shadcn/ui components, and lucide-react icons.
The entire container MUST use dir="rtl".
Use Tailwind logical properties exclusively (e.g., ms-4, pe-2, ps-4) for spacing to ensure perfect RTL rendering.
No English text anywhere in the rendered UI. All placeholders and text must be in natural, friendly Iraqi Arabic dialect.
Primary brand color is orange-600. Background should be bg-gray-50.

PAGE SECTIONS TO BUILD (in order):

━━━ 1. Sticky Navbar ━━━

sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100.
Right side: Brand name "دارنا" in text-orange-600 font-black text-2xl.
Center (hidden on mobile, visible on md+): Simple links — الخدمات, مميزاتنا, آراء الزبائن.
Left side: Button "دخول / حساب جديد" (bg-orange-600 text-white rounded-xl px-4 py-2 font-bold text-sm).
On mobile: show a hamburger menu icon (Menu from lucide) on the left side instead of the button and links.

━━━ 2. Hero Section ━━━

Background: bg-gradient-to-b from-orange-50/80 to-gray-50.
Headline: "خدمات صيانة منزلية موثوقة بالبصرة" (text-4xl md:text-5xl font-black text-gray-900 leading-tight).
Sub-headline: "سباك، كهربائي، أو فني تبريد يجيك للبيت بضغطة زر. أسعار شفافة وأمان تام." (text-gray-600 mt-4 text-lg leading-relaxed).
CTA row (flex gap-3, stack vertically on mobile, horizontal on md+):
- Primary: "اطلب فني هسه" → bg-orange-600 text-white w-full md:w-auto py-3.5 px-8 rounded-xl font-bold shadow-lg shadow-orange-200 hover:bg-orange-700 transition active:scale-95.
- Secondary: "سجل ويانا كفني" → bg-white text-orange-600 border-2 border-orange-200 w-full md:w-auto py-3.5 px-8 rounded-xl font-bold hover:bg-orange-50 transition.
Below the CTAs, add a small trust line: "🔒 بياناتك محمية بالكامل" in text-gray-400 text-sm mt-4.

━━━ 3. Social Proof Stats Bar ━━━

A horizontal row (flex, justify-around) inside a bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mx-4 -mt-6 relative z-10 card that overlaps slightly with the hero.
3 stats, each with a large bold number and a label below:
- "+٥٠٠" → "فني معتمد" (Users icon in orange)
- "+٢,٠٠٠" → "طلب مكتمل" (CheckCircle2 icon in green)
- "٤.٨ ⭐" → "تقييم الزبائن" (Star icon in yellow)
Numbers: text-2xl font-black text-gray-900. Labels: text-xs text-gray-500 mt-1.
Add vertical dividers (border-e border-gray-100) between each stat.

━━━ 4. Services Grid (خدماتنا) ━━━

Section padding: py-12 px-4.
Title: "شنو تحتاج اليوم؟" (text-2xl font-bold text-center mb-8 text-gray-900).
Grid: grid grid-cols-2 md:grid-cols-4 gap-4.
Each card: bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center transition-all hover:border-orange-300 hover:shadow-md cursor-pointer group.
Card items (use a colored circle bg for the icon, e.g., w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-3):
1. السباكة → Droplets icon, text-blue-500 on bg-blue-50.
2. الكهرباء → Zap icon, text-yellow-500 on bg-yellow-50.
3. التكييف والتبريد → Wind icon, text-cyan-500 on bg-cyan-50.
4. تصليح أجهزة → Cog icon, text-purple-500 on bg-purple-50.
Label below icon: text-sm font-bold text-gray-800 group-hover:text-orange-600 transition.

━━━ 5. Why Choose Darana (ليش دارنا؟) ━━━

bg-white py-12 px-4.
Title: "ليش دارنا هو خيارك الأفضل؟" (text-2xl font-bold text-center mb-10 text-gray-900).
Grid: grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto.
Each item: centered layout with icon circle, bold title, and description paragraph.
1. Icon: ShieldCheck in text-green-600 on bg-green-50 circle (w-14 h-14 rounded-2xl). Title: "أمان وموثوقية". Text: "كل الفنيين مسجلين رسمياً وعدهم شهادة عدم محكومية."
2. Icon: Wallet in text-orange-600 on bg-orange-50. Title: "أسعار تناسبك". Text: "نظام مزايدة يخليك تختار العرض والسعر اللي يناسب ميزانيتك."
3. Icon: MapPin in text-red-600 on bg-red-50. Title: "فريق محلي بصراوي". Text: "تطبيق مصنوع بالبصرة، نفهم احتياجاتك وفريق دعمنا قريب عليك."
Titles: font-bold text-gray-900 mt-4 mb-2. Descriptions: text-gray-500 text-sm leading-relaxed.

━━━ 6. Customer Testimonials (شنو يگولون زبائننا؟) ━━━

bg-gray-50 py-12 px-4.
Title: "شنو يگولون زبائننا؟" (text-2xl font-bold text-center mb-8 text-gray-900).
A horizontally scrollable row on mobile (flex gap-4 overflow-x-auto pb-4 snap-x) or 3-column grid on md+.
Each testimonial card: bg-white rounded-2xl p-5 shadow-sm border border-gray-100 min-w-[280px] snap-center.
- Top: Row of 5 filled Star icons in text-yellow-400 (h-4 w-4).
- Middle: Quote text in text-gray-700 text-sm leading-relaxed mt-3 mb-4. Use realistic quotes:
  1. "طلبت سباك من دارنا، وصل بنص ساعة وسعره كان معقول جداً. خدمة ممتازة!"
  2. "أول مرة أحس بأمان وأنا أطلب فني للبيت. التطبيق سهل والفنيين محترمين."
  3. "تصليح المكيف كلفني نص سعر السوق. أنصح بيه كل أهل البصرة."
- Bottom: Customer name in font-bold text-gray-900 text-sm (e.g., "أم حسين", "أبو علي", "سارة محمد") and neighborhood in text-gray-400 text-xs (e.g., "حي الجزائر", "الجبيلة", "العشار").

━━━ 7. Final CTA Section ━━━

bg-orange-600 rounded-3xl mx-4 my-8 p-8 text-center.
Headline: "جاهز تطلب فني؟" in text-white text-2xl font-black.
Subtext: "حمّل التطبيق أو ابدأ مباشرة — الخدمة متاحة بكل مناطق البصرة." in text-orange-100 text-sm mt-2.
Button: "ابدأ هسه مجاناً" → bg-white text-orange-600 font-bold py-3.5 px-8 rounded-xl mt-6 shadow-md hover:bg-orange-50 transition active:scale-95 inline-block.

━━━ 8. Footer ━━━

bg-white border-t border-gray-100 py-8 px-4 text-center.
Brand name "دارنا" in text-orange-600 font-bold text-lg mb-2.
Text: "صُنع بـ ❤️ في البصرة" in text-gray-400 text-sm.
Below: "© ٢٠٢٦ تطبيق دارنا. جميع الحقوق محفوظة." in text-gray-300 text-xs mt-2.

FINAL NOTES:

All icons must be imported from lucide-react.
The page must feel premium, trustworthy, and inviting — not generic or templated.
Ensure smooth scroll behavior and consistent spacing throughout.
Use antialiased font rendering.
Every section should have generous padding (py-12 px-4) and max-w-6xl mx-auto for desktop containment.

Show full message

21d ago

Now I'll create the complete Darana landing page with all the required sections. Let me update the layout for RTL Arabic support and create the main page component.

I've built the complete Darana (دارنا) RTL Arabic landing page with all 8 sections as specified. Here's what's included:

Sticky Navbar - Glassmorphism effect with mobile hamburger menu, brand logo, and navigation links
Hero Section - Gradient background with compelling Iraqi Arabic headline, CTAs, and trust badge
Social Proof Stats Bar - Floating card with 3 key metrics (500+ technicians, 2000+ orders, 4.8 rating)
Services Grid - 4 service categories (plumbing, electrical, AC, appliance repair) with colored icons
Why Choose Darana - 3 value propositions (safety, pricing, local team) with descriptive text
Customer Testimonials - Horizontally scrollable on mobile, 3-column grid on desktop with realistic Arabic quotes
Final CTA - Orange branded section with conversion-focused button
Footer - Simple footer with branding and copyright

The page uses Tailwind logical properties (border-e, proper RTL flex behavior), Noto Sans Arabic font, and follows all the specified styling requirements including the orange-600 primary color palette.

21d ago

Act as an award-winning UI/UX designer. Build this as a single React component with no external data fetching or routing.
Your task is to create a visually STUNNING, highly creative, and modern Landing Page for "Darana" (دارنا), a home services marketplace in Basra, Iraq.

I want you to break away from boring, standard layouts. Use modern web design trends: think Bento Box grids, subtle Glassmorphism (blur effects), dynamic overlapping elements, floating UI badges, organic shapes, and excellent use of typography and whitespace. Make it feel like a premium, top-tier tech startup.

CRITICAL TECHNICAL REQUIREMENTS:

Tech Stack: Next.js 14, Tailwind CSS, shadcn/ui, lucide-react.
Strict RTL layout: The container MUST use dir="rtl".
Spacing: Use Tailwind logical properties EXCLUSIVELY (ms-, pe-, ps-, etc.).
Language: ONLY natural Iraqi Arabic dialect in the UI. Zero English text.
Brand Colors: Primary is orange-600. Be creative with gradients, soft glows (e.g., shadow-orange-500/20), and background tones.

SECTIONS TO DESIGN (You have absolute creative freedom on HOW to present these):

Creative Header: "دارنا" logo, standard links, and a stylish "دخول / حساب جديد" button.
Hero Area:
- Headline: "خدمات صيانة منزلية موثوقة بالبصرة"
- Subtext: "سباك، كهربائي، أو فني تبريد يجيك للبيت بضغطة زر. أسعار شفافة وأمان تام."
- CTAs: "اطلب فني هسه" and "سجل ويانا كفني".
- Creative Prompt: Don't just center the text. Integrate floating UI badges (e.g., a floating "٤.٨ ⭐ تقييم" badge) and abstract background shapes or glows to make it visually rich.
Social Proof Stats: +٥٠٠ فني معتمد, +٢,٠٠٠ طلب مكتمل, ٤.٨ ⭐. (Integrate this creatively, perhaps floating over the Hero or in a sleek glass-morphism bar).
Services (شنو تحتاج اليوم؟): السباكة, الكهرباء, التكييف والتبريد, تصليح أجهزة.
- Creative Prompt: DO NOT use a standard 4-column grid. Use a modern "Bento Box" layout with different sized cards, or staggered cards with distinct pastel backgrounds. Include Lucide icons.
Why Darana? (ليش دارنا هو خيارك الأفضل؟):
- أمان وموثوقية (فنيين بشهادة عدم محكومية)
- أسعار تناسبك (نظام مزايدة)
- فريق محلي بصراوي
- Creative Prompt: Use an asymmetrical layout, large aesthetic typography, or a dynamic timeline-like vertical flow.
Testimonials (شنو يگولون زبائننا؟): Real Iraqi quotes from (أم حسين, أبو علي, سارة).
- Creative Prompt: Design them as sleek, modern cards with overlapping quote icons, subtle blurs, or a masonry layout.
Footer & Final CTA: "جاهز تطلب فني؟ ابدأ هسه مجاناً". Footer text: "صُنع بـ ❤️ في البصرة. © ٢٠٢٦".

Remember: DO NOT give me a basic, predictable layout. Give me the "WOW" factor while keeping the code production-ready.

Show full message

21d ago

Now I'll create a completely redesigned, visually stunning landing page with modern design trends like Bento Box layouts, glassmorphism, floating elements, and creative asymmetrical layouts.

I've completely redesigned the Darana landing page with a stunning, modern aesthetic that breaks away from standard layouts. The new design features:

Hero Section: Full-screen with floating gradient orbs, animated stat badges that float up and down, and a creative Bento-style preview grid showing services with vivid gradients.

Services Section: A true Bento Box layout with varying card sizes - a large 2x2 plumbing card, smaller electricity and AC cards, and a wide appliances card, all with gradient backgrounds and hover animations.

Why Choose Us: Staggered asymmetrical cards where the middle card is offset vertically, creating visual interest with gradient icons and subtle shadows.

Testimonials: Modern cards with floating rotated quote icons, gradient avatar initials, and smooth hover lift effects.

Final CTA: A bold rounded section with layered gradients, subtle pattern overlays, and glassmorphism elements.

21d ago

Act as a Senior UI/UX Designer and Next.js Expert. Build a single, production-ready React component for the Landing Page of "Darana" (دارنا), a highly trusted home maintenance SaaS platform in Basra, Iraq.

CRITICAL DESIGN PHILOSOPHY:

DO NOT use abstract glowing orbs, crypto-style gradients, or excessive glassmorphism.
The design must feel SOLID, PRACTICAL, and HIGHLY TRUSTWORTHY (similar to global apps like Urban Company, Thumbtack, or B8ak).
Use a clean white background with bg-gray-50 for section contrast. Primary brand color is orange-600.
Instead of relying only on small vector icons, you MUST use Realistic Image Placeholders for services (e.g., a gray box with a Camera icon and text like "صورة حقيقية") to simulate a photo-rich layout.

TECHNICAL REQUIREMENTS:

Tech Stack: Next.js 14, Tailwind CSS, shadcn/ui components, lucide-react.
STRICT RTL layout: The main container MUST use dir="rtl".
Use Tailwind logical properties EXCLUSIVELY (e.g., ms-, pe-, ps-).
Language: Natural, friendly Iraqi Arabic ONLY. No English text in the UI.

SECTIONS TO BUILD (in order):

Clean Navbar:
- Solid white bg, bottom border.
- Logo: "دارنا" (bold orange).
- Links (hidden on mobile).
- Left: Solid orange button "دخول / حساب جديد".
Practical Hero Section (Split Layout):
- Right Side (Text): Headline "خدمات صيانة منزلية تعتمد عليها بالبصرة." Subtext: "فنيين موثقين أمنياً، أسعار واضحة، وضمان حقيقي على كل خدمة." Two Buttons: "اطلب الخدمة هسه" (Solid Orange, large) and "سجل كفني" (Outline).
- Left Side (Visual): A large, rounded-2xl Image Placeholder representing a real smiling Iraqi technician. Overlap a white card on the bottom edge of the image showing a green ShieldCheck icon and text: "✔️ فنيين بشهادة عدم محكومية".
Trust Banner (Edge-to-Edge):
- A full-width solid bg-gray-900 banner.
- 3 items horizontally (stack on mobile): "ضمان ٣٠ يوم على العمل" (Shield icon), "فنيين موثقين أمنياً" (UserCheck icon), "أسعار تنافسية بالمزايدة" (Wallet icon). Text in white.
Photo-Based Services Grid (شنو الخدمة اللي تحتاجها؟):
- A grid of 4 cards.
- EACH card MUST have a 16:9 Image Placeholder at the top (to represent real photos of AC cleaning, plumbing, etc.).
- Below the image: Bold title (السباكة, التكييف, الكهرباء, الأجهزة المنزلية), and a subtle rating text "⭐ ٤.٨ (٢٠٠+ طلب)".
How it Works (خطوات بسيطة وسريعة):
- 3 clear steps in a horizontal layout connected by a subtle dashed line (hidden on mobile):
  1. اطلب الخدمة (حدد المشكلة والوقت المناسب).
  2. استلم العروض أو السعر الثابت (قارن واختار الأنسب).
  3. تم إنجاز العمل (ادفع كاش بعد التأكد من الجودة).
Top Technicians Preview (أفضل الفنيين المتاحين):
- Title: "نخبة من فنيي البصرة جاهزين لخدمتك".
- A row of 3 profile cards. Each has: A round avatar placeholder, Name (e.g., مؤسسة المالكي, أحمد الكهربائي), a row of 5 yellow stars, "١٥٠+ خدمة مكتملة", and an outline button "اطلب هذا الفني".
Solid Footer:
- Clean dark background (bg-gray-900), text "صُنع بـ ❤️ في البصرة", copyright 2026.

Make the UI look premium, functional, and ready to convert visitors into users.

Show full message

21d ago

You can send messages while the preview loads

Code editing is not availableDuplicate this chat to use a more powerful code editor.

Loading integrations...

CRITICAL TECHNICAL REQUIREMENTS:

Tech Stack: Next.js 14, Tailwind CSS, shadcn/ui components, and lucide-react icons.
The entire container MUST use dir="rtl".
Use Tailwind logical properties exclusively (e.g., ms-4, pe-2, ps-4) for spacing to ensure perfect RTL rendering.
No English text anywhere in the rendered UI. All placeholders and text must be in natural, friendly Iraqi Arabic dialect.
Primary brand color is orange-600. Background should be bg-gray-50.

PAGE SECTIONS TO BUILD (in order):

━━━ 1. Sticky Navbar ━━━

sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100.
Right side: Brand name "دارنا" in text-orange-600 font-black text-2xl.
Center (hidden on mobile, visible on md+): Simple links — الخدمات, مميزاتنا, آراء الزبائن.
Left side: Button "دخول / حساب جديد" (bg-orange-600 text-white rounded-xl px-4 py-2 font-bold text-sm).
On mobile: show a hamburger menu icon (Menu from lucide) on the left side instead of the button and links.

━━━ 2. Hero Section ━━━

Background: bg-gradient-to-b from-orange-50/80 to-gray-50.
Headline: "خدمات صيانة منزلية موثوقة بالبصرة" (text-4xl md:text-5xl font-black text-gray-900 leading-tight).
Sub-headline: "سباك، كهربائي، أو فني تبريد يجيك للبيت بضغطة زر. أسعار شفافة وأمان تام." (text-gray-600 mt-4 text-lg leading-relaxed).
CTA row (flex gap-3, stack vertically on mobile, horizontal on md+):
- Primary: "اطلب فني هسه" → bg-orange-600 text-white w-full md:w-auto py-3.5 px-8 rounded-xl font-bold shadow-lg shadow-orange-200 hover:bg-orange-700 transition active:scale-95.
- Secondary: "سجل ويانا كفني" → bg-white text-orange-600 border-2 border-orange-200 w-full md:w-auto py-3.5 px-8 rounded-xl font-bold hover:bg-orange-50 transition.
Below the CTAs, add a small trust line: "🔒 بياناتك محمية بالكامل" in text-gray-400 text-sm mt-4.

━━━ 3. Social Proof Stats Bar ━━━

A horizontal row (flex, justify-around) inside a bg-white rounded-2xl shadow-sm border border-gray-100 p-6 mx-4 -mt-6 relative z-10 card that overlaps slightly with the hero.
3 stats, each with a large bold number and a label below:
- "+٥٠٠" → "فني معتمد" (Users icon in orange)
- "+٢,٠٠٠" → "طلب مكتمل" (CheckCircle2 icon in green)
- "٤.٨ ⭐" → "تقييم الزبائن" (Star icon in yellow)
Numbers: text-2xl font-black text-gray-900. Labels: text-xs text-gray-500 mt-1.
Add vertical dividers (border-e border-gray-100) between each stat.

━━━ 4. Services Grid (خدماتنا) ━━━

Section padding: py-12 px-4.
Title: "شنو تحتاج اليوم؟" (text-2xl font-bold text-center mb-8 text-gray-900).
Grid: grid grid-cols-2 md:grid-cols-4 gap-4.
Each card: bg-white rounded-2xl shadow-sm border border-gray-100 p-6 text-center transition-all hover:border-orange-300 hover:shadow-md cursor-pointer group.
Card items (use a colored circle bg for the icon, e.g., w-14 h-14 rounded-2xl flex items-center justify-center mx-auto mb-3):
1. السباكة → Droplets icon, text-blue-500 on bg-blue-50.
2. الكهرباء → Zap icon, text-yellow-500 on bg-yellow-50.
3. التكييف والتبريد → Wind icon, text-cyan-500 on bg-cyan-50.
4. تصليح أجهزة → Cog icon, text-purple-500 on bg-purple-50.
Label below icon: text-sm font-bold text-gray-800 group-hover:text-orange-600 transition.

━━━ 5. Why Choose Darana (ليش دارنا؟) ━━━

bg-white py-12 px-4.
Title: "ليش دارنا هو خيارك الأفضل؟" (text-2xl font-bold text-center mb-10 text-gray-900).
Grid: grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto.
Each item: centered layout with icon circle, bold title, and description paragraph.
1. Icon: ShieldCheck in text-green-600 on bg-green-50 circle (w-14 h-14 rounded-2xl). Title: "أمان وموثوقية". Text: "كل الفنيين مسجلين رسمياً وعدهم شهادة عدم محكومية."
2. Icon: Wallet in text-orange-600 on bg-orange-50. Title: "أسعار تناسبك". Text: "نظام مزايدة يخليك تختار العرض والسعر اللي يناسب ميزانيتك."
3. Icon: MapPin in text-red-600 on bg-red-50. Title: "فريق محلي بصراوي". Text: "تطبيق مصنوع بالبصرة، نفهم احتياجاتك وفريق دعمنا قريب عليك."
Titles: font-bold text-gray-900 mt-4 mb-2. Descriptions: text-gray-500 text-sm leading-relaxed.

━━━ 6. Customer Testimonials (شنو يگولون زبائننا؟) ━━━

bg-gray-50 py-12 px-4.
Title: "شنو يگولون زبائننا؟" (text-2xl font-bold text-center mb-8 text-gray-900).
A horizontally scrollable row on mobile (flex gap-4 overflow-x-auto pb-4 snap-x) or 3-column grid on md+.
Each testimonial card: bg-white rounded-2xl p-5 shadow-sm border border-gray-100 min-w-[280px] snap-center.
- Top: Row of 5 filled Star icons in text-yellow-400 (h-4 w-4).
- Middle: Quote text in text-gray-700 text-sm leading-relaxed mt-3 mb-4. Use realistic quotes:
  1. "طلبت سباك من دارنا، وصل بنص ساعة وسعره كان معقول جداً. خدمة ممتازة!"
  2. "أول مرة أحس بأمان وأنا أطلب فني للبيت. التطبيق سهل والفنيين محترمين."
  3. "تصليح المكيف كلفني نص سعر السوق. أنصح بيه كل أهل البصرة."
- Bottom: Customer name in font-bold text-gray-900 text-sm (e.g., "أم حسين", "أبو علي", "سارة محمد") and neighborhood in text-gray-400 text-xs (e.g., "حي الجزائر", "الجبيلة", "العشار").

━━━ 7. Final CTA Section ━━━

bg-orange-600 rounded-3xl mx-4 my-8 p-8 text-center.
Headline: "جاهز تطلب فني؟" in text-white text-2xl font-black.
Subtext: "حمّل التطبيق أو ابدأ مباشرة — الخدمة متاحة بكل مناطق البصرة." in text-orange-100 text-sm mt-2.
Button: "ابدأ هسه مجاناً" → bg-white text-orange-600 font-bold py-3.5 px-8 rounded-xl mt-6 shadow-md hover:bg-orange-50 transition active:scale-95 inline-block.

━━━ 8. Footer ━━━

bg-white border-t border-gray-100 py-8 px-4 text-center.
Brand name "دارنا" in text-orange-600 font-bold text-lg mb-2.
Text: "صُنع بـ ❤️ في البصرة" in text-gray-400 text-sm.

FINAL NOTES:

All icons must be imported from lucide-react.
The page must feel premium, trustworthy, and inviting — not generic or templated.
Ensure smooth scroll behavior and consistent spacing throughout.
Use antialiased font rendering.
Every section should have generous padding (py-12 px-4) and max-w-6xl mx-auto for desktop containment.

Now I'll create the complete Darana landing page with all the required sections. Let me update the layout for RTL Arabic support and create the main page component.

I've built the complete Darana (دارنا) RTL Arabic landing page with all 8 sections as specified. Here's what's included:

Sticky Navbar - Glassmorphism effect with mobile hamburger menu, brand logo, and navigation links
Hero Section - Gradient background with compelling Iraqi Arabic headline, CTAs, and trust badge
Social Proof Stats Bar - Floating card with 3 key metrics (500+ technicians, 2000+ orders, 4.8 rating)
Services Grid - 4 service categories (plumbing, electrical, AC, appliance repair) with colored icons
Why Choose Darana - 3 value propositions (safety, pricing, local team) with descriptive text
Customer Testimonials - Horizontally scrollable on mobile, 3-column grid on desktop with realistic Arabic quotes
Final CTA - Orange branded section with conversion-focused button
Footer - Simple footer with branding and copyright

21d ago

CRITICAL TECHNICAL REQUIREMENTS:

Tech Stack: Next.js 14, Tailwind CSS, shadcn/ui, lucide-react.
Strict RTL layout: The container MUST use dir="rtl".
Spacing: Use Tailwind logical properties EXCLUSIVELY (ms-, pe-, ps-, etc.).
Language: ONLY natural Iraqi Arabic dialect in the UI. Zero English text.
Brand Colors: Primary is orange-600. Be creative with gradients, soft glows (e.g., shadow-orange-500/20), and background tones.

SECTIONS TO DESIGN (You have absolute creative freedom on HOW to present these):

Creative Header: "دارنا" logo, standard links, and a stylish "دخول / حساب جديد" button.
Hero Area:
- Headline: "خدمات صيانة منزلية موثوقة بالبصرة"
- Subtext: "سباك، كهربائي، أو فني تبريد يجيك للبيت بضغطة زر. أسعار شفافة وأمان تام."
- CTAs: "اطلب فني هسه" and "سجل ويانا كفني".
- Creative Prompt: Don't just center the text. Integrate floating UI badges (e.g., a floating "٤.٨ ⭐ تقييم" badge) and abstract background shapes or glows to make it visually rich.
Social Proof Stats: +٥٠٠ فني معتمد, +٢,٠٠٠ طلب مكتمل, ٤.٨ ⭐. (Integrate this creatively, perhaps floating over the Hero or in a sleek glass-morphism bar).
Services (شنو تحتاج اليوم؟): السباكة, الكهرباء, التكييف والتبريد, تصليح أجهزة.
- Creative Prompt: DO NOT use a standard 4-column grid. Use a modern "Bento Box" layout with different sized cards, or staggered cards with distinct pastel backgrounds. Include Lucide icons.
Why Darana? (ليش دارنا هو خيارك الأفضل؟):
- أمان وموثوقية (فنيين بشهادة عدم محكومية)
- أسعار تناسبك (نظام مزايدة)
- فريق محلي بصراوي
- Creative Prompt: Use an asymmetrical layout, large aesthetic typography, or a dynamic timeline-like vertical flow.
Testimonials (شنو يگولون زبائننا؟): Real Iraqi quotes from (أم حسين, أبو علي, سارة).
- Creative Prompt: Design them as sleek, modern cards with overlapping quote icons, subtle blurs, or a masonry layout.

Remember: DO NOT give me a basic, predictable layout. Give me the "WOW" factor while keeping the code production-ready.

Show full message

21d ago

Now I'll create a completely redesigned, visually stunning landing page with modern design trends like Bento Box layouts, glassmorphism, floating elements, and creative asymmetrical layouts.

I've completely redesigned the Darana landing page with a stunning, modern aesthetic that breaks away from standard layouts. The new design features:

Hero Section: Full-screen with floating gradient orbs, animated stat badges that float up and down, and a creative Bento-style preview grid showing services with vivid gradients.

Why Choose Us: Staggered asymmetrical cards where the middle card is offset vertically, creating visual interest with gradient icons and subtle shadows.

Testimonials: Modern cards with floating rotated quote icons, gradient avatar initials, and smooth hover lift effects.

Final CTA: A bold rounded section with layered gradients, subtle pattern overlays, and glassmorphism elements.

21d ago

CRITICAL DESIGN PHILOSOPHY:

DO NOT use abstract glowing orbs, crypto-style gradients, or excessive glassmorphism.
The design must feel SOLID, PRACTICAL, and HIGHLY TRUSTWORTHY (similar to global apps like Urban Company, Thumbtack, or B8ak).
Use a clean white background with bg-gray-50 for section contrast. Primary brand color is orange-600.
Instead of relying only on small vector icons, you MUST use Realistic Image Placeholders for services (e.g., a gray box with a Camera icon and text like "صورة حقيقية") to simulate a photo-rich layout.

TECHNICAL REQUIREMENTS:

Tech Stack: Next.js 14, Tailwind CSS, shadcn/ui components, lucide-react.
STRICT RTL layout: The main container MUST use dir="rtl".
Use Tailwind logical properties EXCLUSIVELY (e.g., ms-, pe-, ps-).
Language: Natural, friendly Iraqi Arabic ONLY. No English text in the UI.

SECTIONS TO BUILD (in order):

Clean Navbar:
- Solid white bg, bottom border.
- Logo: "دارنا" (bold orange).
- Links (hidden on mobile).
- Left: Solid orange button "دخول / حساب جديد".
Practical Hero Section (Split Layout):
- Right Side (Text): Headline "خدمات صيانة منزلية تعتمد عليها بالبصرة." Subtext: "فنيين موثقين أمنياً، أسعار واضحة، وضمان حقيقي على كل خدمة." Two Buttons: "اطلب الخدمة هسه" (Solid Orange, large) and "سجل كفني" (Outline).
- Left Side (Visual): A large, rounded-2xl Image Placeholder representing a real smiling Iraqi technician. Overlap a white card on the bottom edge of the image showing a green ShieldCheck icon and text: "✔️ فنيين بشهادة عدم محكومية".
Trust Banner (Edge-to-Edge):
- A full-width solid bg-gray-900 banner.
- 3 items horizontally (stack on mobile): "ضمان ٣٠ يوم على العمل" (Shield icon), "فنيين موثقين أمنياً" (UserCheck icon), "أسعار تنافسية بالمزايدة" (Wallet icon). Text in white.
Photo-Based Services Grid (شنو الخدمة اللي تحتاجها؟):
- A grid of 4 cards.
- EACH card MUST have a 16:9 Image Placeholder at the top (to represent real photos of AC cleaning, plumbing, etc.).
- Below the image: Bold title (السباكة, التكييف, الكهرباء, الأجهزة المنزلية), and a subtle rating text "⭐ ٤.٨ (٢٠٠+ طلب)".
How it Works (خطوات بسيطة وسريعة):
- 3 clear steps in a horizontal layout connected by a subtle dashed line (hidden on mobile):
  1. اطلب الخدمة (حدد المشكلة والوقت المناسب).
  2. استلم العروض أو السعر الثابت (قارن واختار الأنسب).
  3. تم إنجاز العمل (ادفع كاش بعد التأكد من الجودة).
Top Technicians Preview (أفضل الفنيين المتاحين):
- Title: "نخبة من فنيي البصرة جاهزين لخدمتك".
- A row of 3 profile cards. Each has: A round avatar placeholder, Name (e.g., مؤسسة المالكي, أحمد الكهربائي), a row of 5 yellow stars, "١٥٠+ خدمة مكتملة", and an outline button "اطلب هذا الفني".
Solid Footer:
- Clean dark background (bg-gray-900), text "صُنع بـ ❤️ في البصرة", copyright 2026.

Make the UI look premium, functional, and ready to convert visitors into users.

Show full message

21d ago

You can send messages while the preview loads

Code editing is not availableDuplicate this chat to use a more powerful code editor.

Loading integrations...