feat(ui): add cv application frontend and configuration

src/components/Hero.jsx

@@ -0,0 +1,73 @@
+import { motion } from 'framer-motion';
+import { Github, Linkedin, Mail, MapPin } from 'lucide-react';
+import { useCVData } from '../admin/hooks/CVContext';
+
+export default function Hero() {
+  const { data } = useCVData();
+  const { personal } = data;
+  
+  return (
+    <section className="min-h-screen flex items-center justify-center px-6 py-20">
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6 }}
+        className="max-w-3xl text-center"
+      >
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
+          className="w-32 h-32 mx-auto mb-8 rounded-full bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center text-white text-4xl font-bold"
+        >
+          {personal.name.split(' ').map(n => n[0]).join('')}
+        </motion.div>
+        
+        <h1 className="text-4xl md:text-5xl font-bold text-slate-900 mb-2">
+          {personal.name}
+        </h1>
+        
+        <h2 className="text-xl md:text-2xl text-primary-600 font-medium mb-4">
+          {personal.title}
+        </h2>
+        
+        <div className="flex items-center justify-center gap-2 text-slate-500 mb-6">
+          <MapPin size={18} />
+          <span>{personal.location}</span>
+        </div>
+        
+        <p className="text-lg text-slate-600 mb-8 max-w-2xl mx-auto">
+          {personal.intro}
+        </p>
+        
+        <div className="flex justify-center gap-4">
+          <a
+            href={`mailto:${personal.email}`}
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Mail size={20} />
+            <span>Email</span>
+          </a>
+          <a
+            href={personal.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Github size={20} />
+            <span>GitHub</span>
+          </a>
+          <a
+            href={personal.linkedin}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-2 px-4 py-2 rounded-lg bg-slate-100 hover:bg-slate-200 transition-colors text-slate-700"
+          >
+            <Linkedin size={20} />
+            <span>LinkedIn</span>
+          </a>
+        </div>
+      </motion.div>
+    </section>
+  );
+}