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.
164 lines
8.8 KiB
164 lines
8.8 KiB
import Image from "next/image";
|
|
|
|
export function TeambyAssistSection() {
|
|
return (
|
|
<section
|
|
id="teamby-assist-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mt-[40px] mb-[120px]"
|
|
>
|
|
{/* Frame 2147225289 (Type: FRAME, id: 4193:9747, width: 1216, height: 608) */}
|
|
<div className="relative w-full max-w-[1216px] min-h-[608px] flex flex-col items-center overflow-visible">
|
|
|
|
{/* ========================================================================= */}
|
|
{/* 1. Header & Titles Container (Frame 2147225107, id: 4193:9748, w: 802, h: 195, x: 207, y: 0) */}
|
|
{/* ========================================================================= */}
|
|
<div className="relative w-full max-w-[802px] flex flex-col items-center text-center z-30">
|
|
|
|
{/* Badge (Frame 2147225110, id: 4193:9749, w: 108, h: 48, itemSpacing: -8) */}
|
|
<div className="relative flex flex-col items-center">
|
|
{/* Badge Sparkle Star + Blur Halo (Frame 2147225109 & 3_4193_9751, w: 32, h: 32) */}
|
|
<div className="relative w-[32px] h-[32px] flex items-center justify-center -mb-[8px] pointer-events-none select-none z-20">
|
|
<Image
|
|
src="/assets/images/assist_badge_star.png"
|
|
alt=""
|
|
width={64}
|
|
height={64}
|
|
unoptimized
|
|
className="w-[64px] h-[64px] max-w-none flex-shrink-0"
|
|
/>
|
|
</div>
|
|
|
|
{/* Badge Pill (Header, id: 4193:9756, w: 108, h: 24, padding: 12px 4px, rounded: 24px) */}
|
|
<div className="relative z-10 px-[12px] py-[4px] rounded-[24px] bg-[#0f1a47]/70 border border-white/50 backdrop-blur-[14px] flex items-center justify-center">
|
|
{/* Title (id: 4193:9757, 12px, Inter Medium, #dae5ff) */}
|
|
<span className="text-[#dae5ff] text-[12px] leading-[16px] font-medium tracking-normal select-none">
|
|
Teamby Assist
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Titles Block (Frame 2147225111, id: 4193:9758, w: 802, h: 99, itemSpacing: 16, mt: 48px) */}
|
|
<div className="w-full flex flex-col items-center mt-[48px] gap-[12px]">
|
|
{/* Title (Subtitle, id: 4193:9761, 32px, Inter Medium, #e4ecf7) */}
|
|
<h2 className="text-[#e4ecf7] text-[28px] sm:text-[32px] leading-[36px] sm:leading-[39px] font-medium tracking-tight text-center">
|
|
Teamby gets is done.
|
|
</h2>
|
|
|
|
{/* Subtitle (Subtitle, id: 4193:9762, 16px, Inter Regular, lineHeight: 24px, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] sm:text-[16px] leading-[22px] sm:leading-[24px] font-normal text-center max-w-[802px]">
|
|
TeamBy unifies your work and uses AI to optimize workflows, meetings, and costs—so you can manage smarter without chasing updates.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ========================================================================= */}
|
|
{/* 2. Background Cosmic Light Wings & Particles */}
|
|
{/* ========================================================================= */}
|
|
{/* Left Wing (Group 2147223381, id: 4193:9764, w: 371, h: 228, x: 205, y: 302) */}
|
|
<div className="absolute left-[calc(50%-403px)] top-[302px] w-[371px] h-[228px] pointer-events-none select-none z-0 hidden md:block">
|
|
<Image
|
|
src="/assets/images/assist_beam_left.png"
|
|
alt=""
|
|
width={371}
|
|
height={228}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Right Wing (Group 2147223382, id: 4193:9917, w: 371, h: 228, x: 640, y: 302, rotation: -180) */}
|
|
<div className="absolute left-[calc(50%+32px)] top-[302px] w-[371px] h-[228px] pointer-events-none select-none z-0 hidden md:block">
|
|
<Image
|
|
src="/assets/images/assist_beam_right.png"
|
|
alt=""
|
|
width={371}
|
|
height={228}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* ========================================================================= */}
|
|
{/* 3. Central Glowing Orbit / Orb (Orbit, id: 4193:10070, w: 390, h: 390, x: 413, y: 218) */}
|
|
{/* ========================================================================= */}
|
|
<div className="relative md:absolute md:left-1/2 md:-translate-x-1/2 md:top-[92px] w-full max-w-[390px] md:max-w-none md:w-[802px] h-[340px] md:h-[641px] flex items-center justify-center pointer-events-none select-none z-10 my-[20px] md:my-0">
|
|
<Image
|
|
src="/assets/images/assist_orb.png"
|
|
alt="Teamby Assist Cosmic Orb"
|
|
width={802}
|
|
height={641}
|
|
priority
|
|
unoptimized
|
|
className="w-full md:w-[802px] h-auto md:h-[641px] max-w-none object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* ========================================================================= */}
|
|
{/* 4. Left Task Voice Pills (Frame 2147225288, id: 4193:10200, w: 286, h: 328, x: 0, y: 251) */}
|
|
{/* ========================================================================= */}
|
|
<div className="relative md:absolute md:left-0 md:top-[251px] w-full max-w-[286px] h-[328px] z-20 flex flex-col justify-between">
|
|
|
|
{/* Card 1: (Frame 2147225284, id: 4193:10205, w: 286, h: 104, y: 251, opacity: 0.4) */}
|
|
<div className="relative w-[286px] h-[104px] p-[16px] rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-[#03070d]/20 border border-[#0f161f] opacity-40 backdrop-blur-[4px] flex items-start gap-[16px]">
|
|
<div className="w-[24px] h-[24px] flex-shrink-0 mt-[2px]">
|
|
<Image
|
|
src="/assets/images/assist_audio_lines.svg"
|
|
alt=""
|
|
width={24}
|
|
height={24}
|
|
unoptimized
|
|
className="w-[24px] h-[24px]"
|
|
/>
|
|
</div>
|
|
<p className="text-[#e4ecf7] text-[16px] leading-[24px] font-normal text-left font-[family-name:var(--font-inter)]">
|
|
Create a task for the design team to review the landing page by 4 PM.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Card 2: Active (Frame 2147225286, id: 4193:10210, w: 286, h: 96, y: 367, opacity: 1) */}
|
|
<div className="relative w-[286px] h-[96px] flex items-center">
|
|
{/* Rectangle 1000001632 (id: 4193:10214, w: 216, h: 44, fill: #124aff, blur: 64px) */}
|
|
<div className="absolute -right-[100px] top-1/2 -translate-y-1/2 w-[216px] h-[44px] bg-[#124aff] rounded-full blur-[64px] pointer-events-none opacity-90 -z-10" />
|
|
|
|
<div className="relative w-full h-full p-[24px] rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-[#03070d]/20 border border-[#232f40] backdrop-blur-[4px] flex items-start gap-[16px] z-10">
|
|
<div className="w-[24px] h-[24px] flex-shrink-0 mt-[2px]">
|
|
<Image
|
|
src="/assets/images/assist_audio_lines.svg"
|
|
alt=""
|
|
width={24}
|
|
height={24}
|
|
unoptimized
|
|
className="w-[24px] h-[24px]"
|
|
/>
|
|
</div>
|
|
<p className="text-[#e4ecf7] text-[16px] leading-[24px] font-normal text-left font-[family-name:var(--font-inter)]">
|
|
Message Sara and cancel tomorrow's meeting.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Card 3: (Frame 2147225287, id: 4193:10201, w: 286, h: 104, y: 475, opacity: 0.4) */}
|
|
<div className="relative w-[286px] h-[104px] p-[16px] rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-[#03070d]/20 border border-[#0f161f] opacity-40 backdrop-blur-[4px] flex items-start gap-[16px]">
|
|
<div className="w-[24px] h-[24px] flex-shrink-0 mt-[2px]">
|
|
<Image
|
|
src="/assets/images/assist_audio_lines.svg"
|
|
alt=""
|
|
width={24}
|
|
height={24}
|
|
unoptimized
|
|
className="w-[24px] h-[24px]"
|
|
/>
|
|
</div>
|
|
<p className="text-[#e4ecf7] text-[16px] leading-[24px] font-normal text-left font-[family-name:var(--font-inter)]">
|
|
Reschedule the product meeting to Friday at 2 PM and let everyone know.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Vertical Gradient Fade Mask (Rectangle 1000001631, id: 4193:10209, w: 286, h: 328) */}
|
|
<div className="absolute inset-0 pointer-events-none rounded-tl-[24px] rounded-tr-[24px] rounded-br-[24px] rounded-bl-0 bg-gradient-to-b from-[#03070D] via-transparent to-[#03070D] z-20" />
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|