This HomeSection component is a responsive, GSAP-animated carousel section that showcases a series of cards with smooth scaling and directional transitions.
import HomeSection from "@/components/ui/home-section";
export default function DemoOne() {
const exampleCards = [
{
src: "https://cdn.21st.dev/assets/localized/fe6db1dcf6aa15a509427d5791a1fe1d3319633f5ec0e48f3489519a45e2ac00.png",
alt: "Ruixen UI kit",
},
{
src: "https://cdn.21st.dev/assets/localized/c13b81db686181960d3001a8129359bedb1a15536b16930b8ebe1c9dfccf9746.png",
alt: "Ruixen dashboard",
},
{
src: "https://cdn.21st.dev/assets/localized/a9ed23bd858a0971295cee1f4675efe0661df61922251f4c6ed9f8af5f6c1495.png",
alt: "Ruixen landing page",
},
{
src: "https://cdn.21st.dev/assets/localized/7ab1802f14465e1319739cb76cb92712dc21386511b92e743c5cdea57d05e06f.jpg",
alt: "Ruixen interface components",
},
{
src: "https://cdn.21st.dev/assets/localized/193ca48d9c221ba3f0cc5c0fdaa5d99696e7bdcb4e881c515132b49601371414.jpg",
alt: "Ruixen application design",
},
];
return (
<main>
<HomeSection
// category="Innovation Meets Simplicity"
// title="Build Exceptional Interfaces"
// subtitle="Use our component library powered by Shadcn UI & Tailwind CSS to craft beautiful, fast, and accessible UIs."
cards={exampleCards}
/>
</main>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.