feat: build welcome page and dashboard layout

app/dashboard/page.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { useState } from "react";
+
+export default function Dashboard() {
+  const [tasks, setTasks] = useState({
+    todo: [
+      {
+        title: "Finish lab",
+        description: "Complete physics lab report",
+        dueDate: "2026-08-10",
+        topic: "Physics",
+      },
+      {
+        title: "Study Next.js",
+        description: "Learn routing and layouts",
+        dueDate: "2026-08-08",
+        topic: "Coding",
+      },
+    ],
+    inProgress: [],
+    done: [],
+  });
+
+  const addTask = () => {
+    const title = prompt("Task title:");
+    if (!title) return;
+
+    const description = prompt("Description:") || "";
+    const dueDate = prompt("Due date (YYYY-MM-DD):") || "";
+    const topic = prompt("Topic:") || "";
+
+    const newTask = { title, description, dueDate, topic };
+
+    setTasks((prev) => ({
+      ...prev,
+      todo: [...prev.todo, newTask],
+    }));
+  };
+
+  return (
+    <main style={styles.container}>
+      <h1 style={styles.title}>Planner Danner</h1>
+
+      <div style={styles.board}>
+        <Column title="To Do" tasks={tasks.todo} onAdd={addTask} />
+        <Column title="In Progress" tasks={tasks.inProgress} />
+        <Column title="Done" tasks={tasks.done} />
+      </div>
+    </main>
+  );
+}
+
+function Column({
+  title,
+  tasks,
+  onAdd,
+}: {
+  title: string;
+  tasks: any[];
+  onAdd?: () => void;
+}) {
+  return (
+    <div style={styles.column}>
+      <div style={styles.columnHeader}>
+        <h2 style={styles.columnTitle}>{title}</h2>
+
+        <div style={styles.headerActions}>
+          {onAdd && (
+            <button onClick={onAdd} style={styles.iconButton}>
+              +
+            </button>
+          )}
+
+          {/* ✅ FIXED: sort now uses SAME button style */}
+          <button style={styles.iconButton}>↑↓</button>
+
+          <button style={styles.iconButton}>⋮</button>
+        </div>
+      </div>
+
+      {tasks.map((task, index) => (
+        <div key={index} style={styles.card}>
+          <div style={styles.cardHeader}>
+            <div style={styles.cardTitle}>{task.title}</div>
+
+            {/* same exact style */}
+            <button style={styles.iconButton}>⋮</button>
+          </div>
+
+          <div style={styles.cardDescription}>
+            {task.description.slice(0, 30)}
+            {task.description.length > 30 && "..."}
+          </div>
+
+          <div style={styles.cardDate}>📅 {task.dueDate}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+const styles = {
+  container: {
+    minHeight: "100vh",
+    background: "linear-gradient(to bottom, #38bdf8, #0ea5e9)",
+    padding: "30px",
+  },
+
+  title: {
+    textAlign: "center" as const,
+    fontSize: "90px",
+    fontWeight: "900",
+    color: "white",
+    letterSpacing: "2px",
+    textShadow: `
+      0 4px 0 #0284c7,
+      0 8px 20px rgba(0,0,0,0.2)
+    `,
+    marginBottom: "30px",
+  },
+
+  board: {
+    display: "flex",
+    gap: "20px",
+    justifyContent: "center",
+  },
+
+  column: {
+    background: "#f8fafc",
+    padding: "15px",
+    borderRadius: "12px",
+    flex: 1,
+    minHeight: "65vh",
+    maxHeight: "65vh",
+    overflowY: "auto",
+    boxShadow: "0 10px 25px rgba(0,0,0,0.1)",
+  },
+
+  columnHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "15px",
+  },
+
+  columnTitle: {
+    color: "#0f172a",
+    fontWeight: "700",
+    fontSize: "25px",
+    margin: 0,
+  },
+
+  /* ✅ SINGLE SOURCE OF TRUTH FOR ALL ICONS */
+  iconButton: {
+    background: "transparent",
+    border: "none",
+    color: "#0f172a",
+    fontSize: "22px",
+    fontWeight: "600",
+    cursor: "pointer",
+    padding: "0",
+  },
+
+  headerActions: {
+    display: "flex",
+    gap: "10px",
+    alignItems: "center",
+  },
+
+  card: {
+    background: "#dae4f0",
+    padding: "18px",
+    borderRadius: "12px",
+    marginBottom: "15px",
+    color: "#0f172a",
+    fontSize: "16px",
+  },
+
+  cardHeader: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginBottom: "6px",
+  },
+
+  cardTitle: {
+    fontWeight: "700",
+    marginBottom: "6px",
+  },
+
+  cardDescription: {
+    fontSize: "13px",
+    opacity: 0.7,
+    marginBottom: "8px",
+  },
+
+  cardDate: {
+    fontSize: "12px",
+    opacity: 0.6,
+  },
+};

app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({ children }: LayoutProps<"/">) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,64 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+
+export default function Home() {
+  const router = useRouter();
+
+  return (
+    <main style={styles.container}
+      style={styles.container}
+      onClick={() => router.push("/dashboard")}
+    >
+
+      <h1 style={styles.title}>Planner Danner</h1>
+
+      <p style={styles.slogan}>
+        your tasks, perfectly organized...
+      </p>
+
+      <p style={styles.hint}>
+        click anywhere to start planning
+      </p>
+    </main>
+  );
+}
+
+const styles = {
+  container: {
+    background: "linear-gradient(to bottom, #38bdf8, #0ea5e9)",
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column" as const,
+    justifyContent: "center",
+    alignItems: "center",
+    textAlign: "center" as const,
+    cursor: "pointer",
+  },
+
+  title: {
+    fontSize: "90px",
+    fontWeight: "900",
+    color: "white",
+    letterSpacing: "2px",
+    textShadow: `
+      0 4px 0 #0284c7,
+      0 8px 20px rgba(0,0,0,0.2)
+    `,
+    marginBottom: "20px",
+  },
+
+  slogan: {
+    fontSize: "28px", // ⬅️ bigger now
+    fontWeight: "600",
+    color: "#e0f2fe",
+    marginBottom: "25px",
+  },
+
+  hint: {
+    fontSize: "14px", // ⬅️ smaller than everything
+    color: "#bae6fd",
+    opacity: 0.8,
+    letterSpacing: "1px",
+  },
+};