Profile card

/**
 * Required External Styles:
 * link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,600;1,600&display=swap" rel="stylesheet"
 */

import React from 'react';

const Component: React.FC = () => {
  return (
    <div className="w-full h-full min-h-screen bg-transparent flex items-center justify-center">
      {/* Main Component Container */}
      <div className="relative group profile-card">
          
          {/* Smoked Obsidian Base Card */}
          <div className="relative w-80 sm:w-96 obsidian-gradient rounded-[2.5rem] p-1 shadow-2xl shadow-black border border-white/5 overflow-hidden">
              
              {/* Internal Glow */}
              <div className="absolute -top-24 -right-24 w-48 h-48 bg-indigo-500/10 blur-[80px] rounded-full"></div>
              <div className="absolute -bottom-24 -left-24 w-48 h-48 bg-emerald-500/5 blur-[80px] rounded-full"></div>
      
              {/* Content Wrapper */}
              <div className="relative p-6 z-10">
                  
                  {/* Profile Header */}
                  <div className="flex flex-col items-center pt-4">
                      {/* Avatar with Glass Ring */}
                      <div className="relative p-1.5 rounded-full bg-gradient-to-tr from-white/20 to-transparent mb-6">
                          <div className="w-28 h-28 rounded-full overflow-hidden border-2 border-[#1a1a1a] bg-neutral-800">
                              <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=256&h=256&auto=format&fit=crop" 
                                   alt="Profile" 
                                   className="w-full h-full object-cover" />
                          </div>
                          <div className="absolute bottom-1 right-2 w-6 h-6 bg-emerald-500 border-4 border-[#0a0a0a] rounded-full"></div>
                      </div>
      
                      <h1 className="text-2xl font-serif italic text-neutral-100 tracking-wide mb-1">Julian Thorne</h1>
                      <p className="text-xs font-medium tracking-[0.2em] text-neutral-500 uppercase mb-8">Creative Director & Curator</p>
                  </div>
      
                  {/* Stats Grid - Frosted Glass Layer */}
                  <div className="grid grid-cols-3 gap-0.5 rounded-2xl overflow-hidden backdrop-blur-md bg-white/5 border border-white/10 mb-8">
                      <div className="flex flex-col items-center py-4 hover:bg-white/5 transition-colors">
                          <span className="text-sm font-semibold text-neutral-200">12k</span>
                          <span className="text-[10px] uppercase tracking-tighter text-neutral-500">Curations</span>
                      </div>
                      <div className="flex flex-col items-center py-4 border-x border-white/5 hover:bg-white/5 transition-colors">
                          <span className="text-sm font-semibold text-neutral-200">840</span>
                          <span className="text-[10px] uppercase tracking-tighter text-neutral-500">Awards</span>
                      </div>
                      <div className="flex flex-col items-center py-4 hover:bg-white/5 transition-colors">
                          <span className="text-sm font-semibold text-neutral-200">2.4m</span>
                          <span className="text-[10px] uppercase tracking-tighter text-neutral-500">Reach</span>
                      </div>
                  </div>
      
                  {/* Bio Section */}
                  <p className="text-sm text-neutral-400 text-center px-4 leading-relaxed mb-8 font-light">
                      Redefining digital aesthetics through the lens of minimalism and deep-toned obsidian textures.
                  </p>
      
                  {/* Action Buttons */}
                  <div className="flex items-center gap-3">
                      <button className="flex-1 py-3.5 px-6 rounded-xl bg-neutral-100 text-neutral-950 text-xs font-bold uppercase tracking-widest hover:bg-white transition-all transform hover:-translate-y-0.5 active:translate-y-0 shadow-lg shadow-white/5">
                          Follow
                      </button>
                      <button className="p-3.5 rounded-xl backdrop-blur-lg bg-white/5 border border-white/10 text-neutral-300 hover:text-white hover:bg-white/10 transition-all">
                          <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                          </svg>
                      </button>
                  </div>
      
                  {/* Social Links */}
                  <div className="flex justify-center gap-6 mt-8">
                      <a href="#" className="text-neutral-600 hover:text-neutral-200 transition-colors">
                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 1.366.062 2.633.332 3.608 1.308.975.975 1.247 2.242 1.308 3.608.058 1.266.07 1.646.07 4.85s-.012 3.584-.07 4.85c-.061 1.366-.333 2.633-1.308 3.608-.975.975-2.242 1.247-3.608 1.308-1.266.058-1.646.07-4.85.07s-3.584-.012-4.85-.07c-1.366-.061-2.633-.333-3.608-1.308-.975-.975-1.247-2.242-1.308-3.608-.058-1.266-.07-1.646-.07-4.85s.012-3.584.07-4.85c.061-1.366.333-2.633 1.308-3.608.975-.975 2.242-1.247 3.608-1.308 1.266-.058 1.646-.07 4.85-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948s.014 3.667.072 4.947c.2 4.337 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072s3.667-.014 4.947-.072c4.337-.2 6.78-2.618 6.98-6.98.058-1.281.072-1.689.072-4.948s-.014-3.667-.072-4.947c-.2-4.338-2.617-6.78-6.98-6.98-1.281-.058-1.689-.072-4.948-.072zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                      </a>
                      <a href="#" className="text-neutral-600 hover:text-neutral-200 transition-colors">
                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.84 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                      </a>
                      <a href="#" className="text-neutral-600 hover:text-neutral-200 transition-colors">
                          <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.041-1.416-4.041-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                      </a>
                  </div>
      
                  {/* Subtle Decorative Element */}
                  <div className="absolute top-4 right-4 text-[10px] text-neutral-800 font-mono tracking-widest pointer-events-none uppercase">
                      Ref. No. 0422
                  </div>
              </div>
      
              {/* Glass Shine Effect Overlay */}
              <div className="glass-shine pointer-events-none"></div>
      
          </div>
      
          {/* Decorative Floating Glass Ornament */}
          <div className="absolute -top-6 -right-6 w-16 h-16 rounded-2xl backdrop-blur-xl bg-white/5 border border-white/10 shadow-xl flex items-center justify-center -rotate-12 group-hover:rotate-0 transition-all duration-500 delay-100 cursor-default">
              <svg xmlns="http://www.w3.org/2000/svg" className="w-6 h-6 text-neutral-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1">
                  <path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z" />
              </svg>
          </div>
      
          {/* Secondary Floating Glass Ornament */}
          <div className="absolute -bottom-4 -left-12 p-3 px-4 rounded-xl backdrop-blur-2xl bg-white/5 border border-white/10 shadow-2xl flex items-center gap-2 rotate-6 group-hover:rotate-0 transition-all duration-700 pointer-events-none">
              <div className="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></div>
              <span className="text-[10px] font-semibold text-neutral-300 uppercase tracking-widest whitespace-nowrap">Available for projects</span>
          </div>
      
      </div>
    </div>
  );
}

export default Component;