Spaces:

CarloSorengo
/

wp2025fm

Running

App Files Files Community

CarloSorengo commited on May 17, 2025

Commit

b42c802

verified ·

1 Parent(s): 48ed998

Add 2 files

Browse files

Files changed (2) hide show

index.html +318 -584
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,663 +3,397 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>LensCraft | Photography Portfolio</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        /* Custom CSS for animations and effects */
-        .hero-image {
-            background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1493863641943-9b68992a8d07?ixlib=rb-4.0.3');
-            background-size: cover;
-            background-position: center;
-            height: 90vh;
-        }
-        .gallery-item {
-            transition: all 0.3s ease;
-        }
-        .gallery-item:hover {
-            transform: scale(1.03);
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
-        }
-        .testimonial-card {
-            transition: all 0.3s ease;
-        }
-        .testimonial-card:hover {
-            transform: translateY(-10px);
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
-        }
-        @keyframes fadeIn {
-            from { opacity: 0; }
-            to { opacity: 1; }
-        }
-        .animate-fade-in {
-            animation: fadeIn 1s ease-in-out;
-        }
-        /* Lightbox styles */
-        .lightbox {
             display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(0, 0, 0, 0.9);
-            z-index: 1000;
-            justify-content: center;
-            align-items: center;
         }
-        .lightbox-content {
-            max-width: 90%;
-            max-height: 90%;
         }
-        .lightbox img {
-            max-width: 100%;
-            max-height: 90vh;
         }
     </style>
 </head>
-<body class="font-sans bg-gray-50">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-lg fixed w-full z-10">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="flex justify-between items-center h-16">
-                <div class="flex items-center">
-                    <span class="text-2xl font-bold text-gray-800">LensCraft</span>
                 </div>
-                <div class="hidden md:flex space-x-8">
-                    <a href="#home" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Home</a>
-                    <a href="#portfolio" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Portfolio</a>
-                    <a href="#about" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">About</a>
-                    <a href="#services" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Services</a>
-                    <a href="#contact" class="text-gray-800 hover:text-blue-600 px-3 py-2 font-medium">Contact</a>
                 </div>
-                <div class="md:hidden">
-                    <button id="menu-btn" class="text-gray-800 focus:outline-none">
-                        <i class="fas fa-bars text-2xl"></i>
-                    </button>
                 </div>
             </div>
-        </div>
-        <!-- Mobile menu -->
-        <div id="mobile-menu" class="md:hidden hidden bg-white shadow-lg">
-            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
-                <a href="#home" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Home</a>
-                <a href="#portfolio" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Portfolio</a>
-                <a href="#about" class="block px-3 py-2 text-gray-800 hover:text-blue-600">About</a>
-                <a href="#services" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Services</a>
-                <a href="#contact" class="block px-3 py-2 text-gray-800 hover:text-blue-600">Contact</a>
             </div>
-        </div>
-    </nav>
-    <!-- Hero Section -->
-    <section id="home" class="hero-image pt-16 flex items-center justify-center text-center text-white animate-fade-in">
-        <div class="px-4 max-w-4xl">
-            <h1 class="text-4xl md:text-6xl font-bold mb-6">Capture Life's Beautiful Moments</h1>
-            <p class="text-xl md:text-2xl mb-8">Professional photography services for weddings, portraits, and commercial projects</p>
-            <a href="#contact" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full text-lg transition duration-300 inline-block">Book a Session</a>
-        </div>
-    </section>
-    <!-- Portfolio Section -->
-    <section id="portfolio" class="py-20 bg-white">
-        <div class="max-w-7xl mx-auto px-4">
-            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Portfolio</h2>
-            <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Explore my latest work across different photography genres</p>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Portfolio Item 1 -->
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
-                    <img src="https://images.unsplash.com/photo-1529634319295-89d0c0e149a5?ixlib=rb-4.0.3" alt="Wedding Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Wedding Photography')">
-                    <div class="p-6">
-                        <h3 class="text-xl font-semibold mb-2">Wedding Photography</h3>
-                        <p class="text-gray-600">Capturing the most important day of your life with elegance and emotion.</p>
                     </div>
                 </div>
-                <!-- Portfolio Item 2 -->
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
-                    <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3" alt="Portrait Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Portrait Photography')">
-                    <div class="p-6">
-                        <h3 class="text-xl font-semibold mb-2">Portrait Photography</h3>
-                        <p class="text-gray-600">Beautiful portraits that capture personality and emotion.</p>
-                    </div>
                 </div>
-                <!-- Portfolio Item 3 -->
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
-                    <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3" alt="Landscape Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Landscape Photography')">
-                    <div class="p-6">
-                        <h3 class="text-xl font-semibold mb-2">Landscape Photography</h3>
-                        <p class="text-gray-600">Breathtaking landscapes from around the world.</p>
-                    </div>
                 </div>
