Spaces:

vc3nt
/

juicepop

Running

App Files Files Community

vc3nt commited on Jul 17

Commit

9474a8f

verified ·

1 Parent(s): ea52eb3

looks like u change only 1 card and did not do a good job. the card is too basic and not consistence - Follow Up Deployment

Browse files

Files changed (1) hide show

index.html +124 -158

index.html CHANGED Viewed

@@ -15,7 +15,7 @@
         }
         .hero-gradient {
-            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
         }
         .juice-card:hover {
@@ -27,6 +27,14 @@
             transition: all 0.3s ease;
         }
         .floating {
             animation: floating 3s ease-in-out infinite;
         }
@@ -44,11 +52,13 @@
 </head>
 <body class="smooth-scroll">
     <!-- Navigation -->
-    <nav class="bg-white shadow-md sticky top-0 z-50">
-        <div class="container mx-auto px-6 py-3">
             <div class="flex items-center justify-between">
                 <div class="flex items-center">
-                    <a href="#" class="text-2xl font-bold text-orange-500">Juice<span class="text-green-500">Pop</span></a>
                 </div>
                 <!-- Mobile menu button -->
@@ -85,24 +95,18 @@
     </nav>
     <!-- Hero Section -->
-    <section id="home" class="hero-gradient py-20">
-        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
-            <div class="md:w-1/2 mb-10 md:mb-0">
-                <h1 class="text-4xl md:text-6xl font-bold text-gray-800 leading-tight">
-                    Fresh <span class="text-orange-500">Fruit</span> Juices for a <span class="text-green-500">Healthy</span> Life
-                </h1>
-                <p class="text-gray-600 mt-4 text-lg">
-                    Discover our delicious range of 100% natural, no-added-sugar fruit juices made from the freshest ingredients.
-                </p>
-                <div class="mt-8 flex space-x-4">
-                    <a href="#menu" class="px-6 py-3 bg-orange-500 text-white rounded-full hover:bg-orange-600 transition">Explore Menu</a>
-                    <a href="#order" class="px-6 py-3 border border-orange-500 text-orange-500 rounded-full hover:bg-orange-50 transition">Order Now</a>
-                </div>
-            </div>
-            <div class="md:w-1/2 flex justify-center">
-                <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
-                     alt="Fresh Juice"
-                     class="rounded-full w-64 h-64 md:w-80 md:h-80 object-cover shadow-xl floating">
             </div>
         </div>
     </section>
@@ -110,34 +114,35 @@
     <!-- Features Section -->
     <section class="py-16 bg-white">
         <div class="container mx-auto px-6">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl font-bold text-gray-800">Why Choose JuicePop?</h2>
-                <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-10">
-                <div class="text-center p-6 rounded-lg hover:shadow-lg transition">
-                    <div class="w-20 h-20 bg-orange-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i class="fas fa-leaf text-orange-500 text-3xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">100% Natural</h3>
-                    <p class="text-gray-600">No artificial flavors, colors, or preservatives. Just pure, natural goodness.</p>
                 </div>
-                <div class="text-center p-6 rounded-lg hover:shadow-lg transition">
-                    <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i class="fas fa-heart text-green-500 text-3xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Healthy & Nutritious</h3>
-                    <p class="text-gray-600">Packed with vitamins, minerals, and antioxidants to boost your health.</p>
                 </div>
-                <div class="text-center p-6 rounded-lg hover:shadow-lg transition">
-                    <div class="w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i class="fas fa-bolt text-yellow-500 text-3xl"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Instant Energy</h3>
-                    <p class="text-gray-600">Natural sugars provide quick energy without the crash of processed drinks.</p>
                 </div>
             </div>
         </div>
@@ -149,24 +154,59 @@
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-800">Our Refreshing Menu</h2>
                 <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
-                <p class="text-gray-600 mt-4 max-w-2xl mx-auto">Explore our wide selection of delicious, handcrafted fruit juices</p>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Juice Card 1 -->
-                <div class="juice-card bg-white rounded-xl overflow-hidden shadow-md">
-                    <div class="h-48 overflow-hidden">
                         <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
                              alt="Tropical Bliss"
-                             class="w-full h-full object-cover">
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-center mb-2">
                             <h3 class="text-xl font-bold">Tropical Bliss</h3>
