[V0_FILE]jpg:file="public/images/coloring.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/coloring-E0NA1loyKfSB9DnV3ZbiUML48sHnKE.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/styling.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/styling-9Ybbb9YOsrvq2JEINwRdW3RjXo36z3.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/salon-hero.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/salon-hero-Mgj1QJFUwDqFRAm14OuQT6QWAyhtDc.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/beauty-treatment.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/beauty-treatment-PJMqVxW2iLoWFsKkIlAmOBmV9TedKJ.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]jpg:file="public/images/transformation.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/transformation-pVO4qtw3O2rTIbjvdFczLLHpOWiqaC.jpg" isMerged="true" [V0_FILE]jpg:file="public/images/salon-interior.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/images/salon-interior-Yw6XSlPrBGLILmpofxdvNOZMS7Bamd.jpg" isMerged="true" [V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { /* Elegant feminine palette - cream, rose gold, charcoal */ --background: oklch(0.98 0.005 60); --foreground: oklch(0.25 0.02 30); --card: oklch(1 0 0); --card-foreground: oklch(0.25 0.02 30); --popover: oklch(1 0 0); --popover-foreground: oklch(0.25 0.02 30); --primary: oklch(0.65 0.12 25); --primary-foreground: oklch(1 0 0); --secondary: oklch(0.95 0.015 50); --secondary-foreground: oklch(0.25 0.02 30); --muted: oklch(0.94 0.01 60); --muted-foreground: oklch(0.5 0.02 30); --accent: oklch(0.85 0.08 25); --accent-foreground: oklch(0.25 0.02 30); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.9 0.02 50); --input: oklch(0.92 0.01 50); --ring: oklch(0.65 0.12 25); --chart-1: oklch(0.65 0.12 25); --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.5rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.65 0.12 25); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.95 0.015 50); --sidebar-accent-foreground: oklch(0.25 0.02 30); --sidebar-border: oklch(0.9 0.02 50); --sidebar-ring: oklch(0.65 0.12 25); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --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: var(--font-sans), 'Montserrat', system-ui, sans-serif; --font-serif: var(--font-serif), 'Cormorant Garamond', Georgia, serif; --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/page.tsx" isMerged="true" import { HeroSection } from "@/components/hero-section"; import { StickyContactBar } from "@/components/sticky-contact-bar"; import { ServicesSection } from "@/components/services-section"; import { WhyChooseUs } from "@/components/why-choose-us"; import { GallerySection } from "@/components/gallery-section"; import { TestimonialsSection } from "@/components/testimonials-section"; import { ContactSection } from "@/components/contact-section"; import { Footer } from "@/components/footer"; export default function Home() { return (

); } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isMerged="true" "use client"; import Image from "next/image"; import { Phone, MessageCircle } from "lucide-react"; import { Button } from "@/components/ui/button"; export function HeroSection() { const whatsappNumber = "213XXXXXXXXX"; // Replace with actual number const phoneNumber = "+213XXXXXXXXX"; // Replace with actual number return (

{/* Background Image */}

Salon de beauté Cléopâtre à Alger Hussein Dey - Intérieur élégant

{/* Content */}

{/* Logo / Brand Name */}

Salon de Beauté

Cléopâtre

Salon de coiffure & beauté à Alger Hussein Dey

Coiffure, soins & mise en beauté réalisés par des professionnelles expérimentées

{/* CTA Buttons */}

{/* Scroll indicator */}

); } [V0_FILE]typescriptreact:file="components/sticky-contact-bar.tsx" isMerged="true" "use client"; import { Phone, MessageCircle, Mail } from "lucide-react"; export function StickyContactBar() { const whatsappNumber = "213XXXXXXXXX"; // Replace with actual number const phoneNumber = "+213XXXXXXXXX"; // Replace with actual number const scrollToContact = () => { const contactSection = document.getElementById("contact"); if (contactSection) { contactSection.scrollIntoView({ behavior: "smooth" }); } }; return (

{/* WhatsApp */} WhatsApp {/* Phone */} Appeler {/* Contact Form */}

); } [V0_FILE]typescriptreact:file="components/services-section.tsx" isMerged="true" "use client"; import { Scissors, Sparkles, Heart } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; const services = [ { category: "Coiffure", icon: Scissors, items: [ { name: "Coupe Femme", description: "Une coupe personnalisée qui sublime votre visage et votre style", }, { name: "Brushing", description: "Brushing professionnel pour un look soigné et une tenue longue durée", }, { name: "Coloration", description: "Coloration experte avec des produits de qualité pour un résultat éclatant", }, { name: "Lissage Brésilien", description: "Cheveux lisses, brillants et disciplinés pendant plusieurs mois", }, { name: "Coiffure Événement", description: "Chignons, coiffures de mariée et mises en beauté pour vos occasions spéciales", }, ], }, { category: "Soins Capillaires", icon: Sparkles, items: [ { name: "Soin Profond", description: "Traitement intensif pour réparer et nourrir vos cheveux en profondeur", }, { name: "Soin Kératine", description: "Renforce et revitalise vos cheveux pour une brillance naturelle", }, { name: "Masque Nourrissant", description: "Hydratation intense pour des cheveux doux et soyeux", }, ], }, { category: "Beauté", icon: Heart, items: [ { name: "Maquillage", description: "Maquillage professionnel pour sublimer votre beauté naturelle", }, { name: "Épilation", description: "Épilation soignée à la cire pour une peau douce et lisse", }, { name: "Soin Visage", description: "Nettoyage et soin du visage pour une peau éclatante de santé", }, ], }, ]; export function ServicesSection() { const whatsappNumber = "213XXXXXXXXX"; // Replace with actual number return (

{/* Section Header */}

Nos Prestations

Services de Coiffure & Beauté

Découvrez notre gamme complète de services de coiffure et de beauté à Alger Hussein Dey, réalisés par notre équipe de professionnelles expérimentées.

{/* Services Grid */}

{services.map((category) => ( {/* Category Header */}

{category.category}

{/* Services List */}

{service.name}

{service.description}

{/* CTA Button */} ))}

); } [V0_FILE]typescriptreact:file="components/why-choose-us.tsx" isMerged="true" "use client"; import { Award, ShieldCheck, Sparkles, Users, MapPin } from "lucide-react"; const reasons = [ { icon: Users, title: "Équipe Professionnelle", description: "Des coiffeuses et esthéticiennes expérimentées, passionnées par leur métier et à l'écoute de vos envies.", }, { icon: Award, title: "Produits de Qualité", description: "Nous utilisons exclusivement des produits professionnels haut de gamme pour garantir des résultats exceptionnels.", }, { icon: ShieldCheck, title: "Hygiène Irréprochable", description: "Un salon toujours propre et désinfecté, pour votre sécurité et votre bien-être.", }, { icon: Sparkles, title: "Résultats Visibles", description: "Des transformations spectaculaires et des soins efficaces pour sublimer votre beauté naturelle.", }, { icon: MapPin, title: "Localisation Pratique", description: "Situé au cœur d'Hussein Dey, facilement accessible pour les clientes d'Alger et des environs.", }, ]; export function WhyChooseUs() { return (

{/* Section Header */}

Notre Engagement

Pourquoi Choisir Cléopâtre ?

Depuis des années, nous accompagnons les femmes d'Alger Hussein Dey dans leur quête de beauté avec professionnalisme et passion.

{/* Reasons Grid */}

{reasons.map((reason, index) => (

{reason.title}

{reason.description}

))}

{/* Trust Badge */}

{[1, 2, 3, 4].map((i) => (

{String.fromCharCode(64 + i)}

))}

+500 clientes satisfaites à Hussein Dey

); } [V0_FILE]typescriptreact:file="components/gallery-section.tsx" isMerged="true" "use client"; import Image from "next/image"; import { useState } from "react"; import { X } from "lucide-react"; const galleryImages = [ { src: "/images/styling.jpg", alt: "Coiffure professionnelle au salon Cléopâtre Hussein Dey Alger", category: "Coiffure", }, { src: "/images/coloring.jpg", alt: "Coloration cheveux salon de beauté Alger", category: "Coloration", }, { src: "/images/transformation.jpg", alt: "Transformation coiffure avant après Alger Hussein Dey", category: "Transformation", }, { src: "/images/beauty-treatment.jpg", alt: "Soin beauté visage salon Cléopâtre Alger", category: "Soins", }, { src: "/images/salon-interior.jpg", alt: "Intérieur du salon de coiffure Cléopâtre à Hussein Dey Alger", category: "Notre Salon", }, { src: "/images/salon-hero.jpg", alt: "Ambiance salon de beauté féminin Alger", category: "Ambiance", }, ]; export function GallerySection() { const [selectedImage, setSelectedImage] = useState(null); return (

{/* Section Header */}

Notre Travail

Galerie Photos

Découvrez nos réalisations et l'ambiance chaleureuse de notre salon de beauté à Alger Hussein Dey.

{/* Gallery Grid */}

{galleryImages.map((image, index) => ( ))}

{/* Lightbox */} {selectedImage && (

setSelectedImage(null)} onKeyDown={(e) => e.key === "Escape" && setSelectedImage(null)} role="dialog" aria-modal="true" >

)}

); } [V0_FILE]typescriptreact:file="components/testimonials-section.tsx" isMerged="true" "use client"; import { Star, Quote } from "lucide-react"; import { Card, CardContent } from "@/components/ui/card"; const testimonials = [ { name: "Amina B.", location: "Hussein Dey, Alger", rating: 5, text: "Un salon exceptionnel ! L'équipe est très professionnelle et à l'écoute. Ma coloration est parfaite et mes cheveux sont en pleine santé. Je recommande vivement !", service: "Coloration & Soins", }, { name: "Fatima Z.", location: "Alger Centre", rating: 5, text: "J'ai fait mon lissage brésilien chez Cléopâtre et le résultat est incroyable ! Mes cheveux sont lisses, brillants et faciles à coiffer. Merci à toute l'équipe !", service: "Lissage Brésilien", }, { name: "Sarah M.", location: "El Harrach, Alger", rating: 5, text: "Le meilleur salon de coiffure à Hussein Dey ! L'ambiance est chaleureuse et les coiffeuses sont très talentueuses. Ma coiffure de mariage était exactement ce que je voulais.", service: "Coiffure Mariée", }, { name: "Nadia K.", location: "Hussein Dey, Alger", rating: 5, text: "Cela fait des années que je suis cliente chez Cléopâtre. La qualité est toujours au rendez-vous. Les produits utilisés sont excellents et les résultats parlent d'eux-mêmes.", service: "Coupe & Brushing", }, { name: "Yasmine L.", location: "Kouba, Alger", rating: 5, text: "Première visite et certainement pas la dernière ! Accueil chaleureux, conseils personnalisés et un résultat au-delà de mes attentes. Un vrai coup de cœur !", service: "Soin Profond", }, { name: "Houda R.", location: "Hussein Dey, Alger", rating: 5, text: "Salon propre, équipe sympathique et professionnelle. Mon brushing tient parfaitement et mes cheveux sont sublimes. Je vous recommande ce salon les yeux fermés !", service: "Brushing", }, ]; export function TestimonialsSection() { return (

{/* Section Header */}

Témoignages

Ce Que Disent Nos Clientes

La satisfaction de nos clientes d'Alger et Hussein Dey est notre plus belle récompense.

{/* Testimonials Grid */}

{testimonials.map((testimonial) => ( {/* Quote Icon */} {/* Rating */}

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

{/* Testimonial Text */}

"{testimonial.text}"

{/* Author Info */}

{testimonial.name}

{testimonial.location}

{testimonial.service}

))}

{/* Google Reviews CTA */}

Vous êtes satisfaite de nos services ?

Partagez votre expérience avec nous

); } [V0_FILE]typescriptreact:file="components/contact-section.tsx" isMerged="true" "use client"; import React from "react" import { useState } from "react"; import { Phone, MessageCircle, MapPin, Clock, Send } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Textarea } from "@/components/ui/textarea"; import { Card, CardContent } from "@/components/ui/card"; export function ContactSection() { const [formData, setFormData] = useState({ name: "", phone: "", message: "", }); const [isSubmitting, setIsSubmitting] = useState(false); const [submitted, setSubmitted] = useState(false); const whatsappNumber = "213XXXXXXXXX"; // Replace with actual number const phoneNumber = "+213XXXXXXXXX"; // Replace with actual number const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setIsSubmitting(true); // Simulate form submission - replace with actual form handling await new Promise((resolve) => setTimeout(resolve, 1000)); // For now, redirect to WhatsApp with the message const message = `Bonjour, je suis ${formData.name}. ${formData.message} Mon numéro: ${formData.phone}`; window.open( `https://wa.me/${whatsappNumber}?text=${encodeURIComponent(message)}`, "_blank" ); setIsSubmitting(false); setSubmitted(true); setFormData({ name: "", phone: "", message: "" }); setTimeout(() => setSubmitted(false), 5000); }; return (

{/* Section Header */}

Nous Contacter

Localisation & Contact

Situé à Hussein Dey, notre salon accueille les clientes d'Alger et des environs. Prenez rendez-vous dès maintenant !

{/* Contact Info & Map */}

{/* Quick Contact Buttons */}

{/* Contact Info Cards */} {/* Address */}

Adresse

Hussein Dey, Alger
Algérie

{/* Hours */}

Horaires

Samedi - Jeudi : 9h00 - 19h00
Vendredi : Fermé

{/* Phone */}

Téléphone

{phoneNumber}

{/* Google Map */}