redid styles of home page, and dashboard

app/Dashboard/page.tsx

@@ -38,8 +38,7 @@ export default function Dashboard() {
     // Helper function to handle navigation for the "Create" button
     const handleCreateClick = () => {
         // Use standard window navigation instead of Next.js router
-        // Also corrected typo from "dashbaord" to "dashboard"
+        window.location.href = "/formfile";
-        window.location.href = "/dashboard/create";
     };
 
     // 4. Function to toggle the sort order
@@ -54,21 +53,20 @@ export default function Dashboard() {
         >
             <aside
                 className={`${sideBarOpen ? "w-64" : "w-16"
-                    } border-r transition-all duration-300 flex flex-col`}
+                    }  transition-all duration-300 flex flex-col`}
-                style={{ backgroundColor: '#99A48A', borderColor: '#8A947E' }} // Sidebar background and border
+                style={{ backgroundColor: '#99A48A'}} // Sidebar background and border
             >
                 <div
                     className="flex items-center justify-between p-4 "
-                    style={{ borderColor: '#8A947E' }} // Sidebar border
                 >
                     {sideBarOpen && (
-                        <span className="text-lg font-semibold text-white">
+                        <span className="text-5xl font-semibold text-white">
                             More
                         </span>
                     )}
                     <button
                         onClick={() => setSidebarOpen(!sideBarOpen)}
-                        className="text-white hover:text-gray-200 transition-colors"
+                        className="text-white hover:text-gray-200 transition-colors text-3xl"
                         title="Toggle Sidebar"
                     >
                         ☰
@@ -76,7 +74,7 @@ export default function Dashboard() {
                 </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"
+                    className={`flex flex-col text-3xl p-4 gap-4 text-white transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
                         }`}
                 >
                     <a
@@ -86,7 +84,7 @@ export default function Dashboard() {
                         Home
                     </a>
                     <p
-                        className="hover:text-gray-200 transition-colors"
+                        className="hover:text-gray-200 transition-colors cursor-pointer"
                     >
                         Settings
                     </p>
@@ -101,8 +99,8 @@ export default function Dashboard() {
 
             <div className="flex-1 flex flex-col min-w-0">
                 <header
-                    className="sticky top-0 z-10 backdrop-blur-sm border-b"
+                    className="sticky top-0 z-10 backdrop-blur-sm "
-                    style={{ backgroundColor: 'rgba(153, 164, 138, 0.9)', borderColor: '#8A947E' }} // Top bar background (semi-transparent) and border
+                    style={{ backgroundColor: '#DEE5D4'}} // Top bar background (semi-transparent) and border
                 >
                     <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between gap-4">
                         <div className="flex-1">
@@ -111,7 +109,7 @@ export default function Dashboard() {
                                 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 text-black focus:outline-none focus:ring-2 focus:ring-blue-500"
+                                className="w-full max-w-md px-5 py-3 text-lg rounded-md border text-black focus:outline-none focus:ring-2 focus:ring-[#EA627F]"
                                 style={{ backgroundColor: '#F7F7F7', borderColor: '#D1D1D1' }} // Search bar "off-white"
                             />
                         </div>
@@ -120,7 +118,7 @@ export default function Dashboard() {
                             <button
                                 type="button"
                                 onClick={handleCreateClick} // Use the new handler
-                                className="text-white px-4 py-2 rounded-md shadow-sm hover:opacity-90"
+                                className="text-white px-6 py-3 text-xl rounded-md shadow-sm hover:opacity-90 hover:scale-[.98] transition-all duration-150"
                                 style={{ backgroundColor: '#EA627F' }} // Create button
                             >
                                 Create
@@ -130,18 +128,17 @@ export default function Dashboard() {
                 </header>
 
                 <main className="max-w-7xl w-full mx-auto px-6 py-10">
-                    <div className="flex justify-between items-center mb-4">
+                    <div className="flex justify-between items-center mb-6">
-                        <h1 className="text-2xl font-semibold text-black">
+                        <h1 className="text-4xl font-semibold text-black">
                             Project Names
                         </h1>
                         <button
                             type="button"
                             onClick={toggleSortOrder}
-                            className="px-3 py-1 text-sm font-medium border rounded-md"
+                            className="px-4 py-2 text-lg font-medium  rounded-md"
                             style={{
                                 color: '#333',
                                 backgroundColor: '#F7F7F7', // "off-white"
-                                borderColor: '#D1D1D1'
                             }}
                         >
                             Sort by: {sortOrder === 'newest' ? 'Newest' : 'Oldest'}
@@ -149,21 +146,21 @@ export default function Dashboard() {
                     </div>
 
                     <section>
-                        <ul className="space-y-3">
+                        <ul className="space-y-4">
                             {filtered.map((project, index) => (
                                 <li
                                     key={index}
-                                    className="flex justify-between p-4 border rounded-md"
+                                    className="flex justify-between items-center p-6 rounded-md transition-all duration-200 ease-in-out hover:scale-[1.02] hover:shadow-lg"
-                                    style={{ backgroundColor: '#B8C0AD', color: '#222', borderColor: '#A9B29E' }} // Project boxes
+                                    style={{ backgroundColor: '#B8C0AD', color: '#222'}} // Project boxes
                                 >
-                                    <span>{project.name}</span>
+                                    <span className="text-xl">{project.name}</span>
-                                    <span className="text-gray-700 text-sm">
+                                    <span className="text-gray-700 text-lg">
                                         Created: {project.createdAt}
                                     </span>
                                 </li>
                             ))}
                             {filtered.length === 0 && (
-                                <li className="text-gray-600">No results found</li>
+                                <li className="text-lg text-gray-600">No results found</li>
                             )}
                         </ul>
                     </section>

app/formfile/page.tsx

@@ -48,48 +48,12 @@ const AI_SETTINGS: ChatSetting = {
   sysTemInstructions: `You are an elite hackathon idea generator. Your task is to generate five different creative, feasible, and relevant project idea. 
 The output MUST be in Markdown format and strictly follow this structure:
 ### Project Idea Title
