From 972df9b70b9bab8588351fcf332c3e8e1ea3e7fa Mon Sep 17 00:00:00 2001
From: PawelC4 <pcieslak4480@gmail.com>
Date: Sun, 9 Nov 2025 00:07:25 -0500
Subject: [PATCH 1/4] formatting

---
 app/Dashboard/page.tsx                        | 224 ++++----
 app/api/chat/route.ts                         |  42 +-
 app/api/generate-idea/route.ts                |  40 +-
 app/cards/page.tsx                            | 378 ++++++-------
 app/chatbot/page.tsx                          | 220 ++++----
 .../components}/ProtectedNavButton.tsx        |   4 +-
 app/exportType/types.ts                       |  50 +-
 app/formfile/FormPage.tsx                     | 524 +++++++++---------
 app/formfile/formTypes.ts                     |  36 +-
 app/formfile/generate-idea.ts                 | 112 ++--
 app/formfile/page.tsx                         | 336 ++++++-----
 app/globals.css                               |  26 +
 app/layout.tsx                                |   1 +
 app/page.tsx                                  | 327 ++++++++---
 app/utils/geminiHelper.ts                     |  70 +--
 15 files changed, 1283 insertions(+), 1107 deletions(-)
 rename {components => app/components}/ProtectedNavButton.tsx (84%)

diff --git a/app/Dashboard/page.tsx b/app/Dashboard/page.tsx
index a3a4eba..dfe6113 100644
--- a/app/Dashboard/page.tsx
+++ b/app/Dashboard/page.tsx
@@ -1,121 +1,121 @@
-"use client";
+// "use client";
 
-import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from 'next/link';
+// 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);
+// function Dashboard() { // 2. Changed from 'export default function'
+//   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())
-  );
+//   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>
+//   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>
+//         <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-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>
+//             <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>
+//         <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>
-  );
-}
\ No newline at end of file
+//           <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>
+//   );
+// }
\ No newline at end of file
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index eeb8b31..3c980c0 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -1,24 +1,24 @@
-import { NextResponse } from "next/server";
-import { chatToGemini } from "@/app/utils/geminiHelper";
-import { ChatHistory, ChatSetting } from "@/app/exportType/types";
+// import { NextResponse } from "next/server";
+// import { chatToGemini } from "@/app/utils/geminiHelper";
+// import { ChatHistory, ChatSetting } from "@/app/exportType/types";
 
 
-export async function POST(request: Request) {
-  try {
-    const { userMessage, history , settings } = await request.json() as {
-      userMessage :string;
-      history : ChatHistory;
-      settings : ChatSetting;
-    };
+// export async function POST(request: Request) {
+//   try {
+//     const { userMessage, history , settings } = await request.json() as {
+//       userMessage :string;
+//       history : ChatHistory;
+//       settings : ChatSetting;
+//     };
 
-    const aiResponse = await chatToGemini(userMessage , history, settings);
-    return NextResponse.json({response : aiResponse}); 
-  }
-  catch(error){
-    console.error(error);
-    return NextResponse.json(
-      {error: "Error with the model response "},
-      {status : 500}
-    );
-  }
-}
+//     const aiResponse = await chatToGemini(userMessage , history, settings);
+//     return NextResponse.json({response : aiResponse}); 
+//   }
+//   catch(error){
+//     console.error(error);
+//     return NextResponse.json(
+//       {error: "Error with the model response "},
+//       {status : 500}
+//     );
+//   }
+// }
diff --git a/app/api/generate-idea/route.ts b/app/api/generate-idea/route.ts
index c135cd4..517ec6c 100644
--- a/app/api/generate-idea/route.ts
+++ b/app/api/generate-idea/route.ts
@@ -1,23 +1,23 @@
-import { NextResponse } from "next/server";
-import { chatToGemini } from "@/app/utils/geminiHelper";
-import { ChatSetting } from "@/app/exportType/types";
+// import { NextResponse } from "next/server";
+// import { chatToGemini } from "@/app/utils/geminiHelper";
+// import { ChatSetting } from "@/app/exportType/types";
 
 
-export async function POST(request: Request) {
-  try {
-    const { prompt, settings } = await request.json() as {
-      prompt :string;
-      settings : ChatSetting;
-    };
+// export async function POST(request: Request) {
+//   try {
+//     const { prompt, settings } = await request.json() as {
+//       prompt :string;
+//       settings : ChatSetting;
+//     };
 
-    const aiResponse = await chatToGemini(prompt , [], settings);
-    return NextResponse.json({response : aiResponse}); 
-  }
-  catch(error){
-    console.error(error);
-    return NextResponse.json(
-      {error: "Error with the model response "},
-      {status : 500}
-    );
-  }
-}
+//     const aiResponse = await chatToGemini(prompt , [], settings);
+//     return NextResponse.json({response : aiResponse}); 
+//   }
+//   catch(error){
+//     console.error(error);
+//     return NextResponse.json(
+//       {error: "Error with the model response "},
+//       {status : 500}
+//     );
+//   }
+// }
diff --git a/app/cards/page.tsx b/app/cards/page.tsx
index 0da2c42..5c4858a 100644
--- a/app/cards/page.tsx
+++ b/app/cards/page.tsx
@@ -1,210 +1,210 @@
-"use client";
+// "use client";
 
-import React, { useState, useEffect } from "react";
-import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";
-import { useRouter } from "next/navigation";
+// import React, { useState, useEffect } from "react";
+// import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";
+// import { useRouter } from "next/navigation";
 
-// 1. Updated ColorWay interface
-interface ColorWay {
-  card: string;
-  text: string;
-  titleColor: string; // Added title color
-}
+// // 1. Updated ColorWay interface
+// interface ColorWay {
+//   card: string;
+//   text: string;
+//   titleColor: string; // Added title color
+// }
 
-// 2. Updated COLOR_WAYS array
-const COLOR_WAYS: ColorWay[] = [
-  { card: "#FEEEDF", text: "#173C46", titleColor: "#173C46" },
-  { card: "#FEEEDF", text: "#EA627F", titleColor: "#173C46" }, // Example: Title is dark, text is pink
-  { card: "#DEE5D4", text: "#173C46", titleColor: "#EA627F" },
-  { card: "#DEE5D4", text: "#EA627F", titleColor: "#173C46" },
-  { card: "#B8C0AD", text: "#173C46", titleColor: "#173C46" },
-  { card: "#B8C0AD", text: "#173C46", titleColor: "#EA627F" },
-];
+// // 2. Updated COLOR_WAYS array
+// const COLOR_WAYS: ColorWay[] = [
+//   { card: "#FEEEDF", text: "#173C46", titleColor: "#173C46" },
+//   { card: "#FEEEDF", text: "#EA627F", titleColor: "#173C46" }, // Example: Title is dark, text is pink
+//   { card: "#DEE5D4", text: "#173C46", titleColor: "#EA627F" },
+//   { card: "#DEE5D4", text: "#EA627F", titleColor: "#173C46" },
+//   { card: "#B8C0AD", text: "#173C46", titleColor: "#173C46" },
+//   { card: "#B8C0AD", text: "#173C46", titleColor: "#EA627F" },
+// ];
 
-interface CardData {
-  id: number;
-  title: string;
-  summary: string;
-  tracks: string[];
-}
+// interface CardData {
+//   id: number;
+//   title: string;
+//   summary: string;
+//   tracks: string[];
+// }
 
-const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) => {
-  const [cards, setCards] = useState<CardData[]>(initialCards);
-  const router = useRouter();
+// const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) => {
+//   const [cards, setCards] = useState<CardData[]>(initialCards);
+//   const router = useRouter();
 
-  // Update cards state when initialCards prop changes
-  useEffect(() => {
-    setCards(initialCards);
-  }, [initialCards]);
+//   // Update cards state when initialCards prop changes
+//   useEffect(() => {
+//     setCards(initialCards);
+//   }, [initialCards]);
 
-  const removeCard = () => {
-    setCards((prev) => prev.slice(0, prev.length - 1));
-  };
+//   const removeCard = () => {
+//     setCards((prev) => prev.slice(0, prev.length - 1));
+//   };
 
-  const handleAccept = (cardData: CardData) => {
-    removeCard();
-    // Redirect to chatbot with card data
-    router.push(`/chatbot?title=${encodeURIComponent(cardData.title)}&summary=${encodeURIComponent(cardData.summary)}`);
-  };
+//   const handleAccept = (cardData: CardData) => {
+//     removeCard();
+//     // Redirect to chatbot with card data
+//     router.push(`/chatbot?title=${encodeURIComponent(cardData.title)}&summary=${encodeURIComponent(cardData.summary)}`);
+//   };
 
-  const handleReject = () => {
-    removeCard();
-  };
+//   const handleReject = () => {
+//     removeCard();
+//   };
 
-  const handleReset = () => {
-    setCards([]); // Reset to initial cards
-  };
+//   const handleReset = () => {
+//     setCards([]); // Reset to initial cards
+//   };
 
-  return (
-    <div
-      className="grid h-screen w-full place-items-center bg-orange-100"
-    //   -gradient-to-tr from-orange-200 to-orange-100
-      style={{
-        backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
-          viewBox='0 0 32 32' width='32' height='32' fill='none'
-          stroke-width='2' stroke='%23d4d4d4'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")`,
-      }}
-    >
-      {cards.length > 0 ? (
-        cards.map((card, index) => {
-          const colorWay = COLOR_WAYS[card.id % COLOR_WAYS.length];
-          return (
-            <Card
-              key={card.id}
-              cardData={card}
-              colorWay={colorWay}
-              isFront={index === cards.length - 1}
-              onAccept={handleAccept}
-              onReject={handleReject}
-            />
-          );
-        })
-      ) : (
-        // ... (empty state)
-        <div className="text-center">
-          <h2 className="text-2xl font-bold text-neutral-700">
-            No more cards!
-          </h2>
-          <p className="mb-4 text-neutral-500">
-            You&apos;ve swiped through them all.
-          </p>
-          <button
-            onClick={handleReset}
-            className="rounded-md bg-indigo-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-indigo-600"
-          >
-            Reset Deck
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
+//   return (
+//     <div
+//       className="grid h-screen w-full place-items-center bg-orange-100"
+//     //   -gradient-to-tr from-orange-200 to-orange-100
+//       style={{
+//         backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
+//           viewBox='0 0 32 32' width='32' height='32' fill='none'
+//           stroke-width='2' stroke='%23d4d4d4'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")`,
+//       }}
+//     >
+//       {cards.length > 0 ? (
+//         cards.map((card, index) => {
+//           const colorWay = COLOR_WAYS[card.id % COLOR_WAYS.length];
+//           return (
+//             <Card
+//               key={card.id}
+//               cardData={card}
+//               colorWay={colorWay}
+//               isFront={index === cards.length - 1}
+//               onAccept={handleAccept}
+//               onReject={handleReject}
+//             />
+//           );
+//         })
+//       ) : (
+//         // ... (empty state)
+//         <div className="text-center">
+//           <h2 className="text-2xl font-bold text-neutral-700">
+//             No more cards!
+//           </h2>
+//           <p className="mb-4 text-neutral-500">
+//             You&apos;ve swiped through them all.
+//           </p>
+//           <button
+//             onClick={handleReset}
+//             className="rounded-md bg-indigo-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-indigo-600"
+//           >
+//             Reset Deck
+//           </button>
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
 
-interface CardProps {
-  cardData: CardData;
-  colorWay: ColorWay;
-  isFront: boolean;
-  onAccept: (cardData: CardData) => void;
-  onReject: () => void;
-}
+// interface CardProps {
+//   cardData: CardData;
+//   colorWay: ColorWay;
+//   isFront: boolean;
+//   onAccept: (cardData: CardData) => void;
+//   onReject: () => void;
+// }
 
-const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onReject }) => {
-  const { title, summary, tracks } = cardData;
+// const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onReject }) => {
+//   const { title, summary, tracks } = cardData;
 
-  const x = useMotionValue(0);
-  const rotate = useTransform(x, [-250, 250], [-25, 25]);
-  const opacity = useTransform(
-    x,
-    [-250, -100, 0, 100, 250],
-    [0, 1, 1, 1, 0],
-  );
-  const controls = useAnimation();
+//   const x = useMotionValue(0);
+//   const rotate = useTransform(x, [-250, 250], [-25, 25]);
+//   const opacity = useTransform(
+//     x,
+//     [-250, -100, 0, 100, 250],
+//     [0, 1, 1, 1, 0],
+//   );
+//   const controls = useAnimation();
 
-  const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
-  const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
-  const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
+//   const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
+//   const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
+//   const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
 
-  const handleDragEnd = async (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
-    if (info.offset.x > 100) {
-      // Card accepted
-      await controls.start({ x: 1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
-      onAccept(cardData); // Then call onAccept which removes the card and redirects
-    } else if (info.offset.x < -100) {
-      // Card rejected
-      await controls.start({ x: -1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
-      onReject(); // Then call onReject which removes the card
-    } else {
-      // Card not swiped far enough, snap back to center
-      controls.start({ x: 0, rotate: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30 } });
-    }
-  };
+//   const handleDragEnd = async (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
+//     if (info.offset.x > 100) {
+//       // Card accepted
+//       await controls.start({ x: 1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
+//       onAccept(cardData); // Then call onAccept which removes the card and redirects
+//     } else if (info.offset.x < -100) {
+//       // Card rejected
+//       await controls.start({ x: -1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
+//       onReject(); // Then call onReject which removes the card
+//     } else {
+//       // Card not swiped far enough, snap back to center
+//       controls.start({ x: 0, rotate: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30 } });
+//     }
+//   };
 
-  return (
-    <motion.div
-      className="absolute flex h-[56rem] w-[42rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
-      style={{
-        x,
-        rotate,
-        opacity,
-        backgroundColor: colorWay.card,
-        color: colorWay.text, // This is the default text color
-        zIndex: isFront ? 2 : 1,
-        pointerEvents: isFront ? "auto" : "none",
-      }}
-      animate={controls}
-      transition={{ type: "spring", stiffness: 300, damping: 30 }}
-      drag={isFront ? "x" : false}
-      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
-      onDragEnd={handleDragEnd}
-    >
-      {/* Accept/Reject Badges */}
-      <motion.div
-        className="absolute left-10 top-10 z-10 rounded-2xl border-8 border-green-500 px-10 py-4"
-        style={{ opacity: acceptOpacity, rotate: badgeRotate }}
-      >
-        <h3 className="text-5xl font-bold uppercase text-green-500">Accept</h3>
-      </motion.div>
-      <motion.div
-        className="absolute right-10 top-10 z-10 rounded-2xl border-8 border-red-500 px-10 py-4"
-        style={{ opacity: rejectOpacity, rotate: badgeRotate }}
-      >
-        <h3 className="text-5xl font-bold uppercase text-red-500">Reject</h3>
-      </motion.div>
+//   return (
+//     <motion.div
+//       className="absolute flex h-[56rem] w-[42rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
+//       style={{
+//         x,
+//         rotate,
+//         opacity,
+//         backgroundColor: colorWay.card,
+//         color: colorWay.text, // This is the default text color
+//         zIndex: isFront ? 2 : 1,
+//         pointerEvents: isFront ? "auto" : "none",
+//       }}
+//       animate={controls}
+//       transition={{ type: "spring", stiffness: 300, damping: 30 }}
+//       drag={isFront ? "x" : false}
+//       dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
+//       onDragEnd={handleDragEnd}
+//     >
+//       {/* Accept/Reject Badges */}
+//       <motion.div
+//         className="absolute left-10 top-10 z-10 rounded-2xl border-8 border-green-500 px-10 py-4"
+//         style={{ opacity: acceptOpacity, rotate: badgeRotate }}
+//       >
+//         <h3 className="text-5xl font-bold uppercase text-green-500">Accept</h3>
+//       </motion.div>
+//       <motion.div
+//         className="absolute right-10 top-10 z-10 rounded-2xl border-8 border-red-500 px-10 py-4"
+//         style={{ opacity: rejectOpacity, rotate: badgeRotate }}
+//       >
+//         <h3 className="text-5xl font-bold uppercase text-red-500">Reject</h3>
+//       </motion.div>
 
-      {/* Card Content */}
-      <div className="relative z-0">
-        {/* 3. Applied the specific titleColor here */}
-        <h2
-          className="mb-4 text-center text-3xl font-bold"
-          style={{ color: colorWay.titleColor }}
-        >
-          {title}
-        </h2>
-        {/* This summary <p> will inherit colorWay.text from the parent */}
-        <p className="text-center text-xl font-light">{summary}</p>
-      </div>
+//       {/* Card Content */}
+//       <div className="relative z-0">
+//         {/* 3. Applied the specific titleColor here */}
+//         <h2
+//           className="mb-4 text-center text-3xl font-bold"
+//           style={{ color: colorWay.titleColor }}
+//         >
+//           {title}
+//         </h2>
+//         {/* This summary <p> will inherit colorWay.text from the parent */}
+//         <p className="text-center text-xl font-light">{summary}</p>
+//       </div>
 
-      <div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
-        {tracks.slice(0, 2).map((track, index) => (
-          <span
-            key={track}
-            className="flex items-center justify-center rounded-full px-8 py-3 text-sm font-medium"
-            style={{
-              // This logic now correctly contrasts with the main text color
-              backgroundColor:
-                colorWay.text === "#ffffff"
-                  ? "rgba(255, 255, 255, 0.2)"
-                  : "rgba(0, 0, 0, 0.15)",
-            }}
-          >
-            {track}
-            {index === 0 && tracks.length > 1 && ", "}
-          </span>
-        ))}
-      </div>
-    </motion.div>
-  );
+//       <div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
+//         {tracks.slice(0, 2).map((track, index) => (
+//           <span
+//             key={track}
+//             className="flex items-center justify-center rounded-full px-8 py-3 text-sm font-medium"
+//             style={{
+//               // This logic now correctly contrasts with the main text color
+//               backgroundColor:
+//                 colorWay.text === "#ffffff"
+//                   ? "rgba(255, 255, 255, 0.2)"
+//                   : "rgba(0, 0, 0, 0.15)",
+//             }}
+//           >
+//             {track}
+//             {index === 0 && tracks.length > 1 && ", "}
+//           </span>
+//         ))}
+//       </div>
+//     </motion.div>
+//   );
 
-};
+// };
 
-export default SwipeCards;
+// export default SwipeCards;
diff --git a/app/chatbot/page.tsx b/app/chatbot/page.tsx
index 363f852..37e8143 100644
--- a/app/chatbot/page.tsx
+++ b/app/chatbot/page.tsx
@@ -1,135 +1,135 @@
-"use client";
+// "use client";
 
-import { useState, useEffect, useRef, useCallback } from "react";
-import { useSearchParams } from "next/navigation";
-import ChatInput from "../utils/component/ui/ChatInput";
-import MessageWindow from "../utils/component/ui/MessageWindow";
-import { ChatHistory, ChatSetting, Message , MessageRole } from "@/app/exportType/types";
+// import { useState, useEffect, useRef, useCallback } from "react";
+// import { useSearchParams } from "next/navigation";
+// import ChatInput from "../utils/component/ui/ChatInput";
+// import MessageWindow from "../utils/component/ui/MessageWindow";
+// import { ChatHistory, ChatSetting, Message , MessageRole } from "@/app/exportType/types";
 
-export default function Home(){
-  const [history, setHistory] = useState<ChatHistory>([])
-  const historyRef = useRef<ChatHistory>([]); // Create a ref for history
-  const [settings] = useState<ChatSetting>({
-    temperature:1,
-    model:"gemini-2.5-pro",
-    sysTemInstructions:"you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
+// export default function Home(){
+//   const [history, setHistory] = useState<ChatHistory>([])
+//   const historyRef = useRef<ChatHistory>([]); // Create a ref for history
+//   const [settings] = useState<ChatSetting>({
+//     temperature:1,
+//     model:"gemini-2.5-pro",
+//     sysTemInstructions:"you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
     
-  });
-  const searchParams = useSearchParams();
-  const initialMessageSent = useRef(false);
+//   });
+//   const searchParams = useSearchParams();
+//   const initialMessageSent = useRef(false);
 
-  useEffect(() => {
-    historyRef.current = history; // Keep the ref updated with the latest history
-  }, [history]);
+//   useEffect(() => {
+//     historyRef.current = history; // Keep the ref updated with the latest history
+//   }, [history]);
 
-  const handleSend = useCallback(async(message:string)=>{
-    const newUserMessage:Message = {
-      role:"user",
-      parts:[{text:message}],
-    };
+//   const handleSend = useCallback(async(message:string)=>{
+//     const newUserMessage:Message = {
+//       role:"user",
+//       parts:[{text:message}],
+//     };
 
-    setHistory(prevHistory => {
-      const currentHistory = [...prevHistory, newUserMessage];
+//     setHistory(prevHistory => {
+//       const currentHistory = [...prevHistory, newUserMessage];
       
-      const sendApiRequest = async () => {
-        try{
-          const response = await fetch("/api/chat", {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json",
-              },
-            body: JSON.stringify({
-              userMessage: message,
-              history: historyRef.current, // Use the ref for history
-              settings: settings,
-            }),
-          });
+//       const sendApiRequest = async () => {
+//         try{
+//           const response = await fetch("/api/chat", {
+//             method: "POST",
+//             headers: {
+//                 "Content-Type": "application/json",
+//               },
+//             body: JSON.stringify({
+//               userMessage: message,
+//               history: historyRef.current, // Use the ref for history
+//               settings: settings,
+//             }),
+//           });
 
-          const data = await response.json();
+//           const data = await response.json();
 
-          if (data.error) {
-            console.error("AI Error:", data.error);
-            return;
-          }
+//           if (data.error) {
+//             console.error("AI Error:", data.error);
+//             return;
+//           }
 
-          const aiMessage: Message = {
-            role: "model" as MessageRole,
-            parts: [{ text: data.response }],
-          };
+//           const aiMessage: Message = {
+//             role: "model" as MessageRole,
+//             parts: [{ text: data.response }],
+//           };
 
-          setHistory(prevHistory => [...prevHistory, aiMessage]);
+//           setHistory(prevHistory => [...prevHistory, aiMessage]);
           
-        } 
-        catch (error) {
-          console.error("Request Failed:", error);
-        }
-      };
-      sendApiRequest();
+//         } 
+//         catch (error) {
+//           console.error("Request Failed:", error);
+//         }
+//       };
+//       sendApiRequest();
 
-      return currentHistory;
-    });
-  }, [settings]); // Now handleSend only depends on settings
+//       return currentHistory;
+//     });
+//   }, [settings]); // Now handleSend only depends on settings
 
-  useEffect(() => {
-    if (!initialMessageSent.current) {
-      const title = searchParams.get('title');
-      const summary = searchParams.get('summary');
+//   useEffect(() => {
+//     if (!initialMessageSent.current) {
+//       const title = searchParams.get('title');
+//       const summary = searchParams.get('summary');
 
-      if (title && summary) {
-        const message = `Explain the project titled '${title}' with the summary '${summary}' in detail, and suggest suitable roles for a team working on it.`;
+//       if (title && summary) {
+//         const message = `Explain the project titled '${title}' with the summary '${summary}' in detail, and suggest suitable roles for a team working on it.`;
         
-        const newUserMessage: Message = {
-          role: "user",
-          parts: [{ text: message }],
-        };
+//         const newUserMessage: Message = {
+//           role: "user",
+//           parts: [{ text: message }],
+//         };
 
-        setTimeout(() => {
-          setHistory((prevHistory) => [...prevHistory, newUserMessage]); // Add user message to history
-        }, 0);
+//         setTimeout(() => {
+//           setHistory((prevHistory) => [...prevHistory, newUserMessage]); // Add user message to history
+//         }, 0);
 
-        const sendInitialApiRequest = async () => {
-          try {
-            const response = await fetch("/api/chat", {
-              method: "POST",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                userMessage: message,
-                history: [...historyRef.current, newUserMessage], // Use ref for history
-                settings: settings,
-              }),
-            });
+//         const sendInitialApiRequest = async () => {
+//           try {
+//             const response = await fetch("/api/chat", {
+//               method: "POST",
+//               headers: {
+//                 "Content-Type": "application/json",
+//               },
+//               body: JSON.stringify({
+//                 userMessage: message,
+//                 history: [...historyRef.current, newUserMessage], // Use ref for history
+//                 settings: settings,
+//               }),
+//             });
 
-            const data = await response.json();
+//             const data = await response.json();
 
-            if (data.error) {
-              console.error("AI Error:", data.error);
-              return;
-            }
+//             if (data.error) {
+//               console.error("AI Error:", data.error);
+//               return;
+//             }
 
-            const aiMessage: Message = {
-              role: "model" as MessageRole,
-              parts: [{ text: data.response }],
-            };
+//             const aiMessage: Message = {
+//               role: "model" as MessageRole,
+//               parts: [{ text: data.response }],
+//             };
 
-            setHistory((prevHistory) => [...prevHistory, aiMessage]);
-          } catch (error) {
-            console.error("Request Failed:", error);
-          }
-        };
+//             setHistory((prevHistory) => [...prevHistory, aiMessage]);
+//           } catch (error) {
+//             console.error("Request Failed:", error);
+//           }
+//         };
 
-        sendInitialApiRequest();
-        initialMessageSent.current = true;
-      }
-    }
-  }, [searchParams, settings]); // Dependencies for this useEffect
+//         sendInitialApiRequest();
+//         initialMessageSent.current = true;
+//       }
+//     }
+//   }, [searchParams, settings]); // Dependencies for this useEffect
 
 
-  return (
-    <div className="flex flex-col py-32">
-      <MessageWindow history={history} />
-      <ChatInput onSend={handleSend} onOpenSettings={() => {}} />
-    </div>
-  );
-}
\ No newline at end of file
+//   return (
+//     <div className="flex flex-col py-32">
+//       <MessageWindow history={history} />
+//       <ChatInput onSend={handleSend} onOpenSettings={() => {}} />
+//     </div>
+//   );
+// }
\ No newline at end of file
diff --git a/components/ProtectedNavButton.tsx b/app/components/ProtectedNavButton.tsx
similarity index 84%
rename from components/ProtectedNavButton.tsx
rename to app/components/ProtectedNavButton.tsx
index 34fa0e7..eedd6a6 100644
--- a/components/ProtectedNavButton.tsx
+++ b/app/components/ProtectedNavButton.tsx
@@ -19,7 +19,9 @@ export default function ProtectedNavButton({
     const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
 
     if (token) {
-      router.push("/dashboard");
+      // The app route folder is named `Dashboard` (capital D).
+      // Use the same path casing to avoid 404s on Next.js routes.
+      router.push("/Dashboard");
     } else {
       router.push("/auth/login");
     }
diff --git a/app/exportType/types.ts b/app/exportType/types.ts
index eca26ad..3c9a4c0 100644
--- a/app/exportType/types.ts
+++ b/app/exportType/types.ts
@@ -1,30 +1,30 @@
-export type MessageRole = "user" | "model";
+// export type MessageRole = "user" | "model";
 
-export type MessagePart = {
-    text: string;
-}
+// export type MessagePart = {
+//     text: string;
+// }
 
-export interface Message{
-    role: MessageRole;
-    parts:MessagePart[];
-}
-export type ChatHistory = Message[];
+// export interface Message{
+//     role: MessageRole;
+//     parts:MessagePart[];
+// }
+// export type ChatHistory = Message[];
 
-export interface GenerateConfig{
-    temperature : number;
-    topP : number;
-    responseMimeType : string;
-}
+// export interface GenerateConfig{
+//     temperature : number;
+//     topP : number;
+//     responseMimeType : string;
+// }
 
-export interface ChatSetting{
-    temperature :number;
-    model: string;
-    sysTemInstructions: string;
-}
+// export interface ChatSetting{
+//     temperature :number;
+//     model: string;
+//     sysTemInstructions: string;
+// }
 
-export interface CardData {
-  id: number;
-  title: string;
-  tracks: string[];
-  summary: string;
-}
\ No newline at end of file
+// export interface CardData {
+//   id: number;
+//   title: string;
+//   tracks: string[];
+//   summary: string;
+// }
\ No newline at end of file
diff --git a/app/formfile/FormPage.tsx b/app/formfile/FormPage.tsx
index 8059518..acdfc85 100644
--- a/app/formfile/FormPage.tsx
+++ b/app/formfile/FormPage.tsx
@@ -1,294 +1,294 @@
-"use client";
+// "use client";
 
-import React, { useState } from "react";
+// import React, { useState } from "react";
 
-import { 
-    FormData, 
-    PROFICIENCY_LEVELS 
-} from './formTypes'; // Ensure path is correct
+// import { 
+//     FormData, 
+//     PROFICIENCY_LEVELS 
+// } from './formTypes'; // Ensure path is correct
 
-interface FormPageProps {
-  onFormSubmit: (data: FormData) => void;
-}
+// interface FormPageProps {
+//   onFormSubmit: (data: FormData) => void;
+// }
 
-const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
-  const [formData, setFormData] = useState<FormData>({
-    Hackathon: '',
-    mainTheme: '',
-    tracksStack: [''],
-    students: [{ 
-      studentName: '', 
-      skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
-    }],
-  });
+// const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
+//   const [formData, setFormData] = useState<FormData>({
+//     Hackathon: '',
+//     mainTheme: '',
+//     tracksStack: [''],
+//     students: [{ 
+//       studentName: '', 
+//       skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
+//     }],
+//   });
 
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setFormData({
-      ...formData,
-      [event.target.name]: event.target.value,
-    });
-  };
+//   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+//     setFormData({
+//       ...formData,
+//       [event.target.name]: event.target.value,
+//     });
+//   };
 
-  const handleTracksChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
-    const newTracksStack = [...formData.tracksStack];
-    newTracksStack[index] = event.target.value;
+//   const handleTracksChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+//     const newTracksStack = [...formData.tracksStack];
+//     newTracksStack[index] = event.target.value;
 
-    setFormData({
-      ...formData,
-      tracksStack: newTracksStack,
-    });
-  };
+//     setFormData({
+//       ...formData,
+//       tracksStack: newTracksStack,
+//     });
+//   };
 
-  const handleAddTracks = () => {
-    setFormData({
-      ...formData,
-      tracksStack: [...formData.tracksStack, ''],
-    });
-  };
+//   const handleAddTracks = () => {
+//     setFormData({
+//       ...formData,
+//       tracksStack: [...formData.tracksStack, ''],
+//     });
+//   };
 
-  const handleRemoveTracks = (index: number) => {
-    const newTracksStack = formData.tracksStack.filter((_, i) => i !== index);
-    setFormData({
-      ...formData,
-      tracksStack: newTracksStack,
-    });
-  };
+//   const handleRemoveTracks = (index: number) => {
+//     const newTracksStack = formData.tracksStack.filter((_, i) => i !== index);
+//     setFormData({
+//       ...formData,
+//       tracksStack: newTracksStack,
+//     });
+//   };
 
-  const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>, studentIndex: number) => {
-    const newStudents = [...formData.students];
-    newStudents[studentIndex].studentName = e.target.value;
-    setFormData({ ...formData, students: newStudents });
-  };
+//   const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>, studentIndex: number) => {
+//     const newStudents = [...formData.students];
+//     newStudents[studentIndex].studentName = e.target.value;
+//     setFormData({ ...formData, students: newStudents });
+//   };
 
-  const handleAddStudent = () => {
-    setFormData({
-      ...formData,
-      students: [...formData.students, { studentName: '', skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] }]
-    });
-  };
+//   const handleAddStudent = () => {
+//     setFormData({
+//       ...formData,
+//       students: [...formData.students, { studentName: '', skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] }]
+//     });
+//   };
 
