644 lines
25 KiB
Plaintext
644 lines
25 KiB
Plaintext
|
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.
|