Glassmorphism Landing

# Glassmorphism Landing Page

Create a modern, ethereal landing page featuring frosted glass cards, soft gradients, and layered translucent surfaces that feel both premium and approachable.

## Design Specifications

**Style**: Glassmorphism / Frosted Glass UI
**Typography**: Clean sans-serif with medium weight, high readability
**Layout**: Layered cards floating over gradient backgrounds
**Colors**: Soft gradients (purple/blue/pink), white frosted overlays

## Prompt for AI Code Generation

```
Build a glassmorphism landing page with these characteristics:

LAYOUT:
- Hero section with centered content over animated gradient background
- Floating glass cards that appear to hover above the background
- Generous padding and spacing (32-64px between sections)
- Cards slightly overlap or stack to create depth
- Maximum content width of 1200px, centered

GLASS EFFECT:
- Background: rgba(255, 255, 255, 0.15) to rgba(255, 255, 255, 0.25)
- Backdrop filter: blur(12px) to blur(20px)
- Border: 1px solid rgba(255, 255, 255, 0.2)
- Subtle box-shadow for depth: 0 8px 32px rgba(0, 0, 0, 0.1)
- Border-radius: 16-24px for soft, rounded edges

TYPOGRAPHY:
- Hero headline: 48-72px, font-weight 600-700, white or dark depending on background
- Subheadline: 18-24px, font-weight 400, slightly transparent (0.8 opacity)
- Body text: 16px, line-height 1.6
- Font stack: Inter, SF Pro, system-ui, sans-serif

COLORS:
- Background gradient: Linear gradient from #667eea to #764ba2 (purple-blue)
- Alternative: #f093fb to #f5576c (pink-purple) or #4facfe to #00f2fe (cyan-blue)
- Glass surface: rgba(255, 255, 255, 0.1) to rgba(255, 255, 255, 0.25)
- Text on glass: White (#FFFFFF) or near-black (#1a1a2e) depending on contrast
- Accent: Bright color that complements gradient (#00d4ff, #ff6b6b)

INTERACTIONS:
- Hover on cards: Increase background opacity slightly, subtle scale(1.02)
- Hover on buttons: Brighter glow effect, background opacity increase
- Smooth transitions: 0.3s ease for all hover states
- Subtle parallax on scroll (optional)

SECTIONS TO INCLUDE:
1. Hero with headline, subheadline, and glass CTA button
2. Features section with 3-4 glass cards in a grid
3. Social proof / testimonials in glass container
4. Pricing cards with glass effect and highlighted "popular" option
5. CTA section with email capture in glass form
6. Minimal footer

TECHNICAL:
- Use CSS backdrop-filter for glass effect
- Fallback for browsers without backdrop-filter support
- Ensure text remains readable (check contrast)
- Gradient background should be fixed or slowly animated
- Consider adding subtle animated orbs/blobs behind glass elements
```

## Example React Component Structure

```tsx
export default function GlassmorphismLanding() {
  return (
    <main className="min-h-screen bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">
      {/* Decorative background elements */}
      <div className="pointer-events-none fixed inset-0 overflow-hidden">
        <div className="absolute -top-20 -left-20 h-72 w-72 rounded-full bg-purple-300 opacity-30 blur-3xl" />
        <div className="absolute -right-20 -bottom-20 h-96 w-96 rounded-full bg-pink-300 opacity-30 blur-3xl" />
      </div>

      {/* Hero */}
      <section className="relative flex min-h-screen items-center justify-center px-6">
        <div className="text-center">
          <h1 className="text-5xl font-bold text-white md:text-7xl">
            Build Beautiful
            <br />
            Interfaces
          </h1>
          <p className="mt-6 text-xl text-white/80">Modern design that feels like magic</p>
          <button className="mt-8 rounded-2xl border border-white/20 bg-white/20 px-8 py-4 font-semibold text-white backdrop-blur-lg transition hover:bg-white/30">
            Get Started
          </button>
        </div>
      </section>

      {/* Features */}
      <section className="relative px-6 py-24">
        <div className="mx-auto grid max-w-5xl gap-6 md:grid-cols-3">
          {features.map((feature, i) => (
            <div
              key={i}
              className="rounded-3xl border border-white/20 bg-white/10 p-8 backdrop-blur-xl transition hover:bg-white/20"
            >
              <div className="mb-4 text-4xl">{feature.icon}</div>
              <h3 className="text-xl font-semibold text-white">{feature.title}</h3>
              <p className="mt-2 text-white/70">{feature.description}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="relative px-6 py-24">
        <div className="mx-auto max-w-2xl rounded-3xl border border-white/20 bg-white/10 p-12 text-center backdrop-blur-xl">
          <h2 className="text-3xl font-bold text-white">Ready to start?</h2>
          <p className="mt-4 text-white/80">Join thousands of designers and developers</p>
          <div className="mt-8 flex justify-center gap-4">
            <input
              type="email"
              placeholder="Enter your email"
              className="rounded-xl border border-white/20 bg-white/10 px-6 py-3 text-white placeholder-white/50 backdrop-blur-sm"
            />
            <button className="rounded-xl bg-white px-6 py-3 font-semibold text-purple-600 transition hover:bg-white/90">
              Subscribe
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}
```

## CSS Variables

```css
:root {
  --color-bg-start: #667eea;
  --color-bg-end: #764ba2;
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-bg-hover: rgba(255, 255, 255, 0.2);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-blur: 12px;
  --border-radius: 24px;
  --font-display: 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
}

.glass:hover {
  background: var(--glass-bg-hover);
}

/* Fallback for browsers without backdrop-filter */
@supports not (backdrop-filter: blur(12px)) {
  .glass {
    background: rgba(255, 255, 255, 0.8);
  }
}
```

## Key Principles

1. **Layered depth**: Use overlapping elements and varying opacity to create visual hierarchy
2. **Soft edges**: Generous border-radius (16-24px) on all glass elements
3. **Subtle contrast**: Glass surfaces should be visible but not jarring
4. **Gradient richness**: Background gradients should feel vibrant but not overwhelming
5. **Readable text**: Always ensure sufficient contrast between text and glass backgrounds