diff --git a/README.md b/README.md new file mode 100644 index 0000000..917e4cb --- /dev/null +++ b/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.). \ No newline at end of file diff --git a/assets/css/styles.css b/assets/css/styles.css new file mode 100644 index 0000000..6a15e79 --- /dev/null +++ b/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); } \ No newline at end of file diff --git a/assets/img/favicon.svg b/assets/img/favicon.svg new file mode 100644 index 0000000..d80e844 --- /dev/null +++ b/assets/img/favicon.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js new file mode 100644 index 0000000..4d90411 --- /dev/null +++ b/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)); +}); \ No newline at end of file diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..47e514a --- /dev/null +++ b/contact.html @@ -0,0 +1,121 @@ + + + + + + Contact & Support — Elora + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+
+

Contact & Support

+

Questions, feedback, or need help? We’ve got you.

+
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+ +
+
+

Support hours

+

Mon–Fri, 9am–6pm PT

+

Email: support@elora.health

+
+
+

Quick answers

+
+
+ +

We ship to the US, Canada, UK, and EU.

+
+
+ +

30-day risk-free returns. Full refund if it’s not for you.

+
+
+
+
+
+
+
+ + + + + + \ No newline at end of file diff --git a/features.html b/features.html new file mode 100644 index 0000000..1163ca0 --- /dev/null +++ b/features.html @@ -0,0 +1,142 @@ + + + + + + Features — Elora + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+
+

Features

+

Thoughtful technology that adapts to your life, not the other way around.

+
+
+ +
+
+
+
+ Biometric sensors close-up +
+
+

Biometric monitoring

+

Continuous tracking of heart rate variability (HRV), skin temperature, and motion to estimate stress load and recovery in real time.

+
    +
  • Adaptive sampling for battery efficiency
    • +
  • On-device filtering for robust signals
    • +
  • Privacy-first, encrypted by default
    • +
+
+
+ +
+
+ Personalized AI interface +
+
+

Personalized stress support

+

Elora adapts to your patterns and preferences, learning what calms you most effectively, and recommending the right technique at the right moment.

+
    +
  • Context-aware suggestions
    • +
  • Daily reflection prompts
    • +
  • Long-term trends and coaching
    • +
+
+
+ +
+
+ Vibration motor illustrating haptic cues +
+
+

Micro‑intervention cues

+

Subtle haptic guidance for breathing and grounding practices that help regulate your nervous system without interrupting your day.

+
    +
  • Gentle, customizable vibrations
    • +
  • Guided 1–3 minute practices
    • +
  • On-demand or auto‑suggested
    • +
+
+
+ +
+
+ Lifestyle recommendations dashboard +
+
+

Lifestyle insights

+

Actionable recommendations that connect your sleep, movement, and routines to your stress resilience.

+
    +
  • Daily summary and weekly reports
    • +
  • Goal tracking and streaks
    • +
  • Shareable progress for care teams
    • +
+
+
+
+
+ +
+
+

Experience Elora for yourself

+ Get started +
+
+
+ + + + + + \ No newline at end of file diff --git a/how-it-works.html b/how-it-works.html new file mode 100644 index 0000000..b355867 --- /dev/null +++ b/how-it-works.html @@ -0,0 +1,100 @@ + + + + + + How It Works — Elora + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+
+

How Elora works

+

From signals to support in seconds.

+
+
+ +
+
+
+
+

1. Sense

+

Elora continuously collects HRV, temperature, and motion signals.

+
+
+

2. Understand

+

On-device models detect rising stress and match your context.

+
+
+

3. Support

+

Personalized cues guide you through quick practices to reset.

+
+
+
+ Explore features +
+
+
+ +
+
+

Start your calmer routine

+ Get Elora +
+
+
+ + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..239830a --- /dev/null +++ b/index.html @@ -0,0 +1,132 @@ + + + + + + Elora — Wearable AI for Stress & Anxiety + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+
+

Feel calm, in control, and supported — every day

+

Elora is a wearable AI that monitors your stress in real-time and delivers gentle, personalized micro‑interventions to help you reset in the moment.

+
+ Get Elora + See features +
+
+ Person wearing a sleek health wearable on their wrist +
+
+
+ +
+
+

What Elora can do

+
+
+

Biometric monitoring

+

Continuous heart rate variability, skin temperature, and motion analysis to measure stress load.

+
+
+

Personalized support

+

AI learns your routines and triggers to recommend what works best for you.

+
+
+

Micro‑interventions

+

Gentle vibration cues guide breathwork and grounding exercises in the moment.

+
+
+

Lifestyle insights

+

Daily and weekly trends with sleep, movement, and recovery recommendations.

+
+
+
+ Explore all features +
+
+
+ +
+
+

Loved by people managing real life

+
+
+
"Elora helps me catch stress spirals before they happen. The cues feel like a friend checking in."
+
— Maya, designer
+
+
+
"I’ve tried everything. This is the first thing that stuck."
+
— Jordan, teacher
+
+
+
"The breathing guidance is subtle and calming. I use it every commute."
+
— Priya, engineer
+
+
+
+
+ +
+
+

Ready to feel more at ease?

+ Choose your plan +
+
+
+ + + + + + \ No newline at end of file diff --git a/pricing.html b/pricing.html new file mode 100644 index 0000000..c1101be --- /dev/null +++ b/pricing.html @@ -0,0 +1,128 @@ + + + + + + Pricing — Elora + + + + + + + + + + + + + + + +
+
+ + +
+
+ +
+
+
+

Pricing

+

Simple, transparent, and flexible for your needs.

+
+
+ +
+
+
+
+

Device

+

$199 one-time

+
    +
  • Elora wearable
    • +
  • Core biometric monitoring
    • +
  • Manual micro‑interventions
    • +
+ Buy Device +
+
+

Device + Insights

+

$199 + $9/mo

+
    +
  • Everything in Device
    • +
  • Smart stress detection
    • +
  • Personalized recommendations
    • +
+ Start with Insights +
+
+

Pro

+

$199 + $19/mo

+
    +
  • Everything in Insights
    • +
  • Extended analytics
    • +
  • Priority support
    • +
+ Go Pro +
+
+
+
+ +
+
+

Frequently asked questions

+
+
+ +

No. Elora is a wellness product and not intended to diagnose or treat conditions.

+
+
+ +

Up to 3 days depending on usage.

+
+
+ +

Yes, core features work without a subscription. Insights add personalization.

+
+
+
+
+
+ + + + + + \ No newline at end of file