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.
108 lines
4.7 KiB
108 lines
4.7 KiB
import Image from "next/image";
|
|
|
|
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 (Back_1429_12118: Ellipse 1578 & 1579) */}
|
|
<div className="absolute -top-[50px] left-1/2 -translate-x-1/2 w-[180px] h-[180px] pointer-events-none -z-10">
|
|
<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>
|
|
|
|
{/* 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: AI Orb & Feature Matrix (Content_Frame_1429_12129: w: 1216, h: 437, y: 212) */}
|
|
<div className="relative w-full max-w-[1216px] h-[340px] md:h-[437px] mt-[48px] flex items-center justify-center overflow-visible">
|
|
{/* Left Icons Matrix with smooth unclipped shadow blur (icons_1429_12130: w: 495, h: 288) */}
|
|
<div className="absolute left-[calc(50%-608px)] top-1/2 -translate-y-1/2 w-[495px] h-[288px] flex items-center justify-center pointer-events-none z-0">
|
|
<Image
|
|
src="/assets/images/copilot_icons_left.png"
|
|
alt=""
|
|
width={693}
|
|
height={815}
|
|
priority
|
|
unoptimized
|
|
className="max-w-none flex-shrink-0 select-none pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Icons Matrix with smooth unclipped shadow blur (icons_1429_12149: w: 495, h: 288) */}
|
|
<div className="absolute right-[calc(50%-608px)] top-1/2 -translate-y-1/2 w-[495px] h-[288px] flex items-center justify-center pointer-events-none z-0">
|
|
<Image
|
|
src="/assets/images/copilot_icons_right.png"
|
|
alt=""
|
|
width={693}
|
|
height={815}
|
|
priority
|
|
unoptimized
|
|
className="max-w-none flex-shrink-0 select-none pointer-events-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Center Luminous Ball AI Orb (Luminous_ball_1429_12168: w: 437, h: 437) */}
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[437px] h-[437px] flex items-center justify-center pointer-events-none z-10">
|
|
<Image
|
|
src="/assets/images/copilot_luminous_ball.png"
|
|
alt="AI Co-Pilot Luminous Sphere"
|
|
width={1349}
|
|
height={865}
|
|
priority
|
|
unoptimized
|
|
className="max-w-none flex-shrink-0 select-none pointer-events-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|