-                <!-- Portfolio Item 4 -->
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
-                    <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3" alt="Event Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Event Photography')">
-                    <div class="p-6">
-                        <h3 class="text-xl font-semibold mb-2">Event Photography</h3>
-                        <p class="text-gray-600">Professional coverage of corporate and social events.</p>
-                    </div>
                 </div>
-                <!-- Portfolio Item 5 -->
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
-                    <img src="https://images.unsplash.com/photo-1551232864-3f0890e580d9?ixlib=rb-4.0.3" alt="Product Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Product Photography')">
-                    <div class="p-6">
-                        <h3 class="text-xl font-semibold mb-2">Product Photography</h3>
-                        <p class="text-gray-600">Showcasing your products in the best possible light.</p>
-                    </div>
                 </div>
-                <!-- Portfolio Item 6 -->
-                <div class="gallery-item rounded-lg overflow-hidden shadow-md bg-white">
-                    <img src="https://images.unsplash.com/photo-1515886657613-9f3515b0c78f?ixlib=rb-4.0.3" alt="Fashion Photography" class="w-full h-64 object-cover cursor-pointer" onclick="openLightbox(this.src, 'Fashion Photography')">
-                    <div class="p-6">
-                        <h3 class="text-xl font-semibold mb-2">Fashion Photography</h3>
-                        <p class="text-gray-600">Stylish and creative fashion imagery.</p>
-                    </div>
                 </div>
             </div>
-            <div class="text-center mt-12">
-                <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 px-8 rounded-full transition duration-300">View Full Portfolio</a>
-            </div>
-        </div>
-    </section>
-    <!-- About Section -->
-    <section id="about" class="py-20 bg-gray-100">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
-                    <img src="https://images.unsplash.com/photo-1554080353-a576cf803bda?ixlib=rb-4.0.3" alt="Photographer" class="rounded-lg shadow-xl w-full">
                 </div>
-                <div class="md:w-1/2">
-                    <h2 class="text-3xl md:text-4xl font-bold mb-6">About Me</h2>
-                    <p class="text-gray-700 mb-4">Hi, I'm Sarah Johnson, a professional photographer with over 10 years of experience capturing special moments and creating stunning visual stories.</p>
-                    <p class="text-gray-700 mb-4">My passion for photography began when I received my first camera at age 12. Since then, I've dedicated my life to mastering the art of capturing light, emotion, and beauty through my lens.</p>
-                    <p class="text-gray-700 mb-6">I believe that great photography is about more than just technical skill - it's about connecting with people, understanding their stories, and creating images that evoke genuine emotion.</p>
-                    <div class="flex flex-wrap gap-4">
-                        <div class="bg-white px-6 py-4 rounded-lg shadow-md">
-                            <div class="text-blue-600 text-3xl mb-2">
-                                <i class="fas fa-camera"></i>
-                            </div>
-                            <h3 class="font-semibold">10+ Years</h3>
-                            <p class="text-gray-600 text-sm">Experience</p>
-                        </div>
-                        <div class="bg-white px-6 py-4 rounded-lg shadow-md">
-                            <div class="text-blue-600 text-3xl mb-2">
-                                <i class="fas fa-images"></i>
-                            </div>
-                            <h3 class="font-semibold">500+</h3>
-                            <p class="text-gray-600 text-sm">Projects</p>
-                        </div>
-                        <div class="bg-white px-6 py-4 rounded-lg shadow-md">
-                            <div class="text-blue-600 text-3xl mb-2">
-                                <i class="fas fa-smile"></i>
-                            </div>
-                            <h3 class="font-semibold">1000+</h3>
-                            <p class="text-gray-600 text-sm">Happy Clients</p>
-                        </div>
-                    </div>
                 </div>
-            </div>
-        </div>
-    </section>
-    <!-- Services Section -->
-    <section id="services" class="py-20 bg-white">
-        <div class="max-w-7xl mx-auto px-4">
-            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">My Services</h2>
-            <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Professional photography services tailored to your needs</p>
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- Service 1 -->
-                <div class="bg-gray-50 rounded-lg p-8 shadow-md hover:shadow-xl transition duration-300">
-                    <div class="text-blue-600 text-4xl mb-4">
-                        <i class="fas fa-ring"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-3">Wedding Photography</h3>
-                    <p class="text-gray-600 mb-4">Comprehensive wedding coverage from preparation to reception with beautifully edited images.</p>
-                    <ul class="mb-6 space-y-2">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>Full day coverage</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>Professional editing</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>Online gallery</span>
-                        </li>
                     </ul>
