More from @cnippet-blocks
See all
You may also like
See all
registry/default/sections/cta-4.tsx
"use client";
import { Button } from "@/components/ui/button";
export function CTA4() {
return (
<section className="w-full bg-gray-50 dark:bg-neutral-900">
<div className="mx-auto w-full max-w-6xl px-6 py-16 md:py-20">
<div className="grid grid-cols-1 items-center gap-12 lg:grid-cols-2">
{/* Left Illustration */}
<div className="relative flex items-center justify-center">
<svg
className="h-auto w-full max-w-lg"
fill="none"
viewBox="0 0 450 400"
xmlns="http://www.w3.org/2000/svg"
>
{/* Decorative elements */}
{/* Stars */}
<path
d="M80 60 L85 70 L95 70 L87 77 L90 87 L80 80 L70 87 L73 77 L65 70 L75 70 Z"
fill="none"
stroke="#1e293b"
strokeWidth="1.5"
/>
<path
d="M380 40 L385 50 L395 50 L387 57 L390 67 L380 60 L370 67 L373 57 L365 50 L375 50 Z"
fill="none"
stroke="#1e293b"
strokeWidth="1.5"
/>
<path
d="M130 320 L132 325 L137 325 L133 328 L135 333 L130 330 L125 333 L127 328 L123 325 L128 325 Z"
fill="none"
stroke="#1e293b"
strokeWidth="1"
/>
{/* Plus signs */}
<path
d="M60 280 L60 295 M52.5 287.5 L67.5 287.5"
stroke="#1e293b"
strokeWidth="2"
/>
<path
d="M370 320 L370 330 M365 325 L375 325"
stroke="#1e293b"
strokeWidth="1.5"
/>
{/* Dash lines */}
<path
d="M340 70 L350 70 M360 70 L365 70"
stroke="#1e293b"
strokeWidth="2"
/>
<path
d="M350 290 L355 290 M362 290 L365 290"
stroke="#1e293b"
strokeWidth="1.5"
/>
{/* Monitor - Purple/Blue screen */}
<rect
fill="#a78bfa"
height="130"
rx="8"
stroke="#1e293b"
strokeWidth="2"
width="180"
x="70"
y="140"
/>
{/* Monitor stand */}
<rect
fill="#e2e8f0"
height="15"
stroke="#1e293b"
strokeWidth="2"
width="40"
x="140"
y="270"
/>
<path
d="M110 285 L210 285 Q215 295 210 305 L110 305 Q105 295 110 285"
fill="#e2e8f0"
stroke="#1e293b"
strokeWidth="2"
/>
{/* Screen content - chart */}
<rect
fill="#f97316"
height="40"
rx="4"
stroke="#1e293b"
strokeWidth="1.5"
width="60"
x="90"
y="160"
/>
<circle
cx="120"
cy="180"
fill="#fef3c7"
r="12"
stroke="#1e293b"
strokeWidth="1"
/>
{/* Lines on screen */}
<rect
fill="#c4b5fd"
height="4"
rx="2"
width="40"
x="90"
y="210"
/>
<rect
fill="#c4b5fd"
height="4"
rx="2"
width="50"
x="90"
y="220"
/>
<rect
fill="#c4b5fd"
height="4"
rx="2"
width="35"
x="90"
y="230"
/>
{/* Pie chart on screen */}
<circle
cx="200"
cy="250"
fill="#7c3aed"
r="20"
stroke="#1e293b"
strokeWidth="1.5"
/>
<path
d="M200 230 L200 250 L215 240"
fill="#c4b5fd"
stroke="#1e293b"
strokeWidth="1"
/>
{/* Floating window - white */}
<g transform="translate(160, 100)">
<rect
fill="white"
height="100"
rx="6"
stroke="#1e293b"
strokeWidth="2"
width="130"
x="0"
y="0"
/>
{/* Window dots */}
<circle
cx="15"
cy="15"
fill="#e2e8f0"
r="4"
stroke="#1e293b"
strokeWidth="1"
/>
<circle
cx="28"
cy="15"
fill="#e2e8f0"
r="4"
stroke="#1e293b"
strokeWidth="1"
/>
<circle
cx="41"
cy="15"
fill="#e2e8f0"
r="4"
stroke="#1e293b"
strokeWidth="1"
/>
{/* Lines */}
<rect
fill="#e2e8f0"
height="4"
rx="2"
width="50"
x="15"
y="35"
/>
<rect
fill="#e2e8f0"
height="4"
rx="2"
width="70"
x="15"
y="45"
/>
<rect
fill="#e2e8f0"
height="4"
rx="2"
width="40"
x="15"
y="55"
/>
<rect
fill="#e2e8f0"
height="4"
rx="2"
width="60"
x="15"
y="70"
/>
</g>
{/* Green chart card */}
<g transform="translate(240, 140)">
<rect
fill="#bef264"
height="100"
rx="6"
stroke="#1e293b"
strokeWidth="2"
width="120"
x="0"
y="0"
/>
{/* Bar chart */}
<rect
fill="#a3e635"
height="25"
stroke="#1e293b"
strokeWidth="1"
width="15"
x="20"
y="60"
/>
<rect
fill="#84cc16"
height="40"
stroke="#1e293b"
strokeWidth="1"
width="15"
x="40"
y="45"
/>
<rect
fill="#65a30d"
height="55"
stroke="#1e293b"
strokeWidth="1"
width="15"
x="60"
y="30"
/>
<rect
fill="#84cc16"
height="35"
stroke="#1e293b"
strokeWidth="1"
width="15"
x="80"
y="50"
/>
</g>
{/* Envelope */}
<g transform="translate(280, 60)">
<rect
fill="#f5f5f5"
height="30"
rx="3"
stroke="#1e293b"
strokeWidth="1.5"
width="40"
x="0"
y="0"
/>
<path
d="M0 5 L20 20 L40 5"
fill="none"
stroke="#1e293b"
strokeWidth="1.5"
/>
</g>
{/* Magnifying glass */}
<g transform="translate(300, 260)">
<circle
cx="20"
cy="20"
fill="#bef264"
r="18"
stroke="#1e293b"
strokeWidth="2"
/>
<path
d="M33 33 L50 50"
stroke="#1e293b"
strokeLinecap="round"
strokeWidth="3"
/>
</g>
{/* Mouse */}
<ellipse
cx="380"
cy="340"
fill="#f5f5f5"
rx="15"
ry="22"
stroke="#1e293b"
strokeWidth="2"
/>
<path d="M380 325 L380 340" stroke="#1e293b" strokeWidth="1.5" />
{/* Mouse cord */}
<path
d="M380 318 Q400 300 390 280 Q380 260 360 270"
fill="none"
stroke="#1e293b"
strokeWidth="1.5"
/>
</svg>
</div>
{/* Right Content */}
<div className="flex flex-col items-start">
<p className="mb-4 font-medium text-sm text-violet-600 italic tracking-wide dark:text-violet-400">
Access Tasks Anytime & Anywhere
</p>
<h2 className="mb-6 font-normal text-3xl text-gray-900 leading-tight md:text-4xl lg:text-5xl dark:text-gray-100">
Your{" "}
<span className="bg-violet-200 px-2 dark:bg-violet-900/30">
Personal
</span>
<br />
Productivity Hub.
</h2>
<p className="mb-10 max-w-md text-gray-600 text-sm leading-relaxed sm:text-base dark:text-gray-400">
We've shaped Donezo to feel like a natural extension of your mind,
making it easy to capture and organize tasks.
</p>
<Button className="rounded-full bg-violet-600 px-10 py-6 font-medium text-base text-white hover:bg-violet-700 dark:bg-violet-600 dark:hover:bg-violet-700">
Try it now
</Button>
</div>
</div>
</div>
</section>
);
}
