Glassmorphism CTA

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card } from "@/components/ui/card";
5 
6export function GlassmorphismCTABlock() {
7  return (
8    <section className="px-6 py-32">
9      <div className="mx-auto max-w-5xl">
10        <Card className="relative overflow-hidden border border-border/50 bg-background/50 p-16 text-center backdrop-blur-xl md:p-24">
11          {/* Background decoration */}
12          <div className="absolute inset-0 bg-gradient-to-br from-foreground/[0.02] to-transparent" />
13          <div className="absolute left-1/4 top-0 h-96 w-96 rounded-full bg-foreground/[0.03] blur-3xl" />
14 
15          <div className="relative z-10 space-y-8">
16            <h2 className="text-5xl font-bold leading-tight tracking-tight md:text-6xl lg:text-7xl">
17              Ready to get started?
18            </h2>
19            <p className="mx-auto max-w-2xl text-lg leading-relaxed text-muted-foreground md:text-xl">
20              Join thousands of teams building better products with our platform
21            </p>
22            <div className="flex flex-col justify-center gap-4 pt-6 sm:flex-row">
23              <Button size="lg" className="h-12 rounded-full px-8 text-base">
24                Start Free Trial
25              </Button>
26              <Button
27                size="lg"
28                variant="outline"
29                className="h-12 rounded-full px-8 text-base hover:bg-foreground/5"
30              >
31                Contact Sales
32              </Button>
33            </div>
34          </div>
35        </Card>
36      </div>
37    </section>
38  );
39}