-                    <p class="text-2xl font-bold mb-4">From $1,500</p>
-                    <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">Book Now</a>
                 </div>
-                <!-- Service 2 -->
-                <div class="bg-gray-50 rounded-lg p-8 shadow-md hover:shadow-xl transition duration-300">
-                    <div class="text-blue-600 text-4xl mb-4">
-                        <i class="fas fa-user"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-3">Portrait Sessions</h3>
-                    <p class="text-gray-600 mb-4">Professional portrait sessions for individuals, couples, families, and pets.</p>
-                    <ul class="mb-6 space-y-2">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>1-2 hour session</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>Multiple locations</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>10+ edited images</span>
-                        </li>
                     </ul>
-                    <p class="text-2xl font-bold mb-4">From $250</p>
-                    <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">Book Now</a>
                 </div>
-                <!-- Service 3 -->
-                <div class="bg-gray-50 rounded-lg p-8 shadow-md hover:shadow-xl transition duration-300">
-                    <div class="text-blue-600 text-4xl mb-4">
-                        <i class="fas fa-briefcase"></i>
-                    </div>
-                    <h3 class="text-xl font-semibold mb-3">Commercial Photography</h3>
-                    <p class="text-gray-600 mb-4">High-quality images for businesses, products, and marketing materials.</p>
-                    <ul class="mb-6 space-y-2">
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>Product shots</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>Corporate events</span>
-                        </li>
-                        <li class="flex items-center">
-                            <i class="fas fa-check text-blue-600 mr-2"></i>
-                            <span>Branding imagery</span>
-                        </li>
                     </ul>
-                    <p class="text-2xl font-bold mb-4">From $500</p>
-                    <a href="#contact" class="inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-6 rounded-full transition duration-300">Book Now</a>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- Testimonials Section -->
-    <section class="py-20 bg-blue-600 text-white">
-        <div class="max-w-7xl mx-auto px-4">
-            <h2 class="text-3xl md:text-4xl font-bold text-center mb-4">Client Testimonials</h2>
-            <p class="text-center max-w-2xl mx-auto mb-12 opacity-90">What my clients say about my work</p>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- Testimonial 1 -->
-                <div class="testimonial-card bg-white text-gray-800 p-8 rounded-lg">
-                    <div class="flex items-center mb-4">
-                        <div class="text-yellow-400 text-xl mr-2">
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                        </div>
-                    </div>
-                    <p class="mb-6 italic">"Sarah captured our wedding day perfectly. The photos are stunning and really captured the emotion of the day. We'll cherish them forever!"</p>
-                    <div class="flex items-center">
-                        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
-                        <div>
-                            <h4 class="font-semibold">Emily & James</h4>
-                            <p class="text-sm text-gray-600">Wedding Clients</p>
-                        </div>
-                    </div>
                 </div>
-                <!-- Testimonial 2 -->
-                <div class="testimonial-card bg-white text-gray-800 p-8 rounded-lg">
-                    <div class="flex items-center mb-4">
-                        <div class="text-yellow-400 text-xl mr-2">
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                        </div>
-                    </div>
-                    <p class="mb-6 italic">"The family portraits Sarah took are absolutely beautiful. She made us all feel comfortable and captured our family's personality perfectly."</p>
-                    <div class="flex items-center">
-                        <img src="https://randomuser.me/api/portraits/men/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
-                        <div>
-                            <h4 class="font-semibold">The Wilson Family</h4>
-                            <p class="text-sm text-gray-600">Family Portrait Clients</p>
-                        </div>
-                    </div>
                 </div>
-                <!-- Testimonial 3 -->
-                <div class="testimonial-card bg-white text-gray-800 p-8 rounded-lg">
-                    <div class="flex items-center mb-4">
-                        <div class="text-yellow-400 text-xl mr-2">
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                            <i class="fas fa-star"></i>
-                        </div>
-                    </div>
-                    <p class="mb-6 italic">"Our product photos have never looked better! Sarah's attention to detail and creative eye helped showcase our products in the best possible way."</p>
-                    <div class="flex items-center">
-                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
-                        <div>
-                            <h4 class="font-semibold">Jessica Parker</h4>
-                            <p class="text-sm text-gray-600">Small Business Owner</p>
-                        </div>
-                    </div>
                 </div>