-  const handleRemoveStudent = (studentIndex: number) => {
-    const newStudents = formData.students.filter((_, i) => i !== studentIndex);
-    setFormData({ ...formData, students: newStudents });
-  };
+//   const handleRemoveStudent = (studentIndex: number) => {
+//     const newStudents = formData.students.filter((_, i) => i !== studentIndex);
+//     setFormData({ ...formData, students: newStudents });
+//   };
 
-  const handleSkillChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-    studentIndex: number,
-    skillIndex: number
-  ) => {
-    const newStudents = [...formData.students];
-    const targetName = e.target.name;
-    const targetValue = e.target.value;
+//   const handleSkillChange = (
+//     e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+//     studentIndex: number,
+//     skillIndex: number
+//   ) => {
+//     const newStudents = [...formData.students];
+//     const targetName = e.target.name;
+//     const targetValue = e.target.value;
 
-    if (targetName === 'skillName') {
-      newStudents[studentIndex].skills[skillIndex].skillName = targetValue;
-    } else if (targetName === 'proficiency') {
-      newStudents[studentIndex].skills[skillIndex].proficiency = targetValue;
-    }
+//     if (targetName === 'skillName') {
+//       newStudents[studentIndex].skills[skillIndex].skillName = targetValue;
+//     } else if (targetName === 'proficiency') {
+//       newStudents[studentIndex].skills[skillIndex].proficiency = targetValue;
+//     }
 
-    setFormData({ ...formData, students: newStudents });
-  };
+//     setFormData({ ...formData, students: newStudents });
+//   };
 
-  const handleAddSkill = (studentIndex: number) => {
-    const newStudents = [...formData.students];
-    newStudents[studentIndex].skills.push({ skillName: '', proficiency: PROFICIENCY_LEVELS[1] });
-    setFormData({ ...formData, students: newStudents });
-  };
+//   const handleAddSkill = (studentIndex: number) => {
+//     const newStudents = [...formData.students];
+//     newStudents[studentIndex].skills.push({ skillName: '', proficiency: PROFICIENCY_LEVELS[1] });
+//     setFormData({ ...formData, students: newStudents });
+//   };
 
-  const handleRemoveSkill = (studentIndex: number, skillIndex: number) => {
-    const newStudents = [...formData.students];
-    newStudents[studentIndex].skills = newStudents[studentIndex].skills.filter((_, i) => i !== skillIndex);
-    setFormData({ ...formData, students: newStudents });
-  };
+//   const handleRemoveSkill = (studentIndex: number, skillIndex: number) => {
+//     const newStudents = [...formData.students];
+//     newStudents[studentIndex].skills = newStudents[studentIndex].skills.filter((_, i) => i !== skillIndex);
+//     setFormData({ ...formData, students: newStudents });
+//   };
 
-  const handleSubmit = (event: React.FormEvent) => {
-    event.preventDefault();
-    onFormSubmit(formData); // Call the prop function with formData
-  };
+//   const handleSubmit = (event: React.FormEvent) => {
+//     event.preventDefault();
+//     onFormSubmit(formData); // Call the prop function with formData
+//   };
 
-  return (
-    <div className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
-      <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
-        <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
-          Generate Project Idea
-        </h1>
+//   return (
+//     <div className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
+//       <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
+//         <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
+//           Generate Project Idea
+//         </h1>
 
-        <form className="space-y-8" onSubmit={handleSubmit}>
-          <div className="space-y-6 border-b pb-6 border-gray-200">
-            <h2 className="text-xl font-bold text-gray-700">Project Context</h2>
-            <div>
-              <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
-                Hackathon Name
-              </label>
-              <input 
-                id="hackathonName"
-                required
-                type="text"
-                placeholder="e.g., Google Code Jam"
-                name="Hackathon" 
-                value={formData.Hackathon}
-                onChange={handleChange}
-                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
-              />
-            </div>
+//         <form className="space-y-8" onSubmit={handleSubmit}>
+//           <div className="space-y-6 border-b pb-6 border-gray-200">
+//             <h2 className="text-xl font-bold text-gray-700">Project Context</h2>
+//             <div>
+//               <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
+//                 Hackathon Name
+//               </label>
+//               <input 
+//                 id="hackathonName"
+//                 required
+//                 type="text"
+//                 placeholder="e.g., Google Code Jam"
+//                 name="Hackathon" 
+//                 value={formData.Hackathon}
+//                 onChange={handleChange}
+//                 className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
+//               />
+//             </div>
 
-            <div>
-              <label htmlFor="mainTheme" className="block text-sm font-medium text-gray-700 mb-1">
-                Main Theme
-              </label>
-              <input
-                id="mainTheme"
-                required
-                type="text"
-                placeholder="e.g., Sustainability or AI Ethics"
-                name="mainTheme" 
-                value={formData.mainTheme}
-                onChange={handleChange}
-                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
-              />
-            </div>
-          </div>
+//             <div>
+//               <label htmlFor="mainTheme" className="block text-sm font-medium text-gray-700 mb-1">
+//                 Main Theme
+//               </label>
+//               <input
+//                 id="mainTheme"
+//                 required
+//                 type="text"
+//                 placeholder="e.g., Sustainability or AI Ethics"
+//                 name="mainTheme" 
+//                 value={formData.mainTheme}
+//                 onChange={handleChange}
+//                 className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
+//               />
+//             </div>
+//           </div>
 
-          <div className="space-y-4 border-b pb-6 border-gray-200">
-            <label className="block text-xl font-bold text-gray-700">
-              Tracks Stack
-            </label>
-            <div className="space-y-3">
-              {formData.tracksStack.map((tracks, index) => (
-                <div key={index} className="flex gap-2 items-center">
-                  <input
-                    type="text"
-                    required
-                    placeholder={`Tracks #${index + 1}`}
-                    name={`tracksStack-${index}`} 
-                    value={tracks}
-                    onChange={(e) => handleTracksChange(e, index)}
-                    className="flex-grow px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 transition duration-150"
-                  />
-                  {formData.tracksStack.length > 1 && (
-                    <button
-                      type="button"
-                      onClick={() => handleRemoveTracks(index)}
-                      className="text-sm px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 flex-shrink-0"
-                      aria-label={`Remove tracks ${index + 1}`}
-                    >
-                      Remove
-                    </button>
-                  )}
-                </div>
-              ))}
-            </div>
+//           <div className="space-y-4 border-b pb-6 border-gray-200">
+//             <label className="block text-xl font-bold text-gray-700">
+//               Tracks Stack
+//             </label>
+//             <div className="space-y-3">
+//               {formData.tracksStack.map((tracks, index) => (
+//                 <div key={index} className="flex gap-2 items-center">
+//                   <input
+//                     type="text"
+//                     required
+//                     placeholder={`Tracks #${index + 1}`}
+//                     name={`tracksStack-${index}`} 
+//                     value={tracks}
+//                     onChange={(e) => handleTracksChange(e, index)}
+//                     className="flex-grow px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 transition duration-150"
+//                   />
+//                   {formData.tracksStack.length > 1 && (
+//                     <button
+//                       type="button"
+//                       onClick={() => handleRemoveTracks(index)}
+//                       className="text-sm px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 flex-shrink-0"
+//                       aria-label={`Remove tracks ${index + 1}`}
+//                     >
+//                       Remove
+//                     </button>
+//                   )}
+//                 </div>
+//               ))}
+//             </div>
 
-            <button
-              type="button"
-              onClick={handleAddTracks}
-              className="flex items-center justify-center gap-1 py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
-              Add Tracks
-            </button>
-          </div>
+//             <button
+//               type="button"
+//               onClick={handleAddTracks}
+//               className="flex items-center justify-center gap-1 py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150"
+//             >
+//               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+//               Add Tracks
+//             </button>
+//           </div>
 
-          <div className="space-y-4">
-            <h2 className="text-xl font-bold text-gray-700">Team Members and Skills</h2>
+//           <div className="space-y-4">
+//             <h2 className="text-xl font-bold text-gray-700">Team Members and Skills</h2>
 
-            <div className="space-y-6">
-              {formData.students.map((student, studentIndex) => (
-                <div key={studentIndex} className="p-4 border-2 border-indigo-200 rounded-lg bg-indigo-50 shadow-inner space-y-4">
+//             <div className="space-y-6">
+//               {formData.students.map((student, studentIndex) => (
+//                 <div key={studentIndex} className="p-4 border-2 border-indigo-200 rounded-lg bg-indigo-50 shadow-inner space-y-4">
 
-                  <div className="flex justify-between items-center pb-2 border-b border-indigo-300">
-                    <h4 className="text-lg font-semibold text-indigo-700">Student #{studentIndex + 1}</h4>
-                    {formData.students.length > 1 && (
-                      <button
-                        type="button"
-                        onClick={() => handleRemoveStudent(studentIndex)}
-                        className="text-xs px-2 py-1 bg-red-400 text-white rounded-md hover:bg-red-500 transition duration-150"
-                      >
-                        Remove Student
-                      </button>
-                    )}
-                  </div>
+//                   <div className="flex justify-between items-center pb-2 border-b border-indigo-300">
+//                     <h4 className="text-lg font-semibold text-indigo-700">Student #{studentIndex + 1}</h4>
+//                     {formData.students.length > 1 && (
+//                       <button
+//                         type="button"
+//                         onClick={() => handleRemoveStudent(studentIndex)}
+//                         className="text-xs px-2 py-1 bg-red-400 text-white rounded-md hover:bg-red-500 transition duration-150"
+//                       >
+//                         Remove Student
+//                       </button>
+//                     )}
+//                   </div>
 
-                  <div>
-                    <label className="block text-sm font-medium text-indigo-700 mb-1">Student Name</label>
-                    <input
-                      type="text"
-                      required
-                      placeholder="Student Name"
-                      value={student.studentName}
-                      onChange={(e) => handleStudentNameChange(e, studentIndex)}
-                      className="w-full px-4 py-2 border border-indigo-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
-                    />
-                  </div>
+//                   <div>
+//                     <label className="block text-sm font-medium text-indigo-700 mb-1">Student Name</label>
+//                     <input
+//                       type="text"
+//                       required
+//                       placeholder="Student Name"
+//                       value={student.studentName}
+//                       onChange={(e) => handleStudentNameChange(e, studentIndex)}
+//                       className="w-full px-4 py-2 border border-indigo-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+//                     />
+//                   </div>
 
-                  <div className="space-y-3 p-3 bg-white rounded-lg border border-indigo-100">
-                    <h5 className="text-md font-medium text-indigo-700">Skills</h5>
-                    {student.skills.map((skill, skillIndex) => (
-                      <div key={skillIndex} className="flex gap-2 items-center">
-                        <input
-                          type="text"
-                          required
-                          name="skillName"
-                          placeholder="Skill (e.g., React, Python)"
-                          value={skill.skillName}
-                          onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
-                          className="flex-grow px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500"
-                        />
-                        <select
-                          name="proficiency"
-                          value={skill.proficiency}
-                          onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
-                          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500 w-1/3"
-                        >
-                          {PROFICIENCY_LEVELS.map(level => (
-                            <option key={level} value={level}>{level}</option>
-                          ))}
-                        </select>
-                        {student.skills.length > 1 && (
-                          <button
-                            type="button"
-                            onClick={() => handleRemoveSkill(studentIndex, skillIndex)}
-                            className="text-xs px-2 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition duration-150 flex-shrink-0"
-                          >
-                            X
-                          </button>
-                        )}
-                      </div>
-                    ))}
-                    <button
-                      type="button"
-                      onClick={() => handleAddSkill(studentIndex)}
-                      className="mt-2 text-xs flex items-center gap-1 py-1 px-3 border border-transparent rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition duration-150"
-                    >
-                      + Add Skill
-                    </button>
-                  </div>
-                </div>
-              ))}
-            </div>
+//                   <div className="space-y-3 p-3 bg-white rounded-lg border border-indigo-100">
+//                     <h5 className="text-md font-medium text-indigo-700">Skills</h5>
+//                     {student.skills.map((skill, skillIndex) => (
+//                       <div key={skillIndex} className="flex gap-2 items-center">
+//                         <input
+//                           type="text"
+//                           required
+//                           name="skillName"
+//                           placeholder="Skill (e.g., React, Python)"
+//                           value={skill.skillName}
+//                           onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
+//                           className="flex-grow px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500"
+//                         />
+//                         <select
+//                           name="proficiency"
+//                           value={skill.proficiency}
+//                           onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
+//                           className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500 w-1/3"
+//                         >
+//                           {PROFICIENCY_LEVELS.map(level => (
+//                             <option key={level} value={level}>{level}</option>
+//                           ))}
+//                         </select>
+//                         {student.skills.length > 1 && (
+//                           <button
+//                             type="button"
+//                             onClick={() => handleRemoveSkill(studentIndex, skillIndex)}
+//                             className="text-xs px-2 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition duration-150 flex-shrink-0"
+//                           >
+//                             X
+//                           </button>
+//                         )}
+//                       </div>
+//                     ))}
+//                     <button
+//                       type="button"
+//                       onClick={() => handleAddSkill(studentIndex)}
+//                       className="mt-2 text-xs flex items-center gap-1 py-1 px-3 border border-transparent rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition duration-150"
+//                     >
+//                       + Add Skill
+//                     </button>
+//                   </div>
+//                 </div>
+//               ))}
+//             </div>
 
-            <button
-              type="button"
-              onClick={handleAddStudent}
-              className="mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"
-            >
-              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
-              Add Team Member
-            </button>
-          </div>
+//             <button
+//               type="button"
+//               onClick={handleAddStudent}
+//               className="mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"
+//             >
+//               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
+//               Add Team Member
+//             </button>
+//           </div>
 
-          <button
-            type="submit"
-            className="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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 mt-6"
-          >
-            Generate Idea
-          </button>
-        </form>
+//           <button
+//             type="submit"
+//             className="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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 mt-6"
+//           >
+//             Generate Idea
+//           </button>
+//         </form>
 
-      </div>
-    </div>
-  );
-};
+//       </div>
+//     </div>
+//   );
+// };
 
-export default FormPage;
\ No newline at end of file
+// export default FormPage;
\ No newline at end of file
diff --git a/app/formfile/formTypes.ts b/app/formfile/formTypes.ts
index e3d23c6..d2cb325 100644
--- a/app/formfile/formTypes.ts
+++ b/app/formfile/formTypes.ts
@@ -1,21 +1,21 @@
-// Define Skill structure
-export interface Skill {
-  skillName: string;
-  proficiency: string;
-}
+// // Define Skill structure
+// export interface Skill {
+//   skillName: string;
+//   proficiency: string;
+// }
 
-// Define Student structure
-export interface Student {
-  studentName: string;
-  skills: Skill[];
-}
+// // Define Student structure
+// export interface Student {
+//   studentName: string;
+//   skills: Skill[];
+// }
 
-// Updated main form interface
-export interface FormData {
-  Hackathon: string;
-  mainTheme: string; 
-  tracksStack: string[];
-  students: Student[]; // Array for dynamic students
-}
+// // Updated main form interface
+// export interface FormData {
+//   Hackathon: string;
+//   mainTheme: string; 
+//   tracksStack: string[];
+//   students: Student[]; // Array for dynamic students
+// }
 
-export const PROFICIENCY_LEVELS = ['Beginner', 'Intermediate', 'Expert', 'Master'];
\ No newline at end of file
+// export const PROFICIENCY_LEVELS = ['Beginner', 'Intermediate', 'Expert', 'Master'];
\ No newline at end of file
diff --git a/app/formfile/generate-idea.ts b/app/formfile/generate-idea.ts
index c9f1f3f..be76f38 100644
--- a/app/formfile/generate-idea.ts
+++ b/app/formfile/generate-idea.ts
@@ -1,71 +1,71 @@
-import { GoogleGenerativeAI } from "@google/generative-ai";
-import type { NextApiRequest, NextApiResponse } from 'next';
+// import { GoogleGenerativeAI } from "@google/generative-ai";
+// import type { NextApiRequest, NextApiResponse } from 'next';
 
-// Initialize the Gemini Client with your API Key
-// IMPORTANT: The GEMINI_API_KEY should be an environment variable.
-const apiKey = process.env.GEMINI_API_KEY;
+// // Initialize the Gemini Client with your API Key
+// // IMPORTANT: The GEMINI_API_KEY should be an environment variable.
+// const apiKey = process.env.GEMINI_API_KEY;
 
-if(!apiKey){
-    throw new Error("api key not found");
-}
-const ai = new GoogleGenerativeAI(apiKey);
+// if(!apiKey){
+//     throw new Error("api key not found");
+// }
+// const ai = new GoogleGenerativeAI(apiKey);
 
 
 
