Build Elora wearable AI website

README.md

@@ -0,0 +1,37 @@
+# Elora — Wearable AI for Stress & Anxiety
+
+A modern, responsive marketing website for Elora, a wearable AI that helps users monitor and manage chronic stress and anxiety.
+
+## Quick start
+
+Serve the site locally with any static HTTP server:
+
+```bash
+# Using Python (3.x)
+python3 -m http.server 3000
+# Then open http://localhost:3000 in your browser
+```
+
+Other options:
+
+```bash
+# Using Node
+npx serve . -l 3000 --single
+```
+
+## Structure
+
+- `index.html` — Homepage with hero, features preview, testimonials, CTA
+- `features.html` — Detailed features: biometrics, personalization, micro‑interventions, lifestyle insights
+- `how-it-works.html` — Three-step flow with diagram-style cards
+- `pricing.html` — Plan cards, FAQs, purchase CTAs
+- `contact.html` — Contact form and support FAQs
+- `assets/css/styles.css` — Global styles and responsive theme
+- `assets/js/main.js` — Interactions: mobile nav, accordions, form demo, reveal animations
+- `assets/img/favicon.svg` — Favicon
+
+## Notes
+
+- Images use high-quality placeholders from Unsplash.
+- Forms are non-functional by default; a demo handler shows success messaging.
+- The site is fully static and can be deployed on any static host (GitHub Pages, Netlify, Vercel, S3, etc.).

assets/css/styles.css

