[V0_FILE]png:file="public/logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/0aeaac6c-5441-463c-9448-d390ab232450.jpg-sntgQW5v0F9g2p4G1OGvUdygi82i1H.jpeg" isMerged="true" [V0_FILE]typescriptreact:file="components/portfolio.tsx" isMerged="true" import { Card } from "@/components/ui/card" import Image from "next/image" const projects = [ { name: "Projet Alpha", image: "/modern-website-design.png" }, { name: "Projet Beta", image: "/ecommerce-website-design.png" }, { name: "Projet Gamma", image: "/portfolio-website-design.png" }, ] export function Portfolio() { return (

Réalisations récentes

{projects.map((project, index) => ( {project.name}

))}

) } [V0_FILE]typescriptreact:file="components/process.tsx" isMerged="true" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" const steps = [ { step: "1", title: "Découverte", description: "Brief, objectifs, audience et contenus clés." }, { step: "2", title: "Design", description: "Wireframes & maquettes sur Figma, validation rapide." }, { step: "3", title: "Dév. & SEO", description: "Intégration, accessibilité, performance & balisage." }, { step: "4", title: "Mise en ligne", description: "Hébergement, nom de domaine, SSL, suivi analytics." }, ] export function Process() { return (

Mon process

{steps.map((step, index) => (

{step.step}

{step.title}

{step.description}

))}

) } [V0_FILE]typescriptreact:file="components/pricing.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" const plans = [ { name: "Starter", price: "€690", features: ["Une page (landing)", "Design sur mesure", "Optimisation SEO de base", "Formation 30 min"], popular: false, }, { name: "Pro", price: "€1 490", features: ["Jusqu'à 6 pages", "Blog + formulaire", "SEO complet", "Suivi 1 mois"], popular: true, }, { name: "Sur‑mesure", price: "Sur devis", features: ["Fonctionnalités avancées", "Intégrations tierces", "Contenus premium", "Support prioritaire"], popular: false, }, ] interface PricingProps { onContactClick: () => void } export function Pricing({ onContactClick }: PricingProps) { return (

Formules simples

{plans.map((plan, index) => ( {plan.name}

{plan.price}

{feature}

))}

) } [V0_FILE]typescriptreact:file="components/testimonials.tsx" isMerged="true" import { Card } from "@/components/ui/card" const testimonials = [ { quote: "Super collaboration ! Site livré vite et bien.", author: "Marie D., restauratrice", }, { quote: "+40% de demandes via le site en 3 mois.", author: "Karim B., consultant", }, { quote: "Design nickel, très pro, je recommande.", author: "Léa T., architecte", }, ] export function Testimonials() { return (

Ils témoignent

{testimonials.map((testimonial, index) => (

"{testimonial.quote}"

— {testimonial.author} ))}

) } [V0_FILE]png:file="public/modern-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/modern-website-design-csY89d8MUvpgm8LwYJyyuj6ookRN6r.png" isMerged="true" [V0_FILE]png:file="public/ecommerce-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/ecommerce-website-design-QOo42x2iYZrEs4GkzH6Scdqa5UKmpp.png" isMerged="true" [V0_FILE]png:file="public/portfolio-website-design.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/portfolio-website-design-7XF6GrPAVil1Fu685yFPdVibRZb9QD.png" isMerged="true" [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Inter } from "next/font/google" import "./globals.css" const inter = Inter({ subsets: ["latin"], display: "swap", variable: "--font-inter", }) export const metadata: Metadata = { title: "Level Up — Création de sites web | Site vitrine", description: "Designer & développeur web : création de sites vitrines rapides, modernes et SEO-friendly pour PME et indépendants.", keywords: ["création site web", "développeur web", "site vitrine", "SEO", "freelance"], authors: [{ name: "Level Up" }], creator: "Level Up", openGraph: { title: "Création de sites web — Level Up", description: "Sites vitrines modernes qui convertissent vos visiteurs en clients.", type: "website", locale: "fr_FR", }, robots: { index: true, follow: true, }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="components/header.tsx" isEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import Image from "next/image" import Link from "next/link" import { Button } from "@/components/ui/button" import { Menu, X } from "lucide-react" interface HeaderProps { onContactClick: () => void } export function Header({ onContactClick }: HeaderProps) { const [isScrolled, setIsScrolled] = useState(false) const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) useEffect(() => { const handleScroll = () => { setIsScrolled(window.scrollY > 50) } window.addEventListener("scroll", handleScroll) return () => window.removeEventListener("scroll", handleScroll) }, []) const handleLinkClick = () => { setIsMobileMenuOpen(false) } return (

{isMobileMenuOpen && (

Services & Branding Nos Réalisations Tarifs & Formules

)}

) } [V0_FILE]typescriptreact:file="components/scroll-animations.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" export function useScrollAnimation() { const ref = useRef(null) useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-in") } }) }, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }, ) const elements = document.querySelectorAll(".scroll-animate") elements.forEach((el) => observer.observe(el)) return () => observer.disconnect() }, []) return ref } export function FloatingElements() { return (

) } [V0_FILE]typescriptreact:file="components/digital-importance.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { TrendingUp, Globe, Users, Zap, ArrowRight, BarChart3 } from "lucide-react" export function DigitalImportance() { return (

Pourquoi le développement digital est crucial aujourd'hui ?

Dans un monde où 85% des consommateurs recherchent en ligne avant d'acheter, votre présence digitale détermine votre succès commercial.

Impact mesurable

+340%

ROI moyen

24/7

Disponibilité

Un site web professionnel génère des leads qualifiés en continu, réduisant vos coûts d'acquisition client de 60% en moyenne.

Portée globale instantanée

Touchez des milliers de prospects sans limite géographique

Crédibilité renforcée

75% des utilisateurs jugent la crédibilité sur le design web

Automatisation des ventes

Convertissez automatiquement visiteurs en clients qualifiés

Prêt à transformer votre business ?

Rejoignez les entreprises qui ont multiplié leur chiffre d'affaires grâce au digital

) } [V0_FILE]typescriptreact:file="components/services.tsx" isEdit="true" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Code, Palette, Zap, ArrowRight } from "lucide-react" import { useEffect } from "react" const services = [ { title: "Conception & UX", description: "Atelier d'objectifs, arborescence, maquettes sur mesure centrées conversion.", icon: Palette, color: "from-primary/20 to-blue-500/20", }, { title: "Développement", description: "Code propre, responsive et accessible. Intégration d'animations légères.", icon: Code, color: "from-green-500/20 to-primary/20", }, { title: "SEO & Performance", description: "Balises, schéma, optimisation d'images, score Core Web Vitals élevé.", icon: Zap, color: "from-primary/20 to-purple-500/20", }, ] export function Services() { useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add("animate-in") } }) }, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" }, ) const elements = document.querySelectorAll(".scroll-animate") elements.forEach((el) => observer.observe(el)) return () => observer.disconnect() }, []) return (

Services

Tout ce qu'il faut pour un site clair, performant et facile à gérer.

{services.map((service, index) => { const IconComponent = service.icon return (

{service.title}

{service.description}

) })}

) } [V0_FILE]typescriptreact:file="components/location.tsx" isMerged="true" "use client" import { MapPin, Globe, Clock } from "lucide-react" export function Location() { return (

Basé à Dijon, je travaille pour toute l'Europe

Depuis la Bourgogne, je collabore avec des clients dans toute l'Europe grâce au travail à distance et aux outils modernes de communication.

{/* Carte interactive */}

{/* Carte stylisée de l'Europe avec Dijon marqué */}

{/* Informations */}

Localisation stratégique

Dijon, au cœur de l'Europe, me permet d'être dans le même fuseau horaire que la plupart de mes clients européens.

Collaboration européenne

Expérience avec des clients en France, Allemagne, Suisse, Belgique, et autres pays européens.

Disponibilité flexible

Horaires adaptés aux différents fuseaux européens. Réunions en français, anglais ou allemand.

{/* Stats européennes */}

12+

Pays européens

Langues parlées

100%

Travail à distance

24h

Délai de réponse

) } [V0_FILE]typescriptreact:file="components/contact.tsx" isEdit="true" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" export function Contact() { const [formData, setFormData] = useState({ nom: "", email: "", budget: "", message: "", }) const handleSubmit = (e: React.FormEvent) => { e.preventDefault() // Handle form submission here console.log("[v0] Form submitted:", formData) } const handleChange = (e: React.ChangeEvent) => { setFormData((prev) => ({ ...prev, [e.target.name]: e.target.value, })) } return (

