bento-grid-custom-demo

1"use client";
2 
3import {
4  ArrowUpRight,
5  Brain,
6  Cpu,
7  Globe,
8  Layers,
9  Sparkles,
10} from "lucide-react";
11import { Badge } from "@/components/ui/badge";
12import { Button } from "@/components/ui/button";
13import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
14import { BentoGrid } from "@/registry/default/ui/bento-grid";
15 
16export default function BentoGridCustomDemo() {
17  return (
18    <BentoGrid className="mx-auto max-w-7xl gap-4 p-4">
19      {/* Main AI Intelligence Card */}
20      <Card className="relative overflow-hidden border-primary/20 bg-gradient-to-br from-indigo-500/10 via-purple-500/5 to-background md:col-span-2 lg:row-span-2">
21        <div className="absolute -top-20 -right-20 h-64 w-64 rounded-full bg-primary/10 blur-3xl" />
22        <CardHeader className="relative z-10 pb-2">
23          <div className="flex items-center justify-between">
24            <Badge
25              variant="outline"
26              className="border-primary/30 bg-primary/10 text-primary"
27            >
28              <Brain className="mr-1 h-3 w-3" />
29              AI Core v2.4
30            </Badge>
31            <span className="text-muted-foreground text-xs">
32              Updated 2m ago
33            </span>
34          </div>
35          <CardTitle className="mt-4 font-bold text-3xl tracking-tight">
36            Neural Network <br />
37            <span className="text-primary">Intelligence Hub</span>
38          </CardTitle>
39        </CardHeader>
40        <CardContent className="relative z-10 space-y-8">
41          <p className="max-w-md text-muted-foreground">
42            Real-time processing of over 1.2M data points per second with
43            predictive modeling and automated anomaly detection.
44          </p>
45 
46          <div className="grid grid-cols-2 gap-6">
47            <div className="space-y-1">
48              <p className="text-muted-foreground text-xs uppercase tracking-wider">
49                Accuracy
50              </p>
51              <p className="font-bold font-mono text-2xl text-emerald-500">
52                99.98%
53              </p>
54            </div>
55            <div className="space-y-1">
56              <p className="text-muted-foreground text-xs uppercase tracking-wider">
57                Latency
58              </p>
59              <p className="font-bold font-mono text-2xl text-blue-500">14ms</p>
60            </div>
61          </div>
62 
63          <div className="flex flex-wrap gap-2">
64            <Button size="sm" className="shadow-lg shadow-primary/20">
65// … truncated