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.
157 lines
7.1 KiB
157 lines
7.1 KiB
import Image from "next/image";
|
|
|
|
export function StepsSection() {
|
|
const steps = [
|
|
{
|
|
id: "01",
|
|
category: "Organize",
|
|
description: "Put projects, tasks, and files in one place",
|
|
},
|
|
{
|
|
id: "02",
|
|
category: "Align",
|
|
description: "Meet and message with context",
|
|
},
|
|
{
|
|
id: "03",
|
|
category: "Optimize",
|
|
description: "Track time, let AI follow up.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section
|
|
id="steps-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mt-[40px] mb-[120px]"
|
|
>
|
|
{/* Top Header Block (Text_1429_10886: w: 1010, h: 132, y: 0) */}
|
|
<div className="relative w-full max-w-[1010px] flex flex-col items-center text-center z-20">
|
|
{/* Glow Aura behind badge (Back_1429_10887: 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_10892: 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/steps_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_10894: w: 964, h: 68, itemSpacing: 12) */}
|
|
<div className="w-full flex flex-col items-center gap-[12px]">
|
|
{/* Title (Title_1429_10895: 32px, Medium, #ffffff) */}
|
|
<h2 className="text-white text-[32px] leading-[39px] font-medium tracking-tight text-center max-w-[740px]">
|
|
Set up your smart management stack in 3 steps.
|
|
</h2>
|
|
|
|
{/* Subtitle (Subtitle_1429_10896: 14px, Regular, #6f829e) */}
|
|
<p className="text-[#6f829e] text-[14px] leading-[17px] font-normal text-center max-w-[964px]">
|
|
Projects, tasks, meetings, chat, files, and time in one connected desktop workspace, where AI reduces overhead and keeps everything in context.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Steps Container (Steps_Container_1429_10897: w: 1216, h: 145, y: 212) */}
|
|
<div className="w-full max-w-[1216px] mt-[60px] md:mt-[80px] flex flex-col md:flex-row items-center justify-between gap-4 md:gap-0 relative z-20">
|
|
{steps.map((step, idx) => (
|
|
<div key={step.id} className="contents">
|
|
{/* Step Card (w: 389, h: 145, radius: 24, fill: rgba(8,15,26,0.5), stroke: rgba(255,255,255,0.12)) */}
|
|
<div
|
|
id={`step-card-${step.id}`}
|
|
className="relative w-full md:w-[389px] h-[145px] rounded-[24px] bg-[#080f1a]/50 border border-white/[0.12] px-[32px] lg:px-[40px] py-[32px] flex items-center justify-between overflow-hidden backdrop-blur-[20px] shadow-[0_10px_30px_rgba(0,0,0,0.4)]"
|
|
>
|
|
{/* Internal Glow Effects (Ellipse 1071 & 1072) */}
|
|
<div className="absolute -left-[20px] top-[20px] w-[82px] h-[77px] bg-[#004cff] rounded-full blur-[40px] opacity-40 pointer-events-none" />
|
|
<div className="absolute -right-[20px] -bottom-[20px] w-[95px] h-[89px] bg-[#0149f3] rounded-full blur-[50px] opacity-40 pointer-events-none" />
|
|
|
|
{/* Star Particle Constellation Overlay (stars) */}
|
|
<div className="absolute inset-0 pointer-events-none opacity-70">
|
|
<Image
|
|
src="/assets/images/step_card_stars.svg"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
|
|
{/* Left Column: Number + 3D Grid Perspective Mesh */}
|
|
<div className="relative w-[36px] flex flex-col items-start justify-center flex-shrink-0 z-10">
|
|
<span className="text-[#3d6fe5] text-[20px] leading-[24px] font-medium drop-shadow-[0_0_15px_#4b80ff]">
|
|
{step.id}
|
|
</span>
|
|
<div className="relative w-[87px] h-[45px] -ml-[30px] mt-[4px] pointer-events-none select-none opacity-80">
|
|
<Image
|
|
src="/assets/images/step_card_mesh.svg"
|
|
alt=""
|
|
width={87}
|
|
height={45}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Vertical Gradient Line Divider (Line 7: 1px x 81px) */}
|
|
<div className="w-[1px] h-[81px] bg-gradient-to-b from-[#12141a] via-[#363b4d] to-[#12141a] flex-shrink-0 mx-[16px] z-10" />
|
|
|
|
{/* Right Column: Title + Subtitle */}
|
|
<div className="flex flex-col justify-center gap-[6px] flex-1 z-10">
|
|
<span className="text-[#6f829e] text-[14px] leading-[17px] font-medium">
|
|
{step.category}
|
|
</span>
|
|
<span className="text-[#dae5ff] text-[18px] lg:text-[20px] leading-[24px] font-medium">
|
|
{step.description}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Step Connector Chevron Button (Step_Container: w: 40, h: 40) */}
|
|
{idx < steps.length - 1 && (
|
|
<div className="hidden md:flex w-[40px] h-[40px] items-center justify-center flex-shrink-0 z-30 -mx-[20px] pointer-events-none select-none">
|
|
<Image
|
|
src="/assets/images/step_arrow_btn.svg"
|
|
alt=""
|
|
width={100}
|
|
height={100}
|
|
unoptimized
|
|
className="w-[100px] h-[100px] max-w-none flex-shrink-0 pointer-events-none select-none"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Bottom CTA Button Frame (Frame 2095586189: w: 129, h: 43, y: 437) */}
|
|
<div className="relative mt-[60px] md:mt-[80px] flex items-center justify-center z-20">
|
|
{/* Glow Aura behind button (Back: Ellipse 1578 & 1579) */}
|
|
<div className="absolute -top-[30px] left-1/2 -translate-x-1/2 w-[220px] h-[120px] pointer-events-none -z-10 opacity-70">
|
|
<Image
|
|
src="/assets/images/steps_btn_glow.png"
|
|
alt=""
|
|
fill
|
|
unoptimized
|
|
className="object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Button (Button_1429_10910: w: 129, h: 44, radius: 12) */}
|
|
<button
|
|
type="button"
|
|
id="steps-get-started-button"
|
|
className="btn-primary-gradient w-[129px] h-[44px] rounded-[12px] px-[20px] py-[12px] flex items-center justify-center text-[16px] leading-[20px] font-normal text-white hover:brightness-110 active:scale-95 transition-all shadow-[0_0_25px_rgba(72,126,255,0.35)] cursor-pointer"
|
|
>
|
|
<span>Get Started</span>
|
|
</button>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|