"use client"; import React, { useState } from "react"; import { motion, Variants } from "framer-motion"; import { CheckCircle2, MapPin, Twitter, Github, Linkedin, Dribbble, Mail, Link as LinkIcon, UserPlus, Check } from "lucide-react"; // --- TYPES & INTERFACES --- export type ProfileAccent = "indigo" | "rose" | "emerald" | "amber" | "neutral"; export interface SocialPlatform { name: "twitter" | "github" | "linkedin" | "dribbble" | "email" | "website"; url: string; } export interface CleanProfileCardProps { coverUrl?: string; avatarUrl: string; name: string; role: string; location?: string; bio: string; isVerified?: boolean; socials?: SocialPlatform[]; accentColor?: ProfileAccent; onFollow?: (isFollowing: boolean) => void; className?: string; } /** * Clean Profile Card (v1.0 Anzuelo/Free) * A premium, minimalist user profile card with overlapping avatar, * verified badge, and staggered social icon entrances. * Fully bimodal and optimized for high-conversion user directories. */ export const CleanProfileCard = ({ coverUrl = "https://images.unsplash.com/photo-1557683316-973673baf926?q=80&w=800&auto=format&fit=crop", avatarUrl, name, role, location, bio, isVerified = false, socials = [], accentColor = "indigo", onFollow, className, }: CleanProfileCardProps) => { const [isFollowing, setIsFollowing] = useState(false); // --- THEME ENGINE --- const themes: Record = { indigo: { bg: "bg-indigo-50 dark:bg-indigo-500/10", text: "text-indigo-600 dark:text-indigo-400", button: "bg-indigo-600 hover:bg-indigo-500 text-white shadow-indigo-500/25", buttonActive: "bg-indigo-50 dark:bg-indigo-500/10 text-indigo-600 dark:text-indigo-400", }, rose: { bg: "bg-rose-50 dark:bg-rose-500/10", text: "text-rose-600 dark:text-rose-400", button: "bg-rose-600 hover:bg-rose-500 text-white shadow-rose-500/25", buttonActive: "bg-rose-50 dark:bg-rose-500/10 text-rose-600 dark:text-rose-400", }, emerald: { bg: "bg-emerald-50 dark:bg-emerald-500/10", text: "text-emerald-600 dark:text-emerald-400", button: "bg-emerald-600 hover:bg-emerald-500 text-white shadow-emerald-500/25", buttonActive: "bg-emerald-50 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400", }, amber: { bg: "bg-amber-50 dark:bg-amber-500/10", text: "text-amber-600 dark:text-amber-400", button: "bg-amber-500 hover:bg-amber-400 text-neutral-950 shadow-amber-500/25", buttonActive: "bg-amber-50 dark:bg-amber-500/10 text-amber-600 dark:text-amber-400", }, neutral: { bg: "bg-neutral-100 dark:bg-neutral-800", text: "text-neutral-900 dark:text-white", button: "bg-neutral-900 hover:bg-neutral-800 dark:bg-white dark:hover:bg-neutral-200 text-white dark:text-neutral-900 shadow-neutral-900/20 dark:shadow-white/20", buttonActive: "bg-neutral-100 dark:bg-neutral-800 text-neutral-900 dark:text-white", } }; const currentTheme = themes[accentColor]; const handleFollow = () => { const newState = !isFollowing; setIsFollowing(newState); if (onFollow) onFollow(newState); }; // --- ANIMATION VARIANTS --- const cardVariants: Variants = { initial: { y: 0, boxShadow: "0px 4px 20px rgba(0,0,0,0.03)" }, hover: { y: -6, boxShadow: "0px 20px 40px -10px rgba(0,0,0,0.12)", transition: { type: "spring", stiffness: 300, damping: 20 } } }; const socialListVariants: Variants = { hidden: { opacity: 0 }, visible: { opacity: 1, transition: { staggerChildren: 0.08, delayChildren: 0.1 } } }; const socialItemVariants: Variants = { hidden: { opacity: 0, y: 10, scale: 0.8 }, visible: { opacity: 1, y: 0, scale: 1, transition: { type: "spring", stiffness: 300, damping: 20 } } }; // Helper to render correct icon per platform const renderSocialIcon = (platform: string) => { const props = { className: "w-4 h-4", strokeWidth: 2 }; switch (platform) { case "twitter": return ; case "github": return ; case "linkedin": return ; case "dribbble": return ; case "email": return ; default: return ; } }; return ( {/* 1. COVER IMAGE */}

{/* Soft overlay to ensure avatar stands out */}

{/* 2. AVATAR & BADGE (Overlapping) */}

{isVerified && (

)}

{/* 3. CORE INFO */}

{name}

{role}

{location && (

{location}

)}

{bio}

{/* 4. SOCIAL LINKS */} {socials.length > 0 && ( {socials.map((social, idx) => ( {renderSocialIcon(social.name)} ))} )} {/* 5. ACTION BUTTON */} {isFollowing ? ( <> Following ) : ( <> Follow )}

); }; // ============================================================= // DEMO IMPLEMENTATION // ============================================================= export default function CleanProfileCardDemo() { const profileData = { avatarUrl: "https://randomuser.me/api/portraits/women/44.jpg", coverUrl: "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=800&auto=format&fit=crop", name: "Elena Rostova", role: "Senior UI Engineer", location: "Santiago, Chile", bio: "Building pixel-perfect interfaces and fluid micro-interactions for the modern web.", isVerified: true, socials: [ { name: "github" as const, url: "#" }, { name: "twitter" as const, url: "#" }, { name: "linkedin" as const, url: "#" }, { name: "dribbble" as const, url: "#" }, ] }; return (

console.log("Follow state:", state)} />

); }