The CreditCardHero component is a premium advertising-style showcase designed for modern fintech or banking landing pages. At its core, it combines clean, centered marketing content—a bold headline, descriptive subtext, and a clear call-to-action button—with two floating 3D credit cards that sit outside the content area, one larger at the bottom-left and one smaller at the top-right. The cards subtly tilt with cursor movement, giving the layout depth and a dynamic, interactive feel while ensuring the text remains fully visible and unobstructed. This separation of visuals and copy creates a billboard-like hero section, perfect for capturing user attention in a professional yet engaging way. Its minimal, polished design makes it well-suited for advertising new credit products, digital banking features, or promotional campaigns where trust, style, and clarity are equally important.
"use client";
import * as React from "react";
import { CreditCardHero } from "@/components/ui/credit-card-hero";
export default function CreditCardHeroDemo() {
return (
<div className="flex h-screen w-full items-center justify-center bg-muted/20 p-8">
<CreditCardHero
headline="The Future of Digital Banking"
subtext="Secure, globally accepted, and packed with exclusive rewards — your new digital credit card is here."
cta="Apply Now"
onCtaClick={() => alert("CTA Clicked!")}
primaryCardImage="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_moon.png"
secondaryCardImage="https://pub-940ccf6255b54fa799a9b01050e6c227.r2.dev/ruixen_gradient.jpeg"
/>
</div>
);
}
Part of Ruixen UI — browse the full library on 21st.dev.