Components
Loading preview...
Referral Card This component provides a visually appealing and interactive card for referral programs. It uses framer-motion for smooth animations and is built with reusability in mind, allowing you to easily customize its content through props.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/referral-cardimport * as React from "react";
import { ReferralCard } from "@/components/ui/referral-card";
import { Zap, Crown, Users } from "lucide-react";
/**
* A demo component to showcase the ReferralCard.
*/
const ReferralCardDemo = () => {
// Data for the "How it works" section
const referralSteps = [
{
icon: <Zap className="h-4 w-4" />,
text: "Share your invite link",
},
{
icon: <Crown className="h-4 w-4" />,
text: (
<>
Your friend gets <span className="font-semibold text-card-foreground">10 credits</span>{" "}
when they subscribe
</>
),
},
{
icon: <Users className="h-4 w-4" />,
text: (
<>
You receive <span className="font-semibold text-card-foreground">10 credits</span> for
each referral
</>
),
},
];
return (
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<ReferralCard
badgeText="Earn 10+ credits"
title="Refer & Earn"
description="for each friend that you invite"
imageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-v0vbLLyS37IDvS2JqhJONhIAEgpeZP.png&w=320&q=75" // Replace with your image link
steps={referralSteps}
referralLink="https://21st.dev/lavikatiyar"
/>
</div>
);
};
export default ReferralCardDemo;