-                            <span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm font-semibold">$5.99</span>
                         </div>
-                        <p class="text-gray-600 mb-4">A refreshing blend of pineapple, mango, and orange with a hint of coconut.</p>
-                        <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">Add to Cart</button>
                     </div>
                 </div>
@@ -263,126 +303,52 @@
     </section>
     <!-- About Section -->
-    <section id="about" class="py-16 bg-white">
-        <div class="container mx-auto px-6">
-            <div class="flex flex-col md:flex-row items-center">
-                <div class="md:w-1/2 mb-10 md:mb-0">
-                    <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
-                         alt="About JuicePop"
-                         class="rounded-lg shadow-xl w-full">
-                </div>
-                <div class="md:w-1/2 md:pl-12">
-                    <h2 class="text-3xl font-bold text-gray-800 mb-6">Our Story</h2>
-                    <p class="text-gray-600 mb-4">
-                        JuicePop was born from a simple idea: to create delicious, healthy juices that people actually enjoy drinking.
-                        Founded in 2015 by nutritionist Sarah Johnson and chef Michael Rodriguez, we've grown from a small farmers'
-                        market stand to multiple locations across the city.
-                    </p>
-                    <p class="text-gray-600 mb-4">
-                        We believe that healthy doesn't have to mean boring. Our juices are crafted to deliver maximum nutrition
-                        without compromising on taste. Every ingredient is carefully selected for quality and freshness.
-                    </p>
-                    <p class="text-gray-600 mb-6">
-                        Sustainability is at our core. We source locally whenever possible, use biodegradable packaging, and compost
-                        all our organic waste. Because what's good for you should be good for the planet too.
-                    </p>
-                    <div class="flex space-x-4">
-                        <div class="text-center p-4 bg-orange-50 rounded-lg">
-                            <div class="text-3xl font-bold text-orange-500">8+</div>
-                            <div class="text-gray-600">Years Experience</div>
-                        </div>
-                        <div class="text-center p-4 bg-green-50 rounded-lg">
-                            <div class="text-3xl font-bold text-green-500">50+</div>
-                            <div class="text-gray-600">Juice Varieties</div>
-                        </div>
-                        <div class="text-center p-4 bg-yellow-50 rounded-lg">
-                            <div class="text-3xl font-bold text-yellow-500">10K+</div>
-                            <div class="text-gray-600">Happy Customers</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </section>
-    <!-- Testimonials Section -->
-    <section id="testimonials" class="py-16 bg-gray-50">
-        <div class="container mx-auto px-6">
-            <div class="text-center mb-16">
-                <h2 class="text-3xl font-bold text-gray-800">What Our Customers Say</h2>
-                <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
             </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <!-- Testimonial 1 -->
-                <div class="bg-white p-8 rounded-lg shadow-md">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
-                            <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Customer" class="w-full h-full object-cover">
-                        </div>
-                        <div>
-                            <h4 class="font-semibold">Jessica T.</h4>
-                            <div class="flex text-yellow-400">
-                                <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>
                     </div>
-                    <p class="text-gray-600 italic">
-                        "The Tropical Bliss juice is my absolute favorite! It's like a vacation in a bottle. I've been coming to JuicePop for over a year now and their quality never disappoints."
-                    </p>
-                </div>
-                <!-- Testimonial 2 -->
-                <div class="bg-white p-8 rounded-lg shadow-md">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
-                            <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Customer" class="w-full h-full object-cover">
-                        </div>
-                        <div>
-                            <h4 class="font-semibold">David R.</h4>
-                            <div class="flex text-yellow-400">
-                                <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>
                     </div>
-                    <p class="text-gray-600 italic">
-                        "As someone who's trying to eat healthier, JuicePop has been a game-changer. The Green Detox actually tastes good, which I never thought I'd say about a green juice!"
-                    </p>
-                </div>
-                <!-- Testimonial 3 -->
-                <div class="bg-white p-8 rounded-lg shadow-md">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
-                            <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer" class="w-full h-full object-cover">
-                        </div>
-                        <div>
-                            <h4 class="font-semibold">Sophia M.</h4>
-                            <div class="flex text-yellow-400">
-                                <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-half-alt"></i>
-                            </div>
                         </div>
                     </div>
