Merge branch 'main' of https://github.com/PinkSheep27/SBU-Hackathon

app/Dashboard/page.tsx

@@ -76,7 +76,7 @@ export default function Dashboard() {
                 </div>
 
                 <nav
-                    className={`flex flex-col p-4 gap-3 text-white 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"
                         }`}
                 >
                     <a

app/formfile/page.tsx

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

app/globals.css

@@ -1,3 +1,5 @@
+<<<<<<< HEAD
+=======
 /* @import "tailwindcss";
 
 :root {
@@ -27,6 +29,7 @@ body {
 /* 1. Import BOTH fonts in one go */
 @import url('https://fonts.googleapis.com/css2?family=Concert+One&family=Pixelify+Sans:wght@400;700&display=swap');
 
+>>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
 @import "tailwindcss";
 
 :root {
@@ -40,12 +43,18 @@ body {
 
   /* 3. Assign fonts to Tailwind's theme */
 
+<<<<<<< HEAD
+  /* Tell Tailwind to use the variables already defined in app/layout.tsx */
+  --font-sans: var(--font-sans);
+  --font-header: var(--font-header);
+=======
   /* --font-sans is for regular text (Concert One) */
   --font-sans: var(--font-concert-one);
 
   /* We add a new font family for headers (Pixelify Sans) */
   /* This also creates a 'font-header' utility class */
   --font-header: var(--font-pixelify);
+>>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
 
   --font-mono: var(--font-geist-mono);
 }

app/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";

app/page.tsx

@@ -26,6 +26,126 @@ export default function Home() {
         </div>
       </header>
 
+<<<<<<< HEAD
+export default function Page() {
+    return (
+        <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
+            <header className="absolute top-6 left-8 right-8 flex items-center justify-between text-sm font-medium text-zinc-700 dark:text-zinc-300">
+                <Image
+                    className=""
+                    src="/logo.svg"
+                    alt="logo"
+                    width={100}
+                    height={20}
+                    priority
+                />
+                <div className="flex items-center gap-4">
+                    <Link href="/auth/login" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                        Sign in
+                    </Link>
+                    <Link href="/auth/logout" className="hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
+                        Log out
+                    </Link>
+                </div>
+            </header>
+
+            <main className="flex min-h-screen w-full flex-col justify-between py-32 px-16 bg-white dark:bg-black">
+                <div className="flex flex-col sm:flex-row items-start justify-between gap-12 text-left w-full">
+
+                    <div className="flex-1 flex flex-col gap-5 justify-center">
+                        <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
+                            (project name)
+                        </h1>
+                        <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
+                            Looking for a starting point or more instructions? Head over to{" "}
+                            <Link
+                                href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                                className="font-medium text-zinc-950 dark:text-zinc-50"
+                            >
+                                Templates
+                            </Link>{" "}
+                            or the{" "}
+                            <Link
+                                href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
+                                className="font-medium text-zinc-950 dark:text-zinc-50"
+                            >
+                                Learning
+                            </Link>{" "}
+                            center.
+                        </p>
+
+                        <ProtectedNavButton>Get Started</ProtectedNavButton>
+                    </div>
+
+                    <div className="flex-1 flex justify-center">
+                        <div className="w-full max-w-[400px] h-[300px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+                            Image Placeholder
+                        </div>
+                    </div>
+                </div>
+
+                <section className="mt-32 w-full flex flex-col items-start gap-12">
+                    <div>
+                        <h2 className="text-[28px] font-semibold text-black dark:text-zinc-50 leading-9">
+                            Guide:
+                        </h2>
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
+                        <div className="w-full max-w-xl">
+                            <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                                First Text Block
+                            </h2>
+                            <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                                This is the content for the first text block. You can write anything here.
+                            </p>
+                        </div>
+                        <div className="sm:w-1/2 flex justify-center items-center">
+                            <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+                                Image Placeholder
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
+                        <div className="sm:w-1/2 flex justify-center items-center">
+                            <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+                                Image Placeholder
+                            </div>
+                        </div>
+
+                        <div className="flex w-full justify-end">
+                            <div className="w-full max-w-xl">
+                                <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                                    Second Text Block
+                                </h2>
+                                <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                                    This is the content for the second text block. You can write anything here.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="flex flex-col sm:flex-row items-start justify-between gap-8 w-full">
+                        <div className="w-full max-w-xl">
+                            <h2 className="text-2xl font-semibold text-black dark:text-zinc-50 mb-2">
+                                Third Text Block
+                            </h2>
+                            <p className="text-lg text-zinc-600 dark:text-zinc-400">
+                                This is the content for the third text block. You can write anything here.
+                            </p>
+                        </div>
+                        <div className="sm:w-1/2 flex justify-center items-center">
+                            <div className="w-full max-w-[300px] h-[200px] bg-zinc-200 dark:bg-zinc-800 rounded-xl shadow-md flex items-center justify-center text-zinc-500">
+                                Image Placeholder
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </main>
+        </div>
+    );
+=======
       <main className="flex min-h-screen w-full flex-col justify-between py-32 max-w-[1200px] mx-auto">
         <div className="flex flex-col sm:flex-row items-center justify-center gap-12 text-left w-full max-w-[1200px] mx-auto">
           <div className="flex-1 flex flex-col gap-5 justify-center items-start">
@@ -144,6 +264,7 @@ export default function Home() {
       </main>
     </div>
   );
+>>>>>>> 44b5a4dc49ea757e9790ba8309edc6b37d764105
 }