update home page

This commit is contained in:
2026-06-18 16:32:31 +05:30
parent d9cc83aa82
commit 8e0d704438
57 changed files with 2813 additions and 301 deletions

View File

@@ -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