87 lines
3.4 KiB
TypeScript
87 lines
3.4 KiB
TypeScript
|
|
export function HeroSection() {
|
|
return (
|
|
<section className="relative px-5 pt-5">
|
|
{/* Scroll Down button — vertical, left side */}
|
|
<div
|
|
className="absolute left-0 top-1/2 z-20 hidden xl:block"
|
|
style={{
|
|
transform: "rotate(-90deg) translateX(-50%) translateY(100%)",
|
|
transformOrigin: "left bottom",
|
|
}}
|
|
>
|
|
<span className="scroll-btn-decoration">
|
|
<a
|
|
href="#scroll-down"
|
|
className="inline-flex items-center gap-2 rounded-b-[25px] bg-white px-[56px] py-[16px] text-[13px] font-semibold text-[#0b0e17] no-underline transition-colors hover:text-[#45d0bd]"
|
|
style={{ fontFamily: "var(--font-sora)" }}
|
|
>
|
|
Scroll down
|
|
<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>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
{/* Hero container with background */}
|
|
<div
|
|
className="relative overflow-hidden rounded-[25px] bg-[#1f1f1f] bg-cover bg-center"
|
|
style={{
|
|
backgroundImage: "url(/images/aiero/home-9-top-bg-min.jpg)",
|
|
padding: "13.5% 0 8.333% 0",
|
|
}}
|
|
>
|
|
|
|
{/* Hero content */}
|
|
<div className="relative z-10 mx-auto max-w-[1140px] px-[15px]" style={{ marginLeft: "-35px", paddingLeft: "calc(50% - 570px + 15px)" }}>
|
|
<div className="flex flex-col items-start">
|
|
{/* Heading */}
|
|
<h1
|
|
className="mb-5 max-w-[1100px] text-left tracking-[-0.03em] text-white"
|
|
style={{
|
|
fontFamily: "var(--font-manrope)",
|
|
fontSize: "clamp(32px, 5.2vw, 80px)",
|
|
fontWeight: 700,
|
|
lineHeight: 1.1,
|
|
}}
|
|
>
|
|
Revolutionizing businesses with cutting-edge AI solutions and
|
|
groundbreaking innovation
|
|
</h1>
|
|
|
|
{/* Subtitle */}
|
|
<div style={{ marginRight: "53%" }}>
|
|
<p className="text-[16px] leading-[1.6] 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="mt-10">
|
|
<a
|
|
href="#"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="aiero-button aiero-button-solid inline-flex items-center gap-2 rounded-[25px] border border-[#EF6464] bg-[#EF6464] px-[30px] py-[14px] text-[16px] text-white transition-all hover:border-[#F57E7E] hover:bg-[#F57E7E]"
|
|
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>
|
|
);
|
|
}
|