-            </div>
-        </div>
-    </section>
-    <!-- Contact Section -->
-    <section id="contact" class="py-20 bg-gray-100">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="flex flex-col md:flex-row">
-                <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10">
-                    <h2 class="text-3xl md:text-4xl font-bold mb-6">Get In Touch</h2>
-                    <p class="text-gray-700 mb-8">Ready to book a session or have questions about my services? Fill out the form or contact me directly.</p>
-                    <div class="space-y-6">
-                        <div class="flex items-start">
-                            <div class="text-blue-600 text-xl mr-4 mt-1">
-                                <i class="fas fa-map-marker-alt"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold">Studio Location</h4>
-                                <p class="text-gray-600">123 Photography Ave, Creative District, CA 90210</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start">
-                            <div class="text-blue-600 text-xl mr-4 mt-1">
-                                <i class="fas fa-envelope"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold">Email</h4>
-                                <p class="text-gray-600">hello@lenscraft.com</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start">
-                            <div class="text-blue-600 text-xl mr-4 mt-1">
-                                <i class="fas fa-phone"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold">Phone</h4>
-                                <p class="text-gray-600">(555) 123-4567</p>
-                            </div>
-                        </div>
-                        <div class="flex items-start">
-                            <div class="text-blue-600 text-xl mr-4 mt-1">
-                                <i class="fas fa-clock"></i>
-                            </div>
-                            <div>
-                                <h4 class="font-semibold">Studio Hours</h4>
-                                <p class="text-gray-600">Monday - Friday: 9am - 6pm<br>Saturday: 10am - 4pm<br>Sunday: Closed</p>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="mt-8 flex space-x-4">
-                        <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white w-10 h-10 rounded-full flex items-center justify-center">
-                            <i class="fab fa-facebook-f"></i>
-                        </a>
-                        <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white w-10 h-10 rounded-full flex items-center justify-center">
-                            <i class="fab fa-twitter"></i>
-                        </a>
-                        <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white w-10 h-10 rounded-full flex items-center justify-center">
-                            <i class="fab fa-instagram"></i>
-                        </a>
-                        <a href="#" class="bg-red-600 hover:bg-red-700 text-white w-10 h-10 rounded-full flex items-center justify-center">
-                            <i class="fab fa-youtube"></i>
-                        </a>
-                    </div>
                 </div>
-                <div class="md:w-1/2">
-                    <form class="bg-white p-8 rounded-lg shadow-md">
-                        <div class="mb-6">
-                            <label for="name" class="block text-gray-700 font-medium mb-2">Your Name</label>
-                            <input type="text" id="name" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="John Doe">
-                        </div>
-                        <div class="mb-6">
-                            <label for="email" class="block text-gray-700 font-medium mb-2">Email Address</label>
-                            <input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="john@example.com">
-                        </div>
-                        <div class="mb-6">
-                            <label for="phone" class="block text-gray-700 font-medium mb-2">Phone Number</label>
-                            <input type="tel" id="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="(555) 123-4567">
-                        </div>
-                        <div class="mb-6">
-                            <label for="service" class="block text-gray-700 font-medium mb-2">Service Interested In</label>
-                            <select id="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent">
-                                <option value="">Select a service</option>
-                                <option value="wedding">Wedding Photography</option>
-                                <option value="portrait">Portrait Session</option>
-                                <option value="commercial">Commercial Photography</option>
-                                <option value="event">Event Photography</option>
-                                <option value="other">Other</option>
-                            </select>
-                        </div>
-                        <div class="mb-6">
-                            <label for="message" class="block text-gray-700 font-medium mb-2">Your Message</label>
-                            <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent" placeholder="Tell me about your project..."></textarea>
-                        </div>
-                        <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">Send Message</button>
-                    </form>
                 </div>
             </div>
-        </div>
-    </section>
-    <!-- Newsletter Section -->
-    <section class="py-16 bg-blue-50">
-        <div class="max-w-4xl mx-auto px-4 text-center">
-            <h2 class="text-2xl md:text-3xl font-bold mb-4">Join My Newsletter</h2>
-            <p class="text-gray-600 mb-8 max-w-2xl mx-auto">Subscribe to receive photography tips, special offers, and updates on my latest work.</p>
-            <form class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
-                <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 focus:border-transparent">
-                <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Subscribe</button>
-            </form>
-        </div>
-    </section>
-    <!-- Footer -->
-    <footer class="bg-gray-800 text-white py-12">
-        <div class="max-w-7xl mx-auto px-4">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                 <div>
-                    <h3 class="text-xl font-bold mb-4">LensCraft</h3>
-                    <p class="text-gray-400">Professional photography services capturing life's most precious moments.</p>
                 </div>
                 <div>
