107 lines
3.3 KiB
JavaScript
107 lines
3.3 KiB
JavaScript
import { useState } from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import mushroomImg from '../assets/mushroom.png';
|
|
import SocietyTerminal from './SocietyTerminal';
|
|
|
|
const Hero = () => {
|
|
const [showTerminal, setShowTerminal] = useState(false);
|
|
|
|
const fadeInUp = {
|
|
hidden: { opacity: 0, y: 50 },
|
|
visible: { opacity: 1, y: 0, transition: { duration: 0.6 } }
|
|
};
|
|
|
|
const bounceIn = {
|
|
hidden: { scale: 0, opacity: 0 },
|
|
visible: { scale: 1, opacity: 1, transition: { type: "spring", bounce: 0.4, duration: 0.8 } }
|
|
};
|
|
|
|
const staggerContainer = {
|
|
visible: { transition: { staggerChildren: 0.2 } }
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<section className="min-h-screen flex items-center justify-center bg-dark-gradient relative overflow-hidden">
|
|
<motion.div
|
|
className="text-center z-10"
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={staggerContainer}
|
|
>
|
|
{/* Mascot */}
|
|
<motion.div
|
|
className="mb-8"
|
|
variants={bounceIn}
|
|
>
|
|
<img
|
|
src={mushroomImg}
|
|
alt="Mycelium Society Mascot"
|
|
className="mx-auto max-w-xs"
|
|
style={{ width: 'auto', height: 'auto', maxHeight: '300px' }}
|
|
/>
|
|
</motion.div>
|
|
|
|
{/* Main Title */}
|
|
<motion.h1
|
|
className="text-4xl md:text-6xl lg:text-7xl font-bold mb-8 leading-tight"
|
|
variants={fadeInUp}
|
|
>
|
|
<span className="text-white">Welcome to</span>
|
|
<br />
|
|
<span className="text-white">Mycelium Society</span>
|
|
</motion.h1>
|
|
|
|
{/* Tagline */}
|
|
<motion.p
|
|
className="text-lg md:text-xl text-gray-300 mb-12 max-w-3xl mx-auto"
|
|
variants={fadeInUp}
|
|
>
|
|
A community inspired by network state concepts, combining people,
|
|
<br className="hidden sm:block" />
|
|
technology, and governance for global collaboration.
|
|
</motion.p>
|
|
|
|
{/* Buttons */}
|
|
<motion.div
|
|
className="flex flex-col sm:flex-row gap-4 justify-center items-center"
|
|
variants={fadeInUp}
|
|
>
|
|
<motion.button
|
|
className="btn-primary animate-pulse-glow"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
onClick={() => setShowTerminal(true)}
|
|
>
|
|
> ENTER THE NETWORK
|
|
</motion.button>
|
|
<a href="https://docs.mycelium.tf" target="_blank" rel="noopener noreferrer">
|
|
<motion.button
|
|
className="btn-primary"
|
|
whileHover={{ scale: 1.05 }}
|
|
whileTap={{ scale: 0.95 }}
|
|
>
|
|
> DOCS
|
|
</motion.button>
|
|
</a>
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Background Effects */}
|
|
<div className="absolute inset-0 overflow-hidden">
|
|
<div className="absolute -top-40 -right-40 w-80 h-80 bg-bright-cyan/5 rounded-full blur-3xl"></div>
|
|
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-cyan/5 rounded-full blur-3xl"></div>
|
|
</div>
|
|
</section>
|
|
|
|
{showTerminal && (
|
|
<SocietyTerminal
|
|
showTerminal={showTerminal}
|
|
setShowTerminal={setShowTerminal}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Hero; |