À propos

Je suis Level Up, designer & développeur web freelance basé à Dijon. J'aide les indépendants et PME à être visibles et crédibles en ligne.

Spécialités : sites vitrines, performance, SEO, hébergement & analytics. Disponible pour missions dans toute l'Europe en FR/EN.

lahcram.consulting@gmail.com

+33 6 16 15 43 08

Parlons de votre projet

Nom

Budget estimé

Message

</div>

<Button type="submit" className="w-full rounded-full">
                  Envoyer
                </Button>
              </form>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/branding-services.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Card } from "@/components/ui/card"

export function BrandingServices() {
  const [hoveredService, setHoveredService] = useState<number | null>(null)

const services = [
    {
      icon: "🎨",
      title: "Identité Visuelle",
      description: "Logo, charte graphique, couleurs et typographies pour une image cohérente",
      details: ["Création de logo", "Charte graphique complète", "Déclinaisons supports"],
    },
    {
      icon: "📱",
      title: "Réseaux Sociaux",
      description: "Stratégie TikTok, Instagram, LinkedIn pour maximiser votre visibilité",
      details: ["Stratégie de contenu", "Visuels optimisés", "Planning éditorial"],
    },
    {
      icon: "📸",
      title: "Communication Visuelle",
      description: "Photos, vidéos et contenus visuels qui racontent votre histoire",
      details: ["Direction artistique", "Shooting produits", "Montage vidéo"],
    },
    {
      icon: "🎯",
      title: "Stratégie Digitale",
      description: "Plan de communication 360° pour une présence digitale impactante",
      details: ["Audit de marque", "Positionnement", "Plan d'action"],
    },
  ]

return (
    <section className="py-20 relative overflow-hidden">
      {/* Background effects */}
      <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-blue-500/5" />
      <div className="absolute top-20 left-10 w-32 h-32 bg-cyan-400/10 rounded-full blur-3xl animate-pulse" />
      <div className="absolute bottom-20 right-10 w-40 h-40 bg-blue-400/10 rounded-full blur-3xl animate-pulse delay-1000" />

<div className="container mx-auto px-4 relative z-10">
        <div className="text-center mb-16">
          <div className="inline-flex items-center gap-2 px-4 py-2 bg-cyan-500/10 border border-cyan-500/20 rounded-full text-cyan-400 text-sm font-medium mb-6">
            <span className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></span>
            Image & Communication
          </div>
          <h2 className="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-white via-cyan-200 to-white bg-clip-text text-transparent">
            Votre identité visuelle de A à Z
          </h2>
          <p className="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed">
            Au-delà du développement web, nous créons une image de marque complète qui vous démarque sur tous les canaux
            digitaux.
          </p>
        </div>

<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
          {services.map((service, index) => (
            <Card
              key={index}
              className="group relative p-6 bg-gray-900/50 border-gray-800/50 hover:border-cyan-500/30 transition-all duration-500 cursor-pointer overflow-hidden"
              onMouseEnter={() => setHoveredService(index)}
              onMouseLeave={() => setHoveredService(null)}
            >
              {/* Hover glow effect */}
              <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/10 via-transparent to-blue-500/10 opacity-0 group-hover:opacity-100 transition-opacity duration-500" />

<div className="relative z-10">
                <div className="text-4xl mb-4 transform group-hover:scale-110 transition-transform duration-300">
                  {service.icon}
                </div>
                <h3 className="text-xl font-bold text-white mb-3 group-hover:text-cyan-400 transition-colors duration-300">
                  {service.title}
                </h3>
                <p className="text-gray-400 text-sm leading-relaxed mb-4">{service.description}</p>

{/* Expandable details */}
                <div
                  className={`overflow-hidden transition-all duration-500 ${
                    hoveredService === index ? "max-h-40 opacity-100" : "max-h-0 opacity-0"
                  }`}
                >
                  <ul className="space-y-2 pt-2 border-t border-gray-800">
                    {service.details.map((detail, idx) => (
                      <li key={idx} className="text-xs text-cyan-400 flex items-center gap-2">
                        <span className="w-1 h-1 bg-cyan-400 rounded-full"></span>
                        {detail}
                      </li>
                    ))}
                  </ul>
                </div>
              </div>
            </Card>
          ))}
        </div>

{/* Social platforms showcase */}
        <div className="bg-gray-900/30 border border-gray-800/50 rounded-2xl p-8 backdrop-blur-sm">
          <h3 className="text-2xl font-bold text-center mb-8 text-white">Maîtrise des plateformes sociales</h3>
          <div className="flex flex-wrap justify-center items-center gap-8">
            {[
              { name: "TikTok", color: "from-pink-500 to-cyan-500" },
              { name: "Instagram", color: "from-purple-500 to-pink-500" },
              { name: "LinkedIn", color: "from-blue-600 to-blue-400" },
              { name: "YouTube", color: "from-red-500 to-red-400" },
              { name: "Facebook", color: "from-blue-500 to-blue-600" },
              { name: "Twitter", color: "from-cyan-400 to-blue-500" },
            ].map((platform, index) => (
              <div
                key={platform.name}
                className="group flex items-center gap-3 px-4 py-2 bg-gray-800/50 rounded-full hover:bg-gray-800 transition-all duration-300 cursor-pointer"
                style={{ animationDelay: `${index * 100}ms` }}
              >
                <div
                  className={`w-3 h-3 rounded-full bg-gradient-to-r ${platform.color} group-hover:scale-125 transition-transform duration-300`}
                ></div>
                <span className="text-gray-300 group-hover:text-white transition-colors duration-300 font-medium">
                  {platform.name}
                </span>
              </div>
            ))}
          </div>
        </div>

{/* Call to action */}
        <div className="text-center mt-12">
          <a
            href="#contact"
            className="inline-flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-bold rounded-full hover:from-cyan-400 hover:to-blue-400 transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-cyan-500/25"
          >
            <span>Créons votre identité</span>
            <span className="text-xl">→</span>
          </a>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]typescriptreact:file="components/contact-popup.tsx" isMerged="true"
"use client"
import { X, Phone, Mail, MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"

interface ContactPopupProps {
  isOpen: boolean
  onClose: () => void
}

export function ContactPopup({ isOpen, onClose }: ContactPopupProps) {
  if (!isOpen) return null

const handleWhatsApp = () => {
    window.open(`https://wa.me/33616154308?text=Bonjour Level Up, je souhaite discuter de mon projet web`, "_blank")
  }

const handlePhone = () => {
    window.open(`tel:+33616154308`, "_self")
  }

const handleEmail = () => {
    window.open(
      `mailto:lahcram.consulting@gmail.com?subject=Demande de devis - Level Up&body=Bonjour,%0D%0A%0D%0AJe souhaite discuter de mon projet web.%0D%0A%0D%0ACordialement`,
      "_self",
    )
  }

return (
    <div className="fixed inset-0 z-[100] flex items-center justify-center">
      {/* Backdrop */}
      <div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />

{/* Popup */}
      <Card className="relative w-full max-w-md mx-4 bg-card border-neon-cyan/20 shadow-neon animate-fade-in">
        <CardHeader className="text-center">
          <Button
            variant="ghost"
            size="sm"
            className="absolute top-2 right-2 text-muted-foreground hover:text-foreground"
            onClick={onClose}
          >
            <X className="h-4 w-4" />
          </Button>
          <CardTitle className="text-xl text-neon-cyan">Contactez Level Up</CardTitle>
          <p className="text-muted-foreground">Choisissez votre moyen de contact préféré</p>
        </CardHeader>
        <CardContent className="space-y-4">
          <Button
            onClick={handleWhatsApp}
            className="w-full bg-green-600 hover:bg-green-700 text-white rounded-full flex items-center gap-3 py-6"
          >
            <MessageCircle className="h-5 w-5" />
            WhatsApp
            <span className="text-sm opacity-80">+33 6 16 15 43 08</span>
          </Button>

<Button
            onClick={handlePhone}
            variant="outline"
            className="w-full border-neon-cyan/30 hover:bg-neon-cyan/10 rounded-full flex items-center gap-3 py-6 bg-transparent"
          >
            <Phone className="h-5 w-5" />
            Téléphone
            <span className="text-sm opacity-80">+33 6 16 15 43 08</span>
          </Button>

<Button
            onClick={handleEmail}
            variant="outline"
            className="w-full border-neon-cyan/30 hover:bg-neon-cyan/10 rounded-full flex items-center gap-3 py-6 bg-transparent"
          >
            <Mail className="h-5 w-5" />
            Email
            <span className="text-sm opacity-80">lahcram.consulting@gmail.com</span>
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/floating-contact-button.tsx" isMerged="true"
"use client"

import { useState, useEffect } from "react"
import { MessageCircle } from "lucide-react"
import { Button } from "@/components/ui/button"

interface FloatingContactButtonProps {
  onClick: () => void
}

export function FloatingContactButton({ onClick }: FloatingContactButtonProps) {
  const [isVisible, setIsVisible] = useState(false)

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

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

if (!isVisible) return null

return (
    <Button
      onClick={onClick}
      className="fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full bg-neon-cyan hover:bg-neon-cyan/80 text-black shadow-neon animate-bounce-slow"
      size="lg"
    >
      <MessageCircle className="h-6 w-6" />
    </Button>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-quick-actions.tsx" isMerged="true"
"use client"

import { Button } from "@/components/ui/button"
import { Phone, MessageCircle, Mail } from "lucide-react"

interface MobileQuickActionsProps {
  onContactClick: () => void
}

export function MobileQuickActions({ onContactClick }: MobileQuickActionsProps) {
  return (
    <div className="md:hidden fixed bottom-4 left-4 right-4 z-40">
      <div className="bg-background/90 backdrop-blur-lg border border-border rounded-2xl p-3 shadow-2xl">
        <div className="flex justify-between items-center gap-2">
          <Button
            onClick={onContactClick}
            size="sm"
            className="flex-1 bg-neon-cyan hover:bg-neon-cyan/80 text-black font-semibold rounded-xl"
          >
            <MessageCircle size={16} className="mr-2" />
            Contact
          </Button>
          <Button
            onClick={() => window.open("tel:+33616154308")}
            size="sm"
            variant="outline"
            className="border-neon-cyan/30 hover:bg-neon-cyan/10 rounded-xl"
          >
            <Phone size={16} />
          </Button>
          <Button
            onClick={() => window.open("mailto:lahcram.consulting@gmail.com")}
            size="sm"
            variant="outline"
            className="border-neon-cyan/30 hover:bg-neon-cyan/10 rounded-xl"
          >
            <Mail size={16} />
          </Button>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]png:file="public/chris-anderson-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/chris-anderson-headshot-H6Op4WyzdvrZfkYX9TERuHAZ3tRJCQ.png" isMerged="true"
[V0_FILE]png:file="public/bill-gates-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/bill-gates-headshot-WK3fXoeceXCjNFqLs4fw8L0BS1b9Xn.png" isMerged="true"
[V0_FILE]png:file="public/warren-buffett-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/warren-buffett-headshot-hdfh2lCsL5VBcV4ErtSOs21Nr73tfa.png" isMerged="true"
[V0_FILE]png:file="public/mari-smith-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/mari-smith-headshot-YI1xVR3lUEYJK6uXK9qi2aTDXSPUlX.png" isMerged="true"
[V0_FILE]png:file="public/rebecca-lieb-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/rebecca-lieb-headshot-9tAwgsZEPSYewcfYbDAlGIXLAQWAwJ.png" isMerged="true"
[V0_FILE]png:file="public/jeff-bezos-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/jeff-bezos-headshot-FVch0MkyFkt8GQ1UkFMP3pT19roGrz.png" isMerged="true"
[V0_FILE]png:file="public/steve-forbes-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/steve-forbes-headshot-T50HffvAhnkqGdR9CAnWkAWQeyuN1I.png" isMerged="true"
[V0_FILE]png:file="public/jim-mullen-ceo-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/jim-mullen-ceo-headshot-XEErnn5F1Xj9eHVxhptapHTqj0xnvf.png" isMerged="true"
[V0_FILE]png:file="public/larry-ackerman-headshot.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/larry-ackerman-headshot-PBFartr9Q4Ab8nILXbAXSLMEbGidQ2.png" isMerged="true"
[V0_FILE]typescriptreact:file="components/expert-biography-popup.tsx" isMerged="true"
"use client"

interface ExpertBio {
  name: string
  title: string
  image: string
  achievements: string[]
  description: string
  companies: string[]
}

interface ExpertBiographyPopupProps {
  expert: ExpertBio | null
  isOpen: boolean
  onClose: () => void
}

export function ExpertBiographyPopup({ expert, isOpen, onClose }: ExpertBiographyPopupProps) {
  if (!isOpen || !expert) return null

return (
    <div className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 flex items-center justify-center p-4">
      <div className="bg-gray-900 border border-cyan-500/30 rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
        <div className="p-8">
          {/* Header */}
          <div className="flex items-start justify-between mb-6">
            <div className="flex items-center gap-4">
              <div className="w-20 h-20 rounded-full overflow-hidden border-3 border-cyan-400/50 shadow-lg shadow-cyan-500/25">
                <img
                  src={expert.image || "/placeholder.svg"}
                  alt={expert.name}
                  className="w-full h-full object-cover"
                />
              </div>
              <div>
                <h3 className="text-2xl font-bold text-white">{expert.name}</h3>
                <p className="text-cyan-400 font-semibold">{expert.title}</p>
              </div>
            </div>
            <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors p-2">
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>

{/* Description */}
          <div className="mb-6">
            <p className="text-gray-300 leading-relaxed">{expert.description}</p>
          </div>

{/* Companies */}
          <div className="mb-6">
            <h4 className="text-lg font-semibold text-white mb-3">Entreprises associées</h4>
            <div className="flex flex-wrap gap-2">
              {expert.companies.map((company, index) => (
                <span
                  key={index}
                  className="px-3 py-1 bg-cyan-500/20 border border-cyan-500/30 rounded-full text-cyan-300 text-sm"
                >
                  {company}
                </span>
              ))}
            </div>
          </div>

{/* Achievements */}
          <div>
            <h4 className="text-lg font-semibold text-white mb-3">Accomplissements majeurs</h4>
            <ul className="space-y-2">
              {expert.achievements.map((achievement, index) => (
                <li key={index} className="flex items-start gap-3 text-gray-300">
                  <div className="w-2 h-2 bg-cyan-400 rounded-full mt-2 flex-shrink-0" />
                  <span>{achievement}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/expert-insights.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useEffect, useRef, useState } from "react"
import { ExpertBiographyPopup } from "./expert-biography-popup"

const expertsData = {
  "jeff-bezos": {
    name: "Jeff Bezos",
    title: "Fondateur d'Amazon",
    image: "/jeff-bezos-headshot.png",
    description:
      "Jeff Bezos a révolutionné le commerce électronique et l'informatique en nuage. Visionnaire de l'économie digitale, il a transformé Amazon d'une librairie en ligne en l'une des entreprises les plus puissantes au monde.",
    companies: ["Amazon", "Blue Origin", "The Washington Post"],
    achievements: [
      "A créé Amazon en 1994, devenue la plus grande plateforme e-commerce mondiale",
      "A développé Amazon Web Services (AWS), leader du cloud computing",
      "Fortune personnelle de plus de 170 milliards de dollars",
      "A révolutionné la logistique et la livraison avec Amazon Prime",
      "Pionnier de l'exploration spatiale commerciale avec Blue Origin",
    ],
  },
  "warren-buffett": {
    name: "Warren Buffett",
    title: "PDG de Berkshire Hathaway",
    image: "/warren-buffett-headshot.png",
    description:
      "Surnommé l'Oracle d'Omaha, Warren Buffett est l'un des investisseurs les plus respectés au monde. Sa philosophie d'investissement à long terme et sa compréhension des marques fortes ont fait de lui une légende de la finance.",
    companies: ["Berkshire Hathaway", "GEICO", "Dairy Queen"],
    achievements: [
      "Fortune de plus de 100 milliards de dollars grâce à ses investissements",
      "A transformé Berkshire Hathaway en conglomérat de 700 milliards de dollars",
      "Investisseur légendaire avec un rendement annuel moyen de 20% sur 50 ans",
      "Philanthrope engagé avec The Giving Pledge",
      "Mentor et inspiration pour des millions d'investisseurs",
    ],
  },
  "steve-forbes": {
    name: "Steve Forbes",
    title: "Président de Forbes Media",
    image: "/steve-forbes-headshot.png",
    description:
      "Steve Forbes dirige l'empire médiatique Forbes, référence mondiale en matière de business et de finance. Expert reconnu en économie, il comprend l'importance cruciale de la marque dans la réussite entrepreneuriale.",
    companies: ["Forbes Media", "Forbes Magazine"],
    achievements: [
      "Dirige Forbes Media, valorisé à plus de 800 millions de dollars",
      "A modernisé Forbes avec une stratégie digitale innovante",
      "Candidat présidentiel américain en 1996 et 2000",
      "Auteur de plusieurs livres sur l'économie et l'entrepreneuriat",
      "Influence majeure dans les médias business mondiaux",
    ],
  },
  "jim-mullen": {
    name: "Jim Mullen",
    title: "CEO de Reach",
    image: "/jim-mullen-ceo-headshot.png",
    description:
      "Jim Mullen a dirigé la transformation digitale de Reach, l'un des plus grands groupes médiatiques britanniques. Son expertise en stratégie de marque et transformation digitale en fait une référence du secteur.",
    companies: ["Reach plc", "Daily Mirror", "Daily Express"],
    achievements: [
      "A dirigé la transformation digitale de Reach avec succès",
      "Expertise reconnue en stratégie de marque et médias digitaux",
      "A optimisé la monétisation des contenus digitaux",
      "Leader dans l'adaptation des médias traditionnels au digital",
      "Stratège reconnu pour la fidélisation des audiences",
    ],
  },
  "larry-ackerman": {
    name: "Larry Ackerman",
    title: "Expert en Identité de Marque",
    image: "/larry-ackerman-headshot.png",
    description:
      "Larry Ackerman est un consultant renommé spécialisé dans l'identité de marque et la stratégie d'entreprise. Ses théories sur l'identité organisationnelle ont influencé des milliers d'entreprises dans le monde.",
    companies: ["The Identity Circle", "Ackerman Consulting"],
    achievements: [
      "Auteur de 'Identity Is Destiny', référence en stratégie de marque",
      "Consultant pour des entreprises Fortune 500",
      "Pionnier des théories sur l'identité organisationnelle",
      "Conférencier international reconnu",
      "Expert en transformation d'entreprise et culture organisationnelle",
    ],
  },
}

export function ExpertInsights() {
  const sectionRef = useRef<HTMLElement>(null)
  const [selectedExpert, setSelectedExpert] = useState<(typeof expertsData)[keyof typeof expertsData] | null>(null)
  const [isPopupOpen, setIsPopupOpen] = useState(false)

const openExpertPopup = (expertKey: keyof typeof expertsData) => {
    setSelectedExpert(expertsData[expertKey])
    setIsPopupOpen(true)
  }

const closePopup = () => {
    setIsPopupOpen(false)
    setSelectedExpert(null)
  }

useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("animate-in")
          }
        })
      },
      { threshold: 0.1 },
    )

const elements = sectionRef.current?.querySelectorAll(".fade-in")
    elements?.forEach((el) => observer.observe(el))

return () => observer.disconnect()
  }, [])

return (
    <>
      <section ref={sectionRef} className="py-20 relative overflow-hidden">
        {/* Background gradient */}
        <div className="absolute inset-0 bg-gradient-to-br from-cyan-500/5 via-transparent to-blue-500/5" />

<div className="container mx-auto px-4 relative z-10">
          <div className="text-center mb-16 fade-in">
            <div className="max-w-4xl mx-auto">
              <div className="bg-gray-800/30 backdrop-blur-sm border border-gray-700/30 rounded-3xl p-8 md:p-12">
                <div className="prose prose-lg prose-invert max-w-none">
                  <p className="text-gray-300 leading-relaxed mb-6 text-xl">
                    Dans un monde où le marketing digital renforce la visibilité et améliore les ventes, construire une
                    image de marque solide devient une stratégie indispensable pour toute entreprise en expansion.
                  </p>
                  <p className="text-gray-300 leading-relaxed mb-6">
                    L'identité visuelle digitale — par votre site, vos supports visuels, votre charte graphique — est
                    d'abord un <span className="text-cyan-400 font-semibold">actif stratégique</span> : elle assure
                    votre visibilité, votre reconnaissance et nourrit votre réputation.
                  </p>
                  <p className="text-gray-300 leading-relaxed mb-6">
                    Pour les petites structures, adopter des outils digitaux favorise une croissance maîtrisée, en phase
                    avec les attentes du marché. Sans cette présence, vous risquez de négliger un lien essentiel avec
                    votre audience et de compromettre votre croissance.
                  </p>
                  <p className="text-gray-300 leading-relaxed text-center">
                    En investissant dans votre image de marque, vous misez sur l'actif le plus important de votre
                    entreprise : une marque forte vous offre la{" "}
                    <span className="text-cyan-400 font-semibold text-xl">
                      meilleure base pour une croissance durable et rentable
                    </span>
                    .
                  </p>
                </div>
              </div>
            </div>
          </div>

{/* Expert quotes section with French translations */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-16 fade-in">
            <div
              className="bg-gray-800/20 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-6 hover:border-cyan-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              onClick={() => openExpertPopup("jeff-bezos")}
            >
              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-cyan-400/30 shadow-lg">
                  <img src="/jeff-bezos-headshot.png" alt="Jeff Bezos" className="w-full h-full object-cover" />
                </div>
                <blockquote className="text-gray-300 italic flex-1">
                  "Une marque pour une entreprise est comme une réputation pour une personne. Vous gagnez votre
                  réputation en essayant de bien faire les choses difficiles."
                </blockquote>
              </div>
              <cite className="text-cyan-400 font-semibold ml-16">— Jeff Bezos</cite>
            </div>

<div
              className="bg-gray-800/20 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-6 hover:border-cyan-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              onClick={() => openExpertPopup("warren-buffett")}
            >
              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-green-400/30 shadow-lg">
                  <img src="/warren-buffett-headshot.png" alt="Warren Buffett" className="w-full h-full object-cover" />
                </div>
                <blockquote className="text-gray-300 italic flex-1">
                  "Il faut 20 ans pour construire une réputation et 5 minutes pour la détruire."
                </blockquote>
              </div>
              <cite className="text-cyan-400 font-semibold ml-16">— Warren Buffett</cite>
            </div>

<div
              className="bg-gray-800/20 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-6 hover:border-cyan-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              onClick={() => openExpertPopup("steve-forbes")}
            >
              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-purple-400/30 shadow-lg">
                  <img src="/steve-forbes-headshot.png" alt="Steve Forbes" className="w-full h-full object-cover" />
                </div>
                <blockquote className="text-gray-300 italic flex-1">
                  "Votre marque est l'investissement le plus important que vous pouvez faire dans votre entreprise."
                </blockquote>
              </div>
              <cite className="text-cyan-400 font-semibold ml-16">— Steve Forbes</cite>
            </div>

<div
              className="bg-gray-800/20 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-6 hover:border-cyan-500/30 transition-all duration-300 md:col-span-2 cursor-pointer hover:scale-105"
              onClick={() => openExpertPopup("jim-mullen")}
            >
              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-orange-400/30 shadow-lg">
                  <img src="/jim-mullen-ceo-headshot.png" alt="Jim Mullen" className="w-full h-full object-cover" />
                </div>
                <blockquote className="text-gray-300 italic flex-1">
                  "De tous les biens détenus par une entreprise, les marques sont de loin les plus importantes et les
                  plus difficiles... La fidélité à la marque est la seule base solide sur laquelle les dirigeants
                  peuvent construire une croissance durable et rentable."
                </blockquote>
              </div>
              <cite className="text-cyan-400 font-semibold ml-16">— Jim Mullen, CEO Reach</cite>
            </div>

<div
              className="bg-gray-800/20 backdrop-blur-sm border border-gray-700/30 rounded-2xl p-6 hover:border-cyan-500/30 transition-all duration-300 cursor-pointer hover:scale-105"
              onClick={() => openExpertPopup("larry-ackerman")}
            >
              <div className="flex items-start gap-4 mb-4">
                <div className="w-12 h-12 rounded-full overflow-hidden border-2 border-teal-400/30 shadow-lg">
                  <img src="/larry-ackerman-headshot.png" alt="Larry Ackerman" className="w-full h-full object-cover" />
                </div>
                <blockquote className="text-gray-300 italic flex-1">
                  "L'identité est la cause ; la marque est l'effet, et la force de la première influence la force de la
                  seconde."
                </blockquote>
              </div>
              <cite className="text-cyan-400 font-semibold ml-16">— Larry Ackerman</cite>
            </div>
          </div>

{/* Call to action */}
          <div className="text-center fade-in">
            <div className="bg-gradient-to-r from-cyan-500/10 to-blue-500/10 border border-cyan-500/20 rounded-2xl p-8 max-w-2xl mx-auto">
              <h3 className="text-2xl font-bold text-white mb-4">Prêt à développer votre présence digitale ?</h3>
              <p className="text-gray-300 mb-6">
                Transformons ensemble votre vision en une identité digitale forte qui génère des résultats.
              </p>
              <a
                href="#contact"
                className="inline-flex items-center px-8 py-3 bg-gradient-to-r from-cyan-500 to-blue-500 text-white font-semibold rounded-full hover:from-cyan-400 hover:to-blue-400 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/25 hover:-translate-y-0.5"
              >
                Démarrer votre projet
                <svg className="ml-2 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
                </svg>
              </a>
            </div>
          </div>
        </div>

{/* Floating elements */}
        <div className="absolute top-20 left-10 w-2 h-2 bg-cyan-400 rounded-full animate-pulse opacity-60" />
        <div className="absolute bottom-32 right-16 w-3 h-3 bg-blue-400 rounded-full animate-pulse opacity-40" />
        <div className="absolute top-1/2 right-8 w-1 h-1 bg-cyan-300 rounded-full animate-pulse opacity-80" />
      </section>

<ExpertBiographyPopup expert={selectedExpert} isOpen={isPopupOpen} onClose={closePopup} />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/mobile-optimizations.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

export function MobileOptimizations() {
  const [isMobile, setIsMobile] = useState(false)

useEffect(() => {
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768)
    }

checkMobile()
    window.addEventListener("resize", checkMobile)

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

useEffect(() => {
    if (isMobile) {
      document.body.classList.add("mobile-optimized")

document.body.style.webkitOverflowScrolling = "touch"

const viewport = document.querySelector("meta[name=viewport]")
      if (viewport) {
        viewport.setAttribute("content", "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no")
      }
    } else {
      document.body.classList.remove("mobile-optimized")
      document.body.style.webkitOverflowScrolling = "auto"
    }
  }, [isMobile])

return null
}
[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { Header } from "@/components/header"
import { Hero } from "@/components/hero"
import { Services } from "@/components/services"
import { Portfolio } from "@/components/portfolio"
import { Process } from "@/components/process"
import { Pricing } from "@/components/pricing"
import { Location } from "@/components/location"
import { Contact } from "@/components/contact"
import { Footer } from "@/components/footer"
import { DigitalImportance } from "@/components/digital-importance"
import { FloatingElements } from "@/components/scroll-animations"
import { ExpertInsights } from "@/components/expert-insights"
import { BrandingServices } from "@/components/branding-services"
import { ContactPopup } from "@/components/contact-popup"
import { FloatingContactButton } from "@/components/floating-contact-button"
import { MobileQuickActions } from "@/components/mobile-quick-actions"
import { MobileOptimizations } from "@/components/mobile-optimizations"
import { ParticleSystem } from "@/components/particle-system"
import { CustomCursor } from "@/components/custom-cursor"

export default function HomePage() {
  const [isContactPopupOpen, setIsContactPopupOpen] = useState(false)

const handleContactClick = () => {
    setIsContactPopupOpen(true)
  }

const handleClosePopup = () => {
    setIsContactPopupOpen(false)
  }

return (
    <div className="min-h-screen">
      <ParticleSystem />
      <CustomCursor />
      <MobileOptimizations />
      <FloatingElements />
      <Header onContactClick={handleContactClick} />
      <main className="mobile-section-spacing relative z-10">
        <Hero onContactClick={handleContactClick} />
        <Services />
        <BrandingServices />
        <DigitalImportance />
        <ExpertInsights />
        <Portfolio />
        <Process />
        <Pricing onContactClick={handleContactClick} />
        <Location />
        <Contact />
      </main>
      <Footer />

<FloatingContactButton onClick={handleContactClick} />
      <MobileQuickActions onContactClick={handleContactClick} />
      <ContactPopup isOpen={isContactPopupOpen} onClose={handleClosePopup} />
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/footer.tsx" isEdit="true" isMerged="true"
"use client"

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

export function Footer() {
  const [currentYear, setCurrentYear] = useState("")

useEffect(() => {
    setCurrentYear(new Date().getFullYear().toString())
  }, [])

return (
    <footer className="py-12 px-4 border-t border-border">
      <div className="container mx-auto">
        <div className="flex flex-col md:flex-row justify-between items-center gap-4">
          <div className="text-muted-foreground">© {currentYear} Level Up — Tous droits réservés</div>
          <div className="flex gap-6">
            <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
              Mentions légales
            </Link>
            <Link href="#" className="text-muted-foreground hover:text-foreground transition-colors">
              Politique de confidentialité
            </Link>
          </div>
        </div>
      </div>
    </footer>
  )
}
[V0_FILE]typescriptreact:file="components/particle-system.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

interface Particle {
  x: number
  y: number
  vx: number
  vy: number
  size: number
  opacity: number
  color: string
}

export function ParticleSystem() {
  const canvasRef = useRef<HTMLCanvasElement>(null)
  const particlesRef = useRef<Particle[]>([])
  const mouseRef = useRef({ x: 0, y: 0 })
  const animationRef = useRef<number>()

useEffect(() => {
    const canvas = canvasRef.current
    if (!canvas) return

const ctx = canvas.getContext("2d")
    if (!ctx) return

const resizeCanvas = () => {
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight
    }

const createParticles = () => {
      const particles: Particle[] = []
      const particleCount = Math.min(50, Math.floor(window.innerWidth / 30))

for (let i = 0; i < particleCount; i++) {
        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          vx: (Math.random() - 0.5) * 0.5,
          vy: (Math.random() - 0.5) * 0.5,
          size: Math.random() * 2 + 1,
          opacity: Math.random() * 0.5 + 0.2,
          color: Math.random() > 0.5 ? "#0ea5e9" : "#22c55e",
        })
      }
      particlesRef.current = particles
    }

const animate = () => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)

particlesRef.current.forEach((particle, index) => {
        // Mouse attraction
        const dx = mouseRef.current.x - particle.x
        const dy = mouseRef.current.y - particle.y
        const distance = Math.sqrt(dx * dx + dy * dy)

if (distance < 100) {
          particle.vx += dx * 0.00005
          particle.vy += dy * 0.00005
        }

// Update position
        particle.x += particle.vx
        particle.y += particle.vy

// Boundary check
        if (particle.x < 0 || particle.x > canvas.width) particle.vx *= -1
        if (particle.y < 0 || particle.y > canvas.height) particle.vy *= -1

// Draw particle
        ctx.beginPath()
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
        ctx.fillStyle = particle.color
        ctx.globalAlpha = particle.opacity
        ctx.fill()

// Draw connections
        particlesRef.current.slice(index + 1).forEach((otherParticle) => {
          const dx = particle.x - otherParticle.x
          const dy = particle.y - otherParticle.y
          const distance = Math.sqrt(dx * dx + dy * dy)

if (distance < 80) {
            ctx.beginPath()
            ctx.moveTo(particle.x, particle.y)
            ctx.lineTo(otherParticle.x, otherParticle.y)
            ctx.strokeStyle = particle.color
            ctx.globalAlpha = ((80 - distance) / 80) * 0.2
            ctx.lineWidth = 0.5
            ctx.stroke()
          }
        })
      })

ctx.globalAlpha = 1
      animationRef.current = requestAnimationFrame(animate)
    }

const handleMouseMove = (e: MouseEvent) => {
      mouseRef.current = { x: e.clientX, y: e.clientY }
    }

const handleResize = () => {
      resizeCanvas()
      createParticles()
    }

resizeCanvas()
    createParticles()
    animate()

window.addEventListener("mousemove", handleMouseMove)
    window.addEventListener("resize", handleResize)

return () => {
      if (animationRef.current) {
        cancelAnimationFrame(animationRef.current)
      }
      window.removeEventListener("mousemove", handleMouseMove)
      window.removeEventListener("resize", handleResize)
    }
  }, [])

return (
    <canvas ref={canvasRef} className="fixed inset-0 pointer-events-none z-0" style={{ background: "transparent" }} />
  )
}
[V0_FILE]typescriptreact:file="components/custom-cursor.tsx" isMerged="true"
"use client"

import { useEffect, useRef } from "react"

export function CustomCursor() {
  const cursorRef = useRef<HTMLDivElement>(null)
  const trailRef = useRef<HTMLDivElement>(null)

useEffect(() => {
    const cursor = cursorRef.current
    const trail = trailRef.current
    if (!cursor || !trail) return

let mouseX = 0
    let mouseY = 0
    let trailX = 0
    let trailY = 0

const handleMouseMove = (e: MouseEvent) => {
      mouseX = e.clientX
      mouseY = e.clientY

cursor.style.left = mouseX + "px"
      cursor.style.top = mouseY + "px"
    }

const animateTrail = () => {
      trailX += (mouseX - trailX) * 0.1
      trailY += (mouseY - trailY) * 0.1

trail.style.left = trailX + "px"
      trail.style.top = trailY + "px"

requestAnimationFrame(animateTrail)
    }

const handleMouseEnter = () => {
      cursor.style.transform = "translate(-50%, -50%) scale(1.5)"
      trail.style.transform = "translate(-50%, -50%) scale(2)"
    }

const handleMouseLeave = () => {
      cursor.style.transform = "translate(-50%, -50%) scale(1)"
      trail.style.transform = "translate(-50%, -50%) scale(1)"
    }

document.addEventListener("mousemove", handleMouseMove)
    document.querySelectorAll("a, button").forEach((el) => {
      el.addEventListener("mouseenter", handleMouseEnter)
      el.addEventListener("mouseleave", handleMouseLeave)
    })

animateTrail()

return () => {
      document.removeEventListener("mousemove", handleMouseMove)
      document.querySelectorAll("a, button").forEach((el) => {
        el.removeEventListener("mouseenter", handleMouseEnter)
        el.removeEventListener("mouseleave", handleMouseLeave)
      })
    }
  }, [])

return (
    <>
      <div
        ref={cursorRef}
        className="fixed w-4 h-4 bg-cyan-400 rounded-full pointer-events-none z-50 mix-blend-difference transition-transform duration-200"
        style={{ transform: "translate(-50%, -50%)" }}
      />
      <div
        ref={trailRef}
        className="fixed w-8 h-8 border border-cyan-400/30 rounded-full pointer-events-none z-40 transition-transform duration-300"
        style={{ transform: "translate(-50%, -50%)" }}
      />
    </>
  )
}
[V0_FILE]typescriptreact:file="components/animated-counter.tsx" isMerged="true"
"use client"

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

interface AnimatedCounterProps {
  end: number
  duration?: number
  suffix?: string
  className?: string
}

export function AnimatedCounter({ end, duration = 2000, suffix = "", className = "" }: AnimatedCounterProps) {
  const [count, setCount] = useState(0)
  const [isVisible, setIsVisible] = useState(false)
  const ref = useRef<HTMLDivElement>(null)

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

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

return () => observer.disconnect()
  }, [isVisible])

useEffect(() => {
    if (!isVisible) return

let startTime: number
    const startCount = 0

const animate = (currentTime: number) => {
      if (!startTime) startTime = currentTime
      const progress = Math.min((currentTime - startTime) / duration, 1)

const easeOutQuart = 1 - Math.pow(1 - progress, 4)
      const currentCount = Math.floor(startCount + (end - startCount) * easeOutQuart)

setCount(currentCount)

if (progress < 1) {
        requestAnimationFrame(animate)
      }
    }

requestAnimationFrame(animate)
  }, [isVisible, end, duration])

return (
    <div ref={ref} className={className}>
      {count}
      {suffix}
    </div>
  )
}
[V0_FILE]typescriptreact:file="components/glitch-text.tsx" isMerged="true"
"use client"

import { useEffect, useState } from "react"

interface GlitchTextProps {
  text: string
  className?: string
}

export function GlitchText({ text, className = "" }: GlitchTextProps) {
  const [glitchText, setGlitchText] = useState(text)
  const [isGlitching, setIsGlitching] = useState(false)

useEffect(() => {
    const glitchChars = "!@#$%^&*()_+-=[]{}|;:,.<>?"

const startGlitch = () => {
      setIsGlitching(true)
      let iterations = 0

const interval = setInterval(() => {
        setGlitchText(
          text
            .split("")
            .map((char, index) => {
              if (index < iterations) return text[index]
              return glitchChars[Math.floor(Math.random() * glitchChars.length)]
            })
            .join(""),
        )

iterations += 1 / 3

if (iterations >= text.length) {
          clearInterval(interval)
          setGlitchText(text)
          setIsGlitching(false)
        }
      }, 30)
    }

const glitchInterval = setInterval(() => {
      if (Math.random() > 0.95 && !isGlitching) {
        startGlitch()
      }
    }, 100)

return () => clearInterval(glitchInterval)
  }, [text, isGlitching])

return (
    <span className={`${className} ${isGlitching ? "text-cyan-400" : ""} transition-colors duration-100`}>
      {glitchText}
    </span>
  )
}
[V0_FILE]typescriptreact:file="components/hero.tsx" isEdit="true"
"use client"

import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import Link from "next/link"
import { useEffect, useState } from "react"
import { AnimatedCounter } from "@/components/animated-counter"
import { GlitchText } from "@/components/glitch-text"

interface HeroProps {
  onContactClick: () => void
}

export function Hero({ onContactClick }: HeroProps) {
  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })

useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      setMousePosition({ x: e.clientX, y: e.clientY })
    }

window.addEventListener("mousemove", handleMouseMove)
    return () => window.removeEventListener("mousemove", handleMouseMove)
  }, [])