@@ -0,0 +1,116 @@
+/* Base placeholder styles to be expanded */
+:root {
+	--bg: #0b1020;
+	--bg-soft: #0f1530;
+	--surface: #121937;
+	--text: #e8ecf8;
+	--text-muted: #aab2cf;
+	--primary: #6ad6e8;
+	--primary-600: #3bbcd3;
+	--accent: #a7f3d0;
+	--ring: rgba(106, 214, 232, 0.45);
+}
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+	margin: 0;
+	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+	background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
+	color: var(--text);
+}
+img { max-width: 100%; display: block; height: auto; border-radius: 16px; }
+.container { width: min(1100px, 92%); margin: 0 auto; }
+
+.site-header { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(10px); background: rgba(11,16,32,0.6); border-bottom: 1px solid rgba(255,255,255,0.06); }
+.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; }
+.logo { font-weight: 700; letter-spacing: 0.4px; color: var(--text); text-decoration: none; font-size: 20px; }
+.nav { display: flex; align-items: center; gap: 16px; }
+.nav-links { list-style: none; display: none; gap: 12px; padding: 0; margin: 0; }
+.nav-links a { color: var(--text); text-decoration: none; padding: 10px 12px; border-radius: 10px; }
+.nav-links a[aria-current="page"], .nav-links a:hover { background: rgba(255,255,255,0.06); }
+.nav-cta { display: none; }
+.nav-toggle { background: transparent; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; }
+.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--text); margin: 3px 0; border-radius: 2px; }
+
+@media (min-width: 880px) {
+	.nav-links { display: flex; }
+	.nav-cta { display: inline-flex; }
+	.nav-toggle { display: none; }
+}
+
+h1 { font-size: clamp(32px, 4vw, 56px); line-height: 1.08; margin: 0 0 12px; }
+h2 { font-size: clamp(24px, 3vw, 36px); margin: 0 0 8px; }
+.lead { color: var(--text-muted); font-size: clamp(16px, 2vw, 18px); }
+
+.hero { padding: 56px 0; }
+.hero .hero-cta { display: flex; gap: 12px; margin: 20px 0 28px; }
+.hero .hero-media { margin-top: 12px; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,0.06); box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
+
+.page-hero { padding: 56px 0 24px; border-bottom: 1px solid rgba(255,255,255,0.06); }
+
+.button { appearance: none; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--text); padding: 12px 16px; border-radius: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
+.button:hover { border-color: rgba(255,255,255,0.22); }
+.button-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-600) 100%); border: none; color: #0b1020; font-weight: 600; }
+.button-ghost { background: transparent; border: 1px solid rgba(255,255,255,0.2); }
+
+.grid { display: grid; gap: 16px; }
+.cards-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+.cards-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+.two { grid-template-columns: 1fr; }
+@media (min-width: 900px) { .two { grid-template-columns: 1.1fr 0.9fr; gap: 24px; } }
+
+.card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
+.card.highlighted { outline: 2px solid var(--ring); box-shadow: 0 10px 50px rgba(106,214,232,0.15); }
+
+.features-preview { padding: 36px 0; }
+.testimonials { padding: 36px 0; }
+.testimonials-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
+.testimonial { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; }
+.testimonial blockquote { margin: 0 0 8px; }
+
+.cta-strip { padding: 36px 0; border-top: 1px solid rgba(255,255,255,0.06); display: grid; place-items: center; text-align: center; }
+.center { text-align: center; }
+.mt-24 { margin-top: 24px; }
+.muted { color: var(--text-muted); }
+
+.features-detail { padding: 36px 0; }
+.feature { display: grid; gap: 16px; margin: 12px 0 20px; }
+@media (min-width: 900px) { .feature { grid-template-columns: 1.1fr 0.9fr; align-items: center; } }
+
+.pricing { padding: 36px 0; }
+.price span { font-size: 32px; font-weight: 700; }
+.list { padding-left: 18px; }
+
+.faq { padding: 36px 0; }
+.accordion-item { border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
+.accordion-header { width: 100%; text-align: left; background: rgba(255,255,255,0.04); color: var(--text); border: none; padding: 14px 16px; cursor: pointer; }
+.accordion-panel { display: none; padding: 0 16px 14px; color: var(--text-muted); }
+
+.contact { padding: 36px 0; }
+.form .form-row { display: grid; gap: 6px; margin-bottom: 12px; }
+input, select, textarea { width: 100%; padding: 12px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04); color: var(--text); }
+input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
+.form-feedback { margin-top: 8px; min-height: 20px; }
+
+.site-footer { border-top: 1px solid rgba(255,255,255,0.06); padding: 24px 0; margin-top: 24px; }
+.footer-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); align-items: start; }
+.footer-nav { display: grid; gap: 6px; }
+.footer-nav a { color: var(--text); text-decoration: none; padding: 6px 0; }
+
+/* Utilities */
+.hidden { display: none !important; }
+
+/* Mobile nav open panel */
+.nav { position: relative; }
+.nav.open .nav-links { display: grid; position: absolute; top: 56px; right: 0; background: rgba(11,16,32,0.95); border: 1px solid rgba(255,255,255,0.08); padding: 10px; border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,0.4); min-width: 220px; }
+.nav.open .nav-links li a { display: block; }
+
+/* How it works diagram */
+.how-diagram { padding: 36px 0; }
+.diagram { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
+.step { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 18px; }
+
+/* Reveal on scroll */
+.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
+.reveal.in { opacity: 1; transform: translateY(0); }

assets/js/main.js

@@ -0,0 +1,66 @@
+document.addEventListener('DOMContentLoaded', () => {
+	// Mobile nav toggle
+	const navToggle = document.querySelector('[data-nav-toggle]');
+	const nav = document.querySelector('[data-nav]');
+	if (navToggle && nav) {
+		navToggle.setAttribute('aria-expanded', 'false');
+		navToggle.addEventListener('click', () => {
+			nav.classList.toggle('open');
+			const expanded = navToggle.getAttribute('aria-expanded') === 'true';
+			navToggle.setAttribute('aria-expanded', String(!expanded));
+		});
+		// Close on link click (mobile)
+		nav.querySelectorAll('.nav-links a').forEach(a => a.addEventListener('click', () => {
+			nav.classList.remove('open');
+			navToggle.setAttribute('aria-expanded', 'false');
+		}));
+	}
+
+	// Current year in footer
+	const yearTargets = document.querySelectorAll('[data-year]');
+	yearTargets.forEach(el => el.textContent = new Date().getFullYear());
+
+	// Simple accordion
+	document.querySelectorAll('[data-accordion] .accordion-item').forEach(item => {
+		const header = item.querySelector('.accordion-header');
+		const panel = item.querySelector('.accordion-panel');
+		if (!header || !panel) return;
+		header.setAttribute('aria-expanded', 'false');
+		panel.style.display = 'none';
+		header.addEventListener('click', () => {
+			const expanded = header.getAttribute('aria-expanded') === 'true';
+			header.setAttribute('aria-expanded', String(!expanded));
+			panel.style.display = expanded ? 'none' : 'block';
+		});
+	});
+
+	// Contact form demo handler
+	const form = document.querySelector('[data-contact-form]');
+	if (form) {
+		form.addEventListener('submit', async (e) => {
+			e.preventDefault();
+			const feedback = form.querySelector('.form-feedback');
+			feedback.textContent = 'Sending...';
+			try {
+				await new Promise(r => setTimeout(r, 800));
+				feedback.textContent = 'Thanks! We will be in touch soon.';
+				form.reset();
+			} catch (err) {
+				feedback.textContent = 'Something went wrong. Please try again.';
+			}
+		});
+	}
+
+	// Reveal on scroll
+	const revealTargets = document.querySelectorAll('.card, .feature, .testimonial, .step');
+	revealTargets.forEach(el => el.classList.add('reveal'));
+	const io = new IntersectionObserver((entries) => {
+		entries.forEach(entry => {
+			if (entry.isIntersecting) {
+				entry.target.classList.add('in');
+				io.unobserve(entry.target);
+			}
+		});
+	}, { threshold: 0.1 });
+	revealTargets.forEach(el => io.observe(el));
+});

contact.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Contact & Support — Elora</title>
+	<meta name="description" content="Get in touch with Elora support. We're here to help.">
+	<meta name="theme-color" content="#0b1020">
+	<meta property="og:title" content="Contact & Support — Elora">
+	<meta property="og:description" content="Questions or feedback? Reach our support team.">
+	<meta property="og:type" content="website">
+	<meta property="og:url" content="/contact.html">
+	<meta property="og:image" content="https://images.unsplash.com/photo-1508061253366-f7da158b6d46?q=80&w=1200&auto=format&fit=crop">
+	<meta name="twitter:card" content="summary_large_image">
+	<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=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+	<link rel="icon" href="/assets/img/favicon.svg" type="image/svg+xml">
+	<link rel="stylesheet" href="/assets/css/styles.css">
+</head>
+<body>
+	<header class="site-header" data-header>
+		<div class="container">
+			<a href="/index.html" class="logo">Elora</a>
+			<nav class="nav" data-nav>
+				<button class="nav-toggle" aria-label="Open navigation" aria-controls="primary-navigation" aria-expanded="false" data-nav-toggle>
+					<span></span><span></span><span></span>
+				</button>
+				<ul class="nav-links" id="primary-navigation">
+					<li><a href="/features.html">Features</a></li>
+					<li><a href="/how-it-works.html">How it works</a></li>
+					<li><a href="/pricing.html">Pricing</a></li>
+					<li><a href="/contact.html" aria-current="page">Contact</a></li>
+				</ul>
+				<a class="button button-primary nav-cta" href="/pricing.html">Buy Now</a>
+			</nav>
+		</div>
+	</header>
+
+	<main>
+		<section class="page-hero">
+			<div class="container">
+				<h1>Contact & Support</h1>
+				<p class="lead">Questions, feedback, or need help? We’ve got you.</p>
+			</div>
+		</section>
+
+		<section class="contact">
+			<div class="container grid two">
+				<form class="card form" data-contact-form>
+					<div class="form-row">
+						<label for="name">Name</label>
+						<input id="name" name="name" type="text" placeholder="Your name" required>
+					</div>
+					<div class="form-row">
+						<label for="email">Email</label>
+						<input id="email" name="email" type="email" placeholder="you@example.com" required>
+					</div>
+					<div class="form-row">
+						<label for="topic">Topic</label>
+						<select id="topic" name="topic">
+							<option>General question</option>
+							<option>Order & shipping</option>
+							<option>Technical support</option>
+						</select>
+					</div>
+					<div class="form-row">
+						<label for="message">Message</label>
+						<textarea id="message" name="message" rows="5" placeholder="How can we help?" required></textarea>
+					</div>
+					<button class="button button-primary" type="submit">Send message</button>
+					<p class="form-feedback" role="status" aria-live="polite"></p>
+				</form>
+
+				<div class="support">
+					<div class="card">
+						<h3>Support hours</h3>
+						<p>Mon–Fri, 9am–6pm PT</p>
+						<p>Email: support@elora.health</p>
+					</div>
+					<div class="card">
+						<h3>Quick answers</h3>
+						<div class="accordion" data-accordion>
+							<div class="accordion-item">
+								<button class="accordion-header">Where do you ship?</button>
+								<div class="accordion-panel"><p>We ship to the US, Canada, UK, and EU.</p></div>
+							</div>
+							<div class="accordion-item">
+								<button class="accordion-header">What is the return policy?</button>
+								<div class="accordion-panel"><p>30-day risk-free returns. Full refund if it’s not for you.</p></div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+		</section>
+	</main>
+
+	<footer class="site-footer">
+		<div class="container">
+			<div class="footer-grid">
+				<div>
+					<a href="/index.html" class="logo">Elora</a>
+					<p class="muted">Wearable AI for stress and anxiety support.</p>
+				</div>
+				<nav class="footer-nav">
+					<a href="/features.html">Features</a>
+					<a href="/how-it-works.html">How it works</a>
+					<a href="/pricing.html">Pricing</a>
+					<a href="/contact.html">Contact</a>
+				</nav>
+				<div class="footnote">
+					<p class="muted">© <span data-year></span> Elora Health, Inc.</p>
+				</div>
+			</div>
+		</div>
+	</footer>
+
+	<script src="/assets/js/main.js" defer></script>
+</body>
+</html>