Project: Glassmorphism Landing Page

In this project, we will design a landing page hero banner featuring a glassmorphism frosted card overlay set against a dynamic gradient background.

1. Landing Page Specifications

• Outer Background: Deep slate tone (bg-slate-950) with a glowing radial background gradient.
• Hero Content Card: Frosted glass card utilizing bg-white/10, backdrop-blur-lg, and border-white/10.
• Typography: Vibrant heading utilizing gradient text masking effects (bg-clip-text).

2. Implementing the HTML Structure

Here is the HTML skeleton code. You can use this directly inside your Astro page or React component templates:

<div className="relative min-h-screen bg-slate-950 flex items-center justify-center overflow-hidden p-6">
  
  {/* 1. Glowing decorative background nodes */}
  <div className="absolute top-1/4 left-1/4 w-96 h-96 bg-blue-500/20 rounded-full blur-3xl"></div>
  <div className="absolute bottom-1/4 right-1/4 w-96 h-96 bg-purple-500/20 rounded-full blur-3xl"></div>

  {/* 2. Main Glassmorphism Card Container */}
  <div className="relative z-10 max-w-2xl w-full bg-white/5 backdrop-blur-xl border border-white/10 rounded-2xl shadow-2xl p-8 md:p-12 text-center">
    
    {/* 3. Glowing Badge */}
    <span className="inline-flex items-center gap-1.5 px-3 py-1 text-xs font-medium bg-blue-500/10 text-blue-400 rounded-full border border-blue-500/20 mb-6">
      <span className="w-1.5 h-1.5 bg-blue-400 rounded-full animate-ping"></span>
      Version 2.0 Released
    </span>

    {/* 4. Text-Gradient Header */}
    <h1 className="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-white via-slate-100 to-blue-400 tracking-tight">
      Next-Generation Web Architectures
    </h1>

    <p className="mt-4 text-slate-400 text-lg leading-relaxed max-w-lg mx-auto">
      Build faster, scale further, and deliver premium user experiences using utility-first layouts.
    </p>

    {/* 5. Call to Action Action buttons */}
    <div className="flex flex-col sm:flex-row gap-4 justify-center mt-8">
      <button className="bg-gradient-to-r from-blue-500 to-indigo-600 hover:from-blue-600 hover:to-indigo-700 text-white font-semibold py-3 px-8 rounded-xl shadow-lg shadow-blue-500/20 transition-all active:scale-95">
        Get Started Today
      </button>
      <button className="bg-white/5 hover:bg-white/10 text-white border border-white/10 font-semibold py-3 px-8 rounded-xl transition-all active:scale-95">
        View Source Code
      </button>
    </div>

  </div>
</div>

3. Custom CSS Overlay Adjustments

For the glowing background nodes, the blur-3xl utility performs the heavy lifting by diffusing the solid colors. The backdrop-blur-xl class on the card container ensures that any background nodes passing behind it create a frosted glass visual effect.