89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
|
|
export function HeroSection() {
|
|
const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
|
|
|
|
useEffect(() => {
|
|
const handleMouseMove = (e: MouseEvent) => {
|
|
setMousePosition({
|
|
x: (e.clientX / window.innerWidth - 0.5) * 20,
|
|
y: (e.clientY / window.innerHeight - 0.5) * 20,
|
|
})
|
|
}
|
|
|
|
window.addEventListener("mousemove", handleMouseMove)
|
|
return () => window.removeEventListener("mousemove", handleMouseMove)
|
|
}, [])
|
|
|
|
return (
|
|
<section className="relative min-h-screen flex items-center justify-center overflow-hidden px-6">
|
|
{/* Animated background elements */}
|
|
<div className="absolute inset-0 overflow-hidden opacity-20">
|
|
<div
|
|
className="absolute top-1/4 left-1/4 h-96 w-96 rounded-full bg-primary blur-[120px] animate-float"
|
|
style={{
|
|
transform: `translate(${mousePosition.x}px, ${mousePosition.y}px)`,
|
|
transition: "transform 0.3s ease-out",
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute bottom-1/4 right-1/4 h-96 w-96 rounded-full bg-accent blur-[120px]"
|
|
style={{
|
|
transform: `translate(${-mousePosition.x}px, ${-mousePosition.y}px)`,
|
|
transition: "transform 0.3s ease-out",
|
|
animationDelay: "2s",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10 max-w-5xl text-center">
|
|
<div className="mb-6 inline-block">
|
|
<span className="text-sm font-mono text-muted-foreground border border-border px-4 py-2 rounded-full">
|
|
{"{ Token Engineering & Regenerative Economics }"}
|
|
</span>
|
|
</div>
|
|
|
|
<p className="text-xl md:text-2xl text-muted-foreground mb-2">Hi, I'm</p>
|
|
<h1 className="text-6xl md:text-8xl font-bold mb-6 text-balance leading-tight">Jeff Emmett</h1>
|
|
|
|
<p className="text-xl md:text-2xl text-muted-foreground mb-12 max-w-3xl mx-auto text-balance leading-relaxed">
|
|
Token engineering researcher exploring bonding curves, Web3 economies, and mycoeconomics. Building tools for
|
|
regenerative communities and commons-based governance.
|
|
</p>
|
|
|
|
<div className="flex flex-wrap gap-4 justify-center">
|
|
<a
|
|
href="#work"
|
|
className="group relative px-8 py-4 bg-primary text-primary-foreground rounded-lg font-medium overflow-hidden transition-all hover:scale-105"
|
|
>
|
|
<span className="relative z-10">View Research</span>
|
|
<div className="absolute inset-0 bg-accent opacity-0 group-hover:opacity-100 transition-opacity" />
|
|
</a>
|
|
<a
|
|
href="https://slides.jeffemmett.com"
|
|
className="px-8 py-4 bg-secondary text-secondary-foreground rounded-lg font-medium transition-all hover:scale-105 hover:bg-secondary/80"
|
|
>
|
|
Presentations
|
|
</a>
|
|
<a
|
|
href="#contact"
|
|
className="px-8 py-4 bg-secondary text-secondary-foreground rounded-lg font-medium transition-all hover:scale-105 hover:bg-secondary/80"
|
|
>
|
|
Get in Touch
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll indicator */}
|
|
<div className="absolute bottom-12 left-1/2 -translate-x-1/2 animate-bounce">
|
|
<div className="h-12 w-8 rounded-full border-2 border-muted-foreground/30 flex items-start justify-center p-2">
|
|
<div className="h-2 w-1 bg-muted-foreground/50 rounded-full animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|