Spaces:
Running
You are a Senior Web Architect tasked with designing a premium, high-conversion Matcha website. The goal is to create a visually refined, modern experience that communicates purity, craftsmanship, and calm luxury. Follow the provided structural blueprint and reference image precisely, translating it into a polished, conversion-optimized layout with strong visual hierarchy, generous white space, and intentional motion. Every design decision should reinforce trust, quality, and desire while guiding users smoothly toward purchase.
Browse filesPage structure (top → bottom)
1) Header / Nav (on dark hero)
● Left: Wordmark/logo: “MATON”
● Center nav: Home, Products, Testimonial (simple text links)
● Right utilities: Sign In, My Cart
● Styling: small, clean, white text with lots of breathing space (no heavy borders).
2) Hero section (dark green)
● Layout: 3-column composition
○ Left column: small headline “Free Starter Kits” + short copy + tiny product thumbnails; also a Japanese text block.
○ Center: giant product photo (top-down bowl of matcha + whisk), acting as the hero “object”.
○ Right column: small product highlight (“Premium Matcha”) + short description + weight (“30gr”) + primary CTA button.
● Main headline in the center: “Best Matcha in Town” (large, elegant, editorial).
3) Starter kit feature section (light background)
● Large photo strip + product callouts.
● A big price anchor: “$25”.
● Multiple product items called out around the imagery (mug, whisk, powder) with short descriptions.
4) Benefits / Lifestyle section (“Experience Wellness with Every Sip”)
● Left: headline text block.
● Right: 2 image tiles with benefit labels:
○ “Anti Oxidant”
○ “Relax & Focus”
● Below: 3 small benefit columns with circular icons and short blurbs:
○ “Rich Flavor & Vibront Color”
○ “Authentic Japanese Matcha”
○ “Health & Sustainability”
5) Product collection section (“Discover the Word of Matcha”)
● Big headline.
● Then a product grid:
○ Left column: stacked mini product cards (grade / variant).
○ Right: a larger featured product card (“Ceremonial Grade Matcha”) with price and a big circular product image.
● Below: a row of smaller product cards (whisk, mug, tea pot).
● Mid-page CTA button: “Explore All Products” (pill button).
6) Essentials section (“Matcha Pairing Essentials”)
● Centered section title.
● Two product feature cards side-by-side:
○ Matcha Latte Mix
○ Matcha Cake Powder
● Each card has a big image and a price marker.
7) Footer / Closing CTA (dark green again)
● Big offer line: “Save up to 50% or more on matcha powder”
● CTA button (lime pill).
● Contact details + quick links + legal/footer nav.
● Decorative product photography on the right (pouring milk / matcha tools).
________________________________________
Layout & grid system
● Mostly full-width sections with content constrained to a centered container.
● Uses clean 2-column and 3-column grids repeatedly.
● Asymmetric composition in hero (text blocks left/right, hero object center).
● Lots of modular cards/tiles in the product sections (rounded corners, subtle shadows).
● Spacing style: big vertical padding between sections (premium editorial rhythm).
________________________________________
Color system (what it feels like in hex terms)
● Primary background (hero/footer): deep forest green / near-black green (something like #0B1A12 to #0F2A1C)
● Main page background: warm off-white / creamy paper (like #F4F1E8)
● Primary accent (CTAs, small highlights): neon-lime / matcha-lime (like #B9FF3D)
● Text:
○ On dark: white + slightly muted white for secondary
○ On light: near-black / charcoal for readability
● Supporting tones from photography: matcha green, wood/tan ceramics, soft shadows.
This palette is doing a classic contrast trick:
● Dark green = premium + focus
● Cream background = calm + editorial
● Lime accent = “buy / explore” attention magnet
________________________________________
Typography
● Headlines: a high-contrast serif (editorial style). You can tell by the thick/thin strokes and soft curves. It’s used for:
○ “Best Matcha in Town”
○ “Discover the Word of Matcha”
● Body + UI labels: a clean sans-serif (modern, neutral, likely Inter/Helvetica-style).
● Type hierarchy is very clear:
○ Huge serif H1/H2
○ Small sans labels for product names
○ Even smaller muted copy for descriptions
○ Big bold numerals for prices
________________________________________
Components & UI patterns
● Primary buttons: rounded pill, lime fill, dark text, minimal border.
● Cards: rounded rectangles with light shadows, lots of padding, minimal text.
● Product callouts: short label + 1–2 lines description + price/weight.
● Circular product imagery: bowls/cups shown top-down; circle motif repeats (icons + product bowls).
● Micro “dot/indicator” elements: small circular UI dots appear on some images like interactive hotspots.
________________________________________
Imagery & art direction
● Top-down product shots, soft natural lighting, strong shadows (feels like late afternoon sun).
● Props: bamboo whisk, ceramic mug, matcha bowl, powder.
● Photography carries the “brand personality” more than UI decoration.
________________________________________
Motion / interaction (implied by the design)
Even without seeing it animated, this layout strongly suggests:
● Smooth scroll + gentle fade/slide-ins for sections
● Hover states on product cards (slight lift/shadow)
● Button hover (slightly darker/lighter lime)
● Hotspot dots could reveal tooltips or quick product info
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Matcha Muse
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Matcha Muse 🍵
|
| 3 |
+
colorFrom: gray
|
| 4 |
+
colorTo: gray
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
|
@@ -1,19 +1,262 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
</
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Matcha Muse</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
| 11 |
+
</head>
|
| 12 |
+
<body class="bg-cream font-sans">
|
| 13 |
+
<!-- Header -->
|
| 14 |
+
<header class="bg-forest py-6 px-4 md:px-8">
|
| 15 |
+
<div class="container mx-auto flex justify-between items-center">
|
| 16 |
+
<div class="text-white text-2xl font-serif">MATON</div>
|
| 17 |
+
<nav class="hidden md:flex space-x-8">
|
| 18 |
+
<a href="#" class="text-white text-sm hover:text-lime">Home</a>
|
| 19 |
+
<a href="#" class="text-white text-sm hover:text-lime">Products</a>
|
| 20 |
+
<a href="#" class="text-white text-sm hover:text-lime">Testimonial</a>
|
| 21 |
+
</nav>
|
| 22 |
+
<div class="flex items-center space-x-4">
|
| 23 |
+
<a href="#" class="text-white text-sm hover:text-lime">Sign In</a>
|
| 24 |
+
<a href="#" class="text-white">
|
| 25 |
+
<i data-feather="shopping-cart" class="w-5 h-5"></i>
|
| 26 |
+
</a>
|
| 27 |
+
</div>
|
| 28 |
+
</div>
|
| 29 |
+
</header>
|
| 30 |
+
|
| 31 |
+
<!-- Hero Section -->
|
| 32 |
+
<section class="bg-forest py-16 px-4">
|
| 33 |
+
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
|
| 34 |
+
<!-- Left Column -->
|
| 35 |
+
<div class="text-white">
|
| 36 |
+
<h3 class="text-lime text-sm uppercase tracking-wider mb-2">Free Starter Kits</h3>
|
| 37 |
+
<p class="text-sm mb-4">Get a taste of premium matcha with our curated starter kit.</p>
|
| 38 |
+
<div class="flex space-x-2 mb-4">
|
| 39 |
+
<div class="w-10 h-10 rounded-full bg-cream"></div>
|
| 40 |
+
<div class="w-10 h-10 rounded-full bg-cream"></div>
|
| 41 |
+
<div class="w-10 h-10 rounded-full bg-cream"></div>
|
| 42 |
+
</div>
|
| 43 |
+
<p class="text-xs italic">和風の美しさと伝統</p>
|
| 44 |
+
</div>
|
| 45 |
+
|
| 46 |
+
<!-- Center Column -->
|
| 47 |
+
<div class="relative">
|
| 48 |
+
<h1 class="text-4xl md:text-5xl text-white font-serif text-center mb-8">Best Matcha in Town</h1>
|
| 49 |
+
<div class="relative">
|
| 50 |
+
<img src="http://static.photos/food/640x360/123" alt="Matcha Bowl" class="w-full rounded-full border-8 border-cream">
|
| 51 |
+
<div class="absolute top-1/4 left-1/4 w-4 h-4 bg-lime rounded-full"></div>
|
| 52 |
+
<div class="absolute bottom-1/3 right-1/4 w-4 h-4 bg-lime rounded-full"></div>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
|
| 56 |
+
<!-- Right Column -->
|
| 57 |
+
<div class="text-white text-center md:text-right">
|
| 58 |
+
<h3 class="text-lime text-sm uppercase tracking-wider mb-2">Premium Matcha</h3>
|
| 59 |
+
<p class="text-sm mb-4">Crafted from shade-grown tea leaves for a rich umami flavor.</p>
|
| 60 |
+
<p class="text-xs mb-6">30gr</p>
|
| 61 |
+
<button class="bg-lime text-forest px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition">Add to Cart</button>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
</section>
|
| 65 |
+
|
| 66 |
+
<!-- Starter Kit Feature -->
|
| 67 |
+
<section class="py-16 px-4 bg-cream">
|
| 68 |
+
<div class="container mx-auto">
|
| 69 |
+
<div class="relative mb-12">
|
| 70 |
+
<img src="http://static.photos/food/1200x630/456" alt="Starter Kit" class="w-full rounded-lg">
|
| 71 |
+
<div class="absolute top-4 left-4 bg-white p-4 rounded-lg shadow-md">
|
| 72 |
+
<h3 class="font-serif text-xl mb-2">Starter Kit</h3>
|
| 73 |
+
<p class="text-3xl font-bold text-forest">$25</p>
|
| 74 |
+
</div>
|
| 75 |
+
<div class="absolute bottom-4 left-4 bg-white p-3 rounded-lg shadow-md">
|
| 76 |
+
<h4 class="font-medium">Ceramic Mug</h4>
|
| 77 |
+
<p class="text-sm text-gray-600">Traditional matcha cup</p>
|
| 78 |
+
</div>
|
| 79 |
+
<div class="absolute top-1/3 right-4 bg-white p-3 rounded-lg shadow-md">
|
| 80 |
+
<h4 class="font-medium">Bamboo Whisk</h4>
|
| 81 |
+
<p class="text-sm text-gray-600">Authentic chasen</p>
|
| 82 |
+
</div>
|
| 83 |
+
</div>
|
| 84 |
+
</div>
|
| 85 |
+
</section>
|
| 86 |
+
|
| 87 |
+
<!-- Benefits Section -->
|
| 88 |
+
<section class="py-16 px-4 bg-cream">
|
| 89 |
+
<div class="container mx-auto">
|
| 90 |
+
<h2 class="text-3xl font-serif text-center mb-12">Experience Wellness with Every Sip</h2>
|
| 91 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
| 92 |
+
<div class="relative">
|
| 93 |
+
<img src="http://static.photos/health/640x360/789" alt="Antioxidant" class="w-full rounded-lg">
|
| 94 |
+
<div class="absolute bottom-4 left-4 bg-white px-4 py-2 rounded-full">
|
| 95 |
+
<span class="font-medium">Antioxidant</span>
|
| 96 |
+
</div>
|
| 97 |
+
</div>
|
| 98 |
+
<div class="relative">
|
| 99 |
+
<img src="http://static.photos/wellness/640x360/101" alt="Relax & Focus" class="w-full rounded-lg">
|
| 100 |
+
<div class="absolute bottom-4 left-4 bg-white px-4 py-2 rounded-full">
|
| 101 |
+
<span class="font-medium">Relax & Focus</span>
|
| 102 |
+
</div>
|
| 103 |
+
</div>
|
| 104 |
+
</div>
|
| 105 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
| 106 |
+
<div>
|
| 107 |
+
<div class="w-16 h-16 rounded-full bg-lime mx-auto mb-4 flex items-center justify-center">
|
| 108 |
+
<i data-feather="coffee" class="text-forest"></i>
|
| 109 |
+
</div>
|
| 110 |
+
<h3 class="font-medium mb-2">Rich Flavor & Vibrant Color</h3>
|
| 111 |
+
<p class="text-gray-600 text-sm">Bright green hue and smooth taste</p>
|
| 112 |
+
</div>
|
| 113 |
+
<div>
|
| 114 |
+
<div class="w-16 h-16 rounded-full bg-lime mx-auto mb-4 flex items-center justify-center">
|
| 115 |
+
<i data-feather="globe" class="text-forest"></i>
|
| 116 |
+
</div>
|
| 117 |
+
<h3 class="font-medium mb-2">Authentic Japanese Matcha</h3>
|
| 118 |
+
<p class="text-gray-600 text-sm">Sourced directly from Uji, Japan</p>
|
| 119 |
+
</div>
|
| 120 |
+
<div>
|
| 121 |
+
<div class="w-16 h-16 rounded-full bg-lime mx-auto mb-4 flex items-center justify-center">
|
| 122 |
+
<i data-feather="heart" class="text-forest"></i>
|
| 123 |
+
</div>
|
| 124 |
+
<h3 class="font-medium mb-2">Health & Sustainability</h3>
|
| 125 |
+
<p class="text-gray-600 text-sm">Organic and eco-friendly practices</p>
|
| 126 |
+
</div>
|
| 127 |
+
</div>
|
| 128 |
+
</div>
|
| 129 |
+
</section>
|
| 130 |
+
|
| 131 |
+
<!-- Product Collection -->
|
| 132 |
+
<section class="py-16 px-4 bg-cream">
|
| 133 |
+
<div class="container mx-auto">
|
| 134 |
+
<h2 class="text-3xl font-serif text-center mb-12">Discover the World of Matcha</h2>
|
| 135 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
|
| 136 |
+
<div class="space-y-6">
|
| 137 |
+
<div class="bg-white p-6 rounded-lg shadow-sm">
|
| 138 |
+
<h3 class="font-medium mb-2">Culinary Grade</h3>
|
| 139 |
+
<p class="text-sm text-gray-600 mb-4">Perfect for baking and cooking</p>
|
| 140 |
+
<p class="font-bold">$18</p>
|
| 141 |
+
</div>
|
| 142 |
+
<div class="bg-white p-6 rounded-lg shadow-sm">
|
| 143 |
+
<h3 class="font-medium mb-2">Premium Culinary</h3>
|
| 144 |
+
<p class="text-sm text-gray-600 mb-4">Enhanced flavor profile</p>
|
| 145 |
+
<p class="font-bold">$24</p>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
<div class="bg-white p-8 rounded-lg shadow-sm flex flex-col items-center text-center">
|
| 149 |
+
<img src="http://static.photos/food/320x240/234" alt="Ceremonial Grade" class="w-48 h-48 rounded-full mb-6">
|
| 150 |
+
<h3 class="text-xl font-medium mb-2">Ceremonial Grade Matcha</h3>
|
| 151 |
+
<p class="text-gray-600 mb-4">Highest quality for traditional tea</p>
|
| 152 |
+
<p class="text-2xl font-bold mb-6">$32</p>
|
| 153 |
+
<button class="bg-lime text-forest px-6 py-3 rounded-full font-medium hover:bg-opacity-90 transition">Add to Cart</button>
|
| 154 |
+
</div>
|
| 155 |
+
</div>
|
| 156 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
|
| 157 |
+
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
|
| 158 |
+
<img src="http://static.photos/food/200x200/345" alt="Whisk" class="w-24 h-24 mx-auto mb-4">
|
| 159 |
+
<h3 class="font-medium mb-2">Bamboo Whisk</h3>
|
| 160 |
+
<p class="text-2xl font-bold">$12</p>
|
| 161 |
+
</div>
|
| 162 |
+
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
|
| 163 |
+
<img src="http://static.photos/food/200x200/456" alt="Mug" class="w-24 h-24 mx-auto mb-4">
|
| 164 |
+
<h3 class="font-medium mb-2">Ceramic Mug</h3>
|
| 165 |
+
<p class="text-2xl font-bold">$18</p>
|
| 166 |
+
</div>
|
| 167 |
+
<div class="bg-white p-6 rounded-lg shadow-sm text-center">
|
| 168 |
+
<img src="http://static.photos/food/200x200/567" alt="Teapot" class="w-24 h-24 mx-auto mb-4">
|
| 169 |
+
<h3 class="font-medium mb-2">Glass Teapot</h3>
|
| 170 |
+
<p class="text-2xl font-bold">$28</p>
|
| 171 |
+
</div>
|
| 172 |
+
</div>
|
| 173 |
+
<div class="text-center">
|
| 174 |
+
<button class="bg-forest text-white px-8 py-4 rounded-full font-medium hover:bg-opacity-90 transition">Explore All Products</button>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</section>
|
| 178 |
+
|
| 179 |
+
<!-- Essentials Section -->
|
| 180 |
+
<section class="py-16 px-4 bg-cream">
|
| 181 |
+
<div class="container mx-auto">
|
| 182 |
+
<h2 class="text-3xl font-serif text-center mb-12">Matcha Pairing Essentials</h2>
|
| 183 |
+
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
| 184 |
+
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
| 185 |
+
<img src="http://static.photos/food/640x360/678" alt="Latte Mix" class="w-full">
|
| 186 |
+
<div class="p-6">
|
| 187 |
+
<h3 class="text-xl font-medium mb-2">Matcha Latte Mix</h3>
|
| 188 |
+
<p class="text-gray-600 mb-4">Creamy blend for perfect lattes</p>
|
| 189 |
+
<p class="text-2xl font-bold">$16</p>
|
| 190 |
+
</div>
|
| 191 |
+
</div>
|
| 192 |
+
<div class="bg-white rounded-lg shadow-sm overflow-hidden">
|
| 193 |
+
<img src="http://static.photos/food/640x360/789" alt="Cake Powder" class="w-full">
|
| 194 |
+
<div class="p-6">
|
| 195 |
+
<h3 class="text-xl font-medium mb-2">Matcha Cake Powder</h3>
|
| 196 |
+
<p class="text-gray-600 mb-4">Finely milled for baking</p>
|
| 197 |
+
<p class="text-2xl font-bold">$20</p>
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
</div>
|
| 201 |
+
</div>
|
| 202 |
+
</section>
|
| 203 |
+
|
| 204 |
+
<!-- Footer CTA -->
|
| 205 |
+
<footer class="bg-forest py-16 px-4">
|
| 206 |
+
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
|
| 207 |
+
<div>
|
| 208 |
+
<h2 class="text-3xl text-white font-serif mb-6">Save up to 50% or more on matcha powder</h2>
|
| 209 |
+
<button class="bg-lime text-forest px-8 py-4 rounded-full font-medium hover:bg-opacity-90 transition">Shop Now</button>
|
| 210 |
+
</div>
|
| 211 |
+
<div class="relative">
|
| 212 |
+
<img src="http://static.photos/food/640x360/890" alt="Matcha Pour" class="w-full rounded-lg">
|
| 213 |
+
<div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full border-4 border-lime"></div>
|
| 214 |
+
</div>
|
| 215 |
+
</div>
|
| 216 |
+
<div class="container mx-auto mt-16 pt-8 border-t border-gray-700">
|
| 217 |
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
| 218 |
+
<div>
|
| 219 |
+
<h3 class="text-white text-lg mb-4">Contact</h3>
|
| 220 |
+
<p class="text-gray-300 text-sm">hello@maton.com</p>
|
| 221 |
+
<p class="text-gray-300 text-sm">+1 (555) 123-4567</p>
|
| 222 |
+
</div>
|
| 223 |
+
<div>
|
| 224 |
+
<h3 class="text-white text-lg mb-4">Quick Links</h3>
|
| 225 |
+
<ul class="space-y-2">
|
| 226 |
+
<li><a href="#" class="text-gray-300 text-sm hover:text-lime">About Us</a></li>
|
| 227 |
+
<li><a href="#" class="text-gray-300 text-sm hover:text-lime">Shipping</a></li>
|
| 228 |
+
<li><a href="#" class="text-gray-300 text-sm hover:text-lime">Returns</a></li>
|
| 229 |
+
</ul>
|
| 230 |
+
</div>
|
| 231 |
+
<div>
|
| 232 |
+
<h3 class="text-white text-lg mb-4">Legal</h3>
|
| 233 |
+
<ul class="space-y-2">
|
| 234 |
+
<li><a href="#" class="text-gray-300 text-sm hover:text-lime">Privacy Policy</a></li>
|
| 235 |
+
<li><a href="#" class="text-gray-300 text-sm hover:text-lime">Terms of Service</a></li>
|
| 236 |
+
</ul>
|
| 237 |
+
</div>
|
| 238 |
+
<div>
|
| 239 |
+
<h3 class="text-white text-lg mb-4">Follow Us</h3>
|
| 240 |
+
<div class="flex space-x-4">
|
| 241 |
+
<a href="#" class="text-gray-300 hover:text-lime">
|
| 242 |
+
<i data-feather="instagram" class="w-5 h-5"></i>
|
| 243 |
+
</a>
|
| 244 |
+
<a href="#" class="text-gray-300 hover:text-lime">
|
| 245 |
+
<i data-feather="twitter" class="w-5 h-5"></i>
|
| 246 |
+
</a>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
</div>
|
| 250 |
+
<div class="mt-12 text-center text-gray-400 text-sm">
|
| 251 |
+
<p>© 2023 MATON. All rights reserved.</p>
|
| 252 |
+
</div>
|
| 253 |
+
</div>
|
| 254 |
+
</footer>
|
| 255 |
+
|
| 256 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 257 |
+
<script>
|
| 258 |
+
feather.replace();
|
| 259 |
+
</script>
|
| 260 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 261 |
+
</body>
|
| 262 |
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
|
|
|
|
| 1 |
+
// No additional JavaScript needed for this static page
|
|
@@ -1,28 +1,53 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
body {
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
margin-top: 0;
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
font-size: 15px;
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.
|
| 19 |
-
|
| 20 |
-
margin: 0 auto;
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
.
|
| 27 |
-
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@tailwind base;
|
| 2 |
+
@tailwind components;
|
| 3 |
+
@tailwind utilities;
|
| 4 |
+
|
| 5 |
+
:root {
|
| 6 |
+
--forest: #0B1A12;
|
| 7 |
+
--forest-light: #0F2A1C;
|
| 8 |
+
--cream: #F4F1E8;
|
| 9 |
+
--lime: #B9FF3D;
|
| 10 |
+
}
|
| 11 |
+
|
| 12 |
body {
|
| 13 |
+
font-family: 'Inter', sans-serif;
|
| 14 |
+
background-color: var(--cream);
|
| 15 |
+
color: var(--forest-light);
|
| 16 |
+
}
|
| 17 |
+
|
| 18 |
+
h1, h2, h3, h4 {
|
| 19 |
+
font-family: 'Playfair Display', serif;
|
| 20 |
+
}
|
| 21 |
+
|
| 22 |
+
.bg-forest {
|
| 23 |
+
background-color: var(--forest);
|
| 24 |
+
}
|
| 25 |
+
|
| 26 |
+
.bg-forest-light {
|
| 27 |
+
background-color: var(--forest-light);
|
| 28 |
}
|
| 29 |
|
| 30 |
+
.bg-cream {
|
| 31 |
+
background-color: var(--cream);
|
|
|
|
| 32 |
}
|
| 33 |
|
| 34 |
+
.bg-lime {
|
| 35 |
+
background-color: var(--lime);
|
|
|
|
|
|
|
|
|
|
| 36 |
}
|
| 37 |
|
| 38 |
+
.text-forest {
|
| 39 |
+
color: var(--forest);
|
|
|
|
|
|
|
|
|
|
|
|
|
| 40 |
}
|
| 41 |
|
| 42 |
+
.text-lime {
|
| 43 |
+
color: var(--lime);
|
| 44 |
}
|
| 45 |
+
|
| 46 |
+
.container {
|
| 47 |
+
max-width: 1200px;
|
| 48 |
+
}
|
| 49 |
+
|
| 50 |
+
.feather {
|
| 51 |
+
width: 1em;
|
| 52 |
+
height: 1em;
|
| 53 |
+
}
|