Upload components/Hero.jsx with huggingface_hub

components/Hero.jsx

@@ -0,0 +1,75 @@
+import { ArrowDown, Download } from 'lucide-react';
+
+export default function Hero() {
+  return (
+    <section className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-white to-primary-50 pt-16">
+      <div className="section-container text-center animate-slide-up">
+        {/* Profile Image Placeholder */}
+        <div className="relative mx-auto mb-8 w-32 h-32 sm:w-40 sm:h-40">
+          <div className="absolute inset-0 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 animate-pulse"></div>
+          <div className="absolute inset-1 rounded-full bg-white flex items-center justify-center">
+            <span className="text-4xl sm:text-5xl font-bold text-primary-600">JD</span>
+          </div>
+        </div>
+
+        {/* Name and Title */}
+        <h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-4">
+          John Doe
+        </h1>
+        <p className="text-xl sm:text-2xl text-primary-600 font-medium mb-6">
+          Full Stack Developer & UI/UX Designer
+        </p>
+        <p className="max-w-2xl mx-auto text-lg text-gray-600 mb-8 leading-relaxed">
+          Passionate about creating beautiful, functional, and user-centered digital experiences. 
+          Specialized in building modern web applications with cutting-edge technologies.
+        </p>
+
+        {/* CTA Buttons */}
+        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 mb-12">
+          <a href="#projects" className="btn-primary w-full sm:w-auto">
+            View My Work
+          </a>
+          <a href="#contact" className="btn-secondary w-full sm:w-auto">
+            Get In Touch
+          </a>
+        </div>
+
+        {/* Stats */}
+        <div className="grid grid-cols-3 gap-8 max-w-md mx-auto mb-12">
+          <div>
+            <div className="text-3xl font-bold text-gray-900">5+</div>
+            <div className="text-sm text-gray-600">Years Experience</div>
+          </div>
+          <div>
+            <div className="text-3xl font-bold text-gray-900">50+</div>
+            <div className="text-sm text-gray-600">Projects Completed</div>
+          </div>
+          <div>
+            <div className="text-3xl font-bold text-gray-900">30+</div>
+            <div className="text-sm text-gray-600">Happy Clients</div>
+          </div>
+        </div>
+
+        {/* Built with anycoder */}
+        <a
+          href="https://huggingface.co/spaces/akhaliq/anycoder"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-primary-600 transition-colors"
+        >
+          <span>Built with</span>
+          <span className="font-semibold underline decoration-primary-400 underline-offset-2">anycoder</span>
+        </a>
+
+        {/* Scroll Indicator */}
+        <a
+          href="#about"
+          className="absolute bottom-8 left-1/2 -translate-x-1/2 text-gray-400 hover:text-primary-600 transition-colors animate-bounce"
+          aria-label="Scroll down"
+        >
+          <ArrowDown className="w-6 h-6" />
+        </a>
+      </div>
+    </section>
+  );
+}