-// Define the handler function for the API route
-export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
-) {
-  // Only allow POST requests
-  if (req.method !== 'POST') {
-    return res.status(405).json({ error: 'Method Not Allowed' });
-  }
+// // Define the handler function for the API route
+// export default async function handler(
+//   req: NextApiRequest,
+//   res: NextApiResponse
+// ) {
+//   // Only allow POST requests
+//   if (req.method !== 'POST') {
+//     return res.status(405).json({ error: 'Method Not Allowed' });
+//   }
 
-  // Destructure the data sent from the frontend
-  let { prompt, settings } = req.body;
+//   // Destructure the data sent from the frontend
+//   let { prompt, settings } = req.body;
   
-  // Basic validation
-  if (!prompt || typeof prompt !== 'string') {
-    return res.status(400).json({ error: 'Prompt is required' });
-  }
+//   // Basic validation
+//   if (!prompt || typeof prompt !== 'string') {
+//     return res.status(400).json({ error: 'Prompt is required' });
+//   }
 
-  // Modify the prompt to instruct the AI to generate only the game, concept, and track
-  prompt = `You're going to fill out a card base off the document.
-  you will Generate the project short title. 
-  you will list out the track you used  ${prompt}`;
+//   // Modify the prompt to instruct the AI to generate only the game, concept, and track
+//   prompt = `You're going to fill out a card base off the document.
+//   you will Generate the project short title. 
+//   you will list out the track you used  ${prompt}`;
 
-  try {
-    // 1. Call the Gemini API using the correct method signature
+//   try {
+//     // 1. Call the Gemini API using the correct method signature
     
-    const model = settings?.model || 'gemini-2.5-flash-lite';
-    const generativeModel = ai.getGenerativeModel({ model });
+//     const model = settings?.model || 'gemini-2.5-flash-lite';
+//     const generativeModel = ai.getGenerativeModel({ model });
 
-   // 1. Define the generation configuration object
-    const generationConfig = {
-      temperature: settings?.temperature || 0.9,
-      // The SDK property name for system instructions is 'systemInstruction'
-      systemInstruction: settings?.sysTemInstructions, 
-    };
+//    // 1. Define the generation configuration object
+//     const generationConfig = {
+//       temperature: settings?.temperature || 0.9,
+//       // The SDK property name for system instructions is 'systemInstruction'
+//       systemInstruction: settings?.sysTemInstructions, 
+//     };
 
-    // 2. Call generateContent with the single GenerateContentRequest object.
-    const result = await generativeModel.generateContent({
-      // contents must be an array of Content objects
-      contents: [{
-        role: "user", 
-        parts: [{ text: prompt }]
-      }], 
+//     // 2. Call generateContent with the single GenerateContentRequest object.
+//     const result = await generativeModel.generateContent({
+//       // contents must be an array of Content objects
+//       contents: [{
+//         role: "user", 
+//         parts: [{ text: prompt }]
+//       }], 
       
-      // The fixed property name that resolves the TypeScript error
-      generationConfig: generationConfig, 
-    });
+//       // The fixed property name that resolves the TypeScript error
+//       generationConfig: generationConfig, 
+//     });
 
-    // 2. Extract the response text
-    // The result object now contains a property 'text' at the top level for simple text generation
-    const geminiResponseText = result.response.text();    res.status(200).json({ response: geminiResponseText });
+//     // 2. Extract the response text
+//     // The result object now contains a property 'text' at the top level for simple text generation
+//     const geminiResponseText = result.response.text();    res.status(200).json({ response: geminiResponseText });
 
-  } catch (error) {
-    console.error("Gemini API Error:", error);
-    res.status(500).json({ error: 'Failed to generate idea from AI.' });
-  }
-}
+//   } catch (error) {
+//     console.error("Gemini API Error:", error);
+//     res.status(500).json({ error: 'Failed to generate idea from AI.' });
+//   }
+// }
diff --git a/app/formfile/page.tsx b/app/formfile/page.tsx
index ccf46ef..91678b7 100644
--- a/app/formfile/page.tsx
+++ b/app/formfile/page.tsx
@@ -1,188 +1,172 @@
-// File: Home.tsx (Renamed from form.tsx for export consistency)
+// "use client";
+// import React, { useState, useEffect, useCallback } from "react";
+// import FormPage from './FormPage';
+// import { ChatSetting } from "../exportType/types";
+// import { FormData, PROFICIENCY_LEVELS } from './formTypes';
 
-"use client";
-import React, { useState, useEffect, useCallback } from "react";
-import FormPage from './FormPage';
-import { ChatSetting, CardData } from "@/app/exportType/types";
-import { FormData, PROFICIENCY_LEVELS } from './formTypes';
-import SwipeCards from '../cards/page';
+// // --- Helper function to get default form data ---
+// const getDefaultFormData = (): FormData => ({
+//   Hackathon: '',
+//   mainTheme: '',
+//   tracksStack: [''],
+//   students: [{ 
+//     studentName: '', 
+//     skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
+//   }],
+// });
 
-export default function Home() {
-  const [showForm, setShowForm] = useState(true);
-  const [formData, setFormData] = useState<FormData>(() => {
-    if (typeof window !== 'undefined') {
-      const storedFormData = localStorage.getItem('formData');
-      if (storedFormData) {
-        const parsedData: FormData = JSON.parse(storedFormData);
-        return parsedData;
-      }
-    }
-    return {
-      Hackathon: '',
-      mainTheme: '',
-      tracksStack: [''],
-      students: [{
-        studentName: '',
-        skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
-      }],
-    };
-  });
+// // --- New Initializer Function ---
+// const getInitialState = () => {
+//   if (typeof window === 'undefined') {
+//     return { 
+//       data: getDefaultFormData(), 
+//       showForm: true, 
+//       runEffect: false 
+//     };
+//   }
+//   const storedFormData = localStorage.getItem('formData');
+//   if (storedFormData) {
+//     localStorage.removeItem('formData');
+//     return {
+//       data: JSON.parse(storedFormData) as FormData,
+//       showForm: false,
+//       runEffect: true,
+//     };
+//   }
+//   return { 
+//     data: getDefaultFormData(), 
+//     showForm: true, 
+//     runEffect: false 
+//   };
+// };
 
-  const [ideaResponse, setIdeaResponse] = useState<string>("");
-  const [generatedCards, setGeneratedCards] = useState<CardData[]>([]); // New state for parsed cards
+// // FIX 1 (Memoization): Moved settings OUTSIDE the component.
+// // This makes it a true constant.
+// const AI_SETTINGS: ChatSetting = {
+//   temperature: 1,
+//   model: "gemini-2.5-pro",
+//   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
+// **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.]`,
+// };
 
-  const [settings] = useState<ChatSetting>({
-    temperature: 1,
-    model: "gemini-2.5-flash-lite",
-    sysTemInstructions: `You are an elite hackathon idea generator. Your task is to choose at lease two track and generate five different creative, feasible, and relevant project idea.
-The output MUST be in Markdown format and strictly follow this structure:
-### Project Idea Title
-**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() !== "");
+// export default function Home() {
+  
+//   const [initialState] = useState(getInitialState);
+//   const [showForm, setShowForm] = useState(initialState.showForm);
+//   const [formData, setFormData] = useState<FormData>(initialState.data);
+//   const [ideaResponse, setIdeaResponse] = useState<string>("");
+  
+//   // The 'settings' state [useState] is now removed from here.
 
-  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 handleFormSubmitFromFormPage = (submittedData: FormData) => {
+//     setFormData(submittedData);
+//     setShowForm(false);
+//     generateIdeas(submittedData);
+//   };
 
-    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 !== '');
+//   // Wrapped generateIdeas in useCallback
+//   const generateIdeas = useCallback(async (dataToProcess: FormData) => {
+//     // 1. Data Cleaning
+//     const submissionData: FormData = {
+//         ...dataToProcess,
+//         tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
+//         students: dataToProcess.students
+//             .map(student => ({
+//                 ...student,
+//                 skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
+//             }))
+//             .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
+//     };
 
-    ideas.push({
-      id: index + 1,
-      title,
-      tracks,
-      summary,
-    });
-  });
-  console.log("Parsed Cards:", ideas);
-  return ideas;
-};
+//     // 2. Prompt Construction
+//     const prompt = `
+//     Hackathon: ${submissionData.Hackathon}
+//     Main Theme: ${submissionData.mainTheme}
+//     Required Tracks Stack: ${submissionData.tracksStack.join(', ')}
+//     Team Members and Skills: ${submissionData.students.map(s => 
+//         `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
+//     ).join('; ')}
+    
+//     Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
 
-  const handleFormSubmitFromFormPage = (submittedData: FormData) => {
-    setFormData(submittedData);
-    setShowForm(false);
-    generateIdeas(submittedData);
-  };
+//     // 3. API Call
+//     try {
+//         setIdeaResponse("Generating ideas... Please wait.");
+        
+//         const response = await fetch("/api/generate-idea", {
+//             method: "POST",
+//             headers: { "Content-Type": "application/json" },
+//             body: JSON.stringify({
+//                 prompt: prompt,
+//                 settings: AI_SETTINGS, // Use the constant
+//             }),
+//         });
 
-  // eslint-disable-next-line react-hooks/preserve-manual-memoization
-  const generateIdeas = useCallback(async (dataToProcess: FormData) => {
-    const submissionData: FormData = {
-        ...dataToProcess,
-        tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
-        students: dataToProcess.students
-            .map(student => ({
-                ...student,
-                skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
-            }))
-            .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
-    };
+//         const data = await response.json();
+//         if (data.error || !response.ok) {
+//             console.error("AI Error:", data.error);
+//             setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
+//             return;
+//         }
+//         setIdeaResponse(data.response);
+        
+//     // FIX 2 (Unexpected any): Changed 'any' to 'unknown' and added a type check.
+//     } catch (error: unknown) {
+//         console.error("Request Failed:", error);
+//         let errorMessage = "A network error occurred. Please try again.";
+//         if (error instanceof Error) {
+//             errorMessage += ` Details: ${error.message}`;
+//         }
+//         setIdeaResponse(errorMessage);
+//     }
+//     // FIX 3 (Linter): Disable the faulty memoization rule.
+//     // The empty array is correct because setIdeaResponse is a stable state setter.
+//     // eslint-disable-next-line react-hooks/preserve-manual-memoization
+//   }, []);
 
-    const prompt = `
-    Hackathon: ${submissionData.Hackathon}
-    Main Theme: ${submissionData.mainTheme}
-    Required Tracks Stack: ${submissionData.tracksStack.join(', ')}
-    Team Members and Skills: ${submissionData.students.map(s =>
-        `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
-    ).join('; ')}
+//   // Replaced useEffect
+//   useEffect(() => {
+//     if (initialState.runEffect) {
+//       generateIdeas(initialState.data);
+//     }
+//   }, [initialState, generateIdeas]);
 
-    Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
-
-    try {
-        setIdeaResponse("Generating ideas... Please wait.");
-        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();
-
-        if (data.error || !response.ok) {
-            console.error("AI Error:", data.error);
-            setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
-            return;
-        }
-
-        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');
-      }
-    }
-  }, [generateIdeas]);
-
-  return (
-    <main className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
-      <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
-        {showForm ? (
-          <FormPage onFormSubmit={handleFormSubmitFromFormPage} />
-        ) : (
-          <>
-            {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>
-              </>
-            )}
-            <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"
-            >
-              Go Back to Form
-            </button>
-          </>
-        )}
-      </div>
-    </main>
-  );
-}
\ No newline at end of file
+//   // --- JSX Rendering ---
+//   return (
+//     <main className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
+//       <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
+//         {showForm ? (
+//           <FormPage onFormSubmit={handleFormSubmitFromFormPage} />
+//         ) : (
+//           <>
+//             <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>
+//             <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"
+//             >
+//               Go Back to Form
+//             </button>
+//           </>
+//         )}
+//       </div>
+//     </main>
+//   );
+// }
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 89e0fba..28e3220 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,3 +1,29 @@
+/* @import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+:root {
+  --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;
+} */
 /* 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');
 
diff --git a/app/layout.tsx b/app/layout.tsx
index a396698..6c86ea1 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -4,6 +4,7 @@ import type { Metadata } from "next";
 // 1. Import your two new fonts
 import { Concert_One, Pixelify_Sans } from "next/font/google";
 import "./globals.css";
+// import { Auth0Provider } from "@auth0/nextjs-auth0";
 
 // 2. Set up Concert One as the body/sans font
 const concertOne = Concert_One({
diff --git a/app/page.tsx b/app/page.tsx
index f85cd0b..5bcb886 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,127 +1,290 @@
-"use client";
+import Image from "next/image";
+import ProtectedNavButton from "./components/ProtectedNavButton";
 
-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() {
+export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+    <div
+      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">
         <Image
-          className=""
-          src="/logo.svg"
-          alt="logo"
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js 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">
+        <div className="flex items-center gap-4">
+          <a href="/signin" 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>
+          </a>
+          <a href="/register" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+            Register
+          </a>
         </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)
+      <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">
+            <h1
+              style = {{color:"#173C46"}} 
+              className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50"
+            >
+              Welcome! This is HackSpark
             </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
+            <p
+              style = {{color:"#173C46"}} 
+              className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400"
+            >
+              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!{" "}
+              {/* <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
-              </Link>{" "}
+              </a>{" "}
               or the{" "}
-              <Link
+              <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
-              </Link>{" "}
-              center.
+              </a>{" "} */}
+              {/* center. */}
             </p>
 
-            <ProtectedNavButton>Get Started</ProtectedNavButton>
+            {/* <ProtectedNavButton>Get Started</ProtectedNavButton> */}
+            <button
+              style={{ backgroundColor: "#173C46", color: "white" }}
+              className="px-4 py-1.5 rounded-md shadow-md font-semibold hover:opacity-90 transition-opacity"
+            >
+              {/* {children} */}
+              Get Started
+            </button>
           </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">
+            <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"
+              style={{ backgroundColor: "#173C46"}}
+            >
               Image Placeholder
             </div>
           </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
+        <div
+          style={{backgroundColor: "#DEE5D4"}}
+          className="w-full rounded-xl mt-32"
+        >
+          {/* <section className="mt-32 w-full flex flex-col items-start gap-12"> */}
+          <section className="px-16 py-18 flex flex-col items-start gap-12 max-w-[1200px] mx-auto">
+            {/* <div> */}
+              <h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9">
+                Guide:
               </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> */}
 
-            <div className="flex w-full justify-end">
-              <div className="w-full max-w-xl">
+            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 w-full">
+              <div 
+                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                style={{ backgroundColor: "#B8C0AD"}}
+              >
                 <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
-                  Second Text Block
+                  First 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.
+                  This is the content for the first 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">
+              <div className="sm:w-1/2 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"
+                  style={{ backgroundColor: "#B8C0AD"}}
+                >
                   Image Placeholder
+                </div>
               </div>
             </div>
-          </div>
-        </section>
+            
+            <div className="flex flex-col sm:flex-row items-center justify-between gap-8 w-full mt-30">
+              <div className="sm:w-1/2 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"
+                  style={{ backgroundColor: "#B8C0AD"}}
+                >
+                  Image Placeholder
+                </div>
+              </div>
+              <div className="flex w-full justify-center sm:justify-center">
+                <div 
+                  className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                  style={{ backgroundColor: "#B8C0AD"}}
+                >
+                  <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-center justify-center gap-8 w-full mt-30">
+              <div 
+                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                style={{ backgroundColor: "#B8C0AD"}}
+              >
+                <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-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500"
+                  style={{ backgroundColor: "#B8C0AD"}}
+                >
+                    Image Placeholder
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
       </main>
     </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> */}
+
+
+// "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>
+//  );
+// } fix the formatting of this page, I want the divs to be more centered and the divs below the button to be equal size 
\ No newline at end of file
diff --git a/app/utils/geminiHelper.ts b/app/utils/geminiHelper.ts
index 4fa619c..6615637 100644
--- a/app/utils/geminiHelper.ts
+++ b/app/utils/geminiHelper.ts
@@ -1,42 +1,42 @@
-import { GoogleGenerativeAI } from "@google/generative-ai";
-import { ChatHistory, GenerateConfig,ChatSetting } from "../exportType/types";
+// import { GoogleGenerativeAI } from "@google/generative-ai";
+// import { ChatHistory, GenerateConfig,ChatSetting } from "../exportType/types";
 
-const apiKey = process.env.GEMINI_API_KEY;
+// const apiKey = process.env.GEMINI_API_KEY;
 
-if(!apiKey){
-    throw new Error("api key not found");
-}
+// if(!apiKey){
+//     throw new Error("api key not found");
+// }
 
-const genAI = new GoogleGenerativeAI(apiKey);
+// const genAI = new GoogleGenerativeAI(apiKey);
 
-export async function chatToGemini(
-    userMessage:string ,
-    history:ChatHistory, 
-    settings:ChatSetting
-):Promise<string>{
-        const model = genAI.getGenerativeModel({
-            model:settings.model || "gemini-2.5-flash",
-            systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
-            });
+// export async function chatToGemini(
+//     userMessage:string ,
+//     history:ChatHistory, 
+//     settings:ChatSetting
+// ):Promise<string>{
+//         const model = genAI.getGenerativeModel({
+//             model:settings.model || "gemini-2.5-flash",
+//             systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
+//             });
         
-        const generationConfig:GenerateConfig = {
-            temperature : settings.temperature || 1,
-            topP : 0.9,
-            responseMimeType: "text/plain",
-            maxOutputTokens: 1900, // Increased to allow for longer responses
-        }
+//         const generationConfig:GenerateConfig = {
+//             temperature : settings.temperature || 1,
+//             topP : 0.9,
+//             responseMimeType: "text/plain",
+//             maxOutputTokens: 1900, // Increased to allow for longer responses
+//         }
 
-        const chatSession = model.startChat({
-            generationConfig,
-            history
-        })
+//         const chatSession = model.startChat({
+//             generationConfig,
+//             history
+//         })
 
-        try {
-            const result = await chatSession.sendMessage(userMessage);
-            return result.response.text();
-        }
-        catch(error){
-            console.error(error)
-            throw error
-        }
-    }
\ No newline at end of file
+//         try {
+//             const result = await chatSession.sendMessage(userMessage);
+//             return result.response.text();
+//         }
+//         catch(error){
+//             console.error(error)
+//             throw error
+//         }
+//     }
\ No newline at end of file

From 44b5a4dc49ea757e9790ba8309edc6b37d764105 Mon Sep 17 00:00:00 2001
From: PawelC4 <pcieslak4480@gmail.com>
Date: Sun, 9 Nov 2025 00:37:24 -0500
Subject: [PATCH 2/4] Fixed commented out programs

---
 app/Dashboard/page.tsx                   | 222 +++++-----
 app/api/chat/route.ts                    |  42 +-
 app/api/generate-idea/route.ts           |  40 +-
 app/cards/page.tsx                       | 378 ++++++++--------
 app/chatbot/page.tsx                     | 228 +++++-----
 app/components/Cards.tsx                 | 300 +++++++++++++
 app/components/ProtectedNavButton.tsx    |  46 +-
 app/exportType/types.ts                  |  50 +--
 app/formfile/FormPage.tsx                | 524 +++++++++++------------
 app/formfile/formTypes.ts                |  36 +-
 app/formfile/generate-idea.ts            | 118 ++---
 app/formfile/page.tsx                    | 318 +++++++-------
 app/globals.css                          |  13 +-
 app/page.tsx                             | 283 ++++++------
 app/utils/component/ui/ChatInput.tsx     |  97 +++--
 app/utils/component/ui/MessageWindow.tsx |  48 +--
 app/utils/geminiHelper.ts                |  72 ++--
 17 files changed, 1558 insertions(+), 1257 deletions(-)
 create mode 100644 app/components/Cards.tsx

diff --git a/app/Dashboard/page.tsx b/app/Dashboard/page.tsx
index dfe6113..86da3e8 100644
--- a/app/Dashboard/page.tsx
+++ b/app/Dashboard/page.tsx
@@ -1,121 +1,119 @@
-// "use client";
+"use client";
 