-<<<<<<< HEAD
-**Track** [print out the track you used]
-**Concept:** [A concise, single paragraph description of the product and its primary function.]`,
-  });
-
-  const parseAiResponse = (markdownString: string): CardData[] => {
-    console.log("Raw AI Response:", markdownString);
-    const ideas: CardData[] = [];
-    const ideaBlocks = markdownString.split("### ").filter(block => block.trim() !== "");
-
-    ideaBlocks.forEach((block, index) => {
-      // Match title: anything from the start of the block until the first newline or the start of "**Track**"
-      const titleMatch = block.match(/^(.*?)(?=\n\*\*Track\*\*|$)/s);
-      // Match track: "**Track**" followed by optional whitespace and then capture everything until the next "**Concept**" or end of block/line
-      const trackMatch = block.match(/\*\*Track\*\*\s*:\s*(.*?)(?=\n\*\*Concept\*\*|$)/s); // Added ':' and made whitespace more flexible
-      // Match concept: "**Concept:**" followed by optional whitespace and then capture everything until the end of the block
-      const conceptMatch = block.match(/\*\*Concept:\*\*\s*(.*)/s);
-
-      const title = titleMatch ? titleMatch[1].trim() : `Idea ${index + 1}`;
-      const summary = conceptMatch ? conceptMatch[1].trim() : "No concept provided.";
-      const tracksRaw = trackMatch ? trackMatch[1].trim() : "";
-      console.log("tracksRaw:", tracksRaw); // Added console.log for debugging
-      const tracks = tracksRaw.split(',').map(track => track.trim()).filter(track => track !== '');
-
-      ideas.push({
-        id: index + 1,
-        title,
-        tracks,
-        summary,
-      });
-    });
-    console.log("Parsed Cards:", ideas);
-    return ideas;
-  };
-=======
 **Relevance to Theme:** [Explain briefly]
 **Core Technology:** [List 3-5 primary technologies]
 **Team Fit:** [How the team's skills apply]
 **Concept:** [A concise, single paragraph description of the product and its primary function.]
 **Bonus Feature:** [A single, ambitious feature to impress judges.]`,
 };
->>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
 
 // ------------------------------------------------
 
