Initial commit

app/globals.css

@@ -1,26 +1,35 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
+  --background: #09090b;
-  --foreground: #171717;
+  --foreground: #ffffff;
+  --muted: #a1a1aa;
+  --border: #27272a;
+  --surface: #18181b;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
+  --color-muted: var(--muted);
+  --color-border: var(--border);
+  --color-surface: var(--surface);
   --font-sans: var(--font-geist-sans);
   --font-mono: var(--font-geist-mono);
 }
 
-@media (prefers-color-scheme: dark) {
+@keyframes shimmer {
-  :root {
+  0%,
-    --background: #0a0a0a;
+  100% {
-    --foreground: #ededed;
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
   }
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-geist-sans), system-ui, sans-serif;
 }

app/layout.tsx

@@ -13,8 +13,9 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  title: "LibreBoard — Coming Soon",
-  description: "Generated by create next app",
+  description:
+    "LibreBoard is an open-source project management tool. Stay tuned for the launch.",
 };
 
 export default function RootLayout({

app/page.tsx

@@ -1,65 +1,255 @@
+"use client";
+
 import Image from "next/image";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <main className="relative flex min-h-screen flex-col items-center overflow-hidden px-4 py-12 sm:px-6 sm:py-16 md:justify-center md:py-20">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
+      {/* Grid background */}
-        <Image
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#27272a40_1px,transparent_1px),linear-gradient(to_bottom,#27272a40_1px,transparent_1px)] bg-size-[3rem_3rem] sm:bg-size-[4rem_4rem]" />
-          className="dark:invert"
+      <div className="absolute inset-0 bg-linear-to-b from-zinc-950 via-transparent to-zinc-950" />
-          src="/next.svg"
+
-          alt="Next.js logo"
+      <div className="relative mx-auto w-full max-w-3xl text-center pt-6">
-          width={100}
+        {/* Logo */}
-          height={20}
+        <div className="mb-10 flex items-center justify-center gap-3 sm:mb-14">
-          priority
+          <Image
-        />
+            src="/libreboard.svg"
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
+            alt="Libreboard logo"
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+            width={36}
-            To get started, edit the page.tsx file.
+            height={36}
-          </h1>
+            className="h-8 w-8 sm:h-9 sm:w-9"
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+          />
-            Looking for a starting point or more instructions? Head over to{" "}
+          <span className="text-lg font-semibold tracking-tight text-white sm:text-xl">
-            <a
+            Libreboard
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          </span>
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+        </div>
+
+        {/* Badge */}
+        <div className="group mb-6 inline-flex items-center gap-2 rounded-full border border-zinc-700 bg-zinc-900/80 px-3 py-1 text-xs font-medium text-zinc-300 backdrop-blur-sm transition-all duration-300 hover:border-emerald-600 hover:shadow-md sm:mb-8 sm:px-4 sm:py-1.5 sm:text-sm">
+          <span className="relative flex h-2 w-2">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75" />
+            <span className="relative inline-flex h-2 w-2 rounded-full bg-emerald-500" />
+          </span>
+          <span className="bg-linear-to-r from-zinc-300 via-emerald-400 to-zinc-300 bg-clip-text bg-[size:200%_100%] animate-[shimmer_3s_ease-in-out_infinite] group-hover:text-transparent">
+            Open source &amp; free
+          </span>
+        </div>
+
+        {/* Headline */}
+        <h1 className="text-3xl font-bold leading-tight tracking-tight text-white sm:text-4xl md:text-5xl lg:text-6xl">
+          Project management,{" "}
+          <span className="bg-linear-to-r from-emerald-400 to-cyan-400 bg-clip-text text-transparent">
+            simple and powerful
+          </span>
+        </h1>
+
+        <p className="mx-auto mt-4 max-w-md text-sm leading-6 text-zinc-400 sm:mt-6 sm:max-w-lg sm:text-base sm:leading-7 md:text-lg">
+          Libreboard is the open source alternative for teams who want a fast,
+          intuitive, and free project management tool. No limits, no hidden
+          fees.
+        </p>
+
+        {/* Coming soon notice */}
+        <div className="mt-8 inline-flex items-center gap-2 rounded-xl border border-zinc-800 bg-zinc-900/60 px-4 py-3 backdrop-blur-sm sm:mt-10 sm:gap-3 sm:px-6 sm:py-4">
+          <div className="hidden h-px w-8 bg-linear-to-r from-transparent to-emerald-500 sm:block" />
+          <span className="text-xs font-medium tracking-wide text-zinc-300 sm:text-sm">
+            Coming soon — Stay tuned for the launch
+          </span>
+          <div className="hidden h-px w-8 bg-linear-to-l from-transparent to-emerald-500 sm:block" />
+        </div>
+
+        {/* CTA buttons */}
+        <div className="mt-6 flex flex-col items-center justify-center gap-3 sm:mt-8 sm:flex-row">
+          <a
+            href="https://github.com/jessy-david-dev/libreboard.app"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-5 py-2.5 text-sm font-medium text-zinc-200 transition hover:border-zinc-500 hover:bg-zinc-800 sm:w-auto"
+          >
+            <svg
+              className="h-5 w-5"
+              fill="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
             >
-              Templates
+              <path
-            </a>{" "}
+                fillRule="evenodd"
-            or the{" "}
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
-            <a
+                clipRule="evenodd"
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+              />
-              className="font-medium text-zinc-950 dark:text-zinc-50"
+            </svg>
-            >
+            View on GitHub
-              Learning
+          </a>
-            </a>{" "}
+        </div>
-            center.
+
+        {/* Kanban Mockup */}
+        <div className="mt-12 sm:mt-16 md:mt-20">
+          <div className="relative mx-auto max-w-5xl">
+            <div className="absolute -inset-4 rounded-2xl bg-linear-to-r from-emerald-900/30 via-cyan-900/30 to-emerald-900/30 opacity-50 blur-2xl" />
+            <div className="relative overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900 shadow-2xl">
+              {/* Window controls */}
+              <div className="flex items-center gap-1.5 border-b border-zinc-800 px-3 py-2 sm:gap-2 sm:px-4 sm:py-3">
+                <div className="h-2.5 w-2.5 rounded-full bg-red-500 sm:h-3 sm:w-3" />
+                <div className="h-2.5 w-2.5 rounded-full bg-yellow-500 sm:h-3 sm:w-3" />
+                <div className="h-2.5 w-2.5 rounded-full bg-green-500 sm:h-3 sm:w-3" />
+                <span className="ml-2 text-xs text-zinc-500 sm:ml-4 sm:text-sm">
+                  Libreboard &middot; My Project
+                </span>
+              </div>
+
+              {/* Kanban columns — stack on mobile, 2 cols on sm, 3 cols on md+ */}
+              <div className="grid grid-cols-1 gap-3 p-3 sm:grid-cols-2 sm:gap-4 sm:p-4 md:grid-cols-3">
+                {/* To Do */}
+                <div className="space-y-2 sm:space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="h-2 w-2 rounded-full bg-zinc-400 sm:h-2.5 sm:w-2.5" />
+                      <span className="text-xs font-medium text-zinc-300 sm:text-sm">
+                        To Do
+                      </span>
+                    </div>
+                    <span className="rounded bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-400 sm:px-2 sm:text-xs">
+                      3
+                    </span>
+                  </div>
+                  <MockCard
+                    id="LB-12"
+                    title="Setup CI/CD pipeline"
+                    priority="P2"
+                    priorityColor="text-amber-400 bg-amber-950"
+                    avatar="bg-violet-500"
+                  />
+                  <MockCard
+                    id="LB-15"
+                    title="Add dark mode support"
+                    priority="P3"
+                    priorityColor="text-blue-400 bg-blue-950"
+                    avatar="bg-emerald-500"
+                  />
+                  <div className="hidden sm:block">
+                    <MockCard
+                      id="LB-18"
+                      title="Write API documentation"
+                      priority="P3"
+                      priorityColor="text-blue-400 bg-blue-950"
+                    />
+                  </div>
+                </div>
+
+                {/* In Progress */}
+                <div className="space-y-2 sm:space-y-3">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="h-2 w-2 rounded-full bg-amber-500 sm:h-2.5 sm:w-2.5" />
+                      <span className="text-xs font-medium text-zinc-300 sm:text-sm">
+                        In Progress
+                      </span>
+                    </div>
+                    <span className="rounded bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-400 sm:px-2 sm:text-xs">
+                      2
+                    </span>
+                  </div>
+                  <MockCard
+                    id="LB-09"
+                    title="Implement user auth"
+                    priority="P1"
+                    priorityColor="text-red-400 bg-red-950"
+                    avatar="bg-cyan-500"
+                  />
+                  <MockCard
+                    id="LB-11"
+                    title="Design landing page"
+                    priority="P2"
+                    priorityColor="text-amber-400 bg-amber-950"
+                    avatar="bg-violet-500"
+                  />
+                </div>
+
+                {/* Done — hidden on mobile, visible from sm (spans full on sm, normal on md+) */}
+                <div className="hidden space-y-2 sm:block sm:col-span-2 sm:space-y-3 md:col-span-1">
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-2">
+                      <span className="h-2 w-2 rounded-full bg-emerald-500 sm:h-2.5 sm:w-2.5" />
+                      <span className="text-xs font-medium text-zinc-300 sm:text-sm">
+                        Done
+                      </span>
+                    </div>
+                    <span className="rounded bg-zinc-800 px-1.5 py-0.5 text-[10px] text-zinc-400 sm:px-2 sm:text-xs">
+                      2
+                    </span>
+                  </div>
+                  <div className="grid grid-cols-2 gap-3 sm:grid-cols-2 md:grid-cols-1">
+                    <MockCard
+                      id="LB-03"
+                      title="Project setup & config"
+                      done
+                      avatar="bg-emerald-500"
+                    />
+                    <MockCard
+                      id="LB-05"
+                      title="Database schema design"
+                      done
+                      avatar="bg-cyan-500"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Footer */}
+      <footer className="relative mt-12 pb-4 text-center text-[10px] text-zinc-500 sm:mt-16 sm:pb-6 sm:text-xs">
+        &copy; {new Date().getFullYear()} Libreboard. All rights reserved.
+        <span className="mx-1.5 sm:mx-2">&middot;</span>
+        Open source project under MIT license
+      </footer>
+    </main>
+  );
+}
+
+function MockCard({
+  id,
+  title,
+  priority,
+  priorityColor,
+  avatar,
+  done,
+}: {
+  id: string;
+  title: string;
+  priority?: string;
+  priorityColor?: string;
+  avatar?: string;
+  done?: boolean;
+}) {
+  return (
+    <div className="rounded-lg border border-zinc-700 bg-zinc-800/50 p-2.5 sm:p-3">
+      <div className="flex items-start justify-between gap-2">
+        <div className="min-w-0 flex-1">
+          <p className="text-[10px] text-zinc-400 sm:text-xs">{id}</p>
+          <p
+            className={`mt-0.5 text-xs font-medium sm:mt-1 sm:text-sm ${done ? "text-zinc-500 line-through" : "text-zinc-200"}`}
+          >
+            {title}
           </p>
         </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
+        {avatar && (
-          <a
+          <div
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
+            className={`h-5 w-5 shrink-0 rounded-full sm:h-6 sm:w-6 ${avatar}`}
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+          />
-            target="_blank"
+        )}
-            rel="noopener noreferrer"
+      </div>
+      {priority && priorityColor && (
+        <div className="mt-1.5 sm:mt-2">
+          <span
+            className={`inline-flex rounded px-1 py-0.5 text-[10px] font-medium sm:px-1.5 sm:text-xs ${priorityColor}`}
           >
-            <Image
+            {priority}
-              className="dark:invert"
+          </span>
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
         </div>
-      </main>
+      )}
     </div>
   );
 }

public/file.svg

@@ -1 +0,0 @@
-<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

public/globe.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

public/libreboard.svg

@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <!-- Dark rounded background -->
+  <rect x="0" y="0" width="32" height="32" rx="7" fill="#1e1e1e"/>
+  
+  <!-- Clipboard body -->
+  <rect x="8" y="8" width="16" height="19" rx="2" fill="none" stroke="white" stroke-width="1.8"/>
+  
+  <!-- Clipboard clip -->
+  <rect x="12" y="5.5" width="8" height="4" rx="1.5" fill="none" stroke="white" stroke-width="1.8"/>
+  
+  <!-- List lines -->
+  <rect x="11" y="14" width="10" height="1.5" rx="0.75" fill="white"/>
+  <rect x="11" y="17.5" width="7" height="1.5" rx="0.75" fill="white"/>
+  <rect x="11" y="21" width="8.5" height="1.5" rx="0.75" fill="white"/>
+</svg>

public/next.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

public/window.svg

@@ -1 +0,0 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>