return (
    <section className="pt-24 pb-12 px-4 relative overflow-hidden">
      <div className="absolute inset-0 pointer-events-none">
        <div
          className="absolute w-96 h-96 bg-primary/5 rounded-full blur-3xl animate-pulse-glow"
          style={{
            left: mousePosition.x * 0.02 + "px",
            top: mousePosition.y * 0.02 + "px",
          }}
        />
        <div className="absolute top-20 right-20 w-2 h-2 bg-primary/40 rounded-full animate-float-slow" />
        <div className="absolute bottom-40 left-10 w-3 h-3 bg-green-400/30 rounded-full animate-float-medium" />
        <div className="absolute top-1/3 left-1/4 w-1 h-1 bg-neon-cyan/60 rounded-full animate-float-fast" />
        <div className="absolute bottom-1/3 right-1/3 w-2 h-2 bg-neon-blue/40 rounded-full animate-float-slow" />
        <div className="absolute top-2/3 right-1/4 w-1.5 h-1.5 bg-primary/50 rounded-full animate-float-medium" />
      </div>

<div className="container mx-auto relative">
        <div className="grid lg:grid-cols-2 gap-8 items-center">
          <div className="space-y-6 scroll-animate">
            <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-border bg-card text-sm text-muted-foreground hover-scale animate-neon-glow">
              🚀 Sites vitrines rapides & SEO
            </div>

<h1 className="text-4xl lg:text-5xl font-bold leading-tight">
              Je conçois des sites vitrines <GlitchText text="modernes" className="text-gradient" /> qui transforment
              vos visiteurs en <GlitchText text="clients" className="text-neon" />.
            </h1>

<p className="text-lg text-muted-foreground max-w-2xl">
              Accompagnement complet : de l'identité visuelle au référencement, avec une mise en ligne en quelques jours
              et une maintenance flexible.
            </p>

<div className="flex flex-col sm:flex-row gap-4">
              <Button
                onClick={onContactClick}
                size="lg"
                className="rounded-full btn-magnetic glow-effect animate-pulse-glow"
              >
                Démarrer votre projet
              </Button>
              <Button
                asChild
                variant="outline"
                size="lg"
                className="rounded-full bg-transparent btn-magnetic hover-lift"
              >
                <Link href="#portfolio">Voir des exemples</Link>
              </Button>
            </div>

<div className="grid grid-cols-3 gap-4 pt-4">
              <div className="text-center p-4 rounded-lg bg-card/50 hover-lift scroll-animate shadow-neon">
                <AnimatedCounter end={60} suffix="+" className="text-2xl font-bold text-gradient" />
                <div className="text-sm text-muted-foreground">projets livrés</div>
              </div>
              <div className="text-center p-4 rounded-lg bg-card/50 hover-lift scroll-animate shadow-neon">
                <div className="text-2xl font-bold text-gradient">≤ 1s</div>
                <div className="text-sm text-muted-foreground">au above-the-fold</div>
              </div>
              <div className="text-center p-4 rounded-lg bg-card/50 hover-lift scroll-animate shadow-neon">
                <AnimatedCounter end={98} suffix="%" className="text-2xl font-bold text-gradient" />
                <div className="text-sm text-muted-foreground">clients satisfaits</div>
              </div>
            </div>
          </div>

<div className="absolute bottom-4 right-4 text-xs text-primary/60 font-mono animate-float-medium">
                </>
              </div>
              <div className="absolute top-1/2 right-8 text-xs text-neon-cyan/40 font-mono animate-float-fast">{}</div>
            </div>
          </Card>
        </div>
      </div>
    </section>
  )
}
[V0_FILE]css:file="app/globals.css" isFixed="true" isEdit="true" isQuickEdit="true"
@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