@@ -136,22 +100,6 @@ export default function Home() {
     // 3. API Call
     try {
       setIdeaResponse("Generating ideas... Please wait.");
-<<<<<<< HEAD
-      setGeneratedCards([]); // Clear previous cards
-      const response = await fetch("/api/generate-idea", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          prompt: prompt,
-          settings: settings,
-        }),
-      });
-
-      const data = await response.json();
-
-=======
 
       const response = await fetch("/api/generate-idea", {
         method: "POST",
@@ -163,40 +111,10 @@ export default function Home() {
       });
 
       const data = await response.json();
->>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
       if (data.error || !response.ok) {
         console.error("AI Error:", data.error);
         setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
         return;
-<<<<<<< HEAD
-      }
-
-      setIdeaResponse(data.response);
-      const parsedCards = parseAiResponse(data.response);
-      setGeneratedCards(parsedCards);
-
-    } catch (error) {
-      console.error("Request Failed:", error);
-      let errorMessage = "An unknown error occurred.";
-      if (error instanceof Error) {
-        errorMessage = error.message;
-      } else if (typeof error === 'string') {
-        errorMessage = error;
-      }
-      setIdeaResponse(`A network error occurred. Please try again. Details: ${errorMessage}`);
-    }
-  }, [setIdeaResponse, setGeneratedCards, settings, parseAiResponse]);
-
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const storedFormData = localStorage.getItem('formData');
-      if (storedFormData) {
-        const parsedData: FormData = JSON.parse(storedFormData);
-        setTimeout(() => setShowForm(false), 0);
-        generateIdeas(parsedData);
-        localStorage.removeItem('formData');
-=======
->>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
       }
       setIdeaResponse(data.response);
 
@@ -229,25 +147,6 @@ export default function Home() {
           <FormPage onFormSubmit={handleFormSubmitFromFormPage} />
         ) : (
           <>
-<<<<<<< HEAD
-            {generatedCards.length > 0 ? (
-              <SwipeCards initialCards={generatedCards} />
-            ) : (
-              <>
-                <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
-                  Generated Project Idea 💡
-                </h1>
-                <div className="mt-8 p-4 bg-yellow-50 rounded-lg border border-yellow-200">
-                  <h2 className="text-xl font-bold text-gray-700 mb-2">Generated Ideas:</h2>
-                  <div
-                    className="prose max-w-none"
-                    dangerouslySetInnerHTML={{ __html: ideaResponse.replace(/\n/g, '<br/>') }}
-                  />
-                  {ideaResponse === "" && <p className="text-gray-500">Submit the form to generate project ideas.</p>}
-                </div>
-              </>
-            )}
-=======
             <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
               Generated Project Idea 💡
             </h1>
@@ -259,7 +158,6 @@ export default function Home() {
               />
               {ideaResponse === "" && <p className="text-gray-500">Submit the form to generate project ideas.</p>}
             </div>
->>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
             <button
               onClick={() => setShowForm(true)}
               className="mt-6 w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-lg text-lg font-semibold text-white bg-blue-600 hover:bg-blue-700 transition duration-150"

app/globals.css

@@ -1,5 +1,3 @@
-<<<<<<< HEAD
-=======
 /* @import "tailwindcss";
 
 :root {
@@ -29,7 +27,6 @@ body {
 /* 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');
 
->>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
 @import "tailwindcss";
 
 :root {
@@ -43,18 +40,12 @@ body {
 
   /* 3. Assign fonts to Tailwind's theme */
 
-<<<<<<< HEAD
-  /* Tell Tailwind to use the variables already defined in app/layout.tsx */
-  --font-sans: var(--font-sans);
-  --font-header: var(--font-header);
-=======
   /* --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);
->>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
 
   --font-mono: var(--font-geist-mono);
 }

app/page.tsx

@@ -1,5 +1,6 @@
-import Image from "next/image";
+import React from "react";
-import Link from "next/link";
+// import Image from "next/image"; // Removed Next.js import
+// import Link from "next/link"; // Removed Next.js import
 
 export default function Home() {
   return (
@@ -7,172 +8,56 @@ export default function Home() {
       style={{ backgroundColor: "#FEEEDF" }}
       className="flex items-center justify-center font-sans "
     >
-      <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">
+      <header className="absolute top-6 left-8 right-8 flex items-center justify-between text-lg font-medium text-zinc-700">
-        <Image
+        {/* Reverted to <img> tag as requested */}
-          
+        <img
           src="/logo.svg"
           alt="logo.js logo"
           width={100}
           height={20}
-          priority
+          // "priority" is not a valid <img> attribute, so it's removed
         />
-        <div className="flex items-center gap-4">
+        
-          <a href="/dashboard" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+        <div className="flex items-center gap-6">
+          <a href="/dashboard" className="hover:text-blue-600 transition-colors">
             Dashboard
           </a>
-          <a href="/cards" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+          <a href="/cards" className="hover:text-blue-600 transition-colors">
             Cards
           </a>
         </div>
       </header>
 
-<<<<<<< HEAD
+      {/* Reduced top padding from py-64 to py-32 to move content closer to header */}
-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>
-    );
-=======
       <main className="flex min-h-screen w-full flex-col justify-between py-32 max-w-[1200px] mx-auto">
         <div className="flex flex-col sm:flex-row items-center justify-center gap-12 text-left w-full max-w-[1200px] mx-auto">
