update home page
This commit is contained in:
@@ -1,49 +1,35 @@
|
||||
import { HeroImageScene } from "@/components/aiero/HeroImageScene";
|
||||
import { ScrollDown } from "@/components/shared/ScrollDown";
|
||||
|
||||
export function HeroSection() {
|
||||
return (
|
||||
<section className="relative px-5 pt-5">
|
||||
<section className="relative px-5 py-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 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-[#1f1f1f] bg-cover bg-center"
|
||||
className="relative overflow-hidden rounded-[25px] bg-aiero-dark"
|
||||
style={{
|
||||
backgroundImage: "url(/images/aiero/home-9-top-bg-min.jpg)",
|
||||
padding: "13.5% 0 8.333% 0",
|
||||
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 mx-auto max-w-[1140px] px-[15px]" style={{ marginLeft: "-35px", paddingLeft: "calc(50% - 570px + 15px)" }}>
|
||||
<div className="relative z-10 w-full px-[12.7vw]">
|
||||
<div className="flex flex-col items-start">
|
||||
{/* Heading */}
|
||||
<h1
|
||||
className="mb-5 max-w-[1100px] text-left tracking-[-0.03em] text-white"
|
||||
className="hero-reveal mb-[24px] max-w-[1280px] text-left tracking-[-0.03em] text-white"
|
||||
style={{
|
||||
fontFamily: "var(--font-manrope)",
|
||||
fontSize: "clamp(32px, 5.2vw, 80px)",
|
||||
fontWeight: 700,
|
||||
lineHeight: 1.1,
|
||||
fontSize: "clamp(42px, 4.43vw, 85px)",
|
||||
fontWeight: 400,
|
||||
lineHeight: 1.06,
|
||||
}}
|
||||
>
|
||||
Revolutionizing businesses with cutting-edge AI solutions and
|
||||
@@ -51,8 +37,8 @@ export function HeroSection() {
|
||||
</h1>
|
||||
|
||||
{/* Subtitle */}
|
||||
<div style={{ marginRight: "53%" }}>
|
||||
<p className="text-[16px] leading-[1.6] text-white">
|
||||
<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.
|
||||
@@ -60,12 +46,12 @@ export function HeroSection() {
|
||||
</div>
|
||||
|
||||
{/* CTA Button */}
|
||||
<div className="mt-10">
|
||||
<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-[#EF6464] bg-[#EF6464] px-[30px] py-[14px] text-[16px] text-white transition-all hover:border-[#F57E7E] hover:bg-[#F57E7E]"
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user