-// import React, { useState } from "react";
-// import { useRouter } from "next/navigation";
-// import Link from 'next/link';
+import React, { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from 'next/link';
 
-// function Dashboard() { // 2. Changed from 'export default function'
-//   const router = useRouter();
-//   const [query, setQuery] = useState("");
-//   const [sideBarOpen, setSidebarOpen] = useState(true);
+function Dashboard() { // 2. Changed from 'export default function'
+    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())
-//   );
+    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>
+    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>
+                <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-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>
+                        <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>
+                <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>
-//   );
-// }
\ No newline at end of file
+                    <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>
+    );
+}
\ No newline at end of file
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index 3c980c0..6c3e35a 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -1,24 +1,24 @@
-// import { NextResponse } from "next/server";
-// import { chatToGemini } from "@/app/utils/geminiHelper";
-// import { ChatHistory, ChatSetting } from "@/app/exportType/types";
+import { NextResponse } from "next/server";
+import { chatToGemini } from "@/app/utils/geminiHelper";
+import { ChatHistory, ChatSetting } from "@/app/exportType/types";
 
 
-// export async function POST(request: Request) {
-//   try {
-//     const { userMessage, history , settings } = await request.json() as {
-//       userMessage :string;
-//       history : ChatHistory;
-//       settings : ChatSetting;
-//     };
+export async function POST(request: Request) {
+  try {
+    const { userMessage, history, settings } = await request.json() as {
+      userMessage: string;
+      history: ChatHistory;
+      settings: ChatSetting;
+    };
 
-//     const aiResponse = await chatToGemini(userMessage , history, settings);
-//     return NextResponse.json({response : aiResponse}); 
-//   }
-//   catch(error){
-//     console.error(error);
-//     return NextResponse.json(
-//       {error: "Error with the model response "},
-//       {status : 500}
-//     );
-//   }
-// }
+    const aiResponse = await chatToGemini(userMessage, history, settings);
+    return NextResponse.json({ response: aiResponse });
+  }
+  catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      { error: "Error with the model response " },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/api/generate-idea/route.ts b/app/api/generate-idea/route.ts
index 517ec6c..9a2a9f4 100644
--- a/app/api/generate-idea/route.ts
+++ b/app/api/generate-idea/route.ts
@@ -1,23 +1,23 @@
-// import { NextResponse } from "next/server";
-// import { chatToGemini } from "@/app/utils/geminiHelper";
-// import { ChatSetting } from "@/app/exportType/types";
+import { NextResponse } from "next/server";
+import { chatToGemini } from "@/app/utils/geminiHelper";
+import { ChatSetting } from "@/app/exportType/types";
 
 
-// export async function POST(request: Request) {
-//   try {
-//     const { prompt, settings } = await request.json() as {
-//       prompt :string;
-//       settings : ChatSetting;
-//     };
+export async function POST(request: Request) {
+  try {
+    const { prompt, settings } = await request.json() as {
+      prompt: string;
+      settings: ChatSetting;
+    };
 
-//     const aiResponse = await chatToGemini(prompt , [], settings);
-//     return NextResponse.json({response : aiResponse}); 
-//   }
-//   catch(error){
-//     console.error(error);
-//     return NextResponse.json(
-//       {error: "Error with the model response "},
-//       {status : 500}
-//     );
-//   }
-// }
+    const aiResponse = await chatToGemini(prompt, [], settings);
+    return NextResponse.json({ response: aiResponse });
+  }
+  catch (error) {
+    console.error(error);
+    return NextResponse.json(
+      { error: "Error with the model response " },
+      { status: 500 }
+    );
+  }
+}
diff --git a/app/cards/page.tsx b/app/cards/page.tsx
index 5c4858a..37faf57 100644
--- a/app/cards/page.tsx
+++ b/app/cards/page.tsx
@@ -1,210 +1,210 @@
-// "use client";
+"use client";
 
-// import React, { useState, useEffect } from "react";
-// import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";
-// import { useRouter } from "next/navigation";
+import React, { useState, useEffect } from "react";
+import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";
+import { useRouter } from "next/navigation";
 
-// // 1. Updated ColorWay interface
-// interface ColorWay {
-//   card: string;
-//   text: string;
-//   titleColor: string; // Added title color
-// }
+// 1. Updated ColorWay interface
+interface ColorWay {
+  card: string;
+  text: string;
+  titleColor: string; // Added title color
+}
 
-// // 2. Updated COLOR_WAYS array
-// const COLOR_WAYS: ColorWay[] = [
-//   { card: "#FEEEDF", text: "#173C46", titleColor: "#173C46" },
-//   { card: "#FEEEDF", text: "#EA627F", titleColor: "#173C46" }, // Example: Title is dark, text is pink
-//   { card: "#DEE5D4", text: "#173C46", titleColor: "#EA627F" },
-//   { card: "#DEE5D4", text: "#EA627F", titleColor: "#173C46" },
-//   { card: "#B8C0AD", text: "#173C46", titleColor: "#173C46" },
-//   { card: "#B8C0AD", text: "#173C46", titleColor: "#EA627F" },
-// ];
+// 2. Updated COLOR_WAYS array
+const COLOR_WAYS: ColorWay[] = [
+  { card: "#FEEEDF", text: "#173C46", titleColor: "#173C46" },
+  { card: "#FEEEDF", text: "#EA627F", titleColor: "#173C46" }, // Example: Title is dark, text is pink
+  { card: "#DEE5D4", text: "#173C46", titleColor: "#EA627F" },
+  { card: "#DEE5D4", text: "#EA627F", titleColor: "#173C46" },
+  { card: "#B8C0AD", text: "#173C46", titleColor: "#173C46" },
+  { card: "#B8C0AD", text: "#173C46", titleColor: "#EA627F" },
+];
 
-// interface CardData {
-//   id: number;
-//   title: string;
-//   summary: string;
-//   tracks: string[];
-// }
+interface CardData {
+  id: number;
+  title: string;
+  summary: string;
+  tracks: string[];
+}
 
-// const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) => {
-//   const [cards, setCards] = useState<CardData[]>(initialCards);
-//   const router = useRouter();
+const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) => {
+  const [cards, setCards] = useState<CardData[]>(initialCards);
+  const router = useRouter();
 
-//   // Update cards state when initialCards prop changes
-//   useEffect(() => {
-//     setCards(initialCards);
-//   }, [initialCards]);
+  // Update cards state when initialCards prop changes
+  useEffect(() => {
+    setCards(initialCards);
+  }, [initialCards]);
 
-//   const removeCard = () => {
-//     setCards((prev) => prev.slice(0, prev.length - 1));
-//   };
+  const removeCard = () => {
+    setCards((prev) => prev.slice(0, prev.length - 1));
+  };
 
-//   const handleAccept = (cardData: CardData) => {
-//     removeCard();
-//     // Redirect to chatbot with card data
-//     router.push(`/chatbot?title=${encodeURIComponent(cardData.title)}&summary=${encodeURIComponent(cardData.summary)}`);
-//   };
+  const handleAccept = (cardData: CardData) => {
+    removeCard();
+    // Redirect to chatbot with card data
+    router.push(`/chatbot?title=${encodeURIComponent(cardData.title)}&summary=${encodeURIComponent(cardData.summary)}`);
+  };
 
-//   const handleReject = () => {
-//     removeCard();
-//   };
+  const handleReject = () => {
+    removeCard();
+  };
 
-//   const handleReset = () => {
-//     setCards([]); // Reset to initial cards
-//   };
+  const handleReset = () => {
+    setCards([]); // Reset to initial cards
+  };
 
-//   return (
-//     <div
-//       className="grid h-screen w-full place-items-center bg-orange-100"
-//     //   -gradient-to-tr from-orange-200 to-orange-100
-//       style={{
-//         backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
-//           viewBox='0 0 32 32' width='32' height='32' fill='none'
-//           stroke-width='2' stroke='%23d4d4d4'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")`,
-//       }}
-//     >
-//       {cards.length > 0 ? (
-//         cards.map((card, index) => {
-//           const colorWay = COLOR_WAYS[card.id % COLOR_WAYS.length];
-//           return (
-//             <Card
-//               key={card.id}
-//               cardData={card}
-//               colorWay={colorWay}
-//               isFront={index === cards.length - 1}
-//               onAccept={handleAccept}
-//               onReject={handleReject}
-//             />
-//           );
-//         })
-//       ) : (
-//         // ... (empty state)
-//         <div className="text-center">
-//           <h2 className="text-2xl font-bold text-neutral-700">
-//             No more cards!
-//           </h2>
-//           <p className="mb-4 text-neutral-500">
-//             You&apos;ve swiped through them all.
-//           </p>
-//           <button
-//             onClick={handleReset}
-//             className="rounded-md bg-indigo-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-indigo-600"
-//           >
-//             Reset Deck
-//           </button>
-//         </div>
-//       )}
-//     </div>
-//   );
-// };
+  return (
+    <div
+      className="grid h-screen w-full place-items-center bg-orange-100"
+      //   -gradient-to-tr from-orange-200 to-orange-100
+      style={{
+        backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
+          viewBox='0 0 32 32' width='32' height='32' fill='none'
+          stroke-width='2' stroke='%23d4d4d4'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")`,
+      }}
+    >
+      {cards.length > 0 ? (
+        cards.map((card, index) => {
+          const colorWay = COLOR_WAYS[card.id % COLOR_WAYS.length];
+          return (
+            <Card
+              key={card.id}
+              cardData={card}
+              colorWay={colorWay}
+              isFront={index === cards.length - 1}
+              onAccept={handleAccept}
+              onReject={handleReject}
+            />
+          );
+        })
+      ) : (
+        // ... (empty state)
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-neutral-700">
+            No more cards!
+          </h2>
+          <p className="mb-4 text-neutral-500">
+            You&apos;ve swiped through them all.
+          </p>
+          <button
+            onClick={handleReset}
+            className="rounded-md bg-indigo-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-indigo-600"
+          >
+            Reset Deck
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
 
-// interface CardProps {
-//   cardData: CardData;
-//   colorWay: ColorWay;
-//   isFront: boolean;
-//   onAccept: (cardData: CardData) => void;
-//   onReject: () => void;
-// }
+interface CardProps {
+  cardData: CardData;
+  colorWay: ColorWay;
+  isFront: boolean;
+  onAccept: (cardData: CardData) => void;
+  onReject: () => void;
+}
 
-// const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onReject }) => {
-//   const { title, summary, tracks } = cardData;
+const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onReject }) => {
+  const { title, summary, tracks } = cardData;
 
-//   const x = useMotionValue(0);
-//   const rotate = useTransform(x, [-250, 250], [-25, 25]);
-//   const opacity = useTransform(
-//     x,
-//     [-250, -100, 0, 100, 250],
-//     [0, 1, 1, 1, 0],
-//   );
-//   const controls = useAnimation();
+  const x = useMotionValue(0);
+  const rotate = useTransform(x, [-250, 250], [-25, 25]);
+  const opacity = useTransform(
+    x,
+    [-250, -100, 0, 100, 250],
+    [0, 1, 1, 1, 0],
+  );
+  const controls = useAnimation();
 
-//   const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
-//   const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
-//   const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
+  const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
+  const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
+  const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
 
-//   const handleDragEnd = async (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
-//     if (info.offset.x > 100) {
-//       // Card accepted
-//       await controls.start({ x: 1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
-//       onAccept(cardData); // Then call onAccept which removes the card and redirects
-//     } else if (info.offset.x < -100) {
-//       // Card rejected
-//       await controls.start({ x: -1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
-//       onReject(); // Then call onReject which removes the card
-//     } else {
-//       // Card not swiped far enough, snap back to center
-//       controls.start({ x: 0, rotate: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30 } });
-//     }
-//   };
+  const handleDragEnd = async (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
+    if (info.offset.x > 100) {
+      // Card accepted
+      await controls.start({ x: 1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
+      onAccept(cardData); // Then call onAccept which removes the card and redirects
+    } else if (info.offset.x < -100) {
+      // Card rejected
+      await controls.start({ x: -1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
+      onReject(); // Then call onReject which removes the card
+    } else {
+      // Card not swiped far enough, snap back to center
+      controls.start({ x: 0, rotate: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30 } });
+    }
+  };
 
-//   return (
-//     <motion.div
-//       className="absolute flex h-[56rem] w-[42rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
-//       style={{
-//         x,
-//         rotate,
-//         opacity,
-//         backgroundColor: colorWay.card,
-//         color: colorWay.text, // This is the default text color
-//         zIndex: isFront ? 2 : 1,
-//         pointerEvents: isFront ? "auto" : "none",
-//       }}
-//       animate={controls}
-//       transition={{ type: "spring", stiffness: 300, damping: 30 }}
-//       drag={isFront ? "x" : false}
-//       dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
-//       onDragEnd={handleDragEnd}
-//     >
-//       {/* Accept/Reject Badges */}
-//       <motion.div
-//         className="absolute left-10 top-10 z-10 rounded-2xl border-8 border-green-500 px-10 py-4"
-//         style={{ opacity: acceptOpacity, rotate: badgeRotate }}
-//       >
-//         <h3 className="text-5xl font-bold uppercase text-green-500">Accept</h3>
-//       </motion.div>
-//       <motion.div
-//         className="absolute right-10 top-10 z-10 rounded-2xl border-8 border-red-500 px-10 py-4"
-//         style={{ opacity: rejectOpacity, rotate: badgeRotate }}
-//       >
-//         <h3 className="text-5xl font-bold uppercase text-red-500">Reject</h3>
-//       </motion.div>
+  return (
+    <motion.div
+      className="absolute flex h-[56rem] w-[42rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
+      style={{
+        x,
+        rotate,
+        opacity,
+        backgroundColor: colorWay.card,
+        color: colorWay.text, // This is the default text color
+        zIndex: isFront ? 2 : 1,
+        pointerEvents: isFront ? "auto" : "none",
+      }}
+      animate={controls}
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
+      drag={isFront ? "x" : false}
+      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
+      onDragEnd={handleDragEnd}
+    >
+      {/* Accept/Reject Badges */}
+      <motion.div
+        className="absolute left-10 top-10 z-10 rounded-2xl border-8 border-green-500 px-10 py-4"
+        style={{ opacity: acceptOpacity, rotate: badgeRotate }}
+      >
+        <h3 className="text-5xl font-bold uppercase text-green-500">Accept</h3>
+      </motion.div>
+      <motion.div
+        className="absolute right-10 top-10 z-10 rounded-2xl border-8 border-red-500 px-10 py-4"
+        style={{ opacity: rejectOpacity, rotate: badgeRotate }}
+      >
+        <h3 className="text-5xl font-bold uppercase text-red-500">Reject</h3>
+      </motion.div>
 
-//       {/* Card Content */}
-//       <div className="relative z-0">
-//         {/* 3. Applied the specific titleColor here */}
-//         <h2
-//           className="mb-4 text-center text-3xl font-bold"
-//           style={{ color: colorWay.titleColor }}
-//         >
-//           {title}
-//         </h2>
-//         {/* This summary <p> will inherit colorWay.text from the parent */}
-//         <p className="text-center text-xl font-light">{summary}</p>
-//       </div>
+      {/* Card Content */}
+      <div className="relative z-0">
+        {/* 3. Applied the specific titleColor here */}
+        <h2
+          className="mb-4 text-center text-3xl font-bold"
+          style={{ color: colorWay.titleColor }}
+        >
+          {title}
+        </h2>
+        {/* This summary <p> will inherit colorWay.text from the parent */}
+        <p className="text-center text-xl font-light">{summary}</p>
+      </div>
 
-//       <div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
-//         {tracks.slice(0, 2).map((track, index) => (
-//           <span
-//             key={track}
-//             className="flex items-center justify-center rounded-full px-8 py-3 text-sm font-medium"
-//             style={{
-//               // This logic now correctly contrasts with the main text color
-//               backgroundColor:
-//                 colorWay.text === "#ffffff"
-//                   ? "rgba(255, 255, 255, 0.2)"
-//                   : "rgba(0, 0, 0, 0.15)",
-//             }}
-//           >
-//             {track}
-//             {index === 0 && tracks.length > 1 && ", "}
-//           </span>
-//         ))}
-//       </div>
-//     </motion.div>
-//   );
+      <div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
+        {tracks.slice(0, 2).map((track, index) => (
+          <span
+            key={track}
+            className="flex items-center justify-center rounded-full px-8 py-3 text-sm font-medium"
+            style={{
+              // This logic now correctly contrasts with the main text color
+              backgroundColor:
+                colorWay.text === "#ffffff"
+                  ? "rgba(255, 255, 255, 0.2)"
+                  : "rgba(0, 0, 0, 0.15)",
+            }}
+          >
+            {track}
+            {index === 0 && tracks.length > 1 && ", "}
+          </span>
+        ))}
+      </div>
+    </motion.div>
+  );
 
-// };
+};
 
-// export default SwipeCards;
+export default SwipeCards;
diff --git a/app/chatbot/page.tsx b/app/chatbot/page.tsx
index 37e8143..80f21ae 100644
--- a/app/chatbot/page.tsx
+++ b/app/chatbot/page.tsx
@@ -1,135 +1,135 @@
-// "use client";
+"use client";
 
-// import { useState, useEffect, useRef, useCallback } from "react";
-// import { useSearchParams } from "next/navigation";
-// import ChatInput from "../utils/component/ui/ChatInput";
-// import MessageWindow from "../utils/component/ui/MessageWindow";
-// import { ChatHistory, ChatSetting, Message , MessageRole } from "@/app/exportType/types";
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useSearchParams } from "next/navigation";
+import ChatInput from "../utils/component/ui/ChatInput";
+import MessageWindow from "../utils/component/ui/MessageWindow";
+import { ChatHistory, ChatSetting, Message, MessageRole } from "@/app/exportType/types";
 
-// export default function Home(){
-//   const [history, setHistory] = useState<ChatHistory>([])
-//   const historyRef = useRef<ChatHistory>([]); // Create a ref for history
-//   const [settings] = useState<ChatSetting>({
-//     temperature:1,
-//     model:"gemini-2.5-pro",
-//     sysTemInstructions:"you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
-    
-//   });
-//   const searchParams = useSearchParams();
-//   const initialMessageSent = useRef(false);
+export default function Home() {
+  const [history, setHistory] = useState<ChatHistory>([])
+  const historyRef = useRef<ChatHistory>([]); // Create a ref for history
+  const [settings] = useState<ChatSetting>({
+    temperature: 1,
+    model: "gemini-2.5-pro",
+    sysTemInstructions: "you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
 
-//   useEffect(() => {
-//     historyRef.current = history; // Keep the ref updated with the latest history
-//   }, [history]);
+  });
+  const searchParams = useSearchParams();
+  const initialMessageSent = useRef(false);
 
-//   const handleSend = useCallback(async(message:string)=>{
-//     const newUserMessage:Message = {
-//       role:"user",
-//       parts:[{text:message}],
-//     };
+  useEffect(() => {
+    historyRef.current = history; // Keep the ref updated with the latest history
+  }, [history]);
 
-//     setHistory(prevHistory => {
-//       const currentHistory = [...prevHistory, newUserMessage];
-      
-//       const sendApiRequest = async () => {
-//         try{
-//           const response = await fetch("/api/chat", {
-//             method: "POST",
-//             headers: {
-//                 "Content-Type": "application/json",
-//               },
-//             body: JSON.stringify({
-//               userMessage: message,
-//               history: historyRef.current, // Use the ref for history
-//               settings: settings,
-//             }),
-//           });
+  const handleSend = useCallback(async (message: string) => {
+    const newUserMessage: Message = {
+      role: "user",
+      parts: [{ text: message }],
+    };
 
-//           const data = await response.json();
+    setHistory(prevHistory => {
+      const currentHistory = [...prevHistory, newUserMessage];
 
-//           if (data.error) {
-//             console.error("AI Error:", data.error);
-//             return;
-//           }
+      const sendApiRequest = async () => {
+        try {
+          const response = await fetch("/api/chat", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              userMessage: message,
+              history: historyRef.current, // Use the ref for history
+              settings: settings,
+            }),
+          });
 
-//           const aiMessage: Message = {
-//             role: "model" as MessageRole,
-//             parts: [{ text: data.response }],
-//           };
+          const data = await response.json();
 
-//           setHistory(prevHistory => [...prevHistory, aiMessage]);
-          
-//         } 
-//         catch (error) {
-//           console.error("Request Failed:", error);
-//         }
-//       };
-//       sendApiRequest();
+          if (data.error) {
+            console.error("AI Error:", data.error);
+            return;
+          }
 
-//       return currentHistory;
-//     });
-//   }, [settings]); // Now handleSend only depends on settings
+          const aiMessage: Message = {
+            role: "model" as MessageRole,
+            parts: [{ text: data.response }],
+          };
 
-//   useEffect(() => {
-//     if (!initialMessageSent.current) {
-//       const title = searchParams.get('title');
-//       const summary = searchParams.get('summary');
+          setHistory(prevHistory => [...prevHistory, aiMessage]);
 
-//       if (title && summary) {
-//         const message = `Explain the project titled '${title}' with the summary '${summary}' in detail, and suggest suitable roles for a team working on it.`;
-        
-//         const newUserMessage: Message = {
-//           role: "user",
-//           parts: [{ text: message }],
-//         };
+        }
+        catch (error) {
+          console.error("Request Failed:", error);
+        }
+      };
+      sendApiRequest();
 
-//         setTimeout(() => {
-//           setHistory((prevHistory) => [...prevHistory, newUserMessage]); // Add user message to history
-//         }, 0);
+      return currentHistory;
+    });
+  }, [settings]); // Now handleSend only depends on settings
 
-//         const sendInitialApiRequest = async () => {
-//           try {
-//             const response = await fetch("/api/chat", {
-//               method: "POST",
-//               headers: {
-//                 "Content-Type": "application/json",
-//               },
-//               body: JSON.stringify({
-//                 userMessage: message,
-//                 history: [...historyRef.current, newUserMessage], // Use ref for history
-//                 settings: settings,
-//               }),
-//             });
+  useEffect(() => {
+    if (!initialMessageSent.current) {
+      const title = searchParams.get('title');
+      const summary = searchParams.get('summary');
 
-//             const data = await response.json();
+      if (title && summary) {
+        const message = `Explain the project titled '${title}' with the summary '${summary}' in detail, and suggest suitable roles for a team working on it.`;
 
-//             if (data.error) {
-//               console.error("AI Error:", data.error);
-//               return;
-//             }
+        const newUserMessage: Message = {
+          role: "user",
+          parts: [{ text: message }],
+        };
 
-//             const aiMessage: Message = {
-//               role: "model" as MessageRole,
-//               parts: [{ text: data.response }],
-//             };
+        setTimeout(() => {
+          setHistory((prevHistory) => [...prevHistory, newUserMessage]); // Add user message to history
+        }, 0);
 
-//             setHistory((prevHistory) => [...prevHistory, aiMessage]);
-//           } catch (error) {
-//             console.error("Request Failed:", error);
-//           }
-//         };
+        const sendInitialApiRequest = async () => {
+          try {
+            const response = await fetch("/api/chat", {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({
+                userMessage: message,
+                history: [...historyRef.current, newUserMessage], // Use ref for history
+                settings: settings,
+              }),
+            });
 
-//         sendInitialApiRequest();
-//         initialMessageSent.current = true;
-//       }
-//     }
-//   }, [searchParams, settings]); // Dependencies for this useEffect
+            const data = await response.json();
+
+            if (data.error) {
+              console.error("AI Error:", data.error);
+              return;
+            }
+
+            const aiMessage: Message = {
+              role: "model" as MessageRole,
+              parts: [{ text: data.response }],
+            };
+
+            setHistory((prevHistory) => [...prevHistory, aiMessage]);
+          } catch (error) {
+            console.error("Request Failed:", error);
+          }
+        };
+
+        sendInitialApiRequest();
+        initialMessageSent.current = true;
+      }
+    }
+  }, [searchParams, settings]); // Dependencies for this useEffect
 
 
-//   return (
-//     <div className="flex flex-col py-32">
-//       <MessageWindow history={history} />
-//       <ChatInput onSend={handleSend} onOpenSettings={() => {}} />
-//     </div>
-//   );
-// }
\ No newline at end of file
+  return (
+    <div className="flex flex-col py-32">
+      <MessageWindow history={history} />
+      <ChatInput onSend={handleSend} onOpenSettings={() => { }} />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/components/Cards.tsx b/app/components/Cards.tsx
new file mode 100644
index 0000000..322b377
--- /dev/null
+++ b/app/components/Cards.tsx
@@ -0,0 +1,300 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion, useMotionValue, useTransform } from "framer-motion";
+
+// Removed local fallback JSX declaration — use the official React type definitions instead:
+// install @types/react and @types/react-dom so JSX.IntrinsicElements is provided by those packages.
+// 1. Updated ColorWay interface
+interface ColorWay {
+  card: string;
+  text: string;
+  titleColor: string; // Added title color
+}
+
+// 2. Updated COLOR_WAYS array
+const COLOR_WAYS: ColorWay[] = [
+  { card: "#FEEEDF", text: "#173C46", titleColor: "#173C46" },
+  { card: "#FEEEDF", text: "#EA627F", titleColor: "#173C46" }, // Example: Title is dark, text is pink
+  { card: "#DEE5D4", text: "#173C46", titleColor: "#EA627F" },
+  { card: "#DEE5D4", text: "#EA627F", titleColor: "#173C46" },
+  { card: "#B8C0AD", text: "#173C46", titleColor: "#173C46" },
+  { card: "#B8C0AD", text: "#173C46", titleColor: "#EA627F" },
+];
+
+interface CardData {
+  id: number;
+  title: string;
+  summary: string;
+  tracks: string[];
+}
+
+const cardData: CardData[] = [
+  {
+
+    id: 1,
+
+    title: " WEBSITE",
+
+    summary:
+
+      "FFind out what makes GoonMAXXER unique.With this innovative website you will be able to explore various features and functionalities that set GoonMAXXER apart from the rest.",
+
+    tracks: ["Gemini", "Auth0", "VibeCODING", "SmellyMaxxing", "shitposting"],
+
+  },
+
+  {
+
+    id: 2,
+
+    title: "Intro to React",
+
+    summary:
+
+      "Learn the fundamentals of React, including components, state, and props.",
+
+    tracks: ["React", "JS", "Frontend"],
+
+  },
+
+  {
+
+    id: 3,
+
+    title: "State Management",
+
+    summary:
+
+      "Explore complex state solutions with Zustand, Redux, and Context API.",
+
+    tracks: ["React", "Zustand", "State"],
+
+  },
+
+  {
+
+    id: 4,
+
+    title: "Next.js 14",
+
+    summary: "Master the app router, server actions, and data fetching.",
+
+    tracks: ["Next.js", "React", "Fullstack"],
+
+  },
+
+  {
+
+    id: 5,
+
+    title: "UI/UX Principles",
+
+    summary:
+
+      "A complete guide to user-centric design, prototyping, and testing.",
+
+    tracks: ["Design", "UI", "UX"],
+
+  },
+
+  {
+
+    id: 6,
+
+    title: "Node.js Essentials",
+
+    summary:
+
+      "Build scalable, high-performance backend applications with Node.js.",
+
+    tracks: ["Node", "Backend", "JS"],
+
+  },
+
+  {
+
+    id: 7,
+
+    title: "TypeScript",
+
+    summary:
+
+      "Add static typing to your JavaScript projects for robust, large-scale apps.",
+
+    tracks: ["TypeScript", "JS", "DevOps"],
+
+  },
+
+  {
+
+    id: 8,
+
+    title: "Framer Motion",
+
+    summary: "Create production-ready animations for your React applications.",
+
+    tracks: ["React", "Animation", "Framer"],
+
+  },
+
+].reverse();
+
+const SwipeCards: React.FC = () => {
+  const [cards, setCards] = useState<CardData[]>(cardData);
+
+  const onSwipe = () => {
+    setCards((prev) => prev.slice(0, prev.length - 1));
+  };
+
+  const handleReset = () => {
+    setCards(cardData);
+  };
+
+  return (
+    <div
+      className="grid h-screen w-full place-items-center bg-orange-100"
+      //   -gradient-to-tr from-orange-200 to-orange-100
+      style={{
+        backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
+          viewBox='0 0 32 32' width='32' height='32' fill='none' 
+          stroke-width='2' stroke='%23d4d4d4'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")`,
+      }}
+    >
+      {cards.length > 0 ? (
+        cards.map((card, index) => {
+          const colorWay = COLOR_WAYS[card.id % COLOR_WAYS.length];
+          return (
+            <Card
+              key={card.id}
+              cardData={card}
+              colorWay={colorWay}
+              isFront={index === cards.length - 1}
+              onSwipe={onSwipe}
+            />
+          );
+        })
+      ) : (
+        // ... (empty state)
+        <div className="text-center">
+          <h2 className="text-2xl font-bold text-neutral-700">
+            No more cards!
+          </h2>
+          <p className="mb-4 text-neutral-500">
+            You&apos;ve swiped through them all.
+          </p>
+          <button
+            onClick={handleReset}
+            className="rounded-md bg-indigo-500 px-4 py-2 font-semibold text-white transition-colors hover:bg-indigo-600"
+          >
+            Reset Deck
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+interface CardProps {
+  cardData: CardData;
+  colorWay: ColorWay;
+  isFront: boolean;
+  onSwipe: () => void;
+}
+
+const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onSwipe }) => {
+  const { title, summary, tracks } = cardData;
+
+  const x = useMotionValue(0);
+  const rotate = useTransform(x, [-250, 250], [-25, 25]);
+  const opacity = useTransform(
+    x,
+    [-250, -100, 0, 100, 250],
+    [0, 1, 1, 1, 0],
+  );
+
+  const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
+  const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
+  const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
+
+  const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
+    if (Math.abs(info.offset.x) > 100) {
+      onSwipe();
+    }
+  };
+
+  return (
+    <motion.div
+      className="absolute flex h-[48rem] w-[36rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
+      style={{
+        x,
+        rotate,
+        opacity,
+        backgroundColor: colorWay.card,
+        color: colorWay.text, // This is the default text color
+        zIndex: isFront ? 2 : 1,
+        pointerEvents: isFront ? "auto" : "none",
+      }}
+      animate={{
+        scale: isFront ? 1 : 0.95,
+        y: isFront ? 0 : -40,
+      }}
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
+      drag={isFront ? "x" : false}
+      dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
+      onDragEnd={handleDragEnd}
+    >
+      {/* Accept/Reject Badges */}
+      <motion.div
+        className="absolute left-10 top-10 z-10 rounded-2xl border-8 border-green-500 px-10 py-4"
+        style={{ opacity: acceptOpacity, rotate: badgeRotate }}
+      >
+        <h3 className="text-5xl font-bold uppercase text-green-500">Accept</h3>
+      </motion.div>
+      <motion.div
+        className="absolute right-10 top-10 z-10 rounded-2xl border-8 border-red-500 px-10 py-4"
+        style={{ opacity: rejectOpacity, rotate: badgeRotate }}
+      >
+        <h3 className="text-5xl font-bold uppercase text-red-500">Reject</h3>
+      </motion.div>
+
+      {/* Card Content */}
+      <div className="relative z-0">
+        {/* 3. Applied the specific titleColor here */}
+        <h2
+          className="mb-4 text-center text-7xl font-bold"
+          style={{ color: colorWay.titleColor }}
+        >
+          {title}
+        </h2>
+        {/* This summary <p> will inherit colorWay.text from the parent */}
+        <p className="text-center text-3xl font-light">{summary}</p>
+      </div>
+
+      <div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
+        {/* This <h3> will also inherit colorWay.text */}
+        <h3 className="mb-4 w-full text-center text-4xl font-semibold">
+          Tracks
+        </h3>
+        {tracks.map((track) => (
+          <span
+            key={track}
+            className="flex items-center justify-center rounded-full px-8 py-3 text-2xl font-medium"
+            style={{
+              // This logic now correctly contrasts with the main text color
+              backgroundColor:
+                colorWay.text === "#ffffff"
+                  ? "rgba(255, 255, 255, 0.2)"
+                  : "rgba(0, 0, 0, 0.15)",
+            }}
+          >
+            {track}
+          </span>
+        ))}
+      </div>
+    </motion.div>
+  );
+
+};
+
+export default SwipeCards;
\ No newline at end of file
diff --git a/app/components/ProtectedNavButton.tsx b/app/components/ProtectedNavButton.tsx
index eedd6a6..5a5c48b 100644
--- a/app/components/ProtectedNavButton.tsx
+++ b/app/components/ProtectedNavButton.tsx
@@ -4,32 +4,32 @@ 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 = "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;
+    children?: React.ReactNode;
+    className?: string;
 }) {
-  const router = useRouter();
+    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;
+    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) {
-      // The app route folder is named `Dashboard` (capital D).
-      // Use the same path casing to avoid 404s on Next.js routes.
-      router.push("/Dashboard");
-    } else {
-      router.push("/auth/login");
-    }
-  };
+        if (token) {
+            // The app route folder is named `Dashboard` (capital D).
+            // Use the same path casing to avoid 404s on Next.js routes.
+            router.push("/Dashboard");
+        } else {
+            router.push("/auth/login");
+        }
+    };
 