:root {
  --background: oklch(0.08 0.02 240);
  --foreground: oklch(0.98 0.01 180);
  --card: oklch(0.12 0.03 240);
  --card-foreground: oklch(0.98 0.01 180);
  --popover: oklch(0.12 0.03 240);
  --popover-foreground: oklch(0.98 0.01 180);
  --primary: oklch(0.7 0.25 195);
  --primary-foreground: oklch(0.05 0.02 240);
  --secondary: oklch(0.18 0.04 240);
  --secondary-foreground: oklch(0.98 0.01 180);
  --muted: oklch(0.18 0.04 240);
  --muted-foreground: oklch(0.65 0.05 200);
  --accent: oklch(0.18 0.04 240);
  --accent-foreground: oklch(0.98 0.01 180);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);
  --border: oklch(0.2 0.04 240);
  --input: oklch(0.2 0.04 240);
  --ring: oklch(0.7 0.25 195);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --radius: 0.625rem;
  --sidebar: oklch(0.12 0.03 240);
  --sidebar-foreground: oklch(0.98 0.01 180);
  --sidebar-primary: oklch(0.7 0.25 195);
  --sidebar-primary-foreground: oklch(0.05 0.02 240);
  --sidebar-accent: oklch(0.18 0.04 240);
  --sidebar-accent-foreground: oklch(0.98 0.01 180);
  --sidebar-border: oklch(0.2 0.04 240);
  --sidebar-ring: oklch(0.7 0.25 195);

