-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathDemo
More file actions
135 lines (131 loc) · 7 KB
/
Copy pathDemo
File metadata and controls
135 lines (131 loc) · 7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Cisco Laptop Shop (Demo)</title>
<meta name="description" content="Cisco laptop store page for demos with plug‑and‑play chatbot widget." />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
:root{
--cisco-blue:#00BCEB;
--cisco-deep:#006E96;
--cisco-teal:#1BB6A4;
--ink:#0b1f2b;
}
.brand-gradient{background: linear-gradient(135deg,var(--cisco-deep),var(--cisco-blue));}
.chip{border:1px solid rgba(255,255,255,.2);}
</style>
</head>
<body class="bg-slate-50 text-slate-900">
<!-- Top bar / hero -->
<header class="brand-gradient text-white">
<div class="max-w-7xl mx-auto px-4 py-4 flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="h-9 w-9 rounded-xl bg-white/10 grid place-items-center chip">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12h16" /><path d="M4 6h16" /><path d="M4 18h16" /></svg>
</div>
<h1 class="font-semibold text-lg tracking-wide">Meraki Laptops • Demo Store</h1>
</div>
<nav class="hidden md:flex items-center gap-6 text-white/90">
<a href="#laptops" class="hover:text-white">Laptops</a>
<a href="#about" class="hover:text-white">About</a>
<a href="#contact" class="hover:text-white">Contact</a>
</nav>
<button class="md:hidden px-3 py-2 rounded-lg bg-white/10 chip">Menu</button>
</div>
<div class="max-w-7xl mx-auto px-4 pb-14 pt-10 grid md:grid-cols-2 gap-10 items-center">
<div>
<h2 class="text-3xl md:text-4xl font-bold leading-tight">Enterprise‑grade laptops for hybrid work</h2>
<p class="mt-4 text-white/90">This is a mock storefront for demos and chat testing, styled with a Cisco‑inspired palette. No payments, no accounts, just a clean page to host a chatbot.</p>
<div class="mt-6 flex flex-wrap gap-3">
<span class="px-3 py-1 rounded-full bg-white/10 chip">Wi‑Fi 6E</span>
<span class="px-3 py-1 rounded-full bg-white/10 chip">Zero‑Touch</span>
<span class="px-3 py-1 rounded-full bg-white/10 chip">SASE‑ready</span>
</div>
<a href="#laptops" class="inline-block mt-6 px-5 py-3 rounded-xl bg-white text-ink font-semibold">Browse models</a>
</div>
<div class="relative">
<div class="absolute -inset-4 rounded-3xl blur-2xl opacity-30" style="background: radial-gradient(600px 200px at 30% 30%, var(--cisco-blue), transparent), radial-gradient(400px 200px at 70% 60%, var(--cisco-teal), transparent);"></div>
<div class="relative bg-white/10 border border-white/20 rounded-3xl p-6 backdrop-blur-lg">
<img src="https://picsum.photos/seed/laptophero/600/400" alt="Laptop" class="rounded-2xl"/>
</div>
</div>
</div>
</header>
<!-- Products -->
<main id="laptops" class="max-w-7xl mx-auto px-4 py-12">
<h3 class="text-2xl font-bold mb-6">Featured laptops</h3>
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<article class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<img class="w-full h-44 object-cover" src="https://picsum.photos/seed/laptop1/400/250" alt="Ultrabook" />
<div class="p-5">
<h4 class="font-semibold">MerakiBook 13 Pro</h4>
<p class="text-sm text-slate-600 mt-1">13.3" QHD, Intel Core Ultra, 32GB, 1TB</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--cisco-deep)]">$1,699</span>
<button class="px-4 py-2 rounded-xl bg-[var(--cisco-deep)] text-white">Add to cart</button>
</div>
</div>
</article>
<article class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<img class="w-full h-44 object-cover" src="https://picsum.photos/seed/laptop2/400/250" alt="Developer laptop" />
<div class="p-5">
<h4 class="font-semibold">Catalyst 15 Dev</h4>
<p class="text-sm text-slate-600 mt-1">15" 3K, Ryzen 9, 64GB, 2TB</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--cisco-deep)]">$1,999</span>
<button class="px-4 py-2 rounded-xl bg-[var(--cisco-deep)] text-white">Add to cart</button>
</div>
</div>
</article>
<article class="bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden">
<img class="w-full h-44 object-cover" src="https://picsum.photos/seed/laptop3/400/250" alt="Mobile workstation" />
<div class="p-5">
<h4 class="font-semibold">Nexus 16 Studio</h4>
<p class="text-sm text-slate-600 mt-1">16" 4K, RTX, 64GB, 4TB</p>
<div class="mt-4 flex items-center justify-between">
<span class="text-lg font-bold text-[var(--cisco-deep)]">$2,499</span>
<button class="px-4 py-2 rounded-xl bg-[var(--cisco-deep)] text-white">Add to cart</button>
</div>
</div>
</article>
</div>
<!-- Trust row -->
<section class="mt-12 grid md:grid-cols-3 gap-6">
<div class="p-6 rounded-2xl bg-white border border-slate-200">
<h5 class="font-semibold">Secure by design</h5>
<p class="text-sm text-slate-600 mt-1">TPM 2.0, BIOS locks, and verified boot for enterprise fleets.</p>
</div>
<div class="p-6 rounded-2xl bg-white border border-slate-200">
<h5 class="font-semibold">Remote ready</h5>
<p class="text-sm text-slate-600 mt-1">Wi‑Fi 6E and optional 5G for anywhere productivity.</p>
</div>
<div class="p-6 rounded-2xl bg-white border border-slate-200">
<h5 class="font-semibold">Fleet management</h5>
<p class="text-sm text-slate-600 mt-1">MDM friendly, zero‑touch enrollment, and asset insights.</p>
</div>
</section>
</main>
<!-- Footer -->
<footer id="about" class="mt-8 border-t border-slate-200">
<div class="max-w-7xl mx-auto px-4 py-10 grid md:grid-cols-3 gap-8 items-start">
<div>
<h6 class="font-semibold">About this demo</h6>
<p class="text-sm text-slate-600 mt-2">Single‑file static site meant to host a chatbot widget. Replace text and images as needed. Avoid using Cisco logos or trademarks without permission.</p>
</div>
<div>
<h6 class="font-semibold">Contact</h6>
<p class="text-sm text-slate-600 mt-2">Email: demo@example.com<br>Location: Hartville, OH</p>
</div>
<div>
<h6 class="font-semibold">Legal</h6>
<p class="text-sm text-slate-600 mt-2">This is a mock storefront. No real products are sold. © 2025</p>
</div>
</div>
</footer>
<!-- ===================== CHATBOT: pick one free option ===================== -->
<!-- Add Crisp/Tidio/Botpress snippet or iframe here -->
</body>
</html>