-  return (
-    <button type="button" onClick={handleClick} className={className}>
-      {children}
-    </button>
-  );
+    return (
+        <button type="button" onClick={handleClick} className={className}>
+            {children}
+        </button>
+    );
 }
diff --git a/app/exportType/types.ts b/app/exportType/types.ts
index 3c9a4c0..9b2afbb 100644
--- a/app/exportType/types.ts
+++ b/app/exportType/types.ts
@@ -1,30 +1,30 @@
-// export type MessageRole = "user" | "model";
+export type MessageRole = "user" | "model";
 
-// export type MessagePart = {
-//     text: string;
-// }
+export type MessagePart = {
+    text: string;
+}
 
-// export interface Message{
-//     role: MessageRole;
-//     parts:MessagePart[];
-// }
-// export type ChatHistory = Message[];
+export interface Message {
+    role: MessageRole;
+    parts: MessagePart[];
+}
+export type ChatHistory = Message[];
 
-// export interface GenerateConfig{
-//     temperature : number;
-//     topP : number;
-//     responseMimeType : string;
-// }
+export interface GenerateConfig {
+    temperature: number;
+    topP: number;
+    responseMimeType: string;
+}
 
-// export interface ChatSetting{
-//     temperature :number;
-//     model: string;
-//     sysTemInstructions: string;
-// }
+export interface ChatSetting {
+    temperature: number;
+    model: string;
+    sysTemInstructions: string;
+}
 
-// export interface CardData {
-//   id: number;
-//   title: string;
-//   tracks: string[];
-//   summary: string;
-// }
\ No newline at end of file
+export interface CardData {
+    id: number;
+    title: string;
+    tracks: string[];
+    summary: string;
+}
\ No newline at end of file
diff --git a/app/formfile/FormPage.tsx b/app/formfile/FormPage.tsx
index acdfc85..d9b8960 100644
--- a/app/formfile/FormPage.tsx
+++ b/app/formfile/FormPage.tsx
@@ -1,294 +1,294 @@
-// "use client";
+"use client";
 
-// import React, { useState } from "react";
+import React, { useState } from "react";
 
-// import { 
-//     FormData, 
-//     PROFICIENCY_LEVELS 
-// } from './formTypes'; // Ensure path is correct
+import {
+  FormData,
+  PROFICIENCY_LEVELS
+} from './formTypes'; // Ensure path is correct
 
-// interface FormPageProps {
-//   onFormSubmit: (data: FormData) => void;
-// }
+interface FormPageProps {
+  onFormSubmit: (data: FormData) => void;
+}
 
-// const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
-//   const [formData, setFormData] = useState<FormData>({
-//     Hackathon: '',
-//     mainTheme: '',
-//     tracksStack: [''],
-//     students: [{ 
-//       studentName: '', 
-//       skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
-//     }],
-//   });
+const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
+  const [formData, setFormData] = useState<FormData>({
+    Hackathon: '',
+    mainTheme: '',
+    tracksStack: [''],
+    students: [{
+      studentName: '',
+      skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
+    }],
+  });
 
-//   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     setFormData({
-//       ...formData,
-//       [event.target.name]: event.target.value,
-//     });
-//   };
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({
+      ...formData,
+      [event.target.name]: event.target.value,
+    });
+  };
 
-//   const handleTracksChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
-//     const newTracksStack = [...formData.tracksStack];
-//     newTracksStack[index] = event.target.value;
+  const handleTracksChange = (event: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const newTracksStack = [...formData.tracksStack];
+    newTracksStack[index] = event.target.value;
 
-//     setFormData({
-//       ...formData,
-//       tracksStack: newTracksStack,
-//     });
-//   };
+    setFormData({
+      ...formData,
+      tracksStack: newTracksStack,
+    });
+  };
 
-//   const handleAddTracks = () => {
-//     setFormData({
-//       ...formData,
-//       tracksStack: [...formData.tracksStack, ''],
-//     });
-//   };
+  const handleAddTracks = () => {
+    setFormData({
+      ...formData,
+      tracksStack: [...formData.tracksStack, ''],
+    });
+  };
 
-//   const handleRemoveTracks = (index: number) => {
-//     const newTracksStack = formData.tracksStack.filter((_, i) => i !== index);
-//     setFormData({
-//       ...formData,
-//       tracksStack: newTracksStack,
-//     });
-//   };
+  const handleRemoveTracks = (index: number) => {
+    const newTracksStack = formData.tracksStack.filter((_, i) => i !== index);
+    setFormData({
+      ...formData,
+      tracksStack: newTracksStack,
+    });
+  };
 
-//   const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>, studentIndex: number) => {
-//     const newStudents = [...formData.students];
-//     newStudents[studentIndex].studentName = e.target.value;
-//     setFormData({ ...formData, students: newStudents });
-//   };
+  const handleStudentNameChange = (e: React.ChangeEvent<HTMLInputElement>, studentIndex: number) => {
+    const newStudents = [...formData.students];
+    newStudents[studentIndex].studentName = e.target.value;
+    setFormData({ ...formData, students: newStudents });
+  };
 
-//   const handleAddStudent = () => {
-//     setFormData({
-//       ...formData,
-//       students: [...formData.students, { studentName: '', skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] }]
-//     });
-//   };
+  const handleAddStudent = () => {
+    setFormData({
+      ...formData,
+      students: [...formData.students, { studentName: '', skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] }]
+    });
+  };
 
-//   const handleRemoveStudent = (studentIndex: number) => {
-//     const newStudents = formData.students.filter((_, i) => i !== studentIndex);
-//     setFormData({ ...formData, students: newStudents });
-//   };
+  const handleRemoveStudent = (studentIndex: number) => {
+    const newStudents = formData.students.filter((_, i) => i !== studentIndex);
+    setFormData({ ...formData, students: newStudents });
+  };
 
-//   const handleSkillChange = (
-//     e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
-//     studentIndex: number,
-//     skillIndex: number
-//   ) => {
-//     const newStudents = [...formData.students];
-//     const targetName = e.target.name;
-//     const targetValue = e.target.value;
+  const handleSkillChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+    studentIndex: number,
+    skillIndex: number
+  ) => {
+    const newStudents = [...formData.students];
+    const targetName = e.target.name;
+    const targetValue = e.target.value;
 
-//     if (targetName === 'skillName') {
-//       newStudents[studentIndex].skills[skillIndex].skillName = targetValue;
-//     } else if (targetName === 'proficiency') {
-//       newStudents[studentIndex].skills[skillIndex].proficiency = targetValue;
-//     }
+    if (targetName === 'skillName') {
+      newStudents[studentIndex].skills[skillIndex].skillName = targetValue;
+    } else if (targetName === 'proficiency') {
+      newStudents[studentIndex].skills[skillIndex].proficiency = targetValue;
+    }
 
-//     setFormData({ ...formData, students: newStudents });
-//   };
+    setFormData({ ...formData, students: newStudents });
+  };
 
-//   const handleAddSkill = (studentIndex: number) => {
-//     const newStudents = [...formData.students];
-//     newStudents[studentIndex].skills.push({ skillName: '', proficiency: PROFICIENCY_LEVELS[1] });
-//     setFormData({ ...formData, students: newStudents });
-//   };
+  const handleAddSkill = (studentIndex: number) => {
+    const newStudents = [...formData.students];
+    newStudents[studentIndex].skills.push({ skillName: '', proficiency: PROFICIENCY_LEVELS[1] });
+    setFormData({ ...formData, students: newStudents });
+  };
 
-//   const handleRemoveSkill = (studentIndex: number, skillIndex: number) => {
-//     const newStudents = [...formData.students];
-//     newStudents[studentIndex].skills = newStudents[studentIndex].skills.filter((_, i) => i !== skillIndex);
-//     setFormData({ ...formData, students: newStudents });
-//   };
+  const handleRemoveSkill = (studentIndex: number, skillIndex: number) => {
+    const newStudents = [...formData.students];
+    newStudents[studentIndex].skills = newStudents[studentIndex].skills.filter((_, i) => i !== skillIndex);
+    setFormData({ ...formData, students: newStudents });
+  };
 
-//   const handleSubmit = (event: React.FormEvent) => {
-//     event.preventDefault();
-//     onFormSubmit(formData); // Call the prop function with formData
-//   };
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault();
+    onFormSubmit(formData); // Call the prop function with formData
+  };
 