-                    <h4 class="text-lg font-semibold mb-4">Quick Links</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#home" class="text-gray-400 hover:text-white transition duration-300">Home</a></li>
-                        <li><a href="#portfolio" class="text-gray-400 hover:text-white transition duration-300">Portfolio</a></li>
-                        <li><a href="#about" class="text-gray-400 hover:text-white transition duration-300">About</a></li>
-                        <li><a href="#services" class="text-gray-400 hover:text-white transition duration-300">Services</a></li>
-                        <li><a href="#contact" class="text-gray-400 hover:text-white transition duration-300">Contact</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="text-lg font-semibold mb-4">Services</h4>
-                    <ul class="space-y-2">
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Wedding Photography</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Portrait Sessions</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Commercial Photography</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Event Coverage</a></li>
-                        <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Photo Editing</a></li>
                     </ul>
                 </div>
                 <div>
-                    <h4 class="text-lg font-semibold mb-4">Connect</h4>
-                    <div class="flex space-x-4 mb-4">
-                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
-                            <i class="fab fa-facebook-f text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
-                            <i class="fab fa-twitter text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
-                            <i class="fab fa-instagram text-xl"></i>
-                        </a>
-                        <a href="#" class="text-gray-400 hover:text-white transition duration-300">
-                            <i class="fab fa-pinterest text-xl"></i>
-                        </a>
-                    </div>
-                    <p class="text-gray-400">© 2023 LensCraft Photography. All rights reserved.</p>
                 </div>
             </div>
-        </div>
-    </footer>
-    <!-- Lightbox -->
-    <div id="lightbox" class="lightbox">
-        <div class="lightbox-content relative">
-            <span class="absolute top-4 right-4 text-white text-3xl cursor-pointer" onclick="closeLightbox()">&times;</span>
-            <img id="lightbox-img" src="" alt="">
-            <p id="lightbox-caption" class="text-white text-center mt-4 text-xl"></p>
-        </div>
     </div>
-    <!-- Back to Top Button -->
-    <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg hidden">
-        <i class="fas fa-arrow-up"></i>
-    </button>
     <script>
-        // Mobile menu toggle
-        const menuBtn = document.getElementById('menu-btn');
-        const mobileMenu = document.getElementById('mobile-menu');
-        menuBtn.addEventListener('click', () => {
-            mobileMenu.classList.toggle('hidden');
-        });
-        // Close mobile menu when clicking on a link
-        const mobileLinks = document.querySelectorAll('#mobile-menu a');
-        mobileLinks.forEach(link => {
-            link.addEventListener('click', () => {
-                mobileMenu.classList.add('hidden');
-            });
-        });
-        // Smooth scrolling for navigation links
-        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
-            anchor.addEventListener('click', function(e) {
-                e.preventDefault();
-                const targetId = this.getAttribute('href');
-                const targetElement = document.querySelector(targetId);
-                if (targetElement) {
-                    window.scrollTo({
-                        top: targetElement.offsetTop - 80,
-                        behavior: 'smooth'
-                    });
                 }
             });
         });
-        // Back to top button
-        const backToTopBtn = document.getElementById('back-to-top');
-        window.addEventListener('scroll', () => {
-            if (window.pageYOffset > 300) {
-                backToTopBtn.classList.remove('hidden');
-            } else {
-                backToTopBtn.classList.add('hidden');
-            }
-        });
-        backToTopBtn.addEventListener('click', () => {
-            window.scrollTo({
-                top: 0,
-                behavior: 'smooth'
-            });
-        });
-        // Lightbox functionality
-        function openLightbox(src, caption) {
-            const lightbox = document.getElementById('lightbox');
-            const lightboxImg = document.getElementById('lightbox-img');
-            const lightboxCaption = document.getElementById('lightbox-caption');
-            lightboxImg.src = src;
-            lightboxCaption.textContent = caption;
-            lightbox.style.display = 'flex';
-            document.body.style.overflow = 'hidden';
-        }
-        function closeLightbox() {
-            const lightbox = document.getElementById('lightbox');
-            lightbox.style.display = 'none';
-            document.body.style.overflow = 'auto';
-        }
-        // Close lightbox when clicking outside the image
-        const lightbox = document.getElementById('lightbox');
-        lightbox.addEventListener('click', (e) => {
-            if (e.target === lightbox) {
-                closeLightbox();
-            }
-        });
-        // Form submission (prevent default for demo)
-        const contactForm = document.querySelector('form');
-        if (contactForm) {
-            contactForm.addEventListener('submit', (e) => {
-                e.preventDefault();
-                alert('Thank you for your message! This is a demo form and no data will be sent.');
-                contactForm.reset();
-            });
-        }
-        // Newsletter form submission
-        const newsletterForm = document.querySelector('form[class*="flex flex-col sm:flex-row"]');
-        if (newsletterForm) {
-            newsletterForm.addEventListener('submit', (e) => {
-                e.preventDefault();
-                alert('Thank you for subscribing to our newsletter!');
-                newsletterForm.reset();
-            });
-        }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CarloSorengo/wp2025fm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Florence Photography - WordPress Setup Guide</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        .accordion-content {
             display: none;
+            padding: 1rem;
+            border-left: 3px solid #3b82f6;
+            background-color: #f8fafc;
+            margin-top: 0.5rem;
         }