-                    <p class="text-gray-600 italic">
-                        "I love that JuicePop uses seasonal fruits. Their summer watermelon juice is incredible! The staff is always friendly and knowledgeable about their products too."
-                    </p>
                 </div>
             </div>
         </div>
     </section>
     <!-- Order Section -->
     <section id="order" class="py-16 bg-orange-500 text-white">
         <div class="container mx-auto px-6">

         }
         .hero-gradient {
+            background: #f8f8f8;
         }
         .juice-card:hover {
             transition: all 0.3s ease;
         }
+        .benefit-tag {
+            transition: all 0.2s ease;
+        }
+        .benefit-tag:hover {
+            transform: translateY(-2px);
+        }
         .floating {
             animation: floating 3s ease-in-out infinite;
         }
 </head>
 <body class="smooth-scroll">
     <!-- Navigation -->
+    <nav class="bg-white sticky top-0 z-50">
+        <div class="container mx-auto px-6 py-4">
             <div class="flex items-center justify-between">
                 <div class="flex items-center">
+                    <a href="#" class="text-3xl font-bold text-gray-800">
+                        Juice<span class="text-green-400">Pop</span>
+                    </a>
                 </div>
                 <!-- Mobile menu button -->
     </nav>
     <!-- Hero Section -->
+    <section id="home" class="hero-gradient py-16">
+        <div class="container mx-auto px-6 text-center">
+            <h1 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">
+                Fresh. Simple. Delicious.
+            </h1>
+            <p class="text-gray-600 text-lg max-w-2xl mx-auto">
+                Cold-pressed juices & smoothies made with organic fruits and veggies.
+            </p>
+            <div class="mt-8">
+                <a href="#menu" class="px-6 py-3 bg-green-400 text-white rounded-full hover:bg-green-500 transition inline-block">
+                    See Our Menu
+                </a>
             </div>
         </div>
     </section>
     <!-- Features Section -->
     <section class="py-16 bg-white">
         <div class="container mx-auto px-6">
+            <div class="text-center mb-12">
+                <h2 class="text-3xl font-bold text-gray-800 mb-2">Real Ingredients. Real Good.</h2>
+                <p class="text-gray-600 max-w-2xl mx-auto">We keep it simple with organic, whole food ingredients.</p>
             </div>
+            <div class="grid grid-cols-2 md:grid-cols-4 gap-6 max-w-4xl mx-auto">
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-3">
+                        <i class="fas fa-leaf text-green-400 text-2xl"></i>
                     </div>
+                    <p class="text-gray-700 text-sm">Organic</p>
                 </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-3">
+                        <i class="fas fa-heart text-green-400 text-2xl"></i>
                     </div>
+                    <p class="text-gray-700 text-sm">No Added Sugar</p>
                 </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-3">
+                        <i class="fas fa-bolt text-green-400 text-2xl"></i>
+                    </div>
+                    <p class="text-gray-700 text-sm">Cold-Pressed</p>
+                </div>
+                <div class="text-center">
+                    <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-3">
+                        <i class="fas fa-recycle text-green-400 text-2xl"></i>
                     </div>
+                    <p class="text-gray-700 text-sm">Sustainable</p>
                 </div>
             </div>
         </div>
             <div class="text-center mb-16">
                 <h2 class="text-3xl font-bold text-gray-800">Our Refreshing Menu</h2>
                 <div class="w-20 h-1 bg-orange-500 mx-auto mt-4"></div>
+                <p class="text-gray-600 mt-4 max-w-2xl mx-auto">
+                    Explore our handcrafted juices with size options. Icons show key benefits:
+                    <span class="inline-flex items-center mx-1"><i class="fas fa-bolt text-yellow-500 mr-1"></i>Energy</span>
+                    <span class="inline-flex items-center mx-1"><i class="fas fa-shield-alt text-blue-500 mr-1"></i>Immunity</span>
+                    <span class="inline-flex items-center mx-1"><i class="fas fa-fire text-red-500 mr-1"></i>Anti-Inflammatory</span>
+                    <span class="inline-flex items-center mx-1"><i class="fas fa-star text-purple-500 mr-1"></i>Superfood</span>
+                </p>
             </div>
             <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                 <!-- Juice Card 1 -->
