diff --git a/app/Dashboard/page.tsx b/app/Dashboard/page.tsx new file mode 100644 index 0000000..a3a4eba --- /dev/null +++ b/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 ( +
+ + +
+
+
+
+ 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" + /> +
+ +
+ +
+
+
+ +
+

+ Project Names +

+ +
+
    + {filtered.map((project, index) => ( +
  • + {project.name} + + Created: {project.createdAt} + +
    • + ))} + {filtered.length === 0 && ( +
  • No results found
    • + )} +
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/app/favicon.ico b/app/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/app/favicon.ico and /dev/null differ diff --git a/app/globals.css b/app/globals.css index a2dc41e..89e0fba 100644 --- a/app/globals.css +++ b/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); +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..a396698 100644 --- a/app/layout.tsx +++ b/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 ( + {/* 4. Apply the new variables to the body */} {children} ); -} +} \ No newline at end of file diff --git a/app/page.tsx b/app/page.tsx index 295f8fd..f85cd0b 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,65 +1,127 @@ -import Image from "next/image"; +"use client"; -export default function Home() { - return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
-
-
- ); +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 ( +    
+      
+         +         +           +            Sign in +           +           +            Log out +           +        
+       + +      
+        
+           +          
+            

+              (project name) +            

+            

+              Looking for a starting point or more instructions? Head over to{" "} +               +                Templates +              {" "} +              or the{" "} +               +                Learning +              {" "} +              center. +            

+ +            Get Started +          
+ +          
+            
+              Image Placeholder +            
+          
+        
+ +        
+          
+            

+              Guide: +            

+          
+ +          
+            
+              

+                First Text Block +              

+              

+                This is the content for the first text block. You can write anything here. +              

+            
+            
+              
+                Image Placeholder +              
+            
+          
+           +          
+            
+              
+                Image Placeholder +              
+            
+ +            
+              
+                

+                  Second Text Block +                

+                

+                  This is the content for the second text block. You can write anything here. +                

+              
+            
+          
+ +          
+            
+              

+                Third Text Block +              

+              

+                This is the content for the third text block. You can write anything here. +              

+            
+            
+              
+                  Image Placeholder +              
+            
+          
+        
+      
+     +  ); } diff --git a/components/ProtectedNavButton.tsx b/components/ProtectedNavButton.tsx new file mode 100644 index 0000000..34fa0e7 --- /dev/null +++ b/components/ProtectedNavButton.tsx @@ -0,0 +1,33 @@ +"use client"; + +import React from "react"; +import { useRouter } from "next/navigation"; + +export default function ProtectedNavButton({ + children = "Go to Dashboard", + className = "mt-4 inline-block w-fit px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-md transition-colors", +}: { + children?: React.ReactNode; + className?: string; +}) { + const router = useRouter(); + + const handleClick = () => { + // Simple client-side auth check. + // Assumption: if localStorage has 'token' (or 'auth'), user is signed in. + // Adjust key to match your real auth storage (cookie, localStorage key, etc.). + const token = typeof window !== "undefined" ? localStorage.getItem("token") : null; + + if (token) { + router.push("/dashboard"); + } else { + router.push("/auth/login"); + } + }; + + return ( + + ); +} diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..5f08320 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/tailwind.config.cjs b/tailwind.config.cjs new file mode 100644 index 0000000..b17ba44 --- /dev/null +++ b/tailwind.config.cjs @@ -0,0 +1,12 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: [ + './app/**/*.{js,ts,jsx,tsx}', + './components/**/*.{js,ts,jsx,tsx}', + './pages/**/*.{js,ts,jsx,tsx}', + ], + theme: { + extend: {}, + }, + plugins: [], +};