Spaces:
Running
Create a clean, modern e-commerce website for a premium coffee brand called Solaro Coffee. The brand identity should feel warm, uplifting, and trustworthy. Use the following branding elements throughout the design:
Browse filesBrand Name: Solaro Coffee
Slogan: Awaken Your Day
Logo Concept: Minimalist, circular badge with a rising sun over a coffee cup (place as header logo placeholder).
Color Palette:
Coffee Brown (#4E342E) for headers & accents
Solar Gold (#FFB300) for CTAs & highlights
Earth Beige (#E5D3B3) for backgrounds
Soft Cream (#FAF7F2) for sections & cards
Sage Green (#8A9A77) as a natural secondary accent
Typography:
Headings: Playfair Display (elegant serif)
Body: Inter (clean sans-serif)
Website Structure:
Hero Section: Large header image of a steaming cup of coffee at sunrise. Overlay slogan “Awaken Your Day” with a bold call-to-action button: Shop Coffee.
About Section: Short story about Solaro Coffee’s mission (quality beans, daily ritual, warmth).
Product Section: Showcase coffee bags in card layout (3–4 products visible). Each card should have rounded corners, subtle shadows, product image centered, name, price, and “Add to Cart” button.
Bestseller Highlight: Dedicated section with 1–2 featured blends.
Sustainability Section: Emphasize eco-friendly packaging and ethically sourced beans, using sage green accents.
Newsletter Section: Minimal signup form with text: “Join the Solaro Ritual – fresh brews, weekly offers.”
Footer: Social links, contact info, small logo, newsletter signup, and copyright.
Overall Design Style: Minimalist, warm, with plenty of white space, rounded UI elements, and golden accents for CTAs. Layout should feel premium but approachable, appealing to coffee lovers 25–45."*
- README.md +9 -5
- index.html +23 -19
|
@@ -1,10 +1,14 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: undefined
|
| 3 |
+
colorFrom: gray
|
| 4 |
+
colorTo: yellow
|
| 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://deepsite.hf.co).
|
| 14 |
+
|
|
@@ -1,19 +1,23 @@
|
|
| 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>Solaro Coffee | Awaken Your Day</title>
|
| 7 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 8 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 9 |
+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
| 10 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 11 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 12 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 13 |
+
<style>
|
| 14 |
+
body {
|
| 15 |
+
font-family: 'Inter', sans-serif;
|
| 16 |
+
}
|
| 17 |
+
h1, h2, h3, h4 {
|
| 18 |
+
font-family: 'Playfair Display', serif;
|
| 19 |
+
}
|
| 20 |
+
.hero-gradient {
|
| 21 |
+
background: linear-gradient(135deg, rgba(
|
| 22 |
+
</head>
|
| 23 |
+
</html>
|