+                <div class="juice-card bg-white rounded-3xl overflow-hidden shadow-lg hover:shadow-2xl transition-all duration-300">
+                    <div class="h-48 overflow-hidden relative">
+                        <div class="absolute inset-0 bg-gradient-to-br from-yellow-200 to-orange-400 opacity-20"></div>
+                        <div class="absolute top-4 right-4 text-5xl text-orange-400 opacity-30">
+                            <i class="fas fa-pineapple"></i>
+                        </div>
                         <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
                              alt="Tropical Bliss"
+                             class="w-full h-full object-cover scale-110 hover:scale-100 transition-transform duration-500">
                     </div>
                     <div class="p-6">
                         <div class="flex justify-between items-center mb-2">
                             <h3 class="text-xl font-bold">Tropical Bliss</h3>
+                            <div class="flex space-x-1">
+                                <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">
+                                    <i class="fas fa-bolt mr-1"></i> Energy
+                                </span>
+                                <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">
+                                    <i class="fas fa-shield-alt mr-1"></i> Immunity
+                                </span>
+                            </div>
                         </div>
+                        <p class="text-gray-600 mb-3 text-sm">Pineapple, mango, orange, coconut water</p>
+                        <div class="mb-4">
+                            <div class="flex justify-between text-sm font-medium text-gray-700 mb-1">
+                                <span>Small (12oz)</span>
+                                <span>$4.99</span>
+                            </div>
+                            <div class="flex justify-between text-sm font-medium text-gray-700 mb-1">
+                                <span>Medium (16oz)</span>
+                                <span>$5.99</span>
+                            </div>
+                            <div class="flex justify-between text-sm font-medium text-gray-700 mb-3">
+                                <span>Large (24oz)</span>
+                                <span>$6.99</span>
+                            </div>
+                        </div>
+                        <button class="w-full py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition">
+                            <i class="fas fa-shopping-cart mr-2"></i>Add to Cart
+                        </button>
                     </div>
                 </div>
     </section>
     <!-- About Section -->
+    <section id="about" class="py-20 bg-white">
+        <div class="container mx-auto px-6 max-w-4xl text-center">
+            <h2 class="text-4xl font-bold text-gray-800 mb-8">Our Story</h2>
+            <div class="mb-12">
+                <img src="https://images.unsplash.com/photo-1603569283847-aa295f0d016a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80"
+                     alt="About JuicePop"
+                     class="rounded-full w-48 h-48 object-cover mx-auto mb-8 shadow-lg">
+                <p class="text-xl text-gray-600 mb-6 leading-relaxed">
+                    What started as a small farmers' market stand in 2015 has blossomed into JuicePop - your go-to for fresh,
+                    flavorful juices that make healthy living delicious.
+                </p>
+                <p class="text-xl text-gray-600 mb-6 leading-relaxed">
+                    Every bottle is cold-pressed to preserve nutrients and flavor, using only the freshest organic ingredients.
+                </p>
+                <p class="text-xl text-gray-600 leading-relaxed">
+                    We're proud to serve our community while keeping sustainability at our core - from compostable packaging
+                    to supporting local farmers.
+                </p>
             </div>
+            <div class="bg-green-50 rounded-2xl p-8 inline-block">
+                <h3 class="text-2xl font-semibold text-gray-800 mb-4">Why Choose JuicePop?</h3>
+                <div class="grid grid-cols-2 md:grid-cols-3 gap-6">
+                    <div class="text-center">
+                        <div class="text-green-500 text-3xl mb-2">
+                            <i class="fas fa-leaf"></i>
                         </div>
+                        <p class="text-gray-700">Organic Ingredients</p>
                     </div>
+                    <div class="text-center">
+                        <div class="text-green-500 text-3xl mb-2">
+                            <i class="fas fa-heart"></i>
                         </div>
+                        <p class="text-gray-700">No Added Sugar</p>
                     </div>
+                    <div class="text-center">
+                        <div class="text-green-500 text-3xl mb-2">
+                            <i class="fas fa-recycle"></i>
                         </div>
+                        <p class="text-gray-700">Eco-Friendly</p>
                     </div>
                 </div>
             </div>
         </div>
     </section>
     <!-- Order Section -->
     <section id="order" class="py-16 bg-orange-500 text-white">
         <div class="container mx-auto px-6">