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.
107 lines
4.8 KiB
107 lines
4.8 KiB
import Image from "next/image";
|
|
import { AnimatedCopilotOrb } from "@/components/copilot/AnimatedCopilotOrb";
|
|
import { CopilotParticleCanvas } from "@/components/copilot/CopilotParticleCanvas";
|
|
|
|
export function AiCopilotSection() {
|
|
return (
|
|
<section
|
|
id="ai-copilot-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mt-[80px] mb-[100px]"
|
|
>
|
|
{/* Floating Side Decorative Icons (Group 2147223357 & Group 2147223359: w: 32, h: 160) */}
|
|
<div className="absolute left-[calc(50%-680px)] top-[260px] w-[32px] h-[160px] pointer-events-none hidden xl:block z-10 opacity-90">
|
|
<Image
|
|
src="/assets/images/copilot_side_decor_left.svg"
|
|
alt=""
|
|
width={32}
|
|
height={160}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
<div className="absolute right-[calc(50%-680px)] top-[260px] w-[32px] h-[160px] pointer-events-none hidden xl:block z-10 opacity-90">
|
|
<Image
|
|
src="/assets/images/copilot_side_decor_right.svg"
|
|
alt=""
|
|
width={32}
|
|
height={160}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Top Header Block (Text_1429_12117: w: 864, h: 132, y: 0) */}
|
|
<div className="relative w-full max-w-[864px] flex flex-col items-center text-center z-20">
|
|
{/* Glow Aura behind badge (Clipped from half of icon to top) */}
|
|
<div className="absolute top-[20px] left-1/2 -translate-x-1/2 w-[300px] h-[200px] pointer-events-none -z-10 overflow-hidden">
|
|
<div className="absolute -top-[70px] left-1/2 -translate-x-1/2 w-[130px] h-[130px]">
|
|
<div className="absolute inset-0 bg-[#001ac7] rounded-full blur-[100px] opacity-70" />
|
|
<div className="absolute inset-[20px] bg-[#4e66ff] rounded-full blur-[50px] opacity-80" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Badge (3_1429_12123: w: 40, h: 40) */}
|
|
<div className="relative w-[40px] h-[40px] mb-[24px] flex items-center justify-center flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/copilot_badge.svg"
|
|
alt=""
|
|
width={100}
|
|
height={100}
|
|
unoptimized
|
|
className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Text Container (Text_Container_1429_12126: w: 864, h: 68, itemSpacing: 12) */}
|
|
<div className="w-full flex flex-col items-center gap-[12px]">
|
|
{/* Title (Title_1429_12127: 32px, Medium, #ffffff) */}
|
|
<h2 className="text-white text-[32px] leading-[39px] font-medium tracking-tight text-center max-w-[538px]">
|
|
Meet your AI management co‑pilot.
|
|
</h2>
|
|
|
|
{/* Subtitle (Subtitle_1429_12128: 14px, Regular, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[864px]">
|
|
TeamBy connects tasks, time, costs, and docs—then uses AI to optimize workflows and meeting time, so you can manage smarter.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content Frame: Separated AI Orb & Feature Matrices (Figma: 1216px x 437px) */}
|
|
<div className="relative w-full max-w-[1216px] mt-[48px] flex items-center justify-center">
|
|
<div className="relative w-full aspect-[1216/437] max-w-[1216px] overflow-visible select-none">
|
|
{/* Left Icon Matrix (Figma: 495x288 at x=0, y=75) */}
|
|
<div className="absolute left-[-16.28%] top-1/2 -translate-y-1/2 w-[57%] h-[186.5%] pointer-events-none select-none z-0">
|
|
<Image
|
|
src="/assets/images/copilot_icons_left.png"
|
|
alt="AI Features Matrix Left"
|
|
fill
|
|
priority
|
|
unoptimized
|
|
className="object-contain object-left select-none"
|
|
sizes="(max-width: 1280px) 45vw, 550px"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Icon Matrix (Figma: 495x288 at x=721, y=75) */}
|
|
<div className="absolute right-[-16.28%] top-1/2 -translate-y-1/2 w-[57%] h-[186.5%] pointer-events-none select-none z-0">
|
|
<Image
|
|
src="/assets/images/copilot_icons_right.png"
|
|
alt="AI Features Matrix Right"
|
|
fill
|
|
priority
|
|
unoptimized
|
|
className="object-contain object-right select-none"
|
|
sizes="(max-width: 1280px) 45vw, 550px"
|
|
/>
|
|
</div>
|
|
|
|
{/* Middle Luminous Orb (Figma: 437x437 centered at x=608, y=218.5) */}
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[132.57%] h-[197.94%] pointer-events-none select-none z-10">
|
|
<AnimatedCopilotOrb />
|
|
<CopilotParticleCanvas />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|