bender/19dc382c-5b41-4654-95c7-d58a8518b83c
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_27_1781844224352 into main #26

Merged
bender merged 1 commits from version_27_1781844224352 into main 2026-06-19 04:47:29 +00:00
Conversation 0 Commits 1 Files Changed 1 +91 -50
1 changed files with 91 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
src/pages/HomePage/sections/Hero.tsx
View File

@@ -5,6 +5,9 @@ import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import AvatarGroup from "@/components/ui/AvatarGroup";
import { useState, useEffect } from "react";
import { motion } from "motion/react";
import { Mic } from "lucide-react";
const avatarsSrc = [
"http://img.b2bpic.net/free-photo/studio-portrait-elegant-black-american-male-dressed-suit-grey-vignette-background_613910-1540.jpg",
@@ -41,61 +44,99 @@ type HeroCenteredLogosProps = {
} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
const HeroInline = () => {
const [stage, setStage] = useState<'dropping' | 'hit' | 'revealed'>('dropping');
useEffect(() => {
const hitTimer = setTimeout(() => setStage('hit'), 800);
const revealTimer = setTimeout(() => setStage('revealed'), 1100);
return () => {
clearTimeout(hitTimer);
clearTimeout(revealTimer);
};
}, []);
return (
<section aria-label="Hero section" className="relative h-svh flex flex-col mb-20">
<motion.section
aria-label="Hero section"
className="relative h-svh w-full flex flex-col items-center justify-center overflow-hidden bg-[#060000] mb-20"
animate={
stage === 'hit'
? { x: [-15, 15, -10, 10, -5, 5, 0], y: [-15, 15, -10, 10, -5, 5, 0] }
: { x: 0, y: 0 }
}
transition={{ duration: 0.5 }}
>
<HeroBackgroundSlot />
{!undefined && (
<div className="absolute inset-0 z-0">
<ImageOrVideo imageSrc={"http://img.b2bpic.net/free-photo/medium-shot-man-holding-bottle_23-2149213419.jpg"} className="size-full object-cover" />
<div className="absolute inset-0 bg-background/80" />
</div>
)}
<div className="relative z-10 flex-1 flex items-center justify-center">
<div className="flex flex-col items-center gap-3 pt-8 w-content-width mx-auto text-center">
<AvatarGroup avatarsSrc={avatarsSrc} label={"Join our community of visionaries"} size="lg" />
<TextAnimation
text={"YungHondo"}
variant="slide-up"
gradientText={true}
tag="h1"
className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance font-serif"
/>
<TextAnimation
text={"Built Different."}
variant="slide-up"
gradientText={false}
tag="h2"
className="text-3xl md:text-5xl font-bold text-[#721c24] mt-2 tracking-tight uppercase"
/>
<TextAnimation
text={"Representing those who left home to build a future."}
variant="slide-up"
gradientText={false}
tag="p"
className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance"
/>
<div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
<Button text={"Listen Now"} href={"https://spotify.com"} variant="primary" />
<Button text={"Watch Now"} href={"https://youtube.com"} variant="secondary" animationDelay={0.1} />
</div>
</div>
{/* Background Effects */}
<div className="absolute inset-0 z-0 pointer-events-none">
<div className="absolute top-[-10%] left-1/2 -translate-x-1/2 w-[1000px] h-[1000px] bg-[radial-gradient(circle_at_center,_rgba(255,61,74,0.15),_transparent_60%)]" />
<div className="absolute bottom-[-10%] left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-[radial-gradient(circle_at_center,_rgba(123,45,45,0.2),_transparent_60%)]" />
<div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_transparent_30%,_#060000_100%)]" />
</div>
<div className="relative z-10 w-content-width mx-auto pb-8 overflow-hidden mask-fade-x">
<div className="flex w-max animate-marquee-horizontal" style={{ animationDuration: "30s" }}>
{[...names, ...names, ...names, ...names].map((name, index) => (
<div key={index} className="shrink-0 mx-3 px-4 py-2 card rounded">
<span className="text-xl font-semibold whitespace-nowrap text-foreground/75">{name}</span>
</div>
))}
</div>
{/* Mic Drop Container */}
<div className="absolute top-[35%] left-1/2 -translate-x-1/2 -translate-y-1/2 z-20">
<motion.div
initial={{ y: '-100vh', rotate: -45 }}
animate={
stage === 'dropping'
? { y: '-100vh', rotate: -45 }
: { y: 0, rotate: 0 }
}
transition={{ type: 'spring', bounce: 0.6, duration: 0.8 }}
>
<Mic className="w-20 h-20 md:w-24 md:h-24 text-white drop-shadow-[0_0_30px_rgba(255,255,255,0.5)]" />
</motion.div>
{/* Sound Waves */}
{stage !== 'dropping' && (
<>
<motion.div
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[6px] border-[#ff3d4a]"
initial={{ width: 80, height: 80, opacity: 0.8 }}
animate={{ width: 2500, height: 2500, opacity: 0 }}
transition={{ duration: 1.2, ease: 'easeOut' }}
/>
<motion.div
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[4px] border-[#7b2d2d]"
initial={{ width: 80, height: 80, opacity: 0.6 }}
animate={{ width: 2000, height: 2000, opacity: 0 }}
transition={{ duration: 1.2, delay: 0.15, ease: 'easeOut' }}
/>
<motion.div
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full border-[2px] border-white"
initial={{ width: 80, height: 80, opacity: 0.4 }}
animate={{ width: 1500, height: 1500, opacity: 0 }}
transition={{ duration: 1.2, delay: 0.3, ease: 'easeOut' }}
/>
</>
)}
</div>
</section>
{/* Content Reveal */}
<motion.div
className="relative z-30 flex flex-col items-center mt-40 text-center w-content-width mx-auto"
initial={{ opacity: 0, scale: 0.8, y: 40 }}
animate={
stage === 'revealed'
? { opacity: 1, scale: 1, y: 0 }
: { opacity: 0, scale: 0.8, y: 40 }
}
transition={{ duration: 0.7, ease: 'easeOut' }}
>
<h1 className="text-6xl sm:text-8xl md:text-[10rem] leading-none font-black text-white uppercase tracking-tighter drop-shadow-[0_0_50px_rgba(255,61,74,0.5)]">
YungHondo
</h1>
<p className="mt-6 text-lg sm:text-2xl md:text-3xl text-white/90 font-bold uppercase tracking-[0.3em] drop-shadow-lg">
Built Different.
</p>
<div className="flex flex-wrap justify-center gap-4 mt-12">
<Button text="Listen Now" href="#listen" variant="primary" />
<Button text="Watch Videos" href="#watch" variant="secondary" />
</div>
</motion.div>
</motion.section>
);
};