Redesign ce site en le rendant plus moderne, minimaliste et épuré et en mettant des animation complexe et professionnel.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Visionnova Redesign
-emoji: 🏢
-colorFrom: red
-colorTo: red
+title: VisionNova Redesign 🌟
+colorFrom: green
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js

@@ -0,0 +1,100 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer {
+                    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+                }
+                
+                .social-link {
+                    transition: all 0.3s ease;
+                }
+                
+                .social-link:hover {
+                    transform: translateY(-3px);
+                }
+            </style>
+            
+            <footer class="footer text-white py-16">
+                <div class="max-w-7xl mx-auto px-6">
+                    <div class="grid md:grid-cols-4 gap-8">
+                        <!-- Company Info -->
+                        <div class="md:col-span-2">
+                            <h3 class="text-3xl font-bold mb-4">
+                                Vision<span class="text-blue-400">Nova</span>
+                            </h3>
+                            <p class="text-gray-400 mb-6 max-w-md">
+                                Nous créons des expériences digitales exceptionnelles qui marient élégance, innovation et performance.
+                            </p>
+                            <div class="flex space-x-4">
+                                <a href="#" class="social-link w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center hover:bg-blue-700">
+                                    <i data-feather="twitter"></i>
+                                </a>
+                                <a href="#" class="social-link w-10 h-10 bg-blue-800 rounded-full flex items-center justify-center hover:bg-blue-900">
+                                    <i data-feather="facebook"></i>
+                                </a>
+                                <a href="#" class="social-link w-10 h-10 bg-pink-600 rounded-full flex items-center justify-center hover:bg-pink-700">
+                                    <i data-feather="instagram"></i>
+                                </a>
+                                <a href="#" class="social-link w-10 h-10 bg-blue-700 rounded-full flex items-center justify-center hover:bg-blue-800">
+                                    <i data-feather="linkedin"></i>
+                                </a>
+                            </div>
+                        </div>
+                        
+                        <!-- Quick Links -->
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4">Navigation</h4>
+                            <ul class="space-y-2">
+                                <li><a href="#accueil" class="text-gray-400 hover:text-white transition-colors duration-300">Accueil</a></li>
+                                <li><a href="#services" class="text-gray-400 hover:text-white transition-colors duration-300">Services</a></li>
+                                <li><a href="#projets" class="text-gray-400 hover:text-white transition-colors duration-300">Projets</a></li>
+                                <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li>
+                            </ul>
+                        </div>
+                        
+                        <!-- Contact -->
+                        <div>
+                            <h4 class="text-lg font-semibold mb-4">Contact</h4>
+                            <ul class="space-y-2 text-gray-400">
+                                <li class="flex items-center space-x-2">
+                                    <i data-feather="mail" class="w-4 h-4"></i>
+                                    <span>contact@visionnova.fr</span>
+                                </li>
+                                <li class="flex items-center space-x-2">
+                                    <i data-feather="phone" class="w-4 h-4"></i>
+                                    <span>+33 1 23 45 67 89</span>
+                                </li>
+                                <li class="flex items-center space-x-2">
+                                    <i data-feather="map-pin" class="w-4 h-4"></i>
+                                    <span>Paris, France</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                    
+                    <!-- Bottom Bar -->
+                    <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                        <p class="text-gray-500 text-sm">
+                            © 2024 VisionNova. Tous droits réservés.
+                        </p>
+                        <div class="flex space-x-6 mt-4 md:mt-0">
+                            <a href="#" class="text-gray-500 hover:text-white transition-colors duration-300 text-sm">Confidentialité</a>
+                        <a href="#" class="text-gray-500 hover:text-white transition-colors duration-300 text-sm">Conditions</a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+
+        // Initialize Feather Icons
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,135 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .navbar {
+                    background: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(10px);
+                    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+                    transition: all 0.3s ease;
+                }
+                
+                .navbar.scrolled {
+                    background: rgba(255, 255, 255, 0.98);
+                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+                }
+                
+                .nav-link {
+                    position: relative;
+                    transition: color 0.3s ease;
+                }
+                
+                .nav-link::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -4px;
+                    left: 0;
+                    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+                    transition: width 0.3s ease;
+                }
+                
+                .nav-link:hover::after {
+                    width: 100%;
+                }
+                
+                .mobile-menu {
+                    animation: slideDown 0.3s ease-out;
+                }
+                
+                @keyframes slideDown {
+                    from {
+                        opacity: 0;
+                        transform: translateY(-10px);
+                    }
+                    to {
+                        opacity: 1;
+                        transform: translateY(0);
+                    }
+                }
+            </style>
+            
+            <nav class="navbar fixed top-0 left-0 right-0 z-50 py-4">
+                <div class="max-w-7xl mx-auto px-6">
+                    <div class="flex justify-between items-center">
+                        <!-- Logo -->
+                        <a href="/" class="text-2xl font-bold text-gray-900 hover:text-blue-600 transition-colors duration-300">
+                            Vision<span class="text-blue-600">Nova</span>
+                        </a>
+                        
+                        <!-- Desktop Menu -->
+                        <div class="hidden md:flex space-x-8">
+                            <a href="#accueil" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Accueil</a>
+                            <a href="#services" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Services</a>
+                            <a href="#projets" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Projets</a>
+                            <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600 font-medium">Contact</a>
+                        </div>
+                        
+                        <!-- CTA Button -->
+                        <div class="hidden md:block">
+                            <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 transform hover:scale-105">
+                            Commencer
+                        </button>
+                        </div>
+                        
+                        <!-- Mobile Menu Button -->
+                        <button class="md:hidden text-gray-700 hover:text-blue-600 transition-colors duration-300" onclick="this.getRootNode().host.toggleMobileMenu()">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                    
+                    <!-- Mobile Menu -->
+                    <div id="mobile-menu" class="hidden md:hidden mobile-menu flex-col space-y-4 mt-4 pt-4 border-t border-gray-200">
+                        <a href="#accueil" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Accueil</a>
+                        <a href="#services" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Services</a>
+                        <a href="#projets" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Projets</a>
+                        <a href="#contact" class="nav-link text-gray-700 hover:text-blue-600 font-medium py-2">Contact</a>
+                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-full font-medium transition-all duration-300 mt-2">
+                            Commencer
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Add scroll effect
+        this.addScrollEffect();
+        
+        // Initialize Feather Icons
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                feather.replace();
+            }
+        }, 100);
+    }
+
+    addScrollEffect() {
+        const navbar = this.shadowRoot.querySelector('.navbar');
+        window.addEventListener('scroll', () => {
+            if (window.scrollY > 100) {
+                navbar.classList.add('scrolled');
+            } else {
+                navbar.classList.remove('scrolled');
+            }
+        });
+    }
+
+    toggleMobileMenu() {
+        const mobileMenu = this.shadowRoot.getElementById('mobile-menu');
+        mobileMenu.classList.toggle('hidden');
+        mobileMenu.classList.toggle('flex');
+        
+        // Update menu icon
+        const menuIcon = this.shadowRoot.querySelector('[data-feather="menu"]');
+        if (mobileMenu.classList.contains('hidden')) {
+            menuIcon.setAttribute('data-feather', 'menu');
+        } else {
+            menuIcon.setAttribute('data-feather', 'x');
+        }
+        feather.replace();
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,113 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VisionNova | Design Moderne & Épuré</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-white text-gray-900 font-sans">
+    <custom-navbar></custom-navbar>
+    
+    <main>
+        <!-- Hero Section -->
+        <section class="relative min-h-screen flex items-center justify-center overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-indigo-100 transform -skew-y-6 scale-125"></div>
+            <div class="relative z-10 text-center px-6 max-w-4xl mx-auto">
+                <h1 class="text-6xl md:text-8xl font-bold mb-8 tracking-tight opacity-0 animate-fade-in-up">
+                    Vision<span class="text-blue-600">Nova</span>
+                </h1>
+                <p class="text-xl md:text-2xl text-gray-600 mb-12 opacity-0 animate-fade-in-up animation-delay-300">
+                    Redéfinir l'expérience digitale avec élégance et innovation
+                </p>
+                <div class="opacity-0 animate-fade-in-up animation-delay-600">
+                    <button class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-full font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl">
+                        Découvrir
+                    </button>
+                </div>
+            </div>
+            
+            <!-- Floating Elements -->
+            <div class="absolute top-20 left-10 w-20 h-20 bg-blue-200 rounded-full opacity-30 animate-float"></div>
+            <div class="absolute bottom-40 right-20 w-16 h-16 bg-indigo-300 rounded-full opacity-40 animate-float animation-delay-1000"></div>
+            <div class="absolute top-1/3 right-1/4 w-12 h-12 bg-purple-200 rounded-full opacity-50 animate-float animation-delay-2000"></div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="py-20 px-6 bg-white">
+            <div class="max-w-7xl mx-auto">
+                <h2 class="text-4xl md:text-5xl font-bold text-center mb-16 opacity-0 animate-fade-in">
+                    Excellence Digitale
+                </h2>
+                
+                <div class="grid md:grid-cols-3 gap-12">
+                    <!-- Feature 1 -->
+                    <div class="group text-center opacity-0 animate-slide-in-left">
+                        <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center transform group-hover:scale-110 transition-all duration-300">
+                            <i data-feather="layout" class="text-white w-10 h-10"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4">Design Intuitif</h3>
+                        <p class="text-gray-600">Interfaces pensées pour une expérience utilisateur fluide et naturelle</p>
+                    </div>
+
+                    <!-- Feature 2 -->
+                    <div class="group text-center opacity-0 animate-slide-in-up animation-delay-200">
+                        <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-r from-green-500 to-teal-600 rounded-2xl flex items-center justify-center transform group-hover:scale-110 transition-all duration-300">
+                            <i data-feather="zap" class="text-white w-10 h-10"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4">Performance</h3>
+                        <p class="text-gray-600">Optimisations avancées pour des temps de chargement instantanés</p>
+                    </div>
+
+                    <!-- Feature 3 -->
+                    <div class="group text-center opacity-0 animate-slide-in-right animation-delay-400">
+                        <div class="w-20 h-20 mx-auto mb-6 bg-gradient-to-r from-orange-500 to-pink-600 rounded-2xl flex items-center justify-center transform group-hover:scale-110 transition-all duration-300">
+                            <i data-feather="code" class="text-white w-10 h-10"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-4">Innovation</h3>
+                        <p class="text-gray-600">Technologies de pointe pour des solutions avant-gardistes</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Stats Section -->
+        <section class="py-20 bg-gray-50">
+            <div class="max-w-7xl mx-auto px-6">
+                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
+                    <div class="text-center opacity-0 animate-count-up">
+                        <div class="text-4xl md:text-6xl font-bold text-blue-600 mb-2" data-count="150">0</div>
+                        <div class="text-gray-600">Projets Réalisés</div>
+                    </div>
+                    <div class="text-center opacity-0 animate-count-up animation-delay-300">
+                        <div class="text-4xl md:text-6xl font-bold text-green-600 mb-2" data-count="98">0</div>
+                        <div class="text-gray-600">Clients Satisfaits</div>
+                    </div>
+                    <div class="text-center opacity-0 animate-count-up animation-delay-600">
+                        <div class="text-4xl md:text-6xl font-bold text-purple-600 mb-2" data-count="24">0</div>
+                        <div class="text-gray-600">Prix Remportés</div>
+                    </div>
+                    <div class="text-center opacity-0 animate-count-up animation-delay-900">
+                        <div class="text-4xl md:text-6xl font-bold text-orange-600 mb-2" data-count="5">0</div>
+                        <div class="text-gray-600">Années d'Expertise</div>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,84 @@
+// Intersection Observer for animations
+const observerOptions = {
+    threshold: 0.1,
+    rootMargin: '0px 0px -50px 0px'
+};
+
+const observer = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.style.animationPlayState = 'running';
+        }
+    });
+}, observerOptions);
+
+// Observe all animated elements
+document.addEventListener('DOMContentLoaded', () => {
+    const animatedElements = document.querySelectorAll('[class*="animate-"]');
+    animatedElements.forEach(el => {
+        observer.observe(el);
+    });
+
+    // Count up animation for stats
+    const countElements = document.querySelectorAll('[data-count]');
+    countElements.forEach(element => {
+        const target = parseInt(element.getAttribute('data-count'));
+        const duration = 2000;
+        const step = target / (duration / 16);
+        let current = 0;
+
+        const timer = setInterval(() => {
+            current += step;
+            if (current >= target) {
+                element.textContent = target;
+                clearInterval(timer);
+            } else {
+                element.textContent = Math.floor(current);
+            }
+        }, 16);
+    });
+
+    // Parallax effect for hero section
+    window.addEventListener('scroll', () => {
+        const scrolled = window.pageYOffset;
+        const parallaxElements = document.querySelectorAll('.parallax');
+        
+        parallaxElements.forEach(element => {
+            const speed = element.dataset.speed || 0.5;
+            element.style.transform = `translateY(${scrolled * speed}px)`;
+    });
+});
+
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+            target.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    });
+});
+
+// Mobile menu toggle
+function toggleMobileMenu() {
+    const mobileMenu = document.getElementById('mobile-menu');
+    mobileMenu.classList.toggle('hidden');
+    mobileMenu.classList.toggle('flex');
+}
+
+// Add loading animation
+window.addEventListener('load', () => {
+    document.body.classList.add('loaded');
+});
+
+// Cursor follower effect
+document.addEventListener('mousemove', (e) => {
+    const cursorFollower = document.querySelector('.cursor-follower');
+    if (cursorFollower) {
+        cursorFollower.style.left = e.clientX + 'px';
+        cursorFollower.style.top = e.clientY + 'px';
+});

style.css

@@ -1,28 +1,166 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Animations */
+@keyframes fade-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+@keyframes slide-in-left {
+    from {
+        opacity: 0;
+        transform: translateX(-50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+@keyframes slide-in-right {
+    from {
+        opacity: 0;
+        transform: translateX(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@keyframes slide-in-up {
+    from {
+        opacity: 0;
+        transform: translateY(50px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
 }
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0px);
+    }
+    50% {
+        transform: translateY(-20px);
+    }
+}
+
+@keyframes count-up {
+    from {
+        transform: scale(0.8);
+        opacity: 0;
+    }
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* Animation Classes */
+.animate-fade-in-up {
+    animation: fade-in-up 1s ease-out forwards;
+}
+
+.animate-fade-in {
+    animation: fade-in 1s ease-out forwards;
+}
+
+.animate-slide-in-left {
+    animation: slide-in-left 0.8s ease-out forwards;
+}
+
+.animate-slide-in-right {
+    animation: slide-in-right 0.8s ease-out forwards;
+}
+
+.animate-slide-in-up {
+    animation: slide-in-up 0.8s ease-out forwards;
+}
+
+.animate-float {
+    animation: float 6s ease-in-out infinite;
+}
+
+.animate-count-up {
+    animation: count-up 1s ease-out forwards;
+}
+
+.animation-delay-300 {
+    animation-delay: 0.3s;
+}
+
+.animation-delay-600 {
+    animation-delay: 0.6s;
+}
+
+.animation-delay-900 {
+    animation-delay: 0.9s;
+}
+
+.animation-delay-1000 {
+    animation-delay: 1s;
+}
+
+.animation-delay-2000 {
+    animation-delay: 2s;
+}
+
+.animation-delay-400 {
+    animation-delay: 0.4s;
+}
+
+/* Smooth Scrolling */
+html {
+    scroll-behavior: smooth;
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #3b82f6;
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: #2563eb;
+}
+
+/* Glass Morphism Effect */
+.glass {
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Hover Effects */
+.hover-lift {
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.hover-lift:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+}