Glassmorphism Hero

1"use client";
2 
3import { Button } from "@base-ui/react/button";
4import { ArrowRight, Sparkles } from "lucide-react";
5 
6export function GlassmorphismHeroBlockBaseui() {
7  return (
8    <section className="relative flex min-h-screen items-center justify-center overflow-hidden px-6 py-32">
9      {/* Animated background gradient orbs */}
10      <div className="absolute inset-0 -z-10">
11        <div className="absolute left-1/4 top-1/4 h-[600px] w-[600px] animate-pulse rounded-full bg-foreground/[0.03] blur-3xl" />
12        <div
13          className="absolute bottom-1/4 right-1/4 h-[600px] w-[600px] animate-pulse rounded-full bg-foreground/[0.03] blur-3xl"
14          style={{ animationDelay: "1s" }}
15        />
16      </div>
17 
18      <div className="mx-auto max-w-7xl space-y-10 text-center">
19        <div className="inline-flex items-center gap-2 rounded-full border border-border/50 bg-background/50 px-4 py-1.5 text-sm font-medium text-foreground/70 backdrop-blur-xl transition-all duration-300 hover:border-border">
20          <Sparkles className="h-3.5 w-3.5" />
21          <span>Introducing our new platform</span>
22        </div>
23 
24        <h1 className="text-6xl font-bold leading-[0.9] tracking-tight md:text-8xl lg:text-9xl">
25          <span className="block">Build amazing</span>
26          <span className="mt-4 block">products</span>
27        </h1>
28 
29        <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl">
30          The complete platform for building modern applications. Fast, secure,
31          and scalable by default.
32        </p>
33 
34        <div className="flex flex-col justify-center gap-4 pt-8 sm:flex-row">
35          <Button className="group inline-flex h-12 items-center justify-center rounded-full bg-primary px-8 text-base font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50">
36            Get Started
37            <ArrowRight className="ml-2 h-4 w-4 transition-transform group-hover:translate-x-1" />
38          </Button>
39// … truncated