A never-before-seen, high-impact React feature showcase grid built with Tailwind CSS and Framer Motion. It delivers a mosaic layout with one large hero card and multiple supporting cards, each with interactive 3D-tilt hover effects, animated badges, and responsive parallax backgrounds.
"use client";
import React from "react";
import {
UltraQualityShowcaseGrid,
ShowcaseCard,
} from "@/components/ui/ultra-quality-showcase-grid";
const sampleCards: ShowcaseCard[] = [
{
id: "big",
imageUrl:
"https://cdn.21st.dev/assets/localized/3f126172ef8c78e2f875da08374cdb85dc8c0e095eed4332652f3e015a4172c8.jpg",
badge: { text: "NEW", colorClass: "bg-emerald-500/20 text-emerald-600" },
subtitle: "Unlimited pipeline",
title: "Launch experiments, not guesses",
description:
"Submit unlimited test ideas and creative requests. We prioritize by impact, ship fast, and report clearly so learnings stack every week.",
ctaPrimary: { label: "See case studies", href: "#" },
ctaSecondary: { label: "Start a request", href: "#" },
},
{
id: "requests",
imageUrl:
"https://cdn.21st.dev/assets/localized/8ca09c281ecd0f6cc2083e178e48a886b4d088d43373a8d686e2decc41fbe35b.jpg",
title: "Requests & revisions",
description:
"Iterate quickly with async requests and structured feedback. Every round ends with clear rationale and next steps.",
},
{
id: "pricing",
imageUrl:
"https://cdn.21st.dev/assets/localized/ac47d8e274478d4036fad4df48fcc1ea6c495fac0924b057860fa410dbcafbf2.jpg",
title: "Worry-free pricing",
description:
"Simple plans, no surprises. Pause anytime. Scale up when you’re ready.",
},
{
id: "turnaround",
imageUrl:
"https://cdn.21st.dev/assets/localized/30b1fab35baddcc6cb68173cf714041f576bf0e882bb31a5464fb54d825528d2.jpg",
badge: { text: "NEW", colorClass: "bg-emerald-500/20 text-emerald-600" },
title: "Quick turnaround",
description: "Most tasks ship in 48–72 hours without sacrificing quality.",
},
{
id: "live",
imageUrl:
"https://cdn.21st.dev/assets/localized/c49d148062e40d0bbb0b7ea88fb9e5fca4362a755732a25a763746b8dcd3ecdc.jpg",
title: "Go live in days",
description:
"From first brief to live campaigns in a week, with tracking and QA handled.",
},
];
export default function Default() {
return <UltraQualityShowcaseGrid cards={sampleCards} />;
}