Bento Grid Layout

1'use client';
2
3import React from 'react';
4import { Sparkles, Zap, Shield, Layers, ArrowUpRight } from 'lucide-react';
5
6export default function BentoGrid() {
7  return (
8    <div className="grid w-full max-w-2xl grid-cols-1 sm:grid-cols-3 gap-3 p-4 select-none">
9      {/* Box 1: Spatial Interactions */}
10      <div className="group relative sm:col-span-2 overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
11        <div className="pointer-events-none absolute -inset-[1px] rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
12          <div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-cyan-400 to-indigo-500 [mask-image:linear-gradient(white,transparent_50%)] animate-[spin_4s_linear_infinite]" />
13        </div>
14        <div className="relative z-10">
15          <div className="flex items-center justify-between mb-3">
16            <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-blue-50 dark:bg-blue-950 text-blue-600 dark:text-blue-400">
17              <Sparkles className="h-4 w-4" />
18            </div>
19            <ArrowUpRight className="h-4 w-4 text-slate-400 group-hover:text-blue-500 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition" />
20          </div>
21          <h3 className="text-sm font-bold text-slate-900 dark:text-white">Spatial Interactions</h3>
22          <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Physics-driven gesture animations and elevation physics.</p>
23        </div>
24      </div>
25
26      {/* Box 2: Ultra Fast */}
27      <div className="group relative overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
28        <div className="pointer-events-none absolute -inset-[1px] rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
29          <div className="absolute inset-0 bg-gradient-to-r from-amber-400 via-orange-500 to-amber-600 [mask-image:linear-gradient(white,transparent_50%)] animate-[spin_3s_linear_infinite]" />
30        </div>
31        <div className="relative z-10">
32          <div className="flex items-center justify-between mb-3">
33            <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-amber-50 dark:bg-amber-950 text-amber-500">
34              <Zap className="h-4 w-4" />
35            </div>
36            <ArrowUpRight className="h-4 w-4 text-slate-400 group-hover:text-amber-500 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition" />
37          </div>
38          <h3 className="text-sm font-bold text-slate-900 dark:text-white">Ultra Fast</h3>
39          <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Zero third-party library overhead.</p>
40        </div>
41      </div>
42
43      {/* Box 3: TypeScript */}
44      <div className="group relative overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
45        <div className="pointer-events-none absolute -inset-[1px] rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
46          <div className="absolute inset-0 bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-500 [mask-image:linear-gradient(white,transparent_50%)] animate-[spin_3.5s_linear_infinite]" />
47        </div>
48        <div className="relative z-10">
49          <div className="flex items-center justify-between mb-3">
50            <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-emerald-50 dark:bg-emerald-950 text-emerald-500">
51              <Shield className="h-4 w-4" />
52            </div>
53            <ArrowUpRight className="h-4 w-4 text-slate-400 group-hover:text-emerald-500 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition" />
54          </div>
55          <h3 className="text-sm font-bold text-slate-900 dark:text-white">TypeScript</h3>
56          <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Type-safe components.</p>
57        </div>
58      </div>
59
60      {/* Box 4: Tailwind CSS V4 */}
61      <div className="group relative sm:col-span-2 overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 shadow-sm">
62        <div className="pointer-events-none absolute -inset-[1px] rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500">
63          <div className="absolute inset-0 bg-gradient-to-r from-purple-500 via-pink-500 to-indigo-500 [mask-image:linear-gradient(white,transparent_50%)] animate-[spin_4.5s_linear_infinite]" />
64        </div>
65        <div className="relative z-10">
66          <div className="flex items-center justify-between mb-3">
67            <div className="flex h-9 w-9 items-center justify-center rounded-2xl bg-purple-50 dark:bg-purple-950 text-purple-500">
68              <Layers className="h-4 w-4" />
69            </div>
70            <ArrowUpRight className="h-4 w-4 text-slate-400 group-hover:text-purple-500 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition" />
71          </div>
72          <h3 className="text-sm font-bold text-slate-900 dark:text-white">Tailwind CSS V4</h3>
73          <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">Seamless custom themes and CSS variable support.</p>
74        </div>
75      </div>
76    </div>
77  );
78}