Designer Profile Card

import { ProfileCard } from "@/components/ui/designer-profile-card"; // Adjust the import path

// Icon for the badge
const ExpertDesignerIcon = () => (
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="mr-2 h-4 w-4">
        <circle cx="12" cy="12" r="10" />
        <circle cx="12" cy="12" r="3" />
    </svg>
);


export default function ProfileCardDemo() {
  const profileData = {
    badge: {
      icon: <ExpertDesignerIcon />,
      text: "Expert Designer",
    },
    name: "Ravi Katiyar",
    title: "Your Designer",
    subtitle: "Brief initial presentation of myself and my previous experiences.",
    imageUrl: "https://framerusercontent.com/images/bS5yI534QrgZ6plEFuXPt84TkA.png", // Placeholder image
    imageAlt: "Johan Beker, a professional designer.",
    status: {
      isAvailable: true,
      text: "Available for work",
    },
    greeting: "Hello I am Ravi Katiyar",
    bio: "I'm Ravi Katiyar, a dedicated Web Designer & Developer based in the vibrant city of Berlin, Germany. I specialize in creative design with seamless technical execution to craft exceptional digital experiences.",
    skills: [
      { text: "Product Design" },
      { text: "UX Design", variant: "default" }, // Highlighted skill
      { text: "UI Design" },
      { text: "Framer" },
      { text: "Branding" },
      { text: "Webflow" },
    ],
    experiences: [
      { role: "Freelance", company: "GreenLeaf Co", year: 2021, link: "#" },
      { role: "UI/UX Designer", company: "Digital Agency", year: 2022, link: "#" },
      { role: "Senior Designer", company: "Creative Studio", year: 2024, link: "#" },
    ],
  };

  return (
    <div className="flex items-center justify-center bg-background min-h-screen p-4">
      <ProfileCard {...profileData} />
    </div>
  );
}