Health Data Export & AI Analyzer - Marketing Website

A bold, editorial-style marketing website for the Health Data Export & AI Analyzer app. Modern, unique, and unapologetically distinctive.

Design Philosophy

This isn't your typical SaaS landing page. We've deliberately avoided the generic AI-generated look with:

• Bold brutalist aesthetics - Black & white with neon green accent (#00ff88)
• Editorial typography - Space Grotesk + JetBrains Mono for personality
• Asymmetric layouts - Breaking the grid in interesting ways
• Direct, honest copy - "Stop wondering. Start knowing." No fluff.

Features

• 🎨 Unique Visual Style: Editorial/brutalist design that stands out
• 🖱️ Custom Cursor: Interactive cursor that follows mouse movement
• 📱 Fully Responsive: Optimized for desktop, tablet, and mobile
• ⚡ Performance Focused: Zero dependencies, vanilla everything
• 🎭 Clever Interactions: Scroll animations, typing effects, glitch effects
• 🎯 Conversion Optimized: Clear value prop and minimal friction

Sections

1. Hero: Bold typography, "DATA" background text, live stats cards
2. What (01): Direct explanation with numbered sections
3. Why (02): Black background section with repeating statements
4. How it works (03): Step-by-step breakdown with code/UI examples
5. Who uses it (04): Use cases for different audiences
6. Download: Clean CTA with metadata display
7. Footer: Minimal, monospace links

Technologies Used

• HTML5
• CSS3 (Grid, Flexbox, Custom Properties, transforms)
• Vanilla JavaScript (zero dependencies)
• Google Fonts (Space Grotesk, JetBrains Mono)

File Structure

healthanalyzerwebsite/
├── index.html          # Semantic HTML structure
├── styles.css          # All styling + animations
├── script.js           # Interactive features
└── README.md           # This file

Design Details

Color System

• --black: #0a0a0a (primary text/borders)
• --white: #ffffff (backgrounds)
• --accent: #00ff88 (neon green for highlights)
• Gray scale from 100-900 for subtle variations

Typography

• Space Grotesk: Headlines, body text (geometric, modern)
• JetBrains Mono: Labels, nav, code blocks (technical feel)

Key Interactions

• Custom cursor with dot + outline
• Scroll-triggered fade-in animations
• Number counting animations
• Typing effect for AI insights
• Glitch effect on "knowing" hover
• Rotating section numbers on scroll
• Card hover with shadow offset
• Download button slide-in effect

Layout Principles

• Large section numbers (01, 02, 03, 04) as wayfinding
• Asymmetric grids (not everything centered)
• Bold borders (2px solid black)
• Box shadows for depth (not blur, but offset)
• Generous whitespace

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile Safari (latest)

Custom cursor disabled on mobile/tablet for UX.

Customization

Colors

Edit CSS variables in styles.css lines 8-24:

:root {
    --accent: #00ff88; /* Change accent color here */
    --black: #0a0a0a;
    --white: #ffffff;
}

Copy

All text is in index.html - no content in JS or CSS.

App Store Link

Find/replace https://apps.apple.com/us/app/health-data-export-ai-analyzer/id6749297170

Performance

• 0 external dependencies (except fonts)
• Vanilla JS - no React/Vue/framework overhead
• CSS animations via transforms (GPU accelerated)
• Intersection Observer API for efficient scroll detection
• Lazy-loaded scroll animations

Philosophy

We built this to NOT look AI-generated:

• Real personality in the copy
• Asymmetric, editorial layouts
• Monospace + geometric font pairing
• Black/white/neon instead of purple gradients
• Direct, conversational tone
• Brutalist UI elements

What Makes This Different

Most health/AI landing pages look identical. This one:

• Uses bold typography as the main visual element
• Has numbered sections like a magazine article
• Features code snippets and real UI examples
• Speaks directly to specific user types
• Has a custom cursor and glitch effects
• Uses brutalist design principles

License

All rights reserved.