Glassmorphism Landing Page

Create a modern, single-page landing page website using a glassmorphism design style. The page should feel premium, airy, and futuristic.

Design Requirements

Background: A vibrant gradient background (e.g., deep purple → electric blue → teal) that spans the full viewport

Cards & Containers: Use frosted-glass effect — semi-transparent backgrounds (rgba white at 10-20% opacity) with backdrop-filter: blur(16px) and a subtle 1px white/transparent border

Color Palette: Primary gradient (#667eea → #764ba2), white text on glass elements, accent color for CTAs (#00d4ff)

Typography: Clean sans-serif font (Inter), large hero heading (4-5rem), light font weights for body text

Layout: Full-width hero section with centered content, 3-column feature cards below, testimonial section, and CTA footer

Sections to Include

Navigation Bar — Transparent/glass nav with logo left, links right, glass effect on scroll

Hero Section — Large headline, subtext, two CTA buttons (primary filled, secondary outlined/glass)

Features Grid — 3 glassmorphic cards with icons, titles, and descriptions

Social Proof — Testimonial cards with glass effect, user avatars

Pricing — 3-tier pricing table with glass cards, highlighted "popular" tier

Footer — Minimal footer with links and newsletter signup

Technical Details

Responsive design (mobile-first)

Smooth scroll behavior

Subtle hover animations on cards (slight scale + glow)

Use CSS backdrop-filter for glass effects

Ensure text contrast meets accessibility standards on translucent backgrounds