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.
201 lines
11 KiB
201 lines
11 KiB
import Image from "next/image";
|
|
|
|
export function VoiceAgentSection() {
|
|
return (
|
|
<section
|
|
id="voice-agent-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mb-[120px]"
|
|
>
|
|
{/* Frame 2147225098 (Type: FRAME, id: 1429:12443, width: 1216, height: 1330) */}
|
|
<div className="relative w-full max-w-[1216px] flex flex-col gap-[24px]">
|
|
{/* ROW 1: (y: 0, height: 481) */}
|
|
<div className="w-full flex flex-col lg:flex-row gap-[24px] items-stretch">
|
|
{/* 1. Image Container (id: 1429:12444, width: 803, height: 481, fills: #080f1a opacity 0.5, cornerRadius: 32) */}
|
|
<div className="relative w-full lg:w-[803px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-white/[0.08] overflow-hidden flex-shrink-0">
|
|
{/* Glow Effects: Ellipse 1075, 1079, 1080 */}
|
|
<div className="absolute -left-[112px] top-[322px] w-[318px] h-[318px] rounded-full bg-[#0029b2] blur-[100px] pointer-events-none opacity-80" />
|
|
<div className="absolute -left-[112px] top-[401px] w-[239px] h-[239px] rounded-full bg-[#0032d7] blur-[70px] pointer-events-none opacity-80" />
|
|
<div className="absolute -left-[112px] top-[461px] w-[179px] h-[179px] rounded-full bg-[#809dff] blur-[50px] pointer-events-none opacity-70" />
|
|
|
|
{/* Title (id: 1429:12445, x: 40, y: 40, w: 723, h: 20) */}
|
|
<span className="absolute left-[40px] top-[40px] text-[#6f829e] text-[14px] leading-[20px] tracking-[0.1px] font-normal font-[family-name:var(--font-poppins)] select-none">
|
|
Smart Voice Agent
|
|
</span>
|
|
|
|
{/* Text Block (id: 1429:12446, x: 40, y: 366, w: 723, h: 75) */}
|
|
<div className="absolute left-[40px] top-[366px] w-[calc(100%-80px)] max-w-[723px] flex flex-col">
|
|
{/* Frame 2147225099 (id: 1429:12447, itemSpacing: 12) */}
|
|
<div className="flex flex-col gap-[12px]">
|
|
{/* Title (id: 1429:12448, 24px, Inter Medium, #f7faff) */}
|
|
<h3 className="text-[#f7faff] text-[24px] leading-[29px] font-medium tracking-tight">
|
|
Stop typing. Just say it.TeamBy follows through.
|
|
</h3>
|
|
{/* Subtitle (id: 1429:12449, 14px, Inter Regular, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] leading-[17px] font-normal max-w-[723px]">
|
|
Speak naturally and TeamBy types for you, creates tasks, assigns owners, sets deadlines, and generates status summaries on demand.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. Card (id: 1429:12454, width: 389, height: 481, fills: #080f1a opacity 0.5, cornerRadius: 32) */}
|
|
<div className="relative w-full lg:w-[389px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-white/[0.08] overflow-hidden flex-shrink-0">
|
|
{/* Background Glow (Vector 6071 / id: 1429:12456) */}
|
|
<div className="absolute inset-0 pointer-events-none select-none opacity-80">
|
|
<Image
|
|
src="/assets/images/feature_grid_card_glow.png"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Star particle constellation (id: 1429:12463) */}
|
|
<div className="absolute inset-0 pointer-events-none select-none">
|
|
<Image
|
|
src="/assets/images/feature_grid_card_stars.svg"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Orbit glow lines & sphere (Group 2147223363 & 2147223364) */}
|
|
<div className="absolute inset-0 pointer-events-none select-none">
|
|
<Image
|
|
src="/assets/images/feature_grid_card_orbit2.png"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-cover"
|
|
/>
|
|
<Image
|
|
src="/assets/images/feature_grid_card_orbit1.png"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Frame 2147225100: 250% (HTML text) + Arrow up-right (x: 32, y: 72, w: 188.79, h: 47.55) */}
|
|
<div className="absolute left-[32px] top-[72px] flex items-start select-none">
|
|
<span className="text-[48px] leading-[48px] font-medium tracking-tight bg-gradient-to-b from-[#ffffff] to-[#86a2ff] bg-clip-text text-transparent font-[Inter]">
|
|
250%
|
|
</span>
|
|
<Image
|
|
src="/assets/images/feature_grid_card_arrow.svg"
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
unoptimized
|
|
className="w-[20px] h-[20px] ml-1 flex-shrink-0"
|
|
/>
|
|
</div>
|
|
|
|
{/* Subtitle (id: 1429:12521, x: 32, y: 415, w: 325, h: 34, 14px, Inter Regular, #6995ff) */}
|
|
<p className="absolute left-[32px] top-[415px] w-[325px] text-[#6995ff] text-[14px] leading-[17px] font-normal">
|
|
Speak naturally and TeamBy types for you, creates tasks, assigns owners.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ROW 2: Group 2147223361 (y: 505, height: 481) */}
|
|
<div className="w-full flex flex-col lg:flex-row gap-[24px] items-stretch">
|
|
{/* 3. Card (id: 1429:12532, width: 389, height: 481, fills: #080f1a opacity 0.5, stroke: #2e353f, cornerRadius: 32) */}
|
|
<div className="relative w-full lg:w-[389px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-[#2e353f] overflow-hidden flex-shrink-0">
|
|
{/* Earth from space image (id: 1429:12533, w: 389, h: 388, rotation: -180) */}
|
|
<div className="absolute top-0 left-0 w-[389px] h-[388px] pointer-events-none select-none overflow-hidden">
|
|
<Image
|
|
src="/assets/images/feature_grid_earth.png"
|
|
alt="Earth from Space"
|
|
fill
|
|
unoptimized
|
|
className="object-cover"
|
|
/>
|
|
{/* Inner shadow overlay */}
|
|
<div className="absolute inset-0 shadow-[inset_0_0_100px_#040a13] pointer-events-none" />
|
|
</div>
|
|
|
|
{/* Ellipse arc line (id: 1429:12534) */}
|
|
<div className="absolute top-[62px] -left-[120px] w-[958px] h-[275px] pointer-events-none select-none">
|
|
<Image
|
|
src="/assets/images/feature_grid_earth_ellipse.svg"
|
|
alt=""
|
|
width={389}
|
|
height={231}
|
|
unoptimized
|
|
className="w-full h-auto object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Box Blur overlay (id: 1429:12535, w: 598, h: 352, x: -104, y: 257) */}
|
|
<div
|
|
className="absolute -left-[104px] top-[257px] w-[598px] h-[352px] pointer-events-none backdrop-blur-[2px] bg-black/[0.01]"
|
|
style={{
|
|
WebkitMaskImage:
|
|
"linear-gradient(to bottom, transparent 0%, black 35%, black 100%)",
|
|
maskImage:
|
|
"linear-gradient(to bottom, transparent 0%, black 35%, black 100%)",
|
|
}}
|
|
/>
|
|
|
|
{/* Text Block (id: 1429:12536, x: 40, y: 388, w: 283, h: 53) */}
|
|
<div className="absolute left-[40px] top-[388px] w-[283px] flex flex-col">
|
|
{/* Frame 2147225099 (id: 1429:12537, itemSpacing: 12) */}
|
|
<div className="flex flex-col gap-[12px]">
|
|
{/* Title (id: 1429:12538, 20px, Inter Medium, #f7faff) */}
|
|
<h3 className="text-[#f7faff] text-[20px] leading-[24px] font-medium tracking-tight">
|
|
Stop typing
|
|
</h3>
|
|
{/* Subtitle (id: 1429:12539, 14px, Inter Regular, #6995ff) */}
|
|
<p className="text-[#6995ff] text-[14px] leading-[17px] font-normal">
|
|
Speak naturally and TeamBy types for you.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 4. Image Container (id: 1429:12523, width: 803, height: 481, fills: #080f1a opacity 0.5, cornerRadius: 32) */}
|
|
<div className="relative w-full lg:w-[803px] h-[481px] rounded-[32px] bg-[#080f1a]/50 border border-white/[0.08] overflow-hidden flex-shrink-0">
|
|
{/* Glow Effects: Ellipse 1075, 1079, 1080 */}
|
|
<div className="absolute -left-[112px] top-[322px] w-[318px] h-[318px] rounded-full bg-[#0029b2] blur-[100px] pointer-events-none opacity-80" />
|
|
<div className="absolute -left-[112px] top-[401px] w-[239px] h-[239px] rounded-full bg-[#0032d7] blur-[70px] pointer-events-none opacity-80" />
|
|
<div className="absolute -left-[112px] top-[461px] w-[179px] h-[179px] rounded-full bg-[#809dff] blur-[50px] pointer-events-none opacity-70" />
|
|
|
|
{/* Title (id: 1429:12524, x: 40, y: 40, w: 723, h: 20) */}
|
|
<span className="absolute left-[40px] top-[40px] text-[#6f829e] text-[14px] leading-[20px] tracking-[0.1px] font-normal font-[family-name:var(--font-poppins)] select-none">
|
|
Smart Voice Agent
|
|
</span>
|
|
|
|
{/* Text Block (id: 1429:12525, x: 40, y: 366, w: 723, h: 75) */}
|
|
<div className="absolute left-[40px] top-[366px] w-[calc(100%-80px)] max-w-[723px] flex flex-col">
|
|
{/* Frame 2147225099 (id: 1429:12526, itemSpacing: 12) */}
|
|
<div className="flex flex-col gap-[12px]">
|
|
{/* Title (id: 1429:12527, 24px, Inter Medium, #f7faff) */}
|
|
<h3 className="text-[#f7faff] text-[24px] leading-[29px] font-medium tracking-tight">
|
|
Stop typing. Just say it.TeamBy follows through.
|
|
</h3>
|
|
{/* Subtitle (id: 1429:12528, 14px, Inter Regular, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] leading-[17px] font-normal max-w-[723px]">
|
|
Speak naturally and TeamBy types for you, creates tasks, assigns owners, sets deadlines, and generates status summaries on demand.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ROW 3: Group 2147223362 (y: 1010, height: 320) */}
|
|
<div className="w-full flex flex-col lg:flex-row gap-[24px] items-stretch">
|
|
{/* 5. Card (id: 1429:12543, width: 596, height: 320, fills: #080f1a opacity 0.5, stroke: #2e353f, cornerRadius: 32) */}
|
|
<div className="relative w-full lg:w-[596px] h-[320px] rounded-[32px] bg-[#080f1a]/50 border border-[#2e353f] overflow-hidden flex-shrink-0" />
|
|
|
|
{/* 6. Card (id: 1429:12541, width: 596, height: 320, fills: #080f1a opacity 0.5, stroke: #2e353f, cornerRadius: 32) */}
|
|
<div className="relative w-full lg:w-[596px] h-[320px] rounded-[32px] bg-[#080f1a]/50 border border-[#2e353f] overflow-hidden flex-shrink-0" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|