jeffemmett-website-redesign/components/hero-section.tsx

80 lines
2.2 KiB
TypeScript

"use client"
import { useEffect, useState } from "react"
const DOMAINS = [
"token engineering",
"regenerative economics",
"commons governance",
"mycelial networks",
"collective intelligence",
]
export function HeroSection() {
const [typedText, setTypedText] = useState("")
const [currentDomain, setCurrentDomain] = useState(0)
const [showCursor, setShowCursor] = useState(true)
const fullText = DOMAINS[currentDomain]
useEffect(() => {
let charIndex = 0
setTypedText("")
const typeInterval = setInterval(() => {
if (charIndex < fullText.length) {
setTypedText(fullText.slice(0, charIndex + 1))
charIndex++
} else {
clearInterval(typeInterval)
setTimeout(() => {
setCurrentDomain((prev) => (prev + 1) % DOMAINS.length)
}, 2500)
}
}, 70)
return () => clearInterval(typeInterval)
}, [currentDomain, fullText])
useEffect(() => {
const cursorInterval = setInterval(() => {
setShowCursor((prev) => !prev)
}, 530)
return () => clearInterval(cursorInterval)
}, [])
return (
<section className="min-h-screen flex items-center justify-center px-6">
<div className="max-w-2xl">
<h1 className="text-4xl md:text-5xl font-light mb-8">
Jeff Emmett
</h1>
<p className="text-xl md:text-2xl text-muted-foreground mb-4">
Exploring{" "}
<span className="text-primary">
{typedText}
<span className={showCursor ? "opacity-100" : "opacity-0"}>|</span>
</span>
</p>
<p className="text-muted-foreground mb-12 leading-relaxed">
Building tools for coordination and collective flourishing.
</p>
<div className="flex flex-wrap gap-6 text-sm">
<a href="https://commonsstack.org" target="_blank" rel="noopener noreferrer">
Commons Stack
</a>
<a href="https://mycofi.earth" target="_blank" rel="noopener noreferrer">
MycoFi
</a>
<a href="https://medium.com/@jeffemmett" target="_blank" rel="noopener noreferrer">
Writing
</a>
</div>
</div>
</section>
)
}