src/components/sections/hero/HeroExpand.tsx

@@ -1,53 +1,24 @@
-import { useState, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
-
 interface HeroExpandProps {
   title: string;
   description: string;
+  primaryButton: { text: string; href: string };
+  secondaryButton: { text: string; href: string };
   onComplete?: () => void;
 }
 
-export default function HeroExpand({ title, description, onComplete }: HeroExpandProps) {
-  const [isExpanded, setIsExpanded] = useState(false);
-  
-  const handleComplete = useCallback(() => {
-    if (onComplete) onComplete();
-  }, [onComplete]);
-
-  useEffect(() => {
-    if (isExpanded) {
-      handleComplete();
-    }
-  }, [isExpanded, handleComplete]);
-
+export default function HeroExpand({ title, description, primaryButton, secondaryButton, onComplete }: HeroExpandProps) {
   return (
     <div className="relative w-full py-20 flex flex-col items-center justify-center text-center">
-      <motion.h1 
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        className="text-5xl font-bold mb-4"
-      >
-        {title}
-      </motion.h1>
+      <h1 className="text-5xl font-bold mb-4">{title}</h1>
       <p className="text-lg opacity-80 mb-8 max-w-2xl">{description}</p>
-      <button 
-        onClick={() => setIsExpanded(true)}
-        className="px-8 py-3 bg-primary text-white rounded-full font-semibold transition-transform hover:scale-105"
-      >
-        Explore More
-      </button>
-      <AnimatePresence>
-        {isExpanded && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: 'auto' }}
-            exit={{ opacity: 0, height: 0 }}
-            className="mt-8 text-sm opacity-60"
-          >
-            Additional content revealed here!
-          </motion.div>
-        )}
-      </AnimatePresence>
+      <div className="flex gap-4">
+        <a href={primaryButton.href} className="px-8 py-3 bg-primary text-white rounded-full font-semibold">
+          {primaryButton.text}
+        </a>
+        <a href={secondaryButton.href} className="px-8 py-3 border border-primary rounded-full font-semibold">
+          {secondaryButton.text}
+        </a>
+      </div>
     </div>
   );
 }