// app/page.tsx
import FeaturesSection from "./components/AnimatedCardsGridV2/FeaturesSection";
import ExampleSection from "./components/ExampleSection/ExampleSection";
// import AnimatedHero from "./components/ParticleFlowBackground/AnimatedHero";
import SpotlightSection from "./components/SpotlightCardsGrid/SpotlightSection";
import TrustedCompanies from "./components/TrustedCompanies/TrustedCompanies";
import AnimatedHero from "./components/AnimatedBackground/AnimatedHero";
export default function Home() {
return (
<div className="">
{/* <TrustedCompanies /> */}
<ExampleSection />
{/* <FeaturesSection /> */}
{/* <SpotlightSection /> */}
{/* <AnimatedHero /> */}
{/* <AnimatedHero /> */}
</div>
);
}
Component details
Overview, install command, dependencies, and project links.
A dark-themed animated cards grid built with Next.js and Tailwind CSS. Renders a responsive grid with shared borders between cards - no double borders, no gaps - using a single outer border on the wrapper and border border-white/10 on each card so the lines align perfectly at every breakpoint. Each card has a subtle violet border glow and inset shadow that fades in on hover, a soft background lift gradient, a title that shifts up 2px on hover, a description that brightens, a "Learn more" arrow that slides right, and a ghost index number in the bottom-right corner. Supports an optional icon prop that renders in a rounded bordered container top-right, an eyebrow label above the title, and an optional href that wraps the card in a Next.js Link - if no href is passed it renders as a plain div. Fully typed in TypeScript with exported types for easy reuse across pages. Works in the Next.js App Router as a server component - no "use client" needed.
Discussion
Feedback, implementation tips, and usage notes.
Comments
Sign in to join the conversation