-          <div className="flex-1 flex flex-col gap-5 justify-center items-start">
+          <div className="flex-1 flex flex-col gap-6 justify-center items-start">
             <h1
               style={{ color: "#173C46" }}
-              className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50"
+              className="max-w-xs text-5xl font-semibold leading-tight tracking-tight text-black"
             >
               Welcome! This is HackSpark
             </h1>
             <p
               style={{ color: "#173C46" }}
-              className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400"
+              className="max-w-md text-xl leading-9 text-zinc-600"
             >
               Got a hackathon coming up? Tell us your track, your team’s skills, what you’re passionate about, and more — and we’ll provide you with the perfect project idea!{" "}
             </p>
 
-            <button
+            {/* Replaced <button><Link...></button> with a single <a> tag styled as a button */}
+            <a
+              href="/dashboard"
               style={{ backgroundColor: "#173C46", color: "white" }}
-              className="px-4 py-1.5 rounded-md shadow-md font-semibold hover:opacity-90 transition-opacity"
+              className="inline-block px-5 py-2.5 text-lg rounded-md shadow-md font-semibold hover:opacity-90 transition-opacity"
             >
-              <Link href="/dashboard">Get Started</Link>
+              Get Started
-            </button>
+            </a>
           </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"
+              className="w-full max-w-[450px] h-[350px] rounded-xl shadow-md flex items-center justify-center text-white"
               style={{ backgroundColor: "#173C46" }}
             >
               Image Placeholder
