make it look 90% as this web page: https://leaflife.framer.website/

README.md

@@ -1,10 +1,13 @@
 ---
-title: Leafy Vibes Oasis
-emoji: 🐠
-colorFrom: pink
+title: Leafy Vibes Oasis 🌿
+colorFrom: green
 colorTo: pink
+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,126 @@
+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background-color: #166534;
+                    color: white;
+                    padding: 4rem 2rem;
+                }
+                .footer-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    display: grid;
+                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+                    gap: 2rem;
+                }
+                .footer-logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    margin-bottom: 1rem;
+                    display: flex;
+                    align-items: center;
+                }
+                .footer-logo i {
+                    margin-right: 0.5rem;
+                }
+                .footer-description {
+                    margin-bottom: 1.5rem;
+                    opacity: 0.8;
+                }
+                .social-links {
+                    display: flex;
+                    gap: 1rem;
+                }
+                .social-links a {
+                    color: white;
+                    opacity: 0.7;
+                    transition: opacity 0.3s;
+                }
+                .social-links a:hover {
+                    opacity: 1;
+                }
+                .footer-heading {
+                    font-weight: 600;
+                    margin-bottom: 1.5rem;
+                    font-size: 1.1rem;
+                }
+                .footer-links {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.75rem;
+                }
+                .footer-links a {
+                    color: white;
+                    opacity: 0.7;
+                    text-decoration: none;
+                    transition: opacity 0.3s;
+                }
+                .footer-links a:hover {
+                    opacity: 1;
+                }
+                .copyright {
+                    margin-top: 3rem;
+                    text-align: center;
+                    opacity: 0.6;
+                    font-size: 0.9rem;
+                }
+                @media (max-width: 768px) {
+                    .footer-container {
+                        grid-template-columns: 1fr;
+                    }
+                }
+            </style>
+            <div class="footer-container">
+                <div class="footer-about">
+                    <div class="footer-logo">
+                        <i data-feather="leaf"></i>
+                        Leafy Vibes
+                    </div>
+                    <p class="footer-description">
+                        Bringing nature into your digital life through mindful design and sustainable technology.
+                    </p>
+                    <div class="social-links">
+                        <a href="#"><i data-feather="twitter"></i></a>
+                        <a href="#"><i data-feather="instagram"></i></a>
+                        <a href="#"><i data-feather="facebook"></i></a>
+                        <a href="#"><i data-feather="linkedin"></i></a>
+                    </div>
+                </div>
+                <div class="footer-links-section">
+                    <h3 class="footer-heading">Quick Links</h3>
+                    <div class="footer-links">
+                        <a href="#">Home</a>
+                        <a href="#">Features</a>
+                        <a href="#">Gallery</a>
+                        <a href="#">Testimonials</a>
+                    </div>
+                </div>
+                <div class="footer-links-section">
+                    <h3 class="footer-heading">Resources</h3>
+                    <div class="footer-links">
+                        <a href="#">Blog</a>
+                        <a href="#">Guides</a>
+                        <a href="#">FAQ</a>
+                        <a href="#">Support</a>
+                    </div>
+                </div>
+                <div class="footer-links-section">
+                    <h3 class="footer-heading">Legal</h3>
+                    <div class="footer-links">
+                        <a href="#">Privacy Policy</a>
+                        <a href="#">Terms of Service</a>
+                        <a href="#">Cookie Policy</a>
+                    </div>
+                </div>
+            </div>
+            <div class="copyright">
+                &copy; ${new Date().getFullYear()} Leafy Vibes Oasis. All rights reserved.
+            </div>
+        `;
+    }
+}
+
+customElements.define('custom-footer', CustomFooter);

components/navbar.js

@@ -0,0 +1,99 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    width: 100%;
+                    position: fixed;
+                    top: 0;
+                    left: 0;
+                    z-index: 1000;
+                    background-color: rgba(255, 255, 255, 0.95);
+                    backdrop-filter: blur(10px);
+                    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+                }
+                nav {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 1.5rem 2rem;
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                }
+                .logo {
+                    font-size: 1.5rem;
+                    font-weight: 700;
+                    color: #166534;
+                    text-decoration: none;
+                    display: flex;
+                    align-items: center;
+                }
+                .logo i {
+                    margin-right: 0.5rem;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 2rem;
+                }
+                .nav-links a {
+                    color: #365314;
+                    text-decoration: none;
+                    font-weight: 500;
+                    transition: color 0.3s;
+                    position: relative;
+                }
+                .nav-links a:hover {
+                    color: #166534;
+                }
+                .nav-links a::after {
+                    content: '';
+                    position: absolute;
+                    width: 0;
+                    height: 2px;
+                    bottom: -4px;
+                    left: 0;
+                    background-color: #166534;
+                    transition: width 0.3s;
+                }
+                .nav-links a:hover::after {
+                    width: 100%;
+                }
+                .mobile-menu-btn {
+                    display: none;
+                    background: none;
+                    border: none;
+                    color: #166534;
+                    font-size: 1.5rem;
+                    cursor: pointer;
+                }
+                @media (max-width: 768px) {
+                    .nav-links {
+                        display: none;
+                    }
+                    .mobile-menu-btn {
+                        display: block;
+                    }
+                }
+            </style>
+            <nav>
+                <a href="/" class="logo">
+                    <i data-feather="leaf"></i>
+                    Leafy Vibes
+                </a>
+                <div class="nav-links">
+                    <a href="#features">Features</a>
+                    <a href="#gallery">Gallery</a>
+                    <a href="#testimonials">Testimonials</a>
+                    <a href="#contact">Contact</a>
+                </div>
+                <button class="mobile-menu-btn">
+                    <i data-feather="menu"></i>
+                </button>
+            </nav>
+        `;
+    }
+}
+
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,143 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leafy Vibes Oasis</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-white text-gray-900 font-sans">
+    <custom-navbar></custom-navbar>
+
+    <main>
+        <!-- Hero Section -->
+        <section class="relative h-screen flex items-center justify-center overflow-hidden">
+            <div class="absolute inset-0 bg-gradient-to-b from-green-50 to-white z-0"></div>
+            <div class="container mx-auto px-6 z-10">
+                <div class="flex flex-col md:flex-row items-center">
+                    <div class="md:w-1/2 mb-10 md:mb-0">
+                        <h1 class="text-5xl md:text-7xl font-bold mb-6 text-green-900 leading-tight">Bring nature into your digital life</h1>
+                        <p class="text-xl text-gray-700 mb-8 max-w-lg">A collection of plant-inspired digital experiences to help you stay grounded in the modern world.</p>
+                        <div class="flex space-x-4">
+                            <a href="#" class="px-8 py-4 bg-green-600 text-white rounded-full font-medium hover:bg-green-700 transition duration-300">Explore</a>
+                            <a href="#" class="px-8 py-4 border-2 border-green-600 text-green-600 rounded-full font-medium hover:bg-green-50 transition duration-300">Learn more</a>
+                        </div>
+                    </div>
+                    <div class="md:w-1/2 relative">
+                        <img src="http://static.photos/nature/640x360/42" alt="Leafy plant" class="rounded-3xl shadow-2xl w-full max-w-lg mx-auto">
+                        <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-green-100 rounded-full z-0"></div>
+                        <div class="absolute -top-10 -right-10 w-24 h-24 bg-green-200 rounded-full z-0"></div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Features Section -->
+        <section class="py-20 bg-white">
+            <div class="container mx-auto px-6">
+                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-green-900">What we offer</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
+                    <div class="bg-green-50 p-8 rounded-3xl hover:shadow-lg transition duration-300">
+                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
+                            <i data-feather="leaf" class="text-green-600 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-4 text-green-900">Digital Wellness</h3>
+                        <p class="text-gray-700">Tools to help you maintain balance between technology and nature.</p>
+                    </div>
+                    <div class="bg-green-50 p-8 rounded-3xl hover:shadow-lg transition duration-300">
+                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
+                            <i data-feather="droplet" class="text-green-600 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-4 text-green-900">Mindful Design</h3>
+                        <p class="text-gray-700">Interfaces that promote calm and focus through natural aesthetics.</p>
+                    </div>
+                    <div class="bg-green-50 p-8 rounded-3xl hover:shadow-lg transition duration-300">
+                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
+                            <i data-feather="sun" class="text-green-600 w-8 h-8"></i>
+                        </div>
+                        <h3 class="text-xl font-bold mb-4 text-green-900">Sustainable Tech</h3>
+                        <p class="text-gray-700">Solutions that consider environmental impact and digital minimalism.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Gallery Section -->
+        <section class="py-20 bg-green-50">
+            <div class="container mx-auto px-6">
+                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-green-900">Our Collection</h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                    <div class="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
+                        <img src="http://static.photos/nature/640x360/1" alt="Plant 1" class="w-full h-64 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2 text-green-900">Serene Spaces</h3>
+                            <p class="text-gray-700 mb-4">Digital environments that mimic peaceful natural settings.</p>
+                            <a href="#" class="text-green-600 font-medium hover:text-green-800 transition duration-300">View project →</a>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
+                        <img src="http://static.photos/nature/640x360/2" alt="Plant 2" class="w-full h-64 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2 text-green-900">Botanical Sounds</h3>
+                            <p class="text-gray-700 mb-4">Ambient nature sounds for focus and relaxation.</p>
+                            <a href="#" class="text-green-600 font-medium hover:text-green-800 transition duration-300">View project →</a>
+                        </div>
+                    </div>
+                    <div class="bg-white rounded-3xl overflow-hidden shadow-md hover:shadow-xl transition duration-300">
+                        <img src="http://static.photos/nature/640x360/3" alt="Plant 3" class="w-full h-64 object-cover">
+                        <div class="p-6">
+                            <h3 class="text-xl font-bold mb-2 text-green-900">Growth Tracker</h3>
+                            <p class="text-gray-700 mb-4">Visualize your personal development like a growing plant.</p>
+                            <a href="#" class="text-green-600 font-medium hover:text-green-800 transition duration-300">View project →</a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- Testimonials -->
+        <section class="py-20 bg-white">
+            <div class="container mx-auto px-6">
+                <h2 class="text-3xl md:text-4xl font-bold text-center mb-16 text-green-900">What people say</h2>
+                <div class="max-w-4xl mx-auto">
+                    <div class="bg-green-50 p-10 rounded-3xl relative">
+                        <div class="absolute -top-6 -left-6 w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
+                            <i data-feather="quote" class="text-green-600"></i>
+                        </div>
+                        <p class="text-xl text-gray-700 mb-6">"Leafy Vibes Oasis has transformed how I interact with technology. The natural aesthetic makes my screen time feel more intentional and peaceful."</p>
+                        <div class="flex items-center">
+                            <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-4">
+                            <div>
+                                <h4 class="font-bold text-green-900">Alex Morgan</h4>
+                                <p class="text-gray-600">UX Designer</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
+        <!-- CTA Section -->
+        <section class="py-20 bg-gradient-to-b from-green-50 to-white">
+            <div class="container mx-auto px-6 text-center">
+                <h2 class="text-3xl md:text-4xl font-bold mb-8 text-green-900">Ready to bring more nature into your digital life?</h2>
+                <p class="text-xl text-gray-700 mb-10 max-w-2xl mx-auto">Join our community of nature-inspired digital creators and find balance in your tech life.</p>
+                <a href="#" class="px-10 py-5 bg-green-600 text-white rounded-full font-medium hover:bg-green-700 transition duration-300 inline-block">Get Started</a>
+            </div>
+        </section>
+    </main>
+
+    <custom-footer></custom-footer>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,28 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // Smooth scrolling for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function(e) {
+            e.preventDefault();
+            document.querySelector(this.getAttribute('href')).scrollIntoView({
+                behavior: 'smooth'
+            });
+        });
+    });
+
+    // Animation on scroll
+    const observerOptions = {
+        threshold: 0.1
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.classList.add('animate-fadeIn');
+            }
+        });
+    }, observerOptions);
+
+    document.querySelectorAll('.animate-on-scroll').forEach(el => {
+        observer.observe(el);
+    });
+});

style.css

@@ -1,28 +1,45 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
+    scroll-behavior: smooth;
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: #f1f1f1;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #16a34a;
+    border-radius: 4px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-thumb:hover {
+    background: #15803d;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Animation for floating elements */
+@keyframes float {
+    0% { transform: translateY(0px); }
+    50% { transform: translateY(-15px); }
+    100% { transform: translateY(0px); }
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.floating {
+    animation: float 6s ease-in-out infinite;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Hover effects for cards */
+.card-hover {
+    transition: all 0.3s ease;
+    transform: translateY(0);
 }
+
+.card-hover:hover {
+    transform: translateY(-5px);
+}