[V0_FILE]typescriptreact:file="components/ui/textarea.tsx" isMerged="true" import * as React from "react" import { cn } from "@/lib/utils" export interface TextareaProps extends React.TextareaHTMLAttributes {} const Textarea = React.forwardRef(({ className, ...props }, ref) => { return (

)
})
Textarea.displayName = "Textarea"

export { Textarea }
[V0_FILE]png:file="public/minimal-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimal-logo-zFkiAQbqRs655LNfYeWI6pESNKgBuD.png" isMerged="true"
[V0_FILE]png:file="public/luxury-apartment-living-room.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-apartment-living-room-Cp1mgizAu5vBzRacr3kc40uVnbR5k7.png" isMerged="true"
[V0_FILE]png:file="public/luxury-apartment-bathroom.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-apartment-bathroom-eVEs10IOhsCQesyNskXOlIe1zf79jR.png" isMerged="true"
[V0_FILE]png:file="public/luxury-rooftop-infinity-pool.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-rooftop-infinity-pool-sXmntNf4Qi6aiSQfEKeUq86VjNoKTg.png" isMerged="true"
[V0_FILE]png:file="public/modern-gym-equipment.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-gym-equipment-JaOb3qcqU8Jqtd7SxG4tZSXUcHBcOD.png" isMerged="true"
[V0_FILE]png:file="public/luxury-clubhouse-lounge.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/luxury-clubhouse-lounge-smDQekvYb7J0Gb164VMKoBBKpxCL4A.png" isMerged="true"
[V0_FILE]png:file="public/outdoor-bbq-dining.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/outdoor-bbq-dining-GBPiKaV7GtYTjEG6e7oZNB8Df7YCPy.png" isMerged="true"
[V0_FILE]png:file="public/minimal-white-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/minimal-white-logo-sYJB2NgEqebY0DYzviOkaGok09fV2z.png" isMerged="true"
[V0_FILE]typescriptreact:file="app/privacy-policy/page.tsx" isMerged="true"
import Link from "next/link"

export default function PrivacyPolicy() {
  return (
    <main className="min-h-screen bg-white">
      <div className="container mx-auto px-4 py-16 md:py-24">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold mb-8">Privacy Policy</h1>

<div className="prose max-w-none">
            <p className="text-neutral-600 mb-6">Last updated: May 11, 2025</p>

<h2 className="text-xl font-semibold mt-8 mb-4">1. Introduction</h2>
            <p>
              Palm Signature ("we," "our," or "us") respects your privacy and is committed to protecting your personal
              data. This privacy policy will inform you about how we look after your personal data when you visit our
              website and tell you about your privacy rights and how the law protects you.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">2. The Data We Collect About You</h2>
            <p>
              Personal data means any information about an individual from which that person can be identified. We may
              collect, use, store and transfer different kinds of personal data about you which we have grouped together
              as follows:
            </p>
            <ul className="list-disc pl-6 my-4 space-y-2">
              <li>
                <strong>Identity Data</strong> includes first name, last name, username or similar identifier, title.
              </li>
              <li>
                <strong>Contact Data</strong> includes email address, telephone numbers, and address.
              </li>
              <li>
                <strong>Technical Data</strong> includes internet protocol (IP) address, browser type and version, time
                zone setting and location, browser plug-in types and versions, operating system and platform, and other
                technology on the devices you use to access this website.
              </li>
              <li>
                <strong>Usage Data</strong> includes information about how you use our website and services.
              </li>
              <li>
                <strong>Marketing and Communications Data</strong> includes your preferences in receiving marketing from
                us and our third parties and your communication preferences.
              </li>
            </ul>

<h2 className="text-xl font-semibold mt-8 mb-4">3. How We Use Your Personal Data</h2>
            <p>
              We will only use your personal data when the law allows us to. Most commonly, we will use your personal
              data in the following circumstances:
            </p>
            <ul className="list-disc pl-6 my-4 space-y-2">
              <li>Where we need to perform the contract we are about to enter into or have entered into with you.</li>
              <li>
                Where it is necessary for our legitimate interests (or those of a third party) and your interests and
                fundamental rights do not override those interests.
              </li>
              <li>Where we need to comply with a legal obligation.</li>
            </ul>

<h2 className="text-xl font-semibold mt-8 mb-4">4. Data Security</h2>
            <p>
              We have put in place appropriate security measures to prevent your personal data from being accidentally
              lost, used or accessed in an unauthorized way, altered or disclosed. In addition, we limit access to your
              personal data to those employees, agents, contractors and other third parties who have a business need to
              know.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">5. Data Retention</h2>
            <p>
              We will only retain your personal data for as long as reasonably necessary to fulfill the purposes we
              collected it for, including for the purposes of satisfying any legal, regulatory, tax, accounting or
              reporting requirements.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">6. Your Legal Rights</h2>
            <p>
              Under certain circumstances, you have rights under data protection laws in relation to your personal data,
              including the right to:
            </p>
            <ul className="list-disc pl-6 my-4 space-y-2">
              <li>Request access to your personal data.</li>
              <li>Request correction of your personal data.</li>
              <li>Request erasure of your personal data.</li>
              <li>Object to processing of your personal data.</li>
              <li>Request restriction of processing your personal data.</li>
              <li>Request transfer of your personal data.</li>
              <li>Right to withdraw consent.</li>
            </ul>

<h2 className="text-xl font-semibold mt-8 mb-4">7. Contact Us</h2>
            <p>If you have any questions about this privacy policy or our privacy practices, please contact us at:</p>
            <p className="mt-4">
              <strong>Palmera Signature Real Estate LLC</strong>
              <br />
              License No. 1486676 – Registered with RERA No. 49920
              <br />
              Email: hello@palmsignature.ae
              <br />
              Phone: +971581998661
            </p>

<div className="border-t border-gray-200 mt-12 pt-8">
              <p className="text-sm text-neutral-500">© 2025 Palm Signature. All rights reserved.</p>
              <div className="flex gap-4 mt-4">
                <Link href="/" className="text-sm text-blue-600 hover:underline">
                  Back to Home
                </Link>
                <Link href="/terms-of-use" className="text-sm text-blue-600 hover:underline">
                  Terms of Use
                </Link>
                <Link href="/sitemap" className="text-sm text-blue-600 hover:underline">
                  Sitemap
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/terms-of-use/page.tsx" isMerged="true"
import Link from "next/link"

export default function TermsOfUse() {
  return (
    <main className="min-h-screen bg-white">
      <div className="container mx-auto px-4 py-16 md:py-24">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold mb-8">Terms of Use</h1>

<div className="prose max-w-none">
            <p className="text-neutral-600 mb-6">Last updated: May 11, 2025</p>

<h2 className="text-xl font-semibold mt-8 mb-4">1. Introduction</h2>
            <p>
              These terms and conditions govern your use of the Cove Edition 5 website operated by Palm Signature. By
              accessing or using our website, you agree to be bound by these terms. If you disagree with any part of the
              terms, you may not access the website.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">2. Intellectual Property Rights</h2>
            <p>
              Unless otherwise stated, Palm Signature and/or its licensors own the intellectual property rights for all
              material on this website. All intellectual property rights are reserved. You may view and/or print pages
              from the website for your own personal use subject to restrictions set in these terms and conditions.
            </p>
            <p className="mt-4">You must not:</p>
            <ul className="list-disc pl-6 my-4 space-y-2">
              <li>Republish material from this website</li>
              <li>Sell, rent or sub-license material from this website</li>
              <li>Reproduce, duplicate or copy material from this website</li>
              <li>Redistribute content from this website</li>
            </ul>

<h2 className="text-xl font-semibold mt-8 mb-4">3. Disclaimer</h2>
            <p>
              The materials on the Palm Signature website are provided on an 'as is' basis. Palm Signature makes no
              warranties, expressed or implied, and hereby disclaims and negates all other warranties including, without
              limitation, implied warranties or conditions of merchantability, fitness for a particular purpose, or
              non-infringement of intellectual property or other violation of rights.
            </p>
            <p className="mt-4">
              Further, Palm Signature does not warrant or make any representations concerning the accuracy, likely
              results, or reliability of the use of the materials on its website or otherwise relating to such materials
              or on any sites linked to this site.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">4. Limitations</h2>
            <p>
              In no event shall Palm Signature or its suppliers be liable for any damages (including, without
              limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or
              inability to use the materials on Palm Signature's website, even if Palm Signature or a Palm Signature
              authorized representative has been notified orally or in writing of the possibility of such damage.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">5. Accuracy of Materials</h2>
            <p>
              The materials appearing on Palm Signature's website could include technical, typographical, or
              photographic errors. Palm Signature does not warrant that any of the materials on its website are
              accurate, complete or current. Palm Signature may make changes to the materials contained on its website
              at any time without notice. However, Palm Signature does not make any commitment to update the materials.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">6. Links</h2>
            <p>
              Palm Signature has not reviewed all of the sites linked to its website and is not responsible for the
              contents of any such linked site. The inclusion of any link does not imply endorsement by Palm Signature
              of the site. Use of any such linked website is at the user's own risk.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">7. Modifications</h2>
            <p>
              Palm Signature may revise these terms of service for its website at any time without notice. By using this
              website you are agreeing to be bound by the then current version of these terms of service.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">8. Governing Law</h2>
            <p>
              These terms and conditions are governed by and construed in accordance with the laws of the United Arab
              Emirates and you irrevocably submit to the exclusive jurisdiction of the courts in that location.
            </p>

<h2 className="text-xl font-semibold mt-8 mb-4">9. Contact Information</h2>
            <p>If you have any questions about these Terms of Use, please contact us at:</p>
            <p className="mt-4">
              <strong>Palmera Signature Real Estate LLC</strong>
              <br />
              License No. 1486676 – Registered with RERA No. 49920
              <br />
              Email: hello@palmsignature.ae
              <br />
              Phone: +971581998661
            </p>

<div className="border-t border-gray-200 mt-12 pt-8">
              <p className="text-sm text-neutral-500">© 2025 Palm Signature. All rights reserved.</p>
              <div className="flex gap-4 mt-4">
                <Link href="/" className="text-sm text-blue-600 hover:underline">
                  Back to Home
                </Link>
                <Link href="/privacy-policy" className="text-sm text-blue-600 hover:underline">
                  Privacy Policy
                </Link>
                <Link href="/sitemap" className="text-sm text-blue-600 hover:underline">
                  Sitemap
                </Link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/sitemap/page.tsx" isMerged="true"
import Link from "next/link"

export default function Sitemap() {
  const siteStructure = [
    {
      title: "Main Pages",
      links: [
        { name: "Home", url: "/" },
        { name: "About", url: "/#about" },
        { name: "Amenities", url: "/#amenities" },
        { name: "Gallery", url: "/#gallery" },
        { name: "Location", url: "/#location" },
        { name: "Payment Plans", url: "/#payment" },
        { name: "Unit Details", url: "/#units" },
        { name: "Contact", url: "/#contact" },
      ],
    },
    {
      title: "Property Information",
      links: [
        { name: "Studios", url: "/#units" },
        { name: "1 Bedroom Apartments", url: "/#units" },
        { name: "2 Bedroom Apartments", url: "/#units" },
        { name: "Payment Options", url: "/#payment" },
        { name: "Floor Plans", url: "/#units" },
      ],
    },
    {
      title: "Legal Pages",
      links: [
        { name: "Privacy Policy", url: "/privacy-policy" },
        { name: "Terms of Use", url: "/terms-of-use" },
        { name: "Sitemap", url: "/sitemap" },
      ],
    },
    {
      title: "External Links",
      links: [
        { name: "Palm Signature Website", url: "https://palmsignature.ae" },
      ],
    },
  ]

return (
    <main className="min-h-screen bg-white">
      <div className="container mx-auto px-4 py-16 md:py-24">
        <div className="max-w-4xl mx-auto">
          <h1 className="text-3xl md:text-4xl font-bold mb-8">Sitemap</h1>

<p className="text-neutral-600 mb-12">
            Welcome to the sitemap of Cove Edition 5. This page provides an overview of all the sections and pages
            available on our website.
          </p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-16">
            {siteStructure.map((section, index) => (
              <div key={index}>
                <h2 className="text-xl font-semibold mb-6 pb-2 border-b border-gray-200">{section.title}</h2>
                <ul className="space-y-3">
                  {section.links.map((link, linkIndex) => (
                    <li key={linkIndex}>
                      <Link
                        href={link.url}
                        className="text-blue-600 hover:underline hover:text-blue-800 transition-colors"
                        target={link.url.startsWith("http") ? "_blank" : undefined}
                      >
                        {link.name}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

<div className="mt-16 pt-8 border-t border-gray-200">
            <div className="flex flex-col md:flex-row justify-between items-start md:items-center">
              <div>
                <p className="text-sm text-neutral-500 mb-2">© 2025 Palm Signature. All rights reserved.</p>
                <p className="text-sm text-neutral-500 mb-4">
                  Palmera Signature Real Estate LLC – License No. 1486676 – Registered with RERA No. 49920
                </p>
              </div>

</div>

<div className="flex gap-4 mt-8">
              <Link href="/" className="text-sm text-blue-600 hover:underline">
                Back to Home
              </Link>
              <Link href="/privacy-policy" className="text-sm text-blue-600 hover:underline">
                Privacy Policy
              </Link>
              <Link href="/terms-of-use" className="text-sm text-blue-600 hover:underline">
                Terms of Use
              </Link>
            </div>
          </div>
        </div>
      </div>
    </main>
  )
}
[V0_FILE]css:file="app/globals.css" isMerged="true"
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 48%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
  }

.animate-fade-in-delay {
    animation: fadeIn 1s ease-out 0.3s forwards;
    opacity: 0;
  }

.animate-fade-in-delay-2 {
    animation: fadeIn 1s ease-out 0.6s forwards;
    opacity: 0;
  }

.animate-fade-in-delay-3 {
    animation: fadeIn 1s ease-out 0.9s forwards;
    opacity: 0;
  }

.animate-bounce-slow {
    animation: bounce 2s infinite;
  }

@keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

@keyframes bounce {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
  }
}
[V0_FILE]typescript:file="tailwind.config.ts" isMerged="true"
import type { Config } from "tailwindcss"

const config = {
  darkMode: ["class"],
  content: [
    "./pages/**/*.{ts,tsx}",
    "./components/**/*.{ts,tsx}",
    "./app/**/*.{ts,tsx}",
    "./src/**/*.{ts,tsx}",
    "*.{js,ts,jsx,tsx,mdx}",
  ],
  prefix: "",
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        secondary: {
          DEFAULT: "hsl(var(--secondary))",
          foreground: "hsl(var(--secondary-foreground))",
        },
        destructive: {
          DEFAULT: "hsl(var(--destructive))",
          foreground: "hsl(var(--destructive-foreground))",
        },
        muted: {
          DEFAULT: "hsl(var(--muted))",
          foreground: "hsl(var(--muted-foreground))",
        },
        accent: {
          DEFAULT: "hsl(var(--accent))",
          foreground: "hsl(var(--accent-foreground))",
        },
        popover: {
          DEFAULT: "hsl(var(--popover))",
          foreground: "hsl(var(--popover-foreground))",
        },
        card: {
          DEFAULT: "hsl(var(--card))",
          foreground: "hsl(var(--card-foreground))",
        },
      },
      borderRadius: {
        lg: "var(--radius)",
        md: "calc(var(--radius) - 2px)",
        sm: "calc(var(--radius) - 4px)",
      },
      keyframes: {
        "accordion-down": {
          from: { height: "0" },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: "0" },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [require("tailwindcss-animate")],
} satisfies Config

export default config
[V0_FILE]jpeg:file="public/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3%20%282%29.jpg-tk8NS3UMbCovYE3I4UYZk2UJvGnDK0.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dubai-luxury-pool-burj-khalifa-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/shutterstock_2385561215.jpg-2qCwIpSbK4ZbHELeaSAnMAPA43oEjw.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dubai-skyline-sunset-burj-khalifa-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/shutterstock_2423199353.jpg-BtTtUeyBWqlFQduQR6IE0lcRSOSOEn.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-aerial-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2%20%281%29.jpg-noB5fMCRLvS8ASOpyGLPCRqNrZ3Vro.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-facade-front.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4%20%281%29.jpg-xBXwJ59pmo2uaahLngpokqO0NRDZQb.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-sunset-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/6%20%281%29.jpg-ECTjMrr1NN4WmEst2JvJQ2GbVhbe9E.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-imtiaz-angle.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/8%20%281%29.jpg-wKGkfweaaC475TtfIwzVIBzDJQM3tJ.jpeg" isMerged="true"
[V0_FILE]plaintext:file="public/images/PalmSignatureRealEstate-CoveEdition5-Studio-FloorPlan.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Studio-70mD1YZRjvWGb1wUmxi7FFw2xZHMXg.webp" isMerged="true"
[V0_FILE]plaintext:file="public/images/PalmSignatureRealEstate-CoveEdition5-1Bedroom-FloorPlan.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/1bed-BIMEOlVlHh1YjYhbf6wUt7MtqDnefY.webp" isMerged="true"
[V0_FILE]plaintext:file="public/images/PalmSignatureRealEstate-CoveEdition5-2Bedroom-FloorPlan.webp" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/2bed-sYNsw1fdbD2sk1whuctPMj3BctCCk0.webp" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-luxury-studio-apartment.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Studio.jpg-7fX0SraZGgXfi4Tu1BpYnHVnfePgVN.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/dubai-skyline-burj-khalifa-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/DubaiHappyFamily.jpg-kdEsxRMiah3cE4zgqbxj9BbPHYEOXC.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/luxury-kitchen-dining-area.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Cuisin%20e.jpg-HAyCxkb5YjUUm4l4L0YDVHXmSckmRS.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/luxury-bedroom-design.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Chambre.jpg-lBfWNlfxbMoNmGrE3XkI97gPtVELQB.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-corner-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Corner.jpg-XLfzbj0mcGyQiG34wC4lyigJv3cDiL.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-facade-detail.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Hero.jpg-2CjDedFutbVnmktBs0v3sZZInvwSN5.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-facade-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Facade.jpg-LBzSIN8dEIqmEpEUDK3bGt80HcUs5q.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/luxury-living-room-design.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Salon.jpg-6TZoqbsl4nb5eyna5dqFnUmMbrBwuo.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-lateral-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Lateral.jpg-fMJVs4f5ifecuLLc5FrtGvmHIEr3qU.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-5-rooftop-infinity-pool.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/InfinityPoolRoofTop.jpg-urbXChyQEw4RbXUBnAhzFlJb9QmUex.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/ceo.tsx" isEdit="true" isMerged="true"
"use client"

import { useRef, useState, useEffect } from "react"
import Image from "next/image"

export default function CEO() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          setIsVisible(true)
          observer.unobserve(entry.target)
        }
      },
      { threshold: 0.1 },
    )

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

return (
    <div
      ref={sectionRef}
      className={`py-20 md:py-32 bg-white transition-opacity duration-1000 ${isVisible ? "opacity-100" : "opacity-0"}`}
    >
      <div className="container mx-auto px-6 md:px-8">
        <div className="max-w-5xl mx-auto">
          <h2 className="text-4xl md:text-5xl font-semibold text-center tracking-tight mb-2">Gabriella Magalhaes</h2>
          <p className="text-xl md:text-2xl text-center text-neutral-500 mb-16">Founder & CEO of Palm Signature</p>

<div className="flex flex-col md:flex-row gap-16 items-center">
            <div className="md:w-1/2">
              <Image
                src="https://palm-signature.com/templates/Signature/assets/img/seo.png"
                alt="Gabriella Magalhaes - Founder & CEO of Palm Signature"
                width={500}
                height={600}
                className="w-full h-auto rounded-2xl"
                priority
              />
            </div>
            <div className="md:w-1/2">
              <p className="text-xl md:text-2xl font-medium mb-6 text-neutral-800">
                "Our vision is to redefine luxury real estate in Dubai and beyond."
              </p>
              <p className="text-base md:text-lg text-neutral-600 mb-8 leading-relaxed">
                Having sold hundreds of millions in luxury real estate and generated substantial returns for her
                investors, Gabriella leads Palm Signature with a commitment to excellence, integrity, and unparalleled
                client service.
              </p>
              <p className="text-base md:text-lg text-neutral-600 mb-10 leading-relaxed">
                As the exclusive agency offering COVE EDITION 5 by Imtiaz, Palm Signature brings exceptional properties
                to discerning clients.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <a
                  href="https://palmsignature.ae"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-center bg-blue-600 text-white font-medium rounded-full px-6 py-3 hover:bg-blue-700 transition-colors"
                >
                  Visit Palm Signature
                </a>
                <a
                  href="#contact-form"
                  className="text-center bg-white text-blue-600 font-medium border border-neutral-200 rounded-full px-6 py-3 hover:bg-neutral-50 transition-colors"
                >
                  Contact Us
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/seo-breadcrumbs.tsx" isMerged="true"
import Link from "next/link"

export default function SEOBreadcrumbs() {
  return (
    <div className="hidden">
      <nav aria-label="Breadcrumb">
        <ol itemScope itemType="https://schema.org/BreadcrumbList">
          <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
            <Link href="/" itemProp="item">
              <span itemProp="name">Home</span>
            </Link>
            <meta itemProp="position" content="1" />
          </li>
          <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
            <Link href="/#units" itemProp="item">
              <span itemProp="name">Units</span>
            </Link>
            <meta itemProp="position" content="2" />
          </li>
          <li itemProp="itemListElement" itemScope itemType="https://schema.org/ListItem">
            <Link href="/#payment" itemProp="item">
              <span itemProp="name">Payment Plans</span>
            </Link>
            <meta itemProp="position" content="3" />
          </li>
        </ol>
      </nav>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/language-provider.tsx" isMerged="true"
"use client"

import { createContext, useContext, useState, type ReactNode } from "react"

type Language = "en" | "fr"

interface LanguageContextType {
  language: Language
  setLanguage: (lang: Language) => void
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined)

export function LanguageProvider({ children }: { children: ReactNode }) {
  const [language, setLanguage] = useState<Language>("en")

return <LanguageContext.Provider value={{ language, setLanguage }}>{children}</LanguageContext.Provider>
}

export function useLanguage() {
  const context = useContext(LanguageContext)
  if (context === undefined) {
    throw new Error("useLanguage must be used within a LanguageProvider")
  }
  return context
}
[V0_FILE]json:file="package.json" isMerged="true"
{
  "dependencies": {
    "framer-motion": "^10.16.4"
  }
}
[V0_FILE]typescriptreact:file="components/animate-on-scroll.tsx" isQuickEdit="true" isMerged="true"
"use client"

import type React from "react"

import { useEffect, useRef, useState } from "react"

interface AnimateOnScrollProps {
  children: React.ReactNode
  animation?: string
}

export const AnimateOnScroll = ({ children, animation = "fade-in" }: AnimateOnScrollProps) => {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLDivElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

let animationClasses = ""

switch (animation) {
    case "fade-in":
      animationClasses = "transition-opacity duration-1000 transform translate-y-10 opacity-0"
      break
    case "fade-up":
      animationClasses = "transition-opacity duration-1000 transform translate-y-10 opacity-0"
      break
    default:
      animationClasses = "transition-opacity duration-1000 transform translate-y-10 opacity-0"
      break
  }

return (
    <div ref={sectionRef} className={isVisible ? "opacity-100 translate-y-0" : animationClasses}>
      {children}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/ceo-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useLanguage } from "./language-provider"
import { motion } from "framer-motion"
import { ExternalLink } from "lucide-react"

export default function CEOSection() {
  const { language } = useLanguage()

return (
    <section className="bg-neutral-900 text-white py-32">
      <div className="max-w-[980px] mx-auto px-4">
        {/* Palm Signature Logo */}
        <motion.div
          initial={{ opacity: 0 }}
          whileInView={{ opacity: 1 }}
          transition={{ duration: 0.8 }}
          viewport={{ once: true }}
          className="flex justify-center mb-16"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 4477 3718"
            fill="none"
            className="h-12 w-auto text-white"
          >
            <path
              d="M984.944 895.681C656.599 1175.61 447.7 1567.75 447.7 2016.48C447.7 2374.02 582.103 2696.97 803.26 2955.38C862.303 3024.58 927.492 3089.09 997.89 3148.27L998.095 3148.03C1060.97 3200.83 1128.04 3249.52 1198.67 3293.7C1097.14 3405.06 996.699 3517.51 897.433 3630.95C821.7 3580 749.576 3524.8 681.537 3465.7L680.721 3464.99C675.559 3460.49 670.399 3455.99 665.286 3451.44C633.948 3423.67 603.501 3395.05 573.994 3365.64C566.949 3358.61 559.958 3351.54 553.021 3344.43C213.408 2996.15 3.67405 2539.33 0.0484313 2029.91L0 2016.48C0 1447.53 256.997 943.355 665.366 581.444C670.457 576.915 675.595 572.436 680.735 567.955L681.536 567.256C1088.34 213.893 1641.14 0 2238.5 0C2835.86 0 3388.66 213.893 3795.46 567.257L3796.34 568.025C3801.46 572.484 3806.62 576.982 3811.68 581.488C4220.02 943.396 4477 1447.55 4477 2016.48C4477 2531.63 4266.31 2993.67 3923.33 3345.1C3916.61 3351.99 3909.83 3358.83 3903.01 3365.64C3873.51 3395.04 3843.08 3423.64 3811.76 3451.4C3806.37 3456.2 3800.94 3460.98 3795.49 3465.73C3727.22 3525.04 3654.83 3580.41 3578.81 3631.51C3479.64 3518.33 3379.12 3405.94 3277.33 3294.43C3348.32 3250.08 3415.74 3201.14 3478.92 3148.05L3479.11 3148.27C3556.69 3083.05 3627.95 3011.35 3691.63 2934.05C3902.06 2679.25 4029.3 2364.12 4029.3 2016.48C4029.3 1567.74 3820.4 1175.61 3492.05 895.674C3487.75 891.991 3483.44 888.329 3479.11 884.686C3438.19 850.49 3395.43 818.054 3351.07 787.405C3048.85 576.304 2664.71 448.106 2238.5 448.106C1809.47 448.106 1423.06 577.98 1119.94 791.567C1077.72 820.989 1037 852.073 997.924 884.726C993.589 888.37 989.24 891.996 984.944 895.681Z"
              fill="currentColor"
            ></path>
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M2014.75 2444.97C1844.11 2613.25 1676.21 2784.29 1511.11 2958.03C1428.84 2913.72 1353.38 2862.43 1285.63 2805.39L1285.83 2805.14C1239.23 2765.96 1196.3 2724.19 1157.33 2680.18C1329.5 2498.32 1504.66 2319.34 1682.75 2143.32C1426.56 2156.47 1170.72 2178.71 915.713 2210.05C902.322 2146.73 895.4 2082 895.4 2016.48C895.4 1928.11 908.243 1840.98 932.702 1756.72C1175.63 1728.44 1419.24 1708.08 1663.15 1695.63C1512.92 1561.14 1361.19 1429 1208.2 1299.42C1229.9 1277.58 1252.6 1256.41 1276.25 1235.95L1285.83 1227.81C1374.57 1152.6 1476.28 1087.38 1588.79 1035.18C1731.98 1157.79 1874.02 1282.56 2014.75 1409.35V911.401C2087.06 901.43 2161.77 896.213 2238.5 896.213C2315.3 896.213 2390.07 901.439 2462.45 911.428V1408.37C2602.78 1282.23 2744.72 1157.83 2888.23 1035.19C3000.74 1087.38 3102.47 1152.57 3191.2 1227.78L3200.74 1235.95C3224.43 1256.43 3247.16 1277.64 3268.89 1299.51L3259.82 1307.19C3109.17 1434.69 2960.25 1564.17 2813.13 1695.59C3057.28 1708.02 3301.13 1728.46 3544.29 1756.77C3568.76 1840.97 3581.6 1928.1 3581.6 2016.48C3581.6 2082.01 3574.69 2146.73 3561.32 2210.03C3305.58 2178.6 3049 2156.33 2792.07 2143.2C2970.56 2319.72 3146.24 2499.2 3318.71 2681.26C3280 2724.87 3237.39 2766.28 3191.17 2805.14L3191.35 2805.36C3123.24 2862.67 3047.32 2914.19 2964.51 2958.68C2799.98 2785.66 2632.51 2615.05 2462.45 2447.18V3717.45H2014.75V2444.97ZM2555.07 1885.23L2238.5 1568.37L1921.93 1885.23L2238.5 2202.09L2555.07 1885.23Z"
              fill="currentColor"
            ></path>
          </svg>
        </motion.div>

<div className="flex flex-col lg:flex-row items-center gap-16">
          {/* Left Column - Image */}
          <motion.div
            initial={{ opacity: 0, scale: 0.95 }}
            whileInView={{ opacity: 1, scale: 1 }}
            transition={{ duration: 1 }}
            viewport={{ once: true }}
            className="lg:w-1/2 flex justify-center"
          >
            <div className="relative w-[280px] md:w-[320px] h-[400px] md:h-[450px]">
              <img
                src="https://palm-signature.com/templates/Signature/assets/img/seo.png"
                alt="Gabriella Magalhaes - Founder & CEO of Palm Signature Real Estate Agency"
                className="w-full h-full object-contain"
              />
            </div>
          </motion.div>

{/* Right Column - Content */}
          <motion.div
            initial={{ opacity: 0, y: 30 }}
            whileInView={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
            viewport={{ once: true }}
            className="lg:w-1/2 text-center lg:text-left"
          >
            <motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.2 }}
              viewport={{ once: true }}
            >
              <h3 className="text-lg font-normal text-neutral-400 mb-1">
                {language === "en" ? "Founder & CEO of Palm Signature" : "Fondatrice & PDG de Palm Signature"}
              </h3>
              <h2 className="text-4xl font-bold mb-6">Gabriella Magalhaes</h2>
            </motion.div>

<motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.4 }}
              viewport={{ once: true }}
            >
              <p className="text-2xl font-light italic text-neutral-300 mb-8 leading-relaxed">
                {language === "en"
                  ? '"Our vision is to redefine luxury real estate in Dubai and beyond."'
                  : '"Notre vision est de redéfinir l\'immobilier de luxe à Dubaï et au-delà."'}
              </p>
            </motion.div>

<motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.6 }}
              viewport={{ once: true }}
            >
              <p className="text-neutral-400 mb-8 leading-relaxed">
                {language === "en"
                  ? "Having sold hundreds of millions in luxury real estate and generated substantial returns for her investors, Gabriella leads Palm Signature with a commitment to excellence, integrity, and unparalleled client service. As the exclusive agency offering COVE EDITION 5 by Imtiaz, Palm Signature brings exceptional properties to discerning clients."
                  : "Ayant vendu des centaines de millions dans l'immobilier de luxe et généré des rendements substantiels pour ses investisseurs, Gabriella dirige Palm Signature avec un engagement envers l'excellence, l'intégrité et un service client inégalé. En tant qu'agence exclusive proposant COVE EDITION 5 par Imtiaz, Palm Signature apporte des propriétés exceptionnelles à une clientèle exigeante."}
              </p>
            </motion.div>

<motion.div
              initial={{ opacity: 0 }}
              whileInView={{ opacity: 1 }}
              transition={{ duration: 0.8, delay: 0.8 }}
              viewport={{ once: true }}
              className="flex flex-col sm:flex-row gap-4 justify-center lg:justify-start"
            >
              <a
                href="https://palmsignature.ae"
                target="_blank"
                rel="noopener noreferrer"
                className="px-6 py-3 border border-white/20 rounded-full text-sm font-medium hover:bg-white/10 transition-colors flex items-center justify-center"
              >
                {language === "en" ? "Visit Palm Signature" : "Visiter Palm Signature"}
                <ExternalLink className="h-3.5 w-3.5 ml-2 opacity-70" />
              </a>
              <a
                href="#contact"
                className="px-6 py-3 bg-white text-black rounded-full text-sm font-medium hover:bg-neutral-200 transition-colors"
              >
                {language === "en" ? "Contact Us" : "Contactez-nous"}
              </a>
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/fr/hero.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { ChevronDown } from "lucide-react"

export default function Hero() {
  const [scrollY, setScrollY] = useState(0)

useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <section className="relative w-full h-screen overflow-hidden">
      {/* Background with parallax effect */}
      <div
        className="absolute inset-0 z-0"
        style={{
          transform: `translateY(${scrollY * 0.15}px)`,
          transition: "transform 0.1s linear",
        }}
      >
        <Image
          src="/images/cove-edition-5-facade-detail.jpeg"
          alt="Cove Edition 5 par Imtiaz - Résidences de luxe à Dubailand avec piscine à débordement et vues panoramiques"
          fill
          priority
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
      </div>

{/* Main content container */}
      <div className="relative z-10 h-full flex flex-col">
        {/* Top spacer */}
        <div className="h-24 md:h-32" />

{/* Main content */}
        <div className="flex-1 flex flex-col items-center justify-center px-5 text-center">
          {/* Product name */}
          <h1 className="text-5xl sm:text-6xl md:text-7xl lg:text-8xl xl:text-9xl font-bold tracking-tight text-white mb-4 sm:mb-6 animate-fade-in">
            COVE EDITION 5
          </h1>

{/* Tagline */}
          <p className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-medium text-white/90 max-w-3xl mx-auto mb-4 sm:mb-6 animate-fade-in-delay">
            Résidences de Luxe par Imtiaz à Dubailand
          </p>

{/* SEO-friendly subtitle */}
          <p className="text-base sm:text-lg font-medium text-white/80 max-w-2xl mx-auto mb-8 sm:mb-10 animate-fade-in-delay">
            Design Contemporain avec Vues Panoramiques et Équipements Premium
          </p>

{/* Key information with Apple-style layout */}
          <div className="w-full max-w-4xl mx-auto grid grid-cols-2 gap-6 sm:gap-12 mb-8 sm:mb-12 animate-fade-in-delay-2">
            <div className="flex flex-col items-center">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70">À partir de</p>
              <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium text-white mt-2">700 000 AED</p>
            </div>

<div className="flex flex-col items-center">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70">Plan de Paiement</p>
              <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium text-white mt-2">5 Ans</p>
              <p className="text-xs sm:text-sm text-white/70 mt-2">(3 ans après livraison)</p>
            </div>
          </div>

{/* CTA buttons with Apple-style */}
          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 mt-4 sm:mt-6 animate-fade-in-delay-3 w-full sm:w-auto px-4 sm:px-0">
            <a
              href="#contact"
              className="rounded-full px-8 py-4 bg-white hover:bg-gray-200 text-black text-base font-medium w-full sm:min-w-[180px] shadow-sm transition-all text-center"
            >
              Contacter les Ventes
            </a>
            <a
              href="#about"
              className="rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium w-full sm:min-w-[180px] transition-all text-center"
            >
              Explorer
            </a>
          </div>
        </div>

{/* Bottom section with scroll indicator */}
        <div className="h-16 sm:h-24 flex justify-center items-end pb-8 sm:pb-12 animate-bounce-slow">
          <a
            href="#about"
            className="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 backdrop-blur-md hover:bg-white/20 transition-colors duration-300"
            aria-label="Défiler pour en savoir plus"
          >
            <ChevronDown className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/fr/contact-section.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

export default function ContactSection() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Effect to initialize Tally embed
  useEffect(() => {
    const script = document.createElement("script")
    script.src = "https://tally.so/widgets/embed.js"
    script.async = true
    document.body.appendChild(script)

return () => {
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

// Function to open WhatsApp with predefined message
  const openWhatsApp = () => {
    const message = encodeURIComponent(
      "Bonjour, je suis intéressé(e) par COVE EDITION 5. Pouvez-vous me fournir plus d'informations ?",
    )
    window.open(`https://wa.me/971581998661?text=${message}`, "_blank")
  }

return (
    <section id="contact" ref={sectionRef} className="py-16 md:py-32 bg-white">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-3xl mx-auto text-center mb-12 md:mb-16 transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-4">Contactez-nous</h2>
          <p className="text-lg md:text-2xl text-neutral-500">
            Des questions sur COVE EDITION 5 ? Nos spécialistes sont là pour vous aider.
          </p>
        </div>

<div
          className={`max-w-5xl mx-auto transition-opacity duration-1000 delay-300 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-12 md:mb-16">
            <div className="bg-[#f5f5f7] rounded-3xl p-6 md:p-12">
              <h3 className="text-xl md:text-3xl font-semibold mb-4 md:mb-6">Prenez contact</h3>
              <p className="text-base md:text-lg text-neutral-500 mb-6 md:mb-8">
                Notre équipe est disponible pour répondre à vos questions sur COVE EDITION 5. Contactez-nous dès
                aujourd'hui.
              </p>

<div className="space-y-6 md:space-y-8">
                <button
                  onClick={openWhatsApp}
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-full py-3 md:py-4 text-base md:text-lg font-medium transition-colors flex items-center justify-center"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="w-5 h-5 mr-2"
                  >
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                  </svg>
                  WhatsApp
                </button>
              </div>
            </div>

<div>
              <div id="contact-form" className="bg-[#f5f5f7] rounded-3xl p-6 md:p-12 h-full">
                <h3 className="text-xl md:text-3xl font-semibold mb-4 md:mb-6">Formulaire de Contact</h3>

<div className="text-center max-w-2xl mx-auto">
            <p className="text-xs md:text-sm text-neutral-500">
              En nous contactant, vous acceptez notre politique de confidentialité. Nous respectons votre vie privée et
              nous nous engageons à protéger vos données personnelles.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/visual-divider.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"
import Link from "next/link"

interface VisualDividerProps {
  imageSrc: string
  altText: string
  title?: string
  subtitle?: string
  ctaText?: string
  ctaLink?: string
  alignment?: "left" | "center" | "right"
  height?: string
  locale?: string
}

export default function VisualDivider({
  imageSrc,
  altText,
  title,
  subtitle,
  ctaText,
  ctaLink = "#contact",
  alignment = "center",
  height = "80vh",
  locale = "en",
}: VisualDividerProps) {
  const [isVisible, setIsVisible] = useState(false)
  const dividerRef = useRef<HTMLDivElement>(null)

if (dividerRef.current) {
      observer.observe(dividerRef.current)
    }

return () => {
      if (dividerRef.current) {
        observer.unobserve(dividerRef.current)
      }
    }
  }, [])

const alignmentClasses = {
    left: "items-start text-left pl-8 md:pl-16 lg:pl-24",
    center: "items-center text-center",
    right: "items-end text-right pr-8 md:pr-16 lg:pr-24",
  }

return (
    <div ref={dividerRef} className="relative w-full overflow-hidden" style={{ height }}>
      <Image
        src={imageSrc || "/placeholder.svg"}
        alt={altText}
        fill
        className={`object-cover transition-transform duration-1000 ${isVisible ? "scale-100" : "scale-110"}`}
      />
      <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/30 to-transparent" />

{(title || subtitle || ctaText) && (
        <div className={`absolute inset-0 flex flex-col justify-center ${alignmentClasses[alignment]} px-4`}>
          {title && (
            <h2
              className={`text-4xl md:text-6xl font-bold text-white mb-6 max-w-2xl transition-all duration-1000 ${
                isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
              }`}
            >
              {title}
            </h2>
          )}

{subtitle && (
            <p
              className={`text-xl md:text-2xl text-white/90 mb-8 max-w-2xl transition-all duration-1000 delay-300 ${
                isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
              }`}
            >
              {subtitle}
            </p>
          )}

{ctaText && (
            <Link
              href={ctaLink}
              className={`inline-block rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium transition-all duration-1000 delay-500 ${
                isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
              }`}
            >
              {ctaText}
            </Link>
          )}
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/about-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"

interface AboutSectionProps {
  locale?: string
}

export default function AboutSection({ locale = "en" }: AboutSectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const texts = {
    title: locale === "fr" ? "PREMIUM. INTEMPOREL. SOPHISTIQUÉ." : "PREMIUM. TIMELESS. SOPHISTICATED.",
    description:
      locale === "fr"
        ? "Présentation de Cove Edition 5 par Imtiaz — une vision inspirée située dans le dynamique Dubailand. Conçu avec un sens aigu du style et de l'utilité, chaque logement capture l'essence d'un mode de vie sans effort, de la fonctionnalité et de la sophistication."
        : "Presenting Cove Edition 5 by Imtiaz — an inspired vision set in vibrant Dubailand. Designed with a keen sense of style and purpose, each home captures the essence of effortless living, functionality, and sophistication.",
    subtitle1: locale === "fr" ? "OÙ LA NATURE ET LE DESIGN NE FONT QU'UN" : "WHERE NATURE AND DESIGN FLOW AS ONE",
    text1:
      locale === "fr"
        ? "Cove Edition 5 réinvente la vie urbaine, établissant une nouvelle référence pour ceux qui recherchent à la fois la tranquillité et une connexion au rythme de la ville. Ici, chaque maison est entièrement meublée avec des meubles sur mesure et des équipements de classe mondiale pour rendre votre vie extraordinaire."
        : "Cove Edition 5 reimagines urban living, setting a new benchmark for those who seek both tranquillity and a connection to the pulse of the city. Here, each home comes fully furnished with custom-designed furniture and world-class amenities to make your life extraordinary.",
    cta1: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
    subtitle2: locale === "fr" ? "LA SIMPLICITÉ, PERFECTIONNÉE" : "SIMPLICITY, PERFECTED",
    text2:
      locale === "fr"
        ? "Cove Edition 5 se présente comme un chef-d'œuvre d'architecture moderne, où les détails simples de la vie sont perfectionnés, et où la forme et la fonction s'entrelacent délicatement. Des lignes épurées et un design contemporain créent une silhouette gracieuse qui attire le regard."
        : "Cove Edition 5 stands as a masterpiece of modern architecture, where the simple details of life are perfected, and form and function gently intertwine. Sleek lines and contemporary design create a graceful silhouette that draws the eye.",
    text3:
      locale === "fr"
        ? "Des intérieurs spacieux et lumineux sont rehaussés par des finitions exquises et des équipements avancés. Chaque détail a été soigneusement conçu pour offrir une expérience de vie extraordinaire."
        : "Spacious, light-filled interiors are enhanced by exquisite finishes and advanced amenities. Every detail has been thoughtfully crafted to offer an extraordinary living experience.",
    cta2: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
  }

<div className="mb-32">
          {/* First section with full-width image followed by text */}
          <div
            className={`relative w-full h-[80vh] mb-24 transition-all duration-1000 delay-300 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
          >
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/4%20%281%29.jpg-xHxQP193nDvjQAeL2YPj4bDOjdVlOk.jpeg"
              alt="Cove Edition 5 Exterior"
              fill
              className="object-cover"
            />
          </div>

<div className="max-w-7xl mx-auto px-4 mb-32">
            <div
              className={`transition-all duration-1000 delay-500 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
            >
              <h3 className="text-3xl md:text-5xl font-semibold mb-8">{texts.subtitle1}</h3>
              <p className="text-lg md:text-xl text-neutral-500 mb-8 max-w-3xl">{texts.text1}</p>
              <a
                href="#contact"
                className="inline-block mt-6 rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium transition-all"
              >
                {texts.cta1}
              </a>
            </div>
          </div>

{/* Second section with full-width image followed by text */}
          <div
            className={`relative w-full h-[80vh] mt-32 mb-24 transition-all duration-1000 delay-700 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
          >
            <Image
              src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/3%20%281%29.jpg-6YZOJiRZj6NWc8DRVWwTf1WMP8LVtl.jpeg"
              alt="Cove Edition 5 Balconies"
              fill
              className="object-cover"
            />
          </div>

<div className="max-w-7xl mx-auto px-4">
            <div
              className={`transition-all duration-1000 delay-900 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
            >
              <h3 className="text-3xl md:text-5xl font-semibold mb-8">{texts.subtitle2}</h3>
              <p className="text-lg md:text-xl text-neutral-500 mb-8 max-w-3xl">{texts.text2}</p>
              <p className="text-lg md:text-xl text-neutral-500 mb-8 max-w-3xl">{texts.text3}</p>
              <a
                href="#contact"
                className="inline-block mt-6 rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium transition-all"
              >
                {texts.cta2}
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/amenities-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Infinity, Dumbbell, Users, Building, Utensils, Armchair, Baby, Wifi, Shield, Leaf } from "lucide-react"

// Ajouter le paramètre locale aux props du composant
interface AmenitiesSectionProps {
  locale?: string
}

export default function AmenitiesSection({ locale = "en" }: AmenitiesSectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Ajouter des traductions conditionnelles
  const texts = {
    title: locale === "fr" ? "ÉQUIPEMENTS" : "AMENITIES",
    subtitle:
      locale === "fr"
        ? "Des équipements soigneusement conçus pour une expérience de vie exceptionnelle."
        : "Thoughtfully designed features for an exceptional living experience.",
    wellness: locale === "fr" ? "Bien-être" : "Wellness",
    social: locale === "fr" ? "Social" : "Social",
    comfort: locale === "fr" ? "Confort" : "Comfort",
    security: locale === "fr" ? "Sécurité" : "Security",
    infinityPool: locale === "fr" ? "Piscine à Débordement" : "Infinity Pool",
    fitnessCenter: locale === "fr" ? "Centre de Fitness" : "Fitness Center",
    yogaDeck: locale === "fr" ? "Espace Yoga" : "Yoga Deck",
    clubhouse: locale === "fr" ? "Clubhouse" : "Clubhouse",
    meetingAreas: locale === "fr" ? "Espaces de Réunion" : "Meeting Areas",
    outdoorDining: locale === "fr" ? "Espace Repas Extérieur" : "Outdoor Dining",
    loungeAreas: locale === "fr" ? "Espaces Détente" : "Lounge Areas",
    kidsPlayground: locale === "fr" ? "Aire de Jeux pour Enfants" : "Kids' Playground",
    highSpeedInternet: locale === "fr" ? "Internet Haut Débit" : "High-Speed Internet",
    security247: locale === "fr" ? "Sécurité 24/7" : "24/7 Security",
    conciergeService: locale === "fr" ? "Service de Conciergerie" : "Concierge Service",
    secureAccess: locale === "fr" ? "Accès Sécurisé" : "Secure Access",
    premiumLiving: locale === "fr" ? "EXPÉRIENCE DE VIE PREMIUM" : "PREMIUM LIVING EXPERIENCE",
    premiumLivingText:
      locale === "fr"
        ? "Cove Edition 5 offre une sélection soignée d'équipements conçus pour améliorer votre style de vie et vous offrir le summum du confort et de la commodité."
        : "Cove Edition 5 offers a curated selection of amenities designed to enhance your lifestyle and provide the ultimate in comfort and convenience.",
    premiumAmenities: locale === "fr" ? "Équipements Premium" : "Premium Amenities",
    securityConcierge: locale === "fr" ? "Sécurité & Conciergerie" : "Security & Concierge",
    residentRating: locale === "fr" ? "Note des Résidents" : "Resident Rating",
    experienceLuxury: locale === "fr" ? "DÉCOUVREZ LE LUXE" : "EXPERIENCE LUXURY LIVING",
    experienceLuxuryText:
      locale === "fr"
        ? "Notre équipe de vente est disponible pour vous fournir plus de détails sur les équipements exceptionnels de Cove Edition 5."
        : "Our sales team is available to provide more details about the exceptional amenities at Cove Edition 5.",
    contactSales: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
    viewGallery: locale === "fr" ? "Voir la Galerie" : "View Gallery",
  }

const amenityCategories = [
    {
      title: texts.wellness,
      items: [
        { icon: <Infinity className="h-6 w-6" />, name: texts.infinityPool },
        { icon: <Dumbbell className="h-6 w-6" />, name: texts.fitnessCenter },
        { icon: <Leaf className="h-6 w-6" />, name: texts.yogaDeck },
      ],
    },
    {
      title: texts.social,
      items: [
        { icon: <Building className="h-6 w-6" />, name: texts.clubhouse },
        { icon: <Users className="h-6 w-6" />, name: texts.meetingAreas },
        { icon: <Utensils className="h-6 w-6" />, name: texts.outdoorDining },
      ],
    },
    {
      title: texts.comfort,
      items: [
        { icon: <Armchair className="h-6 w-6" />, name: texts.loungeAreas },
        { icon: <Baby className="h-6 w-6" />, name: texts.kidsPlayground },
        { icon: <Wifi className="h-6 w-6" />, name: texts.highSpeedInternet },
      ],
    },
    {
      title: texts.security,
      items: [
        { icon: <Shield className="h-6 w-6" />, name: texts.security247 },
        { icon: <Users className="h-6 w-6" />, name: texts.conciergeService },
        { icon: <Building className="h-6 w-6" />, name: texts.secureAccess },
      ],
    },
  ]

return (
    <section id="amenities" ref={sectionRef} className="py-32 md:py-40 bg-white">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div
          className={`max-w-3xl mx-auto text-center mb-24 transition-all duration-1000 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">{texts.title}</h2>
          <p className="text-xl md:text-2xl text-neutral-500">{texts.subtitle}</p>
        </div>

{/* Amenities Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 gap-x-16 gap-y-24 mb-24">
          {amenityCategories.map((category, index) => (
            <div
              key={index}
              className={`transition-all duration-1000 delay-${index * 100} ${
                isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
              }`}
            >
              <h3 className="text-3xl font-semibold mb-8 pb-2 border-b border-neutral-200">{category.title}</h3>
              <ul className="space-y-8">
                {category.items.map((item, itemIndex) => (
                  <li key={itemIndex} className="flex items-center gap-4">
                    <div className="flex items-center justify-center w-12 h-12 rounded-full bg-neutral-100">
                      {item.icon}
                    </div>
                    <span className="text-xl">{item.name}</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

{/* Feature Highlight */}
        <div
          className={`py-16 px-8 md:px-16 bg-neutral-50 rounded-3xl mb-24 transition-all duration-1000 delay-500 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="max-w-4xl mx-auto text-center">
            <h3 className="text-3xl md:text-4xl font-semibold mb-6">{texts.premiumLiving}</h3>
            <p className="text-xl text-neutral-500 mb-8">{texts.premiumLivingText}</p>
            <div className="grid grid-cols-3 gap-8 text-center">
              <div>
                <p className="text-4xl font-semibold mb-2">12+</p>
                <p className="text-neutral-500">{texts.premiumAmenities}</p>
              </div>
              <div>
                <p className="text-4xl font-semibold mb-2">24/7</p>
                <p className="text-neutral-500">{texts.securityConcierge}</p>
              </div>
              <div>
                <p className="text-4xl font-semibold mb-2">5★</p>
                <p className="text-neutral-500">{texts.residentRating}</p>
              </div>
            </div>
          </div>
        </div>

{/* Call to Action */}
        <div
          className={`text-center max-w-2xl mx-auto transition-all duration-1000 delay-700 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h3 className="text-3xl font-semibold mb-6">{texts.experienceLuxury}</h3>
          <p className="text-xl text-neutral-500 mb-8">{texts.experienceLuxuryText}</p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <a
              href="#contact"
              className="rounded-full px-8 py-4 bg-blue-600 text-white text-base font-medium transition-all hover:bg-blue-700"
            >
              {texts.contactSales}
            </a>
            <a
              href="#gallery"
              className="rounded-full px-8 py-4 bg-white border border-neutral-200 text-neutral-900 text-base font-medium transition-all hover:bg-neutral-50"
            >
              {texts.viewGallery}
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/location-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { MapPin, Clock, ExternalLink } from "lucide-react"

// Ajouter le paramètre locale aux props du composant
interface LocationSectionProps {
  locale?: string
}

export default function LocationSection({ locale = "en" }: LocationSectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Ajouter des traductions conditionnelles
  const texts = {
    title: locale === "fr" ? "EMPLACEMENT" : "LOCATION",
    subtitle:
      locale === "fr"
        ? "Stratégiquement positionné pour un style de vie dubaïote ultime."
        : "Strategically positioned for the ultimate Dubai lifestyle.",
    keyDistances: locale === "fr" ? "DISTANCES CLÉS" : "KEY DISTANCES",
    entertainmentLeisure: locale === "fr" ? "Divertissement & Loisirs" : "Entertainment & Leisure",
    educationBusiness: locale === "fr" ? "Éducation & Affaires" : "Education & Business",
    shoppingLifestyle: locale === "fr" ? "Shopping & Style de Vie" : "Shopping & Lifestyle",
    transportationLandmarks: locale === "fr" ? "Transport & Points d'Intérêt" : "Transportation & Landmarks",
    mins: locale === "fr" ? "mins" : "mins",
    connectivityHighlights: locale === "fr" ? "POINTS FORTS DE LA CONNECTIVITÉ" : "CONNECTIVITY HIGHLIGHTS",
    strategicLocation: locale === "fr" ? "Emplacement Stratégique" : "Strategic Location",
    strategicLocationText:
      locale === "fr"
        ? "Situé au cœur de Dubailand, offrant l'équilibre parfait entre connectivité urbaine et vie sereine."
        : "Situated in the heart of Dubailand, offering the perfect balance between urban connectivity and serene living.",
    easyAccess: locale === "fr" ? "Accès Facile" : "Easy Access",
    easyAccessText:
      locale === "fr"
        ? "À seulement 20 minutes de l'aéroport international de Dubaï et 24 minutes du centre-ville de Dubaï."
        : "Just 20 minutes from Dubai International Airport and 24 minutes from Downtown Dubai.",
    futureGrowth: locale === "fr" ? "Croissance Future" : "Future Growth",
    futureGrowthText:
      locale === "fr"
        ? "Situé dans l'une des zones de Dubaï en développement le plus rapide avec d'importants investissements en infrastructure."
        : "Located in one of Dubai's fastest developing areas with significant infrastructure investments.",
    learnMore: locale === "fr" ? "En savoir plus" : "Learn more",
    contactForDetails: locale === "fr" ? "Contacter pour plus de détails" : "Contact for details",
    discoverMore: locale === "fr" ? "Découvrir plus" : "Discover more",
    contactSales: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
  }

const locationGroups = [
    {
      title: texts.entertainmentLeisure,
      locations: [
        { name: "Global Village", time: "05 mins" },
        { name: "IMG Worlds of Adventure", time: "12 mins" },
        { name: "Dubai Safari Park", time: "15 mins" },
      ],
    },
    {
      title: texts.educationBusiness,
      locations: [
        { name: "Academic City", time: "05 mins" },
        { name: "Silicon Oasis", time: "08 mins" },
        { name: "Dubai International Financial Centre", time: "25 mins" },
      ],
    },
    {
      title: texts.shoppingLifestyle,
      locations: [
        { name: "Dubai Outlet Mall", time: "05 mins" },
        { name: "Dubai Mall", time: "24 mins" },
        { name: "Mall of the Emirates", time: "30 mins" },
      ],
    },
    {
      title: texts.transportationLandmarks,
      locations: [
        { name: "Dubai International Airport", time: "20 mins" },
        { name: "Downtown Dubai", time: "24 mins" },
        { name: "Palm Jumeirah", time: "35 mins" },
      ],
    },
  ]

return (
    <section id="location" ref={sectionRef} className="py-32 md:py-40 bg-white overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Apple-style header with large text */}
        <div
          className={`max-w-4xl mx-auto text-center mb-16 transition-all duration-1000 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-6">{texts.title}</h2>
          <p className="text-xl md:text-2xl text-neutral-500">{texts.subtitle}</p>
        </div>

{/* Interactive Map with exact location */}
        <div
          className={`relative h-[500px] md:h-[600px] rounded-3xl overflow-hidden mb-24 transition-all duration-1000 delay-300 ${
            isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"
          }`}
        >
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3613.443719012883!2d55.379581576122064!3d25.086836877782236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f65c37d045f53%3A0x321fa326566104f1!2sCove%20Edition%205%20by%20Imtiaz!5e0!3m2!1sen!2sae!4v1746948678151!5m2!1sen!2sae"
            width="100%"
            height="100%"
            style={{ border: 0 }}
            allowFullScreen
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            className="absolute inset-0"
          ></iframe>
        </div>

{/* Key Distances - Apple-style grid layout */}
        <div
          className={`mb-24 transition-all duration-1000 delay-500 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h3 className="text-3xl md:text-4xl font-semibold text-center mb-16">{texts.keyDistances}</h3>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {locationGroups.map((group, groupIndex) => (
              <div key={groupIndex} className="flex flex-col">
                <h4 className="text-lg font-medium mb-6 pb-2 border-b border-neutral-200">{group.title}</h4>
                <ul className="space-y-6 flex-1">
                  {group.locations.map((location, locationIndex) => (
                    <li key={locationIndex} className="flex items-center gap-4">
                      <div className="flex items-center justify-center w-10 h-10 rounded-full bg-neutral-100">
                        <Clock className="h-5 w-5 text-neutral-700" />
                      </div>
                      <div>
                        <p className="font-medium">{location.name}</p>
                        <p className="text-sm text-neutral-500">{location.time}</p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>

{/* Connectivity Highlights - Apple-style cards */}
        <div
          className={`transition-all duration-1000 delay-700 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h3 className="text-3xl md:text-4xl font-semibold text-center mb-16">{texts.connectivityHighlights}</h3>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-[#f5f5f7] rounded-3xl p-8 flex flex-col">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-6">
                <MapPin className="h-6 w-6 text-blue-600" />
              </div>
              <h4 className="text-xl font-semibold mb-4">{texts.strategicLocation}</h4>
              <p className="text-neutral-600 mb-6 flex-1">{texts.strategicLocationText}</p>
              <a href="#contact" className="text-blue-600 font-medium flex items-center hover:underline mt-auto">
                {texts.learnMore}
                <ExternalLink className="h-4 w-4 ml-1" />
              </a>
            </div>

<div className="bg-[#f5f5f7] rounded-3xl p-8 flex flex-col">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-6">
                <Clock className="h-6 w-6 text-blue-600" />
              </div>
              <h4 className="text-xl font-semibold mb-4">{texts.easyAccess}</h4>
              <p className="text-neutral-600 mb-6 flex-1">{texts.easyAccessText}</p>
              <a href="#contact" className="text-blue-600 font-medium flex items-center hover:underline mt-auto">
                {texts.contactForDetails}
                <ExternalLink className="h-4 w-4 ml-1" />
              </a>
            </div>

<div className="bg-[#f5f5f7] rounded-3xl p-8 flex flex-col">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-6">
                <MapPin className="h-6 w-6 text-blue-600" />
              </div>
              <h4 className="text-xl font-semibold mb-4">{texts.futureGrowth}</h4>
              <p className="text-neutral-600 mb-6 flex-1">{texts.futureGrowthText}</p>
              <a href="#contact" className="text-blue-600 font-medium flex items-center hover:underline mt-auto">
                {texts.discoverMore}
                <ExternalLink className="h-4 w-4 ml-1" />
              </a>
            </div>
          </div>
        </div>

{/* Apple-style CTA */}
        <div className="mt-24 text-center">
          <a
            href="#contact"
            className="inline-block rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white text-base font-medium transition-all"
          >
            {texts.contactSales}
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/payment-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { CheckCircle2 } from "lucide-react"

// Ajouter le paramètre locale aux props du composant
interface PaymentSectionProps {
  locale?: string
}

export default function PaymentSection({ locale = "en" }: PaymentSectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Ajouter des traductions conditionnelles
  const texts = {
    title: locale === "fr" ? "PLANS DE PAIEMENT" : "PAYMENT PLANS",
    subtitle:
      locale === "fr"
        ? "Choisissez l'option de paiement qui vous convient le mieux."
        : "Choose the payment option that works best for you.",
    requirements: locale === "fr" ? "Conditions" : "Requirements",
    requirementsText:
      locale === "fr"
        ? "Conditions simples pour accéder à nos plans de paiement flexibles"
        : "Simple requirements to access our flexible payment plans",
    validPassport: locale === "fr" ? "Passeport Valide" : "Valid Passport",
    validPassportText: locale === "fr" ? "Quel que soit le pays d'origine" : "Regardless of country of origin",
    phoneNumber: locale === "fr" ? "Numéro de Téléphone" : "Phone Number",
    phoneNumberText: locale === "fr" ? "Pour vérification et communication" : "For verification and communication",
    emailAddress: locale === "fr" ? "Adresse Email" : "Email Address",
    emailAddressText: locale === "fr" ? "Pour documentation et mises à jour" : "For documentation and updates",
    physicalAddress: locale === "fr" ? "Adresse Physique" : "Physical Address",
    physicalAddressText: locale === "fr" ? "Toute adresse mondiale est acceptée" : "Any address worldwide is accepted",
    noResidency: locale === "fr" ? "Pas d'Exigence de Résidence" : "No Residency Requirement",
    noResidencyText: locale === "fr" ? "La résidence aux EAU n'est pas requise" : "UAE residency is not required",
    downPayment: locale === "fr" ? "Acompte de 20%" : "20% Down Payment",
    downPaymentText:
      locale === "fr" ? "Paiement initial pour sécuriser votre propriété" : "Initial payment to secure your property",
    postHandover: locale === "fr" ? "3 Ans Après Livraison" : "3 Years Post Handover",
    flexiblePayment: locale === "fr" ? "Paiement Flexible" : "Flexible Payment Schedule",
    premiumPaymentPlan: locale === "fr" ? "Plan de Paiement Premium" : "Premium Payment Plan",
    flexibleInstallments: locale === "fr" ? "Versements Flexibles" : "Flexible Installments",
    onBooking: locale === "fr" ? "20% à la réservation" : "20% on booking",
    duringConstruction: locale === "fr" ? "50% pendant la construction" : "50% during construction",
    postHandoverYears: locale === "fr" ? "30% sur 3 ans après livraison" : "30% over 3 years post handover",
    fiftyFiftyPlan: locale === "fr" ? "Plan 50/50" : "50/50 Plan",
    simpleStructure: locale === "fr" ? "Structure Simple" : "Simple Structure",
    standardPaymentPlan: locale === "fr" ? "Plan de Paiement Standard" : "Standard Payment Plan",
    onCompletion: locale === "fr" ? "50% à l'achèvement" : "50% on completion",
    contactSales: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
    viewDetailedSchedule: locale === "fr" ? "Voir le calendrier détaillé" : "View detailed payment schedule",
    customPlan: locale === "fr" ? "Besoin d'un plan de paiement personnalisé ?" : "Need a custom payment plan?",
    customPlanText:
      locale === "fr"
        ? "Notre équipe de vente peut créer une solution de paiement sur mesure qui correspond à vos besoins financiers."
        : "Our sales team can create a tailored payment solution that fits your financial needs.",
    speakWithSpecialist: locale === "fr" ? "Parler à un spécialiste des ventes" : "Speak with a sales specialist",
  }

const option1Steps = [
    { number: 1, text: "20% ON BOOKING" },
    { number: 2, text: "5% 15TH AUGUST, 2025" },
    { number: 3, text: "5% 15TH NOVEMBER, 2025" },
    { number: 4, text: "10% 15TH FEBRUARY, 2026" },
    { number: 5, text: "5% 15TH JULY, 2026" },
    { number: 6, text: "10% 15TH OCTOBER, 2026" },
    { number: 7, text: "15% 15TH JUNE 2027 (ON COMPLETION)" },
    { number: 8, text: "30% (2.5% QUARTERLY POST HANDOVER IN 3 YEARS)" },
  ]

const option2Steps = [
    { number: 1, text: "20% ON BOOKING" },
    { number: 2, text: "5% 15TH AUGUST, 2025" },
    { number: 3, text: "5% 15TH NOVEMBER, 2025" },
    { number: 4, text: "5% 15TH FEBRUARY, 2026" },
    { number: 5, text: "5% 15TH JULY, 2026" },
    { number: 6, text: "5% 15TH OCTOBER, 2026" },
    { number: 7, text: "5% 15TH FEBRUARY, 2027" },
    { number: 8, text: "50% ON COMPLETION" },
  ]

return (
    <section id="payment" ref={sectionRef} className="py-32 md:py-48 bg-white overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Apple-style header with large text */}
        <div
          className={`max-w-4xl mx-auto text-center mb-16 transition-all duration-1000 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-6">{texts.title}</h2>
          <p className="text-xl md:text-2xl text-neutral-500">{texts.subtitle}</p>
        </div>

{/* Requirements section - Apple style */}
        <div
          className={`max-w-4xl mx-auto mb-24 transition-all duration-1000 delay-200 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="bg-[#f5f5f7] rounded-3xl p-8 md:p-12">
            <h3 className="text-2xl md:text-3xl font-semibold mb-6 text-center">{texts.requirements}</h3>
            <p className="text-center text-neutral-600 mb-10">{texts.requirementsText}</p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8 max-w-3xl mx-auto">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <rect width="18" height="14" x="3" y="5" rx="2" />
                    <path d="M21 8H3" />
                    <path d="M7 8v11" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">{texts.validPassport}</h4>
                  <p className="text-sm text-neutral-500">{texts.validPassportText}</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">{texts.phoneNumber}</h4>
                  <p className="text-sm text-neutral-500">{texts.phoneNumberText}</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <rect width="20" height="16" x="2" y="4" rx="2" />
                    <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">{texts.emailAddress}</h4>
                  <p className="text-sm text-neutral-500">{texts.emailAddressText}</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                    <circle cx="12" cy="10" r="3" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">{texts.physicalAddress}</h4>
                  <p className="text-sm text-neutral-500">{texts.physicalAddressText}</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">{texts.noResidency}</h4>
                  <p className="text-sm text-neutral-500">{texts.noResidencyText}</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <path d="M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z" />
                    <path d="M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z" />
                    <path d="M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12" />
                    <path d="M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">{texts.downPayment}</h4>
                  <p className="text-sm text-neutral-500">{texts.downPaymentText}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Apple-style comparison table */}
        <div
          className={`max-w-5xl mx-auto mb-24 transition-all duration-1000 delay-400 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {/* Plan 1 */}
            <div className="bg-[#f5f5f7] rounded-3xl p-8 md:p-12 relative overflow-hidden group transition-all duration-500">
              <h3 className="text-3xl font-semibold mb-2">{texts.postHandover}</h3>
              <p className="text-neutral-500 mb-6">{texts.flexiblePayment}</p>

<div className="mb-8">
                <p className="text-sm text-neutral-500">{texts.premiumPaymentPlan}</p>
                <p className="text-2xl font-semibold mb-1">{texts.flexibleInstallments}</p>
              </div>

<div className="space-y-4 mb-12">
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-blue-600" />
                  <p>{texts.onBooking}</p>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-blue-600" />
                  <p>{texts.duringConstruction}</p>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-blue-600" />
                  <p>{texts.postHandoverYears}</p>
                </div>
              </div>

<a
                href="#contact"
                className="block w-full py-4 bg-blue-600 hover:bg-blue-700 text-white text-center rounded-full transition-colors"
              >
                {texts.contactSales}
              </a>

<a href="#contact" className="block w-full text-center mt-4 text-blue-600 hover:underline text-sm">
                {texts.viewDetailedSchedule}
              </a>
            </div>

{/* Plan 2 */}
            <div className="bg-[#f5f5f7] rounded-3xl p-8 md:p-12 relative overflow-hidden group transition-all duration-500">
              <h3 className="text-3xl font-semibold mb-2">{texts.fiftyFiftyPlan}</h3>
              <p className="text-neutral-500 mb-6">{texts.simpleStructure}</p>

<div className="mb-8">
                <p className="text-sm text-neutral-500">{texts.standardPaymentPlan}</p>
                <p className="text-2xl font-semibold mb-1">{texts.simpleStructure}</p>
              </div>

<div className="space-y-4 mb-12">
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-neutral-600" />
                  <p>{texts.onBooking}</p>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-neutral-600" />
                  <p>{texts.duringConstruction}</p>
                </div>
                <div className="flex items-center gap-3">
                  <CheckCircle2 className="h-5 w-5 text-neutral-600" />
                  <p>{texts.onCompletion}</p>
                </div>
              </div>

<a
                href="#contact"
                className="block w-full py-4 border-2 border-neutral-800 text-neutral-800 hover:bg-neutral-100 text-center rounded-full transition-colors"
              >
                {texts.contactSales}
              </a>

<a href="#contact" className="block w-full text-center mt-4 text-blue-600 hover:underline text-sm">
                {texts.viewDetailedSchedule}
              </a>
            </div>
          </div>
        </div>

{/* Custom plan section */}
        <div
          className={`max-w-3xl mx-auto text-center transition-all duration-1000 delay-600 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-3xl p-8 md:p-12">
            <h3 className="text-2xl md:text-3xl font-semibold mb-4">{texts.customPlan}</h3>
            <p className="text-neutral-500 mb-8 max-w-xl mx-auto">{texts.customPlanText}</p>
            <a href="#contact" className="inline-flex items-center text-blue-600 font-medium hover:underline">
              {texts.speakWithSpecialist}
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5 ml-1">
                <path
                  fillRule="evenodd"
                  d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
                  clipRule="evenodd"
                />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/catalog-popup.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useState } from "react"
import { X } from "lucide-react"
import Image from "next/image"

interface CatalogPopupProps {
  locale?: string
}

export default function CatalogPopup({ locale = "en" }: CatalogPopupProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [hasBeenShown, setHasBeenShown] = useState(false)

useEffect(() => {
    // Only run on the client side
    if (typeof window === "undefined") return

const handleScroll = () => {
      // Afficher le popup après avoir défilé de 30% de la hauteur de la fenêtre
      const scrollThreshold = window.innerHeight * 0.3

if (window.scrollY > scrollThreshold && !isVisible && !hasBeenShown) {
        setIsVisible(true)
      }
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [isVisible, hasBeenShown])

const closePopup = () => {
    setIsVisible(false)
    setHasBeenShown(true)
  }

const handleDownload = () => {
    // Fermer le popup
    closePopup()

// Faire défiler vers la section contact
    if (typeof document !== "undefined") {
      const contactSection = document.getElementById("contact")
      if (contactSection) {
        contactSection.scrollIntoView({ behavior: "smooth" })
      }
    }
  }

if (!isVisible) return null

return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/40 backdrop-blur-sm" onClick={closePopup} />

<div className="relative bg-white rounded-2xl shadow-2xl w-full max-w-md overflow-hidden animate-fade-in">
        {/* Bouton de fermeture */}
        <button
          onClick={closePopup}
          className="absolute top-3 right-3 z-10 rounded-full bg-white/90 p-1.5 backdrop-blur-sm transition-colors hover:bg-white"
        >
          <X className="h-5 w-5 text-gray-500" />
        </button>

{/* Image du catalogue */}
        <div className="relative w-full h-48 bg-gradient-to-r from-blue-500 to-blue-600">
          <Image
            src="/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg"
            alt={locale === "fr" ? "Catalogue COVE EDITION 5" : "COVE EDITION 5 Catalog"}
            fill
            className="object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent" />
          <div className="absolute bottom-4 left-4 text-white">
            <h3 className="text-xl font-bold">COVE EDITION 5</h3>
            <p className="text-sm opacity-90">
              {locale === "fr" ? "Catalogue des Résidences de Luxe" : "Luxury Residences Catalog"}
            </p>
          </div>
        </div>

{/* Contenu du popup */}
        <div className="p-6">
          <h3 className="text-lg font-semibold mb-2">{locale === "fr" ? "Catalogue Exclusif" : "Exclusive Catalog"}</h3>
          <p className="text-gray-600 mb-6">
            {locale === "fr"
              ? "Téléchargez notre catalogue complet pour découvrir tous les équipements de luxe et les plans d'étage disponibles à COVE EDITION 5."
              : "Download our complete catalog to discover all the luxury amenities and floor plans available at COVE EDITION 5."}
          </p>

<button
            onClick={handleDownload}
            className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-full py-3 font-medium transition-colors flex items-center justify-center"
          >
            {locale === "fr" ? "Télécharger le Catalogue" : "Download Catalog"}
          </button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { ChevronDown } from "lucide-react"

// Ajouter le paramètre locale aux props du composant
interface HeroProps {
  locale?: string
}

export default function Hero({ locale = "en" }: HeroProps) {
  const [scrollY, setScrollY] = useState(0)

useEffect(() => {
    // Only run on the client side
    if (typeof window === "undefined") return

const handleScroll = () => {
      setScrollY(window.scrollY)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

// Ajouter des traductions conditionnelles
  const texts = {
    tagline: locale === "fr" ? "Résidences de Luxe par Imtiaz à Dubailand" : "Luxury Residences by Imtiaz in Dubailand",
    subtitle:
      locale === "fr"
        ? "Design Contemporain avec Vues Panoramiques et Équipements Premium"
        : "Contemporary Design with Panoramic Views and Premium Amenities",
    startingFrom: locale === "fr" ? "À partir de" : "Starting from",
    paymentPlan: locale === "fr" ? "Plan de Paiement" : "Payment Plan",
    years: locale === "fr" ? "Ans" : "Years",
    postHandover: locale === "fr" ? "(3 ans après livraison)" : "(3 years post handover)",
    contactSales: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
    explore: locale === "fr" ? "Explorer" : "Explore",
  }

return (
    <section className="relative w-full h-screen overflow-hidden">
      {/* Background with parallax effect */}
      <div
        className="absolute inset-0 z-0"
        style={{
          transform: `translateY(${scrollY * 0.15}px)`,
          transition: "transform 0.1s linear",
        }}
      >
        <Image
          src="/images/cove-edition-5-facade-detail.jpeg"
          alt={
            locale === "fr"
              ? "Cove Edition 5 par Imtiaz - Résidences de luxe à Dubailand avec piscine à débordement et vues panoramiques"
              : "Cove Edition 5 by Imtiaz - Luxury Residences in Dubailand with Infinity Pool and Panoramic Views"
          }
          fill
          priority
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
      </div>

{/* Main content container */}
      <div className="relative z-10 h-full flex flex-col">
        {/* Top spacer */}
        <div className="h-24 md:h-32" />

{/* Tagline */}
          <p className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-medium text-white/90 max-w-3xl mx-auto mb-4 sm:mb-6 animate-fade-in-delay">
            {texts.tagline}
          </p>

{/* SEO-friendly subtitle */}
          <p className="text-base sm:text-lg font-medium text-white/80 max-w-2xl mx-auto mb-8 sm:mb-10 animate-fade-in-delay">
            {texts.subtitle}
          </p>

{/* Key information with Apple-style layout */}
          <div className="w-full max-w-4xl mx-auto grid grid-cols-2 gap-6 sm:gap-12 mb-8 sm:mb-12 animate-fade-in-delay-2">
            <div className="flex flex-col items-center">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70">{texts.startingFrom}</p>
              <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium text-white mt-2">700,000 AED</p>
            </div>

<div className="flex flex-col items-center">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70">{texts.paymentPlan}</p>
              <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium text-white mt-2">
                5 {texts.years}
              </p>
              <p className="text-xs sm:text-sm text-white/70 mt-2">{texts.postHandover}</p>
            </div>
          </div>

{/* CTA buttons with Apple-style */}
          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 mt-4 sm:mt-6 animate-fade-in-delay-3 w-full sm:w-auto px-4 sm:px-0">
            <a
              href="#contact"
              className="rounded-full px-8 py-4 bg-white hover:bg-gray-200 text-black text-base font-medium w-full sm:min-w-[180px] shadow-sm transition-all text-center"
            >
              {texts.contactSales}
            </a>
            <a
              href="#about"
              className="rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium w-full sm:min-w-[180px] transition-all text-center"
            >
              {texts.explore}
            </a>
          </div>
        </div>

{/* Bottom section with scroll indicator */}
        <div className="h-16 sm:h-24 flex justify-center items-end pb-8 sm:pb-12 animate-bounce-slow">
          <a
            href="#about"
            className="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 backdrop-blur-md hover:bg-white/20 transition-colors duration-300"
            aria-label={locale === "fr" ? "Défiler pour en savoir plus" : "Scroll to learn more"}
          >
            <ChevronDown className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/unit-details-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"
import { ArrowRight, Check, Maximize2 } from "lucide-react"

// Ajouter le paramètre locale aux props du composant
interface UnitDetailsSectionProps {
  locale?: string
}

export default function UnitDetailsSection({ locale = "en" }: UnitDetailsSectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [activeUnit, setActiveUnit] = useState("studio")
  const [showFloorPlan, setShowFloorPlan] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Handle body scroll lock when floor plan modal is open
  useEffect(() => {
    // Only run on the client side
    if (typeof document === "undefined") return

if (showFloorPlan) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

return () => {
      document.body.style.overflow = "auto"
    }
  }, [showFloorPlan])

// Ajouter des traductions conditionnelles
  const texts = {
    unitTypes: locale === "fr" ? "TYPES D'UNITÉS" : "UNIT TYPES",
    exploreUnits:
      locale === "fr"
        ? "Explorez notre gamme d'espaces de vie soigneusement conçus."
        : "Explore our range of thoughtfully designed living spaces.",
    studio: locale === "fr" ? "Studio" : "Studio",
    oneBedroom: locale === "fr" ? "1 Chambre" : "1 Bedroom",
    twoBedroom: locale === "fr" ? "2 Chambres" : "2 Bedroom",
    studioTagline: locale === "fr" ? "Compact. Élégant. Intelligent." : "Compact. Elegant. Smart.",
    oneBedroomTagline: locale === "fr" ? "Espace. Confort. Style." : "Space. Comfort. Style.",
    twoBedroomTagline: locale === "fr" ? "Sophistiqué. Premium. Luxueux." : "Sophisticated. Premium. Luxurious.",
    studioDescription:
      locale === "fr"
        ? "Espaces compacts mais luxueux conçus pour la vie moderne, avec des finitions premium et des agencements intelligents."
        : "Compact yet luxurious spaces designed for modern living, featuring premium finishes and smart layouts.",
    oneBedroomDescription:
      locale === "fr"
        ? "Retraites spacieuses offrant l'équilibre parfait entre confort et sophistication pour les individus ou les couples."
        : "Spacious retreats offering the perfect balance of comfort and sophistication for individuals or couples.",
    twoBedroomDescription:
      locale === "fr"
        ? "Espaces de vie expansifs conçus pour les familles, avec des proportions généreuses et des équipements premium."
        : "Expansive living spaces designed for families, with generous proportions and premium amenities.",
    from: locale === "fr" ? "À partir de" : "From",
    bedrooms: locale === "fr" ? "Chambres" : "Bedrooms",
    bathrooms: locale === "fr" ? "Salles de bain" : "Bathrooms",
    kitchen: locale === "fr" ? "Cuisine" : "Kitchen",
    openKitchen: locale === "fr" ? "Cuisine Ouverte" : "Open Kitchen",
    balcony: locale === "fr" ? "Balcon" : "Balcony",
    yes: locale === "fr" ? "Oui" : "Yes",
    multiple: locale === "fr" ? "Multiples" : "Multiple",
    viewFloorPlan: locale === "fr" ? "Voir le Plan d'Étage" : "View Floor Plan",
    contactSales: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
    floorPlan: locale === "fr" ? "PLAN D'ÉTAGE" : "FLOOR PLAN",
    floorPlanText:
      locale === "fr"
        ? "Espaces soigneusement conçus qui maximisent le confort et la fonctionnalité."
        : "Thoughtfully designed spaces that maximize comfort and functionality.",
    keyFeatures: locale === "fr" ? "CARACTÉRISTIQUES CLÉS" : "KEY FEATURES",
    keyFeaturesText:
      locale === "fr"
        ? "Chaque détail a été soigneusement conçu pour créer une expérience de vie extraordinaire."
        : "Every detail has been thoughtfully designed to create an extraordinary living experience.",
    compareUnits: locale === "fr" ? "COMPARER LES UNITÉS" : "COMPARE UNITS",
    compareUnitsText:
      locale === "fr"
        ? "Trouvez l'espace parfait qui correspond à votre style de vie et à vos besoins."
        : "Find the perfect space that suits your lifestyle and needs.",
    unitType: locale === "fr" ? "Type d'Unité" : "Unit Type",
    size: locale === "fr" ? "Taille" : "Size",
    startingPrice: locale === "fr" ? "Prix de Départ" : "Starting Price",
    selected: locale === "fr" ? "Sélectionné" : "Selected",
    select: locale === "fr" ? "Sélectionner" : "Select",
    readyForPerfectHome:
      locale === "fr" ? "Prêt à trouver votre maison parfaite ?" : "Ready to find your perfect home?",
    readyForPerfectHomeText:
      locale === "fr"
        ? "Notre équipe de vente est disponible pour répondre à toutes vos questions et vous aider à choisir l'unité parfaite."
        : "Our sales team is available to answer all your questions and help you choose the perfect unit.",
    viewPaymentPlans: locale === "fr" ? "Voir les Plans de Paiement" : "View Payment Plans",
    close: locale === "fr" ? "Fermer" : "Close",
  }

const unitTypes = [
    {
      id: "studio",
      type: texts.studio,
      tagline: texts.studioTagline,
      description: texts.studioDescription,
      units: 132,
      minSize: 372,
      maxSize: 451,
      image: "/images/cove-edition-5-luxury-studio-apartment.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-Studio-FloorPlan.webp",
      features:
        locale === "fr"
          ? [
              "Entièrement meublé avec des designs personnalisés",
              "Technologie de maison intelligente",
              "Appareils haut de gamme",
              "Fenêtres du sol au plafond",
            ]
          : [
              "Fully furnished with custom designs",
              "Smart home technology",
              "Premium appliances",
              "Floor-to-ceiling windows",
            ],
      specs: [
        { name: texts.bedrooms, value: texts.studio },
        { name: texts.bathrooms, value: "1" },
        { name: texts.kitchen, value: texts.openKitchen },
        { name: texts.balcony, value: texts.yes },
      ],
    },
    {
      id: "one-bedroom",
      type: texts.oneBedroom,
      tagline: texts.oneBedroomTagline,
      description: texts.oneBedroomDescription,
      units: 55,
      minSize: 738,
      maxSize: 1085,
      image: "/images/luxury-living-room-design.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-1Bedroom-FloorPlan.webp",
      features:
        locale === "fr"
          ? [
              "Espaces de vie et de sommeil séparés",
              "Cuisine design avec appareils haut de gamme",
              "Salle de bain élégante avec accessoires premium",
              "Balcon privé avec vues magnifiques",
            ]
          : [
              "Separate living and sleeping areas",
              "Designer kitchen with premium appliances",
              "Elegant bathroom with premium fixtures",
              "Private balcony with stunning views",
            ],
      specs: [
        { name: texts.bedrooms, value: "1" },
        { name: texts.bathrooms, value: "1-2" },
        { name: texts.kitchen, value: texts.openKitchen },
        { name: texts.balcony, value: texts.yes },
      ],
    },
    {
      id: "two-bedroom",
      type: texts.twoBedroom,
      tagline: texts.twoBedroomTagline,
      description: texts.twoBedroomDescription,
      units: 11,
      minSize: 1307,
      maxSize: 1307,
      image: "/images/luxury-bedroom-design.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-2Bedroom-FloorPlan.webp",
      features:
        locale === "fr"
          ? [
              "Suite principale avec salle de bain attenante",
              "Espaces de vie et de repas spacieux",
              "Cuisine gastronomique avec îlot",
              "Multiples balcons avec vues panoramiques",
            ]
          : [
              "Master suite with en-suite bathroom",
              "Spacious living and dining areas",
              "Gourmet kitchen with island",
              "Multiple balconies with panoramic views",
            ],
      specs: [
        { name: texts.bedrooms, value: "2" },
        { name: texts.bathrooms, value: "2-3" },
        { name: texts.kitchen, value: texts.openKitchen },
        { name: texts.balcony, value: texts.multiple },
      ],
    },
  ]

const activeUnitData = unitTypes.find((unit) => unit.id === activeUnit) || unitTypes[0]

return (
    <section id="units" ref={sectionRef} className="relative overflow-hidden bg-black text-white">
      {/* Unit Details Content - Apple-style redesign */}
      <div id="units" className="py-32 md:py-48">
        <div className="container mx-auto px-4">
          {/* Apple-style unit selector */}
          <div
            className={`max-w-5xl mx-auto mb-32 transition-all duration-1000 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="text-center mb-16">
              <h3 className="text-4xl md:text-6xl font-bold mb-6">{texts.unitTypes}</h3>
              <p className="text-xl text-white/70 max-w-2xl mx-auto">{texts.exploreUnits}</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {unitTypes.map((unit) => (
                <button
                  key={unit.id}
                  onClick={() => setActiveUnit(unit.id)}
                  className={`bg-white/5 backdrop-blur-sm rounded-3xl p-8 text-left transition-all duration-300 ${
                    activeUnit === unit.id ? "ring-2 ring-white" : "hover:bg-white/10"
                  }`}
                >
                  <h4 className="text-2xl font-semibold mb-2">{unit.type}</h4>
                  <p className="text-white/70 mb-4">{unit.tagline}</p>
                  <div className="flex justify-between items-center">
                    <p className="text-sm">
                      <span className="text-white/50">{texts.from} </span>
                      <span className="text-white font-medium">
                        {unit.id === "studio"
                          ? "700,000 AED"
                          : unit.id === "one-bedroom"
                            ? "1,200,000 AED"
                            : "1,800,000 AED"}
                      </span>
                    </p>
                    <div
                      className={`w-8 h-8 rounded-full flex items-center justify-center ${
                        activeUnit === unit.id ? "bg-white text-black" : "bg-white/20 text-white"
                      }`}
                    >
                      {activeUnit === unit.id ? <Check className="h-4 w-4" /> : <ArrowRight className="h-4 w-4" />}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

{/* Apple-style unit showcase */}
          <div
            className={`max-w-7xl mx-auto mb-32 transition-all duration-1000 delay-300 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <div className="order-2 lg:order-1">
                <p className="text-sm uppercase tracking-widest text-white/70 mb-4">{activeUnitData.type}</p>
                <h3 className="text-4xl md:text-6xl font-bold mb-6">{activeUnitData.tagline}</h3>
                <p className="text-xl text-white/70 mb-8 leading-relaxed">{activeUnitData.description}</p>

<div className="grid grid-cols-2 gap-y-8 gap-x-12 mb-12">
                  {activeUnitData.specs.map((spec, index) => (
                    <div key={index}>
                      <p className="text-sm text-white/50 uppercase tracking-wider mb-1">{spec.name}</p>
                      <p className="text-xl font-medium">{spec.value}</p>
                    </div>
                  ))}
                </div>

<div className="flex flex-col sm:flex-row gap-6 mb-12">
                  <button
                    onClick={() => setShowFloorPlan(true)}
                    className="inline-flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 px-6 py-3 text-white font-medium transition-colors"
                  >
                    <Maximize2 className="mr-2 h-4 w-4" />
                    {texts.viewFloorPlan}
                  </button>

<a
                    href="#contact"
                    className="inline-flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 px-6 py-3 text-white font-medium transition-colors"
                  >
                    {texts.contactSales}
                  </a>
                </div>
              </div>

{/* Floor Plan Section */}
          <div
            className={`max-w-6xl mx-auto mb-32 transition-all duration-1000 delay-400 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="text-center mb-16">
              <h3 className="text-4xl md:text-5xl font-bold mb-6">{texts.floorPlan}</h3>
              <p className="text-xl text-white/70 max-w-3xl mx-auto">{texts.floorPlanText}</p>
            </div>

<div className="bg-white/5 backdrop-blur-sm rounded-3xl p-8 md:p-12">
              <div className="relative aspect-[16/9] w-full overflow-hidden rounded-2xl">
                <Image
                  src={activeUnitData.floorPlan || "/placeholder.svg"}
                  alt={`${activeUnitData.type} Floor Plan`}
                  fill
                  className="object-contain"
                />
                <button
                  onClick={() => setShowFloorPlan(true)}
                  className="absolute bottom-4 right-4 flex items-center justify-center rounded-full bg-white/20 backdrop-blur-md hover:bg-white/30 p-3 text-white transition-colors"
                  aria-label="Enlarge floor plan"
                >
                  <Maximize2 className="h-5 w-5" />
                </button>
              </div>
            </div>
          </div>

{/* Apple-style features section */}
          <div
            className={`max-w-6xl mx-auto mb-32 transition-all duration-1000 delay-500 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="text-center mb-16">
              <h3 className="text-4xl md:text-5xl font-bold mb-6">{texts.keyFeatures}</h3>
              <p className="text-xl text-white/70 max-w-3xl mx-auto">{texts.keyFeaturesText}</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              {activeUnitData.features.map((feature, index) => (
                <div
                  key={index}
                  className="bg-gradient-to-br from-white/10 to-white/5 backdrop-blur-sm rounded-3xl p-8 flex items-start gap-6"
                >
                  <div className="w-12 h-12 rounded-full bg-blue-600/20 flex-shrink-0 flex items-center justify-center">
                    <span className="text-blue-400 text-xl font-bold">{index + 1}</span>
                  </div>
                  <div>
                    <p className="text-xl font-medium leading-relaxed">{feature}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

{/* Apple-style comparison section */}
          <div
            className={`max-w-6xl mx-auto mb-32 transition-all duration-1000 delay-700 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="text-center mb-16">
              <h3 className="text-4xl md:text-5xl font-bold mb-6">{texts.compareUnits}</h3>
              <p className="text-xl text-white/70 max-w-3xl mx-auto">{texts.compareUnitsText}</p>
            </div>

<div className="bg-white/5 backdrop-blur-sm rounded-3xl overflow-hidden">
              {/* Table header - Desktop */}
              <div className="hidden md:grid md:grid-cols-5 border-b border-white/10 text-sm uppercase tracking-wider text-white/50">
                <div className="p-6">{texts.unitType}</div>
                <div className="p-6 text-center">{texts.size}</div>
                <div className="p-6 text-center">{texts.bedrooms}</div>
                <div className="p-6 text-center">{texts.startingPrice}</div>
                <div className="p-6 text-right"></div>
              </div>

{/* Table header - Mobile (simplified) */}
              <div className="grid grid-cols-3 md:hidden border-b border-white/10 text-sm uppercase tracking-wider text-white/50">
                <div className="p-4">{texts.unitType}</div>
                <div className="p-4 text-center">{texts.bedrooms}</div>
                <div className="p-4 text-center">{texts.startingPrice}</div>
              </div>

{unitTypes.map((unit) => (
                <div
                  key={unit.id}
                  className={`border-b border-white/10 transition-colors ${
                    activeUnit === unit.id ? "bg-white/10" : "hover:bg-white/5"
                  }`}
                >
                  {/* Desktop row */}
                  <div className="hidden md:grid md:grid-cols-5">
                    <div className="p-6 flex items-center">
                      <span className="font-medium text-lg">{unit.type}</span>
                    </div>
                    <div className="p-6 flex items-center justify-center">
                      <span>
                        {unit.minSize === unit.maxSize ? unit.minSize : `${unit.minSize}–${unit.maxSize}`} sq.ft
                      </span>
                    </div>
                    <div className="p-6 flex items-center justify-center">
                      <span>{unit.specs[0].value}</span>
                    </div>
                    <div className="p-6 flex items-center justify-center">
                      <span>
                        {unit.id === "studio"
                          ? "700,000 AED"
                          : unit.id === "one-bedroom"
                            ? "1,200,000 AED"
                            : "1,800,000 AED"}
                      </span>
                    </div>
                    <div className="p-6 flex items-center justify-end">
                      <button
                        onClick={() => setActiveUnit(unit.id)}
                        className={`rounded-full px-4 py-2 text-sm font-medium transition-colors ${
                          activeUnit === unit.id ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"
                        }`}
                      >
                        {activeUnit === unit.id ? texts.selected : texts.select}
                      </button>
                    </div>
                  </div>

{/* Mobile row (simplified) */}
                  <div className="grid grid-cols-3 md:hidden">
                    <div className="p-4 flex items-center">
                      <span className="font-medium">{unit.type}</span>
                    </div>
                    <div className="p-4 flex items-center justify-center">
                      <span>{unit.specs[0].value}</span>
                    </div>
                    <div className="p-4 flex items-center justify-center">
                      <span className="text-sm">
                        {unit.id === "studio" ? "700K AED" : unit.id === "one-bedroom" ? "1.2M AED" : "1.8M AED"}
                      </span>
                    </div>
                  </div>
                </div>
              ))}
            </div>

{/* Mobile-only selection buttons */}
            <div className="mt-6 grid grid-cols-3 gap-2 md:hidden">
              {unitTypes.map((unit) => (
                <button
                  key={unit.id}
                  onClick={() => setActiveUnit(unit.id)}
                  className={`rounded-full py-2 text-xs font-medium transition-colors ${
                    activeUnit === unit.id ? "bg-white text-black" : "bg-white/10 text-white hover:bg-white/20"
                  }`}
                >
                  {unit.type}
                </button>
              ))}
            </div>
          </div>

{/* Apple-style CTA section */}
          <div
            className={`max-w-4xl mx-auto py-16 transition-all duration-1000 delay-900 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="bg-gradient-to-br from-blue-900/30 to-indigo-900/30 backdrop-blur-sm rounded-3xl p-12 text-center">
              <h3 className="text-3xl md:text-4xl font-bold mb-6">{texts.readyForPerfectHome}</h3>
              <p className="text-xl text-white/80 mb-12 max-w-2xl mx-auto">{texts.readyForPerfectHomeText}</p>
              <div className="flex flex-col sm:flex-row justify-center gap-6">
                <a
                  href="#contact"
                  className="rounded-full px-8 py-4 bg-white text-black text-base font-medium transition-all hover:bg-white/90"
                >
                  {texts.contactSales}
                </a>
                <a
                  href="#payment"
                  className="rounded-full px-8 py-4 bg-blue-600 text-white text-base font-medium transition-all hover:bg-blue-700"
                >
                  {texts.viewPaymentPlans}
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Floor Plan Modal */}
      {showFloorPlan && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4">
          <div className="relative w-full max-w-6xl max-h-[90vh] overflow-hidden">
            <button
              onClick={() => setShowFloorPlan(false)}
              className="absolute top-4 right-4 z-10 p-2 bg-black/50 rounded-full text-white hover:bg-black/70 transition-colors"
              aria-label={texts.close}
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
            <div className="relative w-full h-[80vh]">
              <Image
                src={activeUnitData.floorPlan || "/placeholder.svg"}
                alt={`${activeUnitData.type} Floor Plan`}
                fill
                className="object-contain"
                sizes="(max-width: 768px) 100vw, 90vw"
              />
            </div>
          </div>
        </div>
      )}
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/gallery-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import Image from "next/image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { X } from "lucide-react"

// Ajouter le paramètre locale aux props du composant
interface GallerySectionProps {
  locale?: string
}

export default function GallerySection({ locale = "en" }: GallerySectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [activeTab, setActiveTab] = useState("exterior")
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Handle body scroll lock when modal is open
  useEffect(() => {
    // Only run on the client side
    if (typeof document === "undefined") return

if (selectedImage) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

return () => {
      document.body.style.overflow = "auto"
    }
  }, [selectedImage])

// Ajouter des traductions conditionnelles
  const texts = {
    title: locale === "fr" ? "GALERIE" : "GALLERY",
    subtitle:
      locale === "fr"
        ? "Explorez les espaces magnifiques et le design exceptionnel de Cove Edition 5."
        : "Explore the stunning spaces and exceptional design of Cove Edition 5.",
    exterior: locale === "fr" ? "Extérieur" : "Exterior",
    interior: locale === "fr" ? "Intérieur" : "Interior",
    contactSales: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
  }

const exteriorImages = [
    {
      src: "/images/cove-edition-5-facade-detail.jpeg",
      alt:
        locale === "fr"
          ? "Détail de la façade de Cove Edition 5 avec piscine à débordement sur le toit"
          : "Cove Edition 5 Facade Detail with Rooftop Infinity Pool",
    },
    {
      src: "/images/cove-edition-5-lateral-view.jpeg",
      alt:
        locale === "fr"
          ? "Vue latérale de Cove Edition 5 au coucher du soleil"
          : "Cove Edition 5 Lateral View at Sunset",
    },
    {
      src: "/images/cove-edition-5-corner-view.jpeg",
      alt:
        locale === "fr"
          ? "Vue d'angle de Cove Edition 5 montrant le bâtiment complet"
          : "Cove Edition 5 Corner View Showing Full Building",
    },
    {
      src: "/images/cove-edition-5-rooftop-infinity-pool.jpeg",
      alt:
        locale === "fr"
          ? "Vue aérienne de Cove Edition 5 avec piscine à débordement sur le toit"
          : "Cove Edition 5 Aerial View with Rooftop Infinity Pool",
    },
  ]

const interiorImages = [
    {
      src: "/images/luxury-living-room-design.jpeg",
      alt: locale === "fr" ? "Salon de luxe avec design moderne" : "Luxury Living Room with Modern Design",
    },
    {
      src: "/images/luxury-kitchen-dining-area.jpeg",
      alt:
        locale === "fr"
          ? "Cuisine et salle à manger de luxe avec finitions en marbre"
          : "Luxury Kitchen and Dining Area with Marble Finishes",
    },
    {
      src: "/images/cove-edition-5-luxury-studio-apartment.jpeg",
      alt: locale === "fr" ? "Intérieur d'un studio de luxe" : "Luxury Studio Apartment Interior",
    },
    {
      src: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Imitiaz_Developments_Bedroom_03_11.jpg-pGsssdGo6eAp86YBxXgvoxqN4QkcpQ.jpeg",
      alt: locale === "fr" ? "Intérieur de chambre" : "Bedroom Interior",
    },
  ]

const openImage = (src: string) => {
    setSelectedImage(src)
  }

const closeImage = () => {
    setSelectedImage(null)
  }

return (
    <section id="gallery" ref={sectionRef} className="py-24 md:py-40 overflow-hidden">
      <div className="container mx-auto px-4">
        <div
          className={`max-w-4xl mx-auto text-center mb-24 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">{texts.title}</h2>
          <p className="text-xl md:text-2xl text-neutral-600">{texts.subtitle}</p>
        </div>

<Tabs defaultValue="exterior" className="w-full" onValueChange={setActiveTab}>
          <div className="flex justify-center mb-16">
            <div className="bg-[#f5f5f7] p-1.5 rounded-full inline-flex">
              <TabsList className="bg-transparent p-0 flex space-x-1">
                <TabsTrigger
                  value="exterior"
                  className="px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:text-neutral-500 data-[state=inactive]:hover:text-neutral-800"
                >
                  {texts.exterior}
                </TabsTrigger>
                <TabsTrigger
                  value="interior"
                  className="px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:text-neutral-500 data-[state=inactive]:hover:text-neutral-800"
                >
                  {texts.interior}
                </TabsTrigger>
              </TabsList>
            </div>
          </div>

<TabsContent value="exterior" className="mt-0">
            <div
              className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 transition-all duration-1000 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              {exteriorImages.map((image, index) => (
                <div
                  key={index}
                  className="relative h-[200px] md:h-[300px] rounded-2xl overflow-hidden cursor-pointer"
                  onClick={() => openImage(image.src)}
                >
                  <Image
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    fill
                    className="object-cover transition-transform hover:scale-105 duration-700"
                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 25vw"
                  />
                </div>
              ))}
            </div>
          </TabsContent>

<TabsContent value="interior" className="mt-0">
            <div
              className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 transition-all duration-1000 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              {interiorImages.map((image, index) => (
                <div
                  key={index}
                  className="relative h-[200px] md:h-[300px] rounded-2xl overflow-hidden cursor-pointer"
                  onClick={() => openImage(image.src)}
                >
                  <Image
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    fill
                    className="object-cover transition-transform hover:scale-105 duration-700"
                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 25vw"
                  />
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>

<div className="flex justify-center mt-16">
          <a
            href="#contact"
            className="rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium transition-all"
          >
            {texts.contactSales}
          </a>
        </div>
      </div>

import { useState, useEffect } from "react"
import Link from "next/link"

export default function PromoBanner() {
  const [visible, setVisible] = useState(true)

useEffect(() => {
    // Only run on the client side
    if (typeof window === "undefined") return

const handleScroll = () => {
      // Hide banner after scrolling down 100px
      if (window.scrollY > 100) {
        setVisible(false)
      } else {
        setVisible(true)
      }
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <div
      className={`fixed top-0 left-0 right-0 z-[60] bg-blue-600 text-white py-1 transition-all duration-300 ease-in-out text-xs ${
        visible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full"
      }`}
    >
      <div className="container mx-auto px-4 flex items-center justify-between">
        <div className="flex items-center">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 4477 3718"
            fill="none"
            className="h-5 w-auto text-white mr-2"
          >
            <path
              d="M984.944 895.681C656.599 1175.61 447.7 1567.75 447.7 2016.48C447.7 2374.02 582.103 2696.97 803.26 2955.38C862.303 3024.58 927.492 3089.09 997.89 3148.27L998.095 3148.03C1060.97 3200.83 1128.04 3249.52 1198.67 3293.7C1097.14 3405.06 996.699 3517.51 897.433 3630.95C821.7 3580 749.576 3524.8 681.537 3465.7L680.721 3464.99C675.559 3460.49 670.399 3455.99 665.286 3451.44C633.948 3423.67 603.501 3395.05 573.994 3365.64C566.949 3358.61 559.958 3351.54 553.021 3344.43C213.408 2996.15 3.67405 2539.33 0.0484313 2029.91L0 2016.48C0 1447.53 256.997 943.355 665.366 581.444C670.457 576.915 675.595 572.436 680.735 567.955L681.536 567.256C1088.34 213.893 1641.14 0 2238.5 0C2835.86 0 3388.66 213.893 3795.46 567.257L3796.34 568.025C3801.46 572.484 3806.62 576.982 3811.68 581.488C4220.02 943.396 4477 1447.55 4477 2016.48C4477 2531.63 4266.31 2993.67 3923.33 3345.1C3916.61 3351.99 3909.83 3358.83 3903.01 3365.64C3873.51 3395.04 3843.08 3423.64 3811.76 3451.4C3806.37 3456.2 3800.94 3460.98 3795.49 3465.73C3727.22 3525.04 3654.83 3580.41 3578.81 3631.51C3479.64 3518.33 3379.12 3405.94 3277.33 3294.43C3348.32 3250.08 3415.74 3201.14 3478.92 3148.05L3479.11 3148.27C3556.69 3083.05 3627.95 3011.35 3691.63 2934.05C3902.06 2679.25 4029.3 2364.12 4029.3 2016.48C4029.3 1567.74 3820.4 1175.61 3492.05 895.674C3487.75 891.991 3483.44 888.329 3479.11 884.686C3438.19 850.49 3395.43 818.054 3351.07 787.405C3048.85 576.304 2664.71 448.106 2238.5 448.106C1809.47 448.106 1423.06 577.98 1119.94 791.567C1077.72 820.989 1037 852.073 997.924 884.726C993.589 888.37 989.24 891.996 984.944 895.681Z"
              fill="currentColor"
            ></path>
            <path
              fillRule="evenodd"
              clipRule="evenodd"
              d="M2014.75 2444.97C1844.11 2613.25 1676.21 2784.29 1511.11 2958.03C1428.84 2913.72 1353.38 2862.43 1285.63 2805.39L1285.83 2805.14C1239.23 2765.96 1196.3 2724.19 1157.33 2680.18C1329.5 2498.32 1504.66 2319.34 1682.75 2143.32C1426.56 2156.47 1170.72 2178.71 915.713 2210.05C902.322 2146.73 895.4 2082 895.4 2016.48C895.4 1928.11 908.243 1840.98 932.702 1756.72C1175.63 1728.44 1419.24 1708.08 1663.15 1695.63C1512.92 1561.14 1361.19 1429 1208.2 1299.42C1229.9 1277.58 1252.6 1256.41 1276.25 1235.95L1285.83 1227.81C1374.57 1152.6 1476.28 1087.38 1588.79 1035.18C1731.98 1157.79 1874.02 1282.56 2014.75 1409.35V911.401C2087.06 901.43 2161.77 896.213 2238.5 896.213C2315.3 896.213 2390.07 901.439 2462.45 911.428V1408.37C2602.78 1282.23 2744.72 1157.83 2888.23 1035.19C3000.74 1087.38 3102.47 1152.57 3191.2 1227.78L3200.74 1235.95C3224.43 1256.43 3247.16 1277.64 3268.89 1299.51L3259.82 1307.19C3109.17 1434.69 2960.25 1564.17 2813.13 1695.59C3057.28 1708.02 3301.13 1728.46 3544.29 1756.77C3568.76 1840.97 3581.6 1928.1 3581.6 2016.48C3581.6 2082.01 3574.69 2146.73 3561.32 2210.03C3305.58 2178.6 3049 2156.33 2792.07 2143.2C2970.56 2319.72 3146.24 2499.2 3318.71 2681.26C3280 2724.87 3237.39 2766.28 3191.17 2805.14L3191.35 2805.36C3123.24 2862.67 3047.32 2914.19 2964.51 2958.68C2799.98 2785.66 2632.51 2615.05 2462.45 2447.18V3717.45H2014.75V2444.97ZM2555.07 1885.23L2238.5 1568.37L1921.93 1885.23L2238.5 2202.09L2555.07 1885.23Z"
              fill="currentColor"
            ></path>
          </svg>
          <span className="font-medium">SIGNATURE</span>
        </div>
        <Link href="https://PalmSignature.ae" target="_blank" className="text-xs flex items-center hover:underline">
          Visit PalmSignature.ae
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3 ml-1">
            <path
              fillRule="evenodd"
              d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
              clipRule="evenodd"
            />
          </svg>
        </Link>
      </div>
    </div>
  )
}
[V0_FILE]typescript:file="hooks/use-client-only.ts" isMerged="true"
"use client"

import { useState, useEffect } from "react"

export function useClientOnly<T>(callback: () => T, initialValue: T): T {
  const [value, setValue] = useState<T>(initialValue)

useEffect(() => {
    setValue(callback())
  }, [callback])

return value
}

export function useWindowSize() {
  const [size, setSize] = useState({
    width: 0,
    height: 0,
  })

useEffect(() => {
    // Only run on client side
    if (typeof window === "undefined") return

const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      })
    }

// Set size initially
    handleResize()

window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

return size
}
[V0_FILE]typescriptreact:file="components/ui-elements.tsx" isMerged="true"
"use client"

import dynamic from "next/dynamic"

// Dynamically import UI components with ssr: false
const PromoBanner = dynamic(() => import("@/components/promo-banner"), { ssr: false })
const ScrollHeader = dynamic(() => import("@/components/scroll-header"), { ssr: false })
const FloatingWhatsApp = dynamic(() => import("@/components/floating-whatsapp"), { ssr: false })
const CatalogPopup = dynamic(() => import("@/components/catalog-popup"), { ssr: false })

interface UIElementsProps {
  locale?: string
}

export default function UIElements({ locale = "en" }: UIElementsProps) {
  return (
    <>
      <PromoBanner locale={locale} />
      <ScrollHeader locale={locale} />
      <FloatingWhatsApp locale={locale} />
      <CatalogPopup locale={locale} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/dynamic-sections.tsx" isEdit="true" isMerged="true"
"use client"

import dynamic from "next/dynamic"
import { AnimateOnScroll } from "@/components/animate-on-scroll"

// Dynamically import content sections with ssr: false
const Hero = dynamic(() => import("@/components/hero"), { ssr: false })
const AmenitiesSection = dynamic(() => import("@/components/amenities-section"), { ssr: false })
const GallerySection = dynamic(() => import("@/components/gallery-section"), { ssr: false })
const ContactSection = dynamic(() => import("@/components/contact-section"), { ssr: false })
const CEOSection = dynamic(() => import("@/components/ceo-section"), { ssr: false })

interface DynamicHeroProps {
  locale?: string
}

export function DynamicHero({ locale = "en" }: DynamicHeroProps) {
  return <Hero locale={locale} />
}

interface DynamicAmenitiesProps {
  locale?: string
}

export function DynamicAmenities({ locale = "en" }: DynamicAmenitiesProps) {
  return <AmenitiesSection locale={locale} />
}

interface DynamicGalleryProps {
  locale?: string
}

export function DynamicGallery({ locale = "en" }: DynamicGalleryProps) {
  return <GallerySection locale={locale} />
}

interface DynamicCEOProps {
  locale?: string
}

export function DynamicCEO({ locale = "en" }: DynamicCEOProps) {
  return (
    <AnimateOnScroll animation="fade-up">
      <CEOSection />
    </AnimateOnScroll>
  )
}

interface DynamicContactProps {
  locale?: string
}

export function DynamicContact({ locale = "en" }: DynamicContactProps) {
  return (
    <AnimateOnScroll animation="fade-up">
      <ContactSection locale={locale} />
    </AnimateOnScroll>
  )
}
[V0_FILE]typescript:file="middleware.ts" isMerged="true"
import { type NextRequest, NextResponse } from "next/server"

// Liste des langues supportées
const supportedLocales = ["en", "fr"]
const defaultLocale = "en"

export function middleware(request: NextRequest) {
  // Vérifier si la requête est déjà pour une page localisée
  const pathname = request.nextUrl.pathname

// Si l'URL contient déjà un préfixe de langue, ne rien faire
  if (supportedLocales.some((locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`)) {
    return NextResponse.next()
  }

// Détecter la langue préférée du navigateur
  const preferredLocale = getPreferredLocale(request, supportedLocales, defaultLocale)

// Si la langue préférée n'est pas l'anglais (par défaut), rediriger vers la version localisée
  if (preferredLocale !== defaultLocale) {
    const newUrl = new URL(`/${preferredLocale}${pathname}`, request.url)
    newUrl.search = request.nextUrl.search
    return NextResponse.redirect(newUrl)
  }

return NextResponse.next()
}

// Fonction pour obtenir la langue préférée du navigateur
function getPreferredLocale(request: NextRequest, supportedLocales: string[], defaultLocale: string): string {
  // Vérifier le cookie de langue s'il existe
  const cookieLocale = request.cookies.get("NEXT_LOCALE")?.value
  if (cookieLocale && supportedLocales.includes(cookieLocale)) {
    return cookieLocale
  }

// Vérifier l'en-tête Accept-Language
  const acceptLanguage = request.headers.get("accept-language")
  if (acceptLanguage) {
    // Exemple: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
    const parsedLocales = acceptLanguage.split(",").map((item) => {
      const [locale, priority = "q=1.0"] = item.trim().split(";")
      const priorityValue = Number.parseFloat(priority.replace("q=", "")) || 0
      return { locale: locale.split("-")[0], priority: priorityValue }
    })

// Trier par priorité
    parsedLocales.sort((a, b) => b.priority - a.priority)

// Trouver la première langue supportée
    for (const { locale } of parsedLocales) {
      if (supportedLocales.includes(locale)) {
        return locale
      }
    }
  }

return defaultLocale
}

export const config = {
  // Ne pas appliquer le middleware aux fichiers statiques
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|images|.*\\.png$).*)"],
}
[V0_FILE]typescriptreact:file="components/language-switcher.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Globe } from "lucide-react"

interface LanguageSwitcherProps {
  variant?: "header" | "footer"
  locale?: string
}

export default function LanguageSwitcher({ variant = "header", locale = "en" }: LanguageSwitcherProps) {
  const [isOpen, setIsOpen] = useState(false)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const pathname = usePathname()

// Close dropdown when clicking outside
  useEffect(() => {
    // Only run on the client side
    if (typeof window === "undefined") return

const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }

document.addEventListener("mousedown", handleClickOutside)
    return () => {
      document.removeEventListener("mousedown", handleClickOutside)
    }
  }, [])

// Get the correct path for the language switcher
  const getLanguagePath = (targetLocale: string) => {
    if (targetLocale === "en") {
      // If current path is /fr, remove it to go to English version
      return pathname.startsWith("/fr") ? pathname.substring(3) || "/" : pathname
    } else {
      // If current path is not /fr, add it to go to French version
      return pathname.startsWith("/fr") ? pathname : `/fr${pathname}`
    }
  }

if (variant === "footer") {
    return (
      <div className="flex items-center text-[13px] md:text-[11px] text-[#424245] py-1">
        <Link
          href={getLanguagePath("en")}
          className={`px-3 py-1 hover:text-[#1d1d1f] transition-colors ${locale === "en" ? "font-medium" : ""}`}
        >
          English
        </Link>
        <span className="mx-1.5 text-[#d2d2d7]">|</span>
        <Link
          href={getLanguagePath("fr")}
          className={`px-3 py-1 hover:text-[#1d1d1f] transition-colors ${locale === "fr" ? "font-medium" : ""}`}
        >
          Français
        </Link>
      </div>
    )
  }

return (
    <div className="relative" ref={dropdownRef}>
      <button
        onClick={() => setIsOpen(!isOpen)}
        className="flex items-center justify-center w-10 h-10 bg-neutral-100 hover:bg-neutral-200 rounded-full transition-all duration-300 hover:shadow-md"
        aria-label="Change language"
      >
        <Globe className="h-5 w-5 text-neutral-700" />
      </button>

{isOpen && (
        <div className="absolute right-0 mt-2 w-40 bg-white rounded-lg shadow-lg py-2 z-50">
          <Link
            href={getLanguagePath("en")}
            className={`block px-5 py-3 text-base md:text-sm hover:bg-neutral-100 ${
              locale === "en" ? "font-medium text-blue-600" : ""
            }`}
            onClick={() => setIsOpen(false)}
          >
            English
          </Link>
          <Link
            href={getLanguagePath("fr")}
            className={`block px-5 py-3 text-base md:text-sm hover:bg-neutral-100 ${
              locale === "fr" ? "font-medium text-blue-600" : ""
            }`}
            onClick={() => setIsOpen(false)}
          >
            Français
          </Link>
        </div>
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/floating-whatsapp.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { MessageCircle, X } from "lucide-react"

interface FloatingWhatsAppProps {
  locale?: string
}

export default function FloatingWhatsApp({ locale = "en" }: FloatingWhatsAppProps) {
  const [isOpen, setIsOpen] = useState(false)

const openWhatsApp = () => {
    // Only run on the client side
    if (typeof window === "undefined") return

const message = encodeURIComponent(
      locale === "fr"
        ? "Bonjour, je suis intéressé(e) par COVE EDITION 5. Pouvez-vous me fournir plus d'informations ?"
        : "Hello, I'm interested in COVE EDITION 5. Can you provide more information?",
    )
    window.open(`https://wa.me/971581998661?text=${message}`, "_blank")
  }

return (
    <div className="fixed bottom-6 right-6 z-50">
      {isOpen && (
        <div className="absolute bottom-16 right-0 bg-white rounded-lg shadow-lg p-4 mb-4 w-64 animate-fade-in">
          <button
            onClick={() => setIsOpen(false)}
            className="absolute top-2 right-2 p-2 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100"
            aria-label={locale === "fr" ? "Fermer la popup WhatsApp" : "Close WhatsApp popup"}
          >
            <X size={18} />
          </button>
          <p className="text-sm font-medium mb-3">
            {locale === "fr" ? "Des questions sur Cove Edition 5 ?" : "Questions about Cove Edition 5?"}
          </p>
          <p className="text-xs text-gray-600 mb-4">
            {locale === "fr"
              ? "Discutez instantanément avec notre équipe de vente sur WhatsApp."
              : "Chat with our sales team instantly on WhatsApp."}
          </p>
          <button
            onClick={openWhatsApp}
            className="w-full bg-green-500 hover:bg-green-600 text-white rounded-full py-2 text-sm font-medium transition-colors flex items-center justify-center"
          >
            <MessageCircle className="w-4 h-4 mr-2" />
            {locale === "fr" ? "Démarrer la discussion" : "Start Chat"}
          </button>
        </div>
      )}

<button
        onClick={() => setIsOpen(!isOpen)}
        className="bg-green-500 hover:bg-green-600 text-white rounded-full p-4 shadow-lg transition-all hover:scale-105"
        aria-label="WhatsApp Contact"
      >
        <MessageCircle className="h-5 w-5" />
      </button>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-to-top-button.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { ChevronUp } from "lucide-react"

interface ScrollToTopButtonProps {
  threshold?: number
  right?: number
  bottom?: number
}

export default function ScrollToTopButton({ threshold = 300, right = 2, bottom = 6 }: ScrollToTopButtonProps) {
  const [isVisible, setIsVisible] = useState(false)

useEffect(() => {
    // Only run on the client side
    if (typeof window === "undefined") return

const toggleVisibility = () => {
      if (window.scrollY > threshold) {
        setIsVisible(true)
      } else {
        setIsVisible(false)
      }
    }

window.addEventListener("scroll", toggleVisibility)
    return () => window.removeEventListener("scroll", toggleVisibility)
  }, [threshold])

const scrollToTop = () => {
    if (typeof window === "undefined") return
    window.scrollTo({
      top: 0,
      behavior: "smooth",
    })
  }

return (
    <button
      onClick={scrollToTop}
      className={`fixed z-40 bg-blue-600 hover:bg-blue-700 text-white rounded-full p-3 shadow-lg transition-all duration-300 ${
        isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10 pointer-events-none"
      }`}
      style={{ right: `${right}rem`, bottom: `${bottom}rem` }}
      aria-label="Retour en haut"
    >
      <ChevronUp className="h-5 w-5" />
    </button>
  )
}
[V0_FILE]typescriptreact:file="app/fr/layout.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
import type React from "react"
import type { Metadata } from "next"

export const metadata: Metadata = {
  title: "COVE EDITION 5 par Imtiaz | Résidences de Luxe à Dubailand",
  description:
    "Découvrez COVE EDITION 5 par Imtiaz - Résidences de luxe à Dubailand avec piscine à débordement, vues panoramiques et design sophistiqué. À partir de 700 000 AED avec plans de paiement flexibles.",
  keywords:
    "Cove Edition 5, Imtiaz Developments, propriété Dubailand, appartements de luxe Dubaï, investissement immobilier Dubaï, piscine à débordement, vues panoramiques, propriété Dubaï, plan de paiement post-livraison, studios Dubaï, appartement 1 chambre Dubaï, appartement 2 chambres Dubaï",
  openGraph: {
    title: "COVE EDITION 5 par Imtiaz | Résidences de Luxe à Dubailand",
    description:
      "Résidences de luxe avec piscine à débordement, vues panoramiques et design sophistiqué. À partir de 700 000 AED avec plans de paiement flexibles. L'opportunité d'investissement parfaite à Dubaï.",
    images: [
      {
        url: "/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg",
        width: 1200,
        height: 630,
        alt: "Cove Edition 5 par Imtiaz - Résidences de Luxe à Dubailand",
      },
    ],
    locale: "fr_FR",
    type: "website",
    siteName: "Cove Edition 5",
  },
  twitter: {
    card: "summary_large_image",
    title: "COVE EDITION 5 par Imtiaz | Résidences de Luxe à Dubailand",
    description: "Résidences de luxe à Dubailand. À partir de 700 000 AED avec plans de paiement flexibles.",
    images: ["/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg"],
  },
  alternates: {
    canonical: "https://coveedition5.com/fr",
    languages: {
      en: "https://coveedition5.com",
      fr: "https://coveedition5.com/fr",
    },
  },
}

export default function FrenchLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <script async src="https://www.googletagmanager.com/gtag/js?id=AW-17243978314"></script>
      <script
        dangerouslySetInnerHTML={{
          __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'AW-17243978314');
          `,
        }}
      />
      {children}
    </>
  )
}
[V0_FILE]jpeg:file="public/images/cove-edition-6-rooftop-pool.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-06-17%20at%2011.02.43-4Q3eY6nAUv1fNOdOoIVBifHok09DOz.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-6-facade-balconies.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-06-17%20at%2011.02.37-h32ZCe8AOhq0wQcnNFGFRMFFlmYiyR.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-6-aerial-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-06-17%20at%2011.02.33-frlmmpyET4DcG7lAhS6FeNHRGFQngB.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-6-side-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-06-17%20at%2011.02.27-MUojQBCAaRa75pfSMIUGw9GPVNJxUJ.jpeg" isMerged="true"
[V0_FILE]jpeg:file="public/images/cove-edition-6-front-view.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/WhatsApp%20Image%202025-06-17%20at%2011.18.02-pFJ2xXFElL7reP1Jj92srGD6U6BUla.jpeg" isMerged="true"
[V0_FILE]typescriptreact:file="components/fr/cove-edition-6-section.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

export default function CoveEdition6Section() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Function to open WhatsApp with predefined message for Cove Edition 6
  const openWhatsAppCE6 = () => {
    const message = encodeURIComponent(
      "Bonjour, je suis intéressé(e) par COVE EDITION 6. Pouvez-vous me fournir plus d'informations ?",
    )
    window.open(`https://wa.me/971581998661?text=${message}`, "_blank")
  }

return (
    <section ref={sectionRef} className="py-16 md:py-24 bg-gradient-to-b from-white to-gray-50">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-6xl mx-auto transition-opacity duration-1000 ${isVisible ? "opacity-100" : "opacity-0"}`}
        >
          {/* Header */}
          <div className="text-center mb-12 md:mb-16">
            <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-4">Découvrez aussi COVE EDITION 6</h2>
            <p className="text-lg md:text-xl text-neutral-600 max-w-3xl mx-auto">
              Le nouveau projet d'Imtiaz à Dubailand - Entièrement meublé et équipé
            </p>
          </div>

{/* Main Content Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 md:gap-12 items-center mb-12">
            {/* Images Gallery */}
            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-4">
                <img
                  src="/images/cove-edition-6-front-view.jpeg"
                  alt="Cove Edition 6 Vue Frontale"
                  className="w-full h-48 object-cover rounded-2xl"
                />
                <img
                  src="/images/cove-edition-6-facade-balconies.jpeg"
                  alt="Cove Edition 6 Façade"
                  className="w-full h-32 object-cover rounded-2xl"
                />
              </div>
              <div className="space-y-4 pt-8">
                <img
                  src="/images/cove-edition-6-rooftop-pool.jpeg"
                  alt="Cove Edition 6 Piscine Toit"
                  className="w-full h-32 object-cover rounded-2xl"
                />
                <img
                  src="/images/cove-edition-6-aerial-view.jpeg"
                  alt="Cove Edition 6 Vue Aérienne"
                  className="w-full h-48 object-cover rounded-2xl"
                />
              </div>
            </div>

{/* Project Details */}
            <div className="space-y-6">
              <div className="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
                <h3 className="text-2xl md:text-3xl font-semibold mb-6">COVE EDITION 6</h3>

{/* Key Features */}
                <div className="grid grid-cols-2 gap-4 mb-6">
                  <div className="text-center p-4 bg-gray-50 rounded-xl">
                    <div className="text-2xl font-bold text-blue-600">700K</div>
                    <div className="text-sm text-gray-600">AED À partir de</div>
                  </div>
                  <div className="text-center p-4 bg-gray-50 rounded-xl">
                    <div className="text-2xl font-bold text-green-600">5</div>
                    <div className="text-sm text-gray-600">Plan de paiement 5 ans</div>
                  </div>
                </div>

{/* Features List */}
                <div className="space-y-3 mb-6">
                  <div className="flex items-center">
                    <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                    <span className="text-gray-700">Entièrement meublé</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                    <span className="text-gray-700">Dubailand</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                    <span className="text-gray-700">Studio, 1BR, 2BR</span>
                  </div>
                  <div className="flex items-center">
                    <div className="w-2 h-2 bg-blue-600 rounded-full mr-3"></div>
                    <span className="text-gray-700">3 ans post-livraison</span>
                  </div>
                </div>

{/* CTA Button */}
                <button
                  onClick={openWhatsAppCE6}
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-full py-3 md:py-4 text-base md:text-lg font-medium transition-colors flex items-center justify-center"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="w-5 h-5 mr-2"
                  >
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                  </svg>
                  WhatsApp
                </button>
              </div>
            </div>
          </div>

{/* Amenities Section */}
          <div className="bg-white rounded-3xl p-6 md:p-8 shadow-sm border border-gray-100">
            <h4 className="text-xl md:text-2xl font-semibold mb-6 text-center">Équipements Premium</h4>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-4">
              {["Piscine Infinity", "Salle de Sport", "Clubhouse", "Aire de Jeux", "Espace BBQ", "Zone de Détente"].map(
                (amenity, index) => (
                  <div key={index} className="flex items-center p-3 bg-gray-50 rounded-xl">
                    <div className="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                    <span className="text-sm md:text-base text-gray-700">{amenity}</span>
                  </div>
                ),
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
/* Restored original + CE6 section */
import Script from "next/script"
import SEOBreadcrumbs from "@/components/seo-breadcrumbs"
import { AnimateOnScroll } from "@/components/animate-on-scroll"
import UIElements from "@/components/ui-elements"
import {
  DynamicHero,
  DynamicAmenities,
  DynamicGallery,
  DynamicCEO,
  DynamicContact,
} from "@/components/dynamic-sections"

import AboutSection from "@/components/about-section"
import VisualDivider from "@/components/visual-divider"
import LocationSection from "@/components/location-section"
import PaymentSection from "@/components/payment-section"
import UnitDetailsSection from "@/components/unit-details-section"
import Footer from "@/components/footer"
import ScrollToTopButton from "@/components/scroll-to-top-button"
import CoveEdition6Section from "@/components/cove-edition-6-section"

// Schema.org structured data (identique à avant)
const structuredData = {
  "@context": "https://schema.org",
  "@type": "RealEstateListing",
  name: "COVE EDITION 5 by Imtiaz",
  description: "Premium luxury residences in Dubailand with infinity pool, panoramic views, and sophisticated design.",
  url: "https://coveedition5.com",
  image: "https://coveedition5.com/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg",
  address: {
    "@type": "PostalAddress",
    addressLocality: "Dubailand",
    addressRegion: "Dubai",
    addressCountry: "AE",
  },
  offers: {
    "@type": "Offer",
    priceCurrency: "AED",
    price: "700000",
    validFrom: "2025-01-01",
    availability: "https://schema.org/InStock",
  },
  amenityFeature: [
    { "@type": "LocationFeatureSpecification", name: "Infinity Pool", value: true },
    { "@type": "LocationFeatureSpecification", name: "Fitness Center", value: true },
    { "@type": "LocationFeatureSpecification", name: "Clubhouse", value: true },
    { "@type": "LocationFeatureSpecification", name: "24/7 Security", value: true },
  ],
  provider: { "@type": "Organization", name: "Palm Signature", url: "https://palmsignature.ae" },
  inLanguage: "en",
}

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col">
      <Script
        id="structured-data"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />

{/* Existing sections */}
      <DynamicHero locale="en" />
      <AboutSection />
      <VisualDivider
        imageSrc="/images/dubai-skyline-burj-khalifa-view.jpeg"
        altText="Dubai skyline with Burj Khalifa view"
        title="LUXURY LIVING IN DUBAI"
        subtitle="Experience the perfect blend of comfort, style, and sophistication"
        ctaText="Explore Amenities"
        ctaLink="#amenities"
        alignment="left"
      />
      <DynamicAmenities locale="en" />
      <DynamicGallery locale="en" />
      <VisualDivider
        imageSrc="/images/cove-edition-5-lateral-view.jpeg"
        altText="Cove Edition 5 lateral view at sunset"
        title="PRIME LOCATION"
        subtitle="Strategically positioned for the ultimate Dubai lifestyle"
        ctaText="Discover Location"
        ctaLink="#location"
        alignment="right"
      />
      <LocationSection />
      <PaymentSection />

{/* Unit details */}
      <AnimateOnScroll animation="fade-up">
        <UnitDetailsSection />
      </AnimateOnScroll>

{/* CEO */}
      <DynamicCEO locale="en" />

{/* --- New Cove Edition 6 Section --- */}
      <CoveEdition6Section locale="en" />

{/* Contact */}
      <DynamicContact locale="en" />
      <Footer />
      <ScrollToTopButton />
    </main>
  )
}
[V0_FILE]typescriptreact:file="app/fr/page.tsx" isEdit="true" isMerged="true"
import SEOBreadcrumbs from "@/components/seo-breadcrumbs"
import { AnimateOnScroll } from "@/components/animate-on-scroll"
import UIElements from "@/components/ui-elements"
import {
  DynamicHero,
  DynamicAmenities,
  DynamicGallery,
  DynamicCEO,
  DynamicContact,
} from "@/components/dynamic-sections"

export default function HomeFR() {
  return (
    <main className="flex min-h-screen flex-col">
      <SEOBreadcrumbs />

{/* Nouvelle section CE6 */}
      <CoveEdition6Section locale="fr" />

<DynamicContact locale="fr" />
      <Footer />
      <ScrollToTopButton />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import LanguageSwitcher from "./language-switcher"

interface FooterProps {
  locale?: string
}

export default function Footer({ locale = "en" }: FooterProps) {
  const [expandedSection, setExpandedSection] = useState<string | null>(null)

const toggleSection = (section: string) => {
    if (expandedSection === section) {
      setExpandedSection(null)
    } else {
      setExpandedSection(section)
    }
  }

const footerSections =
    locale === "fr"
      ? [
          {
            id: "shop",
            title: "Découvrir et Acheter",
            links: [
              { text: "Studios", href: "#units" },
              { text: "Appartements 1 Chambre", href: "#units" },
              { text: "Appartements 2 Chambres", href: "#units" },
              { text: "Plans de Paiement", href: "#payment" },
              { text: "Équipements", href: "#amenities" },
            ],
          },
          {
            id: "services",
            title: "Services",
            links: [
              { text: "Compte Palm Signature", href: "https://palmsignature.ae" },
              { text: "Gestion Immobilière", href: "https://palmsignature.ae" },
              { text: "Conseil en Investissement", href: "https://palmsignature.ae" },
              { text: "Services de Relocalisation", href: "https://palmsignature.ae" },
            ],
          },
          {
            id: "company",
            title: "Palm Signature",
            links: [
              { text: "Actualités", href: "https://palmsignature.ae" },
              { text: "Direction", href: "https://palmsignature.ae" },
              { text: "Carrières", href: "https://palmsignature.ae" },
              { text: "Éthique & Conformité", href: "https://palmsignature.ae" },
              { text: "Contactez-nous", href: "#contact" },
            ],
          },
          {
            id: "values",
            title: "Valeurs",
            links: [
              { text: "Accessibilité", href: "https://palmsignature.ae" },
              { text: "Environnement", href: "https://palmsignature.ae" },
              { text: "Confidentialité", href: "/privacy-policy" },
              { text: "Responsabilité Fournisseur", href: "https://palmsignature.ae" },
            ],
          },
        ]
      : [
          {
            id: "shop",
            title: "Shop and Learn",
            links: [
              { text: "Studios", href: "#units" },
              { text: "1 Bedroom Apartments", href: "#units" },
              { text: "2 Bedroom Apartments", href: "#units" },
              { text: "Payment Plans", href: "#payment" },
              { text: "Amenities", href: "#amenities" },
            ],
          },
          {
            id: "services",
            title: "Services",
            links: [
              { text: "Palm Signature Account", href: "https://palmsignature.ae" },
              { text: "Property Management", href: "https://palmsignature.ae" },
              { text: "Investment Advisory", href: "https://palmsignature.ae" },
              { text: "Relocation Services", href: "https://palmsignature.ae" },
            ],
          },
          {
            id: "company",
            title: "Palm Signature",
            links: [
              { text: "Newsroom", href: "https://palmsignature.ae" },
              { text: "Leadership", href: "https://palmsignature.ae" },
              { text: "Careers", href: "https://palmsignature.ae" },
              { text: "Ethics & Compliance", href: "https://palmsignature.ae" },
              { text: "Contact Us", href: "#contact" },
            ],
          },
          {
            id: "values",
            title: "Values",
            links: [
              { text: "Accessibility", href: "https://palmsignature.ae" },
              { text: "Environment", href: "https://palmsignature.ae" },
              { text: "Privacy", href: "/privacy-policy" },
              { text: "Supplier Responsibility", href: "https://palmsignature.ae" },
            ],
          },
        ]

const investSection =
    locale === "fr"
      ? {
          id: "investir",
          title: "Investir à Dubaï",
          links: [
            { text: "Investir dans l'immobilier à Dubaï", href: "https://palmsignature.ae" },
            { text: "Guide pour investisseurs UK & US", href: "https://palmsignature.ae" },
            { text: "Créer une entreprise à Dubaï", href: "https://palmsignature.ae" },
            { text: "Location immobilière à Dubaï", href: "https://palmsignature.ae" },
            { text: "Visa Doré de Résidence", href: "https://palmsignature.ae" },
          ],
        }
      : {
          id: "investir",
          title: "Invest in Dubai",
          links: [
            { text: "Invest in Dubai Real Estate", href: "https://palmsignature.ae" },
            { text: "UK & US Investors Guide", href: "https://palmsignature.ae" },
            { text: "Start a Company in Dubai", href: "https://palmsignature.ae" },
            { text: "Property Rental in Dubai", href: "https://palmsignature.ae" },
            { text: "Golden Visa Residence", href: "https://palmsignature.ae" },
          ],
        }

return (
    <footer className="bg-[#f5f5f7] text-[#1d1d1f]">
      {/* Mobile Footer */}
      <div className="md:hidden">
        <div className="container mx-auto px-4 py-8">
          {/* SEO Keywords Links - Mobile */}
          <div className="mb-8 pb-6 border-b border-[#d2d2d7]">
            <div className="flex flex-wrap gap-x-3 gap-y-3 justify-center text-[12px] text-[#424245]">
              {locale === "fr" ? (
                <>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Appartements de Luxe Dubaï
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Studios Dubailand
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Investisseurs Français Dubaï
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Plans de Paiement Dubaï
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Acheter Appartement Dubaï
                  </a>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 5 Imtiaz
                  </a>
                  <a href="#cove-edition-6" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 6 by Imtiaz
                  </a>
                </>
              ) : (
                <>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Luxury Apartments Dubai
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Studio Apartments Dubailand
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    UK Investors Dubai Property
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Dubai Property Payment Plans
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Buy Apartment Dubai
                  </a>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 5 Imtiaz
                  </a>
                  <a href="#cove-edition-6" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 6 by Imtiaz
                  </a>
                </>
              )}
            </div>
          </div>

{footerSections.map((section) => (
            <div key={section.id} className="border-b border-[#d2d2d7]">
              <button
                onClick={() => toggleSection(section.id)}
                className="flex w-full items-center justify-between py-4 text-sm font-medium"
              >
                {section.title}
                <span className="text-[#86868b]">{expandedSection === section.id ? "−" : "+"}</span>
              </button>
              {expandedSection === section.id && (
                <ul className="mb-3 space-y-2 pl-0">
                  {section.links.map((link, i) => (
                    <li key={i}>
                      <Link href={link.href} className="block py-1.5 text-sm text-[#424245] hover:text-[#1d1d1f]">
                        {link.text}
                      </Link>
                    </li>
                  ))}
                </ul>
              )}
            </div>
          ))}

{/* Invest in Dubai - Mobile */}
          <div className="border-b border-[#d2d2d7]">
            <button
              onClick={() => toggleSection("investir")}
              className="flex w-full items-center justify-between py-4 text-sm font-medium"
            >
              {investSection.title}
              <span className="text-[#86868b]">{expandedSection === "investir" ? "−" : "+"}</span>
            </button>
            {expandedSection === "investir" && (
              <ul className="mb-3 space-y-2 pl-0">
                {investSection.links.map((link, i) => (
                  <li key={i}>
                    <a href={link.href} className="text-sm text-[#424245] hover:text-[#1d1d1f]">
                      {link.text}
                    </a>
                  </li>
                ))}
              </ul>
            )}
          </div>
        </div>
      </div>

{/* Desktop Footer */}
      <div className="hidden md:block">
        <div className="container mx-auto px-6 py-12">
          {/* SEO Keywords Links */}
          <div className="mb-10 pb-8 border-b border-[#d2d2d7]">
            <div className="flex flex-wrap gap-x-4 gap-y-2 justify-center text-[11px] text-[#424245]">
              {locale === "fr" ? (
                <>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Appartements de Luxe Dubaï
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Studios Dubailand
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Appartements 1 Chambre Dubaï
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Appartements 2 Chambres Dubaï
                  </a>
                  <a href="#amenities" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Résidences avec Piscine à Débordement
                  </a>
                  <a href="#location" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Propriété Dubailand
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Plans de Paiement Immobilier Dubaï
                  </a>
                  <a href="#gallery" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Immobilier de Luxe Dubaï
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Acheter Appartement Dubaï
                  </a>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Imtiaz Developments Dubaï
                  </a>
                  <a href="#amenities" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Équipements Premium Dubaï
                  </a>
                  <a href="#location" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Emplacement Stratégique Dubaï
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Plan de Paiement Post-livraison
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Appartements Meublés Dubaï
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Investisseurs Français Dubaï
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Investissement Immobilier Dubaï
                  </a>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 5 Imtiaz
                  </a>
                  <a href="#location" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Immobilier Dubaï pour Expatriés
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Investissement Immobilier Sans Impôt
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Propriétés Sur Plan Dubaï
                  </a>
                  <a href="#cove-edition-6" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 6 by Imtiaz
                  </a>
                </>
              ) : (
                <>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Luxury Apartments Dubai
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Studio Apartments Dubailand
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    1 Bedroom Apartments Dubai
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    2 Bedroom Apartments Dubai
                  </a>
                  <a href="#amenities" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Infinity Pool Residences
                  </a>
                  <a href="#location" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Dubailand Property
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Dubai Property Payment Plans
                  </a>
                  <a href="#gallery" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Luxury Real Estate Dubai
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Buy Apartment Dubai
                  </a>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Imtiaz Developments Dubai
                  </a>
                  <a href="#amenities" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Premium Amenities Dubai
                  </a>
                  <a href="#location" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Strategic Location Dubai
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Post Handover Payment Plan
                  </a>
                  <a href="#units" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Furnished Apartments Dubai
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    British Investors Dubai
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Dubai Property Investment
                  </a>
                  <a href="#about" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 5 Imtiaz
                  </a>
                  <a href="#location" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Dubai Real Estate for Expats
                  </a>
                  <a href="#payment" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Tax-Free Property Investment
                  </a>
                  <a href="#contact" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Dubai Off-Plan Properties
                  </a>
                  <a href="#cove-edition-6" className="hover:text-[#1d1d1f] hover:underline transition-colors">
                    Cove Edition 6 by Imtiaz
                  </a>
                </>
              )}
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-5 gap-8">
            {/* Investment in Dubai section */}
            <div>
              <h3 className="mb-4 text-xs font-medium">{investSection.title}</h3>
              <ul className="space-y-2">
                {investSection.links.map((link, i) => (
                  <li key={i}>
                    <a href={link.href} className="text-xs text-[#424245] hover:text-[#1d1d1f]">
                      {link.text}
                    </a>
                  </li>
                ))}
              </ul>
            </div>

{footerSections.map((section) => (
              <div key={section.id}>
                <h3 className="mb-4 text-xs font-medium">{section.title}</h3>
                <ul className="space-y-2">
                  {section.links.map((link, i) => (
                    <li key={i}>
                      <Link href={link.href} className="text-xs text-[#424245] hover:text-[#1d1d1f]">
                        {link.text}
                      </Link>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </div>

{/* Legal Footer - Both Mobile and Desktop - Apple Style */}
      <div className="border-t border-[#d2d2d7] bg-[#FFF]">
        <div className="container mx-auto px-4 md:px-6 py-5 bg-[#FFF]">
          {/* Palm Signature branding bar - Apple-style redesign */}
          <div className="flex flex-col md:flex-row justify-between items-center py-4 md:py-5 border-b border-[#d2d2d7]">
            <div className="flex items-center mb-4 md:mb-0">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 4477 3718"
                fill="none"
                className="h-6 w-auto mr-2 text-[#1d1d1f] md:h-5"
              >
                <path
                  d="M984.944 895.681C656.599 1175.61 447.7 1567.75 447.7 2016.48C447.7 2374.02 582.103 2696.97 803.26 2955.38C862.303 3024.58 927.492 3089.09 997.89 3148.27L998.095 3148.03C1060.97 3200.83 1128.04 3249.52 1198.67 3293.7C1097.14 3405.06 996.699 3517.51 897.433 3630.95C821.7 3580 749.576 3524.8 681.537 3465.7L680.721 3464.99C675.559 3460.49 670.399 3455.99 665.286 3451.44C633.948 3423.67 603.501 3395.05 573.994 3365.64C566.949 3358.61 559.958 3351.54 553.021 3344.43C213.408 2996.15 3.67405 2539.33 0.0484313 2029.91L0 2016.48C0 1447.53 256.997 943.355 665.366 581.444C670.457 576.915 675.595 572.436 680.735 567.955L681.536 567.256C1088.34 213.893 1641.14 0 2238.5 0C2835.86 0 3388.66 213.893 3795.46 567.257L3796.34 568.025C3801.46 572.484 3806.62 576.982 3811.68 581.488C4220.02 943.396 4477 1447.55 4477 2016.48C4477 2531.63 4266.31 2993.67 3923.33 3345.1C3916.61 3351.99 3909.83 3358.83 3903.01 3365.64C3873.51 3395.04 3843.08 3423.64 3811.76 3451.4C3806.37 3456.2 3800.94 3460.98 3795.49 3465.73C3727.22 3525.04 3654.83 3580.41 3578.81 3631.51C3479.64 3518.33 3379.12 3405.94 3277.33 3294.43C3348.32 3250.08 3415.74 3201.14 3478.92 3148.05L3479.11 3148.27C3556.69 3083.05 3627.95 3011.35 3691.63 2934.05C3902.06 2679.25 4029.3 2364.12 4029.3 2016.48C4029.3 1567.74 3820.4 1175.61 3492.05 895.674C3487.75 891.991 3483.44 888.329 3479.11 884.686C3438.19 850.49 3395.43 818.054 3351.07 787.405C3048.85 576.304 2664.71 448.106 2238.5 448.106C1809.47 448.106 1423.06 577.98 1119.94 791.567C1077.72 820.989 1037 852.073 997.924 884.726C993.589 888.37 989.24 891.996 984.944 895.681Z"
                  fill="currentColor"
                ></path>
                <path
                  fillRule="evenodd"
                  clipRule="evenodd"
                  d="M2014.75 2444.97C1844.11 2613.25 1676.21 2784.29 1511.11 2958.03C1428.84 2913.72 1353.38 2862.43 1285.63 2805.39L1285.83 2805.14C1239.23 2765.96 1196.3 2724.19 1157.33 2680.18C1329.5 2498.32 1504.66 2319.34 1682.75 2143.32C1426.56 2156.47 1170.72 2178.71 915.713 2210.05C902.322 2146.73 895.4 2082 895.4 2016.48C895.4 1928.11 908.243 1840.98 932.702 1756.72C1175.63 1728.44 1419.24 1708.08 1663.15 1695.63C1512.92 1561.14 1361.19 1429 1208.2 1299.42C1229.9 1277.58 1252.6 1256.41 1276.25 1235.95L1285.83 1227.81C1374.57 1152.6 1476.28 1087.38 1588.79 1035.18C1731.98 1157.79 1874.02 1282.56 2014.75 1409.35V911.401C2087.06 901.43 2161.77 896.213 2238.5 896.213C2315.3 896.213 2390.07 901.439 2462.45 911.428V1408.37C2602.78 1282.23 2744.72 1157.83 2888.23 1035.19C3000.74 1087.38 3102.47 1152.57 3191.2 1227.78L3200.74 1235.95C3224.43 1256.43 3247.16 1277.64 3268.89 1299.51L3259.82 1307.19C3109.17 1434.69 2960.25 1564.17 2813.13 1695.59C3057.28 1708.02 3301.13 1728.46 3544.29 1756.77C3568.76 1840.97 3581.6 1928.1 3581.6 2016.48C3581.6 2082.01 3574.69 2146.73 3561.32 2210.03C3305.58 2178.6 3049 2156.33 2792.07 2143.2C2970.56 2319.72 3146.24 2499.2 3318.71 2681.26C3280 2724.87 3237.39 2766.28 3191.17 2805.14L3191.35 2805.36C3123.24 2862.67 3047.32 2914.19 2964.51 2958.68C2799.98 2785.66 2632.51 2615.05 2462.45 2447.18V3717.45H2014.75V2444.97ZM2555.07 1885.23L2238.5 1568.37L1921.93 1885.23L2238.5 2202.09L2555.07 1885.23Z"
                  fill="currentColor"
                ></path>
              </svg>
              <span className="text-[#1d1d1f] text-xs font-semibold ml-1">
                {locale === "fr" ? "Propriété proposée par Palm Signature" : "Property offered by Palm Signature"}
              </span>
            </div>
            <div className="flex items-center">
              <div className="hidden md:flex items-center text-[11px] text-[#424245] py-1">
                <LanguageSwitcher variant="footer" locale={locale} />
                <span className="mx-3"></span>
              </div>
              <a
                href="https://palmsignature.ae"
                target="_blank"
                rel="noopener noreferrer"
                className="text-xs text-blue-600 font-light hover:underline flex items-center"
              >
                {locale === "fr" ? "Visiter PalmSignature.ae" : "Visit PalmSignature.ae"}
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                  className="w-3 h-3 ml-1 mt-[1px]"
                >
                  <path
                    fillRule="evenodd"
                    d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
                    clipRule="evenodd"
                  />
                </svg>
              </a>
            </div>
          </div>

{/* Language selector for mobile - Apple style */}
          <div className="md:hidden flex justify-center py-4 border-b border-[#d2d2d7]">
            <LanguageSwitcher variant="footer" locale={locale} />
          </div>

{/* Copyright and links */}
          <div className="py-3 pt-4">
            <div className="flex flex-col md:flex-row md:items-center justify-between">
              <p className="text-[11px] text-[#86868b] font-light leading-normal mb-2 md:mb-0">
                Copyright © {new Date().getFullYear()} Palm Signature.{" "}
                {locale === "fr" ? "Tous droits réservés." : "All rights reserved."}
              </p>
              <div className="flex flex-wrap gap-x-3 gap-y-1">
                <Link href="/privacy-policy" className="text-[11px] text-[#424245] hover:underline">
                  {locale === "fr" ? "Politique de Confidentialité" : "Privacy Policy"}
                </Link>
                <Link href="/terms-of-use" className="text-[11px] text-[#424245] hover:underline">
                  {locale === "fr" ? "Conditions d'Utilisation" : "Terms of Use"}
                </Link>
                <Link href="/sitemap" className="text-[11px] text-[#424245] hover:underline">
                  {locale === "fr" ? "Plan du Site" : "Site Map"}
                </Link>
              </div>
            </div>

<div className="mt-2.5 space-y-2">
              <p className="text-[11px] text-[#86868b] font-light leading-normal">
                Palmera Signature Real Estate LLC – License No. 1486676 – Registered with RERA No. 49920
              </p>

<p className="text-[11px] text-[#86868b] font-light leading-normal">
                {locale === "fr"
                  ? "Les prix indiqués sont sujets à modification sans préavis et peuvent varier en fonction des options et des étages. Les images sont à titre illustratif uniquement."
                  : "Prices shown are subject to change without notice and may vary depending on options and floors. Images are for illustrative purposes only."}
              </p>

<p className="text-[11px] text-[#86868b] font-light leading-normal">
                {locale === "fr"
                  ? "Nous sommes partenaires des meilleurs promoteurs immobiliers des Émirats Arabes Unis et mandatés directement par eux. Les clients ne paient aucune commission à l'agence Palm Signature."
                  : "We are partners with the best real estate developers in the United Arab Emirates and commissioned directly by them. Clients do not pay any commission to Palm Signature agency."}
              </p>
            </div>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/scroll-header.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Menu, X, Home, Info, Palette, ImageIcon, MapPin, CreditCard, Building, Mail } from "lucide-react"
import LanguageSwitcher from "./language-switcher"

interface ScrollHeaderProps {
  locale?: string
}

export default function ScrollHeader({ locale = "en" }: ScrollHeaderProps) {
  const [scrolled, setScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

useEffect(() => {
    // Only run on the client side
    if (typeof window === "undefined") return

const handleScroll = () => {
      if (window.scrollY > 100) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

// Fermer le menu mobile lors du défilement
  useEffect(() => {
    // Only run on the client side
    if (typeof window === "undefined") return

const handleScrollForMenu = () => {
      if (mobileMenuOpen) {
        setMobileMenuOpen(false)
      }
    }

window.addEventListener("scroll", handleScrollForMenu)
    return () => window.removeEventListener("scroll", handleScrollForMenu)
  }, [mobileMenuOpen])

// Empêcher le défilement du body quand le menu est ouvert
  useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = ""
    }
    return () => {
      document.body.style.overflow = ""
    }
  }, [mobileMenuOpen])

const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen)
  }

const menuItems =
    locale === "fr"
      ? [
          { href: "#", label: "Accueil", icon: <Home className="h-4 w-4 mr-3" /> },
          { href: "#about", label: "À propos", icon: <Info className="h-4 w-4 mr-3" /> },
          { href: "#amenities", label: "Équipements", icon: <Palette className="h-4 w-4 mr-3" /> },
          { href: "#gallery", label: "Galerie", icon: <ImageIcon className="h-4 w-4 mr-3" /> },
          { href: "#location", label: "Emplacement", icon: <MapPin className="h-4 w-4 mr-3" /> },
          { href: "#payment", label: "Paiement", icon: <CreditCard className="h-4 w-4 mr-3" /> },
          { href: "#units", label: "Unités", icon: <Building className="h-4 w-4 mr-3" /> },
          { href: "#contact", label: "Contact", icon: <Mail className="h-4 w-4 mr-3" /> },
          { href: "#cove-edition-6", label: "CE6", icon: <Building className="h-4 w-4 mr-3" /> },
        ]
      : [
          { href: "#", label: "Home", icon: <Home className="h-4 w-4 mr-3" /> },
          { href: "#about", label: "About", icon: <Info className="h-4 w-4 mr-3" /> },
          { href: "#amenities", label: "Amenities", icon: <Palette className="h-4 w-4 mr-3" /> },
          { href: "#gallery", label: "Gallery", icon: <ImageIcon className="h-4 w-4 mr-3" /> },
          { href: "#location", label: "Location", icon: <MapPin className="h-4 w-4 mr-3" /> },
          { href: "#payment", label: "Payment", icon: <CreditCard className="h-4 w-4 mr-3" /> },
          { href: "#units", label: "Units", icon: <Building className="h-4 w-4 mr-3" /> },
          { href: "#contact", label: "Contact", icon: <Mail className="h-4 w-4 mr-3" /> },
          { href: "#cove-edition-6", label: "CE6", icon: <Building className="h-4 w-4 mr-3" /> },
        ]

return (
    <>
      <header
        className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-neutral-100 h-14 transition-all duration-300 ${
          scrolled ? "top-0" : "top-7"
        }`}
      >
        <div className="container mx-auto px-4 h-full flex items-center justify-between">
          <div className="flex items-center">
            <a
              href="#"
              onClick={(e) => {
                e.preventDefault()
                window.scrollTo({ top: 0, behavior: "smooth" })
              }}
              className="font-medium text-sm tracking-tight hover:text-neutral-500 transition-colors relative overflow-hidden group"
            >
              <span className="inline-block transition-transform duration-300 group-hover:-translate-y-full">
                COVE EDITION 5
              </span>
              <span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0">
                COVE EDITION 5
              </span>
            </a>
          </div>
          <nav className="hidden md:flex items-center absolute left-1/2 transform -translate-x-1/2">
            <ul className="flex space-x-8">
              <li>
                <a href="#about" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "À propos" : "About"}
                </a>
              </li>
              <li>
                <a href="#amenities" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Équipements" : "Amenities"}
                </a>
              </li>
              <li>
                <a href="#gallery" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Galerie" : "Gallery"}
                </a>
              </li>
              <li>
                <a href="#location" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Emplacement" : "Location"}
                </a>
              </li>
              <li>
                <a href="#payment" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Paiement" : "Payment"}
                </a>
              </li>
              <li>
                <a href="#contact" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Contact" : "Contact"}
                </a>
              </li>
              <li>
                <a href="#cove-edition-6" className="text-xs font-bold hover:text-neutral-500 transition-colors">
                  CE6
                </a>
              </li>
            </ul>
          </nav>
          <div className="flex items-center gap-3">
            <LanguageSwitcher locale={locale} />
            <a
              href="#contact"
              className="rounded-full px-5 py-2 md:px-4 md:py-1.5 text-sm md:text-xs bg-blue-600 hover:bg-blue-700 text-white font-medium transition-all duration-300 hover:scale-105 hover:shadow-md"
            >
              {locale === "fr" ? "Nous Contacter" : "Enquire Now"}
            </a>
            <button
              className="md:hidden flex items-center justify-center w-10 h-10 bg-neutral-100 hover:bg-neutral-200 rounded-full transition-all duration-300 hover:shadow-md"
              onClick={toggleMobileMenu}
              aria-label="Toggle mobile menu"
            >
              <div className="relative w-5 h-5">
                <Menu
                  className={`absolute inset-0 h-5 w-5 transition-all duration-300 ${
                    mobileMenuOpen ? "opacity-0 rotate-90 scale-0" : "opacity-100 rotate-0 scale-100"
                  }`}
                />
                <X
                  className={`absolute inset-0 h-5 w-5 transition-all duration-300 ${
                    mobileMenuOpen ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-0"
                  }`}
                />
              </div>
            </button>
          </div>
        </div>
      </header>

{/* Mobile Menu Overlay with Animation */}
      <div
        className={`fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300 md:hidden ${
          mobileMenuOpen ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
        onClick={() => setMobileMenuOpen(false)}
      />

<div
        className={`fixed right-0 top-0 bottom-0 z-40 w-[80%] max-w-sm bg-white shadow-xl transition-transform duration-500 ease-in-out transform md:hidden ${
          mobileMenuOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex flex-col h-full pt-20 pb-6 px-6">
          <nav className="flex-1">
            <ul className="space-y-3">
              {menuItems.map((item, index) => (
                <li
                  key={index}
                  className={`transform transition-all duration-300 ${
                    mobileMenuOpen ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"
                  }`}
                  style={{ transitionDelay: `${index * 50}ms` }}
                >
                  <a
                    href={item.href}
                    className="flex items-center text-lg font-medium py-3 px-4 rounded-lg hover:bg-neutral-50 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {item.icon}
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
          <div className="mt-auto pt-6 border-t border-neutral-100">
            <Button
              className={`w-full rounded-full py-6 text-base bg-blue-600 hover:bg-blue-700 text-white transition-all duration-500 ${
                mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
              }`}
              style={{ transitionDelay: "400ms" }}
              onClick={() => {
                setMobileMenuOpen(false)
                window.location.href = "#contact"
              }}
            >
              {locale === "fr" ? "Nous Contacter" : "Enquire Now"}
            </Button>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/cove-edition-6-section.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import Image from "next/image"
import { Button } from "@/components/ui/button"
import { PhoneCall } from "lucide-react"

interface Props {
  locale?: "en" | "fr"
}

const copy = {
  en: {
    title: "COVE EDITION 6 by Imtiaz",
    subtitle: "Fully-furnished residences in Dubailand",
    price: "Starting from 700 000 AED",
    payment: "5-year payment plan • 3 years post-handover",
    cta: "Enquire via WhatsApp",
    features: [
      "Infinity rooftop pool",
      "Family-friendly community",
      "Future metro connectivity",
      "Studios, 1 & 2-bed apartments",
      "Delivered fully furnished & equipped",
    ],
  },
  fr: {
    title: "COVE EDITION 6 by Imtiaz",
    subtitle: "Résidences entièrement meublées à Dubailand",
    price: "À partir de 700 000 AED",
    payment: "Plan de paiement sur 5 ans • 3 ans post-handover",
    cta: "Demander via WhatsApp",
    features: [
      "Piscine à débordement sur le toit",
      "Communauté familiale",
      "Future connexion métro",
      "Studios, 1 & 2 chambres",
      "Livré entièrement meublé & équipé",
    ],
  },
}

export default function CoveEdition6Section({ locale = "en" }: Props) {
  const t = copy[locale]

return (
    <section id="cove-edition-6" className="w-full bg-gray-50 py-16 lg:py-24 px-4 sm:px-6 lg:px-8">
      <div className="mx-auto max-w-5xl text-center space-y-6">
        <h2 className="text-3xl sm:text-4xl font-extrabold tracking-tight">{t.title}</h2>
        <p className="text-lg text-muted-foreground">{t.subtitle}</p>

{/* Highlight cards */}
        <div className="flex flex-col sm:flex-row sm:justify-center gap-4 mt-6">
          <div className="rounded-lg bg-white px-6 py-4">
            <span className="font-medium">{t.price}</span>
          </div>
          <div className="rounded-lg bg-white px-6 py-4">
            <span className="font-medium">{t.payment}</span>
          </div>
        </div>

{/* Feature list */}
        <ul className="grid grid-cols-1 sm:grid-cols-2 gap-3 text-left mt-8">
          {t.features.map((f) => (
            <li key={f} className="flex items-start gap-2 before:content-['✓'] before:text-primary">
              {f}
            </li>
          ))}
        </ul>

{/* Representative image */}
        <div className="relative w-full h-60 sm:h-96 mt-10">
          <Image
            src="/images/cove-edition-6-front-view.jpeg"
            alt="Cove Edition 6 front view"
            fill
            className="object-cover rounded-lg"
          />
        </div>

{/* CTA Buttons */}
        <div className="mt-10 flex flex-col sm:flex-row gap-4 justify-center">
          <Button
            size="lg"
            variant="outline"
            className="rounded-full px-8 py-6 text-base font-medium"
            onClick={() => {
              const contactSection = document.getElementById("contact")
              if (contactSection) {
                contactSection.scrollIntoView({ behavior: "smooth" })
              }
            }}
          >
            {locale === "fr" ? "Contact" : "Contact"}
          </Button>
          <Button asChild size="lg" className="rounded-full px-8 py-6 text-base font-medium">
            <a
              href={`https://wa.me/971581998661?text=${encodeURIComponent(
                locale === "fr"
                  ? "Bonjour, je suis intéressé(e) par COVE EDITION 6 by Imtiaz. Pouvez-vous me fournir plus d'informations ?"
                  : "Hello, I am interested in COVE EDITION 6 by Imtiaz. Can you provide more information?",
              )}`}
              target="_blank"
              rel="noopener noreferrer"
            >
              <PhoneCall className="mr-2 h-5 w-5" />
              WhatsApp
            </a>
          </Button>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/cove-edition-6/page.tsx" isMerged="true"
import Script from "next/script"
import SEOBreadcrumbs from "@/components/seo-breadcrumbs"
import UIElements from "@/components/ui-elements"
import CE6Hero from "@/components/ce6/hero"
import CE6About from "@/components/ce6/about"
import CE6Amenities from "@/components/ce6/amenities"
import CE6Gallery from "@/components/ce6/gallery"
import CE6Location from "@/components/ce6/location"
import CE6Payment from "@/components/ce6/payment"
import CE6Units from "@/components/ce6/units"
import CE6Contact from "@/components/ce6/contact"
import Footer from "@/components/footer"
import ScrollToTopButton from "@/components/scroll-to-top-button"
import VisualDivider from "@/components/visual-divider"

// Schema.org structured data for CE6
const structuredData = {
  "@context": "https://schema.org",
  "@type": "RealEstateListing",
  name: "COVE EDITION 6 by Imtiaz",
  description:
    "Premium fully-furnished residences in Dubailand with infinity pool, family-friendly amenities, and modern design.",
  url: "https://coveedition5.com/cove-edition-6",
  image: "https://coveedition5.com/images/cove-edition-6-front-view.jpeg",
  address: {
    "@type": "PostalAddress",
    addressLocality: "Dubailand",
    addressRegion: "Dubai",
    addressCountry: "AE",
  },
  offers: {
    "@type": "Offer",
    priceCurrency: "AED",
    price: "700000",
    validFrom: "2025-01-01",
    availability: "https://schema.org/InStock",
  },
  amenityFeature: [
    { "@type": "LocationFeatureSpecification", name: "Infinity Pool", value: true },
    { "@type": "LocationFeatureSpecification", name: "Kids Playground", value: true },
    { "@type": "LocationFeatureSpecification", name: "Fitness Center", value: true },
    { "@type": "LocationFeatureSpecification", name: "24/7 Security", value: true },
  ],
  provider: { "@type": "Organization", name: "Palm Signature", url: "https://palmsignature.ae" },
  inLanguage: "en",
}

export const metadata = {
  title: "COVE EDITION 6 by Imtiaz | Fully-Furnished Residences in Dubailand",
  description:
    "Discover COVE EDITION 6 by Imtiaz - Premium fully-furnished residences in Dubailand with infinity pool, family amenities, and 5-year payment plan. Starting from 700,000 AED.",
  keywords:
    "Cove Edition 6, Imtiaz Developments, Dubailand property, fully furnished apartments Dubai, family residences Dubai, Dubai real estate investment, infinity pool, Dubai property, post handover payment plan",
  openGraph: {
    title: "COVE EDITION 6 by Imtiaz | Fully-Furnished Residences in Dubailand",
    description:
      "Premium fully-furnished residences with infinity pool and family amenities. Starting from 700,000 AED with flexible payment plans.",
    images: [
      {
        url: "/images/cove-edition-6-front-view.jpeg",
        width: 1200,
        height: 630,
        alt: "Cove Edition 6 by Imtiaz - Fully-Furnished Residences in Dubailand",
      },
    ],
    locale: "en_US",
    type: "website",
    siteName: "Cove Edition 6",
  },
}

export default function CoveEdition6Page() {
  return (
    <main className="flex min-h-screen flex-col">
      <Script
        id="structured-data-ce6"
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />

<CE6Location />
      <CE6Payment />
      <CE6Units />
      <CE6Contact />
      <Footer />
      <ScrollToTopButton />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/hero.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"
import { ChevronDown } from "lucide-react"

export default function CE6Hero() {
  const [scrollY, setScrollY] = useState(0)

useEffect(() => {
    if (typeof window === "undefined") return

const handleScroll = () => {
      setScrollY(window.scrollY)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <section className="relative w-full h-screen overflow-hidden">
      {/* Background with parallax effect */}
      <div
        className="absolute inset-0 z-0"
        style={{
          transform: `translateY(${scrollY * 0.15}px)`,
          transition: "transform 0.1s linear",
        }}
      >
        <Image
          src="/images/cove-edition-6-front-view.jpeg"
          alt="Cove Edition 6 by Imtiaz - Fully-Furnished Residences in Dubailand"
          fill
          priority
          className="object-cover"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
      </div>

{/* Main content container */}
      <div className="relative z-10 h-full flex flex-col">
        {/* Top spacer */}
        <div className="h-24 md:h-32" />

{/* Tagline */}
          <p className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-medium text-white/90 max-w-3xl mx-auto mb-4 sm:mb-6 animate-fade-in-delay">
            Fully-Furnished Residences by Imtiaz in Dubailand
          </p>

{/* SEO-friendly subtitle */}
          <p className="text-base sm:text-lg font-medium text-white/80 max-w-2xl mx-auto mb-8 sm:mb-10 animate-fade-in-delay">
            Family-Friendly Design with Premium Amenities and Future Metro Connectivity
          </p>

{/* Key information with Apple-style layout */}
          <div className="w-full max-w-4xl mx-auto grid grid-cols-2 gap-6 sm:gap-12 mb-8 sm:mb-12 animate-fade-in-delay-2">
            <div className="flex flex-col items-center">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70">Starting from</p>
              <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium text-white mt-2">700,000 AED</p>
            </div>

<div className="flex flex-col items-center">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70">Payment Plan</p>
              <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium text-white mt-2">5 Years</p>
              <p className="text-xs sm:text-sm text-white/70 mt-2">(3 years post handover)</p>
            </div>
          </div>

{/* Special features */}
          <div className="w-full max-w-3xl mx-auto mb-8 sm:mb-12 animate-fade-in-delay-2">
            <div className="bg-white/10 backdrop-blur-md rounded-2xl p-6 border border-white/20">
              <p className="text-white font-medium mb-3">✨ Delivered Fully Furnished & Equipped</p>
              <p className="text-white/80 text-sm">Move-in ready with custom furniture and premium appliances</p>
            </div>
          </div>

{/* CTA buttons with Apple-style */}
          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 mt-4 sm:mt-6 animate-fade-in-delay-3 w-full sm:w-auto px-4 sm:px-0">
            <a
              href="#contact"
              className="rounded-full px-8 py-4 bg-white hover:bg-gray-200 text-black text-base font-medium w-full sm:min-w-[180px] shadow-sm transition-all text-center"
            >
              Contact Sales
            </a>
            <a
              href="#about"
              className="rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium w-full sm:min-w-[180px] transition-all text-center"
            >
              Explore
            </a>
          </div>
        </div>

{/* Bottom section with scroll indicator */}
        <div className="h-16 sm:h-24 flex justify-center items-end pb-8 sm:pb-12 animate-bounce-slow">
          <a
            href="#about"
            className="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 backdrop-blur-md hover:bg-white/20 transition-colors duration-300"
            aria-label="Scroll to learn more"
          >
            <ChevronDown className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/about.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"

export default function CE6About() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

return (
    <section id="about" ref={sectionRef} className="py-24 md:py-40 overflow-hidden">
      <div className="container mx-auto px-4">
        <div
          className={`max-w-4xl mx-auto text-center mb-24 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">FAMILY. COMFORT. CONVENIENCE.</h2>
          <p className="text-xl md:text-2xl text-neutral-500">
            Introducing Cove Edition 6 by Imtiaz — a family-focused community designed for modern living in the heart of
            Dubailand. Every home comes fully furnished with thoughtfully selected furniture and world-class amenities.
          </p>
        </div>

<div className="mb-32">
          {/* First section with full-width image followed by text */}
          <div
            className={`relative w-full h-[80vh] mb-24 transition-all duration-1000 delay-300 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
          >
            <Image
              src="/images/cove-edition-6-facade-balconies.jpeg"
              alt="Cove Edition 6 Facade with Balconies"
              fill
              className="object-cover"
            />
          </div>

<div className="max-w-7xl mx-auto px-4 mb-32">
            <div
              className={`transition-all duration-1000 delay-500 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
            >
              <h3 className="text-3xl md:text-5xl font-semibold mb-8">DESIGNED FOR FAMILIES</h3>
              <p className="text-lg md:text-xl text-neutral-500 mb-8 max-w-3xl">
                Cove Edition 6 prioritizes family living with safe play areas, community spaces, and thoughtfully
                designed apartments that grow with your family. Each residence is delivered fully furnished, making your
                move effortless.
              </p>
              <a
                href="#contact"
                className="inline-block mt-6 rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium transition-all"
              >
                Contact Sales
              </a>
            </div>
          </div>

{/* Second section with full-width image followed by text */}
          <div
            className={`relative w-full h-[80vh] mt-32 mb-24 transition-all duration-1000 delay-700 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
          >
            <Image
              src="/images/cove-edition-6-side-view.jpeg"
              alt="Cove Edition 6 Side View"
              fill
              className="object-cover"
            />
          </div>

<div className="max-w-7xl mx-auto px-4">
            <div
              className={`transition-all duration-1000 delay-900 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
            >
              <h3 className="text-3xl md:text-5xl font-semibold mb-8">FULLY FURNISHED LIVING</h3>
              <p className="text-lg md:text-xl text-neutral-500 mb-8 max-w-3xl">
                Every apartment in Cove Edition 6 comes complete with custom-designed furniture, premium appliances, and
                elegant finishes. Simply bring your belongings and start living.
              </p>
              <p className="text-lg md:text-xl text-neutral-500 mb-8 max-w-3xl">
                Located in the vibrant Dubailand district with future metro connectivity, residents enjoy easy access to
                Dubai's key destinations while living in a peaceful, family-oriented community.
              </p>
              <a
                href="#contact"
                className="inline-block mt-6 rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium transition-all"
              >
                Contact Sales
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/amenities.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { Infinity, Dumbbell, Users, Building, Baby, Wifi, Shield, Car, TreePine, Gamepad2 } from "lucide-react"

export default function CE6Amenities() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const amenityCategories = [
    {
      title: "Family & Recreation",
      items: [
        { icon: <Baby className="h-6 w-6" />, name: "Kids' Playground" },
        { icon: <Gamepad2 className="h-6 w-6" />, name: "Game Room" },
        { icon: <TreePine className="h-6 w-6" />, name: "Landscaped Gardens" },
      ],
    },
    {
      title: "Wellness & Fitness",
      items: [
        { icon: <Infinity className="h-6 w-6" />, name: "Rooftop Infinity Pool" },
        { icon: <Dumbbell className="h-6 w-6" />, name: "Fitness Center" },
        { icon: <Users className="h-6 w-6" />, name: "Yoga Deck" },
      ],
    },
    {
      title: "Community & Social",
      items: [
        { icon: <Building className="h-6 w-6" />, name: "Community Clubhouse" },
        { icon: <Users className="h-6 w-6" />, name: "BBQ Areas" },
        { icon: <Building className="h-6 w-6" />, name: "Multi-purpose Hall" },
      ],
    },
    {
      title: "Services & Security",
      items: [
        { icon: <Shield className="h-6 w-6" />, name: "24/7 Security" },
        { icon: <Car className="h-6 w-6" />, name: "Covered Parking" },
        { icon: <Wifi className="h-6 w-6" />, name: "High-Speed Internet" },
      ],
    },
  ]

return (
    <section id="amenities" ref={sectionRef} className="py-32 md:py-40 bg-white">
      <div className="container mx-auto px-4">
        {/* Header */}
        <div
          className={`max-w-3xl mx-auto text-center mb-24 transition-all duration-1000 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">FAMILY AMENITIES</h2>
          <p className="text-xl md:text-2xl text-neutral-500">
            Thoughtfully designed amenities that bring families together and create lasting memories.
          </p>
        </div>

{/* Feature Highlight */}
        <div
          className={`py-16 px-8 md:px-16 bg-neutral-50 rounded-3xl mb-24 transition-all duration-1000 delay-500 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="max-w-4xl mx-auto text-center">
            <h3 className="text-3xl md:text-4xl font-semibold mb-6">FAMILY-FIRST COMMUNITY</h3>
            <p className="text-xl text-neutral-500 mb-8">
              Cove Edition 6 is designed with families in mind, offering safe spaces for children to play and grow while
              providing parents with peace of mind.
            </p>
            <div className="grid grid-cols-3 gap-8 text-center">
              <div>
                <p className="text-4xl font-semibold mb-2">15+</p>
                <p className="text-neutral-500">Family Amenities</p>
              </div>
              <div>
                <p className="text-4xl font-semibold mb-2">24/7</p>
                <p className="text-neutral-500">Security & Safety</p>
              </div>
              <div>
                <p className="text-4xl font-semibold mb-2">100%</p>
                <p className="text-neutral-500">Furnished & Ready</p>
              </div>
            </div>
          </div>
        </div>

{/* Call to Action */}
        <div
          className={`text-center max-w-2xl mx-auto transition-all duration-1000 delay-700 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h3 className="text-3xl font-semibold mb-6">EXPERIENCE FAMILY LIVING</h3>
          <p className="text-xl text-neutral-500 mb-8">
            Our sales team is available to show you how Cove Edition 6 can be the perfect home for your family.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <a
              href="#contact"
              className="rounded-full px-8 py-4 bg-blue-600 text-white text-base font-medium transition-all hover:bg-blue-700"
            >
              Contact Sales
            </a>
            <a
              href="#gallery"
              className="rounded-full px-8 py-4 bg-white border border-neutral-200 text-neutral-900 text-base font-medium transition-all hover:bg-neutral-50"
            >
              View Gallery
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/gallery.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import Image from "next/image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { X } from "lucide-react"

export default function CE6Gallery() {
  const [isVisible, setIsVisible] = useState(false)
  const [activeTab, setActiveTab] = useState("exterior")
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Handle body scroll lock when modal is open
  useEffect(() => {
    if (typeof document === "undefined") return

if (selectedImage) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

return () => {
      document.body.style.overflow = "auto"
    }
  }, [selectedImage])

const exteriorImages = [
    {
      src: "/images/cove-edition-6-front-view.jpeg",
      alt: "Cove Edition 6 Front View",
    },
    {
      src: "/images/cove-edition-6-side-view.jpeg",
      alt: "Cove Edition 6 Side View",
    },
    {
      src: "/images/cove-edition-6-facade-balconies.jpeg",
      alt: "Cove Edition 6 Facade with Balconies",
    },
    {
      src: "/images/cove-edition-6-aerial-view.jpeg",
      alt: "Cove Edition 6 Aerial View",
    },
  ]

const amenityImages = [
    {
      src: "/images/cove-edition-6-rooftop-pool.jpeg",
      alt: "Cove Edition 6 Rooftop Infinity Pool",
    },
    {
      src: "/images/modern-gym-equipment.png",
      alt: "Modern Fitness Center",
    },
    {
      src: "/images/luxury-clubhouse-lounge.png",
      alt: "Community Clubhouse",
    },
    {
      src: "/images/outdoor-bbq-dining.png",
      alt: "Outdoor BBQ and Dining Area",
    },
  ]

const openImage = (src: string) => {
    setSelectedImage(src)
  }

const closeImage = () => {
    setSelectedImage(null)
  }

return (
    <section id="gallery" ref={sectionRef} className="py-24 md:py-40 overflow-hidden">
      <div className="container mx-auto px-4">
        <div
          className={`max-w-4xl mx-auto text-center mb-24 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-8">GALLERY</h2>
          <p className="text-xl md:text-2xl text-neutral-600">
            Explore the beautiful architecture and premium amenities of Cove Edition 6.
          </p>
        </div>

<Tabs defaultValue="exterior" className="w-full" onValueChange={setActiveTab}>
          <div className="flex justify-center mb-16">
            <div className="bg-[#f5f5f7] p-1.5 rounded-full inline-flex">
              <TabsList className="bg-transparent p-0 flex space-x-1">
                <TabsTrigger
                  value="exterior"
                  className="px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:text-neutral-500 data-[state=inactive]:hover:text-neutral-800"
                >
                  Exterior
                </TabsTrigger>
                <TabsTrigger
                  value="amenities"
                  className="px-6 py-2 rounded-full text-sm font-medium transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:text-neutral-500 data-[state=inactive]:hover:text-neutral-800"
                >
                  Amenities
                </TabsTrigger>
              </TabsList>
            </div>
          </div>

<TabsContent value="amenities" className="mt-0">
            <div
              className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 transition-all duration-1000 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              {amenityImages.map((image, index) => (
                <div
                  key={index}
                  className="relative h-[200px] md:h-[300px] rounded-2xl overflow-hidden cursor-pointer"
                  onClick={() => openImage(image.src)}
                >
                  <Image
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    fill
                    className="object-cover transition-transform hover:scale-105 duration-700"
                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 25vw"
                  />
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>

<div className="flex justify-center mt-16">
          <a
            href="#contact"
            className="rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium transition-all"
          >
            Contact Sales
          </a>
        </div>
      </div>

import { useEffect, useRef, useState } from "react"
import { MapPin, Clock, ExternalLink } from "lucide-react"

export default function CE6Location() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const locationGroups = [
    {
      title: "Family Entertainment",
      locations: [
        { name: "Global Village", time: "05 mins" },
        { name: "IMG Worlds of Adventure", time: "12 mins" },
        { name: "Dubai Safari Park", time: "15 mins" },
      ],
    },
    {
      title: "Education & Healthcare",
      locations: [
        { name: "GEMS International School", time: "08 mins" },
        { name: "Mediclinic Parkview Hospital", time: "10 mins" },
        { name: "Academic City", time: "05 mins" },
      ],
    },
    {
      title: "Shopping & Lifestyle",
      locations: [
        { name: "Dubai Outlet Mall", time: "05 mins" },
        { name: "Dubai Mall", time: "24 mins" },
        { name: "Mall of the Emirates", time: "30 mins" },
      ],
    },
    {
      title: "Transportation",
      locations: [
        { name: "Dubai International Airport", time: "20 mins" },
        { name: "Future Metro Station", time: "03 mins" },
        { name: "Downtown Dubai", time: "24 mins" },
      ],
    },
  ]

return (
    <section id="location" ref={sectionRef} className="py-32 md:py-40 bg-white overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Apple-style header with large text */}
        <div
          className={`max-w-4xl mx-auto text-center mb-16 transition-all duration-1000 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-6">LOCATION</h2>
          <p className="text-xl md:text-2xl text-neutral-500">
            Perfectly positioned in Dubailand with future metro connectivity for families.
          </p>
        </div>

{/* Interactive Map */}
        <div
          className={`relative h-[500px] md:h-[600px] rounded-3xl overflow-hidden mb-24 transition-all duration-1000 delay-300 ${
            isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"
          }`}
        >
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3613.443719012883!2d55.379581576122064!3d25.086836877782236!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e5f65c37d045f53%3A0x321fa326566104f1!2sCove%20Edition%206%20by%20Imtiaz!5e0!3m2!1sen!2sae!4v1746948678151!5m2!1sen!2sae"
            width="100%"
            height="100%"
            style={{ border: 0 }}
            allowFullScreen
            loading="lazy"
            referrerPolicy="no-referrer-when-downgrade"
            className="absolute inset-0"
          ></iframe>
        </div>

{/* Key Distances */}
        <div
          className={`mb-24 transition-all duration-1000 delay-500 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h3 className="text-3xl md:text-4xl font-semibold text-center mb-16">KEY DISTANCES</h3>

{/* Connectivity Highlights */}
        <div
          className={`transition-all duration-1000 delay-700 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h3 className="text-3xl md:text-4xl font-semibold text-center mb-16">CONNECTIVITY HIGHLIGHTS</h3>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div className="bg-[#f5f5f7] rounded-3xl p-8 flex flex-col">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-6">
                <MapPin className="h-6 w-6 text-blue-600" />
              </div>
              <h4 className="text-xl font-semibold mb-4">Family-Friendly Location</h4>
              <p className="text-neutral-600 mb-6 flex-1">
                Located in the heart of Dubailand with easy access to schools, hospitals, and family entertainment
                venues.
              </p>
              <a href="#contact" className="text-blue-600 font-medium flex items-center hover:underline mt-auto">
                Learn more
                <ExternalLink className="h-4 w-4 ml-1" />
              </a>
            </div>

<div className="bg-[#f5f5f7] rounded-3xl p-8 flex flex-col">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-6">
                <Clock className="h-6 w-6 text-blue-600" />
              </div>
              <h4 className="text-xl font-semibold mb-4">Future Metro Access</h4>
              <p className="text-neutral-600 mb-6 flex-1">
                Upcoming metro connectivity will provide direct access to Dubai's major destinations within minutes.
              </p>
              <a href="#contact" className="text-blue-600 font-medium flex items-center hover:underline mt-auto">
                Contact for details
                <ExternalLink className="h-4 w-4 ml-1" />
              </a>
            </div>

<div className="bg-[#f5f5f7] rounded-3xl p-8 flex flex-col">
              <div className="flex items-center justify-center w-12 h-12 rounded-full bg-blue-100 mb-6">
                <MapPin className="h-6 w-6 text-blue-600" />
              </div>
              <h4 className="text-xl font-semibold mb-4">Growing Community</h4>
              <p className="text-neutral-600 mb-6 flex-1">
                Part of Dubai's fastest-growing district with significant infrastructure investments and development.
              </p>
              <a href="#contact" className="text-blue-600 font-medium flex items-center hover:underline mt-auto">
                Discover more
                <ExternalLink className="h-4 w-4 ml-1" />
              </a>
            </div>
          </div>
        </div>

{/* Apple-style CTA */}
        <div className="mt-24 text-center">
          <a
            href="#contact"
            className="inline-block rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white text-base font-medium transition-all"
          >
            Contact Sales
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/payment.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { CheckCircle2 } from "lucide-react"

export default function CE6Payment() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

return (
    <section id="payment" ref={sectionRef} className="py-32 md:py-48 bg-white overflow-hidden">
      <div className="container mx-auto px-4">
        {/* Apple-style header with large text */}
        <div
          className={`max-w-4xl mx-auto text-center mb-16 transition-all duration-1000 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <h2 className="text-5xl md:text-7xl font-bold tracking-tight mb-6">PAYMENT PLANS</h2>
          <p className="text-xl md:text-2xl text-neutral-500">
            Flexible payment options designed for families investing in their future.
          </p>
        </div>

{/* Requirements section */}
        <div
          className={`max-w-4xl mx-auto mb-24 transition-all duration-1000 delay-200 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="bg-[#f5f5f7] rounded-3xl p-8 md:p-12">
            <h3 className="text-2xl md:text-3xl font-semibold mb-6 text-center">Simple Requirements</h3>
            <p className="text-center text-neutral-600 mb-10">
              Easy qualification process for international and local buyers
            </p>

<div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-8 max-w-3xl mx-auto">
              <div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <rect width="18" height="14" x="3" y="5" rx="2" />
                    <path d="M21 8H3" />
                    <path d="M7 8v11" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">Valid Passport</h4>
                  <p className="text-sm text-neutral-500">Any nationality accepted</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z" />
                    <circle cx="12" cy="10" r="3" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">Address Proof</h4>
                  <p className="text-sm text-neutral-500">Any global address accepted</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">No UAE Residency Required</h4>
                  <p className="text-sm text-neutral-500">Perfect for international investors</p>
                </div>
              </div>

<div className="flex items-start gap-4">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center flex-shrink-0">
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    width="20"
                    height="20"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="text-blue-600"
                  >
                    <path d="M2 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z" />
                    <path d="M12 17a5 5 0 0 0 10 0c0-2.76-2.5-5-5-3-2.5-2-5 .24-5 3Z" />
                    <path d="M7 14c3.22-2.91 4.29-8.75 5-12 1.66 2.38 4.94 9 5 12" />
                    <path d="M22 9c-4.29 0-7.14-2.33-10-7 5.71 0 10 4.67 10 7Z" />
                  </svg>
                </div>
                <div>
                  <h4 className="font-medium mb-1">20% Down Payment</h4>
                  <p className="text-sm text-neutral-500">Secure your fully-furnished home</p>
                </div>
              </div>
            </div>
          </div>
        </div>

{/* Payment Plan */}
        <div
          className={`max-w-4xl mx-auto mb-24 transition-all duration-1000 delay-400 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="bg-[#f5f5f7] rounded-3xl p-8 md:p-12">
            <div className="text-center mb-8">
              <h3 className="text-3xl font-semibold mb-2">5-Year Payment Plan</h3>
              <p className="text-neutral-500">Extended payment terms with 3 years post-handover</p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8">
              <div className="text-center p-6 bg-white rounded-2xl">
                <div className="text-3xl font-bold text-blue-600 mb-2">20%</div>
                <div className="text-sm text-neutral-600">On Booking</div>
              </div>
              <div className="text-center p-6 bg-white rounded-2xl">
                <div className="text-3xl font-bold text-green-600 mb-2">50%</div>
                <div className="text-sm text-neutral-600">During Construction</div>
              </div>
              <div className="text-center p-6 bg-white rounded-2xl">
                <div className="text-3xl font-bold text-purple-600 mb-2">30%</div>
                <div className="text-sm text-neutral-600">3 Years Post-Handover</div>
              </div>
            </div>

<div className="space-y-4 mb-8">
              <div className="flex items-center gap-3">
                <CheckCircle2 className="h-5 w-5 text-blue-600" />
                <p>Fully furnished and equipped upon handover</p>
              </div>
              <div className="flex items-center gap-3">
                <CheckCircle2 className="h-5 w-5 text-blue-600" />
                <p>Flexible quarterly payments post-handover</p>
              </div>
              <div className="flex items-center gap-3">
                <CheckCircle2 className="h-5 w-5 text-blue-600" />
                <p>No additional furniture or appliance costs</p>
              </div>
              <div className="flex items-center gap-3">
                <CheckCircle2 className="h-5 w-5 text-blue-600" />
                <p>Move-in ready from day one</p>
              </div>
            </div>

<div className="text-center">
              <a
                href="#contact"
                className="inline-block rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-700 text-white text-base font-medium transition-all"
              >
                Get Payment Schedule
              </a>
            </div>
          </div>
        </div>

{/* Special Offer */}
        <div
          className={`max-w-3xl mx-auto text-center transition-all duration-1000 delay-600 ${
            isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
          }`}
        >
          <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-3xl p-8 md:p-12">
            <h3 className="text-2xl md:text-3xl font-semibold mb-4">Ready to Move In?</h3>
            <p className="text-neutral-500 mb-8 max-w-xl mx-auto">
              With Cove Edition 6, you get a fully-furnished home that's ready for your family from day one. No
              additional costs, no waiting for furniture delivery.
            </p>
            <a href="#contact" className="inline-flex items-center text-blue-600 font-medium hover:underline">
              Speak with a Family Housing Specialist
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="w-5 h-5 ml-1">
                <path
                  fillRule="evenodd"
                  d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z"
                  clipRule="evenodd"
                />
              </svg>
            </a>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/units.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"
import { ArrowRight, Check, Maximize2 } from "lucide-react"

export default function CE6Units() {
  const [isVisible, setIsVisible] = useState(false)
  const [activeUnit, setActiveUnit] = useState("studio")
  const [showFloorPlan, setShowFloorPlan] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Handle body scroll lock when floor plan modal is open
  useEffect(() => {
    if (typeof document === "undefined") return

if (showFloorPlan) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

return () => {
      document.body.style.overflow = "auto"
    }
  }, [showFloorPlan])

const unitTypes = [
    {
      id: "studio",
      type: "Studio",
      tagline: "Smart. Furnished. Ready.",
      description:
        "Fully-furnished studio apartments perfect for young professionals and couples, featuring smart layouts and premium finishes.",
      units: 85,
      minSize: 380,
      maxSize: 450,
      image: "/images/cove-edition-5-luxury-studio-apartment.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-Studio-FloorPlan.webp",
      features: [
        "Delivered fully furnished with custom designs",
        "Smart home technology integrated",
        "Premium kitchen appliances included",
        "Private balcony with community views",
      ],
      specs: [
        { name: "Bedrooms", value: "Studio" },
        { name: "Bathrooms", value: "1" },
        { name: "Kitchen", value: "Open Kitchen" },
        { name: "Balcony", value: "Yes" },
      ],
    },
    {
      id: "one-bedroom",
      type: "1 Bedroom",
      tagline: "Space. Comfort. Family-Ready.",
      description:
        "Spacious one-bedroom apartments designed for small families, featuring separate living areas and family-friendly layouts.",
      units: 45,
      minSize: 750,
      maxSize: 1100,
      image: "/images/luxury-living-room-design.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-1Bedroom-FloorPlan.webp",
      features: [
        "Family-oriented design with safety features",
        "Fully-equipped kitchen with family appliances",
        "Child-safe balcony with secure railings",
        "Storage solutions for family needs",
      ],
      specs: [
        { name: "Bedrooms", value: "1" },
        { name: "Bathrooms", value: "1-2" },
        { name: "Kitchen", value: "Open Kitchen" },
        { name: "Balcony", value: "Yes" },
      ],
    },
    {
      id: "two-bedroom",
      type: "2 Bedroom",
      tagline: "Premium. Spacious. Family-First.",
      description:
        "Expansive two-bedroom apartments perfect for growing families, with generous proportions and premium family amenities.",
      units: 15,
      minSize: 1300,
      maxSize: 1400,
      image: "/images/luxury-bedroom-design.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-2Bedroom-FloorPlan.webp",
      features: [
        "Master suite with family-friendly en-suite",
        "Dedicated children's room with safety features",
        "Large family kitchen with dining area",
        "Multiple balconies for family outdoor time",
      ],
      specs: [
        { name: "Bedrooms", value: "2" },
        { name: "Bathrooms", value: "2-3" },
        { name: "Kitchen", value: "Open Kitchen" },
        { name: "Balcony", value: "Multiple" },
      ],
    },
  ]

const activeUnitData = unitTypes.find((unit) => unit.id === activeUnit) || unitTypes[0]

return (
    <section id="units" ref={sectionRef} className="relative overflow-hidden bg-black text-white">
      <div className="py-32 md:py-48">
        <div className="container mx-auto px-4">
          {/* Unit selector */}
          <div
            className={`max-w-5xl mx-auto mb-32 transition-all duration-1000 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="text-center mb-16">
              <h3 className="text-4xl md:text-6xl font-bold mb-6">UNIT TYPES</h3>
              <p className="text-xl text-white/70 max-w-2xl mx-auto">
                Fully-furnished homes designed for modern family living.
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              {unitTypes.map((unit) => (
                <button
                  key={unit.id}
                  onClick={() => setActiveUnit(unit.id)}
                  className={`bg-white/5 backdrop-blur-sm rounded-3xl p-8 text-left transition-all duration-300 ${
                    activeUnit === unit.id ? "ring-2 ring-white" : "hover:bg-white/10"
                  }`}
                >
                  <h4 className="text-2xl font-semibold mb-2">{unit.type}</h4>
                  <p className="text-white/70 mb-4">{unit.tagline}</p>
                  <div className="flex justify-between items-center">
                    <p className="text-sm">
                      <span className="text-white/50">From </span>
                      <span className="text-white font-medium">
                        {unit.id === "studio"
                          ? "700,000 AED"
                          : unit.id === "one-bedroom"
                            ? "1,200,000 AED"
                            : "1,800,000 AED"}
                      </span>
                    </p>
                    <div
                      className={`w-8 h-8 rounded-full flex items-center justify-center ${
                        activeUnit === unit.id ? "bg-white text-black" : "bg-white/20 text-white"
                      }`}
                    >
                      {activeUnit === unit.id ? <Check className="h-4 w-4" /> : <ArrowRight className="h-4 w-4" />}
                    </div>
                  </div>
                </button>
              ))}
            </div>
          </div>

{/* Unit showcase */}
          <div
            className={`max-w-7xl mx-auto mb-32 transition-all duration-1000 delay-300 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
              <div className="order-2 lg:order-1">
                <p className="text-sm uppercase tracking-widest text-white/70 mb-4">{activeUnitData.type}</p>
                <h3 className="text-4xl md:text-6xl font-bold mb-6">{activeUnitData.tagline}</h3>
                <p className="text-xl text-white/70 mb-8 leading-relaxed">{activeUnitData.description}</p>

<a
                    href="#contact"
                    className="inline-flex items-center justify-center rounded-full bg-blue-600 hover:bg-blue-700 px-6 py-3 text-white font-medium transition-colors"
                  >
                    Contact Sales
                  </a>
                </div>
              </div>

{/* Features section */}
          <div
            className={`max-w-6xl mx-auto mb-32 transition-all duration-1000 delay-500 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="text-center mb-16">
              <h3 className="text-4xl md:text-5xl font-bold mb-6">FULLY FURNISHED FEATURES</h3>
              <p className="text-xl text-white/70 max-w-3xl mx-auto">
                Every detail included so you can move in and start living immediately.
              </p>
            </div>

{/* CTA section */}
          <div
            className={`max-w-4xl mx-auto py-16 transition-all duration-1000 delay-700 ${
              isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"
            }`}
          >
            <div className="bg-gradient-to-br from-blue-900/30 to-indigo-900/30 backdrop-blur-sm rounded-3xl p-12 text-center">
              <h3 className="text-3xl md:text-4xl font-bold mb-6">Ready for Your Family Home?</h3>
              <p className="text-xl text-white/80 mb-12 max-w-2xl mx-auto">
                Discover how Cove Edition 6 can provide the perfect fully-furnished home for your family.
              </p>
              <div className="flex flex-col sm:flex-row justify-center gap-6">
                <a
                  href="#contact"
                  className="rounded-full px-8 py-4 bg-white text-black text-base font-medium transition-all hover:bg-white/90"
                >
                  Contact Sales
                </a>
                <a
                  href="#payment"
                  className="rounded-full px-8 py-4 bg-blue-600 text-white text-base font-medium transition-all hover:bg-blue-700"
                >
                  View Payment Plans
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

{/* Floor Plan Modal */}
      {showFloorPlan && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4">
          <div className="relative w-full max-w-6xl max-h-[90vh] overflow-hidden">
            <button
              onClick={() => setShowFloorPlan(false)}
              className="absolute top-4 right-4 z-10 p-2 bg-black/50 rounded-full text-white hover:bg-black/70 transition-colors"
              aria-label="Close"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <line x1="18" y1="6" x2="6" y2="18"></line>
                <line x1="6" y1="6" x2="18" y2="18"></line>
              </svg>
            </button>
            <div className="relative w-full h-[80vh]">
              <Image
                src={activeUnitData.floorPlan || "/placeholder.svg"}
                alt={`${activeUnitData.type} Floor Plan`}
                fill
                className="object-contain"
                sizes="(max-width: 768px) 100vw, 90vw"
              />
            </div>
          </div>
        </div>
      )}
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/contact.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

export default function CE6Contact() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)
  const [iframeLoaded, setIframeLoaded] = useState(false)
  const [currentUrl, setCurrentUrl] = useState("")

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

// Effect to initialize Tally embed and get current URL
  useEffect(() => {
    if (typeof window === "undefined" || typeof document === "undefined") return

setCurrentUrl(window.location.href)

const script = document.createElement("script")
    script.src = "https://tally.so/widgets/embed.js"
    script.async = true
    document.body.appendChild(script)

const timer = setTimeout(() => {
      setIframeLoaded(true)
    }, 100)

return () => {
      clearTimeout(timer)
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

// Function to open WhatsApp with predefined message for CE6
  const openWhatsApp = () => {
    if (typeof window === "undefined") return

const message = encodeURIComponent(
      "Hello, I'm interested in COVE EDITION 6 by Imtiaz. Can you provide more information about the fully-furnished apartments?",
    )

window.open(`https://wa.me/971581998661?text=${message}`, "_blank")
  }

return (
    <section id="contact" ref={sectionRef} className="py-16 md:py-32 bg-white">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-3xl mx-auto text-center mb-12 md:mb-16 transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-4">
            Contact Our Family Housing Specialists
          </h2>
          <p className="text-lg md:text-2xl text-neutral-500">
            Ready to find the perfect fully-furnished home for your family? Our specialists are here to help.
          </p>
        </div>

<div
          className={`max-w-5xl mx-auto transition-opacity duration-1000 delay-300 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-12 md:mb-16">
            <div className="bg-[#f5f5f7] rounded-3xl p-6 md:p-12">
              <h3 className="text-xl md:text-3xl font-semibold mb-4 md:mb-6">Get in Touch</h3>
              <p className="text-base md:text-lg text-neutral-500 mb-6 md:mb-8">
                Our family housing specialists understand the unique needs of families moving to Dubai. Contact us for
                personalized assistance.
              </p>

<div className="space-y-6 md:space-y-8">
                <button
                  onClick={openWhatsApp}
                  className="w-full bg-blue-600 hover:bg-blue-700 text-white rounded-full py-3 md:py-4 text-base md:text-lg font-medium transition-colors flex items-center justify-center"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="w-5 h-5 mr-2"
                  >
                    <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path>
                  </svg>
                  WhatsApp Us
                </button>
              </div>
            </div>

<div>
              <div className="bg-[#f5f5f7] rounded-3xl p-6 md:p-12 h-full">
                <h3 className="text-xl md:text-3xl font-semibold mb-4 md:mb-6">Family Housing Inquiry</h3>

{iframeLoaded && (
                  <iframe
                    src={`https://tally.so/embed/mZDk45?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1${currentUrl ? `&page_url=${encodeURIComponent(currentUrl)}` : ""}&property=Cove%20Edition%206`}
                    loading="lazy"
                    width="100%"
                    height="400"
                    frameBorder="0"
                    title="Cove Edition 6 Family Housing Inquiry Form"
                    className="mx-auto"
                  ></iframe>
                )}

{!iframeLoaded && (
                  <div className="h-[400px] flex items-center justify-center">
                    <div className="animate-pulse bg-gray-200 rounded-md w-full h-full"></div>
                  </div>
                )}
              </div>
            </div>
          </div>

<div className="text-center max-w-2xl mx-auto">
            <p className="text-xs md:text-sm text-neutral-500">
              By contacting us, you agree to our privacy policy. We respect your privacy and are committed to helping
              families find their perfect home in Dubai.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="app/fr/cove-edition-6/page.tsx" isMerged="true"
import SEOBreadcrumbs from "@/components/seo-breadcrumbs"
import UIElements from "@/components/ui-elements"
import CE6Hero from "@/components/ce6/fr/hero"
import CE6About from "@/components/ce6/fr/about"
import CE6Amenities from "@/components/ce6/fr/amenities"
import CE6Gallery from "@/components/ce6/gallery"
import CE6Location from "@/components/ce6/fr/location"
import CE6Payment from "@/components/ce6/fr/payment"
import CE6Units from "@/components/ce6/fr/units"
import CE6Contact from "@/components/ce6/fr/contact"
import Footer from "@/components/footer"
import ScrollToTopButton from "@/components/scroll-to-top-button"
import VisualDivider from "@/components/visual-divider"

export const metadata = {
  title: "COVE EDITION 6 par Imtiaz | Résidences Entièrement Meublées à Dubailand",
  description:
    "Découvrez COVE EDITION 6 par Imtiaz - Résidences entièrement meublées à Dubailand avec piscine à débordement, équipements familiaux et plan de paiement sur 5 ans. À partir de 700 000 AED.",
  keywords:
    "Cove Edition 6, Imtiaz Developments, propriété Dubailand, appartements entièrement meublés Dubaï, résidences familiales Dubaï, investissement immobilier Dubaï, piscine à débordement, propriété Dubaï, plan de paiement post-livraison",
}

export default function CoveEdition6PageFR() {
  return (
    <main className="flex min-h-screen flex-col">
      <SEOBreadcrumbs />
      <UIElements locale="fr" />

<CE6Location />
      <CE6Payment />
      <CE6Units />
      <CE6Contact />
      <Footer locale="fr" />
      <ScrollToTopButton />
    </main>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/fr/contact.tsx" isMerged="true"
import FRContactSection from "@/components/fr/contact-section"

export default function CE6Contact() {
  return <FRContactSection sectionId="ce6-contact" />
}
[V0_FILE]typescriptreact:file="components/microcopy-improvements.tsx" isMerged="true"
"use client"

// This component demonstrates improved microcopy examples
export default function MicrocopyImprovements() {
  return (
    <div className="p-8 space-y-12">
      <section>
        <h2 className="text-2xl font-bold mb-6">Microcopy Analysis & Improvements</h2>
        
        {/* Button Labels */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold mb-4">Button Labels</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-red-50 p-4 rounded-lg">
              <h4 className="font-medium text-red-800 mb-2">❌ Current (Vague)</h4>
              <button className="bg-blue-600 text-white px-4 py-2 rounded">Enquire Now</button>
              <button className="bg-blue-600 text-white px-4 py-2 rounded ml-2">Contact Sales</button>
            </div>
            <div className="bg-green-50 p-4 rounded-lg">
              <h4 className="font-medium text-green-800 mb-2">✅ Improved (Specific)</h4>
              <button className="bg-blue-600 text-white px-4 py-2 rounded">Get Floor Plans & Prices</button>
              <button className="bg-blue-600 text-white px-4 py-2 rounded ml-2">Schedule Virtual Tour</button>
            </div>
          </div>
        </div>

{/* Form Hints */}
        <div className="mb-8">
          <h3 className="text-lg font-semibold mb-4">Form Hints</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="bg-red-50 p-4 rounded-lg">
              <h4 className="font-medium text-red-800 mb-2">❌ Current (Generic)</h4>
              <p className="text-sm text-gray-600">Fill out this form to get more information</p>
            </div>
            <div className="bg-green-50 p-4 rounded-lg">
              <h4 className="font-medium text-green-800 mb-2">✅ Improved (Clear Value)</h4>
              <p className="text-sm text-gray-600">Get your personalized payment plan in under 2 minutes</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/improved-contact-section.tsx" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

interface ImprovedContactSectionProps {
  locale?: string
}

export default function ImprovedContactSection({ locale = "en" }: ImprovedContactSectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)
  const [iframeLoaded, setIframeLoaded] = useState(false)
  const [currentUrl, setCurrentUrl] = useState("")

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

useEffect(() => {
    if (typeof window === "undefined" || typeof document === "undefined") return

setCurrentUrl(window.location.href)

const script = document.createElement("script")
    script.src = "https://tally.so/widgets/embed.js"
    script.async = true
    document.body.appendChild(script)

const timer = setTimeout(() => {
      setIframeLoaded(true)
    }, 100)

return () => {
      clearTimeout(timer)
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

const openWhatsApp = () => {
    if (typeof window === "undefined") return

const message = encodeURIComponent(
      locale === "fr"
        ? "Bonjour, j'aimerais recevoir les plans d'étage et les prix pour COVE EDITION 5. Pouvez-vous m'aider ?"
        : "Hi, I'd like to receive floor plans and pricing for COVE EDITION 5. Can you help me?",
    )

window.open(`https://wa.me/971581998661?text=${message}`, "_blank")
  }

// Improved microcopy with clear value propositions
  const texts = {
    title: locale === "fr" ? "Réservez Votre Visite Privée" : "Book Your Private Viewing",
    subtitle:
      locale === "fr"
        ? "Découvrez pourquoi COVE EDITION 5 est le choix préféré des familles expatriées à Dubaï"
        : "See why COVE EDITION 5 is the preferred choice for expat families in Dubai",
    quickResponse: locale === "fr" ? "Réponse Rapide" : "Quick Response",
    quickResponseText:
      locale === "fr"
        ? "Obtenez vos plans d'étage personnalisés et votre plan de paiement en moins de 24h"
        : "Get your personalized floor plans and payment plan within 24 hours",
    whatsAppButton: locale === "fr" ? "Parler à un Expert (WhatsApp)" : "Speak to an Expert (WhatsApp)",
    formTitle: locale === "fr" ? "Demande d'Information Rapide" : "Quick Information Request",
    formSubtitle: locale === "fr" ? "2 minutes • Réponse garantie sous 24h" : "2 minutes • Response guaranteed within 24h",
    privacyText:
      locale === "fr"
        ? "🔒 Vos données sont sécurisées. Nous ne partageons jamais vos informations et vous pouvez vous désabonner à tout moment."
        : "🔒 Your data is secure. We never share your information and you can unsubscribe anytime.",
    trustSignals: locale === "fr" 
      ? "✓ Plus de 500 familles nous font confiance  ✓ Réponse sous 24h garantie  ✓ Consultation gratuite"
      : "✓ 500+ families trust us  ✓ 24h response guaranteed  ✓ Free consultation"
  }

return (
    <section id="contact" ref={sectionRef} className="py-16 md:py-32 bg-white">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-3xl mx-auto text-center mb-12 md:mb-16 transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-4">{texts.title}</h2>
          <p className="text-lg md:text-2xl text-neutral-500 mb-6">{texts.subtitle}</p>
          
          {/* Trust signals */}
          <div className="text-sm text-neutral-600 bg-neutral-50 rounded-full px-6 py-3 inline-block">
            {texts.trustSignals}
          </div>
        </div>

<div
          className={`max-w-5xl mx-auto transition-opacity duration-1000 delay-300 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-12 md:mb-16">
            <div className="bg-[#f5f5f7] rounded-3xl p-6 md:p-12">
              <div className="flex items-center mb-4">
                <div className="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                <h3 className="text-xl md:text-2xl font-semibold">{texts.quickResponse}</h3>
              </div>
              <p className="text-base md:text-lg text-neutral-600 mb-6 md:mb-8">{texts.quickResponseText}</p>

<div className="space-y-4">
                <button
                  onClick={openWhatsApp}
                  className="w-full bg-green-600 hover:bg-green-700 text-white rounded-full py-4 text-base md:text-lg font-medium transition-colors flex items-center justify-center group"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform"
                  >
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.893 3.386"/>
                  </svg>
                  {texts.whatsAppButton}
                </button>
                
                <div className="text-xs text-neutral-500 text-center">
                  {locale === "fr" ? "Réponse moyenne: 3 minutes" : "Average response: 3 minutes"}
                </div>
              </div>
            </div>

<div>
              <div className="bg-[#f5f5f7] rounded-3xl p-6 md:p-12 h-full">
                <h3 className="text-xl md:text-2xl font-semibold mb-2">{texts.formTitle}</h3>
                <p className="text-sm text-neutral-500 mb-6">{texts.formSubtitle}</p>

{iframeLoaded && (
                  <iframe
                    src={`https://tally.so/embed/mZDk45?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1${currentUrl ? `&page_url=${encodeURIComponent(currentUrl)}` : ""}`}
                    loading="lazy"
                    width="100%"
                    height="400"
                    frameBorder="0"
                    title={locale === "fr" ? "Formulaire de Contact Palm Signature" : "Palm Signature Contact Form"}
                    className="mx-auto"
                  ></iframe>
                )}

{!iframeLoaded && (
                  <div className="h-[400px] flex items-center justify-center">
                    <div className="animate-pulse bg-gray-200 rounded-md w-full h-full flex items-center justify-center">
                      <span className="text-neutral-500">
                        {locale === "fr" ? "Chargement du formulaire..." : "Loading form..."}
                      </span>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </div>

<div className="text-center max-w-2xl mx-auto">
            <p className="text-xs md:text-sm text-neutral-500">{texts.privacyText}</p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/improved-scroll-header.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Menu, X, Home, Info, Palette, ImageIcon, MapPin, CreditCard, Building, Mail } from 'lucide-react'
import LanguageSwitcher from "./language-switcher"

interface ImprovedScrollHeaderProps {
  locale?: string
}

export default function ImprovedScrollHeader({ locale = "en" }: ImprovedScrollHeaderProps) {
  const [scrolled, setScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

useEffect(() => {
    if (typeof window === "undefined") return

const handleScroll = () => {
      if (window.scrollY > 100) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

useEffect(() => {
    if (typeof window === "undefined") return

const handleScrollForMenu = () => {
      if (mobileMenuOpen) {
        setMobileMenuOpen(false)
      }
    }

window.addEventListener("scroll", handleScrollForMenu)
    return () => window.removeEventListener("scroll", handleScrollForMenu)
  }, [mobileMenuOpen])

useEffect(() => {
    if (mobileMenuOpen) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = ""
    }
    return () => {
      document.body.style.overflow = ""
    }
  }, [mobileMenuOpen])

const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen)
  }

// Improved navigation labels with clear expectations
  const menuItems =
    locale === "fr"
      ? [
          { href: "#", label: "Accueil", icon: <Home className="h-4 w-4 mr-3" /> },
          { href: "#about", label: "Le Projet", icon: <Info className="h-4 w-4 mr-3" /> },
          { href: "#amenities", label: "Équipements", icon: <Palette className="h-4 w-4 mr-3" /> },
          { href: "#gallery", label: "Photos & Vidéos", icon: <ImageIcon className="h-4 w-4 mr-3" /> },
          { href: "#location", label: "Localisation", icon: <MapPin className="h-4 w-4 mr-3" /> },
          { href: "#payment", label: "Plans de Paiement", icon: <CreditCard className="h-4 w-4 mr-3" /> },
          { href: "#units", label: "Types d'Appartements", icon: <Building className="h-4 w-4 mr-3" /> },
          { href: "#contact", label: "Réserver une Visite", icon: <Mail className="h-4 w-4 mr-3" /> },
          { href: "#cove-edition-6", label: "CE6 Meublé", icon: <Building className="h-4 w-4 mr-3" /> },
        ]
      : [
          { href: "#", label: "Home", icon: <Home className="h-4 w-4 mr-3" /> },
          { href: "#about", label: "The Project", icon: <Info className="h-4 w-4 mr-3" /> },
          { href: "#amenities", label: "Amenities", icon: <Palette className="h-4 w-4 mr-3" /> },
          { href: "#gallery", label: "Photos & Videos", icon: <ImageIcon className="h-4 w-4 mr-3" /> },
          { href: "#location", label: "Location", icon: <MapPin className="h-4 w-4 mr-3" /> },
          { href: "#payment", label: "Payment Plans", icon: <CreditCard className="h-4 w-4 mr-3" /> },
          { href: "#units", label: "Apartment Types", icon: <Building className="h-4 w-4 mr-3" /> },
          { href: "#contact", label: "Book Viewing", icon: <Mail className="h-4 w-4 mr-3" /> },
          { href: "#cove-edition-6", label: "CE6 Furnished", icon: <Building className="h-4 w-4 mr-3" /> },
        ]

return (
    <>
      <header
        className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-neutral-100 h-14 transition-all duration-300 ${
          scrolled ? "top-0" : "top-7"
        }`}
      >
        <div className="container mx-auto px-4 h-full flex items-center justify-between">
          <div className="flex items-center">
            <a
              href="#"
              onClick={(e) => {
                e.preventDefault()
                window.scrollTo({ top: 0, behavior: "smooth" })
              }}
              className="font-medium text-sm tracking-tight hover:text-neutral-500 transition-colors relative overflow-hidden group"
            >
              <span className="inline-block transition-transform duration-300 group-hover:-translate-y-full">
                COVE EDITION 5
              </span>
              <span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0">
                COVE EDITION 5
              </span>
            </a>
          </div>
          <nav className="hidden md:flex items-center absolute left-1/2 transform -translate-x-1/2">
            <ul className="flex space-x-8">
              <li>
                <a href="#about" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Le Projet" : "The Project"}
                </a>
              </li>
              <li>
                <a href="#amenities" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Équipements" : "Amenities"}
                </a>
              </li>
              <li>
                <a href="#gallery" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Photos" : "Gallery"}
                </a>
              </li>
              <li>
                <a href="#location" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Localisation" : "Location"}
                </a>
              </li>
              <li>
                <a href="#payment" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Paiement" : "Payment"}
                </a>
              </li>
              <li>
                <a href="#contact" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Visite" : "Viewing"}
                </a>
              </li>
              <li>
                <a href="#cove-edition-6" className="text-xs font-bold hover:text-neutral-500 transition-colors">
                  CE6
                </a>
              </li>
            </ul>
          </nav>
          <div className="flex items-center gap-3">
            <LanguageSwitcher locale={locale} />
            <a
              href="#contact"
              className="rounded-full px-5 py-2 md:px-4 md:py-1.5 text-sm md:text-xs bg-blue-600 hover:bg-blue-700 text-white font-medium transition-all duration-300 hover:scale-105 hover:shadow-md"
            >
              {locale === "fr" ? "Réserver Visite" : "Book Viewing"}
            </a>
            <button
              className="md:hidden flex items-center justify-center w-10 h-10 bg-neutral-100 hover:bg-neutral-200 rounded-full transition-all duration-300 hover:shadow-md"
              onClick={toggleMobileMenu}
              aria-label={locale === "fr" ? "Ouvrir le menu" : "Open menu"}
            >
              <div className="relative w-5 h-5">
                <Menu
                  className={`absolute inset-0 h-5 w-5 transition-all duration-300 ${
                    mobileMenuOpen ? "opacity-0 rotate-90 scale-0" : "opacity-100 rotate-0 scale-100"
                  }`}
                />
                <X
                  className={`absolute inset-0 h-5 w-5 transition-all duration-300 ${
                    mobileMenuOpen ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-0"
                  }`}
                />
              </div>
            </button>
          </div>
        </div>
      </header>

{/* Mobile Menu Overlay */}
      <div
        className={`fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300 md:hidden ${
          mobileMenuOpen ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
        onClick={() => setMobileMenuOpen(false)}
      />

<div
        className={`fixed right-0 top-0 bottom-0 z-40 w-[80%] max-w-sm bg-white shadow-xl transition-transform duration-500 ease-in-out transform md:hidden ${
          mobileMenuOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex flex-col h-full pt-20 pb-6 px-6">
          <nav className="flex-1">
            <ul className="space-y-3">
              {menuItems.map((item, index) => (
                <li
                  key={index}
                  className={`transform transition-all duration-300 ${
                    mobileMenuOpen ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"
                  }`}
                  style={{ transitionDelay: `${index * 50}ms` }}
                >
                  <a
                    href={item.href}
                    className="flex items-center text-lg font-medium py-3 px-4 rounded-lg hover:bg-neutral-50 transition-colors"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {item.icon}
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>
          <div className="mt-auto pt-6 border-t border-neutral-100">
            <Button
              className={`w-full rounded-full py-6 text-base bg-blue-600 hover:bg-blue-700 text-white transition-all duration-500 ${
                mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
              }`}
              style={{ transitionDelay: "400ms" }}
              onClick={() => {
                setMobileMenuOpen(false)
                window.location.href = "#contact"
              }}
            >
              {locale === "fr" ? "Réserver ma Visite" : "Book My Viewing"}
            </Button>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/fr/hero.tsx" isEdit="true" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import Image from "next/image"

export default function CE6Hero() {
  const [scrollY, setScrollY] = useState(0)

useEffect(() => {
    if (typeof window === "undefined") return

const handleScroll = () => setScrollY(window.scrollY)
    window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

return (
    <section className="relative h-screen flex items-center justify-center overflow-hidden bg-black">
      {/* Background Image with Parallax */}
      <div 
        className="absolute inset-0 w-full h-full"
        style={{ transform: `translateY(${scrollY * 0.5}px)` }}
      >
        <Image
          src="/images/cove-edition-6-aerial-view.jpeg"
          alt="COVE EDITION 6 - Appartements Familiaux Meublés à Dubaï"
          fill
          className="object-cover"
          priority
        />
        <div className="absolute inset-0 bg-black/40" />
      </div>

{/* Content */}
      <div className="relative z-10 text-center text-white px-4 max-w-4xl mx-auto">
        <div className="mb-6">
          <span className="inline-block bg-blue-600 text-white px-4 py-2 rounded-full text-sm font-medium mb-4">
            🏠 Entièrement Meublé • Prêt à Emménager
          </span>
        </div>
        
        <h1 className="text-4xl md:text-7xl font-bold mb-6 tracking-tight">
          COVE EDITION 6
          <span className="block text-2xl md:text-4xl font-light mt-2 text-blue-300">
            par Imtiaz
          </span>
        </h1>
        
        <p className="text-xl md:text-2xl mb-8 text-gray-200 max-w-3xl mx-auto leading-relaxed">
          Appartements familiaux entièrement meublés dans le cœur de Dubailand. 
          Parfait pour les familles expatriées cherchant un foyer clé en main.
        </p>

<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
          <a
            href="#contact"
            className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
          >
            Réserver Visite Virtuelle
          </a>
          <a
            href="#units"
            className="border-2 border-white text-white hover:bg-white hover:text-black px-8 py-4 rounded-full font-semibold text-lg transition-all duration-300"
          >
            Voir Plans & Prix
          </a>
        </div>

{/* Key Features */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 text-sm">
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
            <div className="text-2xl mb-2">🏡</div>
            <div className="font-semibold">Entièrement Meublé</div>
            <div className="text-gray-300">Emménagez immédiatement</div>
          </div>
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
            <div className="text-2xl mb-2">👨‍👩‍👧‍👦</div>
            <div className="font-semibold">Idéal Familles</div>
            <div className="text-gray-300">Équipements pour enfants</div>
          </div>
          <div className="bg-white/10 backdrop-blur-sm rounded-lg p-4">
            <div className="text-2xl mb-2">🚇</div>
            <div className="font-semibold">Métro à Proximité</div>
            <div className="text-gray-300">Connectivité future</div>
          </div>
        </div>
      </div>

{/* Scroll Indicator */}
      <div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 text-white animate-bounce">
        <div className="flex flex-col items-center">
          <span className="text-sm mb-2">Découvrir</span>
          <div className="w-6 h-10 border-2 border-white rounded-full flex justify-center">
            <div className="w-1 h-3 bg-white rounded-full mt-2 animate-pulse"></div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/fr/about.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"

export default function CE6About() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

return (
    <section id="about" ref={sectionRef} className="py-16 md:py-32 bg-white">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-6xl mx-auto transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          {/* Header */}
          <div className="text-center mb-16">
            <div className="inline-block bg-blue-50 text-blue-600 px-4 py-2 rounded-full text-sm font-medium mb-6">
              🏠 Logement Familial Clé en Main
            </div>
            <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-6">
              Votre Nouveau Foyer Vous Attend
              <span className="block text-blue-600 mt-2">Entièrement Meublé</span>
            </h2>
            <p className="text-lg md:text-xl text-neutral-600 max-w-3xl mx-auto">
              COVE EDITION 6 révolutionne l'expérience d'emménagement pour les familles expatriées. 
              Fini le stress du mobilier - votre appartement est prêt dès le premier jour.
            </p>
          </div>

{/* Main Content Grid */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
            <div>
              <h3 className="text-2xl md:text-3xl font-semibold mb-6">
                Conçu pour la Vie Familiale Moderne
              </h3>
              
              <div className="space-y-6">
                <div className="flex items-start">
                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
                    <span className="text-blue-600 font-bold">✓</span>
                  </div>
                  <div>
                    <h4 className="font-semibold text-lg mb-2">Mobilier Premium Inclus</h4>
                    <p className="text-neutral-600">
                      Chaque appartement est entièrement meublé avec du mobilier moderne et fonctionnel, 
                      sélectionné spécialement pour les familles.
                    </p>
                  </div>
                </div>

<div className="flex items-start">
                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
                    <span className="text-blue-600 font-bold">✓</span>
                  </div>
                  <div>
                    <h4 className="font-semibold text-lg mb-2">Emménagement Immédiat</h4>
                    <p className="text-neutral-600">
                      Plus besoin d'attendre des semaines pour recevoir vos meubles. 
                      Votre nouvelle vie à Dubaï commence dès votre arrivée.
                    </p>
                  </div>
                </div>

<div className="flex items-start">
                  <div className="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-4 mt-1">
                    <span className="text-blue-600 font-bold">✓</span>
                  </div>
                  <div>
                    <h4 className="font-semibold text-lg mb-2">Espaces Optimisés</h4>
                    <p className="text-neutral-600">
                      Chaque mètre carré est pensé pour maximiser le confort familial, 
                      avec des espaces de rangement intelligents.
                    </p>
                  </div>
                </div>
              </div>
            </div>

<div className="relative">
              <Image
                src="/images/cove-edition-6-front-view.jpeg"
                alt="COVE EDITION 6 - Façade moderne avec balcons"
                width={600}
                height={400}
                className="rounded-2xl w-full h-auto"
              />
              <div className="absolute -bottom-6 -right-6 bg-white rounded-xl p-4 shadow-lg">
                <div className="text-2xl font-bold text-blue-600">100%</div>
                <div className="text-sm text-neutral-600">Meublé</div>
              </div>
            </div>
          </div>

{/* Stats Section */}
          <div className="bg-neutral-50 rounded-3xl p-8 md:p-12">
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
              <div>
                <div className="text-3xl md:text-4xl font-bold text-blue-600 mb-2">2025</div>
                <div className="text-sm text-neutral-600">Livraison Prévue</div>
              </div>
              <div>
                <div className="text-3xl md:text-4xl font-bold text-blue-600 mb-2">15min</div>
                <div className="text-sm text-neutral-600">Du Centre-ville</div>
              </div>
              <div>
                <div className="text-3xl md:text-4xl font-bold text-blue-600 mb-2">3</div>
                <div className="text-sm text-neutral-600">Types d'Appartements</div>
              </div>
              <div>
                <div className="text-3xl md:text-4xl font-bold text-blue-600 mb-2">0%</div>
                <div className="text-sm text-neutral-600">Commission Acheteur</div>
              </div>
            </div>
          </div>

{/* Developer Info */}
          <div className="text-center mt-16">
            <p className="text-neutral-600 mb-4">Développé par</p>
            <h3 className="text-2xl font-bold text-neutral-800 mb-2">Imtiaz Developments</h3>
            <p className="text-neutral-600 max-w-2xl mx-auto">
              Leader reconnu dans le développement résidentiel à Dubaï, 
              Imtiaz crée des communautés où les familles s'épanouissent.
            </p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/fr/amenities.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"

export default function CE6Amenities() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const familyAmenities = [
    {
      icon: "🏊‍♀️",
      title: "Piscine Familiale",
      description: "Piscine sécurisée avec zone peu profonde pour enfants",
      image: "/images/cove-edition-6-rooftop-pool.jpeg"
    },
    {
      icon: "🎮",
      title: "Aire de Jeux Couverte",
      description: "Espace de jeu climatisé pour les enfants de tous âges",
      image: "/images/luxury-clubhouse-lounge.png"
    },
    {
      icon: "💪",
      title: "Salle de Sport Familiale",
      description: "Équipements fitness adaptés aux parents actifs",
      image: "/images/modern-gym-equipment.png"
    },
    {
      icon: "🌳",
      title: "Jardins Paysagers",
      description: "Espaces verts sécurisés pour les activités en famille",
      image: "/images/outdoor-bbq-dining.png"
    },
    {
      icon: "🚗",
      title: "Parking Couvert",
      description: "Places de parking dédiées et sécurisées",
      image: "/images/cove-edition-6-facade-balconies.jpeg"
    },
    {
      icon: "🔒",
      title: "Sécurité 24/7",
      description: "Surveillance continue pour la tranquillité des familles",
      image: "/images/cove-edition-6-side-view.jpeg"
    }
  ]

return (
    <section id="amenities" ref={sectionRef} className="py-16 md:py-32 bg-neutral-50">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-6xl mx-auto transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          {/* Header */}
          <div className="text-center mb-16">
            <div className="inline-block bg-blue-50 text-blue-600 px-4 py-2 rounded-full text-sm font-medium mb-6">
              👨‍👩‍👧‍👦 Équipements Pensés pour les Familles
            </div>
            <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-6">
              Tout ce dont Votre Famille a Besoin
            </h2>
            <p className="text-lg md:text-xl text-neutral-600 max-w-3xl mx-auto">
              Des équipements soigneusement sélectionnés pour créer un environnement 
              sûr et épanouissant pour toute la famille.
            </p>
          </div>

{/* Amenities Grid */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
            {familyAmenities.map((amenity, index) => (
              <div
                key={index}
                className={`bg-white rounded-2xl overflow-hidden transition-all duration-500 hover:scale-105 hover:shadow-lg ${
                  isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"
                }`}
                style={{ transitionDelay: `${index * 100}ms` }}
              >
                <div className="relative h-48">
                  <Image
                    src={amenity.image || "/placeholder.svg"}
                    alt={amenity.title}
                    fill
                    className="object-cover"
                  />
                  <div className="absolute top-4 left-4 w-12 h-12 bg-white rounded-full flex items-center justify-center text-2xl">
                    {amenity.icon}
                  </div>
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold mb-3">{amenity.title}</h3>
                  <p className="text-neutral-600">{amenity.description}</p>
                </div>
              </div>
            ))}
          </div>

{/* Special Features */}
          <div className="bg-white rounded-3xl p-8 md:p-12">
            <div className="text-center mb-12">
              <h3 className="text-2xl md:text-3xl font-semibold mb-4">
                Avantages Exclusifs pour les Résidents
              </h3>
              <p className="text-neutral-600 max-w-2xl mx-auto">
                Profitez de services premium inclus dans votre loyer mensuel
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              <div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🧹</span>
                </div>
                <h4 className="font-semibold mb-2">Service de Ménage</h4>
                <p className="text-sm text-neutral-600">Nettoyage hebdomadaire inclus</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🔧</span>
                </div>
                <h4 className="font-semibold mb-2">Maintenance 24/7</h4>
                <p className="text-sm text-neutral-600">Réparations rapides garanties</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">📦</span>
                </div>
                <h4 className="font-semibold mb-2">Réception Colis</h4>
                <p className="text-sm text-neutral-600">Service de conciergerie</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🚌</span>
                </div>
                <h4 className="font-semibold mb-2">Navette Scolaire</h4>
                <p className="text-sm text-neutral-600">Transport vers écoles locales</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/fr/location.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

export default function CE6Location() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const nearbyPlaces = [
    { name: "IMG Worlds of Adventure", time: "5 min", type: "Parc d'attractions" },
    { name: "Global Village", time: "8 min", type: "Shopping & Culture" },
    { name: "Dubai Outlet Mall", time: "10 min", type: "Shopping" },
    { name: "Al Maktoum Airport", time: "15 min", type: "Aéroport" },
    { name: "Downtown Dubai", time: "20 min", type: "Centre-ville" },
    { name: "Dubai Marina", time: "25 min", type: "Front de mer" }
  ]

const schools = [
    { name: "GEMS World Academy", time: "12 min", type: "École Internationale" },
    { name: "Repton School Dubai", time: "15 min", type: "École Britannique" },
    { name: "Dubai International Academy", time: "18 min", type: "École IB" },
    { name: "American School of Dubai", time: "22 min", type: "École Américaine" }
  ]

return (
    <section id="location" ref={sectionRef} className="py-16 md:py-32 bg-white">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-6xl mx-auto transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          {/* Header */}
          <div className="text-center mb-16">
            <div className="inline-block bg-blue-50 text-blue-600 px-4 py-2 rounded-full text-sm font-medium mb-6">
              📍 Emplacement Stratégique
            </div>
            <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-6">
              Au Cœur de Dubailand
            </h2>
            <p className="text-lg md:text-xl text-neutral-600 max-w-3xl mx-auto">
              Parfaitement situé pour les familles, avec un accès facile aux écoles, 
              centres commerciaux et attractions de Dubaï.
            </p>
          </div>

{/* Map Section */}
          <div className="bg-neutral-50 rounded-3xl p-8 md:p-12 mb-16">
            <div className="aspect-video bg-neutral-200 rounded-2xl mb-8 flex items-center justify-center">
              <div className="text-center">
                <div className="text-4xl mb-4">🗺️</div>
                <p className="text-neutral-600">Carte Interactive Disponible</p>
                <p className="text-sm text-neutral-500 mt-2">
                  Contactez-nous pour une présentation détaillée de l'emplacement
                </p>
              </div>
            </div>

{/* Transport Info */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
              <div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🚇</span>
                </div>
                <h3 className="font-semibold mb-2">Métro Future</h3>
                <p className="text-sm text-neutral-600">
                  Station de métro prévue à proximité (2026)
                </p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🚌</span>
                </div>
                <h3 className="font-semibold mb-2">Transport Public</h3>
                <p className="text-sm text-neutral-600">
                  Arrêts de bus à 3 minutes à pied
                </p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🛣️</span>
                </div>
                <h3 className="font-semibold mb-2">Accès Routier</h3>
                <p className="text-sm text-neutral-600">
                  Connexion directe aux autoroutes principales
                </p>
              </div>
            </div>
          </div>

{/* Nearby Places */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
            {/* Attractions & Shopping */}
            <div>
              <h3 className="text-2xl font-semibold mb-8">Attractions & Shopping</h3>
              <div className="space-y-4">
                {nearbyPlaces.map((place, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between p-4 bg-neutral-50 rounded-xl hover:bg-neutral-100 transition-colors"
                  >
                    <div>
                      <h4 className="font-medium">{place.name}</h4>
                      <p className="text-sm text-neutral-600">{place.type}</p>
                    </div>
                    <div className="text-right">
                      <div className="font-semibold text-blue-600">{place.time}</div>
                      <div className="text-xs text-neutral-500">en voiture</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

{/* Schools */}
            <div>
              <h3 className="text-2xl font-semibold mb-8">Écoles Réputées</h3>
              <div className="space-y-4">
                {schools.map((school, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between p-4 bg-neutral-50 rounded-xl hover:bg-neutral-100 transition-colors"
                  >
                    <div>
                      <h4 className="font-medium">{school.name}</h4>
                      <p className="text-sm text-neutral-600">{school.type}</p>
                    </div>
                    <div className="text-right">
                      <div className="font-semibold text-blue-600">{school.time}</div>
                      <div className="text-xs text-neutral-500">en voiture</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

{/* Call to Action */}
          <div className="text-center mt-16">
            <div className="bg-blue-50 rounded-2xl p-8">
              <h3 className="text-xl font-semibold mb-4">
                Découvrez l'Emplacement en Personne
              </h3>
              <p className="text-neutral-600 mb-6">
                Organisez une visite guidée du quartier et découvrez pourquoi 
                Dubailand est parfait pour votre famille.
              </p>
              <a
                href="#contact"
                className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition-colors"
              >
                Réserver Visite du Quartier
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/fr/payment.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

export default function CE6Payment() {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const paymentPlans = [
    {
      title: "Plan Standard",
      subtitle: "Le plus populaire",
      downPayment: "20%",
      construction: "60%",
      handover: "20%",
      features: [
        "Acompte initial de 20%",
        "Paiements échelonnés pendant la construction",
        "Solde à la livraison",
        "Mobilier inclus sans coût supplémentaire"
      ],
      popular: true
    },
    {
      title: "Plan Flexible",
      subtitle: "Pour plus de souplesse",
      downPayment: "10%",
      construction: "70%",
      handover: "20%",
      features: [
        "Acompte réduit de 10%",
        "Paiements mensuels pendant la construction",
        "Idéal pour les familles en transition",
        "Mobilier premium inclus"
      ],
      popular: false
    }
  ]

const benefits = [
    {
      icon: "💰",
      title: "0% Commission Acheteur",
      description: "Aucune commission d'agence à payer"
    },
    {
      icon: "🏠",
      title: "Mobilier Inclus",
      description: "Valeur de 50,000 AED incluse"
    },
    {
      icon: "📋",
      title: "Assistance Juridique",
      description: "Support complet pour l'achat"
    },
    {
      icon: "🔄",
      title: "Garantie Rachat",
      description: "Option de rachat après 2 ans"
    }
  ]

return (
    <section id="payment" ref={sectionRef} className="py-16 md:py-32 bg-neutral-50">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-6xl mx-auto transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          {/* Header */}
          <div className="text-center mb-16">
            <div className="inline-block bg-blue-50 text-blue-600 px-4 py-2 rounded-full text-sm font-medium mb-6">
              💳 Plans de Paiement Flexibles
            </div>
            <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-6">
              Investissez dans Votre Avenir Familial
            </h2>
            <p className="text-lg md:text-xl text-neutral-600 max-w-3xl mx-auto">
              Des options de paiement conçues pour s'adapter à votre situation financière, 
              avec le mobilier inclus dans le prix.
            </p>
          </div>

{/* Payment Plans */}
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16">
            {paymentPlans.map((plan, index) => (
              <div
                key={index}
                className={`relative bg-white rounded-3xl p-8 transition-all duration-500 hover:scale-105 ${
                  plan.popular ? "ring-2 ring-blue-500 shadow-xl" : "shadow-lg"
                } ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-8"}`}
                style={{ transitionDelay: `${index * 200}ms` }}
              >
                {plan.popular && (
                  <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
                    <span className="bg-blue-600 text-white px-6 py-2 rounded-full text-sm font-medium">
                      Le Plus Populaire
                    </span>
                  </div>
                )}

<div className="text-center mb-8">
                  <h3 className="text-2xl font-bold mb-2">{plan.title}</h3>
                  <p className="text-neutral-600">{plan.subtitle}</p>
                </div>

{/* Payment Breakdown */}
                <div className="grid grid-cols-3 gap-4 mb-8">
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-600 mb-1">{plan.downPayment}</div>
                    <div className="text-sm text-neutral-600">À la réservation</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-600 mb-1">{plan.construction}</div>
                    <div className="text-sm text-neutral-600">Pendant construction</div>
                  </div>
                  <div className="text-center">
                    <div className="text-2xl font-bold text-blue-600 mb-1">{plan.handover}</div>
                    <div className="text-sm text-neutral-600">À la livraison</div>
                  </div>
                </div>

{/* Features */}
                <div className="space-y-3 mb-8">
                  {plan.features.map((feature, featureIndex) => (
                    <div key={featureIndex} className="flex items-center">
                      <div className="w-5 h-5 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <span className="text-blue-600 text-xs">✓</span>
                      </div>
                      <span className="text-neutral-700">{feature}</span>
                    </div>
                  ))}
                </div>

<button className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-full font-medium transition-colors">
                  Calculer Mon Plan Personnalisé
                </button>
              </div>
            ))}
          </div>

{/* Benefits */}
          <div className="bg-white rounded-3xl p-8 md:p-12 mb-16">
            <h3 className="text-2xl md:text-3xl font-semibold text-center mb-12">
              Avantages Exclusifs Inclus
            </h3>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
              {benefits.map((benefit, index) => (
                <div key={index} className="text-center">
                  <div className="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <span className="text-2xl">{benefit.icon}</span>
                  </div>
                  <h4 className="font-semibold mb-2">{benefit.title}</h4>
                  <p className="text-sm text-neutral-600">{benefit.description}</p>
                </div>
              ))}
            </div>
          </div>

{/* Price Range */}
          <div className="text-center">
            <div className="bg-blue-50 rounded-2xl p-8 inline-block">
              <h3 className="text-xl font-semibold mb-4">Gamme de Prix</h3>
              <div className="text-3xl font-bold text-blue-600 mb-2">
                À partir de 850,000 AED
              </div>
              <p className="text-neutral-600 mb-6">
                Mobilier premium inclus • 0% commission acheteur
              </p>
              <a
                href="#contact"
                className="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-medium transition-colors"
              >
                Obtenir Prix Détaillés
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ce6/fr/units.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import Image from "next/image"

export default function CE6Units() {
  const [isVisible, setIsVisible] = useState(false)
  const [activeUnit, setActiveUnit] = useState(0)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

const unitTypes = [
    {
      type: "Studio Meublé",
      size: "450 sq ft",
      price: "À partir de 850,000 AED",
      bedrooms: "Studio",
      bathrooms: "1",
      features: [
        "Cuisine équipée avec électroménager",
        "Mobilier moderne inclus",
        "Balcon avec vue",
        "Rangements optimisés",
        "Climatisation centralisée"
      ],
      image: "/images/cove-edition-5-luxury-studio-apartment.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-Studio-FloorPlan.webp"
    },
    {
      type: "1 Chambre Meublé",
      size: "650 sq ft",
      price: "À partir de 1,200,000 AED",
      bedrooms: "1",
      bathrooms: "1",
      features: [
        "Chambre principale spacieuse",
        "Salon séparé entièrement meublé",
        "Cuisine américaine équipée",
        "Balcon privé",
        "Dressing intégré"
      ],
      image: "/images/luxury-bedroom-design.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-1Bedroom-FloorPlan.webp"
    },
    {
      type: "2 Chambres Meublé",
      size: "950 sq ft",
      price: "À partir de 1,650,000 AED",
      bedrooms: "2",
      bathrooms: "2",
      features: [
        "Deux chambres avec mobilier premium",
        "Salon familial spacieux",
        "Cuisine ouverte moderne",
        "Deux salles de bains complètes",
        "Grand balcon avec vue panoramique"
      ],
      image: "/images/luxury-living-room-design.jpeg",
      floorPlan: "/images/PalmSignatureRealEstate-CoveEdition5-2Bedroom-FloorPlan.webp"
    }
  ]

return (
    <section id="units" ref={sectionRef} className="py-16 md:py-32 bg-white">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-6xl mx-auto transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          {/* Header */}
          <div className="text-center mb-16">
            <div className="inline-block bg-blue-50 text-blue-600 px-4 py-2 rounded-full text-sm font-medium mb-6">
              🏠 Appartements Entièrement Meublés
            </div>
            <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-6">
              Choisissez Votre Foyer Idéal
            </h2>
            <p className="text-lg md:text-xl text-neutral-600 max-w-3xl mx-auto">
              Tous nos appartements sont livrés entièrement meublés avec du mobilier 
              moderne et fonctionnel, parfait pour les familles.
            </p>
          </div>

{/* Unit Type Selector */}
          <div className="flex flex-wrap justify-center gap-4 mb-12">
            {unitTypes.map((unit, index) => (
              <button
                key={index}
                onClick={() => setActiveUnit(index)}
                className={`px-6 py-3 rounded-full font-medium transition-all duration-300 ${
                  activeUnit === index
                    ? "bg-blue-600 text-white shadow-lg"
                    : "bg-neutral-100 text-neutral-700 hover:bg-neutral-200"
                }`}
              >
                {unit.type}
              </button>
            ))}
          </div>

{/* Active Unit Display */}
          <div className="bg-neutral-50 rounded-3xl p-8 md:p-12">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
              {/* Unit Image */}
              <div className="relative">
                <Image
                  src={unitTypes[activeUnit].image || "/placeholder.svg"}
                  alt={`${unitTypes[activeUnit].type} - Intérieur meublé`}
                  width={600}
                  height={400}
                  className="rounded-2xl w-full h-auto"
                />
                <div className="absolute top-4 left-4 bg-white rounded-lg px-3 py-2">
                  <span className="text-sm font-medium text-blue-600">
                    ✓ Entièrement Meublé
                  </span>
                </div>
              </div>

{/* Unit Details */}
              <div>
                <h3 className="text-2xl md:text-3xl font-bold mb-4">
                  {unitTypes[activeUnit].type}
                </h3>
                
                <div className="grid grid-cols-3 gap-4 mb-6">
                  <div className="text-center bg-white rounded-lg p-4">
                    <div className="text-2xl font-bold text-blue-600">
                      {unitTypes[activeUnit].bedrooms}
                    </div>
                    <div className="text-sm text-neutral-600">Chambres</div>
                  </div>
                  <div className="text-center bg-white rounded-lg p-4">
                    <div className="text-2xl font-bold text-blue-600">
                      {unitTypes[activeUnit].bathrooms}
                    </div>
                    <div className="text-sm text-neutral-600">Salle de bains</div>
                  </div>
                  <div className="text-center bg-white rounded-lg p-4">
                    <div className="text-lg font-bold text-blue-600">
                      {unitTypes[activeUnit].size}
                    </div>
                    <div className="text-sm text-neutral-600">Surface</div>
                  </div>
                </div>

<div className="mb-6">
                  <div className="text-2xl font-bold text-blue-600 mb-2">
                    {unitTypes[activeUnit].price}
                  </div>
                  <p className="text-neutral-600">Mobilier premium inclus</p>
                </div>

<div className="space-y-3 mb-8">
                  {unitTypes[activeUnit].features.map((feature, index) => (
                    <div key={index} className="flex items-center">
                      <div className="w-5 h-5 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <span className="text-blue-600 text-xs">✓</span>
                      </div>
                      <span className="text-neutral-700">{feature}</span>
                    </div>
                  ))}
                </div>

<div className="flex flex-col sm:flex-row gap-4">
                  <a
                    href="#contact"
                    className="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-center py-3 rounded-full font-medium transition-colors"
                  >
                    Réserver Visite
                  </a>
                  <button className="flex-1 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white text-center py-3 rounded-full font-medium transition-colors">
                    Voir Plan d'Étage
                  </button>
                </div>
              </div>
            </div>
          </div>

{/* Furniture Package Info */}
          <div className="mt-16 bg-blue-50 rounded-3xl p-8 md:p-12">
            <div className="text-center mb-8">
              <h3 className="text-2xl md:text-3xl font-semibold mb-4">
                Package Mobilier Premium Inclus
              </h3>
              <p className="text-neutral-600 max-w-2xl mx-auto">
                Chaque appartement est livré avec un mobilier soigneusement sélectionné, 
                d'une valeur de 50,000 AED, inclus dans le prix d'achat.
              </p>
            </div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
              <div className="text-center">
                <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🛏️</span>
                </div>
                <h4 className="font-semibold mb-2">Mobilier Chambre</h4>
                <p className="text-sm text-neutral-600">Lit, armoire, tables de chevet</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🛋️</span>
                </div>
                <h4 className="font-semibold mb-2">Salon Complet</h4>
                <p className="text-sm text-neutral-600">Canapé, table basse, TV</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🍽️</span>
                </div>
                <h4 className="font-semibold mb-2">Salle à Manger</h4>
                <p className="text-sm text-neutral-600">Table, chaises, vaisselle</p>
              </div>

<div className="text-center">
                <div className="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4">
                  <span className="text-2xl">🔌</span>
                </div>
                <h4 className="font-semibold mb-2">Électroménager</h4>
                <p className="text-sm text-neutral-600">Réfrigérateur, lave-linge, micro-ondes</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/optimized-image.tsx" isMerged="true"
"use client"

import Image from "next/image"
import { useState } from "react"

interface OptimizedImageProps {
  src: string
  alt: string
  width: number
  height: number
  priority?: boolean
  className?: string
  sizes?: string
  quality?: number
  placeholder?: "blur" | "empty"
  blurDataURL?: string
}

export default function OptimizedImage({
  src,
  alt,
  width,
  height,
  priority = false,
  className = "",
  sizes = "100vw",
  quality = 85,
  placeholder = "empty",
  blurDataURL,
}: OptimizedImageProps) {
  const [isLoading, setIsLoading] = useState(true)
  const [hasError, setHasError] = useState(false)

// Generate responsive srcset for different screen sizes
  const generateSrcSet = (baseSrc: string) => {
    const sizes = [640, 768, 1024, 1280, 1536, 1920]
    return sizes
      .map(size => `${baseSrc}?w=${size}&q=${quality} ${size}w`)
      .join(", ")
  }

if (hasError) {
    return (
      <div 
        className={`bg-gray-100 flex items-center justify-center ${className}`}
        style={{ width, height }}
        role="img"
        aria-label={alt}
      >
        <span className="text-gray-400 text-sm">Image unavailable</span>
      </div>
    )
  }

return (
    <div className={`relative overflow-hidden ${className}`}>
      <Image
        src={src || "/placeholder.svg"}
        alt={alt}
        width={width}
        height={height}
        priority={priority}
        quality={quality}
        sizes={sizes}
        placeholder={placeholder}
        blurDataURL={blurDataURL}
        className={`transition-opacity duration-300 ${
          isLoading ? "opacity-0" : "opacity-100"
        }`}
        onLoad={() => setIsLoading(false)}
        onError={() => {
          setHasError(true)
          setIsLoading(false)
        }}
        // SEO optimizations
        loading={priority ? "eager" : "lazy"}
        decoding="async"
      />
      
      {/* Loading placeholder */}
      {isLoading && (
        <div 
          className="absolute inset-0 bg-gray-100 animate-pulse"
          aria-hidden="true"
        />
      )}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/hero-optimized.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import OptimizedImage from "./optimized-image"
import { ChevronDown } from 'lucide-react'

interface HeroOptimizedProps {
  locale?: string
}

export default function HeroOptimized({ locale = "en" }: HeroOptimizedProps) {
  const [scrollY, setScrollY] = useState(0)

useEffect(() => {
    if (typeof window === "undefined") return

const handleScroll = () => {
      setScrollY(window.scrollY)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const texts = {
    tagline: locale === "fr" ? "Résidences de Luxe par Imtiaz à Dubailand" : "Luxury Residences by Imtiaz in Dubailand",
    subtitle:
      locale === "fr"
        ? "Design Contemporain avec Vues Panoramiques et Équipements Premium"
        : "Contemporary Design with Panoramic Views and Premium Amenities",
    startingFrom: locale === "fr" ? "À partir de" : "Starting from",
    paymentPlan: locale === "fr" ? "Plan de Paiement" : "Payment Plan",
    years: locale === "fr" ? "Ans" : "Years",
    postHandover: locale === "fr" ? "(3 ans après livraison)" : "(3 years post handover)",
    contactSales: locale === "fr" ? "Réserver une Visite" : "Book a Viewing",
    explore: locale === "fr" ? "Explorer" : "Explore",
  }

// SEO-optimized image data
  const heroImage = {
    src: "/images/cove-edition-5-luxury-residences-dubailand-hero-2024.webp",
    alt: locale === "fr" 
      ? "Cove Edition 5 par Imtiaz - Résidences de luxe à Dubailand avec piscine à débordement sur le toit et vues panoramiques sur Dubaï, architecture moderne et balcons privés"
      : "Cove Edition 5 by Imtiaz - Luxury residences in Dubailand featuring rooftop infinity pool, panoramic Dubai views, modern architecture and private balconies",
    width: 1920,
    height: 1080,
  }

return (
    <section className="relative w-full h-screen overflow-hidden">
      {/* Optimized background with parallax effect */}
      <div
        className="absolute inset-0 z-0"
        style={{
          transform: `translateY(${scrollY * 0.15}px)`,
          transition: "transform 0.1s linear",
        }}
      >
        <OptimizedImage
          src={heroImage.src}
          alt={heroImage.alt}
          width={heroImage.width}
          height={heroImage.height}
          priority={true}
          className="w-full h-full object-cover"
          sizes="100vw"
          quality={90}
          placeholder="blur"
          blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wAARCAAIAAoDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAv/xAAhEAACAQMDBQAAAAAAAAAAAAABAgMABAUGIWGRkqGx0f/EABUBAQEAAAAAAAAAAAAAAAAAAAMF/8QAGhEAAgIDAAAAAAAAAAAAAAAAAAECEgMRkf/aAAwDAQACEQMRAD8AltJagyeH0AthI5xdrLcNM91BF5pX2HaH9bcfaSXWGaRmknyJckliyjqTzSlT54b6bk+h0R//2Q=="
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent" />
      </div>

{/* Main content container */}
      <div className="relative z-10 h-full flex flex-col">
        {/* Top spacer */}
        <div className="h-24 md:h-32" />

{/* Key information with Apple-style layout */}
          <div className="w-full max-w-4xl mx-auto grid grid-cols-2 gap-6 sm:gap-12 mb-8 sm:mb-12 animate-fade-in-delay-2">
            <div className="flex flex-col items-center">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70">{texts.startingFrom}</p>
              <p className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium text-white mt-2">700,000 AED</p>
            </div>

{/* CTA buttons with Apple-style */}
          <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 mt-4 sm:mt-6 animate-fade-in-delay-3 w-full sm:w-auto px-4 sm:px-0">
            <a
              href="#contact"
              className="rounded-full px-8 py-4 bg-white hover:bg-gray-200 text-black text-base font-medium w-full sm:min-w-[180px] shadow-sm transition-all text-center"
            >
              {texts.contactSales}
            </a>
            <a
              href="#about"
              className="rounded-full px-8 py-4 bg-blue-600 hover:bg-blue-800 text-white text-base font-medium w-full sm:min-w-[180px] transition-all text-center"
            >
              {texts.explore}
            </a>
          </div>
        </div>

{/* Bottom section with scroll indicator */}
        <div className="h-16 sm:h-24 flex justify-center items-end pb-8 sm:pb-12 animate-bounce-slow">
          <a
            href="#about"
            className="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white/10 backdrop-blur-md hover:bg-white/20 transition-colors duration-300"
            aria-label={locale === "fr" ? "Défiler pour en savoir plus" : "Scroll to learn more"}
          >
            <ChevronDown className="h-5 w-5 sm:h-6 sm:w-6 text-white" />
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/gallery-section-optimized.tsx" isMerged="true"
"use client"

import { useState, useRef, useEffect } from "react"
import OptimizedImage from "./optimized-image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { X } from 'lucide-react'

interface GallerySectionOptimizedProps {
  locale?: string
}

export default function GallerySectionOptimized({ locale = "en" }: GallerySectionOptimizedProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [activeTab, setActiveTab] = useState("exterior")
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

useEffect(() => {
    if (typeof document === "undefined") return

if (selectedImage) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

return () => {
      document.body.style.overflow = "auto"
    }
  }, [selectedImage])

const texts = {
    title: locale === "fr" ? "GALERIE" : "GALLERY",
    subtitle:
      locale === "fr"
        ? "Explorez les espaces magnifiques et le design exceptionnel de Cove Edition 5."
        : "Explore the stunning spaces and exceptional design of Cove Edition 5.",
    exterior: locale === "fr" ? "Extérieur" : "Exterior",
    interior: locale === "fr" ? "Intérieur" : "Interior",
    contactSales: locale === "fr" ? "Réserver une Visite" : "Book a Viewing",
  }

// SEO-optimized image data with proper naming and alt text
  const exteriorImages = [
    {
      src: "/images/cove-edition-5-facade-modern-architecture-dubailand-2024.webp",
      alt: locale === "fr"
        ? "Façade moderne de Cove Edition 5 à Dubailand avec architecture contemporaine, balcons privés et design élégant par Imtiaz Developments"
        : "Modern facade of Cove Edition 5 in Dubailand featuring contemporary architecture, private balconies and elegant design by Imtiaz Developments",
      width: 800,
      height: 600,
    },
    {
      src: "/images/cove-edition-5-rooftop-infinity-pool-dubai-skyline-view.webp",
      alt: locale === "fr"
        ? "Piscine à débordement sur le toit de Cove Edition 5 avec vue panoramique sur l'horizon de Dubaï et espaces de détente premium"
        : "Rooftop infinity pool at Cove Edition 5 with panoramic Dubai skyline views and premium relaxation areas",
      width: 800,
      height: 600,
    },
    {
      src: "/images/cove-edition-5-building-exterior-sunset-dubailand.webp",
      alt: locale === "fr"
        ? "Vue extérieure complète de Cove Edition 5 au coucher du soleil montrant l'ensemble du bâtiment résidentiel de luxe à Dubailand"
        : "Complete exterior view of Cove Edition 5 at sunset showing the full luxury residential building in Dubailand",
      width: 800,
      height: 600,
    },
    {
      src: "/images/cove-edition-5-aerial-view-dubailand-location-amenities.webp",
      alt: locale === "fr"
        ? "Vue aérienne de Cove Edition 5 montrant l'emplacement privilégié à Dubailand avec accès aux commodités et transport"
        : "Aerial view of Cove Edition 5 showing prime Dubailand location with access to amenities and transportation",
      width: 800,
      height: 600,
    },
  ]

const interiorImages = [
    {
      src: "/images/cove-edition-5-luxury-living-room-modern-furniture-dubai.webp",
      alt: locale === "fr" 
        ? "Salon de luxe Cove Edition 5 avec mobilier moderne, grandes fenêtres et finitions haut de gamme à Dubaï"
        : "Luxury living room at Cove Edition 5 with modern furniture, large windows and premium finishes in Dubai",
      width: 800,
      height: 600,
    },
    {
      src: "/images/cove-edition-5-gourmet-kitchen-marble-countertops-appliances.webp",
      alt: locale === "fr"
        ? "Cuisine gastronomique Cove Edition 5 avec comptoirs en marbre, électroménagers haut de gamme et design contemporain"
        : "Gourmet kitchen at Cove Edition 5 with marble countertops, premium appliances and contemporary design",
      width: 800,
      height: 600,
    },
    {
      src: "/images/cove-edition-5-master-bedroom-luxury-interior-dubai-views.webp",
      alt: locale === "fr"
        ? "Chambre principale de luxe Cove Edition 5 avec intérieur élégant et vues sur Dubaï depuis les grandes fenêtres"
        : "Luxury master bedroom at Cove Edition 5 with elegant interior and Dubai views from large windows",
      width: 800,
      height: 600,
    },
    {
      src: "/images/cove-edition-5-premium-bathroom-marble-finishes-spa-features.webp",
      alt: locale === "fr"
        ? "Salle de bain premium Cove Edition 5 avec finitions en marbre, équipements spa et design luxueux"
        : "Premium bathroom at Cove Edition 5 with marble finishes, spa features and luxurious design",
      width: 800,
      height: 600,
    },
  ]

const openImage = (src: string) => {
    setSelectedImage(src)
  }

const closeImage = () => {
    setSelectedImage(null)
  }

<TabsContent value="exterior" className="mt-0">
            <div
              className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 transition-all duration-1000 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              {exteriorImages.map((image, index) => (
                <div
                  key={index}
                  className="relative h-[200px] md:h-[300px] rounded-2xl overflow-hidden cursor-pointer"
                  onClick={() => openImage(image.src)}
                >
                  <OptimizedImage
                    src={image.src}
                    alt={image.alt}
                    width={image.width}
                    height={image.height}
                    className="w-full h-full object-cover transition-transform hover:scale-105 duration-700"
                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 25vw"
                    quality={85}
                  />
                </div>
              ))}
            </div>
          </TabsContent>

<TabsContent value="interior" className="mt-0">
            <div
              className={`grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-3 md:gap-6 transition-all duration-1000 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              {interiorImages.map((image, index) => (
                <div
                  key={index}
                  className="relative h-[200px] md:h-[300px] rounded-2xl overflow-hidden cursor-pointer"
                  onClick={() => openImage(image.src)}
                >
                  <OptimizedImage
                    src={image.src}
                    alt={image.alt}
                    width={image.width}
                    height={image.height}
                    className="w-full h-full object-cover transition-transform hover:scale-105 duration-700"
                    sizes="(max-width: 640px) 100vw, (max-width: 768px) 50vw, 25vw"
                    quality={85}
                  />
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>

{/* Lightbox Modal */}
      {selectedImage && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-4">
          <div className="relative w-full max-w-6xl max-h-[90vh] overflow-hidden">
            <button
              onClick={closeImage}
              className="absolute top-4 right-4 z-10 p-2 bg-black/50 rounded-full text-white hover:bg-black/70 transition-colors"
              aria-label={locale === "fr" ? "Fermer la galerie" : "Close gallery"}
            >
              <X className="h-6 w-6" />
            </button>
            <div className="relative w-full h-[80vh]">
              <OptimizedImage
                src={selectedImage}
                alt={locale === "fr" ? "Vue agrandie de la galerie Cove Edition 5" : "Enlarged gallery view of Cove Edition 5"}
                width={1200}
                height={800}
                className="w-full h-full object-contain"
                sizes="(max-width: 768px) 100vw, 90vw"
                quality={95}
              />
            </div>
          </div>
        </div>
      )}
    </section>
  )
}
[V0_FILE]xml:file="public/image-sitemap.xml" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  
  
  <url>
    <loc>https://coveedition5.com/</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-luxury-residences-dubailand-hero-2024.webp</image:loc>
      <image:title>Cove Edition 5 by Imtiaz - Luxury Residences in Dubailand</image:title>
      <image:caption>Premium luxury residential development in Dubailand featuring modern architecture, rooftop infinity pool, and panoramic Dubai views</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/image-license</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-facade-modern-architecture-dubailand-2024.webp</image:loc>
      <image:title>Cove Edition 5 Modern Facade Architecture</image:title>
      <image:caption>Contemporary building facade with private balconies and elegant design elements</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-rooftop-infinity-pool-dubai-skyline-view.webp</image:loc>
      <image:title>Rooftop Infinity Pool with Dubai Skyline Views</image:title>
      <image:caption>Luxury rooftop infinity pool offering panoramic views of Dubai skyline and premium relaxation areas</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
    </image:image>
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/#gallery</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-luxury-living-room-modern-furniture-dubai.webp</image:loc>
      <image:title>Luxury Living Room Interior Design</image:title>
      <image:caption>Spacious living room with modern furniture, large windows and premium finishes</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-gourmet-kitchen-marble-countertops-appliances.webp</image:loc>
      <image:title>Gourmet Kitchen with Marble Countertops</image:title>
      <image:caption>Modern kitchen featuring marble countertops, premium appliances and contemporary design</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
    </image:image>
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/cove-edition-6</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-6-front-view-fully-furnished-residences.webp</image:loc>
      <image:title>Cove Edition 6 Fully-Furnished Residences</image:title>
      <image:caption>Modern residential building offering fully-furnished apartments with family-friendly amenities</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-6-rooftop-pool-family-amenities.webp</image:loc>
      <image:title>Family-Friendly Rooftop Pool and Amenities</image:title>
      <image:caption>Rooftop pool area designed for families with children's play areas and safety features</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
    </image:image>
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/fr/</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-luxury-residences-dubailand-hero-2024.webp</image:loc>
      <image:title>Cove Edition 5 par Imtiaz - Résidences de Luxe à Dubailand</image:title>
      <image:caption>Développement résidentiel de luxe à Dubailand avec architecture moderne, piscine à débordement sur le toit et vues panoramiques sur Dubaï</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
    </image:image>
  </url>
  
</urlset>
[V0_FILE]typescriptreact:file="components/image-optimization-utils.tsx" isMerged="true"
"use client"

// Image optimization utilities and helpers

export interface ImageData {
  src: string
  alt: string
  width: number
  height: number
  priority?: boolean
  quality?: number
  sizes?: string
}

// Generate WebP and fallback sources
export const generateImageSources = (src: string, quality: number = 85) => {
  const baseName = src.replace(/\.[^/.]+$/, "")
  return {
    webp: `${baseName}.webp?q=${quality}`,
    fallback: `${baseName}.jpg?q=${quality}`,
  }
}

// Generate responsive image sizes
export const generateResponsiveSizes = (breakpoints: number[] = [640, 768, 1024, 1280, 1536, 1920]) => {
  return breakpoints.map(width => `(max-width: ${width}px) ${width}px`).join(", ") + ", 100vw"
}

// SEO-optimized alt text generator
export const generateSEOAltText = (
  propertyName: string,
  imageType: string,
  location: string,
  features: string[],
  locale: string = "en"
) => {
  const templates = {
    en: {
      hero: `${propertyName} - ${imageType} in ${location} featuring ${features.join(", ")}`,
      gallery: `${imageType} at ${propertyName} in ${location} with ${features.join(", ")}`,
      amenity: `${imageType} amenity at ${propertyName} offering ${features.join(", ")}`,
    },
    fr: {
      hero: `${propertyName} - ${imageType} à ${location} avec ${features.join(", ")}`,
      gallery: `${imageType} de ${propertyName} à ${location} avec ${features.join(", ")}`,
      amenity: `Équipement ${imageType} de ${propertyName} offrant ${features.join(", ")}`,
    },
  }

return templates[locale as keyof typeof templates]?.hero || templates.en.hero
}

// Image compression settings by use case
export const imageQualitySettings = {
  hero: 90,        // High quality for hero images
  gallery: 85,     // Good quality for gallery
  thumbnail: 75,   // Lower quality for thumbnails
  background: 80,  // Medium quality for backgrounds
  icon: 95,        // High quality for small icons
}

// Lazy loading intersection observer options
export const lazyLoadOptions = {
  root: null,
  rootMargin: "50px",
  threshold: 0.1,
}

// Generate blur placeholder data URL
export const generateBlurDataURL = (width: number, height: number) => {
  const canvas = document.createElement("canvas")
  canvas.width = width
  canvas.height = height
  const ctx = canvas.getContext("2d")
  
  if (ctx) {
    const gradient = ctx.createLinearGradient(0, 0, width, height)
    gradient.addColorStop(0, "#f3f4f6")
    gradient.addColorStop(1, "#e5e7eb")
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, width, height)
  }
  
  return canvas.toDataURL("image/jpeg", 0.1)
}

// Image performance monitoring
export const trackImagePerformance = (src: string, loadTime: number) => {
  if (typeof window !== "undefined" && window.gtag) {
    window.gtag("event", "image_load", {
      event_category: "Performance",
      event_label: src,
      value: Math.round(loadTime),
    })
  }
}

// Preload critical images
export const preloadCriticalImages = (images: string[]) => {
  if (typeof window === "undefined") return

images.forEach(src => {
    const link = document.createElement("link")
    link.rel = "preload"
    link.as = "image"
    link.href = src
    document.head.appendChild(link)
  })
}
[V0_FILE]typescriptreact:file="scripts/generate-image-metadata.js" isMerged="true"
// Node.js script to generate image metadata and optimize file names

import fs from 'fs'
import path from 'path'
import sharp from 'sharp'

const imageDirectory = './public/images'
const outputFile = './image-metadata.json'

// SEO-friendly naming conventions
const namingRules = {
  // Property name should be first
  propertyPrefix: 'cove-edition-5',
  
  // Descriptive keywords
  keywords: {
    exterior: ['facade', 'building', 'architecture', 'exterior'],
    interior: ['living-room', 'kitchen', 'bedroom', 'bathroom'],
    amenities: ['pool', 'gym', 'clubhouse', 'rooftop'],
    location: ['dubailand', 'dubai', 'uae'],
    features: ['luxury', 'modern', 'premium', 'panoramic-views']
  },
  
  // Year for freshness
  year: '2024',
  
  // Format: property-name-description-location-year.webp
  template: '{property}-{description}-{location}-{year}.webp'
}

async function generateImageMetadata() {
  const images = []
  const files = fs.readdirSync(imageDirectory)
  
  for (const file of files) {
    if (file.match(/\.(jpg|jpeg|png|webp)$/i)) {
      const filePath = path.join(imageDirectory, file)
      
      try {
        const metadata = await sharp(filePath).metadata()
        
        // Generate SEO-optimized filename
        const optimizedName = generateSEOFilename(file)
        
        // Generate alt text based on filename
        const altText = generateAltText(optimizedName)
        
        images.push({
          original: file,
          optimized: optimizedName,
          path: `/images/${optimizedName}`,
          width: metadata.width,
          height: metadata.height,
          format: metadata.format,
          size: metadata.size,
          altText: altText,
          title: generateTitle(optimizedName),
          description: generateDescription(optimizedName),
          keywords: extractKeywords(optimizedName),
          lastModified: fs.statSync(filePath).mtime.toISOString(),
        })
      } catch (error) {
        console.error(`Error processing ${file}:`, error)
      }
    }
  }
  
  // Write metadata to JSON file
  fs.writeFileSync(outputFile, JSON.stringify(images, null, 2))
  console.log(`Generated metadata for ${images.length} images`)
  
  return images
}

function generateSEOFilename(originalName) {
  // Remove extension
  const nameWithoutExt = originalName.replace(/\.[^/.]+$/, '')
  
  // Convert to lowercase and replace spaces/special chars with hyphens
  let seoName = nameWithoutExt
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-+|-+$/g, '')
  
  // Add property prefix if not present
  if (!seoName.includes('cove-edition')) {
    seoName = `cove-edition-5-${seoName}`
  }
  
  // Add location if not present
  if (!seoName.includes('dubai')) {
    seoName = `${seoName}-dubailand`
  }
  
  // Add year if not present
  if (!seoName.includes('2024')) {
    seoName = `${seoName}-2024`
  }
  
  return `${seoName}.webp`
}

function generateAltText(filename) {
  const parts = filename.replace('.webp', '').split('-')
  
  // Create descriptive alt text
  const propertyName = 'Cove Edition 5'
  const location = 'Dubailand'
  const features = []
  
  if (parts.includes('facade')) features.push('modern architecture')
  if (parts.includes('pool')) features.push('infinity pool')
  if (parts.includes('luxury')) features.push('luxury finishes')
  if (parts.includes('living')) features.push('spacious living areas')
  if (parts.includes('kitchen')) features.push('gourmet kitchen')
  if (parts.includes('bedroom')) features.push('elegant bedrooms')
  if (parts.includes('rooftop')) features.push('rooftop amenities')
  
  return `${propertyName} in ${location} featuring ${features.join(', ')}`
}

function generateTitle(filename) {
  const parts = filename.replace('.webp', '').split('-')
  return parts
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
}

function generateDescription(filename) {
  const altText = generateAltText(filename)
  return `${altText}. Premium real estate development by Imtiaz with flexible payment plans and modern amenities.`
}

function extractKeywords(filename) {
  const parts = filename.replace('.webp', '').split('-')
  const keywords = [
    'Cove Edition 5',
    'Imtiaz Developments',
    'Dubailand property',
    'Dubai real estate',
    'luxury apartments'
  ]
  
  // Add specific keywords based on filename
  if (parts.includes('pool')) keywords.push('infinity pool', 'swimming pool')
  if (parts.includes('facade')) keywords.push('modern architecture', 'building exterior')
  if (parts.includes('interior')) keywords.push('luxury interior', 'premium finishes')
  if (parts.includes('kitchen')) keywords.push('gourmet kitchen', 'modern appliances')
  
  return keywords
}

// Run the script
generateImageMetadata().catch(console.error)

export { generateImageMetadata, generateSEOFilename, generateAltText }
[V0_FILE]typescriptreact:file="components/sitemap-generator.tsx" isMerged="true"
"use client"

import { useEffect } from 'react'

interface SitemapEntry {
  url: string
  lastModified: string
  changeFrequency: 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never'
  priority: number
  images?: ImageEntry[]
}

interface ImageEntry {
  loc: string
  title: string
  caption: string
  geoLocation: string
  license: string
}

export function SitemapGenerator() {
  useEffect(() => {
    // Generate dynamic sitemap data
    const generateSitemapData = () => {
      const baseUrl = 'https://coveedition5.com'
      const currentDate = new Date().toISOString()

const sitemapData: SitemapEntry[] = [
        // Main pages
        {
          url: baseUrl,
          lastModified: currentDate,
          changeFrequency: 'weekly',
          priority: 1.0,
          images: [
            {
              loc: `${baseUrl}/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg`,
              title: 'Cove Edition 5 by Imtiaz - Luxury Residences in Dubailand',
              caption: 'Premium luxury residential development in Dubailand featuring modern architecture, rooftop infinity pool, and panoramic Dubai views by Imtiaz Developments',
              geoLocation: 'Dubailand, Dubai, UAE',
              license: `${baseUrl}/image-license`
            }
          ]
        },
        {
          url: `${baseUrl}/cove-edition-6`,
          lastModified: currentDate,
          changeFrequency: 'weekly',
          priority: 0.9,
          images: [
            {
              loc: `${baseUrl}/images/cove-edition-6-front-view.jpeg`,
              title: 'Cove Edition 6 Fully-Furnished Residences',
              caption: 'Modern residential building offering fully-furnished apartments with family-friendly amenities',
              geoLocation: 'Dubailand, Dubai, UAE',
              license: `${baseUrl}/image-license`
            }
          ]
        }
      ]

return sitemapData
    }

// Submit sitemap to search engines
    const submitSitemap = async () => {
      const sitemapUrl = 'https://coveedition5.com/sitemap.xml'
      
      // Google Search Console
      try {
        await fetch(`https://www.google.com/ping?sitemap=${encodeURIComponent(sitemapUrl)}`)
        console.log('Sitemap submitted to Google')
      } catch (error) {
        console.error('Error submitting to Google:', error)
      }

// Bing Webmaster Tools
      try {
        await fetch(`https://www.bing.com/ping?sitemap=${encodeURIComponent(sitemapUrl)}`)
        console.log('Sitemap submitted to Bing')
      } catch (error) {
        console.error('Error submitting to Bing:', error)
      }
    }

// Generate and submit sitemap
    const sitemapData = generateSitemapData()
    console.log('Generated sitemap data:', sitemapData)
    
    // Submit to search engines (only in production)
    if (process.env.NODE_ENV === 'production') {
      submitSitemap()
    }
  }, [])

return null // This component doesn't render anything
}

// Utility function to validate sitemap
export const validateSitemap = (sitemapData: SitemapEntry[]) => {
  const errors: string[] = []

sitemapData.forEach((entry, index) => {
    // Validate URL
    if (!entry.url || !entry.url.startsWith('http')) {
      errors.push(`Entry ${index}: Invalid URL`)
    }

// Validate priority
    if (entry.priority < 0 || entry.priority > 1) {
      errors.push(`Entry ${index}: Priority must be between 0 and 1`)
    }

// Validate change frequency
    const validFrequencies = ['always', 'hourly', 'daily', 'weekly', 'monthly', 'yearly', 'never']
    if (!validFrequencies.includes(entry.changeFrequency)) {
      errors.push(`Entry ${index}: Invalid change frequency`)
    }

// Validate images
    if (entry.images) {
      entry.images.forEach((image, imageIndex) => {
        if (!image.loc || !image.loc.startsWith('http')) {
          errors.push(`Entry ${index}, Image ${imageIndex}: Invalid image URL`)
        }
        if (!image.title || image.title.length < 10) {
          errors.push(`Entry ${index}, Image ${imageIndex}: Title too short`)
        }
        if (!image.caption || image.caption.length < 20) {
          errors.push(`Entry ${index}, Image ${imageIndex}: Caption too short`)
        }
      })
    }
  })

return errors
}
[V0_FILE]typescriptreact:file="components/robots-txt-generator.tsx" isMerged="true"
"use client"

export function generateRobotsTxt() {
  const robotsTxt = `# Robots.txt for Cove Edition 5
# Generated on ${new Date().toISOString()}

User-agent: *
Allow: /

# Sitemaps
Sitemap: https://coveedition5.com/sitemap.xml
Sitemap: https://coveedition5.com/sitemap-pages.xml
Sitemap: https://coveedition5.com/sitemap-images.xml
Sitemap: https://coveedition5.com/sitemap-fr.xml

# Crawl-delay for respectful crawling
Crawl-delay: 1

# Disallow admin and private areas
Disallow: /admin/
Disallow: /private/
Disallow: /_next/
Disallow: /api/

# Allow important pages
Allow: /
Allow: /fr/
Allow: /cove-edition-6
Allow: /fr/cove-edition-6
Allow: /privacy-policy
Allow: /terms-of-use
Allow: /sitemap

# Image crawling
User-agent: Googlebot-Image
Allow: /images/
Allow: /public/images/

# Specific bot instructions
User-agent: Bingbot
Crawl-delay: 2

User-agent: Slurp
Crawl-delay: 2

# Block bad bots
User-agent: AhrefsBot
Disallow: /

User-agent: MJ12bot
Disallow: /

User-agent: DotBot
Disallow: /

# Host directive
Host: https://coveedition5.com`

return robotsTxt
}
[V0_FILE]typescriptreact:file="scripts/submit-sitemap-to-google.js" isMerged="true"
import { google } from 'googleapis'
import fs from 'fs'
import path from 'path'

// Configuration Google Search Console
const SITE_URL = 'https://coveedition5.com'
const SERVICE_ACCOUNT_KEY_FILE = './google-service-account.json'

// Sitemaps à soumettre
const SITEMAPS = [
  `${SITE_URL}/sitemap.xml`,
  `${SITE_URL}/sitemap-pages.xml`,
  `${SITE_URL}/sitemap-fr.xml`,
  `${SITE_URL}/sitemap-images.xml`
]

async function submitSitemapsToGoogle() {
  try {
    console.log('🚀 Démarrage de la soumission des sitemaps à Google Search Console...')

// Authentification avec Google API
    const auth = new google.auth.GoogleAuth({
      keyFile: SERVICE_ACCOUNT_KEY_FILE,
      scopes: ['https://www.googleapis.com/auth/webmasters']
    })

const searchconsole = google.searchconsole({
      version: 'v1',
      auth: auth
    })

// Soumission de chaque sitemap
    for (const sitemapUrl of SITEMAPS) {
      console.log(`📤 Soumission du sitemap: ${sitemapUrl}`)
      
      try {
        await searchconsole.sitemaps.submit({
          siteUrl: SITE_URL,
          feedpath: sitemapUrl
        })
        
        console.log(`✅ Sitemap soumis avec succès: ${sitemapUrl}`)
      } catch (error) {
        console.error(`❌ Erreur lors de la soumission de ${sitemapUrl}:`, error.message)
      }
    }

// Vérification du statut des sitemaps
    console.log('\n📊 Vérification du statut des sitemaps...')
    
    const response = await searchconsole.sitemaps.list({
      siteUrl: SITE_URL
    })

if (response.data.sitemap) {
      response.data.sitemap.forEach(sitemap => {
        console.log(`📋 Sitemap: ${sitemap.feedpath}`)
        console.log(`   Status: ${sitemap.type}`)
        console.log(`   Soumis: ${sitemap.lastSubmitted}`)
        console.log(`   URLs soumises: ${sitemap.contents?.[0]?.submitted || 'N/A'}`)
        console.log(`   URLs indexées: ${sitemap.contents?.[0]?.indexed || 'N/A'}`)
        console.log('---')
      })
    }

console.log('🎉 Soumission des sitemaps terminée!')

} catch (error) {
    console.error('❌ Erreur générale:', error.message)
    
    if (error.message.includes('service account')) {
      console.log('\n💡 Instructions pour configurer l\'authentification:')
      console.log('1. Allez sur Google Cloud Console')
      console.log('2. Créez un compte de service')
      console.log('3. Téléchargez le fichier JSON des clés')
      console.log('4. Renommez-le "google-service-account.json"')
      console.log('5. Ajoutez le compte de service à votre propriété Search Console')
    }
  }
}

// Fonction pour vérifier l'indexation
async function checkIndexationStatus() {
  try {
    const auth = new google.auth.GoogleAuth({
      keyFile: SERVICE_ACCOUNT_KEY_FILE,
      scopes: ['https://www.googleapis.com/auth/webmasters']
    })

const searchconsole = google.searchconsole({
      version: 'v1',
      auth: auth
    })

console.log('🔍 Vérification de l\'indexation des pages...')

const pages = [
      SITE_URL,
      `${SITE_URL}/cove-edition-6`,
      `${SITE_URL}/fr`,
      `${SITE_URL}/fr/cove-edition-6`
    ]

for (const pageUrl of pages) {
      try {
        const response = await searchconsole.urlInspection.index.inspect({
          inspectionUrl: pageUrl,
          siteUrl: SITE_URL
        })

console.log(`📄 ${pageUrl}:`)
        console.log(`   Indexé: ${response.data.indexStatusResult?.verdict || 'Inconnu'}`)
        console.log(`   Dernière exploration: ${response.data.indexStatusResult?.lastCrawlTime || 'N/A'}`)
        console.log('---')
      } catch (error) {
        console.log(`📄 ${pageUrl}: Erreur lors de la vérification`)
      }
    }

} catch (error) {
    console.error('❌ Erreur lors de la vérification:', error.message)
  }
}

// Exécution du script
if (process.argv[2] === 'check') {
  checkIndexationStatus()
} else {
  submitSitemapsToGoogle()
}

export { submitSitemapsToGoogle, checkIndexationStatus }
[V0_FILE]json:file="google-service-account-template.json" isMerged="true"
{
  "type": "service_account",
  "project_id": "your-project-id",
  "private_key_id": "your-private-key-id",
  "private_key": "-----BEGIN PRIVATE KEY-----\nYOUR_PRIVATE_KEY\n-----END PRIVATE KEY-----\n",
  "client_email": "your-service-account@your-project.iam.gserviceaccount.com",
  "client_id": "your-client-id",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/your-service-account%40your-project.iam.gserviceaccount.com"
}
[V0_FILE]typescriptreact:file="components/sitemap-monitor.tsx" isMerged="true"
'use client'

import { useState, useEffect } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { CheckCircle, AlertCircle, Clock, ExternalLink } from 'lucide-react'

interface SitemapStatus {
  url: string
  status: 'submitted' | 'indexed' | 'error' | 'pending'
  lastSubmitted?: string
  urlsSubmitted?: number
  urlsIndexed?: number
  errors?: string[]
}

export default function SitemapMonitor() {
  const [sitemaps, setSitemaps] = useState<SitemapStatus[]>([
    {
      url: 'https://coveedition5.com/sitemap.xml',
      status: 'submitted',
      lastSubmitted: '2024-01-08T12:00:00Z',
      urlsSubmitted: 4,
      urlsIndexed: 4
    },
    {
      url: 'https://coveedition5.com/sitemap-pages.xml',
      status: 'indexed',
      lastSubmitted: '2024-01-08T12:00:00Z',
      urlsSubmitted: 5,
      urlsIndexed: 5
    },
    {
      url: 'https://coveedition5.com/sitemap-fr.xml',
      status: 'indexed',
      lastSubmitted: '2024-01-08T12:00:00Z',
      urlsSubmitted: 2,
      urlsIndexed: 2
    },
    {
      url: 'https://coveedition5.com/sitemap-images.xml',
      status: 'pending',
      lastSubmitted: '2024-01-08T12:00:00Z',
      urlsSubmitted: 6,
      urlsIndexed: 3
    }
  ])

const [isSubmitting, setIsSubmitting] = useState(false)

const getStatusIcon = (status: string) => {
    switch (status) {
      case 'indexed':
        return <CheckCircle className="h-5 w-5 text-green-500" />
      case 'submitted':
        return <Clock className="h-5 w-5 text-yellow-500" />
      case 'pending':
        return <Clock className="h-5 w-5 text-blue-500" />
      case 'error':
        return <AlertCircle className="h-5 w-5 text-red-500" />
      default:
        return <Clock className="h-5 w-5 text-gray-500" />
    }
  }

const getStatusText = (status: string) => {
    switch (status) {
      case 'indexed':
        return 'Indexé'
      case 'submitted':
        return 'Soumis'
      case 'pending':
        return 'En attente'
      case 'error':
        return 'Erreur'
      default:
        return 'Inconnu'
    }
  }

const handleSubmitSitemaps = async () => {
    setIsSubmitting(true)
    
    try {
      // Simulation de la soumission
      await new Promise(resolve => setTimeout(resolve, 2000))
      
      // Mise à jour du statut
      setSitemaps(prev => prev.map(sitemap => ({
        ...sitemap,
        status: 'submitted',
        lastSubmitted: new Date().toISOString()
      })))
      
      console.log('✅ Sitemaps soumis avec succès!')
    } catch (error) {
      console.error('❌ Erreur lors de la soumission:', error)
    } finally {
      setIsSubmitting(false)
    }
  }

const totalUrls = sitemaps.reduce((sum, sitemap) => sum + (sitemap.urlsSubmitted || 0), 0)
  const indexedUrls = sitemaps.reduce((sum, sitemap) => sum + (sitemap.urlsIndexed || 0), 0)
  const indexationRate = totalUrls > 0 ? Math.round((indexedUrls / totalUrls) * 100) : 0

return (
    <div className="space-y-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">URLs Totales</p>
                <p className="text-2xl font-bold">{totalUrls}</p>
              </div>
              <ExternalLink className="h-8 w-8 text-blue-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">URLs Indexées</p>
                <p className="text-2xl font-bold text-green-600">{indexedUrls}</p>
              </div>
              <CheckCircle className="h-8 w-8 text-green-500" />
            </div>
          </CardContent>
        </Card>

<Card>
          <CardContent className="p-6">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium text-gray-600">Taux d'Indexation</p>
                <p className="text-2xl font-bold text-blue-600">{indexationRate}%</p>
              </div>
              <div className="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center">
                <span className="text-sm font-bold text-blue-600">{indexationRate}%</span>
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

<Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle>Statut des Sitemaps</CardTitle>
          <Button 
            onClick={handleSubmitSitemaps}
            disabled={isSubmitting}
            className="bg-blue-600 hover:bg-blue-700"
          >
            {isSubmitting ? 'Soumission...' : 'Soumettre à Google'}
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-4">
            {sitemaps.map((sitemap, index) => (
              <div key={index} className="flex items-center justify-between p-4 border rounded-lg">
                <div className="flex items-center space-x-3">
                  {getStatusIcon(sitemap.status)}
                  <div>
                    <p className="font-medium">{sitemap.url.split('/').pop()}</p>
                    <p className="text-sm text-gray-500">
                      {sitemap.urlsSubmitted} URLs soumises • {sitemap.urlsIndexed} indexées
                    </p>
                  </div>
                </div>
                <div className="text-right">
                  <p className="text-sm font-medium">{getStatusText(sitemap.status)}</p>
                  {sitemap.lastSubmitted && (
                    <p className="text-xs text-gray-500">
                      {new Date(sitemap.lastSubmitted).toLocaleDateString('fr-FR')}
                    </p>
                  )}
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>

<Card>
        <CardHeader>
          <CardTitle>Instructions de Configuration</CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <div className="bg-blue-50 p-4 rounded-lg">
            <h4 className="font-semibold text-blue-900 mb-2">1. Configuration Google Search Console</h4>
            <ul className="text-sm text-blue-800 space-y-1">
              <li>• Créez un compte de service dans Google Cloud Console</li>
              <li>• Téléchargez le fichier JSON des clés</li>
              <li>• Ajoutez le compte de service à votre propriété Search Console</li>
              <li>• Placez le fichier JSON dans votre projet</li>
            </ul>
          </div>
          
          <div className="bg-green-50 p-4 rounded-lg">
            <h4 className="font-semibold text-green-900 mb-2">2. Soumission Automatique</h4>
            <p className="text-sm text-green-800">
              Utilisez le script Node.js pour soumettre automatiquement vos sitemaps et surveiller leur statut d'indexation.
            </p>
          </div>

<div className="bg-yellow-50 p-4 rounded-lg">
            <h4 className="font-semibold text-yellow-900 mb-2">3. Surveillance Continue</h4>
            <p className="text-sm text-yellow-800">
              Configurez des alertes pour être notifié des changements de statut d'indexation et des erreurs potentielles.
            </p>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="next.config.mjs" isEdit="true" isQuickEdit="true" isMerged="true"
/** @type {import('next').NextConfig} */
const nextConfig = {
  eslint: {
    ignoreDuringBuilds: true,
  },
  typescript: {
    ignoreBuildErrors: true,
  },
  images: {
    // Enable modern image formats
    formats: ['image/webp', 'image/avif'],
    
    // Configure image domains
    domains: [
      'coveedition5.com',
      'hebbkx1anhila5yf.public.blob.vercel-storage.com'
    ],
    
    // Image sizes for responsive images
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
    
    // Minimize layout shift
    minimumCacheTTL: 31536000, // 1 year
    
    // Disable static imports for better control
    disableStaticImages: false,
    
    // Enable experimental features
    dangerouslyAllowSVG: false,
    contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
    
    // For deployment compatibility
    unoptimized: true,
  },
  
  // Enable compression
  compress: true,
  
  // Optimize for production
  experimental: {
    optimizePackageImports: ['lucide-react'],
  },
  
  // Headers for image optimization
  async headers() {
    return [
      {
        source: '/images/:path*',
        headers: [
          {
            key: 'Cache-Control',
            value: 'public, max-age=31536000, immutable',
          },
          {
            key: 'X-Content-Type-Options',
            value: 'nosniff',
          },
        ],
      },
    ]
  },
}

export default nextConfig
[V0_FILE]xml:file="public/sitemap.xml" isEdit="true" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://coveedition5.com/sitemap-pages.xml</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://coveedition5.com/sitemap-fr.xml</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
  </sitemap>
  <sitemap>
    <loc>https://coveedition5.com/sitemap-images.xml</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
  </sitemap>
</sitemapindex>
[V0_FILE]xml:file="public/sitemap-pages.xml" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  
  
  <url>
    <loc>https://coveedition5.com/</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://coveedition5.com/" />
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/cove-edition-6</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/cove-edition-6" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/cove-edition-6" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://coveedition5.com/cove-edition-6" />
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/#about</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#about" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#about" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/#amenities</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#amenities" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#amenities" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/#gallery</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#gallery" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#gallery" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/#location</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#location" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#location" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/#payment</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#payment" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#payment" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/#units</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#units" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#units" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/#contact</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#contact" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#contact" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/#cove-edition-6</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#cove-edition-6" />
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#cove-edition-6" />
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/privacy-policy</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.3</priority>
  </url>
  
  <url>
    <loc>https://coveedition5.com/terms-of-use</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
    <changefreq>yearly</changefreq>
    <priority>0.3</priority>
  </url>
  
  <url>
    <loc>https://coveedition5.com/sitemap</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.4</priority>
  </url>
  
</urlset>
[V0_FILE]xml:file="public/sitemap-fr.xml" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:xhtml="http://www.w3.org/1999/xhtml">
  
  
  <url>
    <loc>https://coveedition5.com/fr/</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://coveedition5.com/" />
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/fr/cove-edition-6</loc>
    <lastmod>2025-01-08T12:31:48+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/cove-edition-6" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/cove-edition-6" />
    <xhtml:link rel="alternate" hreflang="x-default" href="https://coveedition5.com/cove-edition-6" />
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/fr/#about</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#about" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#about" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/fr/#amenities</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#amenities" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#amenities" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/fr/#gallery</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#gallery" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#gallery" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/fr/#location</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#location" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#location" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/fr/#payment</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#payment" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#payment" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/fr/#units</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#units" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#units" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/fr/#contact</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#contact" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#contact" />
  </url>
  
  <url>
    <loc>https://coveedition5.com/fr/#cove-edition-6</loc>
    <lastmod>2025-01-08T12:20:37+00:00</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.9</priority>
    <xhtml:link rel="alternate" hreflang="en" href="https://coveedition5.com/#cove-edition-6" />
    <xhtml:link rel="alternate" hreflang="fr" href="https://coveedition5.com/fr/#cove-edition-6" />
  </url>
  
</urlset>
[V0_FILE]xml:file="public/sitemap-images.xml" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  
  
  <url>
    <loc>https://coveedition5.com/</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg</image:loc>
      <image:title>Cove Edition 5 Luxury Residences by Imtiaz in Dubailand - Premium Apartments with Modern Architecture</image:title>
      <image:caption>Stunning facade view of Cove Edition 5 luxury residential development by Imtiaz Developments, featuring contemporary architecture, private balconies, and premium finishes in the heart of Dubailand, Dubai</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/dubai-luxury-pool-burj-khalifa-view.jpeg</image:loc>
      <image:title>Dubai Luxury Infinity Pool with Burj Khalifa View - Premium Amenities at Cove Edition 5</image:title>
      <image:caption>Breathtaking rooftop infinity pool overlooking Dubai skyline with iconic Burj Khalifa view, exclusive amenity at Cove Edition 5 luxury residences offering residents world-class recreational facilities</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/dubai-skyline-sunset-burj-khalifa-view.jpeg</image:loc>
      <image:title>Dubai Skyline Sunset with Burj Khalifa View</image:title>
      <image:caption>Spectacular sunset view of Dubai skyline featuring Burj Khalifa and downtown Dubai from Cove Edition 5 luxury residences in Dubailand</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-aerial-view.jpeg</image:loc>
      <image:title>Cove Edition 5 Aerial View</image:title>
      <image:caption>Aerial perspective of Cove Edition 5 luxury residential development in Dubailand showing modern architecture and surrounding amenities</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-facade-front.jpeg</image:loc>
      <image:title>Cove Edition 5 Front Facade</image:title>
      <image:caption>Modern front facade of Cove Edition 5 featuring contemporary design elements, private balconies, and elegant architectural details</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-sunset-view.jpeg</image:loc>
      <image:title>Cove Edition 5 Sunset View</image:title>
      <image:caption>Beautiful sunset view of Cove Edition 5 residential building showcasing the golden hour lighting and architectural beauty</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-imtiaz-angle.jpeg</image:loc>
      <image:title>Cove Edition 5 by Imtiaz - Architectural Angle</image:title>
      <image:caption>Unique architectural angle of Cove Edition 5 by Imtiaz Developments highlighting the modern design and structural elegance</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-6-front-view.jpeg</image:loc>
      <image:title>Cove Edition 6 by Imtiaz - Modern Family Residences in Dubailand with Premium Architecture</image:title>
      <image:caption>Contemporary front elevation of Cove Edition 6 luxury family residences by Imtiaz Developments, showcasing modern architectural design, spacious balconies, and premium building materials in Dubailand</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/#gallery</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-luxury-studio-apartment.jpeg</image:loc>
      <image:title>Cove Edition 5 Luxury Studio Apartment</image:title>
      <image:caption>Elegant studio apartment interior at Cove Edition 5 featuring modern furnishings, premium finishes, and optimal space utilization</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/dubai-skyline-burj-khalifa-view.jpeg</image:loc>
      <image:title>Dubai Skyline Burj Khalifa View from Cove Edition 5</image:title>
      <image:caption>Panoramic view of Dubai skyline and Burj Khalifa from Cove Edition 5 apartments offering residents spectacular city vistas</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/luxury-kitchen-dining-area.jpeg</image:loc>
      <image:title>Luxury Kitchen and Dining Area</image:title>
      <image:caption>Modern luxury kitchen and dining area at Cove Edition 5 with premium appliances, marble countertops, and contemporary design</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/luxury-bedroom-design.jpeg</image:loc>
      <image:title>Luxury Bedroom Design</image:title>
      <image:caption>Sophisticated bedroom design at Cove Edition 5 featuring premium furnishings, elegant decor, and comfortable living spaces</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-corner-view.jpeg</image:loc>
      <image:title>Cove Edition 5 Corner View</image:title>
      <image:caption>Corner perspective of Cove Edition 5 building showcasing the architectural design and surrounding landscape in Dubailand</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-facade-detail.jpeg</image:loc>
      <image:title>Cove Edition 5 Facade Detail</image:title>
      <image:caption>Detailed view of Cove Edition 5 facade highlighting the architectural elements, balcony designs, and modern construction quality</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-facade-view.jpeg</image:loc>
      <image:title>Cove Edition 5 Facade View</image:title>
      <image:caption>Complete facade view of Cove Edition 5 residential building displaying the full architectural design and modern aesthetics</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/luxury-living-room-design.jpeg</image:loc>
      <image:title>Luxury Living Room Design</image:title>
      <image:caption>Spacious luxury living room at Cove Edition 5 with contemporary furniture, large windows, and premium interior design elements</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-lateral-view.jpeg</image:loc>
      <image:title>Cove Edition 5 Lateral View</image:title>
      <image:caption>Side view of Cove Edition 5 building showing the architectural profile and integration with the Dubailand landscape</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-5-rooftop-infinity-pool.jpeg</image:loc>
      <image:title>Cove Edition 5 Rooftop Infinity Pool</image:title>
      <image:caption>Stunning rooftop infinity pool at Cove Edition 5 offering residents luxury amenities with panoramic Dubai views</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/cove-edition-6</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-6-rooftop-pool.jpeg</image:loc>
      <image:title>Cove Edition 6 Rooftop Infinity Pool - Family-Friendly Luxury Amenities in Dubai</image:title>
      <image:caption>Spectacular rooftop infinity pool at Cove Edition 6 designed for families, featuring safe swimming areas, lounge spaces, and panoramic Dubai views, perfect for family recreation and relaxation</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-6-facade-balconies.jpeg</image:loc>
      <image:title>Cove Edition 6 Facade with Private Balconies - Modern Family Living Spaces by Imtiaz</image:title>
      <image:caption>Elegant facade design of Cove Edition 6 featuring spacious private balconies for each residence, modern architectural elements, and family-oriented living spaces designed by Imtiaz Developments</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-6-aerial-view.jpeg</image:loc>
      <image:title>Cove Edition 6 Aerial View - Strategic Location in Dubailand with Future Metro Connectivity</image:title>
      <image:caption>Bird's eye view of Cove Edition 6 development showing strategic location in Dubailand with excellent connectivity, green spaces, and proximity to future metro stations, ideal for growing families</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/cove-edition-6-side-view.jpeg</image:loc>
      <image:title>Cove Edition 6 Side View</image:title>
      <image:caption>Side perspective of Cove Edition 6 building highlighting the architectural design and family-oriented features</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/#amenities</loc>
    <image:image>
      <image:loc>https://coveedition5.com/luxury-apartment-living-room.png</image:loc>
      <image:title>Luxury Apartment Living Room</image:title>
      <image:caption>Premium living room interior featuring modern furniture, elegant design, and luxury finishes at Cove Edition developments</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/luxury-apartment-bathroom.png</image:loc>
      <image:title>Luxury Apartment Bathroom</image:title>
      <image:caption>Sophisticated bathroom design with premium fixtures, marble finishes, and modern amenities in Cove Edition apartments</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/luxury-rooftop-infinity-pool.png</image:loc>
      <image:title>Luxury Rooftop Infinity Pool</image:title>
      <image:caption>Stunning rooftop infinity pool with panoramic Dubai views, premium lounging areas, and luxury pool amenities</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/modern-gym-equipment.png</image:loc>
      <image:title>Modern Gym Equipment</image:title>
      <image:caption>State-of-the-art fitness center with modern gym equipment and professional training facilities for residents</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/luxury-clubhouse-lounge.png</image:loc>
      <image:title>Luxury Clubhouse Lounge</image:title>
      <image:caption>Elegant clubhouse lounge area with premium furnishings, social spaces, and luxury amenities for residents</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/outdoor-bbq-dining.png</image:loc>
      <image:title>Outdoor BBQ and Dining Area</image:title>
      <image:caption>Outdoor barbecue and dining facilities with covered seating areas and premium outdoor kitchen amenities</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
  </url>
  
  
  <url>
    <loc>https://coveedition5.com/#units</loc>
    <image:image>
      <image:loc>https://coveedition5.com/images/PalmSignatureRealEstate-CoveEdition5-Studio-FloorPlan.webp</image:loc>
      <image:title>Cove Edition 5 Studio Floor Plan</image:title>
      <image:caption>Detailed studio apartment floor plan at Cove Edition 5 showing optimal space utilization and modern layout design</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/PalmSignatureRealEstate-CoveEdition5-1Bedroom-FloorPlan.webp</image:loc>
      <image:title>Cove Edition 5 One Bedroom Floor Plan</image:title>
      <image:caption>Comprehensive one-bedroom apartment floor plan featuring spacious living areas, modern kitchen, and private bedroom</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
    
    <image:image>
      <image:loc>https://coveedition5.com/images/PalmSignatureRealEstate-CoveEdition5-2Bedroom-FloorPlan.webp</image:loc>
      <image:title>Cove Edition 5 Two Bedroom Floor Plan</image:title>
      <image:caption>Detailed two-bedroom apartment floor plan with master suite, guest bedroom, spacious living areas, and modern amenities</image:caption>
      <image:geo_location>Dubailand, Dubai, UAE</image:geo_location>
      <image:license>https://coveedition5.com/terms-of-use</image:license>
    </image:image>
  </url>
  
</urlset>
[V0_FILE]plaintext:file="public/robots.txt" isEdit="true" isMerged="true"
# Robots.txt for CoveEdition5.com
# Optimized for SEO and crawl efficiency

User-agent: *
Allow: /

# Allow all major search engines
User-agent: Googlebot
Allow: /
Crawl-delay: 1

User-agent: Bingbot
Allow: /
Crawl-delay: 1

User-agent: Slurp
Allow: /
Crawl-delay: 2

User-agent: DuckDuckBot
Allow: /
Crawl-delay: 1

User-agent: Baiduspider
Allow: /
Crawl-delay: 2

User-agent: YandexBot
Allow: /
Crawl-delay: 2

# Block problematic bots
User-agent: AhrefsBot
Disallow: /

User-agent: MJ12bot
Disallow: /

User-agent: DotBot
Disallow: /

User-agent: SemrushBot
Disallow: /

# Block AI training bots
User-agent: GPTBot
Disallow: /

User-agent: ChatGPT-User
Disallow: /

User-agent: CCBot
Disallow: /

User-agent: anthropic-ai
Disallow: /

User-agent: Claude-Web
Disallow: /

# Disallow admin and private areas
Disallow: /admin/
Disallow: /api/
Disallow: /_next/
Disallow: /private/

# Allow important files
Allow: /sitemap.xml
Allow: /sitemap-*.xml
Allow: /robots.txt
Allow: /favicon.ico
Allow: /images/

# Sitemaps
Sitemap: https://coveedition5.com/sitemap.xml
Sitemap: https://coveedition5.com/sitemap-pages.xml
Sitemap: https://coveedition5.com/sitemap-fr.xml
Sitemap: https://coveedition5.com/sitemap-images.xml

# Host declaration
Host: https://coveedition5.com
[V0_FILE]typescriptreact:file="app/sitemap.ts" isEdit="true" isMerged="true"
import { MetadataRoute } from 'next'

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = 'https://coveedition5.com'
  
  return [
    {
      url: baseUrl,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 1,
      alternates: {
        languages: {
          en: baseUrl,
          fr: `${baseUrl}/fr`,
        },
      },
    },
    {
      url: `${baseUrl}/cove-edition-6`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
      alternates: {
        languages: {
          en: `${baseUrl}/cove-edition-6`,
          fr: `${baseUrl}/fr/cove-edition-6`,
        },
      },
    },
    {
      url: `${baseUrl}/fr`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
      alternates: {
        languages: {
          en: baseUrl,
          fr: `${baseUrl}/fr`,
        },
      },
    },
    {
      url: `${baseUrl}/fr/cove-edition-6`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
      alternates: {
        languages: {
          en: `${baseUrl}/cove-edition-6`,
          fr: `${baseUrl}/fr/cove-edition-6`,
        },
      },
    },
    {
      url: `${baseUrl}/privacy-policy`,
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.3,
    },
    {
      url: `${baseUrl}/terms-of-use`,
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.3,
    },
    {
      url: `${baseUrl}/sitemap`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.3,
    },
  ]
}
[V0_FILE]typescriptreact:file="components/ui/button.tsx" isEdit="true" isMerged="true"
import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? Slot : "button"
    return (
      <Comp
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }
[V0_FILE]typescriptreact:file="components/ui/card.tsx" isEdit="true" isMerged="true"
import * as React from "react"

import { cn } from "@/lib/utils"

const Card = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn(
      "rounded-lg border bg-card text-card-foreground shadow-sm",
      className
    )}
    {...props}
  />
))
Card.displayName = "Card"

const CardHeader = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex flex-col space-y-1.5 p-6", className)}
    {...props}
  />
))
CardHeader.displayName = "CardHeader"

const CardTitle = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLHeadingElement>
>(({ className, ...props }, ref) => (
  <h3
    ref={ref}
    className={cn(
      "text-2xl font-semibold leading-none tracking-tight",
      className
    )}
    {...props}
  />
))
CardTitle.displayName = "CardTitle"

const CardDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
CardDescription.displayName = "CardDescription"

const CardContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
))
CardContent.displayName = "CardContent"

const CardFooter = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
  <div
    ref={ref}
    className={cn("flex items-center p-6 pt-0", className)}
    {...props}
  />
))
CardFooter.displayName = "CardFooter"

export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
[V0_FILE]typescriptreact:file="lib/utils.ts" isEdit="true" isMerged="true"
import { type ClassValue, clsx } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}
[V0_FILE]typescriptreact:file="components/theme-provider.tsx" isEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { ThemeProvider as NextThemesProvider } from "next-themes"
import { type ThemeProviderProps } from "next-themes"

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
}
[V0_FILE]typescriptreact:file="hooks/use-mobile.ts" isEdit="true" isMerged="true"
import * as React from "react"

const MOBILE_BREAKPOINT = 768

export function useIsMobile() {
  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)

React.useEffect(() => {
    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
    const onChange = () => {
      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    }
    mql.addEventListener("change", onChange)
    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
    return () => mql.removeEventListener("change", onChange)
  }, [])

return !!isMobile
}
[V0_FILE]typescriptreact:file="hooks/use-toast.ts" isEdit="true" isMerged="true"
"use client"

import * as React from "react"

import type {
  ToastActionElement,
  ToastProps,
} from "@/components/ui/toast"

const TOAST_LIMIT = 1
const TOAST_REMOVE_DELAY = 1000000

type ToasterToast = ToastProps & {
  id: string
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
}

const actionTypes = {
  ADD_TOAST: "ADD_TOAST",
  UPDATE_TOAST: "UPDATE_TOAST",
  DISMISS_TOAST: "DISMISS_TOAST",
  REMOVE_TOAST: "REMOVE_TOAST",
} as const

let count = 0

function genId() {
  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
}

type ActionType = typeof actionTypes

type Action =
  | {
      type: ActionType["ADD_TOAST"]
      toast: ToasterToast
    }
  | {
      type: ActionType["UPDATE_TOAST"]
      toast: Partial<ToasterToast>
    }
  | {
      type: ActionType["DISMISS_TOAST"]
      toastId?: ToasterToast["id"]
    }
  | {
      type: ActionType["REMOVE_TOAST"]
      toastId?: ToasterToast["id"]
    }

interface State {
  toasts: ToasterToast[]
}

const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()

const addToRemoveQueue = (toastId: string) => {
  if (toastTimeouts.has(toastId)) {
    return
  }

const timeout = setTimeout(() => {
    toastTimeouts.delete(toastId)
    dispatch({
      type: "REMOVE_TOAST",
      toastId: toastId,
    })
  }, TOAST_REMOVE_DELAY)

toastTimeouts.set(toastId, timeout)
}

export const reducer = (state: State, action: Action): State => {
  switch (action.type) {
    case "ADD_TOAST":
      return {
        ...state,
        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
      }

case "UPDATE_TOAST":
      return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === action.toast.id ? { ...t, ...action.toast } : t
        ),
      }

case "DISMISS_TOAST": {
      const { toastId } = action

if (toastId) {
        addToRemoveQueue(toastId)
      } else {
        state.toasts.forEach((toast) => {
          addToRemoveQueue(toast.id)
        })
      }

return {
        ...state,
        toasts: state.toasts.map((t) =>
          t.id === toastId || toastId === undefined
            ? {
                ...t,
                open: false,
              }
            : t
        ),
      }
    }
    case "REMOVE_TOAST":
      if (action.toastId === undefined) {
        return {
          ...state,
          toasts: [],
        }
      }
      return {
        ...state,
        toasts: state.toasts.filter((t) => t.id !== action.toastId),
      }
  }
}

const listeners: Array<(state: State) => void> = []

let memoryState: State = { toasts: [] }

function dispatch(action: Action) {
  memoryState = reducer(memoryState, action)
  listeners.forEach((listener) => {
    listener(memoryState)
  })
}

type Toast = Omit<ToasterToast, "id">

function toast({ ...props }: Toast) {
  const id = genId()

const update = (props: ToasterToast) =>
    dispatch({
      type: "UPDATE_TOAST",
      toast: { ...props, id },
    })
  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id })

dispatch({
    type: "ADD_TOAST",
    toast: {
      ...props,
      id,
      open: true,
      onOpenChange: (open) => {
        if (!open) dismiss()
      },
    },
  })

return {
    id: id,
    dismiss,
    update,
  }
}

function useToast() {
  const [state, setState] = React.useState<State>(memoryState)

React.useEffect(() => {
    listeners.push(setState)
    return () => {
      const index = listeners.indexOf(setState)
      if (index > -1) {
        listeners.splice(index, 1)
      }
    }
  }, [state])

return {
    ...state,
    toast,
    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
  }
}

export { useToast, toast }
[V0_FILE]typescriptreact:file="components/ui/toast.tsx" isEdit="true" isMerged="true"
import * as React from "react"
import * as ToastPrimitives from "@radix-ui/react-toast"
import { cva, type VariantProps } from "class-variance-authority"
import { X } from 'lucide-react'

import { cn } from "@/lib/utils"

const ToastProvider = ToastPrimitives.Provider

const ToastViewport = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Viewport>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Viewport
    ref={ref}
    className={cn(
      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
      className
    )}
    {...props}
  />
))
ToastViewport.displayName = ToastPrimitives.Viewport.displayName

const toastVariants = cva(
  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
          "destructive border-destructive bg-destructive text-destructive-foreground",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

const Toast = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Root>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
    VariantProps<typeof toastVariants>
>(({ className, variant, ...props }, ref) => {
  return (
    <ToastPrimitives.Root
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
  )
})
Toast.displayName = ToastPrimitives.Root.displayName

const ToastAction = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Action>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Action
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
      className
    )}
    {...props}
  />
))
ToastAction.displayName = ToastPrimitives.Action.displayName

const ToastClose = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Close>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Close
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
      className
    )}
    toast-close=""
    {...props}
  >
    <X className="h-4 w-4" />
  </ToastPrimitives.Close>
))
ToastClose.displayName = ToastPrimitives.Close.displayName

const ToastTitle = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Title>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Title
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
))
ToastTitle.displayName = ToastPrimitives.Title.displayName

const ToastDescription = React.forwardRef<
  React.ElementRef<typeof ToastPrimitives.Description>,
  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
>(({ className, ...props }, ref) => (
  <ToastPrimitives.Description
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
))
ToastDescription.displayName = ToastPrimitives.Description.displayName

type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>

type ToastActionElement = React.ReactElement<typeof ToastAction>

export {
  type ToastProps,
  type ToastActionElement,
  ToastProvider,
  ToastViewport,
  Toast,
  ToastTitle,
  ToastDescription,
  ToastClose,
  ToastAction,
}
[V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isEdit="true" isMerged="true"
"use client"

import {
  Toast,
  ToastClose,
  ToastDescription,
  ToastProvider,
  ToastTitle,
  ToastViewport,
} from "@/components/ui/toast"
import { useToast } from "@/hooks/use-toast"

export function Toaster() {
  const { toasts } = useToast()

return (
    <ToastProvider>
      {toasts.map(function ({ id, title, description, action, ...props }) {
        return (
          <Toast key={id} {...props}>
            <div className="grid gap-1">
              {title && <ToastTitle>{title}</ToastTitle>}
              {description && (
                <ToastDescription>{description}</ToastDescription>
              )}
            </div>
            {action}
            <ToastClose />
          </Toast>
        )
      })}
      <ToastViewport />
    </ToastProvider>
  )
}
[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true"
import type { Metadata } from "next"
import { Geist, Geist_Mono } from 'next/font/google'
import "./globals.css"
import { ThemeProvider } from "@/components/theme-provider"
import { Toaster } from "@/components/ui/toaster"
import { LanguageProvider } from "@/components/language-provider"
import FloatingWhatsApp from "@/components/floating-whatsapp"
import ScrollToTopButton from "@/components/scroll-to-top-button"

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
})

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
})

export const metadata: Metadata = {
  title: "COVE EDITION 5 by Imtiaz | Luxury Apartments in Dubailand",
  description: "Discover COVE EDITION 5, premium luxury apartments in Dubailand by Imtiaz Developments. Modern living with world-class amenities, flexible payment plans, and prime location.",
  keywords: "COVE EDITION 5, Imtiaz Developments, Dubailand apartments, luxury real estate Dubai, modern apartments Dubai, investment property Dubai",
  authors: [{ name: "Palm Signature Real Estate" }],
  creator: "Palm Signature Real Estate",
  publisher: "Palm Signature Real Estate",
  formatDetection: {
    email: false,
    address: false,
    telephone: false,
  },
  metadataBase: new URL("https://coveedition5.com"),
  alternates: {
    canonical: "/",
    languages: {
      "en-US": "/",
      "fr-FR": "/fr",
    },
  },
  openGraph: {
    title: "COVE EDITION 5 by Imtiaz | Luxury Apartments in Dubailand",
    description: "Discover COVE EDITION 5, premium luxury apartments in Dubailand by Imtiaz Developments. Modern living with world-class amenities.",
    url: "https://coveedition5.com",
    siteName: "COVE EDITION 5",
    images: [
      {
        url: "/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg",
        width: 1200,
        height: 630,
        alt: "COVE EDITION 5 luxury apartments facade in Dubailand",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "COVE EDITION 5 by Imtiaz | Luxury Apartments in Dubailand",
    description: "Discover COVE EDITION 5, premium luxury apartments in Dubailand by Imtiaz Developments.",
    images: ["/images/cove-edition-5-luxury-residences-imtiaz-dubailand.jpeg"],
  },
  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              !function(f,b,e,v,n,t,s)
              {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
              n.callMethod.apply(n,arguments):n.queue.push(arguments)};
              if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
              n.queue=[];t=b.createElement(e);t.async=!0;
              t.src=v;s=b.getElementsByTagName(e)[0];
              s.parentNode.insertBefore(t,s)}(window, document,'script',
              'https://connect.facebook.net/en_US/fbevents.js');
              fbq('init', '675636214954539');
              fbq('track', 'PageView');
            `,
          }}
        />
        <noscript>
          <img
            height="1"
            width="1"
            style={{ display: 'none' }}
            src="https://www.facebook.com/tr?id=675636214954539&ev=PageView&noscript=1"
            alt=""
          />
        </noscript>
        <script
          async
          src="https://www.googletagmanager.com/gtag/js?id=AW-17243978314"
        ></script>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'AW-17243978314');
            `,
          }}
        />
      </head>
      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
        <ThemeProvider
          attribute="class"
          defaultTheme="light"
          enableSystem
          disableTransitionOnChange
        >
          <LanguageProvider>
            {children}
            <FloatingWhatsApp />
            <ScrollToTopButton />
            <Toaster />
          </LanguageProvider>
        </ThemeProvider>
      </body>
    </html>
  )
}
[V0_FILE]typescriptreact:file="components/contact-section.tsx" isEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"

interface ContactSectionProps {
  locale?: string
}

export default function ContactSection({ locale = "en" }: ContactSectionProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)
  const [iframeLoaded, setIframeLoaded] = useState(false)
  const [currentUrl, setCurrentUrl] = useState("")

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

useEffect(() => {
    if (typeof window === "undefined" || typeof document === "undefined") return

setCurrentUrl(window.location.href)

const script = document.createElement("script")
    script.src = "https://tally.so/widgets/embed.js"
    script.async = true
    document.body.appendChild(script)

const timer = setTimeout(() => {
      setIframeLoaded(true)
    }, 100)

return () => {
      clearTimeout(timer)
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

const openWhatsApp = () => {
    if (typeof window === "undefined") return

window.open(`https://wa.me/971581998661?text=${message}`, "_blank")
  }

const texts = {
    title: locale === "fr" ? "Réservez Votre Visite Privée" : "Book Your Private Viewing",
    subtitle:
      locale === "fr"
        ? "Découvrez pourquoi COVE EDITION 5 est le choix préféré des familles expatriées à Dubaï"
        : "See why COVE EDITION 5 is the preferred choice for expat families in Dubai",
    quickResponse: locale === "fr" ? "Réponse Rapide" : "Quick Response",
    quickResponseText:
      locale === "fr"
        ? "Obtenez vos plans d'étage personnalisés et votre plan de paiement en moins de 24h"
        : "Get your personalized floor plans and payment plan within 24 hours",
    whatsAppButton: locale === "fr" ? "Parler à un Expert (WhatsApp)" : "Speak to an Expert (WhatsApp)",
    formTitle: locale === "fr" ? "Demande d'Information Rapide" : "Quick Information Request",
    formSubtitle: locale === "fr" ? "2 minutes • Réponse garantie sous 24h" : "2 minutes • Response guaranteed within 24h",
    privacyText:
      locale === "fr"
        ? "🔒 Vos données sont sécurisées. Nous ne partageons jamais vos informations et vous pouvez vous désabonner à tout moment."
        : "🔒 Your data is secure. We never share your information and you can unsubscribe anytime.",
    trustSignals: locale === "fr" 
      ? "✓ Plus de 500 familles nous font confiance  ✓ Réponse sous 24h garantie  ✓ Consultation gratuite"
      : "✓ 500+ families trust us  ✓ 24h response guaranteed  ✓ Free consultation"
  }

return (
    <section id="contact" ref={sectionRef} className="py-16 md:py-32 bg-white">
      <div className="container mx-auto px-4 md:px-8">
        <div
          className={`max-w-3xl mx-auto text-center mb-12 md:mb-16 transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <h2 className="text-3xl md:text-5xl font-semibold tracking-tight mb-4">{texts.title}</h2>
          <p className="text-lg md:text-2xl text-neutral-500 mb-6">{texts.subtitle}</p>
          
          <div className="text-sm text-neutral-600 bg-neutral-50 rounded-full px-6 py-3 inline-block">
            {texts.trustSignals}
          </div>
        </div>

<div
          className={`max-w-5xl mx-auto transition-opacity duration-1000 delay-300 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8 mb-12 md:mb-16">
            <div className="bg-[#f5f5f7] rounded-3xl p-6 md:p-12">
              <div className="flex items-center mb-4">
                <div className="w-3 h-3 bg-green-500 rounded-full mr-3"></div>
                <h3 className="text-xl md:text-2xl font-semibold">{texts.quickResponse}</h3>
              </div>
              <p className="text-base md:text-lg text-neutral-600 mb-6 md:mb-8">{texts.quickResponseText}</p>

{iframeLoaded && (
                  <>
                    <iframe
                      src={`https://tally.so/embed/mZDk45?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1${currentUrl ? `&page_url=${encodeURIComponent(currentUrl)}` : ""}`}
                      loading="lazy"
                      width="100%"
                      height="400"
                      frameBorder="0"
                      title={locale === "fr" ? "Formulaire de Contact Palm Signature" : "Palm Signature Contact Form"}
                      className="mx-auto"
                    ></iframe>
                    <script
                      dangerouslySetInnerHTML={{
                        __html: `
                          const url = new URL(window.location.href);
                          url.searchParams.set("page_url", window.location.href);
                          window.history.replaceState({}, '', url);
                        `,
                      }}
                    />
                  </>
                )}

import { useState, useEffect } from "react"
import Image from "next/image"
import { ChevronDown } from 'lucide-react'

interface HeroProps {
  locale?: string
}

export default function ResponsiveHero({ locale = "en" }: HeroProps) {
  const [scrollY, setScrollY] = useState(0)

useEffect(() => {
    if (typeof window === "undefined") return

const handleScroll = () => {
      setScrollY(window.scrollY)
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

const texts = {
    tagline: locale === "fr" ? "Résidences de Luxe par Imtiaz à Dubailand" : "Luxury Residences by Imtiaz in Dubailand",
    subtitle:
      locale === "fr"
        ? "Design Contemporain avec Vues Panoramiques et Équipements Premium"
        : "Contemporary Design with Panoramic Views and Premium Amenities",
    startingFrom: locale === "fr" ? "À partir de" : "Starting from",
    paymentPlan: locale === "fr" ? "Plan de Paiement" : "Payment Plan",
    years: locale === "fr" ? "Ans" : "Years",
    postHandover: locale === "fr" ? "(3 ans après livraison)" : "(3 years post handover)",
    contactSales: locale === "fr" ? "Contacter les Ventes" : "Contact Sales",
    explore: locale === "fr" ? "Explorer" : "Explore",
  }

return (
    <section className="relative w-full h-screen overflow-hidden">
      {/* Background with parallax effect */}
      <div
        className="absolute inset-0 z-0"
        style={{
          transform: `translateY(${scrollY * 0.15}px)`,
          transition: "transform 0.1s linear",
        }}
      >
        <Image
          src="/images/cove-edition-5-facade-detail.jpeg"
          alt={
            locale === "fr"
              ? "Cove Edition 5 par Imtiaz - Résidences de luxe à Dubailand avec piscine à débordement et vues panoramiques"
              : "Cove Edition 5 by Imtiaz - Luxury Residences in Dubailand with Infinity Pool and Panoramic Views"
          }
          fill
          priority
          className="object-cover object-center"
          sizes="100vw"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent" />
      </div>

{/* Main content container - Optimized for all screen sizes */}
      <div className="relative z-10 h-full flex flex-col">
        {/* Top spacer - Responsive */}
        <div className="h-16 sm:h-20 md:h-24 lg:h-32" />

{/* Main content - Mobile-first responsive */}
        <div className="flex-1 flex flex-col items-center justify-center px-4 sm:px-6 md:px-8 text-center">
          {/* Product name - Responsive typography */}
          <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl xl:text-8xl 2xl:text-9xl font-bold tracking-tight text-white mb-3 sm:mb-4 md:mb-6 animate-fade-in leading-tight">
            COVE EDITION 5
          </h1>

{/* Tagline - Responsive with better line height */}
          <p className="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl font-medium text-white/90 max-w-xs sm:max-w-sm md:max-w-2xl lg:max-w-3xl mx-auto mb-3 sm:mb-4 md:mb-6 animate-fade-in-delay leading-relaxed">
            {texts.tagline}
          </p>

{/* SEO-friendly subtitle - Better mobile spacing */}
          <p className="text-sm sm:text-base md:text-lg font-medium text-white/80 max-w-sm sm:max-w-md md:max-w-2xl mx-auto mb-6 sm:mb-8 md:mb-10 animate-fade-in-delay leading-relaxed">
            {texts.subtitle}
          </p>

{/* Key information - Mobile-optimized grid */}
          <div className="w-full max-w-xs sm:max-w-sm md:max-w-2xl lg:max-w-4xl mx-auto grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 md:gap-8 lg:gap-12 mb-6 sm:mb-8 md:mb-12 animate-fade-in-delay-2">
            <div className="flex flex-col items-center p-3 sm:p-4 bg-white/10 backdrop-blur-sm rounded-2xl">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70 mb-1">{texts.startingFrom}</p>
              <p className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium text-white">700,000 AED</p>
            </div>

<div className="flex flex-col items-center p-3 sm:p-4 bg-white/10 backdrop-blur-sm rounded-2xl">
              <p className="text-xs sm:text-sm uppercase tracking-wide text-white/70 mb-1">{texts.paymentPlan}</p>
              <p className="text-xl sm:text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-medium text-white">
                5 {texts.years}
              </p>
              <p className="text-xs sm:text-sm text-white/70 mt-1">{texts.postHandover}</p>
            </div>
          </div>

{/* CTA buttons - Mobile-first responsive */}
          <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 md:gap-6 mt-4 sm:mt-6 animate-fade-in-delay-3 w-full max-w-xs sm:max-w-none sm:w-auto px-0">
            <a
              href="#contact"
              className="rounded-full px-6 sm:px-8 py-3 sm:py-4 bg-white hover:bg-gray-200 text-black text-sm sm:text-base font-medium w-full sm:min-w-[160px] md:min-w-[180px] shadow-sm transition-all text-center touch-manipulation"
            >
              {texts.contactSales}
            </a>
            <a
              href="#about"
              className="rounded-full px-6 sm:px-8 py-3 sm:py-4 bg-blue-600 hover:bg-blue-800 text-white text-sm sm:text-base font-medium w-full sm:min-w-[160px] md:min-w-[180px] transition-all text-center touch-manipulation"
            >
              {texts.explore}
            </a>
          </div>
        </div>

{/* Bottom section with scroll indicator - Responsive */}
        <div className="h-12 sm:h-16 md:h-20 lg:h-24 flex justify-center items-end pb-6 sm:pb-8 md:pb-12 animate-bounce-slow">
          <a
            href="#about"
            className="flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 md:w-14 md:h-14 rounded-full bg-white/10 backdrop-blur-md hover:bg-white/20 transition-colors duration-300 touch-manipulation"
            aria-label={locale === "fr" ? "Défiler pour en savoir plus" : "Scroll to learn more"}
          >
            <ChevronDown className="h-4 w-4 sm:h-5 sm:w-5 md:h-6 md:w-6 text-white" />
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/responsive-header.tsx"
"use client"

import { useState, useEffect } from "react"
import { Button } from "@/components/ui/button"
import { Menu, X, Home, Info, Palette, ImageIcon, MapPin, CreditCard, Building, Mail } from 'lucide-react'
import LanguageSwitcher from "./language-switcher"

interface ResponsiveHeaderProps {
  locale?: string
}

export default function ResponsiveHeader({ locale = "en" }: ResponsiveHeaderProps) {
  const [scrolled, setScrolled] = useState(false)
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)

useEffect(() => {
    if (typeof window === "undefined") return

const handleScroll = () => {
      if (window.scrollY > 100) {
        setScrolled(true)
      } else {
        setScrolled(false)
      }
    }

window.addEventListener("scroll", handleScroll)
    return () => window.removeEventListener("scroll", handleScroll)
  }, [])

useEffect(() => {
    if (typeof window === "undefined") return

const handleScrollForMenu = () => {
      if (mobileMenuOpen) {
        setMobileMenuOpen(false)
      }
    }

window.addEventListener("scroll", handleScrollForMenu)
    return () => window.removeEventListener("scroll", handleScrollForMenu)
  }, [mobileMenuOpen])

const toggleMobileMenu = () => {
    setMobileMenuOpen(!mobileMenuOpen)
  }

const menuItems =
    locale === "fr"
      ? [
          { href: "#", label: "Accueil", icon: <Home className="h-5 w-5 mr-4" /> },
          { href: "#about", label: "À propos", icon: <Info className="h-5 w-5 mr-4" /> },
          { href: "#amenities", label: "Équipements", icon: <Palette className="h-5 w-5 mr-4" /> },
          { href: "#gallery", label: "Galerie", icon: <ImageIcon className="h-5 w-5 mr-4" /> },
          { href: "#location", label: "Emplacement", icon: <MapPin className="h-5 w-5 mr-4" /> },
          { href: "#payment", label: "Paiement", icon: <CreditCard className="h-5 w-5 mr-4" /> },
          { href: "#units", label: "Unités", icon: <Building className="h-5 w-5 mr-4" /> },
          { href: "#contact", label: "Contact", icon: <Mail className="h-5 w-5 mr-4" /> },
          { href: "#cove-edition-6", label: "CE6", icon: <Building className="h-5 w-5 mr-4" /> },
        ]
      : [
          { href: "#", label: "Home", icon: <Home className="h-5 w-5 mr-4" /> },
          { href: "#about", label: "About", icon: <Info className="h-5 w-5 mr-4" /> },
          { href: "#amenities", label: "Amenities", icon: <Palette className="h-5 w-5 mr-4" /> },
          { href: "#gallery", label: "Gallery", icon: <ImageIcon className="h-5 w-5 mr-4" /> },
          { href: "#location", label: "Location", icon: <MapPin className="h-5 w-5 mr-4" /> },
          { href: "#payment", label: "Payment", icon: <CreditCard className="h-5 w-5 mr-4" /> },
          { href: "#units", label: "Units", icon: <Building className="h-5 w-5 mr-4" /> },
          { href: "#contact", label: "Contact", icon: <Mail className="h-5 w-5 mr-4" /> },
          { href: "#cove-edition-6", label: "CE6", icon: <Building className="h-5 w-5 mr-4" /> },
        ]

return (
    <>
      <header
        className={`fixed left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-neutral-100 transition-all duration-300 ${
          scrolled ? "top-0 h-14 sm:h-16" : "top-4 sm:top-7 h-14 sm:h-16"
        }`}
      >
        <div className="container mx-auto px-3 sm:px-4 h-full flex items-center justify-between">
          {/* Logo - Responsive */}
          <div className="flex items-center">
            <a
              href="#"
              onClick={(e) => {
                e.preventDefault()
                window.scrollTo({ top: 0, behavior: "smooth" })
              }}
              className="font-medium text-xs sm:text-sm tracking-tight hover:text-neutral-500 transition-colors relative overflow-hidden group"
            >
              <span className="inline-block transition-transform duration-300 group-hover:-translate-y-full">
                COVE EDITION 5
              </span>
              <span className="absolute top-0 left-0 inline-block transition-transform duration-300 translate-y-full group-hover:translate-y-0">
                COVE EDITION 5
              </span>
            </a>
          </div>

{/* Desktop Navigation - Hidden on mobile/tablet */}
          <nav className="hidden lg:flex items-center absolute left-1/2 transform -translate-x-1/2">
            <ul className="flex space-x-6 xl:space-x-8">
              <li>
                <a href="#about" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "À propos" : "About"}
                </a>
              </li>
              <li>
                <a href="#amenities" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Équipements" : "Amenities"}
                </a>
              </li>
              <li>
                <a href="#gallery" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Galerie" : "Gallery"}
                </a>
              </li>
              <li>
                <a href="#location" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Emplacement" : "Location"}
                </a>
              </li>
              <li>
                <a href="#payment" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Paiement" : "Payment"}
                </a>
              </li>
              <li>
                <a href="#contact" className="text-xs font-medium hover:text-neutral-500 transition-colors">
                  {locale === "fr" ? "Contact" : "Contact"}
                </a>
              </li>
              <li>
                <a href="#cove-edition-6" className="text-xs font-bold hover:text-neutral-500 transition-colors">
                  CE6
                </a>
              </li>
            </ul>
          </nav>

{/* Right side controls - Responsive */}
          <div className="flex items-center gap-2 sm:gap-3">
            {/* Language switcher - Hidden on small mobile */}
            <div className="hidden sm:block">
              <LanguageSwitcher locale={locale} />
            </div>
            
            {/* CTA Button - Responsive */}
            <a
              href="#contact"
              className="rounded-full px-3 sm:px-4 lg:px-5 py-1.5 sm:py-2 text-xs sm:text-sm bg-blue-600 hover:bg-blue-700 text-white font-medium transition-all duration-300 hover:scale-105 hover:shadow-md touch-manipulation"
            >
              {locale === "fr" ? "Contact" : "Enquire"}
            </a>
            
            {/* Mobile menu button - Larger touch target */}
            <button
              className="lg:hidden flex items-center justify-center w-10 h-10 sm:w-11 sm:h-11 bg-neutral-100 hover:bg-neutral-200 rounded-full transition-all duration-300 hover:shadow-md touch-manipulation"
              onClick={toggleMobileMenu}
              aria-label="Toggle mobile menu"
            >
              <div className="relative w-5 h-5">
                <Menu
                  className={`absolute inset-0 h-5 w-5 transition-all duration-300 ${
                    mobileMenuOpen ? "opacity-0 rotate-90 scale-0" : "opacity-100 rotate-0 scale-100"
                  }`}
                />
                <X
                  className={`absolute inset-0 h-5 w-5 transition-all duration-300 ${
                    mobileMenuOpen ? "opacity-100 rotate-0 scale-100" : "opacity-0 -rotate-90 scale-0"
                  }`}
                />
              </div>
            </button>
          </div>
        </div>
      </header>

{/* Mobile Menu Overlay */}
      <div
        className={`fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-300 lg:hidden ${
          mobileMenuOpen ? "opacity-100" : "opacity-0 pointer-events-none"
        }`}
        onClick={() => setMobileMenuOpen(false)}
      />

{/* Mobile Menu Sidebar - Responsive width */}
      <div
        className={`fixed right-0 top-0 bottom-0 z-40 w-[85%] max-w-sm bg-white shadow-xl transition-transform duration-500 ease-in-out transform lg:hidden ${
          mobileMenuOpen ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="flex flex-col h-full pt-20 sm:pt-24 pb-6 px-4 sm:px-6">
          {/* Language switcher for mobile - At top */}
          <div className="sm:hidden mb-6 pb-4 border-b border-neutral-100">
            <LanguageSwitcher locale={locale} />
          </div>

{/* Navigation */}
          <nav className="flex-1">
            <ul className="space-y-1">
              {menuItems.map((item, index) => (
                <li
                  key={index}
                  className={`transform transition-all duration-300 ${
                    mobileMenuOpen ? "translate-x-0 opacity-100" : "translate-x-8 opacity-0"
                  }`}
                  style={{ transitionDelay: `${index * 50}ms` }}
                >
                  <a
                    href={item.href}
                    className="flex items-center text-base sm:text-lg font-medium py-3 sm:py-4 px-3 sm:px-4 rounded-xl hover:bg-neutral-50 transition-colors touch-manipulation"
                    onClick={() => setMobileMenuOpen(false)}
                  >
                    {item.icon}
                    {item.label}
                  </a>
                </li>
              ))}
            </ul>
          </nav>

{/* Bottom CTA */}
          <div className="mt-auto pt-6 border-t border-neutral-100">
            <Button
              className={`w-full rounded-full py-4 sm:py-6 text-base sm:text-lg bg-blue-600 hover:bg-blue-700 text-white transition-all duration-500 touch-manipulation ${
                mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-4"
              }`}
              style={{ transitionDelay: "400ms" }}
              onClick={() => {
                setMobileMenuOpen(false)
                window.location.href = "#contact"
              }}
            >
              {locale === "fr" ? "Nous Contacter" : "Enquire Now"}
            </Button>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="components/responsive-contact.tsx"
"use client"

import { useEffect, useRef, useState } from "react"

interface ResponsiveContactProps {
  locale?: string
}

export default function ResponsiveContact({ locale = "en" }: ResponsiveContactProps) {
  const [isVisible, setIsVisible] = useState(false)
  const sectionRef = useRef<HTMLElement>(null)
  const [iframeLoaded, setIframeLoaded] = useState(false)
  const [currentUrl, setCurrentUrl] = useState("")

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

useEffect(() => {
    if (typeof window === "undefined" || typeof document === "undefined") return

setCurrentUrl(window.location.href)

const script = document.createElement("script")
    script.src = "https://tally.so/widgets/embed.js"
    script.async = true
    document.body.appendChild(script)

const timer = setTimeout(() => {
      setIframeLoaded(true)
    }, 100)

return () => {
      clearTimeout(timer)
      if (document.body.contains(script)) {
        document.body.removeChild(script)
      }
    }
  }, [])

const openWhatsApp = () => {
    if (typeof window === "undefined") return

window.open(`https://wa.me/971581998661?text=${message}`, "_blank")
  }

return (
    <section id="contact" ref={sectionRef} className="py-12 sm:py-16 md:py-24 lg:py-32 bg-white">
      <div className="container mx-auto px-4 sm:px-6 md:px-8">
        {/* Header - Mobile-first responsive */}
        <div
          className={`max-w-4xl mx-auto text-center mb-8 sm:mb-12 md:mb-16 transition-opacity duration-1000 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-semibold tracking-tight mb-3 sm:mb-4 leading-tight">
            {texts.title}
          </h2>
          <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-neutral-500 mb-4 sm:mb-6 leading-relaxed px-2">
            {texts.subtitle}
          </p>
          
          {/* Trust signals - Responsive */}
          <div className="text-xs sm:text-sm text-neutral-600 bg-neutral-50 rounded-full px-4 sm:px-6 py-2 sm:py-3 inline-block max-w-full">
            <div className="hidden sm:block">{texts.trustSignals}</div>
            <div className="sm:hidden text-center">
              <div>✓ 500+ families trust us</div>
              <div>✓ 24h response guaranteed</div>
            </div>
          </div>
        </div>

{/* Main content - Responsive grid */}
        <div
          className={`max-w-6xl mx-auto transition-opacity duration-1000 delay-300 ${
            isVisible ? "opacity-100" : "opacity-0"
          }`}
        >
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 sm:gap-8 mb-8 sm:mb-12 md:mb-16">
            {/* WhatsApp section - Mobile optimized */}
            <div className="bg-[#f5f5f7] rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 lg:p-12">
              <div className="flex items-center mb-3 sm:mb-4">
                <div className="w-2.5 h-2.5 sm:w-3 sm:h-3 bg-green-500 rounded-full mr-2 sm:mr-3"></div>
                <h3 className="text-lg sm:text-xl md:text-2xl font-semibold">{texts.quickResponse}</h3>
              </div>
              <p className="text-sm sm:text-base md:text-lg text-neutral-600 mb-4 sm:mb-6 md:mb-8 leading-relaxed">
                {texts.quickResponseText}
              </p>

<div className="space-y-3 sm:space-y-4">
                <button
                  onClick={openWhatsApp}
                  className="w-full bg-green-600 hover:bg-green-700 text-white rounded-full py-3 sm:py-4 text-sm sm:text-base md:text-lg font-medium transition-colors flex items-center justify-center group touch-manipulation"
                >
                  <svg
                    xmlns="http://www.w3.org/2000/svg"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                    className="w-4 h-4 sm:w-5 sm:h-5 mr-2 group-hover:scale-110 transition-transform"
                  >
                    <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.893 3.386"/>
                  </svg>
                  {texts.whatsAppButton}
                </button>
                
                <div className="text-xs text-neutral-500 text-center">
                  {locale === "fr" ? "Réponse moyenne: 3 minutes" : "Average response: 3 minutes"}
                </div>
              </div>
            </div>

{/* Form section - Mobile optimized */}
            <div className="bg-[#f5f5f7] rounded-2xl sm:rounded-3xl p-4 sm:p-6 md:p-8 lg:p-12">
              <h3 className="text-lg sm:text-xl md:text-2xl font-semibold mb-2">{texts.formTitle}</h3>
              <p className="text-xs sm:text-sm text-neutral-500 mb-4 sm:mb-6">{texts.formSubtitle}</p>

{iframeLoaded && (
                <>
                  <iframe
                    src={`https://tally.so/embed/mZDk45?alignLeft=1&hideTitle=1&transparentBackground=1&dynamicHeight=1${currentUrl ? `&page_url=${encodeURIComponent(currentUrl)}` : ""}`}
                    loading="lazy"
                    width="100%"
                    height="350"
                    frameBorder="0"
                    title={locale === "fr" ? "Formulaire de Contact Palm Signature" : "Palm Signature Contact Form"}
                    className="mx-auto"
                  ></iframe>
                  <script
                    dangerouslySetInnerHTML={{
                      __html: `
                        const url = new URL(window.location.href);
                        url.searchParams.set("page_url", window.location.href);
                        window.history.replaceState({}, '', url);
                      `,
                    }}
                  />
                </>
              )}

{!iframeLoaded && (
                <div className="h-[350px] flex items-center justify-center">
                  <div className="animate-pulse bg-gray-200 rounded-md w-full h-full flex items-center justify-center">
                    <span className="text-neutral-500 text-sm">
                      {locale === "fr" ? "Chargement du formulaire..." : "Loading form..."}
                    </span>
                  </div>
                </div>
              )}
            </div>
          </div>

{/* Privacy text - Mobile responsive */}
          <div className="text-center max-w-3xl mx-auto px-2">
            <p className="text-xs sm:text-sm text-neutral-500 leading-relaxed">{texts.privacyText}</p>
          </div>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/responsive-gallery.tsx"
"use client"

import { useState, useRef, useEffect } from "react"
import Image from "next/image"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { X } from 'lucide-react'

interface ResponsiveGalleryProps {
  locale?: string
}

export default function ResponsiveGallery({ locale = "en" }: ResponsiveGalleryProps) {
  const [isVisible, setIsVisible] = useState(false)
  const [activeTab, setActiveTab] = useState("exterior")
  const [selectedImage, setSelectedImage] = useState<string | null>(null)
  const sectionRef = useRef<HTMLElement>(null)

if (sectionRef.current) {
      observer.observe(sectionRef.current)
    }

return () => {
      if (sectionRef.current) {
        observer.unobserve(sectionRef.current)
      }
    }
  }, [])

useEffect(() => {
    if (typeof document === "undefined") return

if (selectedImage) {
      document.body.style.overflow = "hidden"
    } else {
      document.body.style.overflow = "auto"
    }

return () => {
      document.body.style.overflow = "auto"
    }
  }, [selectedImage])

const openImage = (src: string) => {
    setSelectedImage(src)
  }

const closeImage = () => {
    setSelectedImage(null)
  }

return (
    <section id="gallery" ref={sectionRef} className="py-12 sm:py-16 md:py-24 lg:py-40 overflow-hidden">
      <div className="container mx-auto px-4 sm:px-6 md:px-8">
        {/* Header - Mobile-first responsive */}
        <div
          className={`max-w-4xl mx-auto text-center mb-12 sm:mb-16 md:mb-24 transition-all duration-1000 ${isVisible ? "opacity-100 translate-y-0" : "opacity-0 translate-y-10"}`}
        >
          <h2 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold tracking-tight mb-4 sm:mb-6 md:mb-8 leading-tight">
            {texts.title}
          </h2>
          <p className="text-base sm:text-lg md:text-xl lg:text-2xl text-neutral-600 leading-relaxed px-2">
            {texts.subtitle}
          </p>
        </div>

<Tabs defaultValue="exterior" className="w-full" onValueChange={setActiveTab}>
          {/* Tab selector - Mobile optimized */}
          <div className="flex justify-center mb-8 sm:mb-12 md:mb-16">
            <div className="bg-[#f5f5f7] p-1 sm:p-1.5 rounded-full inline-flex w-full max-w-xs sm:max-w-none sm:w-auto">
              <TabsList className="bg-transparent p-0 flex space-x-1 w-full sm:w-auto">
                <TabsTrigger
                  value="exterior"
                  className="px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm sm:text-base font-medium transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:text-neutral-500 data-[state=inactive]:hover:text-neutral-800 flex-1 sm:flex-none touch-manipulation"
                >
                  {texts.exterior}
                </TabsTrigger>
                <TabsTrigger
                  value="interior"
                  className="px-4 sm:px-6 py-2 sm:py-2.5 rounded-full text-sm sm:text-base font-medium transition-all duration-200 data-[state=active]:bg-white data-[state=active]:text-black data-[state=active]:shadow-sm data-[state=inactive]:text-neutral-500 data-[state=inactive]:hover:text-neutral-800 flex-1 sm:flex-none touch-manipulation"
                >
                  {texts.interior}
                </TabsTrigger>
              </TabsList>
            </div>
          </div>

{/* Exterior images - Responsive grid */}
          <TabsContent value="exterior" className="mt-0">
            <div
              className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4 lg:gap-6 transition-all duration-1000 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              {exteriorImages.map((image, index) => (
                <div
                  key={index}
                  className="relative h-48 sm:h-56 md:h-64 lg:h-72 xl:h-80 rounded-xl sm:rounded-2xl overflow-hidden cursor-pointer group touch-manipulation"
                  onClick={() => openImage(image.src)}
                >
                  <Image
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    fill
                    className="object-cover transition-transform group-hover:scale-105 duration-700"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                  />
                  {/* Overlay for better touch feedback */}
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300" />
                </div>
              ))}
            </div>
          </TabsContent>

{/* Interior images - Responsive grid */}
          <TabsContent value="interior" className="mt-0">
            <div
              className={`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-2 sm:gap-3 md:gap-4 lg:gap-6 transition-all duration-1000 ${isVisible ? "opacity-100 scale-100" : "opacity-0 scale-95"}`}
            >
              {interiorImages.map((image, index) => (
                <div
                  key={index}
                  className="relative h-48 sm:h-56 md:h-64 lg:h-72 xl:h-80 rounded-xl sm:rounded-2xl overflow-hidden cursor-pointer group touch-manipulation"
                  onClick={() => openImage(image.src)}
                >
                  <Image
                    src={image.src || "/placeholder.svg"}
                    alt={image.alt}
                    fill
                    className="object-cover transition-transform group-hover:scale-105 duration-700"
                    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
                  />
                  {/* Overlay for better touch feedback */}
                  <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors duration-300" />
                </div>
              ))}
            </div>
          </TabsContent>
        </Tabs>

{/* CTA Button - Mobile responsive */}
        <div className="flex justify-center mt-8 sm:mt-12 md:mt-16">
          <a
            href="#contact"
            className="rounded-full px-6 sm:px-8 py-3 sm:py-4 bg-blue-600 hover:bg-blue-800 text-white text-sm sm:text-base font-medium transition-all touch-manipulation"
          >
            {texts.contactSales}
          </a>
        </div>
      </div>

{/* Lightbox Modal - Mobile optimized */}
      {selectedImage && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/90 p-2 sm:p-4">
          <div className="relative w-full max-w-6xl max-h-[90vh] overflow-hidden">
            {/* Close button - Larger touch target */}
            <button
              onClick={closeImage}
              className="absolute top-2 right-2 sm:top-4 sm:right-4 z-10 p-2 sm:p-3 bg-black/50 rounded-full text-white hover:bg-black/70 transition-colors touch-manipulation"
              aria-label={locale === "fr" ? "Fermer" : "Close"}
            >
              <X className="h-5 w-5 sm:h-6 sm:w-6" />
            </button>
            <div className="relative w-full h-[80vh]">
              <Image
                src={selectedImage || "/placeholder.svg"}
                alt={locale === "fr" ? "Vue agrandie" : "Enlarged view"}
                fill
                className="object-contain"
                sizes="(max-width: 768px) 100vw, 90vw"
              />
            </div>
          </div>
        </div>
      )}
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/ui/tabs.tsx"
"use client"

import * as React from "react"
import * as TabsPrimitive from "@radix-ui/react-tabs"

import { cn } from "@/lib/utils"

const Tabs = TabsPrimitive.Root

const TabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    className={cn(
      "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
      className
    )}
    {...props}
  />
))
TabsList.displayName = TabsPrimitive.List.displayName

const TabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    className={cn(
      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
      className
    )}
    {...props}
  />
))
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName

const TabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    className={cn(
      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
      className
    )}
    {...props}
  />
))
TabsContent.displayName = TabsPrimitive.Content.displayName

export { Tabs, TabsList, TabsTrigger, TabsContent }</article></body></html>

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This