/* Added neon cyan colors inspired by the logo */
  --neon-cyan: oklch(0.8 0.3 195);
  --neon-cyan-glow: oklch(0.7 0.25 195);
  --neon-blue: oklch(0.6 0.2 220);
}

.dark {
  /* Updated dark theme colors to match neon aesthetic */
  --background: oklch(0.08 0.02 240);
  --foreground: oklch(0.98 0.01 180);
  --card: oklch(0.12 0.03 240);
  --card-foreground: oklch(0.98 0.01 180);
  --popover: oklch(0.12 0.03 240);
  --popover-foreground: oklch(0.98 0.01 180);
  --primary: oklch(0.7 0.25 195);
  --primary-foreground: oklch(0.05 0.02 240);
  --secondary: oklch(0.18 0.04 240);
  --secondary-foreground: oklch(0.98 0.01 180);
  --muted: oklch(0.18 0.04 240);
  --muted-foreground: oklch(0.65 0.05 200);
  --accent: oklch(0.18 0.04 240);
  --accent-foreground: oklch(0.98 0.01 180);
  --destructive: oklch(0.396 0.141 25.723);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(0.2 0.04 240);
  --input: oklch(0.2 0.04 240);
  --ring: oklch(0.7 0.25 195);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.12 0.03 240);
  --sidebar-foreground: oklch(0.98 0.01 180);
  --sidebar-primary: oklch(0.7 0.25 195);
  --sidebar-primary-foreground: oklch(0.05 0.02 240);
  --sidebar-accent: oklch(0.18 0.04 240);
  --sidebar-accent-foreground: oklch(0.98 0.01 180);
  --sidebar-border: oklch(0.2 0.04 240);
  --sidebar-ring: oklch(0.7 0.25 195);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);

