初始化项目，由ModelHub XC社区提供模型
Model: smirki/UIGEN-FX-4B-STG-Modal-08-28 Source: Original Platform
This commit is contained in:
ModelHub XC
403
inference_samples/step_0/cattle_ranch.txt
Normal file
403
inference_samples/step_0/cattle_ranch.txt
Normal file
@@ -0,0 +1,403 @@
|
||||
Prompt: make a website for a cattle ranch
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.847881
|
||||
============================================================
|
||||
|
||||
Absolutely! Here's a complete, professional **website concept and structure** for a cattle ranch — designed to be functional, trustworthy, and appealing to farmers, investors, buyers, and local communities.
|
||||
|
||||
---
|
||||
|
||||
# 🌿 Welcome to **Sunset Ridge Ranch**
|
||||
|
||||
*Where Nature Meets Tradition – Cattle Grazing, Sustainable Farming & Community Growth*
|
||||
|
||||
---
|
||||
|
||||
## ✅ Website Structure (HTML/CSS/JS Framework)
|
||||
|
||||
We’ll build this as a responsive, mobile-friendly site using modern web standards. Below is the full content layout with suggested design elements.
|
||||
|
||||
---
|
||||
|
||||
### 📝 1. Homepage (`index.html`)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Sunset Ridge Ranch | Premium Cattle & Sustainable Ranching</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* Global Styles */
|
||||
:root {
|
||||
--primary: #4CAF50;
|
||||
--secondary: #8BC34A;
|
||||
--dark: #1B4D3B;
|
||||
--light: #F9F9F9;
|
||||
--gray: #E0E0E0;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: 'Lato', sans-serif;
|
||||
background-color: var(--light);
|
||||
color: #333;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: 'Playfair Display', serif;
|
||||
color: var(--dark);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
section {
|
||||
padding: 60px 0;
|
||||
}
|
||||
|
||||
header {
|
||||
background-image: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.7)), url('images/ranch-bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
text-align: center;
|
||||
color: var(--dark);
|
||||
padding: 100px 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.2rem;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
nav {
|
||||
background-color: white;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
nav ul li {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
nav ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--dark);
|
||||
font-weight: 500;
|
||||
font-size: 1.1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
nav ul li a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.hero-button {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
border-radius: 50px;
|
||||
padding: 15px 30px;
|
||||
font-size: 1.1rem;
|
||||
font-weight: bold;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.hero-button:hover {
|
||||
background-color: var(--secondary);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 2rem;
|
||||
color: var(--dark);
|
||||
}
|
||||
|
||||
.card-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
margin-top: 0;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: var(--dark);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 40px 0 20px;
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: white;
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
header h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
nav ul {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Navigation -->
|
||||
<nav>
|
||||
<div class="container">
|
||||
<ul>
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#about">About Us</a></li>
|
||||
<li><a href="#cattle">Cattle & Breeds</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header / Hero Section -->
|
||||
<header id="home">
|
||||
<div class="container">
|
||||
<h1>Sunset Ridge Ranch</h1>
|
||||
<p>Family-owned since 1932. Sustainably managed pasture-raised cattle. Healthy animals. Responsible land stewardship.</p>
|
||||
<a href="#contact" class="hero-button">Schedule a Visit</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" style="background:#f0f8e8;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">About Our Ranch</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>Our Story</h3>
|
||||
<p>Founded in 1932 by James Whitaker, Sunset Ridge Ranch has been raising healthy, grass-fed beef using traditional methods passed down through generations.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Land Stewardship</h3>
|
||||
<p>We manage over 12,000 acres of native grasslands, restoring ecosystems through rotational grazing and native plant reseeding.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Community Focus</h3>
|
||||
<p>Every year, we host youth education programs, farm tours, and support local schools and food cooperatives.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cattle Section -->
|
||||
<section id="cattle" style="background:#e8f5e9;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Our Cattle Herd</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>Brahma Bulls</h3>
|
||||
<p>Strong, resilient, excellent milkers. Used for breeding and cross-breeding.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Hereford Steers</h3>
|
||||
<p>Fat-tailed, well-suited for winter feeding and high-quality meat production.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Angus Heifers</h3>
|
||||
<p>Grass-fed, hormone-free, raised with natural forage. Ideal for premium beef markets.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services -->
|
||||
<section id="services" style="background:#f3e5e5;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Our Services</h2>
|
||||
<div class="card-grid">
|
||||
<div class="card">
|
||||
<h3>Cattle Sales</h3>
|
||||
<p>Premium quality stock available for purchase or auction. Contact us to schedule a viewing.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Consultation</h3>
|
||||
<p>Need help managing your herd? We offer expert advice on nutrition, health, and pasture rotation.</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3>Beef Processing Partnerships</h3>
|
||||
<p>Partner with our certified processors to deliver high-quality, traceable beef products.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" style="background:#d4f1d4;">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Get In Touch</h2>
|
||||
<form action="#" method="POST" style="max-width: 600px; margin: 0 auto;">
|
||||
<div style="margin-bottom: 20px;">
|
||||
<label>Name:</label>
|
||||
<input type="text" placeholder="Your Name" required style="padding:12px; width:100%; border:1px solid #ccc; border-radius:8px; font-size:16px;" />
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<label>Email:</label>
|
||||
<input type="email" placeholder="your@email.com" required style="padding:12px; width:100%; border:1px solid #ccc; border-radius:8px; font-size:16px;" />
|
||||
</div>
|
||||
<div style="margin-bottom: 20px;">
|
||||
<label>Message:</label>
|
||||
<textarea rows="5" placeholder="Tell us about your interest..." required style="padding:12px; width:100%; border:1px solid #ccc; border-radius:8px; font-size:16px;"></textarea>
|
||||
</div>
|
||||
<button type="submit" class="hero-button">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<p>© 2024 Sunset Ridge Ranch. All Rights Reserved.</p>
|
||||
<div class="footer-links">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Use</a>
|
||||
<a href="#">Farm Tour Schedule</a>
|
||||
<a href="#">Sustainability Report</a>
|
||||
</div>
|
||||
<p>Contact: info@sunsetridgeranch.com | (555) 123-4567</p>
|
||||
<p>📍 1234 West Range Road, Colorado, USA</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Features & Best Practices
|
||||
|
||||
| Feature | Why It Matters |
|
||||
|---------------------------|---------------|
|
||||
| Responsive Design | Works on phones, tablets, desktops |
|
||||
| Mobile-first Layout | Most users access via phone |
|
||||
| Clean Typography | Readable and professional |
|
||||
| Image Background (CSS) | Subtle, nature-themed visuals without heavy load |
|
||||
| Clear CTAs | "Schedule a Visit", "Contact Us" |
|
||||
| Trust Elements | "Family-Owned", "Sustainable", "Traceable" |
|
||||
| Sections for SEO | Each section can be optimized for Google |
|
||||
|
||||
---
|
||||
|
||||
## 💡 Recommended Additions (Later)
|
||||
|
||||
1. **Gallery Page**: High-res photos of cattle, pastures, family members.
|
||||
2. **Blog Section**: Articles like “Rotational Grazing Explained” or “The Benefits of Grass-Fed Beef”
|
||||
3. **Investor Page**: For those interested in buying land or equity.
|
||||
4. **Live Feed Dashboard (Optional)**: Real-time stats on animal count, feed usage, etc.
|
||||
5. **Booking System**: For farm tours or private viewings.
|
||||
|
||||
---
|
||||
|
||||
## 🖼️ Visual Assets You Should Include
|
||||
|
||||
- Background images: Rolling hills, grazing cattle, sunrise over range
|
||||
- Icons: Cattle, sheep, watering trough, map pin, calendar
|
||||
- Brand Colors:
|
||||
- Green (#4CAF50): Natural, growth, sustainability
|
||||
- Earth Tones: Brown, tan, sage green
|
||||
|
||||
---
|
||||
|
||||
## 🚀 How to Deploy This Site
|
||||
|
||||
1. Save as `index.html`
|
||||
2. Host it on any free hosting service:
|
||||
- [GitHub Pages](https://pages.github.com/)
|
||||
- [Netlify](https://www.netlify.com/)
|
||||
- [Vercel](https://vercel.com/)
|
||||
3. Upload files in `/public` folder or use domain (e.g., `sunsetridgeranch.com`)
|
||||
|
||||
---
|
||||
|
||||
## Example Domain Suggestions
|
||||
|
||||
- sunsetridgeranch.com
|
||||
- sunrideranch.com
|
||||
- westcoastcattle.com
|
||||
- verdantgrazewest.com
|
||||
|
||||
*(Choose one that sounds authentic and memorable)*
|
||||
|
||||
---
|
||||
|
||||
Would you like me to:
|
||||
|
||||
✅ Generate a full version with actual images and assets (can be added later)?
|
||||
✅ Create a WordPress version (easy to manage)?
|
||||
✅ Build a brochure or pitch deck to go along with the website?
|
||||
|
||||
Let me know — I’d love to help you launch your ranch online successfully!
|
||||
|
||||
🌾 *Success starts with visibility.* Let’s grow together. 🐄💚
|
||||
979
inference_samples/step_0/coffee_shop.txt
Normal file
979
inference_samples/step_0/coffee_shop.txt
Normal file
@@ -0,0 +1,979 @@
|
||||
Prompt: make the best coffee shop website you can in html css js
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.844959
|
||||
============================================================
|
||||
|
||||
Absolutely! Here's a **complete, modern, responsive, and interactive coffee shop website** built with **HTML, CSS, and JavaScript (vanilla)** — no frameworks or external libraries. It includes:
|
||||
|
||||
- A sleek, minimalist design inspired by premium coffee shops
|
||||
- Responsive layout (mobile-friendly)
|
||||
- Interactive features:
|
||||
- Menu toggle
|
||||
- Cart functionality (add/remove items, calculate total)
|
||||
- Dark/light mode switch
|
||||
- Smooth animations & transitions
|
||||
- Smooth scroll & hover effects
|
||||
- Local storage for cart persistence
|
||||
|
||||
---
|
||||
|
||||
## ✅ How to Use This:
|
||||
1. Copy all code below into a single file named `index.html`
|
||||
2. Save it locally and open in your browser.
|
||||
3. Optionally add a real image path for better visuals.
|
||||
|
||||
---
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Bean Haven | Premium Coffee Experience</title>
|
||||
<style>
|
||||
/* Reset & Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, sans-serif;
|
||||
background-color: #f5e6d3;
|
||||
color: #2c2c2c;
|
||||
line-height: 1.7;
|
||||
transition: background-color 0.4s ease, color 0.4s ease;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
:root {
|
||||
--primary: #9b5e2e; /* Warm amber */
|
||||
--accent: #d4a017;
|
||||
--text-light: #2c2c2c;
|
||||
--bg-light: #f5e6d3;
|
||||
--bg-dark: #1a1a1a;
|
||||
--text-dark: #ffffff;
|
||||
--card-bg: #fff;
|
||||
--shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
|
||||
--border-radius: 12px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--primary: #d4a017;
|
||||
--accent: #b88a38;
|
||||
--text-light: #ffffff;
|
||||
--bg-light: #1a1a1a;
|
||||
--bg-dark: #1a1c1e;
|
||||
--text-dark: #ffffff;
|
||||
--card-bg: #2d2d2d;
|
||||
--shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
outline: none;
|
||||
font-size: 1rem;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: var(--border-radius);
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--primary);
|
||||
border: 2px solid var(--primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Header & Navigation */
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1.25rem 5%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 900;
|
||||
color: var(--primary);
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-links a {
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
color: var(--text-light);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 0;
|
||||
width: 0;
|
||||
height: 2px;
|
||||
background-color: var(--primary);
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
.nav-links a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.theme-toggle:hover {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #f5e6d3 0%, #d4a017 100%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0; left: 0; right: 0; bottom: 0;
|
||||
background-image: url('https://images.unsplash.com/photo-1564339387419-780d261933a4?ixlib=rb-4.0.3&auto=format&fit=crop&w=1950&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
opacity: 0.1;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 800px;
|
||||
padding: 2rem;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3.5rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
color: var(--text-light);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.btn-large {
|
||||
font-size: 1.1rem;
|
||||
padding: 1rem 2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
padding: 5rem 5% 3rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
font-size: 2.2rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 2rem;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
background: var(--card-bg);
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--shadow);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.feature-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3rem;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-card h3 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
/* Menu Section */
|
||||
.menu-section {
|
||||
padding: 5rem 5% 3rem;
|
||||
background-color: white;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-header {
|
||||
text-align: center;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.menu-header h2 {
|
||||
font-size: 2.5rem;
|
||||
color: var(--primary);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.menu-header p {
|
||||
color: #555;
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.menu-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
padding: 0.8rem 1.5rem;
|
||||
background: none;
|
||||
border: 2px solid var(--primary);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
color: var(--primary);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-btn.active,
|
||||
.tab-btn:hover {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.menu-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
background: var(--card-bg);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 1.5rem;
|
||||
box-shadow: var(--shadow);
|
||||
transition: all 0.3s ease;
|
||||
border: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.menu-item:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.menu-item h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--primary);
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.menu-item p {
|
||||
color: #666;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-weight: bold;
|
||||
color: var(--accent);
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.btn-add {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-radius: var(--border-radius);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add:hover {
|
||||
background-color: #8a4c1d;
|
||||
transform: scale(1.03);
|
||||
}
|
||||
|
||||
/* Cart Section */
|
||||
.cart-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -400px;
|
||||
width: 400px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
|
||||
transition: right 0.4s ease;
|
||||
z-index: 999;
|
||||
padding: 2rem;
|
||||
border-radius: var(--border-radius);
|
||||
overflow-y: auto;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.cart-section.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.cart-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.cart-header h3 {
|
||||
font-size: 1.5rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.close-cart {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.close-cart:hover {
|
||||
color: #8a4c1d;
|
||||
}
|
||||
|
||||
.cart-list {
|
||||
max-height: calc(100vh - 100px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.cart-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 0;
|
||||
border-bottom: 1px solid #eee;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.cart-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-weight: 600;
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.item-price {
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.remove-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
color: #d44;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.remove-btn:hover {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.total-row {
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid #eee;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.checkout-btn {
|
||||
background-color: var(--primary);
|
||||
color: white;
|
||||
padding: 1rem 2rem;
|
||||
border: none;
|
||||
border-radius: var(--border-radius);
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.checkout-btn:hover {
|
||||
background-color: #8a4c1d;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background-color: var(--bg-dark);
|
||||
color: var(--text-dark);
|
||||
padding: 3rem 5% 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.social-icons {
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
margin: 0 1rem;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.social-icons a:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.feature-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.menu-tabs {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tab-btn {
|
||||
width: 150px;
|
||||
padding: 0.7rem 1rem;
|
||||
}
|
||||
|
||||
.cart-section {
|
||||
right: -300px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.menu-cards {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in-up {
|
||||
animation: fadeInUp 0.8s ease forwards;
|
||||
}
|
||||
|
||||
.slide-in-right {
|
||||
animation: slideInRight 0.6s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.animated {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
transition: opacity 0.6s, transform 0.6s;
|
||||
}
|
||||
|
||||
.animated.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Scroll to top */
|
||||
.scroll-to-top {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.scroll-to-top.show {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.scroll-to-top:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Theme Toggle Button -->
|
||||
<button class="theme-toggle" id="theme-toggle">🌙</button>
|
||||
|
||||
<!-- Header Nav -->
|
||||
<header>
|
||||
<nav>
|
||||
<div class="logo">Bean Haven</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#menu">Menu</a></li>
|
||||
<li><a href="#about">About</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
<button class="btn-secondary" id="open-cart">🛒</button>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Welcome to Bean Haven</h1>
|
||||
<p>Handcrafted espresso, organic beans, and a warm atmosphere where every cup tells a story.</p>
|
||||
<button class="btn-large btn-primary" onclick="scrollToSection('menu')">Explore Our Menu</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features" id="about">
|
||||
<h2 class="section-title">Why Choose Us?</h2>
|
||||
<div class="feature-grid">
|
||||
<div class="feature-card fade-in-up">
|
||||
<div class="feature-icon">☕</div>
|
||||
<h3>Craftsmanship</h3>
|
||||
<p>We roast our beans in small batches using traditional methods for rich flavor and aroma.</p>
|
||||
</div>
|
||||
<div class="feature-card fade-in-up">
|
||||
<div class="feature-icon">🌱</div>
|
||||
<h3>Sustainable Beans</h3>
|
||||
<p>All our beans are ethically sourced from sustainable farms around the world.</p>
|
||||
</div>
|
||||
<div class="feature-card fade-in-up">
|
||||
<div class="feature-icon">🔥</div>
|
||||
<h3>Expert Baristas</h3>
|
||||
<p>Our baristas are trained in precision pour-over and latte art techniques.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Menu Section -->
|
||||
<section class="menu-section" id="menu">
|
||||
<div class="menu-container">
|
||||
<div class="menu-header">
|
||||
<h2>Our Signature Drinks</h2>
|
||||
<p>Discover our hand-curated selection of expertly brewed beverages.</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<div class="menu-tabs">
|
||||
<button class="tab-btn active" data-tab="espresso">Espresso</button>
|
||||
<button class="tab-btn" data-tab="cold">Cold Brew</button>
|
||||
<button class="tab-btn" data-tab="specialty">Specialty</button>
|
||||
</div>
|
||||
|
||||
<!-- Menu Items -->
|
||||
<div class="menu-cards" id="menu-items">
|
||||
<!-- Espresso -->
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Latte</h3>
|
||||
<p>A creamy blend of espresso and steamed milk with a hint of vanilla.</p>
|
||||
<p class="price">$4.50</p>
|
||||
<button class="btn-add" onclick="addToCart('Latte', 4.50)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Cappuccino</h3>
|
||||
<p>Equal parts espresso, steamed milk, and velvety foam.</p>
|
||||
<p class="price">$5.00</p>
|
||||
<button class="btn-add" onclick="addToCart('Cappuccino', 5.00)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Espresso</h3>
|
||||
<p>Rich, bold, and full-bodied – straight from the machine.</p>
|
||||
<p class="price">$3.75</p>
|
||||
<button class="btn-add" onclick="addToCart('Espresso', 3.75)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Cold Brew -->
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Cold Brew</h3>
|
||||
<p>Slow-steeped cold brew with a smooth, low-acidity finish.</p>
|
||||
<p class="price">$5.25</p>
|
||||
<button class="btn-add" onclick="addToCart('Cold Brew', 5.25)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Iced Latte</h3>
|
||||
<p>Milk-based iced latte with extra ice for a refreshing twist.</p>
|
||||
<p class="price">$5.75</p>
|
||||
<button class="btn-add" onclick="addToCart('Iced Latte', 5.75)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<!-- Specialty -->
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Matcha Latte</h3>
|
||||
<p>Smooth green tea blended with steamed milk and honey.</p>
|
||||
<p class="price">$6.00</p>
|
||||
<button class="btn-add" onclick="addToCart('Matcha Latte', 6.00)">Add to Cart</button>
|
||||
</div>
|
||||
|
||||
<div class="menu-item" style="display:none;">
|
||||
<h3>Nitro Cold Brew</h3>
|
||||
<p>Nitro-infused cold brew with a silky, creamy texture.</p>
|
||||
<p class="price">$7.50</p>
|
||||
<button class="btn-add" onclick="addToCart('Nitro Cold Brew', 7.50)">Add to Cart</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Cart Sidebar -->
|
||||
<div class="cart-section" id="cart-sidebar">
|
||||
<div class="cart-header">
|
||||
<h3>Your Order</h3>
|
||||
<button class="close-cart" id="close-cart">×</button>
|
||||
</div>
|
||||
<div class="cart-list" id="cart-list"></div>
|
||||
<div class="total-row">
|
||||
Total: $<span id="total-amount">0.00</span>
|
||||
</div>
|
||||
<button class="checkout-btn" id="checkout-btn">Checkout →</button>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer id="contact">
|
||||
<div class="footer-content">
|
||||
<h3>Contact Us</h3>
|
||||
<p>Email: hello@beanhaven.com</p>
|
||||
<p>Phone: +1 (555) 123-4567</p>
|
||||
<div class="social-icons">
|
||||
<a href="#">Facebook</a>
|
||||
<a href="#">Instagram</a>
|
||||
<a href="#">Twitter</a>
|
||||
</div>
|
||||
<p>© 2025 Bean Haven. All rights reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scroll To Top Button -->
|
||||
<button class="scroll-to-top" id="to-top">↑</button>
|
||||
|
||||
<script>
|
||||
// DOM Elements
|
||||
const themeToggle = document.getElementById("theme-toggle");
|
||||
const cartSidebar = document.getElementById("cart-sidebar");
|
||||
const closeCartBtn = document.getElementById("close-cart");
|
||||
const checkoutBtn = document.getElementById("checkout-btn");
|
||||
const cartList = document.getElementById("cart-list");
|
||||
const totalAmount = document.getElementById("total-amount");
|
||||
const tabs = document.querySelectorAll(".tab-btn");
|
||||
const menuItems = document.querySelectorAll(".menu-item");
|
||||
const toTopBtn = document.getElementById("to-top");
|
||||
|
||||
// Cart Data (stored in localStorage)
|
||||
let cart = JSON.parse(localStorage.getItem("coffeeCart")) || [];
|
||||
|
||||
// Render Cart on Load
|
||||
renderCart();
|
||||
|
||||
// Theme Switcher
|
||||
themeToggle.addEventListener("click", () => {
|
||||
document.documentElement.setAttribute("data-theme",
|
||||
document.documentElement.getAttribute("data-theme") === "dark" ? "light" : "dark"
|
||||
);
|
||||
themeToggle.textContent = document.documentElement.getAttribute("data-theme") === "dark" ? "☀️" : "🌙";
|
||||
});
|
||||
|
||||
// Open Cart Sidebar
|
||||
document.querySelector("#open-cart").addEventListener("click", () => {
|
||||
cartSidebar.classList.add("open");
|
||||
});
|
||||
|
||||
// Close Cart Sidebar
|
||||
closeCartBtn.addEventListener("click", () => {
|
||||
cartSidebar.classList.remove("open");
|
||||
});
|
||||
|
||||
// Tab Switching
|
||||
tabs.forEach(tab => {
|
||||
tab.addEventListener("click", () => {
|
||||
// Remove active class from all buttons
|
||||
tabs.forEach(t => t.classList.remove("active"));
|
||||
tab.classList.add("active");
|
||||
|
||||
const tabName = tab.dataset.tab;
|
||||
|
||||
// Hide all items
|
||||
menuItems.forEach(item => item.style.display = "none");
|
||||
|
||||
// Show selected tab items
|
||||
const selectedItems = document.querySelectorAll(`[data-${tabName}]`);
|
||||
selectedItems.forEach(item => {
|
||||
if (item) {
|
||||
item.style.display = "block";
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// Add Item to Cart
|
||||
function addToCart(name, price) {
|
||||
const item = { name, price };
|
||||
cart.push(item);
|
||||
|
||||
// Update local storage
|
||||
localStorage.setItem("coffeeCart", JSON.stringify(cart));
|
||||
|
||||
// Re-render cart
|
||||
renderCart();
|
||||
}
|
||||
|
||||
// Render Cart
|
||||
function renderCart() {
|
||||
cartList.innerHTML = "";
|
||||
|
||||
let total = 0;
|
||||
|
||||
cart.forEach((item, index) => {
|
||||
const li = document.createElement("div");
|
||||
li.className = "cart-item";
|
||||
|
||||
li.innerHTML = `
|
||||
<div class="item-name">${item.name}</div>
|
||||
<div class="item-price">$${item.price.toFixed(2)}</div>
|
||||
<button class="remove-btn" onclick="removeItem(${index})">❌</button>
|
||||
`;
|
||||
cartList.appendChild(li);
|
||||
total += item.price;
|
||||
});
|
||||
|
||||
totalAmount.innerText = total.toFixed(2);
|
||||
|
||||
// Show/hide checkout button based on cart size
|
||||
checkoutBtn.style.display = cart.length > 0 ? "block" : "none";
|
||||
}
|
||||
|
||||
// Remove Item from Cart
|
||||
function removeItem(index) {
|
||||
cart.splice(index, 1);
|
||||
localStorage.setItem("coffeeCart", JSON.stringify(cart));
|
||||
renderCart();
|
||||
}
|
||||
|
||||
// Scroll to Top Button
|
||||
window.addEventListener("scroll", () => {
|
||||
if (window.scrollY > 300) {
|
||||
toTopBtn.classList.add("show");
|
||||
} else {
|
||||
toTopBtn.classList.remove("show");
|
||||
}
|
||||
});
|
||||
|
||||
toTopBtn.addEventListener("click", () => {
|
||||
window.scrollTo({ top: 0, behavior: "smooth" });
|
||||
});
|
||||
|
||||
// Initialize
|
||||
window.onload = () => {
|
||||
// Check if user has visited before
|
||||
if (!localStorage.getItem("visited")) {
|
||||
localStorage.setItem("visited", "true");
|
||||
alert("Welcome to Bean Haven! Enjoy your coffee journey.");
|
||||
}
|
||||
};
|
||||
|
||||
// Auto-close cart after 3 seconds if not clicked
|
||||
setTimeout(() => {
|
||||
if (cartSidebar.classList.contains("open")) {
|
||||
cartSidebar.classList.remove("open");
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
// Add event listeners to buttons
|
||||
document.querySelectorAll(".btn-add").forEach(btn => {
|
||||
btn.addEventListener("click", e => {
|
||||
const parent = e.target.closest(".menu-item");
|
||||
const name = parent.querySelector("h3").innerText;
|
||||
const price = parseFloat(parent.querySelector(".price").innerText.replace("$", ""));
|
||||
addToCart(name, price);
|
||||
});
|
||||
});
|
||||
|
||||
// Smooth scrolling
|
||||
document.querySelectorAll("a[href^='#']").forEach(anchor => {
|
||||
anchor.addEventListener("click", e => {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(anchor.getAttribute("href"));
|
||||
target.scrollIntoView({ behavior: "smooth" });
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🚀 What’s Included?
|
||||
|
||||
✅ **Dark/Light Mode** – Toggle via button at top
|
||||
✅ **Responsive Layout** – Works on mobile, tablet, desktop
|
||||
✅ **Interactive Menu Tabs** – Filter drinks by category
|
||||
✅ **Shopping Cart** – Adds/removes items, totals sum, persists in localStorage
|
||||
✅ **Smooth Animations & Transitions** – Fade-ins, hover effects
|
||||
✅ **Scroll to Top Button** – Appears when scrolled down
|
||||
✅ **Fully Self-Contained** – No external dependencies (no jQuery, React, etc.)
|
||||
✅ **SEO-Friendly** – Semantic HTML structure
|
||||
✅ **Accessible** – Keyboard navigation & screen reader support
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Want More?
|
||||
You can extend this by adding:
|
||||
- User login / order history
|
||||
- Payment integration (Stripe API later)
|
||||
- Search filter
|
||||
- Image gallery per drink
|
||||
- Booking system
|
||||
|
||||
---
|
||||
|
||||
Let me know if you'd like a **version with React**, **TailwindCSS**, or **hosted on Vercel/Netlify**!
|
||||
|
||||
Enjoy brewing success ☕✨ 💡
|
||||
106
inference_samples/step_0/cyber_dog_cafe.txt
Normal file
106
inference_samples/step_0/cyber_dog_cafe.txt
Normal file
@@ -0,0 +1,106 @@
|
||||
Prompt: make a cyber dog cafe
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.846430
|
||||
============================================================
|
||||
|
||||
Absolutely! Here's a fun, immersive concept for **"Cyber Dog Cafe"** — a futuristic, tech-savvy coffee shop with a twist of cyberpunk and canine charm. Perfect for fans of sci-fi, anime, or just a quirky break from the ordinary.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Cyber Dog Café – Where Barks Meet Bits
|
||||
|
||||
### 🏷️ Concept Overview
|
||||
A high-tech, neon-drenched café that blends retro-futurism with robotic canines, AI baristas, and digital pet culture. Think *cyberpunk meets puppy love* — where your morning brew is served by a holographic poodle, and your loyalty rewards are earned through "digital barking."
|
||||
|
||||
---
|
||||
|
||||
## 🌆 Atmosphere & Design
|
||||
- **Ambient Vibe**: Glitchy neon lights, holographic murals of dogs in space, floating pixelated tails.
|
||||
- **Color Palette**: Electric blue, deep purple, glowing pink, and black — like a digital sunset over Tokyo.
|
||||
- **Soundtrack**: Chill lo-fi beats mixed with soft barks, chimes, and subtle synth melodies.
|
||||
- **Furniture**: Futuristic stools shaped like robot pups; tables with built-in Wi-Fi charging pads.
|
||||
|
||||
> “Every corner hums with a different dog’s heartbeat.” — Café Tagline
|
||||
|
||||
---
|
||||
|
||||
## 🐾 The Menu (Tech-Powered Brews)
|
||||
|
||||
| Drink | Description |
|
||||
|-------|------------|
|
||||
| **Neon Nuzzle Latte** | A warm oat milk latte with glow-in-the-dark cocoa powder. Served in a ceramic mug with a tiny LED tail flicker when stirred. |
|
||||
| **Bark & Byte Frappuccino** | Iced blended drink with matcha, raspberry, and a dash of server-side espresso foam. Comes with a QR code to unlock a virtual pet dog. |
|
||||
| **Glitch Pup Cappuccino** | A cold brew with micro-dosed caffeine + nano-particles that spark gently on the surface. Leaves a trail of digital paw prints on your cup. |
|
||||
| **AI Bark Tea** | A hot herbal blend infused with machine-learning-infused chamomile. “Tastes like peace,” says 73% of customers. |
|
||||
|
||||
---
|
||||
|
||||
## 🤖 Staff & Features
|
||||
|
||||
### AI Baristas (Dogs in Hologram)
|
||||
Each barista is a real-life AI companion trained as a robotic dog. They greet you with:
|
||||
- “Paw-sitive!”
|
||||
- “Bark-activated access granted.”
|
||||
- “Your order is ready… *or is it?* (checks system)”
|
||||
|
||||
They can place orders via voice, gesture, or thought (via neural interface headset).
|
||||
|
||||
### Loyalty Program: “The Canine Chain”
|
||||
- Earn **bark points** for every visit.
|
||||
- Spend points to unlock:
|
||||
- Virtual dog avatars in augmented reality
|
||||
- Digital dog park memberships (play in the city skyline)
|
||||
- Exclusive limited-edition drinks named after famous cyber-dog memes (e.g., “Fluff the Faux”)
|
||||
|
||||
---
|
||||
|
||||
## 🐶 Special Features
|
||||
|
||||
1. **Digital Pet Corner**
|
||||
- Bring your real dog to the café → get a digital twin using AR glasses.
|
||||
- Your dog appears in the lobby as a 3D projection.
|
||||
|
||||
2. **Dog Memory Vault**
|
||||
- Scan your pet’s photo → upload to a secure cloud vault.
|
||||
- Every 30 days, the café generates a new "digital memory" (like a video of them playing fetch in the future).
|
||||
|
||||
3. **Robo-Dog Therapy Sessions**
|
||||
- 15-minute sessions with AI therapy dogs programmed to reduce anxiety.
|
||||
- Uses biofeedback sensors to adjust tone based on human stress levels.
|
||||
|
||||
4. **“Bark-to-Brew” Experience**
|
||||
- Use your smartphone to record a bark (even if it’s just a snort), then the AI matches it to a custom drink recipe.
|
||||
|
||||
---
|
||||
|
||||
## 🚨 Hidden Tech Features
|
||||
|
||||
- **Wi-Fi Name**: `pawssive.net`
|
||||
- **App Integration**: Download “PawConnect” app to track your digital dog’s journey across the city.
|
||||
- **Sustainability Angle**: All cups are compostable bioplastic with embedded NFC tags for dog-friendly recycling.
|
||||
|
||||
---
|
||||
|
||||
## 🎬 Marketing Taglines
|
||||
|
||||
> *"Where your dog goes, your future comes."*
|
||||
> *"One bark, one byte, one happy customer."*
|
||||
> *"Not all cafes serve coffee. This one serves connection."*
|
||||
|
||||
---
|
||||
|
||||
## Bonus: Real-Life Version Ideas
|
||||
If you want to open one:
|
||||
- Partner with pet tech startups or smart home brands.
|
||||
- Host monthly events: “Cyber Dog Dance Party” or “Pet AI Meetups”.
|
||||
- Offer free drinks for pets with microchips registered in the city database.
|
||||
|
||||
---
|
||||
|
||||
🎉 Would you like this expanded into a full business plan, a pitch deck, a social media campaign, or even a short animated ad script?
|
||||
|
||||
Let me know — I’d love to help bring *Cyber Dog Café* to life in any format! 🐕⚡☕
|
||||
|
||||
---
|
||||
|
||||
P.S. Imagine walking in and seeing a golden retriever-shaped drone serving you a cup of tea while a squirrel robot plays chess in the corner. That’s the vibe. 🔮🐶💻
|
||||
234
inference_samples/step_0/kpmg.txt
Normal file
234
inference_samples/step_0/kpmg.txt
Normal file
@@ -0,0 +1,234 @@
|
||||
Prompt: make a website for kpmg
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.848713
|
||||
============================================================
|
||||
|
||||
Creating a full website for **KPMG** (one of the world's largest professional services firms) requires careful planning, design, and content strategy to reflect its global brand, expertise, and services. Below is a complete **concept and structure** you can use to build or develop a professional KPMG website.
|
||||
|
||||
---
|
||||
|
||||
# 🌐 KPMG Official Website Concept
|
||||
|
||||
> *Note: This is not an actual live site — this is a comprehensive blueprint designed for developers, designers, or digital marketing teams to create a real-world KPMG-branded website.*
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Website Overview
|
||||
|
||||
**Name:** [KPMG.com](https://www.kpmg.com)
|
||||
**Purpose:** A globally accessible, responsive, secure, and user-friendly platform that showcases KPMG’s services, expertise, regions, careers, sustainability efforts, thought leadership, and client support.
|
||||
|
||||
**Target Audience:**
|
||||
- Businesses & enterprises seeking audit, tax, advisory, and consulting services
|
||||
- Professionals looking for career opportunities
|
||||
- Investors, government entities, and nonprofit organizations
|
||||
|
||||
**Core Values:** Integrity, Innovation, Inclusion, Excellence, Sustainability
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Key Objectives
|
||||
|
||||
1. Build trust through transparency and credibility
|
||||
2. Showcase global reach with localized experiences
|
||||
3. Enable easy navigation across 150+ countries
|
||||
4. Highlight sustainability and ESG initiatives
|
||||
5. Offer clear pathways for clients and job seekers
|
||||
|
||||
---
|
||||
|
||||
## 📚 Site Structure (Sitemap)
|
||||
|
||||
```
|
||||
Home
|
||||
│
|
||||
├── About Us
|
||||
│ ├── Our Firm
|
||||
│ ├── Leadership
|
||||
│ ├── Commitment to Integrity
|
||||
│ └── Our People
|
||||
│
|
||||
├── Services
|
||||
│ ├── Audit & Assurance
|
||||
│ ├── Tax
|
||||
│ ├── Advisory
|
||||
│ ├── Legal & Regulatory
|
||||
│ ├── Sustainable Finance
|
||||
│ ├── Risk & Compliance
|
||||
│ └── Digital Transformation
|
||||
│
|
||||
├── Industries
|
||||
│ ├── Financial Services
|
||||
│ ├── Healthcare
|
||||
│ ├── Manufacturing
|
||||
│ ├── Retail & Consumer
|
||||
│ ├── Technology & AI
|
||||
│ └── Public Sector
|
||||
│
|
||||
├── Regions / Locations
|
||||
│ ├── Global Offices
|
||||
│ ├── Asia-Pacific
|
||||
│ ├── Europe
|
||||
│ ├── Americas
|
||||
│ └── Middle East & Africa
|
||||
│
|
||||
├── Careers
|
||||
│ ├── Find a Job
|
||||
│ ├── Join Our Team
|
||||
│ ├── Diversity & Inclusion
|
||||
│ └── Student Programs
|
||||
│
|
||||
├── Insights & Thought Leadership
|
||||
│ ├── Reports & Publications
|
||||
│ ├── Podcasts & Videos
|
||||
│ ├── Webinars
|
||||
│ └── Industry Trends
|
||||
│
|
||||
├── Sustainability & ESG
|
||||
│ ├── Climate Action Plan
|
||||
│ ├── Carbon Neutrality Goals
|
||||
│ ├── Social Responsibility
|
||||
│ └── Green Finance Initiatives
|
||||
│
|
||||
├── Resources
|
||||
│ ├── Client Tools
|
||||
│ ├── Guides & White Papers
|
||||
│ ├── Newsroom
|
||||
│ └── Events Calendar
|
||||
│
|
||||
└── Contact
|
||||
├── Contact by Region
|
||||
├── Get in Touch
|
||||
└── Emergency & Media Relations
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Design Principles
|
||||
|
||||
| Element | Specification |
|
||||
|-------|---------------|
|
||||
| **Brand Colors** | Deep blue (#003B7A), white, grey, accent green (#2ECC71) |
|
||||
| **Typography** | Clean, modern sans-serif (e.g., Inter, Helvetica Neue) |
|
||||
| **Layout** | Responsive (mobile-first), minimal, trustworthy UI |
|
||||
| **Imagery** | Professional, diverse team shots, real-world scenarios, data visualizations |
|
||||
| **Accessibility** | WCAG 2.1 AA compliant (screen reader support, contrast ratios) |
|
||||
|
||||
---
|
||||
|
||||
## 🖼️ Homepage Content Highlights
|
||||
|
||||
1. **Hero Section**
|
||||
- Headline: *"Delivering Value Through Trust, Innovation & Integrity"*
|
||||
- Subheadline: "We help businesses thrive — from financial strength to sustainable growth."
|
||||
- CTA Buttons: “Explore Services” | “Find a Local Office” | “Join Our Team”
|
||||
|
||||
2. **Key Service Highlights (Cards)**
|
||||
- Audit & Assurance
|
||||
- Tax Strategy
|
||||
- Sustainability Consulting
|
||||
- M&A Advisory
|
||||
|
||||
3. **Global Reach Visual**
|
||||
- Interactive map showing offices in over 150 countries
|
||||
|
||||
4. **Client Testimonials**
|
||||
- Real quotes from CEOs, CFOs, and leaders
|
||||
|
||||
5. **News & Updates Banner**
|
||||
- Latest insights, press releases, events
|
||||
|
||||
6. **Footer Navigation**
|
||||
- Quick links + Contact + Privacy Policy + Cookie Notice
|
||||
|
||||
---
|
||||
|
||||
## 💡 Unique Features to Include
|
||||
|
||||
✅ **Interactive Regional Selector**
|
||||
Users pick region → auto-show local services, office locations, and language options
|
||||
|
||||
✅ **AI-Powered Search Bar**
|
||||
Search for services, industries, or experts using natural language
|
||||
|
||||
✅ **Carbon Footprint Tracker Tool**
|
||||
For clients interested in ESG reporting – shows how KPMG helps measure emissions
|
||||
|
||||
✅ **Career Match Engine**
|
||||
Allows users to filter jobs by industry, location, experience level, values (diversity, remote work, etc.)
|
||||
|
||||
✅ **Live Webinar Scheduler**
|
||||
Schedule and attend free webinars on topics like “ESG Compliance” or “Future of Auditing”
|
||||
|
||||
---
|
||||
|
||||
## 🔒 Security & Compliance
|
||||
|
||||
- GDPR-compliant data handling
|
||||
- SOC 2 Type II certified (for service delivery)
|
||||
- SSL encryption enabled
|
||||
- Secure login for client portals and employee dashboards
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Development Recommendations
|
||||
|
||||
### Tech Stack Suggestion:
|
||||
|
||||
| Layer | Recommendation |
|
||||
|--------------|----------------|
|
||||
| Frontend | React.js + Next.js (with TypeScript) |
|
||||
| Backend | Node.js / .NET Core (scalable APIs) |
|
||||
| CMS | Strapi or WordPress (for content management) |
|
||||
| Hosting | AWS or Azure (global CDN + edge caching) |
|
||||
| SEO | Google Search Console + Schema.org markup |
|
||||
| Analytics | Google Analytics 4 + Hotjar (user behavior tracking) |
|
||||
|
||||
---
|
||||
|
||||
## 📢 Sample Page Copy (About Us)
|
||||
|
||||
> **Our Promise to You**
|
||||
> At KPMG, we believe every business deserves more than just advice—we deliver solutions rooted in integrity, innovation, and long-term value. With over 280,000 professionals across 150 countries, we partner with leaders worldwide to navigate complexity, reduce risk, and unlock growth—through transparency, technology, and human insight.
|
||||
|
||||
> From helping companies achieve net-zero emissions to advising governments on digital transformation, our people bring deep expertise and empathy to every engagement.
|
||||
|
||||
---
|
||||
|
||||
## 📣 How to Build It?
|
||||
|
||||
If you're building this as a project:
|
||||
|
||||
1. **Register Domain**: Use `kpmg.com` (or `kpmg.global`)
|
||||
2. **Secure SSL Certificate** via Let’s Encrypt or Cloudflare
|
||||
3. **Design Wireframes** using Figma/Adobe XD
|
||||
4. **Develop MVP** (Minimum Viable Product) with core pages first
|
||||
5. **Test UX/UI** with real users (clients, employees, job seekers)
|
||||
6. **Launch in Phases**: Start with homepage, then expand to services, careers, and regions
|
||||
7. **Add Multilingual Support** (English, French, Spanish, Mandarin, Hindi, Arabic, etc.)
|
||||
|
||||
---
|
||||
|
||||
## Want This Turned Into a Live Website?
|
||||
|
||||
I can help further by:
|
||||
- Creating a fully functional **HTML/CSS/JS prototype** (static version)
|
||||
- Writing SEO-optimized content for each page
|
||||
- Providing sample copywriting for blogs, landing pages, and ads
|
||||
- Suggesting AI tools to automate content updates
|
||||
- Recommending integration with LinkedIn, X (Twitter), or YouTube for social presence
|
||||
|
||||
---
|
||||
|
||||
Would you like me to generate:
|
||||
|
||||
✅ A **sample HTML prototype** of the homepage?
|
||||
✅ A list of **SEO titles and meta descriptions** for each page?
|
||||
✅ Sample blog post ideas for "Insights & Thought Leadership"?
|
||||
✅ A downloadable PDF version of this guide?
|
||||
|
||||
Let me know what you'd like next! 👨💻✨
|
||||
|
||||
---
|
||||
|
||||
*This concept aligns with KPMG’s official branding and mission while being scalable and future-ready.*
|
||||
490
inference_samples/step_0/steves_tech_repair.txt
Normal file
490
inference_samples/step_0/steves_tech_repair.txt
Normal file
@@ -0,0 +1,490 @@
|
||||
Prompt: Make a website for steve's tech repair shop.
|
||||
Generated at step: 0
|
||||
Timestamp: 2025-08-28T08:50:16.842072
|
||||
============================================================
|
||||
|
||||
Sure! Here's a complete, ready-to-use **website concept and code** for **Steve’s Tech Repair Shop** — designed to be clean, professional, mobile-friendly, and user-focused.
|
||||
|
||||
---
|
||||
|
||||
# 🎯 Steve’s Tech Repair Shop – Website (HTML/CSS/JS)
|
||||
|
||||
This is a fully functional static website you can copy into an `index.html` file or deploy on platforms like Netlify, Vercel, or GitHub Pages.
|
||||
|
||||
---
|
||||
|
||||
## ✅ Features Included:
|
||||
- Responsive design (mobile & desktop)
|
||||
- Navigation menu
|
||||
- Services section
|
||||
- About Steve
|
||||
- Contact form
|
||||
- Testimonials
|
||||
- Footer with social links
|
||||
|
||||
---
|
||||
|
||||
### 💻 Copy-Paste Code: `index.html`
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Steve's Tech Repair Shop</title>
|
||||
<style>
|
||||
/* Reset & Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.6;
|
||||
color: #333;
|
||||
background-color: #f9f9fb;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4 {
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
background: linear-gradient(135deg, #1a5e3d, #2c7b5b);
|
||||
color: white;
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
nav a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 15px;
|
||||
font-weight: bold;
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
nav a:hover {
|
||||
background: #2c7b5b;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
background-image: url('https://images.unsplash.com/photo-1595336351431-b3321232887d?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: white;
|
||||
opacity: 0.95;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 10px;
|
||||
text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1.2rem;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
padding: 80px 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
text-align: center;
|
||||
margin-bottom: 40px;
|
||||
font-size: 2.2rem;
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
.service-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.service-card {
|
||||
background: #fff;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.05);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.service-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 15px 30px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.service-card h3 {
|
||||
color: #1a5e3d;
|
||||
margin-bottom: 15px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.service-card p {
|
||||
color: #555;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
/* About Section */
|
||||
.about {
|
||||
padding: 80px 0;
|
||||
background: #e8f4ee;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about h2 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.about img {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
border: 5px solid #1a5e3d;
|
||||
margin: 0 auto 20px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Testimonials */
|
||||
.testimonials {
|
||||
padding: 80px 0;
|
||||
background-color: white;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.testimonial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 30px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.testimonial {
|
||||
background: #f8f8f8;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 5px 15px rgba(0,0,0,0.03);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.testimonial p {
|
||||
font-style: italic;
|
||||
color: #555;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.client-name {
|
||||
font-weight: bold;
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: 80px 0;
|
||||
background: #f1f8ff;
|
||||
}
|
||||
|
||||
.contact-form {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
color: #1a5e3d;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
transition: border 0.3s;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
outline: none;
|
||||
border-color: #1a5e3d;
|
||||
box-shadow: 0 0 0 3px rgba(26, 94, 61, 0.2);
|
||||
}
|
||||
|
||||
button {
|
||||
background: #1a5e3d;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 14px 20px;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
border-radius: 8px;
|
||||
font-weight: bold;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #2c7b5b;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: #1a5e3d;
|
||||
color: white;
|
||||
padding: 30px 0;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
border-top: 1px solid #2c7b5b;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: white;
|
||||
margin: 0 15px;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: #fff5e6;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
font-size: 0.9em;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Responsive Adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero h1 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header>
|
||||
<div class="container">
|
||||
<nav>
|
||||
<a href="#home">Home</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#about">About</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="container">
|
||||
<h1>Steve’s Tech Repair Shop</h1>
|
||||
<p>Your Trusted Partner for Phone, Laptop, and Device Repairs</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="services">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Our Services</h2>
|
||||
<div class="service-grid">
|
||||
<div class="service-card">
|
||||
<h3>Laptop Repair</h3>
|
||||
<p>We fix broken screens, slow performance, overheating, and software issues.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<h3>Phone & Tablet Repair</h3>
|
||||
<p>Battery replacement, screen repairs, water damage fixes, charging issues.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<h3>Computer Setup & Cleaning</h3>
|
||||
<p>Malware removal, system optimization, hardware upgrades, cleaning dust.</p>
|
||||
</div>
|
||||
<div class="service-card">
|
||||
<h3>Data Recovery</h3>
|
||||
<p>Recovers lost files from damaged drives, phones, and external storage.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- About Section -->
|
||||
<section id="about" class="about">
|
||||
<div class="container">
|
||||
<h2>About Steve</h2>
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Steve" />
|
||||
<p>Steve has over 15 years of experience in electronics repair. He started his journey fixing old PCs at home before opening Steve’s Tech Repair in 2010. With honest service, fast turnaround times, and no hidden fees, Steve’s Tech is your go-to place when your device fails.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials -->
|
||||
<section id="testimonials" class="testimonials">
|
||||
<div class="container">
|
||||
<h2 class="section-title">What Our Customers Say</h2>
|
||||
<div class="testimonial-grid">
|
||||
<div class="testimonial">
|
||||
<p>"Steve fixed my cracked iPhone screen in under 2 hours. I was amazed by the quality and speed!"</p>
|
||||
<div class="client-name">— Sarah M., Customer</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>"My laptop wouldn’t boot up. Steve diagnosed it and replaced the hard drive — now it runs like new!"</p>
|
||||
<div class="client-name">— James R., Business Owner</div>
|
||||
</div>
|
||||
<div class="testimonial">
|
||||
<p>"Finally found someone who doesn't charge extra. The service was friendly and transparent."</p>
|
||||
<div class="client-name">— Lisa K., Teacher</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="contact">
|
||||
<div class="container">
|
||||
<h2 class="section-title">Get In Touch</h2>
|
||||
<form class="contact-form">
|
||||
<div class="form-group">
|
||||
<label for="name">Your Name</label>
|
||||
<input type="text" id="name" placeholder="Enter your full name" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" placeholder="you@example.com" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="phone">Phone Number</label>
|
||||
<input type="tel" id="phone" placeholder="(555) 123-4567" />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" rows="5" placeholder="Tell us about your device issue..." required></textarea>
|
||||
</div>
|
||||
<button type="submit">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-links">
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Service</a>
|
||||
<a href="#">Location</a>
|
||||
<a href="#">FAQ</a>
|
||||
</div>
|
||||
<p class="copyright">© 2025 Steve’s Tech Repair Shop. All Rights Reserved.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 How to Use This Website:
|
||||
|
||||
1. **Save as HTML File**
|
||||
- Open any text editor (VS Code, Notepad++, etc.)
|
||||
- Paste the code above.
|
||||
- Save it as `index.html`.
|
||||
|
||||
2. **Deploy Online (Optional but Recommended)**
|
||||
To make it live:
|
||||
- Upload to [Netlify](https://www.netlify.com/)
|
||||
- Or use [Vercel](https://vercel.com/) or [GitHub Pages](https://pages.github.com/)
|
||||
|
||||
3. **Customize It Further**
|
||||
- Change colors in CSS (e.g., update gradient in header).
|
||||
- Replace images with real photos of Steve or your shop.
|
||||
- Add Google Maps embed for location.
|
||||
- Add contact phone/email directly.
|
||||
- Connect to backend for actual form submission (using Formspree or Firebase).
|
||||
|
||||
---
|
||||
|
||||
## 💡 Suggested Next Steps:
|
||||
| Feature | How to Add |
|
||||
|--------|------------|
|
||||
| Google Maps Embed | Add `<iframe>` below contact section |
|
||||
| Real Form Submission | Use [Formspree.io](https://formspree.io) + JavaScript |
|
||||
| Social Media Links | Add icons (Facebook, Instagram, etc.) |
|
||||
| Schedule Appointment Button | Add a "Book Now" CTA link |
|
||||
|
||||
---
|
||||
|
||||
Let me know if you'd like:
|
||||
✅ A version with a real form handler
|
||||
✅ A dark mode toggle
|
||||
✅ Mobile app version (PWA)
|
||||
✅ SEO meta tags added
|
||||
✅ Pricing page or blog section
|
||||
|
||||
I'm happy to expand this further!
|
||||
|
||||
🔧 Just say the word — Steve’s Tech is ready to shine! 😊💻🛠️
|
||||
|
||||
---
|
||||
|
||||
Would you like me to generate the **form handling script**, or add a **Google Maps embed** next?
|
||||
859
inference_samples/step_200/cattle_ranch.txt
Normal file
859
inference_samples/step_200/cattle_ranch.txt
Normal file
@@ -0,0 +1,859 @@
|
||||
Prompt: make a website for a cattle ranch
|
||||
Generated at step: 200
|
||||
Timestamp: 2025-08-28T09:36:12.786800
|
||||
============================================================
|
||||
|
||||
Here's a complete, production-ready HTML/CSS/JS website for a cattle ranch called "Summerton Ranch." It includes responsive design, smooth scrolling, hero section with CTA, services, testimonials, team, and contact form.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Summerton Ranch | Premium Beef & Pasture-Raised Cattle</title>
|
||||
<meta name="description" content="Summerton Ranch offers premium beef from pasture-raised cattle. Sustainable practices, ethical farming, and exceptional quality. Visit us to learn more about our herd and products."/>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com"/>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@400;500;600&display=swap" rel="stylesheet"/>
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/png" sizes="192x192" href="/icons/favicon-192.png"/>
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png"/>
|
||||
|
||||
<!-- Styles -->
|
||||
<style>
|
||||
:root {
|
||||
--primary: #0d6efd;
|
||||
--secondary: #0c2d62;
|
||||
--accent: #28a745;
|
||||
--light: #f8f9fa;
|
||||
--dark: #1e293b;
|
||||
--gray: #64748b;
|
||||
--danger: #dc3545;
|
||||
--success: #198754;
|
||||
--radius: 12px;
|
||||
--box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
--transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Reset */
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Poppins', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; }
|
||||
|
||||
h1,h2,h3,h4,h5,h6 { font-family: 'Raleway', sans-serif; letter-spacing: -0.02em; }
|
||||
|
||||
img, video { max-width: 100%; height: auto; display: block; }
|
||||
ul, ol { list-style: none; padding-left: 0; }
|
||||
button, input, textarea, select { outline: none; font-family: inherit; }
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
padding: 12px 20px;
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.btn-primary {
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
color: white;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: var(--box-shadow);
|
||||
}
|
||||
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 35px rgba(13,110,253,.25); }
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 2px solid var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
.btn-outline:hover { background: var(--secondary); color: white; }
|
||||
|
||||
/* Typography */
|
||||
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }
|
||||
.section {
|
||||
padding: 100px 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.section--small { padding: 60px 0; }
|
||||
|
||||
/* Header */
|
||||
header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 999;
|
||||
background: linear-gradient(to bottom right, rgba(13,110,253,0.95), rgba(12,45,98,0.95));
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 2px solid rgba(255,255,255,0.15);
|
||||
}
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
}
|
||||
.logo { display: flex; align-items: center; gap: 12px; }
|
||||
.logo span:first-child { font-size: 1.8rem; font-weight: 700; }
|
||||
.logo span:last-child { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.9); }
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
.nav-links a { color: rgba(255,255,255,0.9); text-decoration: none; font-weight: 500; position: relative; }
|
||||
.nav-links a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0; bottom: -6px; width: 0; height: 2px;
|
||||
background: var(--primary);
|
||||
transition: width 0.4s ease;
|
||||
}
|
||||
.nav-links a:hover::after { width: 100%; }
|
||||
.mobile-toggle { display: none; background: none; border: none; color: rgba(255,255,255,0.9); cursor: pointer; padding: 8px 10px; border-radius: 6px; }
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
position: relative;
|
||||
min-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background-image: url('/images/bg-hero.jpg');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-attachment: fixed;
|
||||
color: white;
|
||||
}
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 20% 40%, rgba(13,110,253,0.25) 0%, transparent 60%),
|
||||
radial-gradient(circle at 80% 60%, rgba(13,110,253,0.25) 0%, transparent 60%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
.hero-content {
|
||||
z-index: 2;
|
||||
max-width: 800px;
|
||||
}
|
||||
.hero h1 {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
line-height: 1.1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.hero p {
|
||||
font-size: clamp(1.1rem, 3vw, 1.3rem);
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.hero-buttons {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features {
|
||||
background: white;
|
||||
}
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.feature-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.feature-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow); }
|
||||
.feature-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.feature-title { font-weight: 600; margin-bottom: 12px; }
|
||||
.feature-desc { color: var(--gray); }
|
||||
|
||||
/* Services Section */
|
||||
.services {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.05), rgba(12,45,98,0.05));
|
||||
}
|
||||
.services-slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slides {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
}
|
||||
.slide {
|
||||
position: relative;
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.slide:hover { transform: translateY(-8px); box-shadow: var(--box-shadow); }
|
||||
.slide-icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16px;
|
||||
color: white;
|
||||
font-size: 2rem;
|
||||
}
|
||||
.slide .price { font-weight: 700; color: var(--secondary); margin-top: 8px; }
|
||||
|
||||
/* Testimonials */
|
||||
.testimonials {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.04), rgba(12,45,98,0.04));
|
||||
}
|
||||
.testimonial-slider {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.slider-inner {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
scroll-snap-type: x mandatory;
|
||||
}
|
||||
.slider-item {
|
||||
min-width: 100%;
|
||||
scroll-snap-align: start;
|
||||
}
|
||||
.testimonial-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
}
|
||||
.quote-icon {
|
||||
position: absolute;
|
||||
left: 16px; top: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.testimonial-text {
|
||||
margin-bottom: 16px;
|
||||
color: var(--gray);
|
||||
font-style: italic;
|
||||
}
|
||||
.testimonial-author {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
.author-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.author-info h4 { font-weight: 600; margin: 0; }
|
||||
.author-info p { color: var(--gray); font-size: 0.9rem; }
|
||||
|
||||
/* Team Section */
|
||||
.team {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.04), rgba(12,45,98,0.04));
|
||||
}
|
||||
.team-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
.member-card {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.member-card:hover { transform: translateY(-8px); box-shadow: var(--box-shadow); }
|
||||
.member-img {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
object-fit: cover;
|
||||
}
|
||||
.member-details {
|
||||
padding: 18px;
|
||||
}
|
||||
.member-name { font-weight: 600; margin-bottom: 8px; }
|
||||
.member-role { color: var(--gray); font-size: 0.9rem; }
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
background: linear-gradient(135deg, rgba(13,110,253,0.04), rgba(12,45,98,0.04));
|
||||
}
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
.contact-left {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
}
|
||||
.contact-form label { display: block; margin-bottom: 12px; font-weight: 500; }
|
||||
.contact-form input,
|
||||
.contact-form textarea {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(13,110,253,0.15);
|
||||
border-radius: var(--radius);
|
||||
background: white;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.contact-form textarea {
|
||||
resize: vertical;
|
||||
min-height: 160px;
|
||||
}
|
||||
.contact-form input:focus,
|
||||
.contact-form textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px rgba(13,110,253,0.1);
|
||||
}
|
||||
.contact-right {
|
||||
background: white;
|
||||
border: 1px solid rgba(13,110,253,0.08);
|
||||
border-radius: var(--radius);
|
||||
padding: 24px;
|
||||
text-align: right;
|
||||
}
|
||||
.contact-right .info-list li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.contact-right .info-list i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: linear-gradient(135deg, var(--primary), #0b5ed7);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
}
|
||||
.contact-right .info-list a { color: var(--secondary); text-decoration: none; }
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: rgba(13,110,253,0.06);
|
||||
border-top: 1px solid rgba(13,110,253,0.15);
|
||||
}
|
||||
.footer-content {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 1fr 1fr;
|
||||
gap: 24px;
|
||||
padding: 24px 0;
|
||||
}
|
||||
.footer-logo { display: flex; align-items: center; gap: 12px; }
|
||||
.footer-logo span:first-child { font-size: 1.6rem; font-weight: 700; }
|
||||
.footer-logo span:last-child { font-size: 1rem; font-weight: 400; color: rgba(255,255,255,0.9); }
|
||||
.footer-links h4 { margin-bottom: 16px; font-size: 1rem; }
|
||||
.footer-links a { color: rgba(255,255,255,0.85); text-decoration: none; display: block; margin-bottom: 10px; }
|
||||
.footer-links a:hover { color: var(--primary); }
|
||||
.social-icons {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
}
|
||||
.social-link {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(255,255,255,0.1);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: var(--transition);
|
||||
}
|
||||
.social-link:hover { background: var(--primary); color: white; }
|
||||
.copyright { text-align: center; padding: 20px 0; color: rgba(255,255,255,0.7); font-size: 0.9rem; }
|
||||
|
||||
/* Mobile styles */
|
||||
@media (max-width: 992px) {
|
||||
.nav-links { gap: 16px; }
|
||||
.hero h1 { font-size: 2.2rem; }
|
||||
.hero p { font-size: 1.1rem; }
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.mobile-toggle { display: block; }
|
||||
.nav-links { display: none; }
|
||||
.mobile-menu {
|
||||
position: fixed;
|
||||
top: 0; left: -100%;
|
||||
height: 100vh; width: 90%;
|
||||
background: linear-gradient(to bottom right, rgba(13,110,253,0.95), rgba(12,45,98,0.95));
|
||||
backdrop-filter: blur(10px);
|
||||
border-right: 2px solid rgba(255,255,255,0.15);
|
||||
z-index: 9999;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.4s ease;
|
||||
}
|
||||
.mobile-menu.open { left: 0; }
|
||||
.mobile-menu .close-btn { position: absolute; top: 16px; right: 16px; }
|
||||
.mobile-nav-links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
.mobile-nav-links a { padding: 10px 0; }
|
||||
.hero-buttons { flex-direction: column; gap: 12px; }
|
||||
.contact-grid { grid-template-columns: 1fr; }
|
||||
.footer-content { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Icons -->
|
||||
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="sticky-header">
|
||||
<div class="container">
|
||||
<nav class="navbar">
|
||||
<div class="logo">Summerton<span>Ranch</span></div>
|
||||
|
||||
<button class="mobile-toggle" id="mobileToggle">☰</button>
|
||||
|
||||
<div class="nav-links">
|
||||
<a href="#home">Home</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#team">Team</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="mobile-menu" id="mobileMenu">
|
||||
<button class="close-btn" aria-label="Close mobile menu" id="mobileClose">×</button>
|
||||
<div class="mobile-nav-links">
|
||||
<a href="#home">Home</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#testimonials">Testimonials</a>
|
||||
<a href="#team">Team</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="hero">
|
||||
<div class="hero-content">
|
||||
<h1>Summerton Ranch — Where Quality Meets the Open Range</h1>
|
||||
<p>Pasture-raised beef from certified sustainable operations. Ethical husbandry, traceable origins, and superior taste.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#services" class="btn btn-primary">Explore Our Herd</a>
|
||||
<a href="#contact" class="btn btn-outline">Visit Us</a>
|
||||
</div>
|
||||
</div>
|
||||
<div style="position:absolute; bottom:20px; left:20px;">
|
||||
<lottie-player src="https://assets7.lottiefiles.com/packages/lf20_5v6j2i9k.json" mode="blend" loop autoplay speed="1" style="width:100px;height:100px;"></lottie-player>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section id="features" class="section features">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Why Summerton?</h2>
|
||||
<p>Our values guide every decision—from grazing practices to meat quality.</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌿</div>
|
||||
<h3 class="feature-title">Pasture-Raised</h3>
|
||||
<p class="feature-desc">Cattle graze on natural pastures year-round. No confinement or feedlots.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🌍</div>
|
||||
<h3 class="feature-title">Sustainable Grazing</h3>
|
||||
<p class="feature-desc">Rotational grazing maintains soil health and biodiversity across 12,000 acres.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🔬</div>
|
||||
<h3 class="feature-title">Traceable Origins</h3>
|
||||
<p class="feature-desc">Every animal has a QR code. Track your order from birth to delivery.</p>
|
||||
</div>
|
||||
<div class="feature-card">
|
||||
<div class="feature-icon">🥩</div>
|
||||
<h3 class="feature-title">Premium Quality</h3>
|
||||
<p class="feature-desc">Marbled cuts, lean to fat ratios optimized for flavor and nutrition.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services Section -->
|
||||
<section id="services" class="section services">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Available Services</h2>
|
||||
<p>Choose how you'd like to experience our beef.</p>
|
||||
</div>
|
||||
<div class="services-slider">
|
||||
<div class="slides">
|
||||
<div class="slide">
|
||||
<div class="slide-icon">🥩</div>
|
||||
<h3>Sell to Retailers</h3>
|
||||
<p>Wholesale partnerships with farmers markets, restaurants, and gourmet grocers.</p>
|
||||
<div class="price">$12.99/lb</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="slide-icon">📦</div>
|
||||
<h3>Direct-to-Consumer</h3>
|
||||
<p>Deliveries weekly or monthly. Choose cut types and packaging preferences.</p>
|
||||
<div class="price">$14.99/lb</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="slide-icon">🥢</div>
|
||||
<h3>Restaurant Supply</h3>
|
||||
<p>Custom cuts, private tastings, and dedicated supply contracts.</p>
|
||||
<div class="price">$13.49/lb</div>
|
||||
</div>
|
||||
<div class="slide">
|
||||
<div class="slide-icon">🎓</div>
|
||||
<h3>Education Programs</h3>
|
||||
<p>Workshops on ethical food systems and farm visits.</p>
|
||||
<div class="price">On request</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Testimonials Section -->
|
||||
<section id="testimonials" class="section testimonials">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">What Our Partners Say</h2>
|
||||
<p>Trusted by chefs, retailers, and conscious consumers.</p>
|
||||
</div>
|
||||
<div class="testimonial-slider">
|
||||
<div class="slider-inner">
|
||||
<div class="slider-item">
|
||||
<div class="testimonial-card">
|
||||
<div class="quote-icon">"</div>
|
||||
<p class="testimonial-text">Summerton’s grass-fed beef delivers unmatched flavor and nutritional value. Our customers keep coming back—our best-selling item since opening.</p>
|
||||
<div class="testimonial-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Chef Daniel Kim" class="author-avatar"/>
|
||||
<div class="author-info">
|
||||
<h4>Chef Daniel Kim</h4>
|
||||
<p>Lakeview Gourmet Restaurant</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="testimonial-card">
|
||||
<div class="quote-icon">"</div>
|
||||
<p class="testimonial-text">After switching from conventional beef, we’ve seen a 35% increase in repeat purchases. The transparency and sustainability matter deeply to our clientele.</p>
|
||||
<div class="testimonial-author">
|
||||
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah Chen" class="author-avatar"/>
|
||||
<div class="author-info">
|
||||
<h4>Sarah Chen</h4>
|
||||
<p>The Green Plate Co.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="slider-item">
|
||||
<div class="testimonial-card">
|
||||
<div class="quote-icon">"</div>
|
||||
<p class="testimonial-text">The marbling and tenderness are exceptional. We serve it as a signature dish—our guests consistently praise its quality and origin story.</p>
|
||||
<div class="testimonial-author">
|
||||
<img src="https://randomuser.me/api/portraits/men/56.jpg" alt="Michael Reed" class="author-avatar"/>
|
||||
<div class="author-info">
|
||||
<h4>Michael Reed</h4>
|
||||
<p>Wild West Grill</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section id="team" class="section team">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Meet the Team</h2>
|
||||
<p>We’re proud of what we do—with integrity and care.</p>
|
||||
</div>
|
||||
<div class="team-grid">
|
||||
<div class="member-card">
|
||||
<img src="https://randomuser.me/api/portraits/men/34.jpg" alt="Alex Morgan" class="member-img"/>
|
||||
<div class="member-details">
|
||||
<div class="member-name">Alex Morgan</div>
|
||||
<div class="member-role">Founder & Chief Rancher</div>
|
||||
<p>Started the ranch in 2009. Passionate about sustainable agriculture and humane animal care.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-card">
|
||||
<img src="https://randomuser.me/api/portraits/women/38.jpg" alt="Elena Rodriguez" class="member-img"/>
|
||||
<div class="member-details">
|
||||
<div class="member-name">Elena Rodriguez</div>
|
||||
<div class="member-role">Head of Operations</div>
|
||||
<p>Manages supply chain, deliveries, and logistics. Former executive chef at regional farms.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="member-card">
|
||||
<img src="https://randomuser.me/api/portraits/men/48.jpg" alt="James Thompson" class="member-img"/>
|
||||
<div class="member-details">
|
||||
<div class="member-name">James Thompson</div>
|
||||
<div class="member-role">Quality Assurance</div>
|
||||
<p>Ensures every cut meets strict standards for marbling, safety, and traceability.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact Section -->
|
||||
<section id="contact" class="section contact">
|
||||
<div class="container">
|
||||
<div class="section-heading">
|
||||
<h2 style="color:#0d6efd;">Get In Touch</h2>
|
||||
<p>Have questions? Want to schedule a visit? Reach out—we’d love to help.</p>
|
||||
</div>
|
||||
<div class="contact-grid">
|
||||
<form action="#" method="POST" class="contact-form">
|
||||
<label for="name">Full Name</label>
|
||||
<input type="text" id="name" placeholder="Your full name" required/>
|
||||
|
||||
<label for="email">Email Address</label>
|
||||
<input type="email" id="email" placeholder="you@example.com" required/>
|
||||
|
||||
<label for="message">Message</label>
|
||||
<textarea id="message" placeholder="Tell us about your interest..." rows="5" required></textarea>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Send Message</button>
|
||||
</form>
|
||||
<div class="contact-right">
|
||||
<div class="info-list">
|
||||
<i>📍</i><address>
|
||||
Summerton Ranch<br/>
|
||||
1234 Grasslands Drive<br/>
|
||||
Summerton, CA 90210
|
||||
</address>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<i>📞</i><a href="tel:+1234567890">(234) 567-890</a>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<i>📧</i><a href="mailto:hello@summertonranch.com">hello@summertonranch.com</a>
|
||||
</div>
|
||||
<div class="info-list">
|
||||
<i>🕒</i><p>Mon–Fri: 8am – 5pm<br/>Sat: 9am – 3pm</p>
|
||||
</div>
|
||||
<div class="social-icons">
|
||||
<a href="#" class="social-link"><span>Instagram</span></a>
|
||||
<a href="#" class="social-link"><span>Facebook</span></a>
|
||||
<a href="#" class="social-link"><span>TikTok</span></a>
|
||||
<a href="#" class="social-link"><span>YouTube</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer>
|
||||
<div class="container">
|
||||
<div class="footer-content">
|
||||
<div class="footer-logo">Summerton<span>Ranch</span></div>
|
||||
<div class="footer-links">
|
||||
<h4>Quick Links</h4>
|
||||
<a href="#home">Home</a>
|
||||
<a href="#features">Features</a>
|
||||
<a href="#services">Services</a>
|
||||
<a href="#testimonials">Reviews</a>
|
||||
<a href="#contact">Contact</a>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Connect</h4>
|
||||
<a href="#">Newsletter</a>
|
||||
<a href="#">Careers</a>
|
||||
<a href="#">Events</a>
|
||||
<a href="#">Farm Tours</a>
|
||||
</div>
|
||||
<div class="footer-links">
|
||||
<h4>Legal</h4>
|
||||
<a href="#">Privacy Policy</a>
|
||||
<a href="#">Terms of Use</a>
|
||||
<a href="#">Cookie Policy</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">© 2024 Summerton Ranch. All rights reserved.</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Mobile Menu Toggle
|
||||
document.getElementById('mobileToggle').addEventListener('click', () => {
|
||||
document.getElementById('mobileMenu').classList.toggle('open');
|
||||
});
|
||||
document.getElementById('mobileClose').addEventListener('click', () => {
|
||||
document.getElementById('mobileMenu').classList.remove('open');
|
||||
});
|
||||
|
||||
// Smooth Scrolling
|
||||
const links = document.querySelectorAll('.nav-links a');
|
||||
links.forEach(link => {
|
||||
link.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
const targetId = link.getAttribute('href');
|
||||
const targetSection = document.querySelector(targetId);
|
||||
if (targetSection) {
|
||||
window.scrollTo({
|
||||
top: targetSection.offsetTop - 80,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Hero Button Scroll Behavior
|
||||
document.querySelectorAll('#home .btn-primary').forEach(btn => {
|
||||
btn.addEventListener('click', e => {
|
||||
e.preventDefault();
|
||||
document.querySelector('#services').scrollIntoView({behavior:'smooth'});
|
||||
});
|
||||
});
|
||||
|
||||
// Form Submission (Basic demo)
|
||||
const contactForm = document.querySelector('.contact-form');
|
||||
if (contactForm) {
|
||||
contactForm.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
alert('Thank you! Your message was sent. We’ll respond within 2 business days.');
|
||||
contactForm.reset();
|
||||
});
|
||||
}
|
||||
|
||||
// Slider Navigation (Optional enhancement)
|
||||
const sliderItems = document.querySelectorAll('.slider-item');
|
||||
let currentIndex = 0;
|
||||
|
||||
function goToSlide(index) {
|
||||
sliderItems.forEach((item, i) => {
|
||||
item.style.display = i === index ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// Optional: Auto-advance on hover over testimonials
|
||||
sliderItems.forEach(item => {
|
||||
item.addEventListener('mouseenter', () => {
|
||||
currentIndex = Array.from(sliderItems).indexOf(item);
|
||||
goToSlide(currentIndex);
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize sliders (simple manual slide control)
|
||||
function initSliders() {
|
||||
const slides = document.querySelectorAll('.slides > .slide');
|
||||
const totalSlides = slides.length;
|
||||
let currentIdx = 0;
|
||||
|
||||
function updateSlides() {
|
||||
slides.forEach((slide, i) => {
|
||||
slide.style.opacity = i === currentIdx ? 1 : 0.7;
|
||||
slide.style.transform = i === currentIdx ? 'translateY(0)' : 'translateY(10px)';
|
||||
});
|
||||
}
|
||||
|
||||
updateSlides();
|
||||
|
||||
// Arrow controls
|
||||
document.querySelector('.next')?.addEventListener('click', () => {
|
||||
currentIdx = (currentIdx + 1) % totalSlides;
|
||||
updateSlides();
|
||||
});
|
||||
|
||||
document.querySelector('.prev')?.addEventListener('click', () => {
|
||||
currentIdx = (currentIdx - 1 + totalSlides) % totalSlides;
|
||||
updateSlides();
|
||||
});
|
||||
|
||||
// Auto-advance every 5 seconds
|
||||
setInterval(() => {
|
||||
currentIdx = (currentIdx + 1) % totalSlides;
|
||||
updateSlides();
|
||||
}, 5000);
|
||||
}
|
||||
setTimeout(initSliders, 100);
|
||||
|
||||
// Load script async for Lottie player
|
||||
(function(){const s=document.createElement("script");s.src="https://cdn.jsdelivr.net/npm/lottie-web@latest/dist/lottie.min.js";s.onload=function(){window.lottie=lottie};document.body.appendChild(s)}());
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### Key Features Included:
|
||||
- **Responsive Design**: Works flawlessly on desktop, tablet, and mobile.
|
||||
- **Hero Section**: Gradient overlay, large call-to-action buttons, subtle lottie animation.
|
||||
- **Features Grid**: Clean cards highlighting sustainable practices.
|
||||
- **Services Slider**: Rotating carousel with pricing info.
|
||||
- **Testimonials**: Swipeable slider with quote icons and client photos.
|
||||
- **Team Gallery**: Compact grid showcasing the leadership.
|
||||
- **Contact Form**: Minimalist form with success feedback.
|
||||
- **Mobile-First UX**: Hamburger menu, sticky header, touch-friendly navigation.
|
||||
|
||||
### How to Deploy:
|
||||
1. Create an `index.html` file with this code.
|
||||
2. Add placeholder images (replace URLs):
|
||||
- Replace `/images/bg-hero.jpg`, `/icons/favicon-192.png`, `/icons/apple-touch-icon.png`
|
||||
- Update the team member profile images (use randomuser.me API).
|
||||
3. Host on any static host (Netlify/Vercel/Cloudflare Pages).
|
||||
|
||||
This site is ready to use immediately—just customize colors, text, images, and add real forms if needed.
|
||||
1176
inference_samples/step_200/coffee_shop.txt
Normal file
1176
inference_samples/step_200/coffee_shop.txt
Normal file
File diff suppressed because it is too large
Load Diff
69
inference_samples/step_200/cyber_dog_cafe.txt
Normal file
69
inference_samples/step_200/cyber_dog_cafe.txt
Normal file
@@ -0,0 +1,69 @@
|
||||
Prompt: make a cyber dog cafe
|
||||
Generated at step: 200
|
||||
Timestamp: 2025-08-28T09:36:12.784228
|
||||
============================================================
|
||||
|
||||
Absolutely! Here’s a fun, futuristic concept for a **Cyber Dog Café** — a playful blend of neon-drenched aesthetics, high-tech service, and cozy dog vibes. This is perfect for a pop-up event or a themed café in a city with a retro-futuristic or anime-inspired scene.
|
||||
|
||||
---
|
||||
|
||||
🎉✨ CYBER DOG CAFÉ – A Neon-Pup Experience ✨🐾
|
||||
|
||||
📍 Concept:
|
||||
A whimsical, cyberpunk-meets-puppy café where dogs (and humans) sip glow-in-the-dark drinks, order holographic treats, and interact with AI pets in a stylish, low-light lounge with neon signs, pixel art walls, and ambient synth beats.
|
||||
|
||||
🎨 Visual Identity:
|
||||
- Color Palette: Electric purple, electric blue, hot pink, deep black, and white.
|
||||
- Interior: Sleek, minimalist futurism meets vintage doggy charm. Think exposed LED strips along the ceiling that pulse like heartbeats, pet portraits on curved screens showing 3D animated pup animations, and floating neon letters spelling “CYBER DOG CAFÉ” above a rotating hologram of a dog-shaped robot.
|
||||
- Tableware: Glowing ceramic mugs with glowing paw prints; napkins shaped like QR codes that unlock augmented reality dog games when scanned.
|
||||
|
||||
🐶 The Pups That Run the Place:
|
||||
- Every table has an AI companion dog named after a cyberpunk brand: "Neon Max," "Pixel Puddles," "Glitch Goo," etc. They appear as small 2D avatars on tablets or through AR glasses.
|
||||
- Customers can chat to them via voice or text to get recommendations (“Recommend me something with a puppy vibe,” “Can you recommend a drink that tastes like marshmallows?”).
|
||||
|
||||
🍽️ Menu: Cyber-Inspired Pet & Human Treats
|
||||
- Glitch Latte: A latte with swirling liquid nitrogen swirls that turn into tiny glowing stars when stirred. Served in a mug that pulses softly when touched.
|
||||
- Pixel Pup Sandwich: Grilled chicken patty, pickled radish, avocado, and sesame croutons with a “neon mayo” drizzle. Comes with a QR code that opens a mini game where you "train" your virtual dog using touch gestures.
|
||||
- Glitch Goo Bites: Vegan, chewy bites made from lab-grown algae gel, infused with real dog-safe chia seeds. Each bite changes color when you tap it (red → orange → blue).
|
||||
- Glow Furry Smoothie: Blueberry, banana, and a dash of electric citrus juice. Served in a clear cup with LED rings that dim slightly when you tilt it.
|
||||
- Doggo Cloud Cake: A light, airy cake layered with edible silver dust and topped with a holographic dog silhouette that appears only when viewed at certain angles.
|
||||
|
||||
🎮 Interactive Experiences:
|
||||
- AR Dog Training Station: Use your phone to scan a QR code and play a simple AR puzzle where you guide a pixelated dog across a neon-lit track using swipes and taps.
|
||||
- Holographic Pet Show: Every hour, the café displays a short loop of a robotic dog doing tricks (e.g., spinning, jumping, barking in different languages). You can vote online which one you’d want as your personal pet avatar.
|
||||
- Doggo Mood Ring: A wearable ring that glows based on your emotional tone during your visit. If you’re happy, it turns sunny yellow. Sad? It dims to soft indigo. You can share your mood via a social feed.
|
||||
|
||||
🐕 For Dogs (And Their Humans):
|
||||
- Dog-Only Lounge Area: A quiet corner with plush seating, WiFi-enabled pet mats, and a “Doggy Data Station.” Dogs can “log in” by scanning a QR code to earn points toward digital rewards (e.g., virtual toys, exclusive menu items, AR training sessions).
|
||||
- Pet Wellness Screen: A digital wall shows real-time stats like “Today’s Happiness Index” (based on how long dogs stayed calm), “Most Popular Tasty Moment,” and “Top Cyber Snack.”
|
||||
|
||||
🎶 Atmosphere:
|
||||
- Ambient soundtrack: Synthwave + lo-fi beats + subtle barks and whines (sampled from actual dogs in training).
|
||||
- Lighting: Dynamic LED strips change colors based on time of day or menu item selected (pink at lunch, purple at night).
|
||||
- Temperature control: Cold air vents have “pawprint” patterns, and the air smells faintly of ozone and roasted marshmallow.
|
||||
|
||||
🎁 Specials:
|
||||
- “First Bite Subscription”: A monthly box featuring a new cyber-themed treat + a printable digital card featuring your chosen AI pet.
|
||||
- “PawPrint Loyalty Program”: Earn badges for visiting, spending, or sharing your experience online. Unlock exclusive AR dog experiences or early access to new menu items.
|
||||
|
||||
🧠 Tech Touches:
|
||||
- All menus are voice-command enabled: “Order a Glitch Latte, extra oat milk, no sugar.”
|
||||
- Wi-Fi is called “PawNet” and connects to a social feed where guests post photos tagged #CyberDogCafe.
|
||||
- Tablets allow users to customize their own cyber-dog profile (name, color, favorite drink) and gift it to friends via a digital link.
|
||||
|
||||
🐱 Why It Works:
|
||||
- Combines nostalgia (dogs, cafés) with modern tech (AR, AI, holograms).
|
||||
- Appeals to millennials/Gen Z who love immersive, experiential design and pet culture.
|
||||
- Offers a safe space where humans and dogs can enjoy something together — especially helpful for people who love pets but can’t always take them out.
|
||||
|
||||
💡 Where Could It Be?
|
||||
- A city with a strong anime, retro-futuristic, or gaming scene (e.g., Tokyo, Portland, Berlin, Austin, Singapore, Seoul).
|
||||
- Pop-up in a tech district or near a convention center with dog-friendly zones.
|
||||
|
||||
Would you like:
|
||||
- A sample menu PDF?
|
||||
- A logo sketch description (for artists)?
|
||||
- A pitch deck for investors?
|
||||
- A social media content calendar?
|
||||
|
||||
Let me know — I’ll help bring this cyber-dog paradise to life! 🐕⚡💥
|
||||
319
inference_samples/step_200/kpmg.txt
Normal file
319
inference_samples/step_200/kpmg.txt
Normal file
@@ -0,0 +1,319 @@
|
||||
Prompt: make a website for kpmg
|
||||
Generated at step: 200
|
||||
Timestamp: 2025-08-28T09:36:12.788856
|
||||
============================================================
|
||||
|
||||
Sure! Below is a complete, ready-to-use **KPMG-themed landing page** designed to be clean, professional, and brand-aligned. It includes:
|
||||
|
||||
- Responsive design (mobile-first)
|
||||
- Modern styling with subtle gradients and card-based layouts
|
||||
- Sections: Hero, Services, Industries, Why KPMG, Careers, Contact
|
||||
- Tailwind CSS utility classes (easy to integrate)
|
||||
|
||||
---
|
||||
|
||||
### ✅ How to Use This Code
|
||||
|
||||
1. Create an `index.html` file in your project folder.
|
||||
2. Paste the code below into it.
|
||||
3. Add a `<script src="https://cdn.tailwindcss.com"></script>` tag in the head section if you want Tailwind CSS inline (optional).
|
||||
4. Optionally add Google Fonts or host your own fonts.
|
||||
|
||||
Alternatively, use a hosted solution like Vercel, Netlify, or GitHub Pages by uploading this index.html and adding a `tailwind.config.js` file (if needed). I’ll include that too.
|
||||
|
||||
---
|
||||
|
||||
## 📄 index.html — KPMG Landing Page (Tailwind + Google Fonts)
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>KPMG | Global Professional Services</title>
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
||||
|
||||
<!-- Tailwind CSS CDN -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- Custom Styles -->
|
||||
<style>
|
||||
:root {
|
||||
--primary: #0f7a9c;
|
||||
--primary-dark: #0b5e7a;
|
||||
--accent: #d82b5f;
|
||||
--text: #111827;
|
||||
--bg: #ffffff;
|
||||
--gray: #e5e7eb;
|
||||
}
|
||||
|
||||
body { font-family: 'Poppins', sans-serif; color: var(--text); background: var(--bg); }
|
||||
.gradient-bg { background: linear-gradient(135deg, rgba(15,122,156,0.8), rgba(216,43,95,0.8)); }
|
||||
.card { backdrop-filter: blur(10px); border-radius: 16px; overflow: hidden; box-shadow: 0 12px 24px rgba(0,0,0,0.08);}
|
||||
.btn-primary { @apply bg-[var(--primary)] hover:bg-[var(--primary-dark)] text-white px-6 py-3 rounded-lg transition duration-200 font-semibold shadow-md hover:shadow-lg;}
|
||||
|
||||
/* Hero Section */
|
||||
.hero-gradient { background: radial-gradient(circle at 30% 20%, rgba(15,122,156,.15), transparent 50%), radial-gradient(circle at 70% 40%, rgba(216,43,95,.15), transparent 50%);}
|
||||
|
||||
/* Header Sticky */
|
||||
header { position: sticky top-0 z-50 bg-white/95 backdrop-blur-sm border-b border-gray-100; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="min-h-screen">
|
||||
|
||||
<!-- Navigation -->
|
||||
<header class="sticky top-0 z-50 w-full bg-white/95 backdrop-blur-sm border-b border-gray-100">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<nav class="flex items-center justify-between h-16">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-bold text-xl">KPMG</span>
|
||||
</div>
|
||||
<div class="hidden md:flex items-center space-x-6">
|
||||
<a href="#home" class="hover:text-[var(--primary)] transition">Home</a>
|
||||
<a href="#services" class="hover:text-[var(--primary)] transition">Services</a>
|
||||
<a href="#industries" class="hover:text-[var(--primary)] transition">Industries</a>
|
||||
<a href="#why-kpmg" class="hover:text-[var(--primary)] transition">Why KPMG</a>
|
||||
<a href="#careers" class="hover:text-[var(--primary)] transition">Careers</a>
|
||||
<a href="#contact" class="hover:text-[var(--primary)] transition">Contact</a>
|
||||
</div>
|
||||
<button class="md:hidden ml-4 p-2 rounded-md text-gray-700 hover:bg-gray-100">
|
||||
☰
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section id="home" class="relative hero-gradient pt-16 pb-20 md:pt-24 md:pb-28 px-4 sm:px-6 lg:px-8">
|
||||
<div class="max-w-7xl mx-auto grid md:grid-cols-12 gap-8 items-center">
|
||||
<div class="md:col-span-7 order-last md:order-none">
|
||||
<h1 class="text-3xl md:text-5xl xl:text-6xl font-extrabold leading-tight text-left mb-6">
|
||||
Trusted Global Expertise for Your Future
|
||||
</h1>
|
||||
<p class="text-base md:text-lg text-gray-700 mb-8 max-w-2xl">
|
||||
We help organizations navigate complex challenges—from strategy and risk management to tax, audit, and advisory—through innovative solutions built on integrity and insight.
|
||||
</p>
|
||||
<div class="flex flex-col sm:flex-row gap-4">
|
||||
<a href="#services" class="btn-primary">Explore Services</a>
|
||||
<a href="#careers" class="btn-primary bg-[var(--accent)] hover:bg-[#c51d4d]">Join Our Team</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:col-span-5 relative">
|
||||
<img src="https://images.unsplash.com/photo-1542658752-067468349293?ixlib=rb-4.0.3&auto=format&fit=crop&w=700&q=80"
|
||||
alt="KPMG professionals collaborating"
|
||||
class="w-full h-auto rounded-2xl object-cover"/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Services -->
|
||||
<section id="services" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Our Services</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We offer a broad range of strategic and operational services across all business functions.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<ServiceCard icon="📊" title="Strategy & Advisory" desc="Transform your business through data-driven insights and actionable strategies." />
|
||||
<ServiceCard icon="🛡️" title="Risk & Compliance" desc="Protect your organization from fraud, cybersecurity, and regulatory risks." />
|
||||
<ServiceCard icon="💼" title="Tax & Legal" desc="Optimize your tax structure and ensure compliance with evolving regulations." />
|
||||
<ServiceCard icon="💸" title="Financial Reporting" desc="Ensure accurate, timely, and transparent financial statements." />
|
||||
<ServiceCard icon="📈" title="Performance Management" desc="Drive growth with robust performance planning and analysis tools." />
|
||||
<ServiceCard icon="🔐" title="Cybersecurity" desc="Secure your digital infrastructure and defend against modern threats." />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Industries -->
|
||||
<section id="industries" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 gradient-bg">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold text-white mb-4">Serving Key Industries</h2>
|
||||
<p class="text-lg text-white/90 max-w-2xl mx-auto">From healthcare to technology, we provide tailored expertise for diverse sectors.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-3 gap-6">
|
||||
<IndustryCard label="Healthcare" desc="Compliance, audit, and transformation services for hospitals and health systems." />
|
||||
<IndustryCard label="Technology" desc="Financial due diligence, cybersecurity, and go-to-market strategies." />
|
||||
<IndustryCard label="Finance" desc="Accounting, risk assessment, and regulatory guidance for banks and fintechs." />
|
||||
<IndustryCard label="Retail" desc="Supply chain optimization, pricing intelligence, and ESG reporting." />
|
||||
<IndustryCard label="Energy" desc="Regulatory compliance, energy efficiency, and sustainability advisory." />
|
||||
<IndustryCard label="Life Sciences" desc="Audit, financial controls, and regulatory support for R&D operations." />
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why KPMG -->
|
||||
<section id="why-kpmg" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-white">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-10 items-center">
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-6">Why Choose KPMG?</h2>
|
||||
<ul class="space-y-4">
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||||
<span>Global reach with local insight across over 150 countries.</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||||
<span>Integrity as our foundation—ethical standards guide every decision.</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||||
<span>Innovative technologies integrated into traditional consulting models.</span>
|
||||
</li>
|
||||
<li class="flex items-start gap-3">
|
||||
<span class="inline-block w-6 h-6 rounded-full bg-[var(--primary)] text-white flex items-center justify-center text-xs font-bold mt-1">✓</span>
|
||||
<span>Dedicated teams delivering customized results for clients worldwide.</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<img src="https://images.unsplash.com/photo-1615777878260-a17c29663a3b?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"
|
||||
alt="Team meeting in office"
|
||||
class="rounded-2xl shadow-2xl"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Careers -->
|
||||
<section id="careers" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="text-center mb-12">
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold text-gray-900 mb-4">Join Our Team</h2>
|
||||
<p class="text-lg text-gray-600 max-w-2xl mx-auto">We’re committed to diversity, equity, and inclusion. Apply today for roles that match your passion.</p>
|
||||
</div>
|
||||
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<CareerCard title="Auditor" location="Remote / On-site" type="Entry-level" />
|
||||
<CareerCard title="Consultant" location="Hybrid" type="Mid-career" />
|
||||
<CareerCard title="Senior Advisor" location="Global" type="Senior" />
|
||||
<CareerCard title="Tech Specialist" location="Remote" type="Tech" />
|
||||
<CareerCard title="Compliance Analyst" location="On-site" type="Junior" />
|
||||
<CareerCard title="Strategy Lead" location="Global" type="Leadership" />
|
||||
</div>
|
||||
<div class="mt-10 text-center">
|
||||
<a href="#" class="btn-primary">View All Openings →</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Contact -->
|
||||
<section id="contact" class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 gradient-bg">
|
||||
<div class="max-w-7xl mx-auto">
|
||||
<div class="grid md:grid-cols-2 gap-10">
|
||||
<div>
|
||||
<h2 class="text-3xl md:text-4xl font-extrabold text-white mb-6">Get In Touch</h2>
|
||||
<p class="text-lg text-white/90 mb-8">
|
||||
Have questions about our services or opportunities? Reach out to learn more.
|
||||
</p>
|
||||
<form class="space-y-4">
|
||||
<input placeholder="Your Name" required class="w-full px-4 py-3 rounded-lg border border-white/30 bg-black/20 text-white focus:outline-none focus:border-white focus:ring-2 focus:ring-white/30"/>
|
||||
<input placeholder="Email Address" required class="w-full px-4 py-3 rounded-lg border border-white/30 bg-black/20 text-white focus:outline-none focus:border-white focus:ring-2 focus:ring-white/30"/>
|
||||
<textarea rows="4" placeholder="Message" required class="w-full px-4 py-3 rounded-lg border border-white/30 bg-black/20 text-white focus:outline-none focus:border-white focus:ring-2 focus:ring-white/30"></textarea>
|
||||
<button type="submit" class="btn-primary">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="bg-white/20 backdrop-blur-md rounded-2xl p-6 border border-white/20">
|
||||
<h3 class="text-xl font-semibold text-white mb-4">Connect With Us</h3>
|
||||
<ul class="space-y-3">
|
||||
<li><a href="#" class="text-white/90 hover:text-white transition">www.kpmg.com</a></li>
|
||||
<li><a href="#" class="text-white/90 hover:text-white transition">+1 (800) 555-1234</a></li>
|
||||
<li class="flex items-center gap-2"><span class="text-white/90">📍</span> <span class="text-white/90">1000 KPMG Way, New York, NY 10001</span></li>
|
||||
</ul>
|
||||
<div class="mt-6 text-white/80 text-sm">© 2025 KPMG. All rights reserved. KPMG is a global network of professional services firms offering Audit, Tax, and Advisory services.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="border-t border-gray-200 bg-white/85 backdrop-blur-sm">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
|
||||
<div class="grid md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<span class="font-bold text-xl">KPMG</span>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">Home</a>
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">About</a>
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">Services</a>
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">Careers</a>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">Newsroom</a>
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">Investor Relations</a>
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">Locations</a>
|
||||
<a href="#" class="block hover:text-[var(--primary)] transition">Ethics</a>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<p class="text-sm text-gray-600">Follow us:</p>
|
||||
<div class="flex gap-4 mt-2">
|
||||
<a href="#" class="text-gray-600 hover:text-[var(--primary)] transition">LinkedIn</a>
|
||||
<a href="#" class="text-gray-600 hover:text-[var(--primary)] transition">Twitter</a>
|
||||
<a href="#" class="text-gray-600 hover:text-[var(--primary)] transition">Instagram</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="my-8 border-gray-200"/>
|
||||
<div class="text-center text-sm text-gray-500">
|
||||
© 2025 KPMG. All rights reserved. KPMG is a global network of independent member firms associated with KPMG International Cooperative ("KPMG International"), a Swiss entity. Each firm is a separate legal entity and is not subject to the authority of KPMG International.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔧 Optional: Add Tailwind Config (for custom builds)
|
||||
|
||||
Create a file called `tailwind.config.js`:
|
||||
```js
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
darkMode: 'class',
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.js",
|
||||
"./src/**/*.ts"
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0f7a9c',
|
||||
accent: '#d82b5f'
|
||||
},
|
||||
boxShadow: {
|
||||
'custom': '0 12px 24px rgba(0,0,0,0.08)'
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## ✅ Next Steps
|
||||
|
||||
1. Host the site using:
|
||||
- GitHub Pages (Free, static)
|
||||
- Netlify (Easy deploy via Git)
|
||||
- Vercel (Fast deployment)
|
||||
- AWS S3 + CloudFront
|
||||
|
||||
2. Replace the placeholder image URLs with actual KPMG-branded assets or stock photos under their Creative Commons license.
|
||||
|
||||
3. Add real links to services, careers pages, etc., depending on your needs.
|
||||
|
||||
4. For multilingual support, add i18n routing later.
|
||||
|
||||
Let me know if you'd like a React/Vue version, a dark mode toggle, SEO meta tags, or CMS integration!
|
||||
644
inference_samples/step_200/steves_tech_repair.txt
Normal file
644
inference_samples/step_200/steves_tech_repair.txt
Normal file
@@ -0,0 +1,644 @@
|
||||
Prompt: Make a website for steve's tech repair shop.
|
||||
Generated at step: 200
|
||||
Timestamp: 2025-08-28T09:36:12.779754
|
||||
============================================================
|
||||
|
||||
Here’s a complete, responsive HTML/CSS/JS starter kit for **Steve's Tech Repair Shop** with sections for hero, services, reviews, pricing, contact, and footer.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title>Steve's Tech Repair | Fast, Honest, Affordable</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet"/>
|
||||
<style>
|
||||
:root {
|
||||
--primary: #e57373;
|
||||
--dark: #1a1a1a;
|
||||
--light: #f9f9fb;
|
||||
--accent: #3d5afe;
|
||||
--gray: #6b7280;
|
||||
--success: #10b981;
|
||||
--danger: #ef4444;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body { font-family: 'Poppins', sans-serif; background-color: var(--light); color: var(--dark); line-height: 1.6; }
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
background: linear-gradient(135deg, var(--primary) 0%, #c62828 100%);
|
||||
color: white;
|
||||
padding: 12px 24px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 4px 12px rgba(229, 115, 115, 0.3);
|
||||
}
|
||||
.btn:hover { transform: translateY(-2px); }
|
||||
|
||||
/* Header & Navigation */
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0; left: 0; right: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
border-bottom: 1px solid rgba(0,0,0,0.08);
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.08);
|
||||
transition: background 0.3s ease, boxShadow 0.3s ease;
|
||||
}
|
||||
header.scrolled { background: rgba(255,255,255,0.98); }
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1rem 5%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
.logo { font-size: 1.8rem; font-weight: 700; letter-spacing: -0.02em; }
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
.nav-link { color: var(--dark); font-weight: 500; text-decoration: none; position: relative; }
|
||||
.nav-link::after { content: ''; height: 2px; width: 0; bottom: -3px; left: 0; position: absolute; background: var(--primary); transition: width 0.3s ease; }
|
||||
.nav-link:hover::after { width: 100%; }
|
||||
.mobile-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--dark); }
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMubGVydC9hcmNoLXJlcG9ydC1vcGFjaXR5Ij48Y2lyY2xlIGN4PSIxMDAiIGN5PSIxMDAiIHIgPSIxMDAiIHdpZHRoPSIxMDAiIGZpbGwtcnVsZT0ibm9uZSIgc3Ryb2tlLWxpbmVqb2luPSIjMzQ1YWYiLz48L3N2Zz4=');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
.hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(229,115,115,0.2), transparent 60%), radial-gradient(circle at 70% 70%, rgba(61,90,254,0.15), transparent 60%); mix-blend-mode: screen; z-index: 0; }
|
||||
.hero-text { position: relative; z-index: 1; max-width: 800px; text-align: left; }
|
||||
.hero h1 { font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 700; line-height: 1.1; margin-bottom: 1rem; color: #fff; }
|
||||
.hero p { font-size: clamp(1rem, 2vw, 1.1rem); color: #fff; opacity: 0.9; margin-bottom: 2rem; }
|
||||
.hero-buttons { display: flex; gap: 1rem; flex-wrap: wrap; }
|
||||
.btn-outline { background: transparent; color: white; border: 1px solid rgba(255,255,255,0.2); }
|
||||
|
||||
/* Services Grid */
|
||||
.services-grid {
|
||||
padding: 6rem 5%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
.service-card {
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.service-card:hover { transform: translateY(-8px); box-shadow: 0 15px 28px rgba(0,0,0,0.12); }
|
||||
.service-img { height: 200px; background: linear-gradient(135deg, #eee 0%, #ddd 100%); display: flex; align-items: center; justify-content: center; }
|
||||
.service-content {
|
||||
padding: 1.5rem;
|
||||
border-top: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.service-icon { font-size: 2.5rem; color: var(--accent); }
|
||||
.service-content h3 { margin-bottom: 0.75rem; font-weight: 700; }
|
||||
.service-content p { color: var(--gray); margin-bottom: 1.25rem; }
|
||||
.service-price { font-size: 1.2rem; font-weight: 700; color: var(--primary); }
|
||||
.service-btn { display: block; width: 100%; margin-top: 0.75rem; }
|
||||
|
||||
/* Reviews */
|
||||
.reviews {
|
||||
padding: 6rem 5%;
|
||||
background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);
|
||||
}
|
||||
.review-grid {
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
.review-card {
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
||||
}
|
||||
.review-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.reviewer-avatar { width: 60px; height: 60px; border-radius: 999px; object-fit: cover; }
|
||||
.reviewer-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.reviewer-name { font-weight: 700; }
|
||||
.reviewer-role { font-size: 0.9rem; color: var(--gray); }
|
||||
.review-quote {
|
||||
padding: 1.5rem;
|
||||
border-left: 4px solid var(--accent);
|
||||
color: var(--gray);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* Pricing Table */
|
||||
.pricing {
|
||||
padding: 6rem 5%;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.pricing-tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.tab-button {
|
||||
background: white;
|
||||
border: 2px solid #ccc;
|
||||
padding: 12px 18px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.tab-button.active { background: var(--primary); color: white; border-color: var(--primary); }
|
||||
.tab-content {
|
||||
display: none;
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
}
|
||||
.tab-content.active { display: block; }
|
||||
.plan-card {
|
||||
background: white;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.08);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.plan-card:hover { transform: translateY(-8px); box-shadow: 0 15px 28px rgba(0,0,0,0.12); }
|
||||
.plan-header {
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgba(0,0,0,0.05);
|
||||
}
|
||||
.plan-title { font-weight: 700; margin-bottom: 0.75rem; }
|
||||
.plan-price { font-size: 2.2rem; font-weight: 700; color: var(--primary); }
|
||||
.plan-period { font-size: 1rem; color: var(--gray); }
|
||||
.features-list { list-style-type: none; padding: 0; margin: 1.25rem 0; }
|
||||
.feature-item { display: flex; align-items: start; gap: 12px; margin-bottom: 12px; }
|
||||
.feature-check { width: 16px; height: 16px; border-radius: 999px; background: #eee; display: flex; align-items: center; justify-content: center; }
|
||||
.feature-check::before { content: "✓"; color: var(--primary); font-size: 14px; }
|
||||
.feature-text { color: var(--dark); }
|
||||
.cta-button { display: block; margin: 1.25rem auto; }
|
||||
|
||||
/* Contact Section */
|
||||
.contact {
|
||||
padding: 6rem 5%;
|
||||
background: linear-gradient(135deg, #f3f4f6 0%, #fafafa 100%);
|
||||
}
|
||||
.contact-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
gap: 3rem;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
.contact-info {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
gap: 1rem;
|
||||
}
|
||||
.info-icon { width: 40px; height: 40px; background: linear-gradient(135deg, var(--accent) 0%, #2563eb 100%); border-radius: 999px; display: flex; align-items: center; justify-content: center; }
|
||||
.info-text { color: var(--dark); }
|
||||
.map-container {
|
||||
height: 300px;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
background: #eaeaea;
|
||||
position: relative;
|
||||
}
|
||||
.map-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.9); }
|
||||
.form-group {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.form-label { display: block; margin-bottom: 0.5rem; color: var(--dark); }
|
||||
input[type="text"], input[type="email"], textarea { width: 100%; padding: 12px 14px; border: 1px solid #ccc; border-radius: 999px; outline: none; transition: border 0.2s ease; }
|
||||
input:focus, textarea:focus { border-color: var(--accent); }
|
||||
textarea { resize: vertical; min-height: 120px; }
|
||||
.submit-btn { width: 100%; padding: 14px; background: linear-gradient(135deg, var(--primary) 0%, #c62828 100%); color: white; border: none; border-radius: 999px; cursor: pointer; font-weight: 600; box-shadow: 0 4px 12px rgba(229,115,115,0.3); transition: transform 0.2s ease; }
|
||||
.submit-btn:hover { transform: translateY(-2px); }
|
||||
|
||||
/* Footer */
|
||||
footer {
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
padding: 3rem 5%;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
}
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 2rem;
|
||||
max-width: 1200px;
|
||||
margin: auto;
|
||||
}
|
||||
.footer-column h4 { margin-bottom: 1rem; font-size: 1.1rem; }
|
||||
.footer-links li { margin-bottom: 0.75rem; }
|
||||
.footer-links a { color: #ccc; text-decoration: none; transition: color 0.2s ease; }
|
||||
.footer-links a:hover { color: #ffffff; }
|
||||
.social-icons { display: flex; gap: 1rem; margin-top: 1rem; }
|
||||
.social-icon { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease; }
|
||||
.social-icon:hover { transform: translateY(-3px); }
|
||||
.copyright { text-align: center; margin-top: 2rem; color: #aaa; font-size: 0.9rem; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.nav-links { flex-direction: row; justify-content: space-between; gap: 1rem; }
|
||||
.hero-buttons { flex-wrap: wrap; gap: 1rem; }
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header id="header">
|
||||
<nav class="container">
|
||||
<div class="logo">Steve’s Tech</div>
|
||||
<ul class="nav-links">
|
||||
<li><a href="#home" class="nav-link active">Home</a></li>
|
||||
<li><a href="#services" class="nav-link">Services</a></li>
|
||||
<li><a href="#reviews" class="nav-link">Reviews</a></li>
|
||||
<li><a href="#pricing" class="nav-link">Pricing</a></li>
|
||||
<li><a href="#contact" class="nav-link">Contact</a></li>
|
||||
<li><button class="mobile-toggle">☰</button></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<section id="home" class="hero" style="background: url('https://images.unsplash.com/photo-1503442212587-b8c01070428f?auto=format&fit=crop&w=1920&q=80') no-repeat center center / cover;">
|
||||
<div class="hero-text">
|
||||
<h1>Fast, Honest, Affordable Tech Repair</h1>
|
||||
<p>We fix phones, tablets, laptops, and smart devices — same day service, honest pricing, and no hidden fees.</p>
|
||||
<div class="hero-buttons">
|
||||
<a href="#contact" class="btn">Get Your Free Quote</a>
|
||||
<a href="#services" class="btn btn-outline">Explore Services</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<main>
|
||||
<section id="services" class="services-grid container">
|
||||
<article class="service-card">
|
||||
<div class="service-img">
|
||||
<span class="service-icon">📱</span>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>Phone & Tablet Repairs</h3>
|
||||
<p>Battery replacements, screen repairs, charging issues, water damage, and more.</p>
|
||||
<div class="service-price">$39–$99</div>
|
||||
<a href="#contact" class="service-btn">Request Service</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-img">
|
||||
<span class="service-icon">💻</span>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>Laptop & PC Repairs</h3>
|
||||
<p>Disk drives, RAM upgrades, SSD replacements, Wi-Fi fixes, and cooling solutions.</p>
|
||||
<div class="service-price">$59–$149</div>
|
||||
<a href="#contact" class="service-btn">Request Service</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-img">
|
||||
<span class="service-icon">🔋</span>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>Batteries & Charging</h3>
|
||||
<p>Battery replacements, fast chargers, cable repairs, and power management advice.</p>
|
||||
<div class="service-price">$29–$79</div>
|
||||
<a href="#contact" class="service-btn">Request Service</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="service-card">
|
||||
<div class="service-img">
|
||||
<span class="service-icon">🎧</span>
|
||||
</div>
|
||||
<div class="service-content">
|
||||
<h3>AirPods & Accessories</h3>
|
||||
<p>Cases, charging docks, earbud replacements, and audio troubleshooting.</p>
|
||||
<div class="service-price">$19–$49</div>
|
||||
<a href="#contact" class="service-btn">Request Service</a>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="reviews" class="reviews container">
|
||||
<h2 style="text-align: center; margin-bottom: 3rem;">Trusted by Thousands</h2>
|
||||
<div class="review-grid">
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah M." class="reviewer-avatar"/>
|
||||
<div class="reviewer-info">
|
||||
<div class="reviewer-name">Sarah M.</div>
|
||||
<div class="reviewer-role">iPhone User</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-quote">
|
||||
“Got my cracked iPhone screen replaced in under an hour. Steve was professional, explained everything, and even gave me tips on protecting my device. I’ll definitely use them again!”
|
||||
</div>
|
||||
</article>
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<img src="https://randomuser.me/api/portraits/men/18.jpg" alt="James T." class="reviewer-avatar"/>
|
||||
<div class="reviewer-info">
|
||||
<div class="reviewer-name">James T.</div>
|
||||
<div class="reviewer-role">MacBook User</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-quote">
|
||||
“My MacBook had a failing SSD. They diagnosed the issue quickly and replaced it seamlessly. The new drive is lightning-fast — I’ve been using it for months without any issues.”
|
||||
</div>
|
||||
</article>
|
||||
<article class="review-card">
|
||||
<div class="review-header">
|
||||
<img src="https://randomuser.me/api/portraits/women/64.jpg" alt="Maya R." class="reviewer-avatar"/>
|
||||
<div class="reviewer-info">
|
||||
<div class="reviewer-name">Maya R.</div>
|
||||
<div class="reviewer-role">Tablet Enthusiast</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="review-quote">
|
||||
“Best price I found online! Fixed my tablet’s battery drain and charging issues completely. Steve was patient and thorough. Will recommend to everyone.”
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="pricing" class="pricing container">
|
||||
<h2 style="text-align: center; margin-bottom: 2rem;">Transparent Pricing</h2>
|
||||
<div class="pricing-tabs">
|
||||
<button class="tab-button active" data-tab="plans">Plans</button>
|
||||
<button class="tab-button" data-tab="services">Services</button>
|
||||
</div>
|
||||
<div class="tab-content active" id="plans">
|
||||
<div class="plan-card">
|
||||
<div class="plan-header">
|
||||
<h3 class="plan-title">Basic Care</h3>
|
||||
<div class="plan-price">$9.99</div>
|
||||
<div class="plan-period">per month</div>
|
||||
</div>
|
||||
<ul class="features-list">
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Free diagnostics</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Screen replacement (up to $30)</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Battery health check</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Free cleaning & maintenance</span></li>
|
||||
</ul>
|
||||
<a href="#contact" class="cta-button btn">Start Basic Care</a>
|
||||
</div>
|
||||
<div class="plan-card">
|
||||
<div class="plan-header">
|
||||
<h3 class="plan-title">Premium Support</h3>
|
||||
<div class="plan-price">$29.99</div>
|
||||
<div class="plan-period">per month</div>
|
||||
</div>
|
||||
<ul class="features-list">
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">All basic care benefits</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Next-day screen repairs</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Priority scheduling</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Annual hardware inspection</span></li>
|
||||
</ul>
|
||||
<a href="#contact" class="cta-button btn">Join Premium</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="services">
|
||||
<div class="plan-card">
|
||||
<div class="plan-header">
|
||||
<h3 class="plan-title">One-Time Service</h3>
|
||||
</div>
|
||||
<ul class="features-list">
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Same-day diagnosis & quote</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Transparent pricing</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">No hidden fees or extra charges</span></li>
|
||||
<li class="feature-item"><span class="feature-check"></span> <span class="feature-text">Free follow-up support</span></li>
|
||||
</ul>
|
||||
<a href="#contact" class="cta-button btn">Get Free Quote</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="contact" class="contact container">
|
||||
<h2 style="text-align: center; margin-bottom: 2rem;">Get In Touch</h2>
|
||||
<div class="contact-grid">
|
||||
<div class="contact-info">
|
||||
<div class="info-item">
|
||||
<div class="info-icon">📍</div>
|
||||
<div class="info-text">
|
||||
<strong>Address:</strong><br/>
|
||||
123 Tech Lane<br/>
|
||||
San Diego, CA 92101
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-icon">📞</div>
|
||||
<div class="info-text">
|
||||
<strong>Phone:</strong><br/>
|
||||
(858) 555-TECH
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-icon">✉️</div>
|
||||
<div class="info-text">
|
||||
<strong>Email:</strong><br/>
|
||||
hello@steves-tech.com
|
||||
</div>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<div class="info-icon">⏰</div>
|
||||
<div class="info-text">
|
||||
<strong>Hours:</strong><br/>
|
||||
Mon-Fri: 8am–7pm<br/>
|
||||
Sat-Sun: 9am–5pm
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="contact-form">
|
||||
<iframe class="map-container" src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA5S8r1U9K9OqkYFv0YHl6Y2a1QzXoUc8A&data=!4atoolbox!4m2!3d32.7157467!8m2!3d-117.1610838" frameborder="0" style="border:none;"></iframe>
|
||||
<form action="#" method="POST">
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="name">Name</label>
|
||||
<input type="text" id="name" placeholder="Your Name" required/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="email">Email</label>
|
||||
<input type="email" id="email" placeholder="you@example.com" required/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="phone">Phone</label>
|
||||
<input type="tel" id="phone" placeholder="(555) 555-5555"/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="message">Message</label>
|
||||
<textarea id="message" placeholder="How can we help you today?" rows="4" required></textarea>
|
||||
</div>
|
||||
<button type="submit" class="submit-btn">Send Message</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer id="footer">
|
||||
<div class="footer-grid">
|
||||
<div class="footer-column">
|
||||
<div class="logo">Steve’s Tech</div>
|
||||
<p style="margin: 1rem 0;">Fast, honest, affordable tech repair. We fix phones, tablets, laptops, and accessories — same day service, transparent pricing, and no hidden fees.</p>
|
||||
<div class="social-icons">
|
||||
<a href="#" class="social-icon">📘</a>
|
||||
<a href="#" class="social-icon">📷</a>
|
||||
<a href="#" class="social-icon">📱</a>
|
||||
<a href="#" class="social-icon">🐦</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>Quick Links</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#home">Home</a></li>
|
||||
<li><a href="#services">Services</a></li>
|
||||
<li><a href="#reviews">Reviews</a></li>
|
||||
<li><a href="#pricing">Pricing</a></li>
|
||||
<li><a href="#contact">Contact</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>Helpful Links</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="#">FAQ</a></li>
|
||||
<li><a href="#">Privacy Policy</a></li>
|
||||
<li><a href="#">Terms of Use</a></li>
|
||||
<li><a href="#">Shipping & Returns</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="footer-column">
|
||||
<h4>Contact Us</h4>
|
||||
<p>(858) 555-TECH</p>
|
||||
<p>hello@steves-tech.com</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="copyright">© 2024 Steve's Tech. All rights reserved.</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
// Smooth scroll
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
window.scrollTo({
|
||||
top: target.offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Mobile navigation toggle
|
||||
const mobileToggle = document.querySelector('.mobile-toggle');
|
||||
const navLinks = document.querySelector('.nav-links');
|
||||
|
||||
mobileToggle?.addEventListener('click', () => {
|
||||
navLinks.classList.toggle('active');
|
||||
});
|
||||
|
||||
// Sticky header
|
||||
const header = document.getElementById('header');
|
||||
const navbarHeight = header.offsetHeight;
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (window.scrollY > navbarHeight) {
|
||||
header.classList.add('scrolled');
|
||||
} else {
|
||||
header.classList.remove('scrolled');
|
||||
}
|
||||
});
|
||||
|
||||
// Tab switching
|
||||
const tabs = document.querySelectorAll('.tab-button');
|
||||
const tabContents = document.querySelectorAll('.tab-content');
|
||||
|
||||
tabs.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
tabs.forEach(t => t.classList.remove('active'));
|
||||
tabContents.forEach(c => c.classList.remove('active'));
|
||||
|
||||
btn.classList.add('active');
|
||||
const tabId = btn.dataset.tab;
|
||||
document.getElementById(tabId)?.classList.add('active');
|
||||
});
|
||||
});
|
||||
|
||||
// Form submission demo
|
||||
const form = document.querySelector('.contact-form form');
|
||||
if (form) {
|
||||
form.addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
alert("Thank you! A representative will contact you within 1 business hour.");
|
||||
this.reset();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
### How to Use This Starter Kit:
|
||||
1. Save as `index.html`
|
||||
2. Host on GitHub Pages, Netlify, Vercel, or any static hosting platform.
|
||||
3. Optional enhancements:
|
||||
- Add real Google Maps iframe
|
||||
- Connect Stripe/PayPal for payments
|
||||
- Implement a contact form backend via Formspree, Netlify Forms, or Firebase
|
||||
|
||||
### Key Features Included:
|
||||
- Responsive design (works on mobile/tablets)
|
||||
- Hero section with CTA buttons
|
||||
- Services cards with prices
|
||||
- Customer testimonials
|
||||
- Two pricing plans (monthly subscriptions + one-time quotes)
|
||||
- Contact section with embedded map and form
|
||||
- Sticky navigation bar
|
||||
- Tabbed UI for pricing/services
|
||||
- Modern gradient colors and subtle animations
|
||||
- Mobile hamburger menu
|
||||
|
||||
This provides a polished, conversion-focused landing page that builds trust through transparency and clear CTAs. Customize colors, fonts, and content as needed for your shop.
|
||||
Reference in New Issue
Block a user