src/components/uiable/blocks/content/content-2/content-2.tsx
// ------------------------------ | CONTENT 2 | ------------------------------ //
export default function Content2() {
return (
<div className="relative py-24 sm:py-32">
<div className="absolute inset-0 z-10 bg-linear-to-tr from-emerald-500 to-lime-500"></div>
<div className="absolute inset-0 z-20 bg-card/85"></div>
<div className="relative z-30 container mx-auto px-6 lg:px-8">
<div className="mx-auto max-w-320 overflow-hidden rounded-3xl bg-card p-2 shadow-[0_0_40px_8px_#8e998738]">
<div className="flex flex-col-reverse items-center xl:flex-row">
<div className="basis-full xl:basis-6/12">
<div className="flex flex-col gap-4 p-4 sm:gap-8 md:p-10">
<h2 className="text-lg font-medium text-slate-800 sm:text-3xl dark:text-slate-50">
Requirement Gathering & Task Allocation
</h2>
<p className="max-w-200 text-slate-600 dark:text-slate-100">
The team will review project requirements and priorities.
Responsibilities and initial deliverables will be assigned.
Next steps and timelines for the upcoming phase will also be
discussed.
</p>
<div className="flex flex-col gap-5">
<div className="flex flex-row gap-4 sm:items-center">
<div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-lime-500 text-white shadow-[0_0_40px_-8px_#4680ff38] shadow-lime-500/50 transition-all sm:size-12">
<svg
className="size-6 sm:size-7"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M11.999 14.171c-2.13 0-3.87-1.73-3.87-3.87s1.74-3.86 3.87-3.86 3.87 1.73 3.87 3.87-1.74 3.86-3.87 3.86Zm0-6.23c-1.3 0-2.37 1.06-2.37 2.37s1.06 2.37 2.37 2.37 2.37-1.06 2.37-2.37-1.07-2.37-2.37-2.37Z"
fill="currentColor"
></path>
<path
d="M12.002 22.76a5.97 5.97 0 0 1-4.13-1.67c-2.95-2.84-6.21-7.37-4.98-12.76 1.11-4.89 5.38-7.08 9.11-7.08h.01c3.73 0 8 2.19 9.11 7.09 1.22 5.39-2.04 9.91-4.99 12.75a5.97 5.97 0 0 1-4.13 1.67Zm0-20.01c-2.91 0-6.65 1.55-7.64 5.91-1.08 4.71 1.88 8.77 4.56 11.34a4.425 4.425 0 0 0 6.17 0c2.67-2.57 5.63-6.63 4.57-11.34-1-4.36-4.75-5.91-7.66-5.91Z"
fill="currentColor"
></path>
</svg>
</div>
<div className="flex grow flex-col gap-2">
<p className="text-lg leading-none text-slate-800 dark:text-slate-100">
Venue
</p>
<p className="text-md leading-tight text-slate-600 sm:leading-none dark:text-slate-400">
245 Westlake Ave, Seattle, Washington
</p>
</div>
</div>
<div className="flex flex-row gap-4 sm:items-center">
<div className="inline-flex size-10 shrink-0 items-center justify-center rounded-lg bg-yellow-500 text-white shadow-[0_0_40px_-8px_#4680ff38] shadow-yellow-500/50 transition-all sm:size-12">
<svg
className="size-6 sm:size-7"
xmlns="http://www.w3.org/2000/svg"
width="32"
height="32"
viewBox="0 0 24 24"
fill="none"
>
<path
d="M13.4 14.6c-.19 0-.38-.07-.53-.22l-1.4-1.4a.75.75 0 0 1-.22-.53V9.66c0-.41.34-.75.75-.75s.75.34.75.75v2.48l1.18 1.18c.29.29.29.77 0 1.06-.15.15-.34.22-.53.22Z"
fill="currentColor"
></path>
<path
d="M12 19.25c-1.59 0-3.09-.5-4.35-1.45-.03-.02-.05-.03-.08-.05A7.243 7.243 0 0 1 4.75 12C4.75 8 8 4.75 12 4.75S19.25 8 19.25 12a7.23 7.23 0 0 1-2.79 5.72c-.03.02-.05.04-.08.06A7.2 7.2 0 0 1 12 19.25Zm-3.57-2.74c.03.02.05.03.07.05 2.03 1.57 5.01 1.56 7.03-.02.02-.02.05-.04.07-.05A5.717 5.717 0 0 0 17.75 12c0-3.17-2.58-5.75-5.75-5.75S6.25 8.83 6.25 12c0 1.77.79 3.41 2.18 4.51Z"
fill="currentColor"
></path>
<path
d="M12.55 22.75h-1.09c-1.96 0-3.16-.97-3.67-2.98l-.5-2.47c-.04-.22.01-.45.16-.62.15-.17.36-.27.58-.27h.01c.17 0 .33.05.46.16 2.03 1.57 5.01 1.56 7.03-.02.31-.24.8-.19 1.05.12.14.17.2.4.16.62l-.51 2.47c-.53 2.02-1.73 2.99-3.68 2.99Zm-3.46-4.11.16.8c.38 1.5 1.16 1.81 2.21 1.81h1.09c1.04 0 1.82-.31 2.21-1.83l.16-.78c-1.81.8-4.01.81-5.83 0ZM16 7.62c-.17 0-.34-.06-.47-.16-2.02-1.58-5-1.59-7.03-.02-.31.24-.8.19-1.04-.11-.14-.17-.2-.4-.16-.62l.49-2.44c.51-2.05 1.71-3.02 3.67-3.02h1.09c1.95 0 3.15.97 3.66 2.96l.52 2.51c.05.22-.01.45-.15.62-.14.18-.35.28-.58.28Zm-4-2.87c1.03 0 2.01.21 2.92.61l-.17-.81c-.39-1.48-1.16-1.8-2.2-1.8h-1.09c-1.05 0-1.83.31-2.21 1.85l-.16.76c.91-.4 1.89-.61 2.91-.61Z"
fill="currentColor"
></path>
</svg>
</div>
<div className="flex grow flex-col gap-2">
<p className="text-lg leading-none text-slate-800 dark:text-slate-100">
Time
</p>
<p className="text-md leading-tight text-slate-600 sm:leading-none dark:text-slate-400">
Monday, 1 July 2026, 2:00 PM – 3:30 PM IST
</p>
</div>
</div>
</div>
</div>
</div>
<div className="basis-full xl:basis-6/12">
<div className="relative">
<img
src="https://cdn.uiable.com/block/img-content-2.jpg"
alt="Team meeting in a conference room"
className="w-full rounded-xl"
/>
<div className="absolute top-4 -right-15 rotate-45 bg-lime-500 px-17 py-1 text-white shadow-xl">
<span className="text-lg font-medium">Step 2</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