-//   return (
-//     <div className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
-//       <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
-//         <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
-//           Generate Project Idea
-//         </h1>
+  return (
+    <div className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
+      <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
+        <h1 className="text-3xl font-extrabold text-center text-gray-800 mb-8 tracking-tight">
+          Generate Project Idea
+        </h1>
 
-//         <form className="space-y-8" onSubmit={handleSubmit}>
-//           <div className="space-y-6 border-b pb-6 border-gray-200">
-//             <h2 className="text-xl font-bold text-gray-700">Project Context</h2>
-//             <div>
-//               <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
-//                 Hackathon Name
-//               </label>
-//               <input 
-//                 id="hackathonName"
-//                 required
-//                 type="text"
-//                 placeholder="e.g., Google Code Jam"
-//                 name="Hackathon" 
-//                 value={formData.Hackathon}
-//                 onChange={handleChange}
-//                 className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
-//               />
-//             </div>
+        <form className="space-y-8" onSubmit={handleSubmit}>
+          <div className="space-y-6 border-b pb-6 border-gray-200">
+            <h2 className="text-xl font-bold text-gray-700">Project Context</h2>
+            <div>
+              <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
+                Hackathon Name
+              </label>
+              <input
+                id="hackathonName"
+                required
+                type="text"
+                placeholder="e.g., Google Code Jam"
+                name="Hackathon"
+                value={formData.Hackathon}
+                onChange={handleChange}
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
+              />
+            </div>
 
-//             <div>
-//               <label htmlFor="mainTheme" className="block text-sm font-medium text-gray-700 mb-1">
-//                 Main Theme
-//               </label>
-//               <input
-//                 id="mainTheme"
-//                 required
-//                 type="text"
-//                 placeholder="e.g., Sustainability or AI Ethics"
-//                 name="mainTheme" 
-//                 value={formData.mainTheme}
-//                 onChange={handleChange}
-//                 className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
-//               />
-//             </div>
-//           </div>
+            <div>
+              <label htmlFor="mainTheme" className="block text-sm font-medium text-gray-700 mb-1">
+                Main Theme
+              </label>
+              <input
+                id="mainTheme"
+                required
+                type="text"
+                placeholder="e.g., Sustainability or AI Ethics"
+                name="mainTheme"
+                value={formData.mainTheme}
+                onChange={handleChange}
+                className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
+              />
+            </div>
+          </div>
 
-//           <div className="space-y-4 border-b pb-6 border-gray-200">
-//             <label className="block text-xl font-bold text-gray-700">
-//               Tracks Stack
-//             </label>
-//             <div className="space-y-3">
-//               {formData.tracksStack.map((tracks, index) => (
-//                 <div key={index} className="flex gap-2 items-center">
-//                   <input
-//                     type="text"
-//                     required
-//                     placeholder={`Tracks #${index + 1}`}
-//                     name={`tracksStack-${index}`} 
-//                     value={tracks}
-//                     onChange={(e) => handleTracksChange(e, index)}
-//                     className="flex-grow px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 transition duration-150"
-//                   />
-//                   {formData.tracksStack.length > 1 && (
-//                     <button
-//                       type="button"
-//                       onClick={() => handleRemoveTracks(index)}
-//                       className="text-sm px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 flex-shrink-0"
-//                       aria-label={`Remove tracks ${index + 1}`}
-//                     >
-//                       Remove
-//                     </button>
-//                   )}
-//                 </div>
-//               ))}
-//             </div>
+          <div className="space-y-4 border-b pb-6 border-gray-200">
+            <label className="block text-xl font-bold text-gray-700">
+              Tracks Stack
+            </label>
+            <div className="space-y-3">
+              {formData.tracksStack.map((tracks, index) => (
+                <div key={index} className="flex gap-2 items-center">
+                  <input
+                    type="text"
+                    required
+                    placeholder={`Tracks #${index + 1}`}
+                    name={`tracksStack-${index}`}
+                    value={tracks}
+                    onChange={(e) => handleTracksChange(e, index)}
+                    className="flex-grow px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 transition duration-150"
+                  />
+                  {formData.tracksStack.length > 1 && (
+                    <button
+                      type="button"
+                      onClick={() => handleRemoveTracks(index)}
+                      className="text-sm px-3 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition duration-150 flex-shrink-0"
+                      aria-label={`Remove tracks ${index + 1}`}
+                    >
+                      Remove
+                    </button>
+                  )}
+                </div>
+              ))}
+            </div>
 
-//             <button
-//               type="button"
-//               onClick={handleAddTracks}
-//               className="flex items-center justify-center gap-1 py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150"
-//             >
-//               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
-//               Add Tracks
-//             </button>
-//           </div>
+            <button
+              type="button"
+              onClick={handleAddTracks}
+              className="flex items-center justify-center gap-1 py-2 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition duration-150"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path></svg>
+              Add Tracks
+            </button>
+          </div>
 
-//           <div className="space-y-4">
-//             <h2 className="text-xl font-bold text-gray-700">Team Members and Skills</h2>
+          <div className="space-y-4">
+            <h2 className="text-xl font-bold text-gray-700">Team Members and Skills</h2>
 
-//             <div className="space-y-6">
-//               {formData.students.map((student, studentIndex) => (
-//                 <div key={studentIndex} className="p-4 border-2 border-indigo-200 rounded-lg bg-indigo-50 shadow-inner space-y-4">
+            <div className="space-y-6">
+              {formData.students.map((student, studentIndex) => (
+                <div key={studentIndex} className="p-4 border-2 border-indigo-200 rounded-lg bg-indigo-50 shadow-inner space-y-4">
 
-//                   <div className="flex justify-between items-center pb-2 border-b border-indigo-300">
-//                     <h4 className="text-lg font-semibold text-indigo-700">Student #{studentIndex + 1}</h4>
-//                     {formData.students.length > 1 && (
-//                       <button
-//                         type="button"
-//                         onClick={() => handleRemoveStudent(studentIndex)}
-//                         className="text-xs px-2 py-1 bg-red-400 text-white rounded-md hover:bg-red-500 transition duration-150"
-//                       >
-//                         Remove Student
-//                       </button>
-//                     )}
-//                   </div>
+                  <div className="flex justify-between items-center pb-2 border-b border-indigo-300">
+                    <h4 className="text-lg font-semibold text-indigo-700">Student #{studentIndex + 1}</h4>
+                    {formData.students.length > 1 && (
+                      <button
+                        type="button"
+                        onClick={() => handleRemoveStudent(studentIndex)}
+                        className="text-xs px-2 py-1 bg-red-400 text-white rounded-md hover:bg-red-500 transition duration-150"
+                      >
+                        Remove Student
+                      </button>
+                    )}
+                  </div>
 
-//                   <div>
-//                     <label className="block text-sm font-medium text-indigo-700 mb-1">Student Name</label>
-//                     <input
-//                       type="text"
-//                       required
-//                       placeholder="Student Name"
-//                       value={student.studentName}
-//                       onChange={(e) => handleStudentNameChange(e, studentIndex)}
-//                       className="w-full px-4 py-2 border border-indigo-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
-//                     />
-//                   </div>
+                  <div>
+                    <label className="block text-sm font-medium text-indigo-700 mb-1">Student Name</label>
+                    <input
+                      type="text"
+                      required
+                      placeholder="Student Name"
+                      value={student.studentName}
+                      onChange={(e) => handleStudentNameChange(e, studentIndex)}
+                      className="w-full px-4 py-2 border border-indigo-300 rounded-lg shadow-sm focus:ring-indigo-500 focus:border-indigo-500"
+                    />
+                  </div>
 
-//                   <div className="space-y-3 p-3 bg-white rounded-lg border border-indigo-100">
-//                     <h5 className="text-md font-medium text-indigo-700">Skills</h5>
-//                     {student.skills.map((skill, skillIndex) => (
-//                       <div key={skillIndex} className="flex gap-2 items-center">
-//                         <input
-//                           type="text"
-//                           required
-//                           name="skillName"
-//                           placeholder="Skill (e.g., React, Python)"
-//                           value={skill.skillName}
-//                           onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
-//                           className="flex-grow px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500"
-//                         />
-//                         <select
-//                           name="proficiency"
-//                           value={skill.proficiency}
-//                           onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
-//                           className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500 w-1/3"
-//                         >
-//                           {PROFICIENCY_LEVELS.map(level => (
-//                             <option key={level} value={level}>{level}</option>
-//                           ))}
-//                         </select>
-//                         {student.skills.length > 1 && (
-//                           <button
-//                             type="button"
-//                             onClick={() => handleRemoveSkill(studentIndex, skillIndex)}
-//                             className="text-xs px-2 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition duration-150 flex-shrink-0"
-//                           >
-//                             X
-//                           </button>
-//                         )}
-//                       </div>
-//                     ))}
-//                     <button
-//                       type="button"
-//                       onClick={() => handleAddSkill(studentIndex)}
-//                       className="mt-2 text-xs flex items-center gap-1 py-1 px-3 border border-transparent rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition duration-150"
-//                     >
-//                       + Add Skill
-//                     </button>
-//                   </div>
-//                 </div>
-//               ))}
-//             </div>
+                  <div className="space-y-3 p-3 bg-white rounded-lg border border-indigo-100">
+                    <h5 className="text-md font-medium text-indigo-700">Skills</h5>
+                    {student.skills.map((skill, skillIndex) => (
+                      <div key={skillIndex} className="flex gap-2 items-center">
+                        <input
+                          type="text"
+                          required
+                          name="skillName"
+                          placeholder="Skill (e.g., React, Python)"
+                          value={skill.skillName}
+                          onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
+                          className="flex-grow px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500"
+                        />
+                        <select
+                          name="proficiency"
+                          value={skill.proficiency}
+                          onChange={(e) => handleSkillChange(e, studentIndex, skillIndex)}
+                          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-purple-500 focus:border-purple-500 w-1/3"
+                        >
+                          {PROFICIENCY_LEVELS.map(level => (
+                            <option key={level} value={level}>{level}</option>
+                          ))}
+                        </select>
+                        {student.skills.length > 1 && (
+                          <button
+                            type="button"
+                            onClick={() => handleRemoveSkill(studentIndex, skillIndex)}
+                            className="text-xs px-2 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition duration-150 flex-shrink-0"
+                          >
+                            X
+                          </button>
+                        )}
+                      </div>
+                    ))}
+                    <button
+                      type="button"
+                      onClick={() => handleAddSkill(studentIndex)}
+                      className="mt-2 text-xs flex items-center gap-1 py-1 px-3 border border-transparent rounded-lg text-white bg-purple-600 hover:bg-purple-700 transition duration-150"
+                    >
+                      + Add Skill
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
 
-//             <button
-//               type="button"
-//               onClick={handleAddStudent}
-//               className="mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"
-//             >
-//               <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
-//               Add Team Member
-//             </button>
-//           </div>
+            <button
+              type="button"
+              onClick={handleAddStudent}
+              className="mt-4 w-full flex items-center justify-center gap-2 py-2 px-4 border border-transparent rounded-lg shadow-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150"
+            >
+              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"></path></svg>
+              Add Team Member
+            </button>
+          </div>
 
-//           <button
-//             type="submit"
-//             className="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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 mt-6"
-//           >
-//             Generate Idea
-//           </button>
-//         </form>
+          <button
+            type="submit"
+            className="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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-150 mt-6"
+          >
+            Generate Idea
+          </button>
+        </form>
 
-//       </div>
-//     </div>
-//   );
-// };
+      </div>
+    </div>
+  );
+};
 
-// export default FormPage;
\ No newline at end of file
+export default FormPage;
\ No newline at end of file
diff --git a/app/formfile/formTypes.ts b/app/formfile/formTypes.ts
index d2cb325..a4267eb 100644
--- a/app/formfile/formTypes.ts
+++ b/app/formfile/formTypes.ts
@@ -1,21 +1,21 @@
-// // Define Skill structure
-// export interface Skill {
-//   skillName: string;
-//   proficiency: string;
-// }
+// Define Skill structure
+export interface Skill {
+  skillName: string;
+  proficiency: string;
+}
 
-// // Define Student structure
-// export interface Student {
-//   studentName: string;
-//   skills: Skill[];
-// }
+// Define Student structure
+export interface Student {
+  studentName: string;
+  skills: Skill[];
+}
 
-// // Updated main form interface
-// export interface FormData {
-//   Hackathon: string;
-//   mainTheme: string; 
-//   tracksStack: string[];
-//   students: Student[]; // Array for dynamic students
-// }
+// Updated main form interface
+export interface FormData {
+  Hackathon: string;
+  mainTheme: string;
+  tracksStack: string[];
+  students: Student[]; // Array for dynamic students
+}
 
-// export const PROFICIENCY_LEVELS = ['Beginner', 'Intermediate', 'Expert', 'Master'];
\ No newline at end of file
+export const PROFICIENCY_LEVELS = ['Beginner', 'Intermediate', 'Expert', 'Master'];
\ No newline at end of file
diff --git a/app/formfile/generate-idea.ts b/app/formfile/generate-idea.ts
index be76f38..791b19f 100644
--- a/app/formfile/generate-idea.ts
+++ b/app/formfile/generate-idea.ts
@@ -1,71 +1,71 @@
-// import { GoogleGenerativeAI } from "@google/generative-ai";
-// import type { NextApiRequest, NextApiResponse } from 'next';
+import { GoogleGenerativeAI } from "@google/generative-ai";
+import type { NextApiRequest, NextApiResponse } from 'next';
 
-// // Initialize the Gemini Client with your API Key
-// // IMPORTANT: The GEMINI_API_KEY should be an environment variable.
-// const apiKey = process.env.GEMINI_API_KEY;
+// Initialize the Gemini Client with your API Key
+// IMPORTANT: The GEMINI_API_KEY should be an environment variable.
+const apiKey = process.env.GEMINI_API_KEY;
 
-// if(!apiKey){
-//     throw new Error("api key not found");
-// }
-// const ai = new GoogleGenerativeAI(apiKey);
+if (!apiKey) {
+  throw new Error("api key not found");
+}
+const ai = new GoogleGenerativeAI(apiKey);
 
 
 
-// // Define the handler function for the API route
-// export default async function handler(
-//   req: NextApiRequest,
-//   res: NextApiResponse
-// ) {
-//   // Only allow POST requests
-//   if (req.method !== 'POST') {
-//     return res.status(405).json({ error: 'Method Not Allowed' });
-//   }
+// Define the handler function for the API route
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  // Only allow POST requests
+  if (req.method !== 'POST') {
+    return res.status(405).json({ error: 'Method Not Allowed' });
+  }
 
-//   // Destructure the data sent from the frontend
-//   let { prompt, settings } = req.body;
-  
-//   // Basic validation
-//   if (!prompt || typeof prompt !== 'string') {
-//     return res.status(400).json({ error: 'Prompt is required' });
-//   }
+  // Destructure the data sent from the frontend
+  let { prompt, settings } = req.body;
 
-//   // Modify the prompt to instruct the AI to generate only the game, concept, and track
-//   prompt = `You're going to fill out a card base off the document.
-//   you will Generate the project short title. 
-//   you will list out the track you used  ${prompt}`;
+  // Basic validation
+  if (!prompt || typeof prompt !== 'string') {
+    return res.status(400).json({ error: 'Prompt is required' });
+  }
 
-//   try {
-//     // 1. Call the Gemini API using the correct method signature
-    
-//     const model = settings?.model || 'gemini-2.5-flash-lite';
-//     const generativeModel = ai.getGenerativeModel({ model });
+  // Modify the prompt to instruct the AI to generate only the game, concept, and track
+  prompt = `You're going to fill out a card base off the document.
+  you will Generate the project short title. 
+  you will list out the track you used  ${prompt}`;
 
-//    // 1. Define the generation configuration object
-//     const generationConfig = {
-//       temperature: settings?.temperature || 0.9,
-//       // The SDK property name for system instructions is 'systemInstruction'
-//       systemInstruction: settings?.sysTemInstructions, 
-//     };
+  try {
+    // 1. Call the Gemini API using the correct method signature
 
-//     // 2. Call generateContent with the single GenerateContentRequest object.
-//     const result = await generativeModel.generateContent({
-//       // contents must be an array of Content objects
-//       contents: [{
-//         role: "user", 
-//         parts: [{ text: prompt }]
-//       }], 
-      
-//       // The fixed property name that resolves the TypeScript error
-//       generationConfig: generationConfig, 
-//     });
+    const model = settings?.model || 'gemini-2.5-flash-lite';
+    const generativeModel = ai.getGenerativeModel({ model });
 
-//     // 2. Extract the response text
-//     // The result object now contains a property 'text' at the top level for simple text generation
-//     const geminiResponseText = result.response.text();    res.status(200).json({ response: geminiResponseText });
+    // 1. Define the generation configuration object
+    const generationConfig = {
+      temperature: settings?.temperature || 0.9,
+      // The SDK property name for system instructions is 'systemInstruction'
+      systemInstruction: settings?.sysTemInstructions,
+    };
 
-//   } catch (error) {
-//     console.error("Gemini API Error:", error);
-//     res.status(500).json({ error: 'Failed to generate idea from AI.' });
-//   }
-// }
+    // 2. Call generateContent with the single GenerateContentRequest object.
+    const result = await generativeModel.generateContent({
+      // contents must be an array of Content objects
+      contents: [{
+        role: "user",
+        parts: [{ text: prompt }]
+      }],
+
+      // The fixed property name that resolves the TypeScript error
+      generationConfig: generationConfig,
+    });
+
+    // 2. Extract the response text
+    // The result object now contains a property 'text' at the top level for simple text generation
+    const geminiResponseText = result.response.text(); res.status(200).json({ response: geminiResponseText });
+
+  } catch (error) {
+    console.error("Gemini API Error:", error);
+    res.status(500).json({ error: 'Failed to generate idea from AI.' });
+  }
+}
diff --git a/app/formfile/page.tsx b/app/formfile/page.tsx
index 91678b7..3f92abe 100644
--- a/app/formfile/page.tsx
+++ b/app/formfile/page.tsx
@@ -1,172 +1,172 @@
-// "use client";
-// import React, { useState, useEffect, useCallback } from "react";
-// import FormPage from './FormPage';
-// import { ChatSetting } from "../exportType/types";
-// import { FormData, PROFICIENCY_LEVELS } from './formTypes';
+"use client";
+import React, { useState, useEffect, useCallback } from "react";
+import FormPage from './FormPage';
+import { ChatSetting } from "../exportType/types";
+import { FormData, PROFICIENCY_LEVELS } from './formTypes';
 
-// // --- Helper function to get default form data ---
-// const getDefaultFormData = (): FormData => ({
-//   Hackathon: '',
-//   mainTheme: '',
-//   tracksStack: [''],
-//   students: [{ 
-//     studentName: '', 
-//     skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
-//   }],
-// });
+// --- Helper function to get default form data ---
+const getDefaultFormData = (): FormData => ({
+  Hackathon: '',
+  mainTheme: '',
+  tracksStack: [''],
+  students: [{
+    studentName: '',
+    skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
+  }],
+});
 
-// // --- New Initializer Function ---
-// const getInitialState = () => {
-//   if (typeof window === 'undefined') {
-//     return { 
-//       data: getDefaultFormData(), 
-//       showForm: true, 
-//       runEffect: false 
-//     };
-//   }
-//   const storedFormData = localStorage.getItem('formData');
-//   if (storedFormData) {
-//     localStorage.removeItem('formData');
-//     return {
-//       data: JSON.parse(storedFormData) as FormData,
-//       showForm: false,
-//       runEffect: true,
-//     };
-//   }
-//   return { 
-//     data: getDefaultFormData(), 
-//     showForm: true, 
-//     runEffect: false 
-//   };
-// };
+// --- New Initializer Function ---
+const getInitialState = () => {
+  if (typeof window === 'undefined') {
+    return {
+      data: getDefaultFormData(),
+      showForm: true,
+      runEffect: false
+    };
+  }
+  const storedFormData = localStorage.getItem('formData');
+  if (storedFormData) {
+    localStorage.removeItem('formData');
+    return {
+      data: JSON.parse(storedFormData) as FormData,
+      showForm: false,
+      runEffect: true,
+    };
+  }
+  return {
+    data: getDefaultFormData(),
+    showForm: true,
+    runEffect: false
+  };
+};
 
-// // FIX 1 (Memoization): Moved settings OUTSIDE the component.
-// // This makes it a true constant.
-// const AI_SETTINGS: ChatSetting = {
-//   temperature: 1,
-//   model: "gemini-2.5-pro",
-//   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
-// **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.]`,
-// };
+// FIX 1 (Memoization): Moved settings OUTSIDE the component.
+// This makes it a true constant.
+const AI_SETTINGS: ChatSetting = {
+  temperature: 1,
+  model: "gemini-2.5-pro",
+  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
+**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.]`,
+};
 
-// // ------------------------------------------------
+// ------------------------------------------------
 
-// export default function Home() {
-  
-//   const [initialState] = useState(getInitialState);
-//   const [showForm, setShowForm] = useState(initialState.showForm);
-//   const [formData, setFormData] = useState<FormData>(initialState.data);
-//   const [ideaResponse, setIdeaResponse] = useState<string>("");
-  
-//   // The 'settings' state [useState] is now removed from here.
+export default function Home() {
 
-//   const handleFormSubmitFromFormPage = (submittedData: FormData) => {
-//     setFormData(submittedData);
-//     setShowForm(false);
-//     generateIdeas(submittedData);
-//   };
+  const [initialState] = useState(getInitialState);
+  const [showForm, setShowForm] = useState(initialState.showForm);
+  const [formData, setFormData] = useState<FormData>(initialState.data);
+  const [ideaResponse, setIdeaResponse] = useState<string>("");
 
-//   // Wrapped generateIdeas in useCallback
-//   const generateIdeas = useCallback(async (dataToProcess: FormData) => {
-//     // 1. Data Cleaning
-//     const submissionData: FormData = {
-//         ...dataToProcess,
-//         tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
-//         students: dataToProcess.students
-//             .map(student => ({
-//                 ...student,
-//                 skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
-//             }))
-//             .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
-//     };
+  // The 'settings' state [useState] is now removed from here.
 
-//     // 2. Prompt Construction
-//     const prompt = `
-//     Hackathon: ${submissionData.Hackathon}
-//     Main Theme: ${submissionData.mainTheme}
-//     Required Tracks Stack: ${submissionData.tracksStack.join(', ')}
-//     Team Members and Skills: ${submissionData.students.map(s => 
-//         `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
-//     ).join('; ')}
+  const handleFormSubmitFromFormPage = (submittedData: FormData) => {
+    setFormData(submittedData);
+    setShowForm(false);
+    generateIdeas(submittedData);
+  };
+
+  // Wrapped generateIdeas in useCallback
+  const generateIdeas = useCallback(async (dataToProcess: FormData) => {
+    // 1. Data Cleaning
+    const submissionData: FormData = {
+      ...dataToProcess,
+      tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
+      students: dataToProcess.students
+        .map(student => ({
+          ...student,
+          skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
+        }))
+        .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
+    };
+
+    // 2. Prompt Construction
+    const prompt = `
+    Hackathon: ${submissionData.Hackathon}
+    Main Theme: ${submissionData.mainTheme}
+    Required Tracks Stack: ${submissionData.tracksStack.join(', ')}
+    Team Members and Skills: ${submissionData.students.map(s =>
+      `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
+    ).join('; ')}
     
-//     Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
+    Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
 
-//     // 3. API Call
-//     try {
-//         setIdeaResponse("Generating ideas... Please wait.");
-        
-//         const response = await fetch("/api/generate-idea", {
-//             method: "POST",
-//             headers: { "Content-Type": "application/json" },
-//             body: JSON.stringify({
-//                 prompt: prompt,
-//                 settings: AI_SETTINGS, // Use the constant
-//             }),
-//         });
+    // 3. API Call
+    try {
+      setIdeaResponse("Generating ideas... Please wait.");
 
-//         const data = await response.json();
-//         if (data.error || !response.ok) {
-//             console.error("AI Error:", data.error);
-//             setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
-//             return;
-//         }
-//         setIdeaResponse(data.response);
-        
-//     // FIX 2 (Unexpected any): Changed 'any' to 'unknown' and added a type check.
-//     } catch (error: unknown) {
-//         console.error("Request Failed:", error);
-//         let errorMessage = "A network error occurred. Please try again.";
-//         if (error instanceof Error) {
-//             errorMessage += ` Details: ${error.message}`;
-//         }
-//         setIdeaResponse(errorMessage);
-//     }
-//     // FIX 3 (Linter): Disable the faulty memoization rule.
-//     // The empty array is correct because setIdeaResponse is a stable state setter.
-//     // eslint-disable-next-line react-hooks/preserve-manual-memoization
-//   }, []);
+      const response = await fetch("/api/generate-idea", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          prompt: prompt,
+          settings: AI_SETTINGS, // Use the constant
+        }),
+      });
 
-//   // Replaced useEffect
-//   useEffect(() => {
-//     if (initialState.runEffect) {
-//       generateIdeas(initialState.data);
-//     }
-//   }, [initialState, generateIdeas]);
+      const data = await response.json();
+      if (data.error || !response.ok) {
+        console.error("AI Error:", data.error);
+        setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
+        return;
+      }
+      setIdeaResponse(data.response);
 
-//   // --- JSX Rendering ---
-//   return (
-//     <main className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
-//       <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
-//         {showForm ? (
-//           <FormPage onFormSubmit={handleFormSubmitFromFormPage} />
-//         ) : (
-//           <>
-//             <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>
-//             <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"
-//             >
-//               Go Back to Form
-//             </button>
-//           </>
-//         )}
-//       </div>
-//     </main>
-//   );
-// }
\ No newline at end of file
+      // FIX 2 (Unexpected any): Changed 'any' to 'unknown' and added a type check.
+    } catch (error: unknown) {
+      console.error("Request Failed:", error);
+      let errorMessage = "A network error occurred. Please try again.";
+      if (error instanceof Error) {
+        errorMessage += ` Details: ${error.message}`;
+      }
+      setIdeaResponse(errorMessage);
+    }
+    // FIX 3 (Linter): Disable the faulty memoization rule.
+    // The empty array is correct because setIdeaResponse is a stable state setter.
+    // eslint-disable-next-line react-hooks/preserve-manual-memoization
+  }, []);
+
+  // Replaced useEffect
+  useEffect(() => {
+    if (initialState.runEffect) {
+      generateIdeas(initialState.data);
+    }
+  }, [initialState, generateIdeas]);
+
+  // --- JSX Rendering ---
+  return (
+    <main className="min-h-screen bg-gray-50 flex items-start justify-center p-4 sm:p-6 font-inter">
+      <div className="w-full max-w-2xl bg-white p-8 shadow-2xl rounded-xl mt-8">
+        {showForm ? (
+          <FormPage onFormSubmit={handleFormSubmitFromFormPage} />
+        ) : (
+          <>
+            <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>
+            <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"
+            >
+              Go Back to Form
+            </button>
+          </>
+        )}
+      </div>
+    </main>
+  );
+}
\ No newline at end of file
diff --git a/app/globals.css b/app/globals.css
index 28e3220..0091de0 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -39,10 +39,10 @@ body {
   --color-foreground: var(--foreground);
 
   /* 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);
@@ -60,12 +60,17 @@ body {
 body {
   background: var(--background);
   color: var(--foreground);
-  
+
   /* 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 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-header);
 }
\ No newline at end of file
diff --git a/app/page.tsx b/app/page.tsx
index 5bcb886..c297bb6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,46 +1,45 @@
 import Image from "next/image";
-import ProtectedNavButton from "./components/ProtectedNavButton";
 
 export default function Home() {
-  return (
-    <div
-      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">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex items-center gap-4">
-          <a href="/signin" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
-            Sign in
-          </a>
-          <a href="/register" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
-            Register
-          </a>
-        </div>
-      </header>
+  return (
+    <div
+      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">
+        <Image
+          className="dark:invert"
+          src="/next.svg"
+          alt="Next.js logo"
+          width={100}
+          height={20}
+          priority
+        />
+        <div className="flex items-center gap-4">
+          <a href="/signin" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+            Sign in
+          </a>
+          <a href="/register" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+            Register
+          </a>
+        </div>
+      </header>
 
-      <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">
-            <h1
-              style = {{color:"#173C46"}} 
-              className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50"
-            >
-              Welcome! This is HackSpark
-            </h1>
-            <p
-              style = {{color:"#173C46"}} 
-              className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400"
-            >
-              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!{" "}
-              {/* <a
+      <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">
+            <h1
+              style={{ color: "#173C46" }}
+              className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50"
+            >
+              Welcome! This is HackSpark
+            </h1>
+            <p
+              style={{ color: "#173C46" }}
+              className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400"
+            >
+              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!{" "}
+              {/* <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"
               >
@@ -53,113 +52,113 @@ export default function Home() {
               >
                 Learning
               </a>{" "} */}
-              {/* center. */}
-            </p>
+              {/* center. */}
+            </p>
 
-            {/* <ProtectedNavButton>Get Started</ProtectedNavButton> */}
-            <button
-              style={{ backgroundColor: "#173C46", color: "white" }}
-              className="px-4 py-1.5 rounded-md shadow-md font-semibold hover:opacity-90 transition-opacity"
-            >
-              {/* {children} */}
-              Get Started
-            </button>
-          </div>
+            {/* <ProtectedNavButton>Get Started</ProtectedNavButton> */}
+            <button
+              style={{ backgroundColor: "#173C46", color: "white" }}
+              className="px-4 py-1.5 rounded-md shadow-md font-semibold hover:opacity-90 transition-opacity"
+            >
+              {/* {children} */}
+              Get Started
+            </button>
+          </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"
-              style={{ backgroundColor: "#173C46"}}
-            >
-              Image Placeholder
-            </div>
-          </div>
-          </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"
+              style={{ backgroundColor: "#173C46" }}
+            >
+              Image Placeholder
+            </div>
+          </div>
+        </div>
 
-        <div
-          style={{backgroundColor: "#DEE5D4"}}
-          className="w-full rounded-xl mt-32"
-        >
-          {/* <section className="mt-32 w-full flex flex-col items-start gap-12"> */}
-          <section className="px-16 py-18 flex flex-col items-start gap-12 max-w-[1200px] mx-auto">
-            {/* <div> */}
-              <h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9">
-                Guide:
-              </h2>
-            {/* </div> */}
+        <div
+          style={{ backgroundColor: "#DEE5D4" }}
+          className="w-full rounded-xl mt-32"
+        >
+          {/* <section className="mt-32 w-full flex flex-col items-start gap-12"> */}
+          <section className="px-16 py-18 flex flex-col items-start gap-12 max-w-[1200px] mx-auto">
+            {/* <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-center justify-center gap-8 w-full">
-              <div 
-                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
-                style={{ backgroundColor: "#B8C0AD"}}
-              >
-                <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-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500"
-                  style={{ backgroundColor: "#B8C0AD"}}
-                >
-                  Image Placeholder
-                </div>
-              </div>
-            </div>
-            
-            <div className="flex flex-col sm:flex-row items-center justify-between gap-8 w-full mt-30">
-              <div className="sm:w-1/2 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"
-                  style={{ backgroundColor: "#B8C0AD"}}
-                >
-                  Image Placeholder
-                </div>
-              </div>
-              <div className="flex w-full justify-center sm:justify-center">
-                <div 
-                  className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
-                  style={{ backgroundColor: "#B8C0AD"}}
-                >
-                  <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-center justify-center gap-8 w-full">
+              <div
+                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                style={{ backgroundColor: "#B8C0AD" }}
+              >
+                <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-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500"
+                  style={{ backgroundColor: "#B8C0AD" }}
+                >
+                  Image Placeholder
+                </div>
+              </div>
+            </div>
 
-            <div className="flex flex-col sm:flex-row items-center justify-center gap-8 w-full mt-30">
-              <div 
-                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
-                style={{ backgroundColor: "#B8C0AD"}}
-              >
-                <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-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500"
-                  style={{ backgroundColor: "#B8C0AD"}}
-                >
-                    Image Placeholder
-                </div>
-              </div>
-            </div>
-          </section>
-        </div>
-      </main>
-    </div>
-  );
+            <div className="flex flex-col sm:flex-row items-center justify-between gap-8 w-full mt-30">
+              <div className="sm:w-1/2 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"
+                  style={{ backgroundColor: "#B8C0AD" }}
+                >
+                  Image Placeholder
+                </div>
+              </div>
+              <div className="flex w-full justify-center sm:justify-center">
+                <div
+                  className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                  style={{ backgroundColor: "#B8C0AD" }}
+                >
+                  <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-center justify-center gap-8 w-full mt-30">
+              <div
+                className="w-full max-w-xl rounded-xl h-[200px] p-6 flex flex-col justify-center"
+                style={{ backgroundColor: "#B8C0AD" }}
+              >
+                <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-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500"
+                  style={{ backgroundColor: "#B8C0AD" }}
+                >
+                  Image Placeholder
+                </div>
+              </div>
+            </div>
+          </section>
+        </div>
+      </main>
+    </div>
+  );
 }
 
 
@@ -287,4 +286,4 @@ export default function Home() {
 //      </main>
 //    </div>
 //  );
-// } fix the formatting of this page, I want the divs to be more centered and the divs below the button to be equal size 
\ No newline at end of file
+// }
\ No newline at end of file
diff --git a/app/utils/component/ui/ChatInput.tsx b/app/utils/component/ui/ChatInput.tsx
index 53c5bf8..e7d5cb2 100644
--- a/app/utils/component/ui/ChatInput.tsx
+++ b/app/utils/component/ui/ChatInput.tsx
@@ -17,8 +17,8 @@ export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
 
     const handleSend = () => {
         if (message.trim()) {
-        onSend(message.trim());
-        setMessage("");
+            onSend(message.trim());
+            setMessage("");
         }
     };
 
@@ -34,62 +34,61 @@ export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
 
     return (
         <div className="fixed  bottom-0 left-0 right-0 flex flex-col max-w-4xl  mx-auto w-full">
-        <div
-            className={`
+            <div
+                className={`
                 flex items-center border border-black/10 p-3 mx-4   rounded-t-3xl
                 bg-white 
                 shadow-md transition-all duration-200
         
             `}
-        >
-        
-        <div className="relative flex-1 mx-2">
-            <textarea
-                className="w-full px-3 py-2 bg-transparent border-none focus:outline-none"
-                placeholder="Type a message..."
-                value={message}
-                onChange={handleChange}
-                onKeyDown={handleKeyPress}
-            />
-
-            {message && (
-                <button
-                    className="absolute right-0 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 "
-                    onClick={handleClear}
-                    aria-label="Clear input"
-                >
-                    <X size={16} />
-                </button>
-            )}
-        </div>
-
-        
-        <div className="flex items-center">
-        
-            <button
-                className="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-gray-100 0 mr-1"
-                onClick={onOpenSettings}
-                aria-label="Open settings"
             >
-                <Settings size={20} />
-            </button>
 
-            <button
-                className={`
+                <div className="relative flex-1 mx-2">
+                    <textarea
+                        className="w-full px-3 py-2 bg-transparent border-none focus:outline-none"
+                        placeholder="Type a message..."
+                        value={message}
+                        onChange={handleChange}
+                        onKeyDown={handleKeyPress}
+                    />
+
+                    {message && (
+                        <button
+                            className="absolute right-0 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 "
+                            onClick={handleClear}
+                            aria-label="Clear input"
+                        >
+                            <X size={16} />
+                        </button>
+                    )}
+                </div>
+
+
+                <div className="flex items-center">
+
+                    <button
+                        className="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-gray-100 0 mr-1"
+                        onClick={onOpenSettings}
+                        aria-label="Open settings"
+                    >
+                        <Settings size={20} />
+                    </button>
+
+                    <button
+                        className={`
                     p-2 rounded-full transition-all
-                    ${
-                    message.trim()
-                    ? "bg-purple-600 text-white hover:bg-purple-700"
-                    : "bg-gray-200 text-gray-400  cursor-not-allowed"
-                    }
+                    ${message.trim()
+                                ? "bg-purple-600 text-white hover:bg-purple-700"
+                                : "bg-gray-200 text-gray-400  cursor-not-allowed"
+                            }
                 `}
-                onClick={handleSend}
-                disabled={!message.trim()}
-                aria-label="Send message"
-                >
-                <Send size={20} />
-            </button>
-            </div>
+                        onClick={handleSend}
+                        disabled={!message.trim()}
+                        aria-label="Send message"
+                    >
+                        <Send size={20} />
+                    </button>
+                </div>
             </div>
         </div>
     );
diff --git a/app/utils/component/ui/MessageWindow.tsx b/app/utils/component/ui/MessageWindow.tsx
index 6413cb3..e78839d 100644
--- a/app/utils/component/ui/MessageWindow.tsx
+++ b/app/utils/component/ui/MessageWindow.tsx
@@ -1,30 +1,30 @@
 "use client";
 import { useRef, useEffect } from "react";
 import { ChatHistory } from "@/app/exportType/types";
-import {User, Bot} from "lucide-react"
+import { User, Bot } from "lucide-react"
 
-interface MessageWindowProps{
-    history :ChatHistory
+interface MessageWindowProps {
+    history: ChatHistory
 }
 
-export default function MessageWindow({history}:MessageWindowProps){
+export default function MessageWindow({ history }: MessageWindowProps) {
     const messageEndRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() =>{
-        messageEndRef.current?.scrollIntoView({behavior:"smooth"});
+    useEffect(() => {
+        messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }, [history]);
 
-    return(
+    return (
         <div className="flex-1 p-3 overflow-y-auto">
             <div className="max-w-3xl mx-auto">
-                {history.map((msg,index)=>{
+                {history.map((msg, index) => {
                     const isUser = msg.role === "user"
 
                     return (
-                        <div 
-                        key={index} 
-                        className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
-                            {!isUser &&(
+                        <div
+                            key={index}
+                            className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
+                            {!isUser && (
                                 <div className="mr-2">
                                     <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray">
                                         <Bot size={15} className="text-gray-700">
@@ -41,20 +41,20 @@ export default function MessageWindow({history}:MessageWindowProps){
                                     <span key={idx}>{part.text}</span>))}
                                 </div>
                             </div>
-                        {isUser && (
-                            <div className="ml-2">
-                                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500">
-                                    <User size={16} className="text-white" />
+                            {isUser && (
+                                <div className="ml-2">
+                                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500">
+                                        <User size={16} className="text-white" />
+                                    </div>
                                 </div>
-                            </div>
-                        )}
+                            )}
                         </div>
-                        );
-                    })}
-        
-        {/* Invisible element to help scroll to bottom */}
-        <div ref={messageEndRef} />
+                    );
+                })}
+
+                {/* Invisible element to help scroll to bottom */}
+                <div ref={messageEndRef} />
+            </div>
         </div>
