pushing previous files

app/Dashboard/page.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from 'next/link';
+
+export default function Dashboard() {
+  const router = useRouter();
+  const [query, setQuery] = useState("");
+  const [sideBarOpen, setSidebarOpen] = useState(true);
+
+  const projects = [
+    { name: "Alpha Project", createdAt: "2025-01-01" },
+    { name: "Beta Board", createdAt: "2025-02-15" },
+    { name: "Gamma Tasl", createdAt: "2025-03-10" },
+  ];
+  const filtered = projects.filter((p) =>
+    p.name.toLowerCase().includes(query.toLowerCase())
+  );
+
+  return (
+    <div className="flex min-h-screen bg-zinc-50 dark:bg-black font-sans transition-all duration-300">
+      <aside
+        className={`${
+          sideBarOpen ? "w-64" : "w-16"
+        } bg-white dark:bg-zinc-900 border-r border-zinc-200 dark:border-zinc-800 transition-all duration-300 flex flex-col`}
+      >
+        <div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800">
+          {sideBarOpen && (
+            <span className="text-lg font-semibold text-zinc-800 dark:text-zinc-100">
+              More
+            </span>
+          )}
+          <button
+            onClick={() => setSidebarOpen(!sideBarOpen)}
+            className="text-zinc-600 dark:text-zinc-300 hover:text-blue-500 transition-colors"
+            title="Toggle Sidebar"
+          >
+            ☰
+          </button>
+        </div>
+
+        <nav
+          className={`flex flex-col p-4 gap-3 text-zinc-700 dark:text-zinc-300 transition-opacity duration-200 ${
+            sideBarOpen ? "opacity-100" : "opacity-0"
+          }`}
+        >
+          <Link
+            href="/"
+            className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+          >
+            Home
+          </Link>
+          <p
+            className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+          >
+            Settings
+          </p>
+          {/* 3. Added the Logout link here */}
+          <Link
+            href="/auth/logout"
+            className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+          >
+            Logout
+          </Link>
+        </nav>
+      </aside>
+
+      <div className="flex-1 flex flex-col min-w-0">
+        <header className="sticky top-0 z-10 bg-white dark:bg-black/80 backdrop-blur-sm border-b border-zinc-200 dark:border-zinc-800">
+          <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
+            <div className="flex-1">
+              <input
+                id="dashboard-search"
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search projects, boards or tasks..."
+                className="w-full max-w-md px-4 py-2 rounded-md border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 text-zinc-900 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={() => router.push("/dashbaord/create")}
+                className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm"
+              >
+                Create
+              </button>
+            </div>
+          </div>
+        </header>
+
+        <main className="max-w-7xl w-full mx-auto px-6 py-10">
+          <h1 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-4">
+            Project Names
+          </h1>
+
+          <section>
+            <ul className="space-y-3">
+              {filtered.map((project, index) => (
+                <li
+                  key={index}
+                  className="flex justify-between p-4 bg-white dark:bg-zinc-900 border border-zinc-100 dark:border-zinc-800 rounded-md text-zinc-800 dark:text-zinc-100"
+                >
+                  <span>{project.name}</span>
+                  <span className="text-zinc-500 dark:text-zinc-400 text-sm">
+                    Created: {project.createdAt}
+                  </span>
+                </li>
+              ))}
+              {filtered.length === 0 && (
+                <li className="text-zinc-500">No results found</li>
+              )}
+            </ul>
+          </section>
+        </main>
+      </div>
+    </div>
+  );
+}

app/globals.css

@@ -1,26 +1,45 @@
+/* 1. Import BOTH fonts in one go */
+@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Pixelify+Sans:wght@400;700&display=swap');
+
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --background: #FEEEDF;
+  --foreground: #DEE5D4;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
+
+  /* 3. Assign fonts to Tailwind's theme */
+  
+  /* --font-sans is for regular text (Concert One) */
+  --font-sans: var(--font-concert-one);
+  
+  /* We add a new font family for headers (Pixelify Sans) */
+  /* This also creates a 'font-header' utility class */
+  --font-header: var(--font-pixelify);
+
   --font-mono: var(--font-geist-mono);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+    --background: #e2dede;
