Components
Loading preview...
This component is a responsive Hero Section with an animated Card Stack overlay, designed to showcase key features or testimonials in a dynamic and visually engaging way. Built with React, Tailwind CSS, and Framer Motion, it combines a sleek background image with a rotating stack of rectangular cards that automatically cycle every few seconds. Each card contains a title, descriptive paragraph, and illustrative image, along with a footer caption for context. The layout fully supports dark and light themes, maintaining high readability and aesthetic balance across devices. Ideal for landing pages, portfolio sections, or product showcases, this component highlights modern design principles—clean typography, smooth motion, and visual hierarchy—while remaining modular, customizable, and easy to integrate into any Next.js project.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/hero-preview-wallsimport { HeroPreviewWalls } from "@/components/ui/hero-preview-walls";
export default function Page() {
return (
<main>
<HeroPreviewWalls />
</main>
);
}