Upload components/Hero.js with huggingface_hub

components/Hero.js

@@ -0,0 +1,77 @@
+'use client';
+
+import { motion, useScroll, useTransform } from 'framer-motion';
+import { useRef } from 'react';
+
+export default function Hero() {
+  const containerRef = useRef(null);
+  const { scrollYProgress } = useScroll({
+    target: containerRef,
+    offset: ['start start', 'end start'],
+  });
+
+  const opacity = useTransform(scrollYProgress, [0, 0.5], [1, 0]);
+  const scale = useTransform(scrollYProgress, [0, 0.5], [1, 0.8]);
+  const y = useTransform(scrollYProgress, [0, 1], [0, 200]);
+
+  return (
+    <section ref={containerRef} className="relative h-screen flex flex-col justify-center items-center overflow-hidden px-4">
+      <motion.div
+        style={{ opacity, scale, y }}
+        className="text-center z-10 max-w-5xl mx-auto"
+      >
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1, delay: 0.2 }}
+          className="font-mono text-xs md:text-sm uppercase tracking-[0.3em] text-faint mb-6"
+        >
+          Artificial Intelligence Researcher
+        </motion.div>
+
+        <motion.h1
+          className="font-serif text-5xl md:text-8xl lg:text-9xl leading-[0.9] mb-8 glitch"
+          data-text="ARCHITECTING"
+          initial={{ opacity: 0, y: 50 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 1, delay: 0.4 }}
+        >
+          ARCHITECTING
+        </motion.h1>
+
+        <motion.h2
+          className="font-serif text-4xl md:text-6xl lg:text-7xl leading-none text-gray-400 italic mb-12"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1, delay: 0.6 }}
+        >
+          The Cognitive Future
+        </motion.h2>
+
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 1, delay: 0.8 }}
+          className="flex flex-col md:flex-row gap-6 justify-center items-center"
+        >
+          <div className="w-px h-16 bg-white/20 hidden md:block"></div>
+          <p className="font-mono text-sm md:text-base max-w-md text-gray-300 leading-relaxed">
+            Pioneering neural architectures and generative systems. 
+            Bridging the gap between theoretical research and production-grade scalability.
+          </p>
+        </motion.div>
+      </motion.div>
+
+      {/* Scroll Indicator */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        transition={{ delay: 1.5, duration: 1.5 }}
+        className="absolute bottom-10 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2"
+      >
+        <span className="font-mono text-[10px] uppercase tracking-widest text-faint">Scroll to Explore</span>
+        <div className="w-[1px] h-12 bg-gradient-to-b from-white to-transparent"></div>
+      </motion.div>
+    </section>
+  );
+}