/* Added custom neon colors to Tailwind theme */
  --color-neon-cyan: var(--neon-cyan);
  --color-neon-cyan-glow: var(--neon-cyan-glow);
  --color-neon-blue: var(--neon-blue);
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }

body {
    @apply bg-background text-foreground;
    line-height: 1.6;
  }

::-webkit-scrollbar {
    width: 8px;
  }

::-webkit-scrollbar-track {
    background: var(--background);
  }

::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 4px;
  }

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-cyan-glow);
  }
}

@layer utilities {
  /* Enhanced glow animations with neon cyan colors */
  .animate-neon-glow {
    animation: neon-glow 2s ease-in-out infinite alternate;
  }

@keyframes neon-glow {
    from {
      box-shadow: 0 0 20px rgba(0, 217, 255, 0.4), 0 0 40px rgba(0, 217, 255, 0.2);
      filter: brightness(1);
    }
    to {
      box-shadow: 0 0 30px rgba(0, 217, 255, 0.8), 0 0 60px rgba(0, 217, 255, 0.4);
      filter: brightness(1.2);
    }
  }

.animate-glow {
    animation: glow 2s ease-in-out infinite alternate;
  }

@keyframes glow {
    from {
      box-shadow: 0 0 20px rgba(0, 217, 255, 0.3);
    }
    to {
      box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
    }
  }

/* Added innovative floating animations */
  .animate-float-slow {
    animation: float-slow 6s ease-in-out infinite;
  }

.animate-float-medium {
    animation: float-medium 4s ease-in-out infinite;
  }

.animate-float-fast {
    animation: float-fast 3s ease-in-out infinite;
  }

@keyframes float-slow {
    0%,
    100% {
      transform: translateY(0px) rotate(0deg);
    }
    50% {
      transform: translateY(-20px) rotate(180deg);
    }
  }

@keyframes float-medium {
    0%,
    100% {
      transform: translateY(0px) translateX(0px);
    }
    25% {
      transform: translateY(-15px) translateX(10px);
    }
    75% {
      transform: translateY(15px) translateX(-10px);
    }
  }

@keyframes float-fast {
    0%,
    100% {
      transform: translateY(0px) scale(1);
    }
    50% {
      transform: translateY(-25px) scale(1.1);
    }
  }

/* Added scroll-triggered animations */
  .scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

.scroll-animate.animate-in {
    opacity: 1;
    transform: translateY(0);
  }

/* Added hover effects */
  .hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 217, 255, 0.15);
  }

