2231 lines
105 KiB
HTML
2231 lines
105 KiB
HTML
<html lang="en" data-theme="dark">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>RDaaS — Rubber Duck Debugging as a Service</title>
|
|
<base href="./" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="" />
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Serif:wght@300&display=swap"
|
|
rel="stylesheet"
|
|
/>
|
|
<link rel="stylesheet" href="duck.css" />
|
|
<link rel="stylesheet" href="duck2.css" />
|
|
</head>
|
|
<body>
|
|
<div id="root">
|
|
<div
|
|
code-path="src\App.tsx:26:5"
|
|
class="min-h-screen"
|
|
style="background-color: var(--background); transition: background-color 500ms"
|
|
>
|
|
<nav
|
|
code-path="src\sections\Navigation.tsx:18:5"
|
|
class="fixed top-0 left-0 right-0 z-50 h-14 border-b"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
backdrop-filter: blur(12px);
|
|
opacity: 0.95;
|
|
transition:
|
|
background-color 500ms,
|
|
border-color 500ms;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\Navigation.tsx:29:7"
|
|
class="mx-auto flex h-full max-w-[1200px] items-center justify-between px-6"
|
|
>
|
|
<div
|
|
code-path="src\sections\Navigation.tsx:31:9"
|
|
class="flex items-center gap-2 font-mono text-lg font-semibold"
|
|
style="color: var(--foreground)"
|
|
>
|
|
<span code-path="src\sections\Navigation.tsx:32:11" style="color: var(--secondary)">🦆</span
|
|
><span code-path="src\sections\Navigation.tsx:33:11">RDaaS</span>
|
|
</div>
|
|
<div code-path="src\sections\Navigation.tsx:37:9" class="hidden items-center gap-8 md:flex">
|
|
<button
|
|
code-path="src\sections\Navigation.tsx:38:11"
|
|
class="group relative font-mono text-[13px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>
|
|
How It Works<span
|
|
code-path="src\sections\Navigation.tsx:44:13"
|
|
class="absolute bottom-0 left-0 h-[1.5px] w-full origin-left scale-x-0 transition-transform duration-300 ease-out group-hover:scale-x-100"
|
|
style="background-color: var(--primary)"
|
|
></span></button
|
|
><button
|
|
code-path="src\sections\Navigation.tsx:49:11"
|
|
class="group relative font-mono text-[13px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>
|
|
Roadmap<span
|
|
code-path="src\sections\Navigation.tsx:55:13"
|
|
class="absolute bottom-0 left-0 h-[1.5px] w-full origin-left scale-x-0 transition-transform duration-300 ease-out group-hover:scale-x-100"
|
|
style="background-color: var(--primary)"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
<div code-path="src\sections\Navigation.tsx:63:9" class="flex items-center gap-3">
|
|
<button
|
|
code-path="src\sections\Navigation.tsx:65:11"
|
|
class="flex h-9 w-9 items-center justify-center rounded-full border transition-colors duration-200"
|
|
aria-label="Toggle theme"
|
|
style="
|
|
background-color: var(--surface-alt);
|
|
border-color: var(--border-color);
|
|
color: var(--foreground);
|
|
"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-sun"
|
|
aria-hidden="true"
|
|
code-path="src\sections\Navigation.tsx:75:55"
|
|
>
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path d="M12 2v2"></path>
|
|
<path d="M12 20v2"></path>
|
|
<path d="m4.93 4.93 1.41 1.41"></path>
|
|
<path d="m17.66 17.66 1.41 1.41"></path>
|
|
<path d="M2 12h2"></path>
|
|
<path d="M20 12h2"></path>
|
|
<path d="m6.34 17.66-1.41 1.41"></path>
|
|
<path d="m19.07 4.93-1.41 1.41"></path>
|
|
</svg></button
|
|
><button
|
|
code-path="src\sections\Navigation.tsx:79:11"
|
|
class="hidden rounded-full px-5 py-2.5 font-mono text-sm font-semibold tracking-wide text-white transition-all duration-200 hover:scale-[1.03] md:block"
|
|
style="background-color: var(--primary); box-shadow: var(--button-glow)"
|
|
>
|
|
START NOW</button
|
|
><button
|
|
code-path="src\sections\Navigation.tsx:96:11"
|
|
class="flex h-9 w-9 flex-col items-center justify-center gap-[6px] md:hidden"
|
|
style="color: var(--foreground)"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-menu"
|
|
aria-hidden="true"
|
|
code-path="src\sections\Navigation.tsx:101:45"
|
|
>
|
|
<path d="M4 5h16"></path>
|
|
<path d="M4 12h16"></path>
|
|
<path d="M4 19h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main code-path="src\App.tsx:28:7">
|
|
<section
|
|
code-path="src\sections\HeroSection.tsx:63:5"
|
|
class="relative flex min-h-screen flex-col items-center justify-center px-4 pt-20 pb-16"
|
|
style="background-color: var(--background)"
|
|
>
|
|
<canvas
|
|
code-path="src\components\FlyingCodeCanvas.tsx:95:5"
|
|
class="absolute inset-0 w-full h-full pointer-events-none"
|
|
width="2560"
|
|
height="1323"
|
|
style="opacity: 0.4"
|
|
></canvas>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:70:7"
|
|
class="relative z-10 flex flex-col items-center text-center"
|
|
>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:72:9"
|
|
class="mb-6 font-mono text-xs font-medium tracking-[0.05em] opacity-0"
|
|
style="
|
|
color: var(--muted);
|
|
transform: translate(0px, 0px);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
opacity: 1;
|
|
"
|
|
>
|
|
// RUBBER DUCK DEBUGGING AS A SERVICE
|
|
</div>
|
|
<h1
|
|
code-path="src\sections\HeroSection.tsx:81:9"
|
|
class="max-w-[900px] font-serif font-light opacity-0 max-md:text-4xl md:text-[52px] lg:text-[72px]"
|
|
style="
|
|
color: var(--foreground);
|
|
line-height: 1;
|
|
letter-spacing: -1.5px;
|
|
transform: translate(0px, 0px);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
opacity: 1;
|
|
"
|
|
>
|
|
Stuck on a bug?<br code-path="src\sections\HeroSection.tsx:92:11" />Talk it out with your duck.
|
|
</h1>
|
|
<p
|
|
code-path="src\sections\HeroSection.tsx:97:9"
|
|
class="mx-auto mt-6 max-w-[560px] font-mono text-[15px] leading-[1.7] opacity-0"
|
|
style="
|
|
color: var(--muted);
|
|
transform: translate(0px, 0px);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
opacity: 1;
|
|
"
|
|
>
|
|
The world's first on-demand rubber duck debugging service. Explain your code line by line. Watch the
|
|
solution appear. No judgment, just quacks.
|
|
</p>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:107:9"
|
|
class="mx-auto mt-10 w-full max-w-[520px] overflow-hidden opacity-0"
|
|
style="
|
|
background-color: var(--terminal);
|
|
border-radius: 8px;
|
|
transform: translate(0px, 0px);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:117:11"
|
|
class="flex h-9 items-center gap-2 px-3.5"
|
|
style="background-color: rgb(26, 26, 30)"
|
|
>
|
|
<span
|
|
code-path="src\sections\HeroSection.tsx:121:13"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(239, 68, 68)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\HeroSection.tsx:122:13"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(234, 179, 8)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\HeroSection.tsx:123:13"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(34, 197, 94)"
|
|
></span>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:127:11"
|
|
class="px-5 py-5 font-mono text-sm leading-relaxed"
|
|
style="color: var(--terminal-text)"
|
|
>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:129:15"
|
|
class="transition-opacity duration-300"
|
|
style="opacity: 1"
|
|
>
|
|
<span code-path="src\sections\HeroSection.tsx:134:17" style="color: var(--muted-alt)">$</span
|
|
><span code-path="src\sections\HeroSection.tsx:137:17" style="color: var(--terminal-text)">
|
|
rdaas init</span
|
|
>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:129:15"
|
|
class="transition-opacity duration-300"
|
|
style="opacity: 1"
|
|
>
|
|
<span code-path="src\sections\HeroSection.tsx:134:17" style="color: var(--muted-alt)">></span
|
|
><span code-path="src\sections\HeroSection.tsx:137:17" style="color: var(--foreground)">
|
|
Initializing debugging session...</span
|
|
>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:129:15"
|
|
class="transition-opacity duration-300"
|
|
style="opacity: 1"
|
|
>
|
|
<span code-path="src\sections\HeroSection.tsx:134:17" style="color: var(--muted-alt)">></span
|
|
><span code-path="src\sections\HeroSection.tsx:137:17" style="color: var(--foreground)">
|
|
Duck is listening...</span
|
|
>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:129:15"
|
|
class="transition-opacity duration-300"
|
|
style="opacity: 1"
|
|
>
|
|
<span code-path="src\sections\HeroSection.tsx:134:17" style="color: var(--muted-alt)">></span
|
|
><span code-path="src\sections\HeroSection.tsx:137:17" style="color: var(--foreground)">
|
|
Explain your problem.</span
|
|
><span
|
|
code-path="src\sections\HeroSection.tsx:141:19"
|
|
class="animate-blink ml-1 inline-block h-4 w-2 align-middle"
|
|
style="background-color: var(--terminal-text)"
|
|
></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
code-path="src\sections\HeroSection.tsx:152:9"
|
|
class="mt-10 rounded-lg px-9 py-4 font-mono text-base font-semibold tracking-wide text-white opacity-0 transition-all duration-250 hover:scale-[1.03]"
|
|
style="
|
|
background-color: var(--primary);
|
|
box-shadow: var(--button-glow);
|
|
transform: translate(0px, 0px);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
opacity: 1;
|
|
"
|
|
>
|
|
START DEBUGGING
|
|
</button>
|
|
<div
|
|
code-path="src\sections\HeroSection.tsx:171:9"
|
|
class="mt-16 opacity-0"
|
|
style="color: var(--muted-alt); opacity: 0"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-chevron-down animate-bounce-scroll"
|
|
aria-hidden="true"
|
|
code-path="src\sections\HeroSection.tsx:172:11"
|
|
>
|
|
<path d="m6 9 6 6 6-6"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section
|
|
code-path="src\sections\MarqueeSection.tsx:40:5"
|
|
class="w-full border-y py-10"
|
|
aria-hidden="true"
|
|
style="
|
|
background-color: var(--surface-alt);
|
|
border-color: var(--border-color);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
class="rfm-marquee-container"
|
|
style="--pause-on-hover: paused; --pause-on-click: paused; --width: 100%; --transform: none"
|
|
>
|
|
<div
|
|
class="rfm-marquee"
|
|
style="
|
|
--play: running;
|
|
--direction: normal;
|
|
--duration: 70.35911458333334s;
|
|
--delay: 0s;
|
|
--iteration-count: infinite;
|
|
--min-width: 100%;
|
|
"
|
|
>
|
|
<div class="rfm-initial-child-container">
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Alex Chen"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-1.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Alex Chen</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Senior Developer @TechCorp</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Fixed a 3-day bug in 10 minutes"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Maria Santos"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-2.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Maria Santos</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Full Stack Engineer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"My duck never judges my spaghetti code"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="James Wilson"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-3.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>James Wilson</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Tech Lead @StartupX</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Essential part of our debugging workflow"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Yuki Tanaka"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-4.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Yuki Tanaka</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Indie Developer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Better than Stack Overflow sometimes"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Priya Sharma"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-5.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Priya Sharma</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Backend Engineer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"The MCP integration is a game changer"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Lucas Meyer"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-6.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Lucas Meyer</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>DevOps Specialist</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"I debug faster with my duck"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Sarah Kim"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-7.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Sarah Kim</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Frontend Developer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Finally, someone who listens"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="David Park"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-8.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>David Park</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Software Architect</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Surprisingly effective every time"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="rfm-marquee"
|
|
style="
|
|
--play: running;
|
|
--direction: normal;
|
|
--duration: 70.35911458333334s;
|
|
--delay: 0s;
|
|
--iteration-count: infinite;
|
|
--min-width: 100%;
|
|
"
|
|
>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Alex Chen"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-1.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Alex Chen</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Senior Developer @TechCorp</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Fixed a 3-day bug in 10 minutes"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Maria Santos"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-2.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Maria Santos</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Full Stack Engineer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"My duck never judges my spaghetti code"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="James Wilson"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-3.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>James Wilson</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Tech Lead @StartupX</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Essential part of our debugging workflow"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Yuki Tanaka"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-4.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Yuki Tanaka</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Indie Developer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Better than Stack Overflow sometimes"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Priya Sharma"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-5.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Priya Sharma</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Backend Engineer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"The MCP integration is a game changer"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Lucas Meyer"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-6.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Lucas Meyer</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>DevOps Specialist</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"I debug faster with my duck"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="Sarah Kim"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-7.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>Sarah Kim</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Frontend Developer</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Finally, someone who listens"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="rfm-child" style="--transform: none">
|
|
<div
|
|
code-path="src\sections\MarqueeSection.tsx:48:11"
|
|
class="mx-3 flex items-center gap-3 rounded-full border px-6 py-3"
|
|
style="background-color: var(--background); border-color: var(--border-color)"
|
|
>
|
|
<img
|
|
code-path="src\sections\MarqueeSection.tsx:56:13"
|
|
alt="David Park"
|
|
class="h-8 w-8 rounded-full border-2 object-cover"
|
|
loading="lazy"
|
|
src="./assets/avatar-8.jpg"
|
|
style="border-color: var(--border-color)"
|
|
/>
|
|
<div code-path="src\sections\MarqueeSection.tsx:63:13" class="flex flex-col">
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:64:15"
|
|
class="whitespace-nowrap font-mono text-[13px] font-semibold"
|
|
style="color: var(--foreground)"
|
|
>David Park</span
|
|
><span
|
|
code-path="src\sections\MarqueeSection.tsx:67:15"
|
|
class="whitespace-nowrap font-mono text-[11px] font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>Software Architect</span
|
|
>
|
|
</div>
|
|
<span
|
|
code-path="src\sections\MarqueeSection.tsx:71:13"
|
|
class="ml-2 whitespace-nowrap font-mono text-xs italic"
|
|
style="color: var(--muted-alt)"
|
|
>"Surprisingly effective every time"</span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section
|
|
code-path="src\sections\HowItWorksSection.tsx:69:5"
|
|
id="how-it-works"
|
|
class="w-full px-4 py-[120px] max-md:py-20"
|
|
style="background-color: var(--background)"
|
|
>
|
|
<div code-path="src\sections\HowItWorksSection.tsx:75:7" class="mx-auto max-w-[1200px]">
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:76:9"
|
|
style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1"
|
|
>
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:77:11"
|
|
class="mb-4 font-mono text-xs font-medium tracking-[0.05em]"
|
|
style="color: var(--primary)"
|
|
>
|
|
// HOW IT WORKS
|
|
</div>
|
|
<h2
|
|
code-path="src\sections\HowItWorksSection.tsx:83:11"
|
|
class="mb-16 font-mono text-[42px] font-normal leading-[1.15] tracking-[-0.5px] max-md:text-[28px]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Three steps to enlightenment
|
|
</h2>
|
|
</div>
|
|
<div code-path="src\sections\HowItWorksSection.tsx:91:9" class="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:95:15"
|
|
class="step-card rounded-xl border p-8 transition-shadow duration-300"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:104:17"
|
|
class="mb-4 font-serif text-[36px] font-light"
|
|
style="color: var(--muted-alt)"
|
|
>
|
|
01
|
|
</div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-message-square mb-5"
|
|
aria-hidden="true"
|
|
code-path="src\sections\HowItWorksSection.tsx:110:17"
|
|
style="color: var(--primary)"
|
|
>
|
|
<path
|
|
d="M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z"
|
|
></path>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\HowItWorksSection.tsx:111:17"
|
|
class="mb-3 font-mono text-[28px] font-medium leading-[1.25]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Describe your bug
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\HowItWorksSection.tsx:117:17"
|
|
class="font-mono text-[15px] leading-[1.7]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Paste your code, explain the error, describe what you expected. Our duck is a patient listener.
|
|
</p>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:95:15"
|
|
class="step-card rounded-xl border p-8 transition-shadow duration-300"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:104:17"
|
|
class="mb-4 font-serif text-[36px] font-light"
|
|
style="color: var(--muted-alt)"
|
|
>
|
|
02
|
|
</div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-terminal mb-5"
|
|
aria-hidden="true"
|
|
code-path="src\sections\HowItWorksSection.tsx:110:17"
|
|
style="color: var(--primary)"
|
|
>
|
|
<path d="M12 19h8"></path>
|
|
<path d="m4 17 6-6-6-6"></path>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\HowItWorksSection.tsx:111:17"
|
|
class="mb-3 font-mono text-[28px] font-medium leading-[1.25]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Explain line by line
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\HowItWorksSection.tsx:117:17"
|
|
class="font-mono text-[15px] leading-[1.7]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Walk through your logic step by step. The act of explaining often reveals the solution. Your duck
|
|
nods along.
|
|
</p>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:95:15"
|
|
class="step-card rounded-xl border p-8 transition-shadow duration-300"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\HowItWorksSection.tsx:104:17"
|
|
class="mb-4 font-serif text-[36px] font-light"
|
|
style="color: var(--muted-alt)"
|
|
>
|
|
03
|
|
</div>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="32"
|
|
height="32"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-zap mb-5"
|
|
aria-hidden="true"
|
|
code-path="src\sections\HowItWorksSection.tsx:110:17"
|
|
style="color: var(--secondary)"
|
|
>
|
|
<path
|
|
d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
|
|
></path>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\HowItWorksSection.tsx:111:17"
|
|
class="mb-3 font-mono text-[28px] font-medium leading-[1.25]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Find the solution
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\HowItWorksSection.tsx:117:17"
|
|
class="font-mono text-[15px] leading-[1.7]"
|
|
style="color: var(--muted)"
|
|
>
|
|
That moment of clarity hits. The bug was a missing semicolon, a wrong variable name, or a logical
|
|
oversight. You got this.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section
|
|
code-path="src\sections\FeaturesSection.tsx:71:5"
|
|
class="w-full px-4 py-[120px] max-md:py-20"
|
|
style="background-color: var(--surface-alt)"
|
|
>
|
|
<div code-path="src\sections\FeaturesSection.tsx:76:7" class="mx-auto max-w-[1200px]">
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:77:9"
|
|
style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1"
|
|
>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:78:11"
|
|
class="mb-4 font-mono text-xs font-medium tracking-[0.05em]"
|
|
style="color: var(--primary)"
|
|
>
|
|
// FEATURES
|
|
</div>
|
|
<h2
|
|
code-path="src\sections\FeaturesSection.tsx:84:11"
|
|
class="mb-16 font-mono text-[42px] font-normal leading-[1.15] tracking-[-0.5px] max-md:text-[28px]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Everything you need to debug
|
|
</h2>
|
|
</div>
|
|
<div code-path="src\sections\FeaturesSection.tsx:92:9" class="grid grid-cols-1 gap-8 md:grid-cols-2">
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:96:15"
|
|
class="feature-card overflow-hidden rounded-lg"
|
|
style="
|
|
background-color: var(--terminal);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:102:17"
|
|
class="flex h-8 items-center gap-2 px-3"
|
|
style="background-color: rgb(24, 24, 27)"
|
|
>
|
|
<span
|
|
code-path="src\sections\FeaturesSection.tsx:106:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(239, 68, 68)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:107:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(234, 179, 8)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:108:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(34, 197, 94)"
|
|
></span>
|
|
</div>
|
|
<div code-path="src\sections\FeaturesSection.tsx:112:17" class="px-6 py-6">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-braces mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\FeaturesSection.tsx:113:19"
|
|
style="color: var(--terminal-text)"
|
|
>
|
|
<path d="M8 3H7a2 2 0 0 0-2 2v5a2 2 0 0 1-2 2 2 2 0 0 1 2 2v5c0 1.1.9 2 2 2h1"></path>
|
|
<path d="M16 21h1a2 2 0 0 0 2-2v-5c0-1.1.9-2 2-2a2 2 0 0 1-2-2V5a2 2 0 0 0-2-2h-1"></path>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\FeaturesSection.tsx:114:19"
|
|
class="mb-2 font-mono text-lg font-semibold leading-[1.35]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Syntax Highlighting
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\FeaturesSection.tsx:120:19"
|
|
class="font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Your code is beautifully highlighted as you paste it. 40+ languages supported. Your duck
|
|
appreciates clean formatting.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:96:15"
|
|
class="feature-card overflow-hidden rounded-lg"
|
|
style="
|
|
background-color: var(--terminal);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:102:17"
|
|
class="flex h-8 items-center gap-2 px-3"
|
|
style="background-color: rgb(24, 24, 27)"
|
|
>
|
|
<span
|
|
code-path="src\sections\FeaturesSection.tsx:106:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(239, 68, 68)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:107:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(234, 179, 8)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:108:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(34, 197, 94)"
|
|
></span>
|
|
</div>
|
|
<div code-path="src\sections\FeaturesSection.tsx:112:17" class="px-6 py-6">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-clock mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\FeaturesSection.tsx:113:19"
|
|
style="color: var(--terminal-text)"
|
|
>
|
|
<path d="M12 6v6l4 2"></path>
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\FeaturesSection.tsx:114:19"
|
|
class="mb-2 font-mono text-lg font-semibold leading-[1.35]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Session History
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\FeaturesSection.tsx:120:19"
|
|
class="font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Every debugging session is saved. Revisit past bugs, see your thought process, build a personal
|
|
knowledge base.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:96:15"
|
|
class="feature-card overflow-hidden rounded-lg"
|
|
style="
|
|
background-color: var(--terminal);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:102:17"
|
|
class="flex h-8 items-center gap-2 px-3"
|
|
style="background-color: rgb(24, 24, 27)"
|
|
>
|
|
<span
|
|
code-path="src\sections\FeaturesSection.tsx:106:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(239, 68, 68)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:107:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(234, 179, 8)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:108:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(34, 197, 94)"
|
|
></span>
|
|
</div>
|
|
<div code-path="src\sections\FeaturesSection.tsx:112:17" class="px-6 py-6">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-users mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\FeaturesSection.tsx:113:19"
|
|
style="color: var(--terminal-text)"
|
|
>
|
|
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
|
|
<path d="M16 3.128a4 4 0 0 1 0 7.744"></path>
|
|
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
|
|
<circle cx="9" cy="7" r="4"></circle>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\FeaturesSection.tsx:114:19"
|
|
class="mb-2 font-mono text-lg font-semibold leading-[1.35]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Multi-Duck Support
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\FeaturesSection.tsx:120:19"
|
|
class="font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Switch between different duck personas. The strict professor. The calm zen master. The chaotic
|
|
energy duck.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:96:15"
|
|
class="feature-card overflow-hidden rounded-lg"
|
|
style="
|
|
background-color: var(--terminal);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\FeaturesSection.tsx:102:17"
|
|
class="flex h-8 items-center gap-2 px-3"
|
|
style="background-color: rgb(24, 24, 27)"
|
|
>
|
|
<span
|
|
code-path="src\sections\FeaturesSection.tsx:106:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(239, 68, 68)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:107:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(234, 179, 8)"
|
|
></span
|
|
><span
|
|
code-path="src\sections\FeaturesSection.tsx:108:19"
|
|
class="h-2.5 w-2.5 rounded-full"
|
|
style="background-color: rgb(34, 197, 94)"
|
|
></span>
|
|
</div>
|
|
<div code-path="src\sections\FeaturesSection.tsx:112:17" class="px-6 py-6">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="28"
|
|
height="28"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-code-xml mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\FeaturesSection.tsx:113:19"
|
|
style="color: var(--terminal-text)"
|
|
>
|
|
<path d="m18 16 4-4-4-4"></path>
|
|
<path d="m6 8-4 4 4 4"></path>
|
|
<path d="m14.5 4-5 16"></path>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\FeaturesSection.tsx:114:19"
|
|
class="mb-2 font-mono text-lg font-semibold leading-[1.35]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
API Access
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\FeaturesSection.tsx:120:19"
|
|
class="font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Integrate debugging into your workflow. RESTful API with webhooks. Debug programmatically when
|
|
words fail.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section
|
|
code-path="src\sections\RoadmapSection.tsx:100:5"
|
|
id="roadmap"
|
|
class="w-full px-4 py-[120px] max-md:py-20"
|
|
style="background-color: var(--background)"
|
|
>
|
|
<div code-path="src\sections\RoadmapSection.tsx:106:7" class="mx-auto max-w-[1200px]">
|
|
<div
|
|
code-path="src\sections\RoadmapSection.tsx:107:9"
|
|
style="translate: none; rotate: none; scale: none; transform: translate(0px, 0px); opacity: 1"
|
|
>
|
|
<div
|
|
code-path="src\sections\RoadmapSection.tsx:108:11"
|
|
class="mb-4 font-mono text-xs font-medium tracking-[0.05em]"
|
|
style="color: var(--primary)"
|
|
>
|
|
// ROADMAP
|
|
</div>
|
|
<h2
|
|
code-path="src\sections\RoadmapSection.tsx:114:11"
|
|
class="mb-4 font-mono text-[42px] font-normal leading-[1.15] tracking-[-0.5px] max-md:text-[28px]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
What's coming next
|
|
</h2>
|
|
<p
|
|
code-path="src\sections\RoadmapSection.tsx:120:11"
|
|
class="mb-16 max-w-[600px] font-mono text-[15px] leading-[1.7]"
|
|
style="color: var(--muted)"
|
|
>
|
|
The MVP is live. Here's what we're building next to make your debugging experience even more powerful.
|
|
</p>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\RoadmapSection.tsx:128:9"
|
|
class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4"
|
|
>
|
|
<div
|
|
code-path="src\sections\RoadmapSection.tsx:132:15"
|
|
class="roadmap-card rounded-xl border p-8"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:51:5"
|
|
class="inline-block rounded-full px-3 py-1 font-mono text-[11px] font-medium tracking-wider"
|
|
style="background-color: rgba(79, 110, 247, 0.1); color: var(--primary)"
|
|
>IN PROGRESS</span
|
|
><svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="36"
|
|
height="36"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-server mt-5 mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\RoadmapSection.tsx:142:17"
|
|
style="color: var(--primary)"
|
|
>
|
|
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
|
|
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
|
|
<line x1="6" x2="6.01" y1="6" y2="6"></line>
|
|
<line x1="6" x2="6.01" y1="18" y2="18"></line>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\RoadmapSection.tsx:147:17"
|
|
class="mb-3 font-mono text-[28px] font-medium leading-[1.25]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
MCP Server
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\RoadmapSection.tsx:153:17"
|
|
class="mb-4 font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Model Context Protocol server for IDE integration. Connect your editor directly to your duck.
|
|
</p>
|
|
<ul code-path="src\sections\RoadmapSection.tsx:159:17" class="flex flex-col gap-2">
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>VS Code extension
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>JetBrains plugin
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Neovim integration
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\RoadmapSection.tsx:132:15"
|
|
class="roadmap-card rounded-xl border p-8"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:51:5"
|
|
class="inline-block rounded-full px-3 py-1 font-mono text-[11px] font-medium tracking-wider"
|
|
style="background-color: rgba(161, 161, 170, 0.1); color: var(--muted)"
|
|
>PLANNED</span
|
|
><svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="36"
|
|
height="36"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-palette mt-5 mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\RoadmapSection.tsx:142:17"
|
|
style="color: var(--secondary)"
|
|
>
|
|
<path
|
|
d="M12 22a1 1 0 0 1 0-20 10 9 0 0 1 10 9 5 5 0 0 1-5 5h-2.25a1.75 1.75 0 0 0-1.4 2.8l.3.4a1.75 1.75 0 0 1-1.4 2.8z"
|
|
></path>
|
|
<circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle>
|
|
<circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle>
|
|
<circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle>
|
|
<circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\RoadmapSection.tsx:147:17"
|
|
class="mb-3 font-mono text-[28px] font-medium leading-[1.25]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Duck Skins
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\RoadmapSection.tsx:153:17"
|
|
class="mb-4 font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Customize your debugging companion. From cyberpunk neon to retro CRT aesthetics.
|
|
</p>
|
|
<ul code-path="src\sections\RoadmapSection.tsx:159:17" class="flex flex-col gap-2">
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>20+ unique skins
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Community marketplace
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Seasonal collections
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\RoadmapSection.tsx:132:15"
|
|
class="roadmap-card rounded-xl border p-8"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:51:5"
|
|
class="inline-block rounded-full px-3 py-1 font-mono text-[11px] font-medium tracking-wider"
|
|
style="background-color: rgba(34, 197, 94, 0.1); color: var(--secondary)"
|
|
>COMING SOON</span
|
|
><svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="36"
|
|
height="36"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-trophy mt-5 mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\RoadmapSection.tsx:142:17"
|
|
style="color: var(--secondary)"
|
|
>
|
|
<path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978"></path>
|
|
<path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978"></path>
|
|
<path d="M18 9h1.5a1 1 0 0 0 0-5H18"></path>
|
|
<path d="M4 22h16"></path>
|
|
<path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z"></path>
|
|
<path d="M6 9H4.5a1 1 0 0 1 0-5H6"></path>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\RoadmapSection.tsx:147:17"
|
|
class="mb-3 font-mono text-[28px] font-medium leading-[1.25]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Battlepass
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\RoadmapSection.tsx:153:17"
|
|
class="mb-4 font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Gamify your debugging journey. Earn XP for every bug squashed. Unlock exclusive rewards.
|
|
</p>
|
|
<ul code-path="src\sections\RoadmapSection.tsx:159:17" class="flex flex-col gap-2">
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Weekly challenges
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Exclusive duck skins
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Leaderboard rankings
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\RoadmapSection.tsx:132:15"
|
|
class="roadmap-card rounded-xl border p-8"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
box-shadow: var(--card-shadow);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:51:5"
|
|
class="inline-block rounded-full px-3 py-1 font-mono text-[11px] font-medium tracking-wider"
|
|
style="background-color: rgba(34, 197, 94, 0.1); color: var(--secondary)"
|
|
>COMING SOON</span
|
|
><svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="36"
|
|
height="36"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-package mt-5 mb-4"
|
|
aria-hidden="true"
|
|
code-path="src\sections\RoadmapSection.tsx:142:17"
|
|
style="color: var(--secondary)"
|
|
>
|
|
<path
|
|
d="M11 21.73a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73z"
|
|
></path>
|
|
<path d="M12 22V12"></path>
|
|
<polyline points="3.29 7 12 12 20.71 7"></polyline>
|
|
<path d="m7.5 4.27 9 5.15"></path>
|
|
</svg>
|
|
<h3
|
|
code-path="src\sections\RoadmapSection.tsx:147:17"
|
|
class="mb-3 font-mono text-[28px] font-medium leading-[1.25]"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Lootboxes
|
|
</h3>
|
|
<p
|
|
code-path="src\sections\RoadmapSection.tsx:153:17"
|
|
class="mb-4 font-mono text-[13px] leading-[1.65]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Mystery debugging power-ups. Random boosts, rare skins, and surprise features.
|
|
</p>
|
|
<ul code-path="src\sections\RoadmapSection.tsx:159:17" class="flex flex-col gap-2">
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Common to Legendary tiers
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Guaranteed no duplicates
|
|
</li>
|
|
<li
|
|
code-path="src\sections\RoadmapSection.tsx:161:21"
|
|
class="flex items-start gap-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
<span
|
|
code-path="src\sections\RoadmapSection.tsx:162:23"
|
|
class="mt-1.5 h-1.5 w-1.5 min-w-[6px] rounded-full"
|
|
style="background-color: var(--secondary)"
|
|
></span
|
|
>Trade with fellow debuggers
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section
|
|
code-path="src\sections\CalloutSection.tsx:79:5"
|
|
class="w-full px-4 py-20"
|
|
style="background-color: var(--terminal)"
|
|
>
|
|
<div code-path="src\sections\CalloutSection.tsx:84:7" class="mx-auto max-w-[1200px] text-center">
|
|
<h2
|
|
code-path="src\sections\CalloutSection.tsx:85:9"
|
|
class="mb-6 font-mono text-[42px] font-normal leading-[1.15] tracking-[-0.5px] max-md:text-[28px]"
|
|
style="color: var(--terminal-text)"
|
|
>
|
|
$ rdaas status
|
|
</h2>
|
|
<div code-path="src\sections\CalloutSection.tsx:91:9" class="mb-10 flex flex-col gap-3">
|
|
<div
|
|
code-path="src\sections\CalloutSection.tsx:93:13"
|
|
class="font-mono text-sm leading-relaxed transition-opacity duration-500"
|
|
style="opacity: 1; color: var(--foreground)"
|
|
>
|
|
<span code-path="src\sections\CalloutSection.tsx:101:15" style="color: var(--muted-alt)"
|
|
>> Service status: </span
|
|
><span code-path="src\sections\CalloutSection.tsx:102:15" style="color: var(--secondary)"
|
|
>ONLINE</span
|
|
>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\CalloutSection.tsx:93:13"
|
|
class="font-mono text-sm leading-relaxed transition-opacity duration-500"
|
|
style="opacity: 1; color: var(--foreground)"
|
|
>
|
|
<span code-path="src\sections\CalloutSection.tsx:101:15" style="color: var(--muted-alt)"
|
|
>> Active debuggers: </span
|
|
><span code-path="src\sections\CalloutSection.tsx:102:15" style="color: var(--primary)"
|
|
>12 847</span
|
|
>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\CalloutSection.tsx:93:13"
|
|
class="font-mono text-sm leading-relaxed transition-opacity duration-500"
|
|
style="opacity: 1; color: var(--foreground)"
|
|
>
|
|
<span code-path="src\sections\CalloutSection.tsx:101:15" style="color: var(--muted-alt)"
|
|
>> Bugs solved today: </span
|
|
><span code-path="src\sections\CalloutSection.tsx:102:15" style="color: var(--secondary)"
|
|
>3 291</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<button
|
|
code-path="src\sections\CalloutSection.tsx:111:9"
|
|
class="rounded-lg px-10 py-4 font-mono text-base font-semibold tracking-wide opacity-0 transition-all duration-250 hover:scale-[1.03]"
|
|
style="
|
|
color: var(--terminal-text);
|
|
border: 2px solid var(--terminal-text);
|
|
background-color: transparent;
|
|
transform: translate(0px, 0px);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
opacity: 1;
|
|
"
|
|
>
|
|
join the flock
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer
|
|
code-path="src\sections\Footer.tsx:44:5"
|
|
class="w-full border-t px-4 pt-16 pb-10"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-color: var(--border-color);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0px);
|
|
opacity: 1;
|
|
"
|
|
>
|
|
<div code-path="src\sections\Footer.tsx:49:7" class="mx-auto max-w-[1200px]">
|
|
<div
|
|
code-path="src\sections\Footer.tsx:50:9"
|
|
class="mb-12 flex flex-col justify-between gap-12 md:flex-row"
|
|
>
|
|
<div code-path="src\sections\Footer.tsx:52:11">
|
|
<div
|
|
code-path="src\sections\Footer.tsx:53:13"
|
|
class="flex items-center gap-2 font-mono text-lg font-semibold"
|
|
style="color: var(--foreground)"
|
|
>
|
|
<span code-path="src\sections\Footer.tsx:54:15" style="color: var(--secondary)">🦆</span
|
|
><span code-path="src\sections\Footer.tsx:55:15">RDaaS</span>
|
|
</div>
|
|
<p
|
|
code-path="src\sections\Footer.tsx:57:13"
|
|
class="mt-2 font-mono text-[13px]"
|
|
style="color: var(--muted)"
|
|
>
|
|
Rubber Duck Debugging as a Service
|
|
</p>
|
|
<p
|
|
code-path="src\sections\Footer.tsx:60:13"
|
|
class="mt-1 font-mono text-xs font-medium tracking-wider"
|
|
style="color: var(--muted-alt)"
|
|
>
|
|
Built for developers, by developers.
|
|
</p>
|
|
</div>
|
|
<div code-path="src\sections\Footer.tsx:66:11" class="flex flex-wrap gap-16 max-md:gap-10">
|
|
<div code-path="src\sections\Footer.tsx:68:15">
|
|
<h4
|
|
code-path="src\sections\Footer.tsx:69:17"
|
|
class="mb-4 font-mono text-xs font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>
|
|
Product
|
|
</h4>
|
|
<ul code-path="src\sections\Footer.tsx:75:17" class="flex flex-col gap-3">
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>How It Works</a
|
|
>
|
|
</li>
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>Roadmap</a
|
|
>
|
|
</li>
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>Pricing</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div code-path="src\sections\Footer.tsx:68:15">
|
|
<h4
|
|
code-path="src\sections\Footer.tsx:69:17"
|
|
class="mb-4 font-mono text-xs font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>
|
|
Resources
|
|
</h4>
|
|
<ul code-path="src\sections\Footer.tsx:75:17" class="flex flex-col gap-3">
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>Documentation</a
|
|
>
|
|
</li>
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>API Reference</a
|
|
>
|
|
</li>
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>Changelog</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div code-path="src\sections\Footer.tsx:68:15">
|
|
<h4
|
|
code-path="src\sections\Footer.tsx:69:17"
|
|
class="mb-4 font-mono text-xs font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>
|
|
Community
|
|
</h4>
|
|
<ul code-path="src\sections\Footer.tsx:75:17" class="flex flex-col gap-3">
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>Discord</a
|
|
>
|
|
</li>
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>GitHub</a
|
|
>
|
|
</li>
|
|
<li code-path="src\sections\Footer.tsx:77:21">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:78:23"
|
|
href="#"
|
|
class="font-mono text-[13px] transition-colors duration-150 hover:text-[var(--primary)]"
|
|
style="color: var(--foreground)"
|
|
>Twitter</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
code-path="src\sections\Footer.tsx:94:9"
|
|
class="flex flex-col items-center justify-between gap-4 border-t pt-6 md:flex-row"
|
|
style="border-color: var(--border-subtle)"
|
|
>
|
|
<p
|
|
code-path="src\sections\Footer.tsx:98:11"
|
|
class="font-mono text-xs font-medium tracking-wider"
|
|
style="color: var(--muted-alt)"
|
|
>
|
|
© 2026 RDaaS. All rights reserved.
|
|
</p>
|
|
<div code-path="src\sections\Footer.tsx:101:11" class="flex items-center gap-4">
|
|
<a
|
|
code-path="src\sections\Footer.tsx:102:13"
|
|
href="#"
|
|
class="transition-colors duration-150 hover:text-[var(--foreground)]"
|
|
aria-label="GitHub"
|
|
style="color: var(--muted)"
|
|
><svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-github"
|
|
aria-hidden="true"
|
|
code-path="src\sections\Footer.tsx:108:15"
|
|
>
|
|
<path
|
|
d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"
|
|
></path>
|
|
<path d="M9 18c-4.51 2-5-2-7-2"></path></svg></a
|
|
><a
|
|
code-path="src\sections\Footer.tsx:110:13"
|
|
href="#"
|
|
class="transition-colors duration-150 hover:text-[var(--foreground)]"
|
|
aria-label="Twitter"
|
|
style="color: var(--muted)"
|
|
><svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-twitter"
|
|
aria-hidden="true"
|
|
code-path="src\sections\Footer.tsx:116:15"
|
|
>
|
|
<path
|
|
d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"
|
|
></path></svg></a
|
|
><a
|
|
code-path="src\sections\Footer.tsx:118:13"
|
|
href="#"
|
|
class="transition-colors duration-150 hover:text-[var(--foreground)]"
|
|
aria-label="Discord"
|
|
style="color: var(--muted)"
|
|
><svg
|
|
code-path="src\sections\Footer.tsx:17:5"
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
code-path="src\sections\Footer.tsx:18:7"
|
|
d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"
|
|
></path></svg
|
|
></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<div
|
|
code-path="src\sections\StickyCTABar.tsx:82:5"
|
|
class="fixed right-0 bottom-0 left-0 z-40 hidden h-16 translate-y-full md:flex"
|
|
style="
|
|
background-color: var(--surface);
|
|
border-top: 1px solid var(--border-color);
|
|
backdrop-filter: blur(16px);
|
|
translate: none;
|
|
rotate: none;
|
|
scale: none;
|
|
transform: translate(0px, 0%);
|
|
"
|
|
>
|
|
<div
|
|
code-path="src\sections\StickyCTABar.tsx:92:7"
|
|
class="mx-auto flex w-full max-w-[1200px] items-center justify-between px-6"
|
|
>
|
|
<div code-path="src\sections\StickyCTABar.tsx:93:9">
|
|
<p
|
|
code-path="src\sections\StickyCTABar.tsx:94:11"
|
|
class="font-mono text-sm font-semibold"
|
|
style="color: var(--foreground)"
|
|
>
|
|
Ready to debug?
|
|
</p>
|
|
<p
|
|
code-path="src\sections\StickyCTABar.tsx:97:11"
|
|
class="font-mono text-xs font-medium tracking-wider"
|
|
style="color: var(--muted)"
|
|
>
|
|
Your duck is waiting.
|
|
</p>
|
|
</div>
|
|
<button
|
|
code-path="src\sections\StickyCTABar.tsx:102:9"
|
|
class="rounded-full px-7 py-3 font-mono text-sm font-semibold tracking-wide text-white transition-all duration-200 hover:scale-[1.03]"
|
|
style="background-color: var(--primary); box-shadow: var(--button-glow)"
|
|
>
|
|
START NOW
|
|
</button>
|
|
</div>
|
|
<button
|
|
code-path="src\sections\StickyCTABar.tsx:120:7"
|
|
class="absolute top-1/2 right-4 -translate-y-1/2 transition-colors duration-150 hover:text-[var(--foreground)]"
|
|
aria-label="Dismiss"
|
|
style="color: var(--muted)"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
width="16"
|
|
height="16"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
class="lucide lucide-x"
|
|
aria-hidden="true"
|
|
code-path="src\sections\StickyCTABar.tsx:126:9"
|
|
>
|
|
<path d="M18 6 6 18"></path>
|
|
<path d="m6 6 12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
|
|
<amino-inspect></amino-inspect>
|
|
</body>
|
|
</html>
|