Bento Grid

import React from "react";

export function BentoGrid() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-2xl">
      <div className="md:col-span-2 rounded-2xl border border-border bg-card p-6 shadow-2xs space-y-2">
        <h4 className="font-bold text-sm text-foreground">Next-Gen Architecture</h4>
        <p className="text-xs text-muted-foreground">High performance modular layout container.</p>
      </div>
      <div className="rounded-2xl border border-border bg-card p-6 shadow-2xs space-y-2">
        <h4 className="font-bold text-sm text-foreground">Responsive</h4>
        <p className="text-xs text-muted-foreground">Adapts seamlessly to every screen.</p>
      </div>
    </div>
  );
}

"use client";

import React, { useState } from "react";

export interface BentoItem {
  id: string;
  title: string;
  description: string;
  tag: string;
  span?: string;
  stat?: string;
}

const defaultItems: BentoItem[] = [
  {
    id: "speed",
    title: "Instant Edge Hydration",
    description: "Lightning-fast static HTML delivery with isolated island hydration where strictly necessary.",
    tag: "Performance",
    span: "md:col-span-2",
    stat: "100/100",
  },
  {
    id: "security",
    title: "Type Safety",
    description: "Strict TypeScript interfaces across all components.",
    tag: "Security",
    span: "md:col-span-1",
    stat: "100%",
  },
  {
    id: "design",
    title: "Tailwind CSS v4 Engine",
    description: "Native CSS variables, container queries, and zero-config utility classes.",
    tag: "Styling",
    span: "md:col-span-1",
    stat: "v4.3",
  },
  {
    id: "accessibility",
    title: "WCAG 2.2 AA Compliance",
    description: "Fully tested for screen readers, high contrast mode, and seamless keyboard navigation.",
    tag: "A11y",
    span: "md:col-span-2",
    stat: "AA+",
  },
];

export default function BentoGrid() {
  const [activeId, setActiveId] = useState<string | null>("speed");

  return (
    <div className="w-full max-w-2xl space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-3.5">
        {defaultItems.map((item) => {
          const isSelected = activeId === item.id;
          return (
            <div
              key={item.id}
              onClick={() => setActiveId(item.id)}
              className={`${item.span || "md:col-span-1"} p-5 sm:p-6 rounded-2xl border transition-all duration-200 cursor-pointer ${
                isSelected
                  ? "border-primary bg-primary/5 ring-1 ring-primary/30 shadow-md"
                  : "border-border bg-card hover:border-border/80 hover:bg-muted/40 shadow-2xs"
              }`}
            >
              <div className="flex items-center justify-between mb-3">
                <span className="text-[10px] uppercase font-bold tracking-wider px-2 py-0.5 rounded-full bg-muted text-muted-foreground">
                  {item.tag}
                </span>
                {item.stat && (
                  <span className="font-mono text-xs font-bold text-primary">
                    {item.stat}
                  </span>
                )}
              </div>

              <h4 className="font-bold text-sm text-foreground mb-1">
                {item.title}
              </h4>
              <p className="text-xs text-muted-foreground leading-relaxed">
                {item.description}
              </p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

"use client";

import React from "react";
import { motion } from "framer-motion";
import { Shield, Sparkles, Cpu, Globe2 } from "lucide-react";

const bentoCards = [
  {
    title: "Global CDN Edge Distribution",
    desc: "Autonomous edge routing delivers your components worldwide with sub-20ms latency.",
    icon: Globe2,
    span: "md:col-span-2",
    color: "text-blue-500 bg-blue-500/10",
  },
  {
    title: "AI Assisted Code",
    desc: "Generated with optimal patterns.",
    icon: Sparkles,
    span: "md:col-span-1",
    color: "text-purple-500 bg-purple-500/10",
  },
  {
    title: "Hardware Accelerated",
    desc: "60 FPS GPU animations.",
    icon: Cpu,
    span: "md:col-span-1",
    color: "text-amber-500 bg-amber-500/10",
  },
  {
    title: "Enterprise Grade Hardened",
    desc: "Zero external dependencies, zero supply-chain risk, 100% auditable source code.",
    icon: Shield,
    span: "md:col-span-2",
    color: "text-emerald-500 bg-emerald-500/10",
  },
];

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.1,
    },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 15 },
  visible: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } },
};

export default function AnimatedBentoGrid() {
  return (
    <motion.div
      variants={containerVariants}
      initial="hidden"
      animate="visible"
      className="grid grid-cols-1 md:grid-cols-3 gap-3.5 w-full max-w-2xl"
    >
      {bentoCards.map((card, i) => {
        const Icon = card.icon;
        return (
          <motion.div
            key={i}
            variants={itemVariants}
            whileHover={{ y: -5, scale: 1.01 }}
            transition={{ type: "spring", stiffness: 400, damping: 25 }}
            className={`${card.span} p-6 rounded-3xl border border-border bg-card/70 backdrop-blur-md shadow-sm hover:shadow-xl hover:border-primary/40 transition-colors flex flex-col justify-between cursor-pointer`}
          >
            <div className="flex items-center justify-between mb-4">
              <div className={`p-2.5 rounded-2xl ${card.color}`}>
                <Icon className="h-5 w-5" />
              </div>
              <span className="text-[10px] font-mono text-muted-foreground font-semibold">
                0{i + 1}
              </span>
            </div>

            <div className="space-y-1.5">
              <h4 className="font-bold text-sm text-foreground">{card.title}</h4>
              <p className="text-xs text-muted-foreground leading-relaxed">{card.desc}</p>
            </div>
          </motion.div>
        );
      })}
    </motion.div>
  );
}