Card.jsx

import React from 'react';
import { UserCircle, Mail, Phone, MapPin, Building2, Globe, Twitter, Linkedin, Download, Calendar } from 'lucide-react';

function App() {
  const downloadVCard = () => {
    const vCardData = `BEGIN:VCARD
VERSION:2.1
N:Graff;Reed
FN:Reed Graff
TEL;CELL:9727302310
EMAIL;HOME:rangergraff@gmail.com
EMAIL;WORK:reed@timrep.com
ADR;WORK:;;3311 Oak Lawn Avenue #250;Dallas;TX;75219;United States
TITLE:CEO
ORG:Timrep
URL:Timrep.com
BDAY:2004-04-21
NOTE:Twitter: https://x.com/Reed_Graff\nLinkedIn: https://www.linkedin.com/in/reedgraff/
END:VCARD`;
    const blob = new Blob([vCardData], { type: 'text/vcard' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'ReedGraff.vcf';
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="relative min-h-screen w-full bg-[#140b29] flex items-center justify-center p-4">
      <div className="max-w-2xl w-full bg-gray-900/50 rounded-xl shadow-xl backdrop-blur-sm p-8 transform transition-all hover:scale-102">
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold text-white mb-2">
            <a href="https://reedgraff.com" className="hover:text-blue-400 transition-colors">Reed Graff</a>
        </h1>
        <p className="text-gray-400">CEO & Founder at Timrep</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 text-white">
          <div className="space-y-4">
            <div className="flex items-center space-x-3 group">
              <Calendar className="w-5 h-5 text-blue-400" />
              <span className="text-gray-300 group-hover:text-white transition-colors">April 21, 2004</span>
            </div>

            <div className="flex items-center space-x-3 group">
              <Mail className="w-5 h-5 text-blue-400" />
              <div className="flex flex-col">
                <a href="mailto:rangergraff@gmail.com" className="text-gray-300 hover:text-white transition-colors">rangergraff@gmail.com</a>
                <a href="mailto:reed@timrep.com" className="text-gray-300 hover:text-white transition-colors">reed@timrep.com</a>
              </div>
            </div>

            <div className="flex items-center space-x-3 group">
              <Phone className="w-5 h-5 text-blue-400" />
              <a href="tel:9727302310" className="text-gray-300 hover:text-white transition-colors">972-730-2310</a>
            </div>
          </div>

          <div className="space-y-4">
            <div className="flex items-center space-x-3 group">
              <MapPin className="w-5 h-5 text-blue-400" />
              <span className="text-gray-300 group-hover:text-white transition-colors">3311 Oak Lawn Avenue #250, Dallas, TX, 75219</span>
            </div>

            <div className="flex items-center space-x-3 group">
              <Globe className="w-5 h-5 text-blue-400" />
              <a href="https://Timrep.com" className="text-gray-300 hover:text-white transition-colors">Timrep.com</a>
            </div>

            <div className="flex items-center space-x-6">
              <a href="https://x.com/Reed_Graff" className="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                <Twitter className="w-5 h-5 text-blue-400" />
                <span>Twitter</span>
              </a>
              <a href="https://www.linkedin.com/in/reedgraff/" className="text-gray-300 hover:text-white transition-colors flex items-center space-x-2">
                <Linkedin className="w-5 h-5 text-blue-400" />
                <span>LinkedIn</span>
              </a>
            </div>
          </div>
        </div>

        <div className="mt-8 flex justify-center">
          <button 
            onClick={downloadVCard}
            className="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200 transform hover:scale-105"
          >
            <Download className="w-5 h-5" />
            <span>Download Contact</span>
          </button>
        </div>
      </div>
    </div>
  );
}

export default App;