-    </div>
     );
 }
\ No newline at end of file
diff --git a/app/utils/geminiHelper.ts b/app/utils/geminiHelper.ts
index 6615637..18987fe 100644
--- a/app/utils/geminiHelper.ts
+++ b/app/utils/geminiHelper.ts
@@ -1,42 +1,42 @@
-// import { GoogleGenerativeAI } from "@google/generative-ai";
-// import { ChatHistory, GenerateConfig,ChatSetting } from "../exportType/types";
+import { GoogleGenerativeAI } from "@google/generative-ai";
+import { ChatHistory, GenerateConfig, ChatSetting } from "../exportType/types";
 
-// const apiKey = process.env.GEMINI_API_KEY;
+const apiKey = process.env.GEMINI_API_KEY;
 
-// if(!apiKey){
-//     throw new Error("api key not found");
-// }
+if (!apiKey) {
+    throw new Error("api key not found");
+}
 
-// const genAI = new GoogleGenerativeAI(apiKey);
+const genAI = new GoogleGenerativeAI(apiKey);
 
-// export async function chatToGemini(
-//     userMessage:string ,
-//     history:ChatHistory, 
-//     settings:ChatSetting
-// ):Promise<string>{
-//         const model = genAI.getGenerativeModel({
-//             model:settings.model || "gemini-2.5-flash",
-//             systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
-//             });
-        
-//         const generationConfig:GenerateConfig = {
-//             temperature : settings.temperature || 1,
-//             topP : 0.9,
-//             responseMimeType: "text/plain",
-//             maxOutputTokens: 1900, // Increased to allow for longer responses
-//         }
+export async function chatToGemini(
+    userMessage: string,
+    history: ChatHistory,
+    settings: ChatSetting
+): Promise<string> {
+    const model = genAI.getGenerativeModel({
+        model: settings.model || "gemini-2.5-flash",
+        systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
+    });
 
-//         const chatSession = model.startChat({
-//             generationConfig,
-//             history
-//         })
+    const generationConfig: GenerateConfig = {
+        temperature: settings.temperature || 1,
+        topP: 0.9,
+        responseMimeType: "text/plain",
+        maxOutputTokens: 1900, // Increased to allow for longer responses
+    }
 
-//         try {
-//             const result = await chatSession.sendMessage(userMessage);
-//             return result.response.text();
-//         }
-//         catch(error){
-//             console.error(error)
-//             throw error
-//         }
-//     }
\ No newline at end of file
+    const chatSession = model.startChat({
+        generationConfig,
+        history
+    })
+
+    try {
+        const result = await chatSession.sendMessage(userMessage);
+        return result.response.text();
+    }
+    catch (error) {
+        console.error(error)
+        throw error
+    }
+}
\ No newline at end of file

From 73668377bf212ea34dbb5623c2b857738bacc839 Mon Sep 17 00:00:00 2001
From: Ivan Rudik <ivanrudik42@gmail.com>
Date: Sun, 9 Nov 2025 05:42:16 +0000
Subject: [PATCH 3/4] got rid of the excess whitespaces and added the
 maxOutputTokens into the GenerateConfig in the types.ts

---
 app/Dashboard/page.tsx                   |  10 +-
 app/api/chat/route.ts                    |  18 +-
 app/api/generate-idea/route.ts           |  14 +-
 app/cards/page.tsx                       |   2 +-
 app/chatbot/page.tsx                     |  36 ++--
 app/exportType/types.ts                  |  25 +--
 app/formfile/FormPage.tsx                |  20 +--
 app/formfile/formTypes.ts                |   2 +-
 app/formfile/generate-idea.ts            |  22 +--
 app/formfile/page.tsx                    | 138 +++++++-------
 app/globals.css                          |  23 ++-
 app/layout.tsx                           |   2 -
 app/page.tsx                             | 220 +++++++++++------------
 app/utils/component/ui/ChatInput.tsx     |  97 +++++-----
 app/utils/component/ui/MessageWindow.tsx |  48 ++---
 app/utils/geminiHelper.ts                |  60 +++----
 16 files changed, 366 insertions(+), 371 deletions(-)

diff --git a/app/Dashboard/page.tsx b/app/Dashboard/page.tsx
index a3a4eba..dd3e280 100644
--- a/app/Dashboard/page.tsx
+++ b/app/Dashboard/page.tsx
@@ -21,9 +21,8 @@ export default function Dashboard() {
   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`}
+        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 && (
@@ -41,9 +40,8 @@ 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 p-4 gap-3 text-zinc-700 dark:text-zinc-300 transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
+            }`}
         >
           <Link
             href="/"
