components/slides/HeroSlide.tsx

import React from 'react';
import { Slide } from '../../types';
import { motion } from 'framer-motion';

export const HeroSlide: React.FC<{ slide: Slide }> = ({ slide }) => {
  return (
    <div className="flex flex-col items-center justify-center h-full text-center px-4">
      <motion.div
        initial={{ opacity: 0, scale: 0.8 }}
        animate={{ opacity: 1, scale: 1 }}
        transition={{ duration: 0.8, ease: "easeOut" }}
      >
        <span className="inline-block py-1.5 px-4 rounded-full bg-white border border-slate-200 text-secondary text-sm font-semibold mb-8 shadow-sm tracking-wide">
          {slide.metadata?.date || '2025'} Presentation
        </span>
      </motion.div>

      <motion.h1 
        className="text-5xl md:text-8xl font-black text-slate-900 mb-6 max-w-5xl tracking-tight"
        initial={{ opacity: 0, y: 30 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.2, duration: 0.8 }}
      >
        {slide.title}
      </motion.h1>

      <motion.h2 
        className="text-2xl md:text-4xl text-slate-500 font-light mb-10 max-w-3xl"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.5, duration: 0.8 }}
      >
        {slide.subtitle}
      </motion.h2>

      <motion.p
        className="text-slate-400 text-lg max-w-xl font-medium"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        transition={{ delay: 0.7, duration: 0.8 }}
      >
        {slide.description}
      </motion.p>
    </div>
  );
};