efface cette poubelle que tu viens de faire, et crée moi un site portfolio de photographe basé sur les plus élégant site de photographe de squarespace ou de wiz en version payante

components/footer.js

@@ -1,150 +1,51 @@
 class CustomFooter extends HTMLElement {
-    connectedCallback() {
-        this.attachShadow({ mode: 'open' });
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    display: block;
-                    background: #292F36;
-                    color: #F7FFF7;
-                    padding: 4rem 2rem;
-                }
-                
-                .footer-container {
-                    max-width: 1400px;
-                    margin: 0 auto;
-                    display: grid;
-                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-                    gap: 3rem;
-                }
-                
-                .footer-logo {
-                    font-size: 1.5rem;
-                    font-weight: 700;
-                    color: #F7FFF7;
-                    margin-bottom: 1rem;
-                    display: inline-block;
-                }
-                
-                .footer-logo span {
-                    color: #FF6B6B;
-                }
-                
-                .footer-about {
-                    margin-bottom: 2rem;
-                    color: rgba(247, 255, 247, 0.7);
-                    line-height: 1.6;
-                }
-                
-                .footer-title {
-                    font-size: 1.2rem;
-                    font-weight: 600;
-                    margin-bottom: 1.5rem;
-                    color: #F7FFF7;
-                }
-                
-                .footer-links {
-                    display: flex;
-                    flex-direction: column;
-                    gap: 1rem;
-                }
-                
-                .footer-link {
-                    color: rgba(247, 255, 247, 0.7);
-                    text-decoration: none;
-                    transition: color 0.3s;
-                }
-                
-                .footer-link:hover {
-                    color: #FF6B6B;
-                }
-                
-                .social-links {
-                    display: flex;
-                    gap: 1rem;
-                }
-                
-                .social-link {
-                    width: 40px;
-                    height: 40px;
-                    border-radius: 50%;
-                    background: rgba(247, 255, 247, 0.1);
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    transition: all 0.3s;
-                }
-                
-                .social-link:hover {
-                    background: #FF6B6B;
-                    transform: translateY(-3px);
-                }
-                
-                .copyright {
-                    text-align: center;
-                    margin-top: 4rem;
-                    padding-top: 2rem;
-                    border-top: 1px solid rgba(247, 255, 247, 0.1);
-                    color: rgba(247, 255, 247, 0.5);
-                }
-            </style>
-            
-            <div class="footer-container">
-                <div>
-                    <a href="/" class="footer-logo">La <span>Pieuvre</span></a>
-                    <p class="footer-about">
-                        Agence web créative spécialisée dans le développement, le design et la stratégie digitale.
-                        Nous créons des solutions uniques et performantes pour vos projets.
-                    </p>
-                </div>
-                
-                <div>
-                    <h3 class="footer-title">Services</h3>
-                    <div class="footer-links">
-                        <a href="#" class="footer-link">Développement web</a>
-                        <a href="#" class="footer-link">Design UI/UX</a>
-                        <a href="#" class="footer-link">Stratégie digitale</a>
-                        <a href="#" class="footer-link">Application mobile</a>
-                    </div>
-                </div>
-                
-                <div>
-                    <h3 class="footer-title">Contact</h3>
-                    <div class="footer-links">
-                        <a href="#" class="footer-link">hello@lapieuvre.com</a>
-                        <a href="#" class="footer-link">01 23 45 67 89</a>
-                        <a href="#" class="footer-link">10 Rue des Tentacules, Paris</a>
-                    </div>
-                </div>
-                
-                <div>
-                    <h3 class="footer-title">Suivez-nous</h3>
-                    <div class="social-links">
-                        <a href="#" class="social-link">
-                            <i data-feather="twitter"></i>
-                        </a>
-                        <a href="#" class="social-link">
-                            <i data-feather="instagram"></i>
-                        </a>
-                        <a href="#" class="social-link">
-                            <i data-feather="linkedin"></i>
-                        </a>
-                        <a href="#" class="social-link">
-                            <i data-feather="dribbble"></i>
-                        </a>
-                    </div>
-                </div>
-            </div>
-            
-            <div class="copyright">
-                &copy; ${new Date().getFullYear()} La Pieuvre. Tous droits réservés.
-            </div>
-            
-            <script>
-                feather.replace();
-            </script>
-        `;
-    }
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          background: #111;
+          color: #fff;
+          padding: 4rem 2rem;
+          text-align: center;
+        }
+
+        .footer-content {
+          max-width: 1400px;
+          margin: 0 auto;
+        }
+
+        .social-links {
+          display: flex;
+          justify-content: center;
+          gap: 1.5rem;
+          margin-bottom: 2rem;
+        }
+
+        .social-link {
+          color: #fff;
+          text-decoration: none;
+          font-weight: 300;
+        }
+
+        .copyright {
+          margin-top: 2rem;
+          font-size: 0.8rem;
+          opacity: 0.7;
+        }
+      </style>
+
+      <div class="footer-content">
+        <div class="social-links">
+          <a href="#" class="social-link">Instagram</a>
+          <a href="#" class="social-link">Behance</a>
+          <a href="#" class="social-link">LinkedIn</a>
+        </div>
+        <p class="copyright">© ${new Date().getFullYear()} Lucie Martin. Tous droits réservés.</p>
+      </div>
+    `;
+  }
 }
 
 customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,82 @@
