73 lines
2.9 KiB
TypeScript
73 lines
2.9 KiB
TypeScript
import { HeroImageScene } from "@/components/aiero/HeroImageScene";
|
|
import { ScrollDown } from "@/components/shared/ScrollDown";
|
|
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative px-5 py-5">
|
|
{/* Scroll Down button — vertical, left side */}
|
|
<div className="scroll-widget absolute left-0 top-[40%] z-20 hidden xl:block">
|
|
<ScrollDown />
|
|
</div>
|
|
|
|
{/* Hero container with background */}
|
|
<div
|
|
className="relative overflow-hidden rounded-[25px] bg-aiero-dark"
|
|
style={{
|
|
minHeight: "min(858px, calc(100vw * 0.447))",
|
|
padding: "14.3% 0 8.1% 0",
|
|
}}
|
|
>
|
|
<HeroImageScene imageSrc="/images/aiero/home-9-top-bg-min.jpg" />
|
|
|
|
{/* Hero content */}
|
|
<div className="relative z-10 w-full px-[12.7vw]">
|
|
<div className="flex flex-col items-start">
|
|
{/* Heading */}
|
|
<h1
|
|
className="hero-reveal mb-[24px] max-w-[1280px] text-left tracking-[-0.03em] text-white"
|
|
style={{
|
|
fontFamily: "var(--font-manrope)",
|
|
fontSize: "clamp(42px, 4.43vw, 85px)",
|
|
fontWeight: 400,
|
|
lineHeight: 1.06,
|
|
}}
|
|
>
|
|
Revolutionizing businesses with cutting-edge AI solutions and
|
|
groundbreaking innovation
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<div className="hero-reveal max-w-[660px]" style={{ animationDelay: "760ms" }}>
|
|
<p className="text-[16px] font-semibold leading-[1.9] text-white">
|
|
Mummichog paradise fish! Triggerfish bango guppy opah sunfish
|
|
bluntnose knifefish upside-down catfish cobia spookfish convict
|
|
cichlid.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTA Button */}
|
|
<div className="hero-reveal mt-[42px]" style={{ animationDelay: "940ms" }}>
|
|
<a
|
|
href="#"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="aiero-button aiero-button-solid inline-flex items-center gap-2 rounded-[25px] border border-aiero-red bg-aiero-red px-[30px] py-[14px] text-[16px] text-white transition-all hover:-translate-y-0.5 hover:border-aiero-red-hover hover:bg-aiero-red-hover hover:shadow-[0_15px_30px_rgba(239,100,100,0.28)]"
|
|
style={{ minWidth: "216px", fontFamily: "var(--font-sora)" }}
|
|
>
|
|
Discover
|
|
<svg width="10" height="10" viewBox="0 0 12 12" fill="none">
|
|
<path d="M1 11L11 1M11 1H3M11 1V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
|
|
</svg>
|
|
<span className="button-inner" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scroll anchor */}
|
|
<div id="scroll-down" className="absolute bottom-0" />
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|