+    --foreground: #000000;
   }
 }
 
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  
+  /* 4. Body uses --font-sans (Concert One) by default */
+  font-family: var(--font-sans);
 }
+
+/* 5. (Optional but helpful) Apply header font to h-tags by default */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-header);
+}

app/layout.tsx

@@ -1,14 +1,20 @@
+// app/layout.tsx
+
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+// 1. Import your two new fonts
+import { Concert_One, Pixelify_Sans } from "next/font/google";
 import "./globals.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+// 2. Set up Concert One as the body/sans font
+const concertOne = Concert_One({
+  variable: "--font-sans", // Use --font-sans for the default
   subsets: ["latin"],
+  weight: "400", // This font only has one weight
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+// 3. Set up Pixelify Sans as the header font
+const pixelifySans = Pixelify_Sans({
+  variable: "--font-header", // Use a custom --font-header variable
   subsets: ["latin"],
 });
 
@@ -24,11 +30,12 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      {/* 4. Apply the new variables to the body */}
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${concertOne.variable} ${pixelifySans.variable} antialiased`}
       >
         {children}
       </body>
     </html>
   );
-}
+}

app/page.tsx

@@ -1,65 +1,127 @@
-import Image from "next/image";
+"use client";
 
-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="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">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <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{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&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"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              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"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            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]"
-            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"
-          >
-            <Image
-              className="dark:invert"
-              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>
-  );
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import Image from 'next/image';
+import ProtectedNavButton from "../components/ProtectedNavButton";
+import Link from 'next/link';
+
+export default function Page() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+      <header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300">
+        <Image
+          className=""
+          src="/logo.svg"
+          alt="logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div  className="flex items-center gap-4">
+          <Link href = "/auth/login" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+            Sign in
+          </Link>
+          <Link href = "/auth/logout" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+            Log out
+          </Link>
+        </div>
+      </header>
+
+      <main className="flex min-h-screen w-full flex-col justify-between py-32 px-16 bg-white dark:bg-black">
+        <div className="flex flex-col sm:flex-row items-start justify-between gap-12 text-left w-full">
+          
+          <div className="flex-1 flex flex-col gap-5 justify-center">
+            <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+              (project name)
+            </h1>
+            <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{" "}
+              <Link
+                href="https://vercel.com/templates?framework=next.js&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"
+              >
+                Templates
+              </Link>{" "}
+              or the{" "}
+              <Link
+                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"
+              >
+                Learning
+              </Link>{" "}
+              center.
+            </p>
+
+            <ProtectedNavButton>Get Started</ProtectedNavButton>
+          </div>
+
+          <div className="flex-1 flex justify-center">
+            <div className="w-full max-w-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+              Image Placeholder
+            </div>
+          </div>
+        </div>
+
+        <section className="mt-32 w-full flex flex-col items-start gap-12">
+          <div>
+            <h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9">
+              Guide:
+            </h2>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
+            <div className="w-full max-w-xl">
+              <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                First Text Block
+              </h2>
+              <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                This is the content for the first text block. You can write anything here.
+              </p>
+            </div>
+            <div className="sm:w-1/2 flex justify-center items-center">
+              <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+                Image Placeholder
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
+            <div className="sm:w-1/2 flex justify-center items-center">
+              <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+                Image Placeholder
+              </div>
+            </div>
+
+            <div className="flex w-full justify-end">
+              <div className="w-full max-w-xl">
+                <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                  Second Text Block
+                </h2>
+                <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                  This is the content for the second text block. You can write anything here.
+                </p>
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
+            <div className="w-full max-w-xl">
+              <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                Third Text Block
+              </h2>
+              <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                This is the content for the third text block. You can write anything here.
+              </p>
+            </div>
+            <div className="sm:w-1/2 flex justify-center items-center">
+              <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+                  Image Placeholder
+              </div>
+            </div>
+          </div>
+        </section>
+      </main>
+    </div>
+  );
 }