+class CustomNavbar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          top: 0;
+          left: 0;
+          right: 0;
+          z-index: 1000;
+          background: rgba(0, 0, 0, 0.5);
+          backdrop-filter: blur(10px);
+          padding: 1.5rem 2rem;
+          transition: background 0.3s ease;
+        }
+
+        nav {
+          max-width: 1400px;
+          margin: 0 auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+
+        .logo {
+          color: white;
+          font-weight: 300;
+          letter-spacing: 2px;
+          text-decoration: none;
+          font-size: 1.1rem;
+        }
+
+        .nav-links {
+          display: flex;
+          gap: 2rem;
+        }
+
+        .nav-link {
+          color: white;
+          text-decoration: none;
+          font-weight: 300;
+          letter-spacing: 1px;
+          position: relative;
+        }
+
+        .nav-link::after {
+          content: '';
+          position: absolute;
+          bottom: -5px;
+          left: 0;
+          width: 0;
+          height: 1px;
+          background: white;
+          transition: width 0.3s ease;
+        }
+
+        .nav-link:hover::after {
+          width: 100%;
+        }
+
+        @media (max-width: 768px) {
+          .nav-links {
+            display: none;
+          }
+        }
+      </style>
+
+      <nav>
+        <a href="/" class="logo">LUCIA MARTIN</a>
+        <div class="nav-links">
+          <a href="/" class="nav-link">Accueil</a>
+          <a href="#about" class="nav-link">À propos</a>
+          <a href="#contact" class="nav-link">Contact</a>
+        </div>
+      </nav>
+    `;
+  }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -3,144 +3,87 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>La Pieuvre - Agence Web Créative</title>
+    <title>Lucie Martin | Photographie</title>
     <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>
-    <script>
-        tailwind.config = {
-            theme: {
-                extend: {
-                    colors: {
-                        primary: '#FF6B6B',
-                        secondary: '#4ECDC4',
-                        dark: '#292F36',
-                        light: '#F7FFF7'
-                    }
-                }
-            }
-        }
-    </script>
+    <link rel="stylesheet" href="https://use.typekit.net/xyz1234.css"> <!-- Replace with actual font link -->
 </head>
-<body class="bg-light font-sans antialiased">
-    <custom-header></custom-header>
+<body>
+    <custom-navbar></custom-navbar>
     
-    <main class="container mx-auto px-4 py-12">
+    <main class="portfolio-grid">
         <!-- Hero Section -->
-        <section class="flex flex-col md:flex-row items-center justify-between gap-12 mb-24">
-            <div class="md:w-1/2">
-                <h1 class="text-4xl md:text-6xl font-bold text-dark mb-6 leading-tight">
-                    Une agence web <span class="text-primary">tentaculaire</span> pour vos projets
-                </h1>
-                <p class="text-xl text-gray-600 mb-8">
-                    Nous déployons nos compétences pour créer des solutions web uniques et performantes.
-                </p>
-                <a href="#contact" class="bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-6 rounded-full transition-all shadow-lg">
-                    Parlons de votre projet
-                </a>
-            </div>
-            <div class="md:w-1/2 relative">
-                <div class="absolute -top-10 -left-10 w-32 h-32 bg-secondary rounded-full opacity-30 animate-pulse"></div>
-                <div class="absolute -bottom-10 -right-10 w-40 h-40 bg-primary rounded-full opacity-20 animate-pulse delay-300"></div>
-                <img src="http://static.photos/abstract/1024x576/42" alt="Design abstrait" class="relative z-10 rounded-3xl shadow-2xl">
+        <section class="hero">
+            <div class="hero-content">
+                <h1>Lucie Martin</h1>
+                <p class="subtitle">Photographe d'art & portrait</p>
             </div>
         </section>
 
-        <!-- Services Section -->
-        <section class="mb-24">
-            <h2 class="text-3xl md:text-4xl font-bold text-center text-dark mb-16">
-                Nos <span class="text-secondary">tentacules</span> expertes
-            </h2>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-                    <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
-                        <i data-feather="code" class="text-primary w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-dark mb-4">Développement sur mesure</h3>
-                    <p class="text-gray-600">Des solutions techniques innovantes et parfaitement adaptées à vos besoins.</p>
+        <!-- Gallery Grid -->
+        <section class="gallery">
+            <div class="grid-item" data-category="portrait">
+                <img src="http://static.photos/people/1024x576/1" alt="Portrait 1">
+                <div class="overlay">
+                    <p class="title">Portraits Intimes</p>
+                </div>
+            </div>
+            <div class="grid-item" data-category="fashion">
+                <img src="http://static.photos/fashion/1024x576/2" alt="Fashion 1">
+                <div class="overlay">
+                    <p class="title">Mode Éditoriale</p>
                 </div>
-                <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-                    <div class="w-16 h-16 bg-secondary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
-                        <i data-feather="pen-tool" class="text-secondary w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-dark mb-4">Design organique</h3>
-                    <p class="text-gray-600">Des interfaces fluides et naturelles qui captent l'attention.</p>
+            </div>
+            <div class="grid-item" data-category="landscape">
+                <img src="http://static.photos/nature/1024x576/3" alt="Landscape 1">
+                <div class="overlay">
+                    <p class="title">Paysages Urbains</p>
                 </div>
-                <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-                    <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mb-6">
-                        <i data-feather="bar-chart" class="text-primary w-8 h-8"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-dark mb-4">Stratégie digitale</h3>
-                    <p class="text-gray-600">Une approche globale pour maximiser votre présence en ligne.</p>
+            </div>
+            <div class="grid-item" data-category="portrait">
+                <img src="http://static.photos/people/1024x576/4" alt="Portrait 2">
+                <div class="overlay">
+                    <p class="title">Séries Personnelles</p>
                 </div>
             </div>
         </section>
 
-        <!-- Projects Section -->
-        <section class="mb-24">
-            <h2 class="text-3xl md:text-4xl font-bold text-center text-dark mb-16">
-                Nos <span class="text-primary">prouesses</span> récentes
-            </h2>
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                <!-- Project 1 -->
-                <div class="relative group rounded-2xl overflow-hidden shadow-lg">
-                    <img src="http://static.photos/technology/640x360/1" alt="Projet 1" class="w-full h-64 object-cover transition-transform group-hover:scale-105">
-                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-90 flex items-end p-6">
-                        <div>
-                            <h3 class="text-white text-xl font-bold mb-2">Site e-commerce luxe</h3>
-                            <p class="text-gray-300">Une expérience d'achat immersive et haut de gamme</p>
-                        </div>
-                    </div>
-                </div>
-                <!-- Project 2 -->
-                <div class="relative group rounded-2xl overflow-hidden shadow-lg">
-                    <img src="http://static.photos/abstract/640x360/2" alt="Projet 2" class="w-full h-64 object-cover transition-transform group-hover:scale-105">
-                    <div class="absolute inset-0 bg-gradient-to-t from-dark to-transparent opacity-90 flex items-end p-6">
-                        <div>
-                            <h3 class="text-white text-xl font-bold mb-2">Plateforme SaaS B2B</h3>
-                            <p class="text-gray-300">Une solution complète pour les entreprises</p>
-                        </div>
-                    </div>
-                </div>
+        <!-- About Section -->
+        <section class="about" id="about">
+            <div class="about-content">
+                <h2>À propos</h2>
+                <p>Photographe basée à Paris, je capture des moments d'authenticité et d'émotion à travers mon travail. Mon approche mélange sensibilité artistique et technique rigoureuse.</p>
+                <a href="#contact" class="cta-button">Travaillons ensemble</a>
+            </div>
+            <div class="about-image">
+                <img src="http://static.photos/people/640x360/5" alt="Lucie Martin">
             </div>
         </section>
 
-        <!-- Contact Section -->
-        <section id="contact" class="mb-24">
-            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
-                <h2 class="text-3xl md:text-4xl font-bold text-dark mb-8">
-                    Prêt à <span class="text-secondary">collaborer</span> ?
-                </h2>
-                <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    <div>
-                        <label for="name" class="block text-gray-700 mb-2">Votre nom</label>
-                        <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
-                    </div>
-                    <div>
-                        <label for="email" class="block text-gray-700 mb-2">Votre email</label>
-                        <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
-                    </div>
-                    <div class="md:col-span-2">
-                        <label for="message" class="block text-gray-700 mb-2">Votre message</label>
-                        <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea>
-                    </div>
-                    <button type="submit" class="md:col-span-2 bg-primary hover:bg-opacity-90 text-white font-bold py-3 px-6 rounded-full transition-all shadow-lg w-full md:w-auto">
-                        Envoyer le message
-                    </button>
-                </form>
+        <!-- Featured Project -->
+        <section class="featured-project">
+            <div class="project-content">
+                <h2>Projet: Lumière Nocturne</h2>
+                <p>Une exploration des nuances de lumière en milieu urbain la nuit.</p>
+                <a href="/series/lumiere-nocturne" class="cta-button">Voir la série</a>
             </div>
         </section>
+
+        <!-- Contact Section -->
+        <section class="contact" id="contact">
+            <h2>Me contacter</h2>
+            <form class="contact-form">
+                <input type="text" placeholder="Votre nom">
+                <input type="email" placeholder="Votre email">
+                <textarea placeholder="Votre message"></textarea>
+                <button type="submit" class="cta-button">Envoyer</button>
+            </form>
+        </section>
     </main>
 
     <custom-footer></custom-footer>
 
-    <script src="components/header.js"></script>
+    <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

@@ -1,32 +1,41 @@
 document.addEventListener('DOMContentLoaded', function() {
-    // 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) {
-                window.scrollTo({
-                    top: target.offsetTop - 100,
-                    behavior: 'smooth'
-                });
-            }
-        });
+  // Smooth scrolling
+  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+      e.preventDefault();
+      document.querySelector(this.getAttribute('href')).scrollIntoView({
+        behavior: 'smooth'
+      });
     });
+  });
 
-    // Scroll reveal animation
-    const revealElements = document.querySelectorAll('[data-reveal]');
-    
-    const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-            if (entry.isIntersecting) {
-                entry.target.classList.add('animate-fadeIn');
-                observer.unobserve(entry.target);
-            }
-        });
-    }, {
-        threshold: 0.1
+  // Lightbox for gallery items
+  const galleryItems = document.querySelectorAll('.grid-item');
+  
+  galleryItems.forEach(item => {
+    item.addEventListener('click', function() {
+      // In a real implementation, this would open a lightbox
+      console.log('Opening lightbox for item');
     });
+  });
 
-    revealElements.forEach(el => observer.observe(el));
+  // Navbar scroll effect
+  window.addEventListener('scroll', function() {
+    const navbar = document.querySelector('custom-navbar').shadowRoot.querySelector('nav');
+    if (window.scrollY > 50) {
+      navbar.style.background = 'rgba(0,0,0,0.9)';
+    } else {
+      navbar.style.background = 'rgba(0,0,0,0.5)';
+    }
+  });
+
+  // Form submission
+  const contactForm = document.querySelector('.contact-form');
+  if (contactForm) {
+    contactForm.addEventListener('submit', function(e) {
+      e.preventDefault();
+      alert('Merci pour votre message. Je vous répondrai bientôt!');
+      this.reset();
+    });
+  }
 });

style.css

@@ -1,37 +1,184 @@
-@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
-
+/* Base Styles */
 body {
-    font-family: 'Montserrat', sans-serif;
+  margin: 0;
+  padding: 0;
+  font-family: 'aktiv-grotesk', sans-serif;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* Portfolio Grid */
+.portfolio-grid {
+  display: grid;
+  grid-template-rows: auto auto auto auto;
+}
+
+/* Hero Section */
+.hero {
+  height: 100vh;
+  background: #000;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+}
+
+.hero::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
+}
+
+.hero-content {
+  z-index: 1;
+}
+
+.hero h1 {
+  font-size: 4rem;
+  font-weight: 300;
+  letter-spacing: 5px;
+  margin-bottom: 1rem;
+}
+
+.subtitle {
+  font-size: 1.2rem;
+  letter-spacing: 3px;
+  opacity: 0.8;
+}
+
+/* Gallery Grid */
+.gallery {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 0;
+}
+
+.grid-item {
+  position: relative;
+  aspect-ratio: 1/1;
+  overflow: hidden;
+}
+
+.grid-item img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.5s ease;
 }
 
-/* Animations */
-@keyframes float {
-    0%, 100% {
-        transform: translateY(0);
-    }
-    50% {
-        transform: translateY(-15px);
-    }
+.grid-item:hover img {
+  transform: scale(1.05);
 }
 
-.floating {
-    animation: float 6s ease-in-out infinite;
+.overlay {
+  position: absolute;
+  bottom: 2rem;
+  left: 2rem;
+  color: white;
+  opacity: 0;
+  transition: opacity 0.3s ease;
 }
 
-/* Custom scrollbar */
-::-webkit-scrollbar {
-    width: 8px;
+.grid-item:hover .overlay {
+  opacity: 1;
 }
 
-::-webkit-scrollbar-track {
-    background: #f1f1f1;
+/* About Section */
+.about {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: 80vh;
+  align-items: center;
 }
 
-::-webkit-scrollbar-thumb {
-    background: #FF6B6B;
-    border-radius: 10px;
+.about-content {
+  padding: 4rem;
 }
 
-::-webkit-scrollbar-thumb:hover {
-    background: #e05555;
+.about-image {
+  height: 100%;
+}
+
+.about-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Featured Project */
+.featured-project {
+  height: 100vh;
+  background: #000;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 0 20%;
+  background-image: url('http://static.photos/black/1200x630/1');
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+
+.featured-project::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0,0,0,0.5);
+}
+
+.featured-project .project-content {
+  z-index: 1;
+}
+
+/* Contact Section */
+.contact {
+  padding: 8rem 4rem;
+  background: #f9f9f9;
+  text-align: center;
+}
+
+.contact-form {
+  max-width: 500px;
+  margin: 2rem auto 0;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* Buttons */
+.cta-button {
+  display: inline-block;
+  padding: 1rem 2rem;
+  background: transparent;
+  color: #000;
+  border: 1px solid #000;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+
+.cta-button:hover {
+  background: #000;
+  color: white;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .gallery {
+    grid-template-columns: 1fr;
+  }
+
+  .about {
+    grid-template-columns: 1fr;
+  }
 }