+        .accordion-title {
+            cursor: pointer;
+            padding: 1rem;
+            background-color: #e2e8f0;
+            border-radius: 0.25rem;
+            font-weight: 600;
         }
+        .accordion-title:hover {
+            background-color: #cbd5e1;
+        }
+        .accordion-title.active {
+            background-color: #3b82f6;
+            color: white;
         }
     </style>
 </head>
+<body class="bg-gray-50 font-sans">
+    <div class="max-w-6xl mx-auto px-4 py-12">
+        <h1 class="text-4xl font-bold text-center mb-8 text-gray-800">Florence Photography - WordPress Setup</h1>
+        <!-- Overview Section -->
+        <section class="mb-12 bg-white p-8 rounded-lg shadow-md">
+            <h2 class="text-2xl font-semibold mb-4 text-blue-600">Website Overview</h2>
+            <div class="grid md:grid-cols-2 gap-8">
+                <div>
+                    <h3 class="text-xl font-medium mb-2">Concept</h3>
+                    <p class="text-gray-700 mb-4">A elegant, minimalist WordPress website showcasing Florence's photography portfolio with focus on visual storytelling and easy client interaction.</p>
+                    <h3 class="text-xl font-medium mb-2">Key Features</h3>
+                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
+                        <li>Responsive gallery displays</li>
+                        <li>Client booking system</li>
+                        <li>Blog for photography tips</li>
+                        <li>Testimonials showcase</li>
+                        <li>Contact forms</li>
+                        <li>SEO optimized</li>
+                    </ul>
                 </div>
+                <div>
+                    <h3 class="text-xl font-medium mb-2">Target Audience</h3>
+                    <p class="text-gray-700 mb-4">Wedding couples, commercial clients, portrait clients, and photography enthusiasts.</p>
+                    <h3 class="text-xl font-medium mb-2">Technical Requirements</h3>
+                    <ul class="list-disc pl-5 space-y-2 text-gray-700">
+                        <li>WordPress 6.0+</li>
+                        <li>PHP 7.4+</li>
+                        <li>MySQL 5.6+</li>
+                        <li>SSL Certificate</li>
+                        <li>Image optimization</li>
+                    </ul>
                 </div>
+            </div>
+        </section>
+        <!-- Theme Selection -->
+        <section class="mb-12 bg-white p-8 rounded-lg shadow-md">
+            <h2 class="text-2xl font-semibold mb-6 text-blue-600">Recommended Themes</h2>
+            <div class="accordion-item mb-4">
+                <div class="accordion-title">1. Oshine - Photography Focused Theme</div>
+                <div class="accordion-content">
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <h4 class="font-medium mb-2">Features:</h4>
+                            <ul class="list-disc pl-5 space-y-1 text-gray-700 mb-4">
+                                <li>27+ pre-built demos including photography</li>
+                                <li>Advanced portfolio system</li>
+                                <li>Visual composer for easy customization</li>
+                                <li>Masonry and grid gallery layouts</li>
+                                <li>Client proofing system</li>
+                            </ul>
+                            <a href="https://oshine.pixelunion.net/" class="inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Demo</a>
+                        </div>
+                        <div>
+                            <h4 class="font-medium mb-2">Why for Florence:</h4>
+                            <p class="text-gray-700 mb-2">Perfect for photographers who want diverse gallery display options and client proofing features.</p>
+                            <p class="text-gray-700">Price: $59</p>
+                        </div>
+                    </div>
                 </div>
             </div>
+            <div class="accordion-item mb-4">
+                <div class="accordion-title">2. Photocrati - Professional Photography Theme</div>
+                <div class="accordion-content">
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <h4 class="font-medium mb-2">Features:</h4>
+                            <ul class="list-disc pl-5 space-y-1 text-gray-700 mb-4">
+                                <li>Built-in NextGEN Gallery</li>
+                                <li>E-commerce ready</li>
+                                <li>Client proofing system</li>
+                                <li>SEO optimized</li>
+                                <li>Mobile responsive</li>
+                            </ul>
+                            <a href="https://www.photocrati.com/" class="inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Demo</a>
+                        </div>
+                        <div>
+                            <h4 class="font-medium mb-2">Why for Florence:</h4>
+                            <p class="text-gray-700 mb-2">Specifically designed for professional photographers with selling prints in mind.</p>
+                            <p class="text-gray-700">Price: $99/year (includes hosting)</p>
+                        </div>
+                    </div>
+                </div>
             </div>
