Spaces:

pagezyhf
/

arbio-green-thumb-haven

Running

App Files Files Community

pagezyhf HF Staff commited on Oct 14

Commit

34705b0

verified ·

1 Parent(s): 8df448b

https://www.arbio.com/

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +377 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Arbio Green Thumb Haven
-emoji: 😻
-colorFrom: pink
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Arbio Green Thumb Haven 🌱
+colorFrom: purple
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,378 @@
-<!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>Arbio - Sustainable Living</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              primary: {
+                50: '#f0fdf4',
+                100: '#dcfce7',
+                200: '#bbf7d0',
+                300: '#86efac',
+                400: '#4ade80',
+                500: '#22c55e',
+                600: '#16a34a',
+                700: '#15803d',
+                800: '#166534',
+                900: '#14532d',
+              },
+              secondary: {
+                50: '#f8fafc',
+                100: '#f1f5f9',
+                200: '#e2e8f0',
+                300: '#cbd5e1',
+                400: '#94a3b8',
+                500: '#64748b',
+                600: '#475569',
+                700: '#334155',
+                800: '#1e293b',
+                900: '#0f172a',
+              }
+            }
+          }
+        }
+      }
+    </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="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.waves.min.js"></script>
+    <style>
+      @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+      body {
+        font-family: 'Poppins', sans-serif;
+      }
+      .hero-bg {
+        background-image: url('http://static.photos/nature/1200x630/42');
+        background-size: cover;
+        background-position: center;
+        background-blend-mode: overlay;
+      }
+      .nav-link:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+      .card-hover:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      }
+      .transition-all {
+        transition: all 0.3s ease;
+      }
+    </style>
+</head>
+<body class="bg-gray-50 text-secondary-900">
+  <!-- Navigation -->
+  <nav class="bg-primary-900 text-white shadow-lg">
+    <div class="container mx-auto px-6 py-3">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+          <i data-feather="leaf" class="w-8 h-8 text-primary-300"></i>
+          <span class="text-xl font-bold">Arbio</span>
+        </div>
+        <div class="hidden md:flex items-center space-x-8">
+          <a href="#" class="nav-link px-3 py-2 rounded-md transition-all">Home</a>
+          <a href="#" class="nav-link px-3 py-2 rounded-md transition-all">Our Mission</a>
+          <a href="#" class="nav-link px-3 py-2 rounded-md transition-all">Products</a>
+          <a href="#" class="nav-link px-3 py-2 rounded-md transition-all">Blog</a>
+          <a href="#" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-md transition-all">Join Us</a>
+        </div>
+        <button class="md:hidden focus:outline-none">
+          <i data-feather="menu" class="w-6 h-6"></i>
+        </button>
+      </div>
+    </div>
+  </nav>
+  <!-- Hero Section -->
+  <section class="hero-bg bg-primary-700 text-white py-20 md:py-32">
+    <div class="container mx-auto px-6 text-center">
+      <h1 class="text-4xl md:text-6xl font-bold mb-6">Grow Green, Live Clean</h1>
+      <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Join our movement towards a sustainable future with eco-friendly solutions for your home and garden.</p>
+      <div class="flex flex-col sm:flex-row justify-center gap-4">
+        <button class="bg-white text-primary-700 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium transition-all shadow-lg">
+          Explore Products
+        </button>
+        <button class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all shadow-lg">
+          Learn More
+        </button>
+      </div>
+    </div>
+  </section>
+  <!-- Features Section -->
+  <section class="py-16 bg-white">
+    <div class="container mx-auto px-6">
+      <h2 class="text-3xl font-bold text-center mb-12">Why Choose Arbio?</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="card-hover bg-gray-50 p-8 rounded-xl shadow-md transition-all">
+          <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+            <i data-feather="award" class="w-8 h-8 text-primary-600"></i>
+          </div>
+          <h3 class="text-xl font-semibold mb-3">Eco-Certified</h3>
+          <p class="text-secondary-600">All our products meet the highest environmental standards and certifications.</p>
+        </div>
+        <div class="card-hover bg-gray-50 p-8 rounded-xl shadow-md transition-all">
+          <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+            <i data-feather="droplet" class="w-8 h-8 text-primary-600"></i>
+          </div>
+          <h3 class="text-xl font-semibold mb-3">Water Saving</h3>
+          <p class="text-secondary-600">Our solutions help reduce water consumption by up to 50% in your garden.</p>
+        </div>
+        <div class="card-hover bg-gray-50 p-8 rounded-xl shadow-md transition-all">
+          <div class="w-16 h-16 bg-primary-100 rounded-full flex items-center justify-center mb-4">
+            <i data-feather="zap" class="w-8 h-8 text-primary-600"></i>
+          </div>
+          <h3 class="text-xl font-semibold mb-3">Fast Growth</h3>
+          <p class="text-secondary-600">Experience accelerated plant growth with our organic nutrient formulas.</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Product Showcase -->
+  <section class="py-16 bg-gray-50">
+    <div class="container mx-auto px-6">
+      <h2 class="text-3xl font-bold text-center mb-12">Featured Products</h2>
+      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+        <!-- Product 1 -->
+        <div class="card-hover bg-white rounded-xl overflow-hidden shadow-md transition-all">
+          <img src="http://static.photos/garden/640x360/1" alt="Organic Compost" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <div class="flex justify-between items-start">
+              <h3 class="text-lg font-semibold">Organic Compost</h3>
+              <span class="bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded">Bestseller</span>
+            </div>
+            <p class="text-secondary-600 text-sm mt-2">Nutrient-rich compost for all plant types</p>
+            <div class="mt-4 flex items-center justify-between">
+              <span class="font-bold">$19.99</span>
+              <button class="bg-primary-500 hover:bg-primary-600 text-white px-3 py-1 rounded text-sm transition-all">
+                Add to Cart
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Product 2 -->
+        <div class="card-hover bg-white rounded-xl overflow-hidden shadow-md transition-all">
+          <img src="http://static.photos/garden/640x360/2" alt="Self-Watering Planter" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <h3 class="text-lg font-semibold">Self-Watering Planter</h3>
+            <p class="text-secondary-600 text-sm mt-2">Smart design reduces water usage</p>
+            <div class="mt-4 flex items-center justify-between">
+              <span class="font-bold">$34.99</span>
+              <button class="bg-primary-500 hover:bg-primary-600 text-white px-3 py-1 rounded text-sm transition-all">
+                Add to Cart
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Product 3 -->
+        <div class="card-hover bg-white rounded-xl overflow-hidden shadow-md transition-all">
+          <img src="http://static.photos/garden/640x360/3" alt="Solar Garden Lights" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <h3 class="text-lg font-semibold">Solar Garden Lights</h3>
+            <p class="text-secondary-600 text-sm mt-2">Eco-friendly illumination for your garden</p>
+            <div class="mt-4 flex items-center justify-between">
+              <span class="font-bold">$24.99</span>
+              <button class="bg-primary-500 hover:bg-primary-600 text-white px-3 py-1 rounded text-sm transition-all">
+                Add to Cart
+              </button>
+            </div>
+          </div>
+        </div>
+        <!-- Product 4 -->
+        <div class="card-hover bg-white rounded-xl overflow-hidden shadow-md transition-all">
+          <img src="http://static.photos/garden/640x360/4" alt="Bamboo Tool Set" class="w-full h-48 object-cover">
+          <div class="p-6">
+            <div class="flex justify-between items-start">
+              <h3 class="text-lg font-semibold">Bamboo Tool Set</h3>
+              <span class="bg-primary-100 text-primary-800 text-xs px-2 py-1 rounded">New</span>
+            </div>
+            <p class="text-secondary-600 text-sm mt-2">Sustainable gardening tools</p>
+            <div class="mt-4 flex items-center justify-between">
+              <span class="font-bold">$29.99</span>
+              <button class="bg-primary-500 hover:bg-primary-600 text-white px-3 py-1 rounded text-sm transition-all">
+                Add to Cart
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="text-center mt-10">
+        <button class="border-2 border-primary-500 text-primary-600 hover:bg-primary-50 px-6 py-2 rounded-lg font-medium transition-all">
+          View All Products
+        </button>
+      </div>
+    </div>
+  </section>
+  <!-- Testimonials -->
+  <section class="py-16 bg-primary-800 text-white">
+    <div class="container mx-auto px-6">
+      <h2 class="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+        <div class="bg-primary-700 p-6 rounded-xl">
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+              <img src="http://static.photos/people/200x200/1" alt="Customer" class="w-full h-full object-cover">
+            </div>
+            <div>
+              <h4 class="font-semibold">Sarah Johnson</h4>
+              <div class="flex text-primary-300">
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+              </div>
+            </div>
+          </div>
+          <p>"The organic compost transformed my vegetable garden! My plants are healthier than ever and I've never had such a bountiful harvest."</p>
+        </div>
+        <div class="bg-primary-700 p-6 rounded-xl">
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+              <img src="http://static.photos/people/200x200/2" alt="Customer" class="w-full h-full object-cover">
+            </div>
+            <div>
+              <h4 class="font-semibold">Michael Chen</h4>
+              <div class="flex text-primary-300">
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+              </div>
+            </div>
+          </div>
+          <p>"The self-watering planters are a game-changer for my busy lifestyle. My plants thrive even when I travel for work."</p>
+        </div>
+        <div class="bg-primary-700 p-6 rounded-xl">
+          <div class="flex items-center mb-4">
+            <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
+              <img src="http://static.photos/people/200x200/3" alt="Customer" class="w-full h-full object-cover">
+            </div>
+            <div>
+              <h4 class="font-semibold">Elena Rodriguez</h4>
+              <div class="flex text-primary-300">
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+                <i data-feather="star" class="w-4 h-4 fill-current"></i>
+              </div>
+            </div>
+          </div>
+          <p>"I love that Arbio's products align with my values. Sustainable, effective, and beautiful - what more could you ask for?"</p>
+        </div>
+      </div>
+    </div>
+  </section>
+  <!-- Newsletter -->
+  <section class="py-16 bg-white">
+    <div class="container mx-auto px-6 max-w-4xl">
+      <div class="bg-primary-50 rounded-xl p-8 md:p-12 text-center">
+        <h2 class="text-2xl md:text-3xl font-bold mb-4">Join Our Green Community</h2>
+        <p class="mb-6 text-secondary-600 max-w-2xl mx-auto">Subscribe to our newsletter for gardening tips, exclusive offers, and sustainability insights.</p>
+        <form class="flex flex-col sm:flex-row gap-3 max-w-md mx-auto">
+          <input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+          <button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-lg font-medium transition-all">
+            Subscribe
+          </button>
+        </form>
+      </div>
+    </div>
+  </section>
+  <!-- Footer -->
+  <footer class="bg-secondary-900 text-white py-12">
+    <div class="container mx-auto px-6">
+      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+        <div>
+          <div class="flex items-center space-x-2 mb-4">
+            <i data-feather="leaf" class="w-6 h-6 text-primary-400"></i>
+            <span class="text-xl font-bold">Arbio</span>
+          </div>
+          <p class="text-secondary-400">Cultivating a greener future, one garden at a time.</p>
+          <div class="flex space-x-4 mt-4">
+            <a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">
+              <i data-feather="facebook" class="w-5 h-5"></i>
+            </a>
+            <a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">
+              <i data-feather="instagram" class="w-5 h-5"></i>
+            </a>
+            <a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">
+              <i data-feather="twitter" class="w-5 h-5"></i>
+            </a>
+            <a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">
+              <i data-feather="youtube" class="w-5 h-5"></i>
+            </a>
+          </div>
+        </div>
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
+          <ul class="space-y-2">
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">About Us</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Our Mission</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Products</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Blog</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Contact</a></li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Support</h3>
+          <ul class="space-y-2">
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">FAQs</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Shipping Policy</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Returns</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Privacy Policy</a></li>
+            <li><a href="#" class="text-secondary-400 hover:text-primary-400 transition-all">Terms of Service</a></li>
+          </ul>
+        </div>
+        <div>
+          <h3 class="text-lg font-semibold mb-4">Contact Us</h3>
+          <ul class="space-y-2 text-secondary-400">
+            <li class="flex items-start">
+              <i data-feather="mail" class="w-4 h-4 mr-2 mt-0.5"></i>
+              <span>[email protected]</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="phone" class="w-4 h-4 mr-2 mt-0.5"></i>
+              <span>+1 (555) 123-4567</span>
+            </li>
+            <li class="flex items-start">
+              <i data-feather="map-pin" class="w-4 h-4 mr-2 mt-0.5"></i>
+              <span>123 Green Street, Eco City, EC 12345</span>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div class="border-t border-secondary-800 mt-10 pt-6 text-center text-secondary-400">
+        <p>© 2023 Arbio. All rights reserved.</p>
+      </div>
+    </div>
+  </footer>
+  <script>
+    feather.replace();
+    // Initialize Vanta.js effect
+    VANTA.WAVES({
+      el: "#vanta-bg",
+      color: 0x1a7a4a,
+      waveHeight: 20,
+      shininess: 50,
+      waveSpeed: 0.75,
+      zoom: 0.75
+    })
+  </script>
+</body>
 </html>