bento-grid-portfolio-demo

1"use client";
2 
3import { Code2, Fingerprint, Globe2, ShieldCheck, Zap } from "lucide-react";
4import { Badge } from "@/components/ui/badge";
5import { Card, CardContent } from "@/components/ui/card";
6import { BentoGrid } from "@/registry/default/ui/bento-grid";
7 
8export default function BentoGridPortfolioDemo() {
9  return (
10    <BentoGrid className="mx-auto max-w-7xl gap-4 p-4">
11      {/* Hero Feature - Security */}
12      <Card className="group relative overflow-hidden border-primary/20 bg-gradient-to-br from-primary/10 via-primary/5 to-background md:col-span-2 lg:row-span-2">
13        <CardContent className="flex h-full flex-col justify-between p-8">
14          <div className="relative z-10">
15            <div className="mb-6 inline-flex rounded-2xl bg-primary/10 p-4 ring-1 ring-primary/20">
16              <ShieldCheck className="h-10 w-10 text-primary" />
17            </div>
18            <h3 className="mb-4 font-bold text-3xl tracking-tight">
19              Enterprise-Grade <br />
20              <span className="text-primary">Security Infrastructure</span>
21            </h3>
22            <p className="max-w-md text-lg text-muted-foreground leading-relaxed">
23              Protect your data with military-grade encryption, multi-factor
24              authentication, and real-time threat detection.
25            </p>
26          </div>
27 
28          <div className="mt-8 flex items-center gap-6">
29            <div className="flex -space-x-3">
30              {[1, 2, 3, 4].map((i) => (
31                <div
32                  key={i}
33                  className="h-10 w-10 rounded-full border-2 border-background bg-muted ring-1 ring-primary/10"
34                />
35              ))}
36            </div>
37            <p className="font-medium text-muted-foreground text-sm">
38              Trusted by <span className="text-foreground">500+</span>{" "}
39              enterprises
40            </p>
41          </div>
42        </CardContent>
43        {/* Decorative background element */}
44        <div className="absolute -right-12 -bottom-12 h-64 w-64 rounded-full bg-primary/5 blur-3xl transition-all group-hover:bg-primary/10" />
45      </Card>
46 
47      {/* Lightning Fast */}
48      <Card className="group border-border/50 bg-card/50 backdrop-blur-sm transition-all hover:border-amber-500/30">
49        <CardContent className="p-6">
50          <div className="mb-4 inline-flex rounded-xl bg-amber-500/10 p-3 ring-1 ring-amber-500/20">
51            <Zap className="h-6 w-6 text-amber-500" />
52          </div>
53// … truncated