+            <div class="accordion-item">
+                <div class="accordion-title">3. Astra (with Photography Starter Site)</div>
+                <div class="accordion-content">
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <h4 class="font-medium mb-2">Features:</h4>
+                            <ul class="list-disc pl-5 space-y-1 text-gray-700 mb-4">
+                                <li>Lightweight and fast</li>
+                                <li>Pre-built photography demo</li>
+                                <li>Works with Elementor and Beaver Builder</li>
+                                <li>Highly customizable</li>
+                                <li>SEO friendly</li>
+                            </ul>
+                            <a href="https://wpastra.com/starter-templates/photography/" class="inline-block bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">Demo</a>
+                        </div>
+                        <div>
+                            <h4 class="font-medium mb-2">Why for Florence:</h4>
+                            <p class="text-gray-700 mb-2">Great for photographers who want speed and flexibility with page builders.</p>
+                            <p class="text-gray-700">Price: Free (Pro version $59)</p>
+                        </div>
                     </div>
                 </div>
+            </div>
+        </section>
+        <!-- Essential Plugins -->
+        <section class="mb-12 bg-white p-8 rounded-lg shadow-md">
+            <h2 class="text-2xl font-semibold mb-6 text-blue-600">Essential Plugins</h2>
+            <div class="grid md:grid-cols-2 gap-6">
+                <!-- Plugin 1 -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">1. NextGEN Gallery</h3>
+                    <p class="text-gray-700 mb-3">Advanced gallery system perfect for photographers with multiple display options.</p>
+                    <span class="inline-block bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Free/Premium</span>
+                </div>
+                <!-- Plugin 2 -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">2. Envira Gallery</h3>
+                    <p class="text-gray-700 mb-3">Beautiful responsive galleries with lightbox and social sharing.</p>
+                    <span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">Premium</span>
                 </div>
+                <!-- Plugin 3 -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">3. WPForms</h3>
+                    <p class="text-gray-700 mb-3">Easy contact forms for booking inquiries and client communication.</p>
+                    <span class="inline-block bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Free/Premium</span>
                 </div>
+                <!-- Plugin 4 -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">4. Yoast SEO</h3>
+                    <p class="text-gray-700 mb-3">Optimize the site for search engines to attract more clients.</p>
+                    <span class="inline-block bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Free/Premium</span>
                 </div>
+                <!-- Plugin 5 -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">5. Smush Image Optimization</h3>
+                    <p class="text-gray-700 mb-3">Compress and optimize images without losing quality.</p>
+                    <span class="inline-block bg-green-100 text-green-800 px-2 py-1 rounded text-sm">Free/Premium</span>
                 </div>
+                <!-- Plugin 6 -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">6. Bookly</h3>
+                    <p class="text-gray-700 mb-3">Appointment booking system for client sessions.</p>
+                    <span class="inline-block bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">Premium</span>
                 </div>
             </div>
+        </section>
+        <!-- Page Structure -->
+        <section class="mb-12 bg-white p-8 rounded-lg shadow-md">
+            <h2 class="text-2xl font-semibold mb-6 text-blue-600">Recommended Page Structure</h2>
+            <div class="grid md:grid-cols-3 gap-6">
+                <!-- Home -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">Homepage</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Hero section with featured image</li>
+                        <li>Portfolio highlights</li>
+                        <li>About teaser</li>
+                        <li>Testimonials</li>
+                        <li>Call-to-action</li>
+                    </ul>
                 </div>
+                <!-- Portfolio -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">Portfolio</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Categories (Weddings, Portraits, etc.)</li>
+                        <li>Filterable gallery</li>
+                        <li>Lightbox viewing</li>
+                        <li>Project descriptions</li>
+                    </ul>
                 </div>
+                <!-- About -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">About</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Photographer bio</li>
+                        <li>Professional journey</li>
+                        <li>Philosophy/style</li>
+                        <li>Equipment list</li>
+                        <li>Personal photos</li>
                     </ul>
                 </div>
+                <!-- Services -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">Services</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Detailed service packages</li>
+                        <li>Pricing information</li>
+                        <li>What's included</li>
+                        <li>Booking button</li>
                     </ul>
                 </div>
+                <!-- Blog -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">Blog</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Photography tips</li>
+                        <li>Behind-the-scenes</li>
+                        <li>Gear reviews</li>
+                        <li>Client stories</li>
+                    </ul>
+                </div>
+                <!-- Contact -->
+                <div class="border border-gray-200 rounded-lg p-4">
+                    <h3 class="font-bold text-lg mb-2">Contact</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Contact form</li>
+                        <li>Location map</li>
+                        <li>Social media links</li>
+                        <li>FAQ section</li>
                     </ul>
                 </div>
             </div>
