Components
Loading preview...
Freelancer Profile Card A responsive and animated profile card component, ideal for showcasing freelancers, team members, or user profiles. It features a banner, avatar, user details, stats, and a call-to-action, all powered by props.
@lavikatiyar
npx shadcn@latest add https://21st.dev/r/lavikatiyar/freelancer-profile-cardimport * as React from "react";
import { FreelancerProfileCard } from "@/components/ui/freelancer-profile-card";
import { LayoutTemplate, Palette } from "lucide-react"; // Using lucide icons as placeholders for tools
// Helper component for tool icons in the demo
const ToolIcon = ({ icon: Icon }: { icon: React.ElementType }) => (
<div className="flex h-7 w-7 items-center justify-center rounded-md bg-muted text-muted-foreground">
<Icon className="h-4 w-4" />
</div>
);
/**
* Default demo for the FreelancerProfileCard.
*/
export default function FreelancerProfileCardDemo() {
const tools = [
<ToolIcon key="tool-1" icon={LayoutTemplate} />,
<ToolIcon key="tool-2" icon={Palette} />,
];
return (
<div className="flex h-full w-full items-center justify-center bg-background p-10">
<FreelancerProfileCard
name="Henrie Ekemezie"
title="Web & UI/UX Designer"
avatarSrc="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=200&h=200&fit=crop&q=80"
bannerSrc="https://images.unsplash.com/photo-1750682053165-ed96153fb0b2?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjJ8fHdhbGxwYWVyfGVufDB8MHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=900"
rating={4.0}
duration="8 Days"
rate="$40/hr"
tools={tools}
onGetInTouch={() => console.log("Get in touch clicked!")}
onBookmark={() => console.log("Bookmark clicked!")}
/>
</div>
);
}