frontend/Hero.tsx

"use client";

import { motion } from "framer-motion";
import { Eye, Lock, Zap } from "lucide-react";

export default function Hero() {
  return (
    <section className="relative overflow-hidden bg-gradient-to-b from-gray-900 to-gray-950 py-20">
      <div className="absolute inset-0 bg-grid-white/[0.02] bg-[size:50px_50px]" />
      
      <div className="container mx-auto px-4 relative z-10">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.5 }}
          className="text-center max-w-4xl mx-auto"
        >
          <h1 className="text-5xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 bg-clip-text text-transparent">
            From Black Box to Glass Box
          </h1>
          
          <p className="text-xl text-gray-300 mb-8">
            Visualise LLM code generation in real-time. See attention patterns, 
            activation flows, and expert routing to understand how AI writes code.
          </p>
          
          <div className="flex justify-center gap-4 mb-12">
            <button className="px-8 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium">
              Try Live Demo
            </button>
            <button className="px-8 py-3 bg-gray-800 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium">
              Read Paper
            </button>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"
            >
              <Eye className="w-10 h-10 text-blue-500 mb-4 mx-auto" />
              <h3 className="text-lg font-semibold mb-2">See Inside</h3>
              <p className="text-gray-400 text-sm">
                Visualise attention maps and activation patterns as models generate code
              </p>
            </motion.div>
            
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"
            >
              <Lock className="w-10 h-10 text-purple-500 mb-4 mx-auto" />
              <h3 className="text-lg font-semibold mb-2">Build Trust</h3>
              <p className="text-gray-400 text-sm">
                Detect hallucinations and API misuses before deploying AI-generated code
              </p>
            </motion.div>
            
            <motion.div
              whileHover={{ scale: 1.05 }}
              className="bg-gray-800/50 backdrop-blur-sm rounded-xl p-6 border border-gray-700"
            >
              <Zap className="w-10 h-10 text-yellow-500 mb-4 mx-auto" />
              <h3 className="text-lg font-semibold mb-2">Real-time Analysis</h3>
              <p className="text-gray-400 text-sm">
                Stream traces live from your IDE or CI/CD pipeline
              </p>
            </motion.div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}