Aurora Bento Grid

import React from "react";
import {
  AuroraBackground,
  BentoGrid,
  BentoGridItem,
} from "@/components/ui/aurora-bento-grid";

const settings = {
  title: "Aurora Analytics",
  subtitle: "Track your metrics with a beautiful, animated dashboard.",
  stat: "98%",
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };

  return (
    <div className="relative h-screen w-screen overflow-hidden bg-slate-950">
      <AuroraBackground />
      <div className="relative z-10 mx-auto flex h-full w-full max-w-6xl items-center">
        <div className="w-full">
          <BentoGrid>
            <BentoGridItem
              className="md:col-span-4 md:row-span-2"
              gradientFrom="from-slate-800"
              gradientTo="to-slate-900"
            >
              <div>
                <h2 className="text-2xl font-bold text-white">{s.title}</h2>
                <p className="mt-2 text-slate-300">{s.subtitle}</p>
              </div>
              <p className="text-6xl font-extrabold text-slate-100">{s.stat}</p>
            </BentoGridItem>

            <BentoGridItem
              className="md:col-span-2"
              gradientFrom="from-purple-600"
              gradientTo="to-indigo-700"
            >
              <div>
                <h3 className="text-xl font-bold text-white">Realtime</h3>
                <p className="mt-2 text-purple-100">
                  Live updates every second.
                </p>
              </div>
            </BentoGridItem>

            <BentoGridItem
              className="md:col-span-2"
              gradientFrom="from-orange-500"
              gradientTo="to-red-600"
            >
              <div>
                <h3 className="text-xl font-bold text-white">Fast</h3>
                <p className="mt-2 text-orange-100">Blazing performance.</p>
              </div>
            </BentoGridItem>

            <BentoGridItem
              className="md:col-span-3"
              gradientFrom="from-sky-500"
              gradientTo="to-blue-700"
            >
              <div>
                <h3 className="text-xl font-bold text-white">Integrations</h3>
                <p className="mt-2 text-sky-100">
                  Connect all your favorite tools in one place.
                </p>
              </div>
            </BentoGridItem>

            <BentoGridItem
              className="md:col-span-3"
              gradientFrom="from-emerald-500"
              gradientTo="to-teal-700"
            >
              <div>
                <h3 className="text-xl font-bold text-white">Secure</h3>
                <p className="mt-2 text-emerald-100">
                  End-to-end encryption keeps your data safe.
                </p>
              </div>
            </BentoGridItem>
          </BentoGrid>
        </div>
      </div>
    </div>
  );
}