70 lines
3.1 KiB
TypeScript
70 lines
3.1 KiB
TypeScript
import { BookOpen, Code2, Terminal, Wrench } from "lucide-react";
|
|
import * as React from "react";
|
|
|
|
export const Hero: React.FC = () => {
|
|
return (
|
|
<section className="relative bg-slate-900 text-white py-16 md:py-24 overflow-hidden text-center">
|
|
{/* Background pattern */}
|
|
<div className="absolute inset-0 opacity-10">
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
backgroundImage:
|
|
"radial-gradient(circle at 1px 1px, white 1px, transparent 0)",
|
|
backgroundSize: "32px 32px",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="container relative z-10">
|
|
<div className="max-w-4xl mx-auto">
|
|
{/* Main heading */}
|
|
<h1 className="text-4xl md:text-6xl font-bold mb-4 md:mb-6 animate-slide-up leading-tight">
|
|
Digital Problem Solver
|
|
</h1>
|
|
|
|
<p className="text-lg md:text-2xl text-slate-300 mb-8 leading-relaxed animate-fade-in px-4 md:px-0">
|
|
I work on Digital problems and build tools, scripts, and systems to
|
|
solve them.
|
|
</p>
|
|
|
|
{/* Quick stats or focus areas */}
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6 mb-12 animate-fade-in">
|
|
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
|
|
<Code2 className="mx-auto mb-3 text-slate-400" size={28} />
|
|
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
|
|
Code
|
|
</div>
|
|
</div>
|
|
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
|
|
<Wrench className="mx-auto mb-3 text-slate-400" size={28} />
|
|
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
|
|
Tools
|
|
</div>
|
|
</div>
|
|
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
|
|
<Terminal className="mx-auto mb-3 text-slate-400" size={28} />
|
|
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
|
|
Automation
|
|
</div>
|
|
</div>
|
|
<div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 hover:border-white/30 transition-all duration-300">
|
|
<BookOpen className="mx-auto mb-3 text-slate-400" size={28} />
|
|
<div className="text-xs font-bold uppercase tracking-widest text-slate-300">
|
|
Learning
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Topics */}
|
|
<div className="mt-8 text-sm text-slate-400 animate-fade-in">
|
|
<span className="font-semibold text-slate-300">Topics:</span> Vibe
|
|
coding with AI • Debugging • Mac tools • Automation • Small scripts
|
|
• Learning notes • FOSS
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|