diff --git a/app/api/chat/route.ts b/app/api/chat/route.ts
index eeb8b31..6c3e35a 100644
--- a/app/api/chat/route.ts
+++ b/app/api/chat/route.ts
@@ -5,20 +5,20 @@ import { ChatHistory, ChatSetting } from "@/app/exportType/types";
 
 export async function POST(request: Request) {
   try {
-    const { userMessage, history , settings } = await request.json() as {
-      userMessage :string;
-      history : ChatHistory;
-      settings : ChatSetting;
+    const { userMessage, history, settings } = await request.json() as {
+      userMessage: string;
+      history: ChatHistory;
+      settings: ChatSetting;
     };
 
-    const aiResponse = await chatToGemini(userMessage , history, settings);
-    return NextResponse.json({response : aiResponse}); 
+    const aiResponse = await chatToGemini(userMessage, history, settings);
+    return NextResponse.json({ response: aiResponse });
   }
-  catch(error){
+  catch (error) {
     console.error(error);
     return NextResponse.json(
-      {error: "Error with the model response "},
-      {status : 500}
+      { error: "Error with the model response " },
+      { status: 500 }
     );
   }
 }
diff --git a/app/api/generate-idea/route.ts b/app/api/generate-idea/route.ts
index c135cd4..9a2a9f4 100644
--- a/app/api/generate-idea/route.ts
+++ b/app/api/generate-idea/route.ts
@@ -6,18 +6,18 @@ import { ChatSetting } from "@/app/exportType/types";
 export async function POST(request: Request) {
   try {
     const { prompt, settings } = await request.json() as {
-      prompt :string;
-      settings : ChatSetting;
+      prompt: string;
+      settings: ChatSetting;
     };
 
-    const aiResponse = await chatToGemini(prompt , [], settings);
-    return NextResponse.json({response : aiResponse}); 
+    const aiResponse = await chatToGemini(prompt, [], settings);
+    return NextResponse.json({ response: aiResponse });
   }
-  catch(error){
+  catch (error) {
     console.error(error);
     return NextResponse.json(
-      {error: "Error with the model response "},
-      {status : 500}
+      { error: "Error with the model response " },
+      { status: 500 }
     );
   }
 }
diff --git a/app/cards/page.tsx b/app/cards/page.tsx
index 0da2c42..37faf57 100644
--- a/app/cards/page.tsx
+++ b/app/cards/page.tsx
@@ -58,7 +58,7 @@ const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) =>
   return (
     <div
       className="grid h-screen w-full place-items-center bg-orange-100"
-    //   -gradient-to-tr from-orange-200 to-orange-100
+      //   -gradient-to-tr from-orange-200 to-orange-100
       style={{
         backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
           viewBox='0 0 32 32' width='32' height='32' fill='none'
diff --git a/app/chatbot/page.tsx b/app/chatbot/page.tsx
index 363f852..80f21ae 100644
--- a/app/chatbot/page.tsx
+++ b/app/chatbot/page.tsx
@@ -4,16 +4,16 @@ import { useState, useEffect, useRef, useCallback } from "react";
 import { useSearchParams } from "next/navigation";
 import ChatInput from "../utils/component/ui/ChatInput";
 import MessageWindow from "../utils/component/ui/MessageWindow";
-import { ChatHistory, ChatSetting, Message , MessageRole } from "@/app/exportType/types";
+import { ChatHistory, ChatSetting, Message, MessageRole } from "@/app/exportType/types";
 
-export default function Home(){
+export default function Home() {
   const [history, setHistory] = useState<ChatHistory>([])
   const historyRef = useRef<ChatHistory>([]); // Create a ref for history
   const [settings] = useState<ChatSetting>({
-    temperature:1,
-    model:"gemini-2.5-pro",
-    sysTemInstructions:"you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
-    
+    temperature: 1,
+    model: "gemini-2.5-pro",
+    sysTemInstructions: "you are a ai helper. Your goal is to expand the project idea and interact with the user on any problem or question they have with the project. You are not allow to code the project for them and stray away from your job"
+
   });
   const searchParams = useSearchParams();
   const initialMessageSent = useRef(false);
@@ -22,22 +22,22 @@ export default function Home(){
     historyRef.current = history; // Keep the ref updated with the latest history
   }, [history]);
 
-  const handleSend = useCallback(async(message:string)=>{
-    const newUserMessage:Message = {
-      role:"user",
-      parts:[{text:message}],
+  const handleSend = useCallback(async (message: string) => {
+    const newUserMessage: Message = {
+      role: "user",
+      parts: [{ text: message }],
     };
 
     setHistory(prevHistory => {
       const currentHistory = [...prevHistory, newUserMessage];
-      
+
       const sendApiRequest = async () => {
-        try{
+        try {
           const response = await fetch("/api/chat", {
             method: "POST",
             headers: {
-                "Content-Type": "application/json",
-              },
+              "Content-Type": "application/json",
+            },
             body: JSON.stringify({
               userMessage: message,
               history: historyRef.current, // Use the ref for history
@@ -58,8 +58,8 @@ export default function Home(){
           };
 
           setHistory(prevHistory => [...prevHistory, aiMessage]);
-          
-        } 
+
+        }
         catch (error) {
           console.error("Request Failed:", error);
         }
@@ -77,7 +77,7 @@ export default function Home(){
 
       if (title && summary) {
         const message = `Explain the project titled '${title}' with the summary '${summary}' in detail, and suggest suitable roles for a team working on it.`;
-        
+
         const newUserMessage: Message = {
           role: "user",
           parts: [{ text: message }],
@@ -129,7 +129,7 @@ export default function Home(){
   return (
     <div className="flex flex-col py-32">
       <MessageWindow history={history} />
-      <ChatInput onSend={handleSend} onOpenSettings={() => {}} />
+      <ChatInput onSend={handleSend} onOpenSettings={() => { }} />
     </div>
   );
 }
\ No newline at end of file
diff --git a/app/exportType/types.ts b/app/exportType/types.ts
index eca26ad..7281483 100644
--- a/app/exportType/types.ts
+++ b/app/exportType/types.ts
@@ -4,27 +4,28 @@ export type MessagePart = {
     text: string;
 }
 
-export interface Message{
+export interface Message {
     role: MessageRole;
-    parts:MessagePart[];
+    parts: MessagePart[];
 }
 export type ChatHistory = Message[];
 
-export interface GenerateConfig{
-    temperature : number;
-    topP : number;
-    responseMimeType : string;
+export interface GenerateConfig {
+    temperature: number;
+    topP: number;
+    responseMimeType: string;
+    maxOutputTokens?: number;
 }
 
-export interface ChatSetting{
-    temperature :number;
+export interface ChatSetting {
+    temperature: number;
     model: string;
     sysTemInstructions: string;
 }
 
 export interface CardData {
-  id: number;
-  title: string;
-  tracks: string[];
-  summary: string;
+    id: number;
+    title: string;
+    tracks: string[];
+    summary: string;
 }
\ No newline at end of file
diff --git a/app/formfile/FormPage.tsx b/app/formfile/FormPage.tsx
index 8059518..d9b8960 100644
--- a/app/formfile/FormPage.tsx
+++ b/app/formfile/FormPage.tsx
@@ -2,9 +2,9 @@
 
 import React, { useState } from "react";
 
-import { 
-    FormData, 
-    PROFICIENCY_LEVELS 
+import {
+  FormData,
+  PROFICIENCY_LEVELS
 } from './formTypes'; // Ensure path is correct
 
 interface FormPageProps {
@@ -16,9 +16,9 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
     Hackathon: '',
     mainTheme: '',
     tracksStack: [''],
-    students: [{ 
-      studentName: '', 
-      skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }] 
+    students: [{
+      studentName: '',
+      skills: [{ skillName: '', proficiency: PROFICIENCY_LEVELS[1] }]
     }],
   });
 
@@ -121,12 +121,12 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
               <label htmlFor="hackathonName" className="block text-sm font-medium text-gray-700 mb-1">
                 Hackathon Name
               </label>
-              <input 
+              <input
                 id="hackathonName"
                 required
                 type="text"
                 placeholder="e.g., Google Code Jam"
-                name="Hackathon" 
+                name="Hackathon"
                 value={formData.Hackathon}
                 onChange={handleChange}
                 className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
@@ -142,7 +142,7 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
                 required
                 type="text"
                 placeholder="e.g., Sustainability or AI Ethics"
-                name="mainTheme" 
+                name="mainTheme"
                 value={formData.mainTheme}
                 onChange={handleChange}
                 className="mt-1 block w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 transition duration-150"
@@ -161,7 +161,7 @@ const FormPage: React.FC<FormPageProps> = ({ onFormSubmit }) => {
                     type="text"
                     required
                     placeholder={`Tracks #${index + 1}`}
-                    name={`tracksStack-${index}`} 
+                    name={`tracksStack-${index}`}
                     value={tracks}
                     onChange={(e) => handleTracksChange(e, index)}
                     className="flex-grow px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-green-500 focus:border-green-500 transition duration-150"
diff --git a/app/formfile/formTypes.ts b/app/formfile/formTypes.ts
index e3d23c6..a4267eb 100644
--- a/app/formfile/formTypes.ts
+++ b/app/formfile/formTypes.ts
@@ -13,7 +13,7 @@ export interface Student {
 // Updated main form interface
 export interface FormData {
   Hackathon: string;
-  mainTheme: string; 
+  mainTheme: string;
   tracksStack: string[];
   students: Student[]; // Array for dynamic students
 }
diff --git a/app/formfile/generate-idea.ts b/app/formfile/generate-idea.ts
index c9f1f3f..791b19f 100644
--- a/app/formfile/generate-idea.ts
+++ b/app/formfile/generate-idea.ts
@@ -5,8 +5,8 @@ import type { NextApiRequest, NextApiResponse } from 'next';
 // IMPORTANT: The GEMINI_API_KEY should be an environment variable.
 const apiKey = process.env.GEMINI_API_KEY;
 
-if(!apiKey){
-    throw new Error("api key not found");
+if (!apiKey) {
+  throw new Error("api key not found");
 }
 const ai = new GoogleGenerativeAI(apiKey);
 
@@ -24,7 +24,7 @@ export default async function handler(
 
   // Destructure the data sent from the frontend
   let { prompt, settings } = req.body;
-  
+
   // Basic validation
   if (!prompt || typeof prompt !== 'string') {
     return res.status(400).json({ error: 'Prompt is required' });
@@ -37,32 +37,32 @@ export default async function handler(
 
   try {
     // 1. Call the Gemini API using the correct method signature
-    
+
     const model = settings?.model || 'gemini-2.5-flash-lite';
     const generativeModel = ai.getGenerativeModel({ model });
 
-   // 1. Define the generation configuration object
+    // 1. Define the generation configuration object
     const generationConfig = {
       temperature: settings?.temperature || 0.9,
       // The SDK property name for system instructions is 'systemInstruction'
-      systemInstruction: settings?.sysTemInstructions, 
+      systemInstruction: settings?.sysTemInstructions,
     };
 
     // 2. Call generateContent with the single GenerateContentRequest object.
     const result = await generativeModel.generateContent({
       // contents must be an array of Content objects
       contents: [{
-        role: "user", 
+        role: "user",
         parts: [{ text: prompt }]
-      }], 
-      
+      }],
+
       // The fixed property name that resolves the TypeScript error
-      generationConfig: generationConfig, 
+      generationConfig: generationConfig,
     });
 
     // 2. Extract the response text
     // The result object now contains a property 'text' at the top level for simple text generation
-    const geminiResponseText = result.response.text();    res.status(200).json({ response: geminiResponseText });
+    const geminiResponseText = result.response.text(); res.status(200).json({ response: geminiResponseText });
 
   } catch (error) {
     console.error("Gemini API Error:", error);
diff --git a/app/formfile/page.tsx b/app/formfile/page.tsx
index ccf46ef..613c7b3 100644
--- a/app/formfile/page.tsx
+++ b/app/formfile/page.tsx
@@ -41,35 +41,35 @@ The output MUST be in Markdown format and strictly follow this structure:
 **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() !== "");
+  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);
+    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 !== '');
+      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,
+      ideas.push({
+        id: index + 1,
+        title,
+        tracks,
+        summary,
+      });
     });
-  });
-  console.log("Parsed Cards:", ideas);
-  return ideas;
-};
+    console.log("Parsed Cards:", ideas);
+    return ideas;
+  };
 
   const handleFormSubmitFromFormPage = (submittedData: FormData) => {
     setFormData(submittedData);
@@ -80,14 +80,14 @@ const parseAiResponse = (markdownString: string): CardData[] => {
   // eslint-disable-next-line react-hooks/preserve-manual-memoization
   const generateIdeas = useCallback(async (dataToProcess: FormData) => {
     const submissionData: FormData = {
-        ...dataToProcess,
-        tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
-        students: dataToProcess.students
-            .map(student => ({
-                ...student,
-                skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
-            }))
-            .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
+      ...dataToProcess,
+      tracksStack: dataToProcess.tracksStack.filter(tracks => tracks.trim() !== ''),
+      students: dataToProcess.students
+        .map(student => ({
+          ...student,
+          skills: student.skills.filter(skill => skill.skillName.trim() !== ''),
+        }))
+        .filter(student => student.studentName.trim() !== '' || student.skills.length > 0),
     };
 
     const prompt = `
@@ -95,46 +95,46 @@ const parseAiResponse = (markdownString: string): CardData[] => {
     Main Theme: ${submissionData.mainTheme}
     Required Tracks Stack: ${submissionData.tracksStack.join(', ')}
     Team Members and Skills: ${submissionData.students.map(s =>
-        `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
+      `${s.studentName || 'Unamed Member'} (Skills: ${s.skills.map(sk => `${sk.skillName} - ${sk.proficiency}`).join(', ')})`
     ).join('; ')}
 
     Using the SYSTEM INSTRUCTIONS, generate 5 project ideas based on the data above.`;
 
     try {
-        setIdeaResponse("Generating ideas... Please wait.");
-        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,
-            }),
-        });
+      setIdeaResponse("Generating ideas... Please wait.");
+      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 data = await response.json();
 
-        if (data.error || !response.ok) {
-            console.error("AI Error:", data.error);
-            setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
-            return;
-        }
+      if (data.error || !response.ok) {
+        console.error("AI Error:", data.error);
+        setIdeaResponse(`Error: Failed to generate idea. ${data.error || response.statusText}`);
+        return;
+      }
 
-        setIdeaResponse(data.response);
-        const parsedCards = parseAiResponse(data.response);
-        setGeneratedCards(parsedCards);
+      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}`);
+      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]);
 
@@ -165,12 +165,12 @@ const parseAiResponse = (markdownString: string): CardData[] => {
                   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>}
+                  <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>
               </>
             )}
diff --git a/app/globals.css b/app/globals.css
index 89e0fba..da6dc86 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,6 +1,3 @@
-/* 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 {
@@ -13,13 +10,10 @@
   --color-foreground: var(--foreground);
 
   /* 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);
+
+  /* Tell Tailwind to use the variables already defined in app/layout.tsx */
+  --font-sans: var(--font-sans);
+  --font-header: var(--font-header);
 
   --font-mono: var(--font-geist-mono);
 }
@@ -34,12 +28,17 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  
+
   /* 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 {
+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 a396698..8db87bf 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,5 +1,3 @@
-// app/layout.tsx
-
 import type { Metadata } from "next";
 // 1. Import your two new fonts
 import { Concert_One, Pixelify_Sans } from "next/font/google";
diff --git a/app/page.tsx b/app/page.tsx
index f85cd0b..fb1ddb0 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,121 +7,121 @@ 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>
+    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>
+            <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">
 
-            <ProtectedNavButton>Get Started</ProtectedNavButton>
-          </div>
+                    <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>
 
-          <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>
+                        <ProtectedNavButton>Get Started</ProtectedNavButton>
+                    </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-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>
 
-          <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>
+                <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 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">
+                                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="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>
-  );
+                    <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>
+    );
 }
diff --git a/app/utils/component/ui/ChatInput.tsx b/app/utils/component/ui/ChatInput.tsx
index 53c5bf8..e7d5cb2 100644
--- a/app/utils/component/ui/ChatInput.tsx
+++ b/app/utils/component/ui/ChatInput.tsx
@@ -17,8 +17,8 @@ export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
 
     const handleSend = () => {
         if (message.trim()) {
-        onSend(message.trim());
-        setMessage("");
+            onSend(message.trim());
+            setMessage("");
         }
     };
 
@@ -34,62 +34,61 @@ export default function ChatInput({ onSend, onOpenSettings }: ChatInputProps) {
 
     return (
         <div className="fixed  bottom-0 left-0 right-0 flex flex-col max-w-4xl  mx-auto w-full">
-        <div
-            className={`
+            <div
+                className={`
                 flex items-center border border-black/10 p-3 mx-4   rounded-t-3xl
                 bg-white 
                 shadow-md transition-all duration-200
         
             `}
-        >
-        
-        <div className="relative flex-1 mx-2">
-            <textarea
-                className="w-full px-3 py-2 bg-transparent border-none focus:outline-none"
-                placeholder="Type a message..."
-                value={message}
-                onChange={handleChange}
-                onKeyDown={handleKeyPress}
-            />
-
-            {message && (
-                <button
-                    className="absolute right-0 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 "
-                    onClick={handleClear}
-                    aria-label="Clear input"
-                >
-                    <X size={16} />
-                </button>
-            )}
-        </div>
-
-        
-        <div className="flex items-center">
-        
-            <button
-                className="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-gray-100 0 mr-1"
-                onClick={onOpenSettings}
-                aria-label="Open settings"
             >
-                <Settings size={20} />
-            </button>
 
-            <button
-                className={`
+                <div className="relative flex-1 mx-2">
+                    <textarea
+                        className="w-full px-3 py-2 bg-transparent border-none focus:outline-none"
+                        placeholder="Type a message..."
+                        value={message}
+                        onChange={handleChange}
+                        onKeyDown={handleKeyPress}
+                    />
+
+                    {message && (
+                        <button
+                            className="absolute right-0 top-1/2 transform -translate-y-1/2 p-1 text-gray-400 hover:text-gray-600 "
+                            onClick={handleClear}
+                            aria-label="Clear input"
+                        >
+                            <X size={16} />
+                        </button>
+                    )}
+                </div>
+
+
+                <div className="flex items-center">
+
+                    <button
+                        className="p-2 text-gray-500 hover:text-purple-600 rounded-full hover:bg-gray-100 0 mr-1"
+                        onClick={onOpenSettings}
+                        aria-label="Open settings"
+                    >
+                        <Settings size={20} />
+                    </button>
+
+                    <button
+                        className={`
                     p-2 rounded-full transition-all
-                    ${
-                    message.trim()
-                    ? "bg-purple-600 text-white hover:bg-purple-700"
-                    : "bg-gray-200 text-gray-400  cursor-not-allowed"
-                    }
+                    ${message.trim()
+                                ? "bg-purple-600 text-white hover:bg-purple-700"
+                                : "bg-gray-200 text-gray-400  cursor-not-allowed"
+                            }
                 `}
-                onClick={handleSend}
-                disabled={!message.trim()}
-                aria-label="Send message"
-                >
-                <Send size={20} />
-            </button>
-            </div>
+                        onClick={handleSend}
+                        disabled={!message.trim()}
+                        aria-label="Send message"
+                    >
+                        <Send size={20} />
+                    </button>
+                </div>
             </div>
         </div>
     );
diff --git a/app/utils/component/ui/MessageWindow.tsx b/app/utils/component/ui/MessageWindow.tsx
index 6413cb3..e78839d 100644
--- a/app/utils/component/ui/MessageWindow.tsx
+++ b/app/utils/component/ui/MessageWindow.tsx
@@ -1,30 +1,30 @@
 "use client";
 import { useRef, useEffect } from "react";
 import { ChatHistory } from "@/app/exportType/types";
-import {User, Bot} from "lucide-react"
+import { User, Bot } from "lucide-react"
 
-interface MessageWindowProps{
-    history :ChatHistory
+interface MessageWindowProps {
+    history: ChatHistory
 }
 
-export default function MessageWindow({history}:MessageWindowProps){
+export default function MessageWindow({ history }: MessageWindowProps) {
     const messageEndRef = useRef<HTMLDivElement>(null);
 
-    useEffect(() =>{
-        messageEndRef.current?.scrollIntoView({behavior:"smooth"});
+    useEffect(() => {
+        messageEndRef.current?.scrollIntoView({ behavior: "smooth" });
     }, [history]);
 
-    return(
+    return (
         <div className="flex-1 p-3 overflow-y-auto">
             <div className="max-w-3xl mx-auto">
-                {history.map((msg,index)=>{
+                {history.map((msg, index) => {
                     const isUser = msg.role === "user"
 
                     return (
-                        <div 
-                        key={index} 
-                        className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
-                            {!isUser &&(
+                        <div
+                            key={index}
+                            className={`flex ${isUser ? "justify-end" : "justify-start"}`}>
+                            {!isUser && (
                                 <div className="mr-2">
                                     <div className="flex items-center justify-center w-8 h-8 rounded-full bg-gray">
                                         <Bot size={15} className="text-gray-700">
@@ -41,20 +41,20 @@ export default function MessageWindow({history}:MessageWindowProps){
                                     <span key={idx}>{part.text}</span>))}
                                 </div>
                             </div>
-                        {isUser && (
-                            <div className="ml-2">
-                                <div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500">
-                                    <User size={16} className="text-white" />
+                            {isUser && (
+                                <div className="ml-2">
+                                    <div className="flex items-center justify-center w-8 h-8 rounded-full bg-purple-500">
+                                        <User size={16} className="text-white" />
+                                    </div>
                                 </div>
-                            </div>
-                        )}
+                            )}
                         </div>
-                        );
-                    })}
-        
-        {/* Invisible element to help scroll to bottom */}
-        <div ref={messageEndRef} />
+                    );
+                })}
+
+                {/* Invisible element to help scroll to bottom */}
+                <div ref={messageEndRef} />
+            </div>
         </div>
-    </div>
     );
 }
\ No newline at end of file
diff --git a/app/utils/geminiHelper.ts b/app/utils/geminiHelper.ts
index 4fa619c..18987fe 100644
--- a/app/utils/geminiHelper.ts
+++ b/app/utils/geminiHelper.ts
@@ -1,42 +1,42 @@
 import { GoogleGenerativeAI } from "@google/generative-ai";
-import { ChatHistory, GenerateConfig,ChatSetting } from "../exportType/types";
+import { ChatHistory, GenerateConfig, ChatSetting } from "../exportType/types";
 
 const apiKey = process.env.GEMINI_API_KEY;
 
-if(!apiKey){
+if (!apiKey) {
     throw new Error("api key not found");
 }
 
 const genAI = new GoogleGenerativeAI(apiKey);
 
 export async function chatToGemini(
-    userMessage:string ,
-    history:ChatHistory, 
-    settings:ChatSetting
-):Promise<string>{
-        const model = genAI.getGenerativeModel({
-            model:settings.model || "gemini-2.5-flash",
-            systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
-            });
-        
-        const generationConfig:GenerateConfig = {
-            temperature : settings.temperature || 1,
-            topP : 0.9,
-            responseMimeType: "text/plain",
-            maxOutputTokens: 1900, // Increased to allow for longer responses
-        }
+    userMessage: string,
+    history: ChatHistory,
+    settings: ChatSetting
+): Promise<string> {
+    const model = genAI.getGenerativeModel({
+        model: settings.model || "gemini-2.5-flash",
+        systemInstruction: settings.sysTemInstructions || "you are going to create a project idea, explain it in summery first before going to detail",
+    });
 
-        const chatSession = model.startChat({
-            generationConfig,
-            history
-        })
+    const generationConfig: GenerateConfig = {
+        temperature: settings.temperature || 1,
+        topP: 0.9,
+        responseMimeType: "text/plain",
+        maxOutputTokens: 1900, // Increased to allow for longer responses
+    }
 
-        try {
-            const result = await chatSession.sendMessage(userMessage);
-            return result.response.text();
-        }
-        catch(error){
-            console.error(error)
-            throw error
-        }
-    }
\ No newline at end of file
+    const chatSession = model.startChat({
+        generationConfig,
+        history
+    })
+
+    try {
+        const result = await chatSession.sendMessage(userMessage);
+        return result.response.text();
+    }
+    catch (error) {
+        console.error(error)
+        throw error
+    }
+}
\ No newline at end of file

From 26255b64fcfad69e54c72dea56fe7705b4cb3091 Mon Sep 17 00:00:00 2001
From: PawelC4 <pcieslak4480@gmail.com>
Date: Sun, 9 Nov 2025 01:28:33 -0500
Subject: [PATCH 4/4] pushing css for pages and small features

---
 app/Dashboard/page.tsx  | 113 ++++++++++++++++++------
 app/cards/page.tsx      | 190 +++++++++++++++++++++++++++++-----------
 app/exportType/types.ts |   1 +
 app/page.tsx            |  33 ++-----
 4 files changed, 234 insertions(+), 103 deletions(-)

diff --git a/app/Dashboard/page.tsx b/app/Dashboard/page.tsx
index 86da3e8..bb47069 100644
--- a/app/Dashboard/page.tsx
+++ b/app/Dashboard/page.tsx
@@ -1,38 +1,74 @@
 "use client";
 
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
-import Link from 'next/link';
+// import { useRouter } from "next/navigation"; // Removed Next.js import
+// import Link from 'next/link'; // Removed Next.js import
 
-function Dashboard() { // 2. Changed from 'export default function'
-    const router = useRouter();
+export default function Dashboard() {
+    // const router = useRouter(); // Removed Next.js hook
     const [query, setQuery] = useState("");
     const [sideBarOpen, setSidebarOpen] = useState(true);
+    // 1. Add state to track sort order
+    const [sortOrder, setSortOrder] = useState("newest"); // 'newest' or 'oldest'
 
     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) =>
+
+    // 2. Update sorting logic to use the sortOrder state
+    const sortedProjects = [...projects].sort((a, b) => {
+        // Get numeric timestamps to avoid TypeScript error
+        const dateA = new Date(a.createdAt).getTime();
+        const dateB = new Date(b.createdAt).getTime();
+
+        if (sortOrder === "newest") {
+            return dateB - dateA; // Newest first
+        } else {
+            return dateA - dateB; // Oldest first
+        }
+    });
+
+    // 3. Filter the *sorted* array based on the query
+    const filtered = sortedProjects.filter((p) =>
         p.name.toLowerCase().includes(query.toLowerCase())
     );
 
+    // 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 = "/dashboard/create";
+    };
+
+    // 4. Function to toggle the sort order
+    const toggleSortOrder = () => {
+        setSortOrder(currentOrder => (currentOrder === "newest" ? "oldest" : "newest"));
+    };
+
     return (
-        <div className="flex min-h-screen bg-zinc-50 dark:bg-black font-sans transition-all duration-300">
+        <div
+            className="flex min-h-screen font-sans transition-all duration-300"
+            style={{ backgroundColor: '#FEEEDF' }} // Main background
+        >
             <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`}
+                    } border-r transition-all duration-300 flex flex-col`}
+                style={{ backgroundColor: '#99A48A', borderColor: '#8A947E' }} // Sidebar background and border
             >
-                <div className="flex items-center justify-between p-4 border-b border-zinc-200 dark:border-zinc-800">
+                <div
+                    className="flex items-center justify-between p-4 "
+                    style={{ borderColor: '#8A947E' }} // Sidebar border
+                >
                     {sideBarOpen && (
-                        <span className="text-lg font-semibold text-zinc-800 dark:text-zinc-100">
+                        <span className="text-lg font-semibold text-white">
                             More
                         </span>
                     )}
                     <button
                         onClick={() => setSidebarOpen(!sideBarOpen)}
-                        className="text-zinc-600 dark:text-zinc-300 hover:text-blue-500 transition-colors"
+                        className="text-white hover:text-gray-200 transition-colors"
                         title="Toggle Sidebar"
                     >
                         ☰
@@ -40,32 +76,34 @@ function Dashboard() { // 2. Changed from 'export default function'
                 </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 p-4 gap-3 text-white transition-opacity duration-200 ${sideBarOpen ? "opacity-100" : "opacity-0"
                         }`}
                 >
-                    <Link
+                    <a
                         href="/"
-                        className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                        className="hover:text-gray-200 transition-colors"
                     >
                         Home
-                    </Link>
+                    </a>
                     <p
-                        className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                        className="hover:text-gray-200 transition-colors"
                     >
                         Settings
                     </p>
-                    {/* 3. Added the Logout link here */}
-                    <Link
+                    <a
                         href="/auth/logout"
-                        className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                        className="hover:text-gray-200 transition-colors"
                     >
                         Logout
-                    </Link>
+                    </a>
                 </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">
+                <header
+                    className="sticky top-0 z-10 backdrop-blur-sm border-b"
+                    style={{ backgroundColor: 'rgba(153, 164, 138, 0.9)', borderColor: '#8A947E' }} // 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">
                             <input
@@ -73,15 +111,17 @@ function Dashboard() { // 2. Changed from 'export default function'
                                 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"
+                                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"
+                                style={{ backgroundColor: '#F7F7F7', borderColor: '#D1D1D1' }} // Search bar "off-white"
                             />
                         </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"
+                                onClick={handleCreateClick} // Use the new handler
+                                className="text-white px-4 py-2 rounded-md shadow-sm hover:opacity-90"
+                                style={{ backgroundColor: '#EA627F' }} // Create button
                             >
                                 Create
                             </button>
@@ -90,25 +130,40 @@ function Dashboard() { // 2. Changed from 'export default function'
                 </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>
+                    <div className="flex justify-between items-center mb-4">
+                        <h1 className="text-2xl font-semibold text-black">
+                            Project Names
+                        </h1>
+                        <button
+                            type="button"
+                            onClick={toggleSortOrder}
+                            className="px-3 py-1 text-sm font-medium border rounded-md"
+                            style={{
+                                color: '#333',
+                                backgroundColor: '#F7F7F7', // "off-white"
+                                borderColor: '#D1D1D1'
+                            }}
+                        >
+                            Sort by: {sortOrder === 'newest' ? 'Newest' : 'Oldest'}
+                        </button>
+                    </div>
 
                     <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"
+                                    className="flex justify-between p-4 border rounded-md"
+                                    style={{ backgroundColor: '#B8C0AD', color: '#222', borderColor: '#A9B29E' }} // Project boxes
                                 >
                                     <span>{project.name}</span>
-                                    <span className="text-zinc-500 dark:text-zinc-400 text-sm">
+                                    <span className="text-gray-700 text-sm">
                                         Created: {project.createdAt}
                                     </span>
                                 </li>
                             ))}
                             {filtered.length === 0 && (
-                                <li className="text-zinc-500">No results found</li>
+                                <li className="text-gray-600">No results found</li>
                             )}
                         </ul>
                     </section>
diff --git a/app/cards/page.tsx b/app/cards/page.tsx
index 37faf57..322b377 100644
--- a/app/cards/page.tsx
+++ b/app/cards/page.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
-import { motion, useMotionValue, useTransform, useAnimation } from "framer-motion";
-import { useRouter } from "next/navigation";
+import React, { useState } from "react";
+import { motion, useMotionValue, useTransform } from "framer-motion";
 
+// Removed local fallback JSX declaration — use the official React type definitions instead:
+// install @types/react and @types/react-dom so JSX.IntrinsicElements is provided by those packages.
 // 1. Updated ColorWay interface
 interface ColorWay {
   card: string;
@@ -28,31 +29,126 @@ interface CardData {
   tracks: string[];
 }
 
-const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) => {
-  const [cards, setCards] = useState<CardData[]>(initialCards);
-  const router = useRouter();
+const cardData: CardData[] = [
+  {
 
-  // Update cards state when initialCards prop changes
-  useEffect(() => {
-    setCards(initialCards);
-  }, [initialCards]);
+    id: 1,
 
-  const removeCard = () => {
+    title: " WEBSITE",
+
+    summary:
+
+      "FFind out what makes GoonMAXXER unique.With this innovative website you will be able to explore various features and functionalities that set GoonMAXXER apart from the rest.",
+
+    tracks: ["Gemini", "Auth0", "VibeCODING", "SmellyMaxxing", "shitposting"],
+
+  },
+
+  {
+
+    id: 2,
+
+    title: "Intro to React",
+
+    summary:
+
+      "Learn the fundamentals of React, including components, state, and props.",
+
+    tracks: ["React", "JS", "Frontend"],
+
+  },
+
+  {
+
+    id: 3,
+
+    title: "State Management",
+
+    summary:
+
+      "Explore complex state solutions with Zustand, Redux, and Context API.",
+
+    tracks: ["React", "Zustand", "State"],
+
+  },
+
+  {
+
+    id: 4,
+
+    title: "Next.js 14",
+
+    summary: "Master the app router, server actions, and data fetching.",
+
+    tracks: ["Next.js", "React", "Fullstack"],
+
+  },
+
+  {
+
+    id: 5,
+
+    title: "UI/UX Principles",
+
+    summary:
+
+      "A complete guide to user-centric design, prototyping, and testing.",
+
+    tracks: ["Design", "UI", "UX"],
+
+  },
+
+  {
+
+    id: 6,
+
+    title: "Node.js Essentials",
+
+    summary:
+
+      "Build scalable, high-performance backend applications with Node.js.",
+
+    tracks: ["Node", "Backend", "JS"],
+
+  },
+
+  {
+
+    id: 7,
+
+    title: "TypeScript",
+
+    summary:
+
+      "Add static typing to your JavaScript projects for robust, large-scale apps.",
+
+    tracks: ["TypeScript", "JS", "DevOps"],
+
+  },
+
+  {
+
+    id: 8,
+
+    title: "Framer Motion",
+
+    summary: "Create production-ready animations for your React applications.",
+
+    tracks: ["React", "Animation", "Framer"],
+
+  },
+
+].reverse();
+
+const SwipeCards: React.FC = () => {
+  const [cards, setCards] = useState<CardData[]>(cardData);
+
+  const onSwipe = () => {
     setCards((prev) => prev.slice(0, prev.length - 1));
   };
 
-  const handleAccept = (cardData: CardData) => {
-    removeCard();
-    // Redirect to chatbot with card data
-    router.push(`/chatbot?title=${encodeURIComponent(cardData.title)}&summary=${encodeURIComponent(cardData.summary)}`);
-  };
-
-  const handleReject = () => {
-    removeCard();
-  };
-
   const handleReset = () => {
-    setCards([]); // Reset to initial cards
+    setCards(cardData);
   };
 
   return (
@@ -60,8 +156,8 @@ const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) =>
       className="grid h-screen w-full place-items-center bg-orange-100"
       //   -gradient-to-tr from-orange-200 to-orange-100
       style={{
-        backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg'
-          viewBox='0 0 32 32' width='32' height='32' fill='none'
+        backgroundImage: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
+          viewBox='0 0 32 32' width='32' height='32' fill='none' 
           stroke-width='2' stroke='%23d4d4d4'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e")`,
       }}
     >
@@ -74,8 +170,7 @@ const SwipeCards: React.FC<{ initialCards: CardData[] }> = ({ initialCards }) =>
               cardData={card}
               colorWay={colorWay}
               isFront={index === cards.length - 1}
-              onAccept={handleAccept}
-              onReject={handleReject}
+              onSwipe={onSwipe}
             />
           );
         })
@@ -104,11 +199,10 @@ interface CardProps {
   cardData: CardData;
   colorWay: ColorWay;
   isFront: boolean;
-  onAccept: (cardData: CardData) => void;
-  onReject: () => void;
+  onSwipe: () => void;
 }
 
-const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onReject }) => {
+const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onSwipe }) => {
   const { title, summary, tracks } = cardData;
 
   const x = useMotionValue(0);
@@ -118,30 +212,20 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
     [-250, -100, 0, 100, 250],
     [0, 1, 1, 1, 0],
   );
-  const controls = useAnimation();
 
   const acceptOpacity = useTransform(x, [50, 150], [0, 1]);
   const rejectOpacity = useTransform(x, [-150, -50], [1, 0]);
   const badgeRotate = useTransform(x, [-150, 150], [-15, 15]);
 
-  const handleDragEnd = async (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
-    if (info.offset.x > 100) {
-      // Card accepted
-      await controls.start({ x: 1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
-      onAccept(cardData); // Then call onAccept which removes the card and redirects
-    } else if (info.offset.x < -100) {
-      // Card rejected
-      await controls.start({ x: -1000, opacity: 0, transition: { duration: 0.1 } }); // Animate off-screen quickly
-      onReject(); // Then call onReject which removes the card
-    } else {
-      // Card not swiped far enough, snap back to center
-      controls.start({ x: 0, rotate: 0, opacity: 1, transition: { type: "spring", stiffness: 300, damping: 30 } });
+  const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: { offset: { x: number } }) => {
+    if (Math.abs(info.offset.x) > 100) {
+      onSwipe();
     }
   };
 
   return (
     <motion.div
-      className="absolute flex h-[56rem] w-[42rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
+      className="absolute flex h-[48rem] w-[36rem] flex-col justify-between overflow-hidden rounded-2xl p-6 shadow-2xl hover:cursor-grab active:cursor-grabbing"
       style={{
         x,
         rotate,
@@ -151,7 +235,10 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
         zIndex: isFront ? 2 : 1,
         pointerEvents: isFront ? "auto" : "none",
       }}
-      animate={controls}
+      animate={{
+        scale: isFront ? 1 : 0.95,
+        y: isFront ? 0 : -40,
+      }}
       transition={{ type: "spring", stiffness: 300, damping: 30 }}
       drag={isFront ? "x" : false}
       dragConstraints={{ left: 0, right: 0, top: 0, bottom: 0 }}
@@ -175,20 +262,24 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
       <div className="relative z-0">
         {/* 3. Applied the specific titleColor here */}
         <h2
-          className="mb-4 text-center text-3xl font-bold"
+          className="mb-4 text-center text-7xl font-bold"
           style={{ color: colorWay.titleColor }}
         >
           {title}
         </h2>
         {/* This summary <p> will inherit colorWay.text from the parent */}
-        <p className="text-center text-xl font-light">{summary}</p>
+        <p className="text-center text-3xl font-light">{summary}</p>
       </div>
 
       <div className="relative z-0 flex flex-wrap items-center justify-center gap-2">
-        {tracks.slice(0, 2).map((track, index) => (
+        {/* This <h3> will also inherit colorWay.text */}
+        <h3 className="mb-4 w-full text-center text-4xl font-semibold">
+          Tracks
+        </h3>
+        {tracks.map((track) => (
           <span
             key={track}
-            className="flex items-center justify-center rounded-full px-8 py-3 text-sm font-medium"
+            className="flex items-center justify-center rounded-full px-8 py-3 text-2xl font-medium"
             style={{
               // This logic now correctly contrasts with the main text color
               backgroundColor:
@@ -198,7 +289,6 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
             }}
           >
             {track}
-            {index === 0 && tracks.length > 1 && ", "}
           </span>
         ))}
       </div>
@@ -207,4 +297,4 @@ const Card: React.FC<CardProps> = ({ cardData, colorWay, isFront, onAccept, onRe
 
 };
 
-export default SwipeCards;
+export default SwipeCards;
\ No newline at end of file
diff --git a/app/exportType/types.ts b/app/exportType/types.ts
index 9b2afbb..7281483 100644
--- a/app/exportType/types.ts
+++ b/app/exportType/types.ts
@@ -14,6 +14,7 @@ export interface GenerateConfig {
     temperature: number;
     topP: number;
     responseMimeType: string;
+    maxOutputTokens?: number;
 }
 
 export interface ChatSetting {
diff --git a/app/page.tsx b/app/page.tsx
index c297bb6..4342fc9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Home() {
   return (
@@ -8,19 +9,19 @@ export default function Home() {
     >
       <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="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
+          
+          src="/logo.svg"
+          alt="logo.js logo"
           width={100}
           height={20}
           priority
         />
         <div className="flex items-center gap-4">
-          <a href="/signin" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
-            Sign in
+          <a href="/dashboard" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+            Dashboard
           </a>
-          <a href="/register" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
-            Register
+          <a href="/cards" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+            Cards
           </a>
         </div>
       </header>
@@ -39,29 +40,13 @@ export default function Home() {
               className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400"
             >
               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!{" "}
-              {/* <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>
 
-            {/* <ProtectedNavButton>Get Started</ProtectedNavButton> */}
             <button
               style={{ backgroundColor: "#173C46", color: "white" }}
               className="px-4 py-1.5 rounded-md shadow-md font-semibold hover:opacity-90 transition-opacity"
             >
-              {/* {children} */}
-              Get Started
+              <Link href="/dashboard">Get Started</Link>
             </button>
           </div>