First commit
This commit is contained in:
239
src/components/Hero.tsx
Normal file
239
src/components/Hero.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion } from 'framer-motion';
|
||||
import { ArrowDown, Award } from 'lucide-react';
|
||||
|
||||
interface HeroProps {
|
||||
onScrollToSection: (sectionId: string) => void;
|
||||
}
|
||||
|
||||
export const Hero: React.FC<HeroProps> = ({ onScrollToSection }) => {
|
||||
const letters = ['R', 'A', 'I', 'S', 'E'];
|
||||
|
||||
// Track drag/hover status for each letter
|
||||
const [hoveredStates, setHoveredStates] = useState<boolean[]>([false, false, false, false, false]);
|
||||
const [isIntro, setIsIntro] = useState(true);
|
||||
const [entryCompleted, setEntryCompleted] = useState(false);
|
||||
const [hoverActive, setHoverActive] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// Start entrance animation almost immediately after mount
|
||||
const entryTimer = setTimeout(() => {
|
||||
setEntryCompleted(true);
|
||||
}, 100);
|
||||
|
||||
// Clear entrance delays for responsive hover events
|
||||
const hoverTimer = setTimeout(() => {
|
||||
setHoverActive(true);
|
||||
}, 1600);
|
||||
|
||||
// End intro state and introduce surrounding content
|
||||
const introTimer = setTimeout(() => {
|
||||
setIsIntro(false);
|
||||
}, 2400);
|
||||
|
||||
return () => {
|
||||
clearTimeout(entryTimer);
|
||||
clearTimeout(hoverTimer);
|
||||
clearTimeout(introTimer);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleMouseEnter = (index: number) => {
|
||||
if (!hoverActive) return; // disable hover actions during entry
|
||||
setHoveredStates(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = true;
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleMouseLeave = (index: number) => {
|
||||
setHoveredStates(prev => {
|
||||
const next = [...prev];
|
||||
next[index] = false;
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<header className="relative min-h-screen w-full flex flex-col justify-between items-center px-6 md:px-12 py-6 overflow-hidden bg-white grid-bg">
|
||||
{/* Background Gradients for Premium Touch */}
|
||||
<div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-gradient-to-tr from-brand-orange/5 to-brand-pink/5 rounded-full blur-[120px] pointer-events-none" />
|
||||
<div className="absolute bottom-0 right-1/4 w-[600px] h-[600px] bg-gradient-to-br from-brand-purple/5 to-brand-pink/5 rounded-full blur-[150px] pointer-events-none" />
|
||||
|
||||
{/* Glassmorphism Header */}
|
||||
<motion.nav
|
||||
animate={{ opacity: isIntro ? 0 : 1, y: isIntro ? -20 : 0 }}
|
||||
transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1] }}
|
||||
className="w-full max-w-7xl mx-auto flex items-center justify-between px-6 py-4 rounded-2xl glassmorphism shadow-premium z-50"
|
||||
style={{ pointerEvents: isIntro ? 'none' : 'auto' }}
|
||||
>
|
||||
<div className="flex items-center gap-3.5 cursor-pointer" onClick={() => onScrollToSection('hero')}>
|
||||
<div className="relative">
|
||||
<img src="/Raiselogo.png" alt="RAISE Incubator Logo" className="h-11 w-auto object-contain rounded-lg logo-black" />
|
||||
<div className="absolute -top-1 -right-1 w-3 h-3 rounded-full bg-emerald-500 border-2 border-white animate-pulse" />
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-heading font-extrabold text-xl tracking-tight text-neutral-900 block leading-none">RAISE</span>
|
||||
<span className="hidden sm:inline-block font-sans font-semibold text-[10px] text-neutral-400 uppercase tracking-wider mt-1">
|
||||
Incubation Cell
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Nav links */}
|
||||
<div className="hidden md:flex items-center gap-8">
|
||||
<button
|
||||
onClick={() => onScrollToSection('about')}
|
||||
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
|
||||
>
|
||||
About
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onScrollToSection('process')}
|
||||
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
|
||||
>
|
||||
Incubation Pathway
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onScrollToSection('stats')}
|
||||
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
|
||||
>
|
||||
Our Impact
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onScrollToSection('portfolio')}
|
||||
className="font-sans text-sm font-semibold text-neutral-600 hover:text-neutral-900 transition-colors"
|
||||
>
|
||||
Startups
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Call to Action Button */}
|
||||
<div>
|
||||
<button
|
||||
onClick={() => onScrollToSection('pitch')}
|
||||
className="relative px-5 py-2.5 rounded-xl bg-neutral-950 hover:bg-neutral-850 text-white font-sans text-sm font-bold shadow-lg shadow-neutral-950/10 transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]"
|
||||
>
|
||||
Pitch Your Idea
|
||||
</button>
|
||||
</div>
|
||||
</motion.nav>
|
||||
|
||||
{/* Hero Central Content */}
|
||||
<motion.div
|
||||
layout
|
||||
className="flex-1 w-full max-w-5xl flex flex-col justify-center items-center text-center mt-12 md:mt-16 z-10"
|
||||
>
|
||||
{/* RIT Institution Badge */}
|
||||
{!isIntro && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.6, ease: "easeOut" }}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-neutral-100/80 border border-neutral-200/50 mb-8"
|
||||
>
|
||||
<span className="w-2 h-2 rounded-full bg-[#e91e63] animate-ping" />
|
||||
<span className="font-sans text-xs font-bold uppercase tracking-widest text-neutral-600">
|
||||
Rajalakshmi Institute of Technology
|
||||
</span>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Giant RAISE Text with stroke outline, slanted format, and staggered load */}
|
||||
<motion.div
|
||||
layout
|
||||
className="flex select-none justify-center items-center gap-4 md:gap-8 mb-6 cursor-ew-resize"
|
||||
>
|
||||
{letters.map((letter, idx) => (
|
||||
<motion.span
|
||||
layout
|
||||
key={letter + idx}
|
||||
onMouseEnter={() => handleMouseEnter(idx)}
|
||||
onMouseLeave={() => handleMouseLeave(idx)}
|
||||
onTouchStart={() => handleMouseEnter(idx)}
|
||||
onTouchEnd={() => handleMouseLeave(idx)}
|
||||
className="text-[18vw] md:text-[14vw] leading-none select-none inline-block"
|
||||
style={{
|
||||
fontFamily: '"Archivo Black", sans-serif',
|
||||
WebkitTextStroke: '4.5px #000000',
|
||||
WebkitTextFillColor: hoveredStates[idx] ? '#000000' : 'transparent',
|
||||
color: hoveredStates[idx] ? '#000000' : 'transparent',
|
||||
display: 'inline-block',
|
||||
opacity: entryCompleted ? 1 : 0,
|
||||
transform: !entryCompleted
|
||||
? 'scale(0.3) skewX(0deg)'
|
||||
: hoveredStates[idx]
|
||||
? 'scale(1.08) translateY(-4px) skewX(-12deg)'
|
||||
: 'scale(1) skewX(-12deg)',
|
||||
transition: 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)',
|
||||
transitionDelay: hoverActive ? '0ms' : `${idx * 150}ms`,
|
||||
textShadow: hoveredStates[idx] ? '0 10px 30px rgba(0,0,0,0.05)' : 'none'
|
||||
}}
|
||||
>
|
||||
{letter}
|
||||
</motion.span>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Subtitle, Description, and Action Pills */}
|
||||
{!isIntro && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.15, ease: "easeOut" }}
|
||||
className="flex flex-col items-center"
|
||||
>
|
||||
<h2 className="font-heading text-lg md:text-xl lg:text-2xl font-bold text-neutral-800 max-w-4xl tracking-normal md:tracking-wide mb-6 uppercase">
|
||||
<span className="text-neutral-900 border-b-2 border-neutral-900 pb-1 mr-2">Rajalakshmi Accelerator</span> & Incubator for Startup Enterprises Association
|
||||
</h2>
|
||||
|
||||
<p className="font-sans text-sm md:text-base text-neutral-500 max-w-2xl leading-relaxed mb-12">
|
||||
A section 8 (not-for-profit) company inside the RIT campus. We empower student founders by providing continuous mentorship, infrastructure, and structured startup paths from ideation to seed funding.
|
||||
</p>
|
||||
|
||||
<motion.div
|
||||
whileHover={{ scale: 1.03 }}
|
||||
className="inline-flex items-center gap-3 px-6 py-3.5 rounded-2xl bg-gradient-to-r from-neutral-900 to-neutral-800 text-white font-sans font-bold shadow-xl shadow-neutral-950/20 mb-8 border border-neutral-700/50"
|
||||
>
|
||||
<Award className="w-5 h-5 text-yellow-400" />
|
||||
<span className="text-sm tracking-wide">
|
||||
APPROVED UNIQUE IDEAS SECURE FUNDS UP TO <span className="text-yellow-400 underline decoration-2 underline-offset-4">₹20,000</span>
|
||||
</span>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
)}
|
||||
</motion.div>
|
||||
|
||||
{/* Footer / Scroll Indicator */}
|
||||
<motion.div
|
||||
animate={{ opacity: isIntro ? 0 : 1, y: isIntro ? 20 : 0 }}
|
||||
transition={{ duration: 0.8, ease: "easeOut" }}
|
||||
className="w-full flex justify-between items-center max-w-7xl mx-auto z-10 py-4 border-t border-neutral-100"
|
||||
style={{ pointerEvents: isIntro ? 'none' : 'auto' }}
|
||||
>
|
||||
<div className="flex gap-4">
|
||||
<div className="flex items-center gap-2 text-xs font-semibold text-neutral-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-emerald-500" />
|
||||
Active Batch 2026
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<motion.button
|
||||
onClick={() => onScrollToSection('about')}
|
||||
animate={{ y: [0, 8, 0] }}
|
||||
transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
|
||||
className="flex flex-col items-center gap-1 font-sans font-semibold text-xs text-neutral-400 hover:text-neutral-900 transition-colors uppercase tracking-wider cursor-pointer"
|
||||
>
|
||||
Scroll to explore
|
||||
<ArrowDown className="w-4 h-4" />
|
||||
</motion.button>
|
||||
|
||||
<div className="text-xs font-semibold text-neutral-400">
|
||||
RIT Innovation Cell
|
||||
</div>
|
||||
</motion.div>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user