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.
83 lines
3.8 KiB
83 lines
3.8 KiB
import Image from "next/image";
|
|
|
|
export function CallToActionSection() {
|
|
return (
|
|
<section
|
|
id="call-to-action-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mt-[40px] md:mt-[80px] mb-[120px]"
|
|
>
|
|
{/* Root Frame: call to action (Type: FRAME, id: 4193:10521, width: 1216, height: 445) */}
|
|
<div className="relative w-full max-w-[1216px] h-[445px] rounded-[32px] overflow-hidden select-none">
|
|
|
|
{/* Background Card (Frame 2095586149, id: 4193:10522, width: 1216, height: 445, cornerRadius: 32) */}
|
|
<div className="absolute inset-0 w-full h-full pointer-events-none -z-10">
|
|
<Image
|
|
src="/assets/images/call_to_action.png"
|
|
alt=""
|
|
fill
|
|
priority
|
|
unoptimized
|
|
className="object-cover object-center pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* 3D Visual Graphic (Group 1000011246, id: 4193:10668, w: 360, h: 360, x: 767, y: 43) */}
|
|
<div
|
|
className="absolute right-[0px] sm:right-[30px] lg:right-[65px] top-[20px] lg:top-[30px] w-[300px] sm:w-[360px] lg:w-[420px] h-[287px] sm:h-[344px] lg:h-[401px] pointer-events-none select-none z-10"
|
|
style={{
|
|
WebkitMaskImage:
|
|
"radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 70%)",
|
|
maskImage:
|
|
"radial-gradient(ellipse at center, rgba(0, 0, 0, 1) 35%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 70%)",
|
|
}}
|
|
>
|
|
<Image
|
|
src="/assets/images/call_to_action_visual.png"
|
|
alt=""
|
|
width={450}
|
|
height={430}
|
|
priority
|
|
unoptimized
|
|
className="w-full h-full object-contain pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
|
|
{/* Text Frame (Frame 2095586148, id: 4193:10660, width: 471, height: 81, x: 132, y: 127) */}
|
|
<div className="absolute left-[24px] sm:left-[60px] lg:left-[132px] top-[100px] lg:top-[127px] w-[calc(100%-48px)] sm:w-[471px] max-w-[471px] flex flex-col gap-[16px] z-20">
|
|
{/* Title (Title, id: 4193:10661, 40px, Inter Medium, #ffffff) */}
|
|
<h2 className="text-white text-[32px] sm:text-[40px] leading-[38px] sm:leading-[48px] font-medium tracking-tight text-left">
|
|
Install in minutes.
|
|
</h2>
|
|
|
|
{/* Subtitle (Subtitle, id: 4193:10662, 14px, Inter Regular, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-left max-w-[471px]">
|
|
Download TeamBy and create your workspace. No setup marathon.
|
|
</p>
|
|
</div>
|
|
|
|
{/* CTA Button (Button, id: 4193:10724, width: 173, height: 48, x: 132, y: 261, radius: 12) */}
|
|
<button
|
|
type="button"
|
|
id="cta-see-in-action-button"
|
|
className="btn-primary-gradient absolute left-[24px] sm:left-[60px] lg:left-[132px] top-[245px] lg:top-[261px] w-[173px] h-[48px] rounded-[12px] px-[20px] py-[12px] flex items-center justify-center gap-[8px] cursor-pointer hover:brightness-110 active:scale-95 transition-all shadow-[0_0_25px_rgba(72,126,255,0.35)] z-20"
|
|
>
|
|
{/* Icon (Icon, id: 4193:10725, width: 25, height: 24) */}
|
|
<Image
|
|
src="/assets/images/call_to_action_icon.svg"
|
|
alt=""
|
|
width={25}
|
|
height={24}
|
|
unoptimized
|
|
className="w-[25px] h-[24px] flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
|
|
{/* Button Title (Button title, id: 4193:10727, 16px, Inter Regular, lineHeight: 20px, #ffffff) */}
|
|
<span className="text-white text-[16px] leading-[20px] font-normal text-center select-none">
|
|
See In Action
|
|
</span>
|
|
</button>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|