183 lines
7.4 KiB
TypeScript
183 lines
7.4 KiB
TypeScript
import React, { useEffect, useRef } from 'react';
|
|
import { Mail, Lock, Check } from 'lucide-react';
|
|
import { animate, stagger, random } from 'animejs';
|
|
|
|
const Hero: React.FC = () => {
|
|
const leftContentRef = useRef<HTMLDivElement>(null);
|
|
const glow1Ref = useRef<HTMLDivElement>(null);
|
|
const glow2Ref = useRef<HTMLDivElement>(null);
|
|
const cardRef = useRef<HTMLDivElement>(null);
|
|
const streakRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (leftContentRef.current) {
|
|
// Staggered entry for left content
|
|
animate(leftContentRef.current.children, {
|
|
translateY: [20, 0],
|
|
opacity: [0, 1],
|
|
delay: stagger(150, { start: 300 }),
|
|
easing: 'easeOutQuad',
|
|
duration: 800
|
|
});
|
|
}
|
|
|
|
if (cardRef.current) {
|
|
// Elastic entry for the card
|
|
animate(cardRef.current, {
|
|
translateX: [100, 0],
|
|
opacity: [0, 1],
|
|
delay: 600,
|
|
easing: 'outElastic(1, .8)'
|
|
});
|
|
}
|
|
|
|
if (streakRef.current) {
|
|
// Bouncy entry for streak badge
|
|
animate(streakRef.current, {
|
|
scale: [0, 1],
|
|
opacity: [0, 1],
|
|
delay: 1000,
|
|
easing: 'outElastic(1, .8)',
|
|
}).then(() => {
|
|
// Floating animation after entry
|
|
animate(streakRef.current!, {
|
|
translateY: [-10, 0],
|
|
loop: true,
|
|
direction: 'alternate',
|
|
easing: 'inOutSine',
|
|
duration: 2000
|
|
});
|
|
});
|
|
}
|
|
|
|
if (glow1Ref.current) {
|
|
// Ambient glow animation
|
|
animate(glow1Ref.current, {
|
|
translateX: () => random(-30, 30),
|
|
translateY: () => random(-30, 30),
|
|
scale: [1, 1.2],
|
|
duration: 4000,
|
|
easing: 'inOutQuad',
|
|
loop: true,
|
|
direction: 'alternate'
|
|
});
|
|
}
|
|
|
|
if (glow2Ref.current) {
|
|
animate(glow2Ref.current, {
|
|
translateX: () => random(-30, 30),
|
|
translateY: () => random(-30, 30),
|
|
scale: [1, 1.3],
|
|
duration: 5000,
|
|
easing: 'inOutQuad',
|
|
loop: true,
|
|
direction: 'alternate'
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<header className="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden mesh-gradient">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
|
|
|
{/* Left Content */}
|
|
<div ref={leftContentRef} className="space-y-8 text-center lg:text-left">
|
|
<div className="opacity-0 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-semibold uppercase tracking-wider">
|
|
<span className="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
|
New: AI Deck Generation
|
|
</div>
|
|
|
|
<h1 className="opacity-0 text-5xl lg:text-7xl font-display font-bold leading-tight tracking-tight text-white">
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-emerald-400">
|
|
Stop Doomscrolling
|
|
</span>
|
|
<br />
|
|
Until You Study<br />
|
|
|
|
</h1>
|
|
|
|
<p className="opacity-0 text-lg text-gray-400 max-w-2xl mx-auto lg:mx-0 leading-relaxed">
|
|
Stop doom scrolling and start learning. Nemia blocks distracting apps until you complete your daily study goals using scientifically-backed spaced repetition.
|
|
</p>
|
|
|
|
<div className="opacity-0 flex flex-col sm:flex-row gap-3 justify-center lg:justify-start pt-4">
|
|
<a
|
|
href="#install"
|
|
className="bg-primary text-gray-900 px-8 py-4 rounded-xl font-bold text-lg hover:brightness-110 transition-all shadow-glow flex items-center justify-center gap-2"
|
|
onClick={(e) => {
|
|
(window as { umami?: { track?: (eventName: string, data?: Record<string, unknown>) => void } })
|
|
.umami?.track?.('hero_cta_clicked', { location: 'hero' });
|
|
e.preventDefault();
|
|
document.querySelector('#install')?.scrollIntoView({ behavior: 'smooth' });
|
|
}}
|
|
>
|
|
<span>Get it now</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Visual (Mockups) */}
|
|
<div className="relative mx-auto w-full max-w-md lg:max-w-full">
|
|
{/* Background Glows */}
|
|
<div ref={glow1Ref} className="absolute -top-10 -right-10 w-72 h-72 bg-purple-500/20 rounded-full blur-3xl"></div>
|
|
<div ref={glow2Ref} className="absolute -bottom-10 -left-10 w-72 h-72 bg-primary/20 rounded-full blur-3xl"></div>
|
|
|
|
{/* Main Focus Mode Card */}
|
|
<div ref={cardRef} className="opacity-0 relative bg-surface-dark border border-gray-700 rounded-3xl p-6 shadow-2xl transform rotate-3 hover:rotate-0 transition-transform duration-500">
|
|
<div className="flex justify-between items-center mb-8">
|
|
<h3 className="text-xl font-bold text-white">Focus Mode</h3>
|
|
<div className="bg-red-500/10 text-red-500 px-3 py-1 rounded-full text-xs font-bold flex items-center gap-1">
|
|
<Lock size={14} /> Focus Mode (Android)
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-center mb-8">
|
|
<div className="text-6xl font-display font-bold text-white mb-2">
|
|
<span className="text-white">22</span>
|
|
</div>
|
|
<p className="text-gray-400 font-medium">Cards Due</p>
|
|
<p className="text-sm text-gray-500">(+3 tomorrow)</p>
|
|
</div>
|
|
|
|
<button className="w-full bg-primary text-gray-900 font-bold py-4 rounded-xl shadow-lg hover:shadow-glow transition-all mb-6">
|
|
Review Now to Unlock
|
|
</button>
|
|
|
|
<div className="space-y-3">
|
|
<div className="bg-surface-accent p-4 rounded-xl flex justify-between items-center border border-gray-700/50">
|
|
<div>
|
|
<p className="font-semibold text-sm text-white">Korean Vocab</p>
|
|
<p className="text-xs text-gray-500">41 Cards total</p>
|
|
</div>
|
|
<span className="text-primary text-sm font-bold">18 Due</span>
|
|
</div>
|
|
<div className="bg-surface-accent p-4 rounded-xl flex justify-between items-center border border-gray-700/50">
|
|
<div>
|
|
<p className="font-semibold text-sm text-white">Russian Vocab</p>
|
|
<p className="text-xs text-gray-500">67 Cards total</p>
|
|
</div>
|
|
<span className="text-gray-500 text-sm font-bold">0 Due</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Streak Badge (Floating) */}
|
|
<div ref={streakRef} className="opacity-0 absolute -bottom-6 -left-6 bg-surface-accent text-white p-4 rounded-xl shadow-xl flex items-center gap-3 border border-gray-700 z-20">
|
|
<div className="bg-green-500 rounded-full p-1">
|
|
<Check size={14} className="text-white" />
|
|
</div>
|
|
<div>
|
|
<p className="text-xs font-bold uppercase tracking-wide opacity-70">Streak</p>
|
|
<p className="font-bold text-lg leading-none">14 Days</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
export default Hero;
|