.hover-scale {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.hover-scale:hover {
    transform: scale(1.05);
  }

/* Added magnetic button effect */
  .btn-magnetic {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

.btn-magnetic:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 217, 255, 0.3);
  }

/* Added glow effect for buttons */
  .glow-effect {
    position: relative;
    overflow: hidden;
  }

.glow-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 217, 255, 0.2), transparent);
    transition: left 0.5s;
  }

.glow-effect:hover::before {
    left: 100%;
  }

.backdrop-blur-glass {
    backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(20, 25, 61, 0.9), rgba(20, 25, 61, 0.6));
  }

.card-shadow {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
  }

.text-gradient {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

/* Added neon text effect */
  .text-neon {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
  }

/* Added pulse animation for interactive elements */
  .animate-pulse-glow {
    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

@keyframes pulse-glow {
    0%,
    100% {
      opacity: 1;
      box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
    }
    50% {
      opacity: 0.8;
      box-shadow: 0 0 40px rgba(0, 217, 255, 0.8);
    }
  }

/* Added fade-in animation for expert insights section */
  .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  }

.fade-in.animate-in {
    opacity: 1;
    transform: translateY(0);
  }

/* Added staggered animation delays for sequential reveals */
  .fade-in:nth-child(1) {
    transition-delay: 0.1s;
  }
  .fade-in:nth-child(2) {
    transition-delay: 0.2s;
  }
  .fade-in:nth-child(3) {
    transition-delay: 0.3s;
  }
  .fade-in:nth-child(4) {
    transition-delay: 0.4s;
  }

/* Added animations for contact popup and floating button */
  .animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }

