You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
167 lines
6.7 KiB
167 lines
6.7 KiB
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { useRef } from "react";
|
|
import { HeroDotCanvas } from "./HeroDotCanvas";
|
|
import { HeroWaves } from "./HeroWaves";
|
|
|
|
export function HeroSection() {
|
|
const sectionRef = useRef<HTMLElement>(null);
|
|
|
|
return (
|
|
<section
|
|
ref={sectionRef}
|
|
id="hero-section"
|
|
className="relative w-full h-[796px] flex flex-col items-center pointer-events-none"
|
|
>
|
|
{/* Background Graphic & Curve (back_4178_60221: x: 32, y: 230, w: 1856, h: 566) */}
|
|
<div className="absolute top-[230px] left-1/2 -translate-x-1/2 w-[1856px] max-w-[calc(100vw-64px)] h-[566px] rounded-b-[32px] overflow-hidden z-0">
|
|
<Image
|
|
src="/assets/images/hero_back.svg?v=grav_v1"
|
|
alt=""
|
|
fill
|
|
priority
|
|
unoptimized
|
|
className="object-cover object-top select-none pointer-events-none"
|
|
/>
|
|
{/* Interactive Gravitational Water Waves */}
|
|
{/* <HeroWaves sectionRef={sectionRef} /> */}
|
|
{/* Interactive Canvas Dots */}
|
|
<HeroDotCanvas sectionRef={sectionRef} />
|
|
</div>
|
|
|
|
{/* Particle Starfield Lights (Light_4178_61305 & Light_4178_61255) */}
|
|
<div className="absolute top-[85px] left-1/2 -translate-x-[calc(50%+470px)] w-[1137px] h-[269px] opacity-80 pointer-events-none z-10">
|
|
<Image
|
|
src="/assets/images/hero_light_left.svg"
|
|
alt=""
|
|
width={1137}
|
|
height={269}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
<div className="absolute top-[105px] left-1/2 -translate-x-[calc(50%-470px)] w-[1137px] h-[269px] opacity-80 pointer-events-none z-10">
|
|
<Image
|
|
src="/assets/images/hero_light_right.svg"
|
|
alt=""
|
|
width={1137}
|
|
height={269}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Left Floating 3D Shape (Object_4178_61355: x: 479, y: 436, w: 56, h: 56) */}
|
|
<div className="absolute top-[436px] left-1/2 -translate-x-[calc(50%+481px)] w-[56px] h-[56px] pointer-events-none z-30">
|
|
<Image
|
|
src="/assets/images/object_left.png"
|
|
alt=""
|
|
width={56}
|
|
height={56}
|
|
unoptimized
|
|
className="w-full h-full object-contain drop-shadow-[0_0_15px_rgba(72,126,255,0.4)]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Floating 3D Shape (Object_4178_61358: x: 1397, y: 458, w: 48, h: 48) */}
|
|
<div className="absolute top-[458px] left-1/2 -translate-x-[calc(50%-437px)] w-[48px] h-[48px] pointer-events-none z-30">
|
|
<Image
|
|
src="/assets/images/object_right.png"
|
|
alt=""
|
|
width={48}
|
|
height={48}
|
|
unoptimized
|
|
className="w-full h-full object-contain drop-shadow-[0_0_15px_rgba(72,126,255,0.4)]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Central Hero Content Container (Container_4178_61361: x: 609, y: 176, w: 703, h: 349) */}
|
|
<div className="relative top-[96px] w-full max-w-[703px] px-4 flex flex-col items-center z-20 pointer-events-auto">
|
|
{/* Top Pill Badge (Frame_2095586179_4178_61362: w: 95, h: 43, layoutMode: NONE) */}
|
|
<div id="hero-badge" className="relative w-[95px] h-[43px] mb-[32px]">
|
|
{/* Ellipse 1071 Glow Aura (Ellipse_1071_4178_61367: x: 29, y: -5, w: 31.25, h: 30.24) */}
|
|
<div className="absolute left-[5px] top-[-29px] w-[80px] h-[79px] pointer-events-none z-0">
|
|
<Image
|
|
src="/assets/images/badge_glow.svg"
|
|
alt=""
|
|
width={80}
|
|
height={79}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Star Sphere Icon (3_4178_61363: x: 33.5, y: 0, w: 28, h: 28) */}
|
|
<div className="absolute left-[-16.5px] top-[-50px] w-[128px] h-[128px] pointer-events-none z-10">
|
|
<Image
|
|
src="/assets/images/badge_star.svg"
|
|
alt=""
|
|
width={128}
|
|
height={128}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Badge Glass Pill (Header_4178_61368: x: 0, y: 20, w: 95, h: 24, radius: 24) */}
|
|
<div className="absolute left-0 top-[20px] w-[95px] h-[24px] rounded-[24px] bg-[#080f1a]/10 border border-white/20 backdrop-blur-[14px] flex items-center justify-center px-[12px] py-[4px] z-20">
|
|
<span className="text-[#f7faff] text-[12px] leading-[16px] font-medium text-center whitespace-nowrap">
|
|
Team By . Ai
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Typography Heading & Subtitle (text_4178_61370: w: 703, h: 194) */}
|
|
<div className="w-full flex flex-col items-center text-center gap-[16px] mb-[32px]">
|
|
{/* Vector Typography Heading */}
|
|
<h1 className="sr-only">AI-Powered Management for Team Leads.</h1>
|
|
<div
|
|
className="relative w-full max-w-[703px] h-[130px] flex items-center justify-center"
|
|
aria-hidden="true"
|
|
>
|
|
<Image
|
|
src="/assets/images/hero_heading.svg"
|
|
alt="AI-Powered Management for Team Leads."
|
|
width={703}
|
|
height={130}
|
|
priority
|
|
unoptimized
|
|
className="w-full h-full object-contain select-none pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Subtitle (Subtitle_4178_61381: 16px / 24px line height, #b8cae5) */}
|
|
<p
|
|
id="hero-subtitle"
|
|
className="text-[#b8cae5] text-[16px] leading-[24px] font-normal text-center max-w-[703px]"
|
|
>
|
|
TeamBy unifies your work and uses AI to optimize workflows,
|
|
meetings, and costs—so you can manage smarter without chasing
|
|
updates.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Hero CTA Button (Button_4178_61382: w: 173, h: 48, radius: 12) */}
|
|
<Link
|
|
href="#action"
|
|
id="hero-cta-button"
|
|
className="btn-primary-gradient w-[173px] h-[48px] rounded-[12px] px-[20px] py-[12px] flex items-center justify-center gap-[8px] text-[16px] leading-[20px] font-medium text-white hover:brightness-110 active:scale-95 transition-all shadow-[0_0_25px_rgba(72,126,255,0.35)]"
|
|
>
|
|
<div className="relative w-[21px] h-[20px] flex items-center justify-center">
|
|
<Image
|
|
src="/assets/images/hero_btn_icon.svg"
|
|
alt=""
|
|
width={21}
|
|
height={20}
|
|
unoptimized
|
|
className="w-[21px] h-[20px] object-contain"
|
|
/>
|
|
</div>
|
|
<span>See In Action</span>
|
|
</Link>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|