@@ -184,29 +69,30 @@ export default function Page() {
           style={{ backgroundColor: "#DEE5D4" }}
           className="w-full rounded-xl mt-32"
         >
-          {/* <section className="mt-32 w-full flex flex-col items-start gap-12"> */}
+          {/* Apply padding and alignment to the section */}
-          <section className="px-16 py-18 flex flex-col items-start gap-12 max-w-[1200px] mx-auto">
+          <section className="px-12 py-16 flex flex-col items-center gap-12 max-w-[1200px] mx-auto">
-            {/* <div> */}
+            <h2 className="text-4xl font-semibold text-black leading-9 self-start">
-            <h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9">
               Guide:
             </h2>
-            {/* </div> */}
 
+            {/* Row 1 */}
             <div className="flex flex-col sm:flex-row items-center justify-center gap-8 w-full">
+              {/* Box 1 (Text) - Standardized Size */}
               <div
-                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                className="w-full max-w-lg rounded-xl h-[350px] p-8 flex flex-col justify-center"
                 style={{ backgroundColor: "#B8C0AD" }}
               >
-                <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                <h2 className="text-3xl font-semibold text-black mb-3">
                   First Text Block
                 </h2>
-                <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                <p className="text-xl text-zinc-800">
                   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">
+              {/* Box 2 (Image) - Standardized Size */}
+              <div className="w-full max-w-lg flex justify-center items-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"
+                  className="w-full h-[350px] rounded-xl shadow-md flex items-center justify-center text-zinc-800"
                   style={{ backgroundColor: "#B8C0AD" }}
                 >
                   Image Placeholder
@@ -214,45 +100,52 @@ export default function Page() {
               </div>
             </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-between gap-8 w-full mt-30">
+            {/* Row 2 - Added margin-top (mt-12) for spacing */}
-              <div className="sm:w-1/2 flex justify-center items-center">
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 w-full mt-12">
+              {/* Box 3 (Image) - Standardized Size */}
+              <div className="w-full max-w-lg flex justify-center items-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"
+                  className="w-full h-[350px] rounded-xl shadow-md flex items-center justify-center text-zinc-800"
                   style={{ backgroundColor: "#B8C0AD" }}
                 >
                   Image Placeholder
                 </div>
               </div>
-              <div className="flex w-full justify-center sm:justify-center">
+               {/* Box 4 (Text) - Standardized Size */}
+              <div className="flex w-full max-w-lg justify-center sm:justify-center">
                 <div
-                  className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                  className="w-full rounded-xl h-[350px] p-8 flex flex-col justify-center"
                   style={{ backgroundColor: "#B8C0AD" }}
                 >
-                  <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                  <h2 className="text-3xl font-semibold text-black mb-3">
                     Second Text Block
                   </h2>
-                  <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                  {/* Fixed the </D> typo to </p> */}
+                  <p className="text-xl text-zinc-800">
                     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-center justify-center gap-8 w-full mt-30">
+            {/* Row 3 - Added margin-top (mt-12) for spacing */}
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 w-full mt-12">
+              {/* Box 5 (Text) - Standardized Size */}
               <div
-                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                className="w-full max-w-lg rounded-xl h-[350px] p-8 flex flex-col justify-center"
                 style={{ backgroundColor: "#B8C0AD" }}
               >
-                <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                <h2 className="text-3xl font-semibold text-black mb-3">
                   Third Text Block
                 </h2>
-                <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                <p className="text-xl text-zinc-800">
                   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">
+              {/* Box 6 (Image) - Standardized Size */}
+              <div className="w-full max-w-lg flex justify-center items-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"
+                  className="w-full h-[350px] rounded-xl shadow-md flex items-center justify-center text-zinc-800"
                   style={{ backgroundColor: "#B8C0AD" }}
                 >
                   Image Placeholder
@@ -264,132 +157,4 @@ export default function Page() {
       </main>
     </div>
   );
->>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
+}
-}
-
-
-// {/* <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> */}
-
-
-// "use client";
-
-// import React, { use, useState } from "react";
-// import { useRouter } from "next/navigation";
-
-// export default function Dashboard() {
-//   const router = useRouter();  
-//   const[query, setQuery] = useState("");
-//   // const [projects, setProjects] = useState( [
-//   //     { id: 1, name: "Alpha Project", createdAt: new Date("2025-01-01")},
-//   //     { id: 2, name: "Beta Board", createdAt: new Date("2025-02-15")},
-//   //     { id: 3, name: "Gamma Task", createdAt: new Date("2025-03-10")}
-//   // ]);
-//   // const [newProjectName, setNewProjectName] = useState("");
-//   // const filtered = projects.filter( (p) => p.name.toLowerCase().includes(query.toLowerCase()) );
-//   // const handleCreate = () => {
-//   //   if(!newProjectName.trim()) return;
-//   //   const newProject = {
-//   //     id: projects.length+1, name: newProjectName, createdAt: new Date(),
-//   //   };
-//   // };
-//   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="min-h-screen bg-zinc-50 dark:bg-black font-sans">
-//      <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">
-//            {/* <label htmlFor="dashboard-search" className="sr-only">
-//              Search
-//            </label> */}
-//            <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">
-//            {/* <input
-//               type = "text"
-//               value = {newProjectName}
-//               onChange = { (e) => setNewProjectName(e.target.value)}
-//               placeholder="New Project Name"
-//               className="px-3 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"
-//             /> */}
-//             <button
-//              type="button"
-//              // className="ml-4 inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md shadow-sm"
-//              // onClick={() => alert("Create clicked — wire up creation flow here.")}
-//               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 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="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"
-//                 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">
-//                   {/* {project.createdAt.toLocaleDateString()} */}
-//                   Created: {project.createdAt}
-//                 </span>
-//              </li>
-//            ))}
-
-//            {filtered.length === 0 && (
-//              <li className="text-zinc-500">No results found</li>
-//            )}
-//          </ul>
-//        </section>
-//      </main>
-//    </div>
-//  );
-// }