@keyframes fade-in {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }

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

@keyframes bounce-slow {
    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }
    40% {
      transform: translateY(-10px);
    }
    60% {
      transform: translateY(-5px);
    }
  }

.shadow-neon {
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.5), 0 0 40px rgba(0, 217, 255, 0.3);
  }

/* Added holographic text effect for premium look */
  .text-holographic {
    background: linear-gradient(
      45deg,
      var(--neon-cyan) 0%,
      var(--neon-blue) 25%,
      var(--neon-cyan) 50%,
      var(--neon-blue) 75%,
      var(--neon-cyan) 100%
    );
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: holographic-shift 3s ease-in-out infinite;
  }

@keyframes holographic-shift {
    0%,
    100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }

/* Added matrix rain effect for background */
  .matrix-rain {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
    opacity: 0.1;
  }

.matrix-char {
    position: absolute;
    color: var(--neon-cyan);
    font-family: "Courier New", monospace;
    font-size: 14px;
    animation: matrix-fall linear infinite;
  }

@keyframes matrix-fall {
    0% {
      transform: translateY(-100vh);
      opacity: 1;
    }
    100% {
      transform: translateY(100vh);
      opacity: 0;
    }
  }

/* Added morphing button effect */
  .btn-morph {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  }

.btn-morph::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--neon-cyan) 0%, transparent 70%);
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translate(-50%, -50%);
    z-index: -1;
  }

.btn-morph:hover::before {
    width: 300px;
    height: 300px;
  }

/* Added breathing animation for logo */
  .animate-breathe {
    animation: breathe 4s ease-in-out infinite;
  }

@keyframes breathe {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }

/* Added electric border effect */
  .border-electric {
    position: relative;
    border: 2px solid transparent;
    background: linear-gradient(var(--background), var(--background)) padding-box,
      linear-gradient(45deg, var(--neon-cyan), var(--neon-blue), var(--neon-cyan)) border-box;
  }

.border-electric::before {
    content: "";
    position: absolute;
    inset: -2px;
    padding: 2px;
    background: linear-gradient(45deg, var(--neon-cyan), var(--neon-blue));
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    animation: electric-flow 2s linear infinite;
  }

@keyframes electric-flow {
    0% {
      background-position: 0% 50%;
    }
    100% {
      background-position: 200% 50%;
    }
  }

/* Mobile-specific improvements */
  @media (max-width: 768px) {
    /* Better section spacing on mobile */
    .mobile-section-spacing {
      padding-top: 3rem;
      padding-bottom: 3rem;
    }

/* Improved mobile typography */
    .mobile-text-lg {
      font-size: 1.125rem;
      line-height: 1.75rem;
    }

/* Better mobile button sizing */
    .mobile-btn {
      padding: 0.875rem 1.5rem;
      font-size: 1rem;
      min-height: 48px;
    }

/* Mobile-optimized cards */
    .mobile-card {
      margin-bottom: 1rem;
      padding: 1.25rem;
    }

/* Better mobile popup positioning */
    .mobile-popup {
      margin: 1rem;
      max-height: 85vh;
      overflow-y: auto;
    }

/* Mobile floating button improvements */
    .mobile-floating-btn {
      bottom: 1rem;
      right: 1rem;
      width: 60px;
      height: 60px;
      box-shadow: 0 8px 25px rgba(0, 217, 255, 0.4);
    }

/* Mobile quick actions bar */
    .mobile-quick-actions {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(20, 25, 61, 0.95);
      backdrop-filter: blur(10px);
      border-top: 1px solid rgba(0, 217, 255, 0.2);
      padding: 0.75rem;
      z-index: 50;
    }

/* Better mobile navigation */
    .mobile-nav {
      padding: 0.75rem 0;
    }

/* Mobile hero improvements */
    .mobile-hero {
      padding-top: 2rem;
      padding-bottom: 2rem;
      text-align: center;
    }

/* Mobile grid improvements */
    .mobile-grid {
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

/* Mobile image optimization */
    .mobile-img {
      border-radius: 0.75rem;
      margin-bottom: 1rem;
    }

/* Touch-friendly interactive elements */
    .touch-target {
      min-height: 44px;
      min-width: 44px;
    }

/* Mobile form improvements */
    .mobile-form input,
    .mobile-form textarea {
      font-size: 16px; /* Prevents zoom on iOS */
      padding: 1rem;
    }
  }

/* Enhanced mobile animations with reduced motion support */
  @media (prefers-reduced-motion: no-preference) and (max-width: 768px) {
    .mobile-animate {
      animation-duration: 0.5s;
      animation-timing-function: ease-out;
    }
  }

@media (prefers-reduced-motion: reduce) {
    .animate-neon-glow,
    .animate-glow,
    .animate-float-slow,
    .animate-float-medium,
    .animate-float-fast,
    .animate-pulse-glow,
    .animate-bounce-slow {
      animation: none;
    }
  }

/* Mobile-specific hover states (touch devices) */
  @media (hover: none) and (pointer: coarse) {
    .hover-lift:hover,
    .hover-scale:hover,
    .btn-magnetic:hover {
      transform: none;
    }

.hover-lift:active,
    .hover-scale:active {
      transform: scale(0.98);
    }

.btn-magnetic:active {
      transform: translateY(1px);
    }
  }
}</article></body></html>