+        </section>
+        <!-- Setup Instructions -->
+        <section class="mb-12 bg-white p-8 rounded-lg shadow-md">
+            <h2 class="text-2xl font-semibold mb-6 text-blue-600">Step-by-Step Setup Guide</h2>
+            <div class="space-y-4">
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">1. WordPress Installation</h3>
+                    <p class="text-gray-700">Install WordPress on your hosting account (most hosts offer 1-click install).</p>
                 </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">2. Theme Installation</h3>
+                    <p class="text-gray-700">Go to Appearance > Themes > Add New. Upload your chosen premium theme or search for Astra.</p>
                 </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">3. Install Essential Plugins</h3>
+                    <p class="text-gray-700">Go to Plugins > Add New and install the recommended plugins.</p>
                 </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">4. Import Demo Content (if available)</h3>
+                    <p class="text-gray-700">Many premium themes come with demo import options to get you started quickly.</p>
                 </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">5. Create Pages</h3>
+                    <p class="text-gray-700">Set up all the pages from the recommended structure above.</p>
+                </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">6. Configure Gallery Plugin</h3>
+                    <p class="text-gray-700">Set up your portfolio galleries with categories and tags.</p>
+                </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">7. Customize Design</h3>
+                    <p class="text-gray-700">Adjust colors, fonts, and layouts to match Florence's brand.</p>
+                </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">8. Add Content</h3>
+                    <p class="text-gray-700">Upload Florence's best work, write compelling copy, and add testimonials.</p>
+                </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">9. Set Up Booking System</h3>
+                    <p class="text-gray-700">Configure the booking plugin with available dates and services.</p>
+                </div>
+                <div class="border-l-4 border-blue-500 pl-4 py-1">
+                    <h3 class="font-bold text-lg">10. Optimize for SEO</h3>
+                    <p class="text-gray-700">Use Yoast SEO to optimize all pages and images.</p>
                 </div>
             </div>
+        </section>
+        <!-- Maintenance Tips -->
+        <section class="bg-white p-8 rounded-lg shadow-md">
+            <h2 class="text-2xl font-semibold mb-6 text-blue-600">Ongoing Maintenance Tips</h2>
+            <div class="grid md:grid-cols-2 gap-6">
                 <div>
+                    <h3 class="font-bold text-lg mb-2">Content Updates</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Add new portfolio work monthly</li>
+                        <li>Publish blog posts regularly (2x/month)</li>
+                        <li>Update service offerings as needed</li>
+                        <li>Refresh testimonials periodically</li>
+                    </ul>
                 </div>
                 <div>
+                    <h3 class="font-bold text-lg mb-2">Technical Maintenance</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Keep WordPress core, themes, and plugins updated</li>
+                        <li>Regularly backup the site</li>
+                        <li>Monitor site speed and optimize images</li>
+                        <li>Check for broken links quarterly</li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="font-bold text-lg mb-2">Marketing</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Share new work on social media</li>
+                        <li>Run seasonal promotions</li>
+                        <li>Collect client emails for newsletter</li>
+                        <li>Monitor Google Analytics</li>
                     </ul>
                 </div>
                 <div>
+                    <h3 class="font-bold text-lg mb-2">Security</h3>
+                    <ul class="list-disc pl-5 space-y-1 text-gray-700">
+                        <li>Use strong passwords</li>
+                        <li>Install security plugin like Wordfence</li>
+                        <li>Enable two-factor authentication</li>
+                        <li>Monitor for suspicious activity</li>
+                    </ul>
                 </div>
             </div>
+        </section>
     </div>
     <script>
+        // Accordion functionality
+        document.querySelectorAll('.accordion-title').forEach(title => {
+            title.addEventListener('click', () => {
+                const content = title.nextElementSibling;
+                const isActive = title.classList.contains('active');
+                // Close all accordion items
+                document.querySelectorAll('.accordion-title').forEach(t => {
+                    t.classList.remove('active');
+                    t.nextElementSibling.style.display = 'none';
+                });
+                // Open current if it was closed
+                if (!isActive) {
+                    title.classList.add('active');
+                    content.style.display = 'block';
                 }
             });
         });
+        // Open first accordion by default
+        document.querySelector('.accordion-title').click();
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=CarloSorengo/wp2025fm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
 </html>

prompts.txt CHANGED Viewed

	@@ -1 +1,2 @@
1	- Build a website for a photographer


1	+ Build a website for a photographer
2	+ Build a wordpress based website for the photographer "Florence"