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.
434 lines
23 KiB
434 lines
23 KiB
import Image from "next/image";
|
|
|
|
export function TaskAnalysisSection() {
|
|
return (
|
|
<section
|
|
id="task-analysis-section"
|
|
className="relative w-full flex flex-col items-center z-20 px-4 mb-[120px]"
|
|
>
|
|
{/* Root Node: 01 (Type: FRAME, id: 4193:9606, width: 1216, height: 919, layoutMode: VERTICAL, itemSpacing: 80) */}
|
|
<div className="relative w-full max-w-[1216px] flex flex-col items-center gap-[80px]">
|
|
{/* Frame 2147225107 (Type: FRAME, id: 4193:9607, width: 802, height: 219, layoutMode: VERTICAL, itemSpacing: 48) */}
|
|
<div className="relative w-full max-w-[802px] flex flex-col items-center gap-[48px]">
|
|
{/* Frame 2147225110 (Type: FRAME, id: 4193:9608, width: 101, height: 48, layoutMode: VERTICAL, itemSpacing: -8) */}
|
|
<div className="relative w-[101px] h-[48px]">
|
|
{/* Ellipse 1071 Glow Aura */}
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-[-25px] w-[80px] h-[79px] pointer-events-none z-0">
|
|
<Image
|
|
src="/assets/images/badge_glow.svg"
|
|
alt=""
|
|
width={80}
|
|
height={79}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Star Sphere Icon */}
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-[-46px] w-[128px] h-[128px] pointer-events-none z-10">
|
|
<Image
|
|
src="/assets/images/badge_star.svg"
|
|
alt=""
|
|
width={128}
|
|
height={128}
|
|
unoptimized
|
|
className="w-full h-full object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Badge Glass Pill */}
|
|
<div className="absolute left-0 top-[24px] w-[101px] h-[24px] rounded-[24px] bg-[#080f1a]/10 border border-white/20 backdrop-blur-[14px] flex items-center justify-center px-[12px] py-[4px] z-20">
|
|
<span className="text-[#f7faff] text-[12px] leading-[16px] font-medium text-center whitespace-nowrap">
|
|
Task analysis
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Frame 2147225111 (Type: FRAME, id: 4193:9617, width: 802, height: 123, layoutMode: VERTICAL, itemSpacing: 16) */}
|
|
<div className="w-full flex flex-col items-center gap-[16px] text-center">
|
|
{/* Title (id: 4193:9618, text: "Speed means nothing if you have to build it twice.", 24px, Inter Medium) */}
|
|
<h2 className="text-[#6f829e] text-[24px] leading-[29px] font-medium tracking-tight">
|
|
Speed means nothing if you have to build it twice.
|
|
</h2>
|
|
|
|
{/* Frame 2147225106 (id: 4193:9619, width: 802, height: 78, itemSpacing: 12) */}
|
|
<div className="w-full max-w-[802px] flex flex-col items-center">
|
|
{/* Subtitle (id: 4193:9620 & 4193:9621, 32px, Inter Medium, #e4ecf7 / #cbdaef) */}
|
|
<h3 className="text-[#e4ecf7] text-[32px] leading-[39px] font-medium tracking-tight">
|
|
Your team is shipping fast, but 30% of their work is{" "}
|
|
<span className="text-[#cbdaef]">bouncing back.</span>
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Frame 2147225112 (Type: FRAME, id: 4193:9622, width: 1216, height: 620, cornerRadius: 40) */}
|
|
<div className="relative w-full max-w-[1216px] h-[620px] rounded-[40px] bg-gradient-to-b from-[#000718] to-[#03070d]/0 border border-[#272f3a] overflow-hidden">
|
|
{/* Ellipse 43609 (id: 4193:9623, width: 169, height: 169, x: -43, y: 268, fill: #6d85ff, blur: 500px) */}
|
|
<div className="absolute -left-[43px] top-[268px] w-[169px] h-[169px] rounded-full bg-[#6d85ff] blur-[250px] opacity-40 pointer-events-none" />
|
|
|
|
{/* Frame 2147225119: Top Navigation Bar (id: 4193:9707, width: 1136, height: 42, x: 40, y: 40) */}
|
|
<div className="absolute left-[40px] top-[40px] w-[calc(100%-80px)] max-w-[1136px] flex items-center justify-between">
|
|
{/* Left Controls: Frame 2147225113 (id: 4193:9708, width: 377, height: 40, itemSpacing: 24) */}
|
|
<div className="flex items-center gap-[24px]">
|
|
{/* Frame 1000005816 -> Frame 1000005818: Logo & Text (id: 4193:9710) */}
|
|
<div className="flex items-center gap-[6px]">
|
|
{/* Kanban Icon (id: 4193:9712, width: 20, height: 20) */}
|
|
<Image
|
|
src="/assets/images/kanban_board_icon.svg"
|
|
alt=""
|
|
width={20}
|
|
height={20}
|
|
unoptimized
|
|
className="w-[20px] h-[20px]"
|
|
/>
|
|
{/* Kanban Board Title (id: 4193:9715, 20px, Inter Bold, #ffffff) */}
|
|
<span className="text-white text-[20px] leading-[24px] font-bold tracking-tight select-none">
|
|
Kanban Board
|
|
</span>
|
|
</div>
|
|
|
|
{/* Frame 1000005817: Dropdown & Setting (id: 4193:9716, width: 186, height: 40, itemSpacing: 12) */}
|
|
<div className="flex items-center gap-[12px]">
|
|
{/* Frame 1000005769: Main Board Dropdown (id: 4193:9717, width: 134, height: 40, cornerRadius: 12) */}
|
|
<button
|
|
type="button"
|
|
className="h-[40px] px-[15px] py-[9px] rounded-[12px] bg-[#d9d9d9]/[0.08] border border-white/[0.08] flex items-center justify-between gap-[19px] hover:bg-[#d9d9d9]/[0.12] transition-colors"
|
|
>
|
|
{/* Main Board Text (id: 4193:9719, 13px, Inter Medium, #ffffff) */}
|
|
<span className="text-white text-[13px] leading-[16px] font-medium select-none">
|
|
Main Board
|
|
</span>
|
|
{/* Down Arrow (id: 4193:9720, width: 21, height: 21) */}
|
|
<Image
|
|
src="/assets/images/kanban_down_arrow.svg"
|
|
alt=""
|
|
width={21}
|
|
height={21}
|
|
unoptimized
|
|
className="w-[21px] h-[21px]"
|
|
/>
|
|
</button>
|
|
|
|
{/* uil:setting: Setting Button (id: 4193:9724, width: 40, height: 39, cornerRadius: 12, fill: #1b84ff opacity 0.2) */}
|
|
<button
|
|
type="button"
|
|
aria-label="Settings"
|
|
className="w-[40px] h-[40px] rounded-[12px] bg-[#1b84ff]/20 flex items-center justify-center hover:bg-[#1b84ff]/30 transition-colors"
|
|
>
|
|
{/* Setting Icon (id: 4193:9725, width: 18, height: 18) */}
|
|
<Image
|
|
src="/assets/images/kanban_setting_icon.svg"
|
|
alt=""
|
|
width={18}
|
|
height={18}
|
|
unoptimized
|
|
className="w-[18px] h-[18px]"
|
|
/>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Controls: Frame 2147225114 (id: 4193:9726, width: 579, height: 42, itemSpacing: 12) */}
|
|
<div className="flex items-center gap-[12px]">
|
|
{/* Frame 1000005772: Search Bar (id: 4193:9727, width: 340, height: 40, cornerRadius: 12) */}
|
|
<div className="w-[340px] h-[40px] px-[10px] py-[9px] rounded-[12px] bg-[#d9d9d9]/[0.08] border border-white/[0.08] flex items-center gap-[8px]">
|
|
{/* Search Icon (id: 4193:9729, width: 21, height: 21) */}
|
|
<Image
|
|
src="/assets/images/kanban_search_icon.svg"
|
|
alt=""
|
|
width={21}
|
|
height={21}
|
|
unoptimized
|
|
className="w-[21px] h-[21px] flex-shrink-0"
|
|
/>
|
|
{/* Input Placeholder Text (id: 4193:9731, 13px, Inter Medium, #5c6577) */}
|
|
<input
|
|
type="text"
|
|
placeholder="Search tasks by title or description..."
|
|
className="w-full bg-transparent text-[13px] leading-[16px] text-white placeholder-[#5c6577] outline-none font-medium"
|
|
/>
|
|
</div>
|
|
|
|
{/* Frame 1000005770: Filter Button (id: 4193:9732, width: 86, height: 40, cornerRadius: 12) */}
|
|
<button
|
|
type="button"
|
|
className="h-[40px] pl-[10px] pr-[15px] py-[9px] rounded-[12px] bg-[#d9d9d9]/[0.08] border border-white/[0.08] flex items-center gap-[8px] hover:bg-[#d9d9d9]/[0.12] transition-colors"
|
|
>
|
|
{/* Filter Icon (id: 4193:9734, width: 21, height: 21) */}
|
|
<Image
|
|
src="/assets/images/kanban_filter_icon.svg"
|
|
alt=""
|
|
width={21}
|
|
height={21}
|
|
unoptimized
|
|
className="w-[21px] h-[21px]"
|
|
/>
|
|
{/* Filter Text (id: 4193:9736, 13px, Inter Medium, #ffffff) */}
|
|
<span className="text-white text-[13px] leading-[16px] font-medium select-none">
|
|
Filter
|
|
</span>
|
|
</button>
|
|
|
|
{/* Button: Get Started (id: 4193:9737, width: 129, height: 42, cornerRadius: 12) */}
|
|
<button
|
|
type="button"
|
|
className="h-[42px] px-[20px] py-[11px] rounded-[12px] bg-gradient-to-r from-[#0029b2] via-[#487eff] to-[#adbfff] border border-white/30 shadow-[0_0_20px_rgba(75,128,255,0.4)] flex items-center justify-center hover:opacity-95 transition-opacity"
|
|
>
|
|
{/* Button Title (id: 4193:9738, 16px, Inter Regular, #ffffff, lineHeight: 20px) */}
|
|
<span className="text-white text-[16px] leading-[20px] font-normal select-none">
|
|
Get Started
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Frame 2147225123: Columns Area (id: 4193:9624, width: 596, height: 217, x: 40, y: 120, itemSpacing: 24) */}
|
|
<div className="absolute left-[40px] top-[120px] flex items-start gap-[24px]">
|
|
{/* 1. "To Do" Column: Frame 2147225102 (id: 4193:9625, width: 286, height: 217, fills: #080f1a opacity 0.5, stroke: #0f161f, cornerRadius: 24) */}
|
|
<div className="relative w-[286px] h-[217px] rounded-[24px] bg-[#080f1a]/50 border border-[#0f161f] p-[24px] flex flex-col gap-[24px] flex-shrink-0">
|
|
{/* Ellipse 1071: Glow Effect (id: 4193:9665, w: 83.5, h: 78.3, fill: #0035b3 blur 200) */}
|
|
<div className="absolute -left-[17px] top-[0px] w-[84px] h-[78px] rounded-full bg-[#0035b3] blur-[80px] opacity-40 pointer-events-none" />
|
|
|
|
{/* Column Header: Frame 1000005788 (id: 4193:9626, width: 238, height: 24) */}
|
|
<div className="w-full flex items-center justify-between z-10">
|
|
{/* Title & Count: Frame 1000005783 (id: 4193:9627, itemSpacing: 8) */}
|
|
<div className="flex items-center gap-[8px]">
|
|
{/* To Do Text (id: 4193:9628, 14px, Inter Bold, #ffffff) */}
|
|
<span className="text-white text-[14px] leading-[17px] font-bold">
|
|
To Do
|
|
</span>
|
|
{/* Count Pill: Frame 1000005773 (id: 4193:9629, width: 24, height: 24, cornerRadius: 12) */}
|
|
<span className="w-[24px] h-[24px] rounded-[12px] bg-white/10 flex items-center justify-center text-white text-[11px] font-normal leading-[13px]">
|
|
1
|
|
</span>
|
|
</div>
|
|
|
|
{/* Status Pill: Frame 1000005784 (id: 4193:9631, width: 58, height: 24, fill: #16b05e opacity 0.2, cornerRadius: 12) */}
|
|
<div className="h-[24px] px-[10px] rounded-[12px] bg-[#16b05e]/20 flex items-center gap-[4px]">
|
|
{/* Dot (id: 4193:9632, width: 6, height: 6, fill: #16b05e) */}
|
|
<span className="w-[6px] h-[6px] rounded-full bg-[#16b05e]" />
|
|
{/* Done Text (id: 4193:9633, 11px, Inter Regular, #16b05e) */}
|
|
<span className="text-[#16b05e] text-[11px] leading-[13px] font-normal">
|
|
Done
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Task Card: Frame 1000005809 (id: 4193:9634, width: 238, height: 121, cornerRadius: 15) */}
|
|
<div className="w-full h-[121px] rounded-[15px] bg-gradient-to-b from-[#313e52]/40 to-[#252f3f]/40 border border-[#0f161f] p-[14px] shadow-[1px_5px_20px_rgba(0,0,0,0.2)] flex flex-col justify-between z-10">
|
|
{/* Card Top: Tag + Flag + Title (Frame 1000005800) */}
|
|
<div className="flex flex-col gap-[10px]">
|
|
{/* Tag + Flag Row (Frame 1000005797) */}
|
|
<div className="flex items-center justify-between">
|
|
{/* Game Tag (Frame 1000005791, cornerRadius: 7) */}
|
|
<div className="h-[22px] px-[6px] py-[4px] rounded-[7px] bg-gradient-to-r from-[#4374f3]/20 to-[#27448d]/20 flex items-center">
|
|
<span className="text-[#5786ff] text-[10px] leading-[12px] font-medium">
|
|
Hadi & Hoda Game
|
|
</span>
|
|
</div>
|
|
{/* Flag Icon (tabler:flag, id: 4193:9640) */}
|
|
<Image
|
|
src="/assets/images/kanban_flag_icon.svg"
|
|
alt=""
|
|
width={22}
|
|
height={22}
|
|
unoptimized
|
|
className="w-[22px] h-[22px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Title (id: 4193:9643, 14px, Inter Bold, #ffffff) */}
|
|
<span className="text-white text-[14px] leading-[17px] font-bold">
|
|
Landing page design
|
|
</span>
|
|
</div>
|
|
|
|
{/* Card Bottom Meta Row (Frame 1000005796) */}
|
|
<div className="flex items-center justify-between">
|
|
{/* Avatars: Frame 1000004608 (id: 4193:9645, width: 42, height: 24) */}
|
|
<div className="relative w-[42px] h-[24px] flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/kanban_avatars.png"
|
|
alt=""
|
|
width={42}
|
|
height={24}
|
|
unoptimized
|
|
className="w-[42px] h-[24px] object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Meta Badges: Frame 1000005795 (id: 4193:9655, itemSpacing: 6) */}
|
|
<div className="flex items-center gap-[6px]">
|
|
{/* Today Badge: Frame 1000005792 (id: 4193:9656, cornerRadius: 7) */}
|
|
<div className="h-[24px] px-[8px] rounded-[7px] bg-[#16b05e]/[0.08] border border-[#16b05e]/[0.05] flex items-center gap-[3px]">
|
|
<Image
|
|
src="/assets/images/kanban_calendar_icon.svg"
|
|
alt=""
|
|
width={13}
|
|
height={13}
|
|
unoptimized
|
|
className="w-[13px] h-[13px]"
|
|
/>
|
|
<span className="text-[#16b05e] text-[12px] leading-[15px] font-medium">
|
|
Today
|
|
</span>
|
|
</div>
|
|
|
|
{/* Comments Badge: Frame 1000005793 (id: 4193:9659, cornerRadius: 7) */}
|
|
<div className="h-[24px] px-[5px] rounded-[7px] bg-white/[0.04] border border-white/[0.02] flex items-center gap-[3px]">
|
|
<Image
|
|
src="/assets/images/kanban_message_icon.svg"
|
|
alt=""
|
|
width={12}
|
|
height={12}
|
|
unoptimized
|
|
className="w-[12px] h-[12px]"
|
|
/>
|
|
<span className="text-[#d2d4d7] text-[12px] leading-[15px] font-medium">
|
|
8
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2. "Done" Column: Frame 2147225103 (id: 4193:9666, width: 286, height: 217, fills: #080f1a opacity 0.5, stroke: #0f161f, cornerRadius: 24) */}
|
|
<div className="relative w-[286px] h-[217px] rounded-[24px] bg-[#080f1a]/50 border border-[#0f161f] p-[24px] flex flex-col gap-[24px] flex-shrink-0">
|
|
{/* Ellipse 1071: Glow Effect (id: 4193:9706, w: 83.5, h: 78.3, fill: #0035b3 blur 200) */}
|
|
<div className="absolute left-[0px] top-[0px] w-[84px] h-[78px] rounded-full bg-[#0035b3] blur-[80px] opacity-40 pointer-events-none" />
|
|
|
|
{/* Column Header: Frame 1000005788 (id: 4193:9667, width: 238, height: 24) */}
|
|
<div className="w-full flex items-center justify-between z-10">
|
|
{/* Title & Count: Frame 1000005783 (id: 4193:9668, itemSpacing: 8) */}
|
|
<div className="flex items-center gap-[8px]">
|
|
{/* Done Text (id: 4193:9669, 14px, Inter Bold, #ffffff) */}
|
|
<span className="text-white text-[14px] leading-[17px] font-bold">
|
|
Done
|
|
</span>
|
|
{/* Count Pill: Frame 1000005773 (id: 4193:9670, width: 24, height: 24, cornerRadius: 12) */}
|
|
<span className="w-[24px] h-[24px] rounded-[12px] bg-white/10 flex items-center justify-center text-white text-[11px] font-normal leading-[13px]">
|
|
1
|
|
</span>
|
|
</div>
|
|
|
|
{/* Status Pill: Frame 1000005784 (id: 4193:9672, width: 58, height: 24, fill: #16b05e opacity 0.2, cornerRadius: 12) */}
|
|
<div className="h-[24px] px-[10px] rounded-[12px] bg-[#16b05e]/20 flex items-center gap-[4px]">
|
|
{/* Dot (id: 4193:9673, width: 6, height: 6, fill: #16b05e) */}
|
|
<span className="w-[6px] h-[6px] rounded-full bg-[#16b05e]" />
|
|
{/* Done Text (id: 4193:9674, 11px, Inter Regular, #16b05e) */}
|
|
<span className="text-[#16b05e] text-[11px] leading-[13px] font-normal">
|
|
Done
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Task Card: Frame 1000005809 (id: 4193:9675, width: 238, height: 121, cornerRadius: 15) */}
|
|
<div className="w-full h-[121px] rounded-[15px] bg-gradient-to-b from-[#313e52]/40 to-[#252f3f]/40 border border-[#0f161f] p-[14px] shadow-[1px_5px_20px_rgba(0,0,0,0.2)] flex flex-col justify-between z-10">
|
|
{/* Card Top: Tag + Flag + Title (Frame 1000005800) */}
|
|
<div className="flex flex-col gap-[10px]">
|
|
{/* Tag + Flag Row (Frame 1000005797) */}
|
|
<div className="flex items-center justify-between">
|
|
{/* Game Tag (Frame 1000005791, cornerRadius: 7) */}
|
|
<div className="h-[22px] px-[6px] py-[4px] rounded-[7px] bg-gradient-to-r from-[#4374f3]/20 to-[#27448d]/20 flex items-center">
|
|
<span className="text-[#5786ff] text-[10px] leading-[12px] font-medium">
|
|
Hadi & Hoda Game
|
|
</span>
|
|
</div>
|
|
{/* Flag Icon (tabler:flag, id: 4193:9681) */}
|
|
<Image
|
|
src="/assets/images/kanban_flag_icon.svg"
|
|
alt=""
|
|
width={22}
|
|
height={22}
|
|
unoptimized
|
|
className="w-[22px] h-[22px]"
|
|
/>
|
|
</div>
|
|
|
|
{/* Title (id: 4193:9684, 14px, Inter Bold, #ffffff) */}
|
|
<span className="text-white text-[14px] leading-[17px] font-bold">
|
|
Landing page design
|
|
</span>
|
|
</div>
|
|
|
|
{/* Card Bottom Meta Row (Frame 1000005796) */}
|
|
<div className="flex items-center justify-between">
|
|
{/* Avatars: Frame 1000004608 (id: 4193_9686, width: 42, height: 24) */}
|
|
<div className="relative w-[42px] h-[24px] flex-shrink-0">
|
|
<Image
|
|
src="/assets/images/kanban_avatars.png"
|
|
alt=""
|
|
width={42}
|
|
height={24}
|
|
unoptimized
|
|
className="w-[42px] h-[24px] object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Meta Badges: Frame 1000005795 (id: 4193:9696, itemSpacing: 6) */}
|
|
<div className="flex items-center gap-[6px]">
|
|
{/* Today Badge: Frame 1000005792 (id: 4193:9697, cornerRadius: 7) */}
|
|
<div className="h-[24px] px-[8px] rounded-[7px] bg-[#16b05e]/[0.08] border border-[#16b05e]/[0.05] flex items-center gap-[3px]">
|
|
<Image
|
|
src="/assets/images/kanban_calendar_icon.svg"
|
|
alt=""
|
|
width={13}
|
|
height={13}
|
|
unoptimized
|
|
className="w-[13px] h-[13px]"
|
|
/>
|
|
<span className="text-[#16b05e] text-[12px] leading-[15px] font-medium">
|
|
Today
|
|
</span>
|
|
</div>
|
|
|
|
{/* Comments Badge: Frame 1000005793 (id: 4193:9700, cornerRadius: 7) */}
|
|
<div className="h-[24px] px-[5px] rounded-[7px] bg-white/[0.04] border border-white/[0.02] flex items-center gap-[3px]">
|
|
<Image
|
|
src="/assets/images/kanban_message_icon.svg"
|
|
alt=""
|
|
width={12}
|
|
height={12}
|
|
unoptimized
|
|
className="w-[12px] h-[12px]"
|
|
/>
|
|
<span className="text-[#d2d4d7] text-[12px] leading-[15px] font-medium">
|
|
8
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Group 2147223367: Cursor "Designer" Tag (id: 4193:9739, x: 201, y: 310, rotation: 6 deg) */}
|
|
<div className="absolute left-[201px] top-[310px] w-[106px] h-[47px] pointer-events-none select-none z-20">
|
|
<Image
|
|
src="/assets/images/kanban_cursor_designer.png"
|
|
alt="Designer"
|
|
width={106}
|
|
height={47}
|
|
unoptimized
|
|
className="w-[106px] h-[47px] object-contain"
|
|
/>
|
|
</div>
|
|
|
|
{/* Group 2147223368: Cursor "You" Tag (id: 4193:9743, x: 517, y: 249, rotation: -6 deg) */}
|
|
<div className="absolute left-[517px] top-[249px] w-[76px] h-[44px] pointer-events-none select-none z-20">
|
|
<Image
|
|
src="/assets/images/kanban_cursor_you.png"
|
|
alt="You"
|
|
width={76}
|
|
height={44}
|
|
unoptimized
|
|
className="w-[76px] h-[44px] object-contain"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|