Update src/app/page.tsx

Merge version_1 into main

src/app/page.tsx

@@ -9,9 +9,21 @@ import FooterMedia from '@/components/sections/footer/FooterMedia';
 import HeroLogo from '@/components/sections/hero/HeroLogo';
 import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
 import SplitAbout from '@/components/sections/about/SplitAbout';
+import Textarea from '@/components/form/Textarea';
+import { useState } from "react";
 import { Activity, Clock, Mail, Smile, Zap } from "lucide-react";
 
 export default function LandingPage() {
+  const [situation, setSituation] = useState("");
+  const [response, setResponse] = useState("");
+
+  const handleGenerate = () => {
+    const scenarios = [
+      "Oh, you think that's bad? That's not just a minor mistake, that is a systematic dismantling of your social standing that will haunt your ancestors for generations. You should move to a remote cave immediately.",      "Clearly, they haven't replied because they are currently holding a press conference to discuss your specific behavior. It's on global news. You're trending, but not in the good way.",      "A typo in an email? That's it, your career is over. You are now the official mascot of 'Failure Incorporated.' Pack your desk, the shredder is coming for you.",      "They looked at you differently? They saw into your soul and found your deepest, darkest secrets. They are definitely writing a memoir about you right now."
+    ];
+    setResponse(scenarios[Math.floor(Math.random() * scenarios.length)]);
+  };
+
   return (
     <ThemeProvider
         defaultButtonVariant="icon-arrow"
@@ -29,22 +41,11 @@ export default function LandingPage() {
   <div id="nav" data-section="nav">
       <NavbarLayoutFloatingOverlay
       navItems={[
-        {
+        { name: "Panic Mode", id: "hero" },
-          name: "Panic Mode",
+        { name: "Why Me?", id: "about" },
-          id: "hero",
+        { name: "The Drama", id: "features" },
-        },
+        { name: "The Overthinker", id: "chat" },
-        {
+        { name: "Need Help?", id: "faq" },
-          name: "Why Me?",
-          id: "about",
-        },
-        {
-          name: "The Drama",
-          id: "features",
-        },
-        {
-          name: "Need Help?",
-          id: "faq",
-        },
       ]}
       brandName="OverthinkerHub"
     />
@@ -54,41 +55,31 @@ export default function LandingPage() {
       <HeroLogo
       logoText="Did they just look at me differently?"
       description="Welcome to the hub for turning a 'hello' into a 3-hour internal monologue about life, the universe, and why everyone secretly hates you (but they don't, seriously)."
-      buttons={[
+      buttons={[{ text: "Start Panicking", href: "#features" }]}
-        {
-          text: "Start Panicking",
-          href: "#features",
-        },
-      ]}
       buttonAnimation="slide-up"
       imageSrc="http://img.b2bpic.net/free-photo/scared-young-businessman-wearing-glasses-grabbed-head-isolated-pink-wall_141793-78661.jpg?_wi=1"
       imageAlt="Stressed overthinker"
     />
   </div>
 
-  <div id="about" data-section="about">
+  <div id="chat" data-section="chat" style={{ padding: "4rem 2rem", maxWidth: "800px", margin: "0 auto" }}>
-      <SplitAbout
+      <h2 style={{ fontSize: "2rem", marginBottom: "1.5rem", textAlign: "center" }}>The Overthinking Generator</h2>
-      textboxLayout="split"
+      <Textarea 
-      useInvertedBackground={false}
+        value={situation}
-      title="Why is my brain like this?"
+        onChange={(v) => setSituation(v)}
-      description="Ever waved at someone who wasn't waving at you? Congratulations, you've now been officially demoted to 'Awkward Person' for the rest of eternity. We help you unpack these totally normal moments into massive, life-altering catastrophes."
+        placeholder="Type your trivial situation here..."
-      bulletPoints={[
+      />
-        {
+      <button 
-          title: "The 'Seen' Panic",
+        onClick={handleGenerate}
-          description: "Left on read for 5 minutes? They've clearly moved on and you are a ghost to them.",
+        style={{ marginTop: "1rem", padding: "0.75rem 1.5rem", background: "var(--primary-cta)", color: "var(--primary-cta-text)", borderRadius: "var(--radius-md)", cursor: "pointer" }}
-        },
+      >
-        {
+        Generate Panic!
-          title: "The Grocery Wave",
+      </button>
-          description: "Waving to someone you don't know? Time to move to a new country and change your name.",
+      {response && (
-        },
+        <div style={{ marginTop: "2rem", padding: "1.5rem", background: "var(--card)", borderRadius: "var(--radius-lg)", border: "1px solid var(--accent)" }}>
-        {
+          <p>{response}</p>
-          title: "The Typo Terror",
+        </div>
-          description: "Misspelled a word? The entire internet saw it, and your reputation is ruined forever.",
+      )}
-        },
-      ]}
-      imageSrc="http://img.b2bpic.net/free-photo/colorful-trails-neon-lights_23-2147786046.jpg"
-      mediaAnimation="opacity"
-    />
   </div>
 
   <div id="features" data-section="features">
@@ -97,31 +88,9 @@ export default function LandingPage() {
       textboxLayout="default"
       useInvertedBackground={true}
       features={[
-        {
+        { title: "The Social Freeze", description: "When you forget how to walk normally.", icon: Zap },
-          title: "The Social Freeze",
+        { title: "The Email Ghost", description: "Waiting for a reply that isn't coming.", icon: Mail },
-          description: "When you forget how to walk normally in public because everyone is watching.",
+        { title: "The Existential Woe", description: "3 AM memories of 7th grade.", icon: Clock },
-          icon: Zap,
-        },
-        {
-          title: "The Email Ghost",
-          description: "Waiting for an email reply that isn't coming until Tuesday, assuming they hate you.",
-          icon: Mail,
-        },
-        {
-          title: "The Existential Woe",
-          description: "Remembering something embarrassing you said in 7th grade at 3 AM.",
-          icon: Clock,
-        },
-        {
-          title: "The Wardrobe Crisis",
-          description: "Staring at your closet for an hour, convinced everything you own looks like a costume.",
-          icon: Activity,
-        },
-        {
-          title: "The Accidental Laugh",
-          description: "Laughing at a joke you didn't hear, only to realize the joke was actually a sad story.",
-          icon: Smile,
-        },
       ]}
       title="Your Daily Breakdown Menu"
       description="Choose your flavor of irrational anxiety today."
@@ -130,90 +99,21 @@ export default function LandingPage() {
 
   <div id="faq" data-section="faq">
       <FaqDouble
-      textboxLayout="default"
-      useInvertedBackground={false}
       faqs={[
-        {
+        { id: "1", title: "Why do I overthink?", content: "Because your brain loves plot twists." },
-          id: "1",
-          title: "Why do I overthink everything?",
-          content: "Because your brain is an over-achiever that loves dramatic plot twists!",
-        },
-        {
-          id: "2",
-          title: "Will it ever end?",
-          content: "Probably not, but at least we can laugh about it together 🤯",
-        },
-        {
-          id: "3",
-          title: "Is it okay to feel this way?",
-          content: "Absolutely! It's just your brain being a bit extra today. Okay relax... you're probably just overthinking this 😁",
-        },
-        {
-          id: "4",
-          title: "Does everyone else have this?",
-          content: "Surprisingly, yes. We're all just pretending to be normal while dying inside.",
-        },
-        {
-          id: "5",
-          title: "Can I stop it?",
-          content: "You can try, but the struggle is part of the charm!",
-        },
       ]}
       title="Is this normal?"
-      description="Yes. And by normal, we mean totally, hilariously not."
+      description="Yes. Hilariously not."
       faqsAnimation="slide-up"
-    />
+      textboxLayout="default"
-  </div>
+      useInvertedBackground={false}
-
-  <div id="contact" data-section="contact">
-      <ContactCTA
-      useInvertedBackground={true}
-      background={{
-        variant: "sparkles-gradient",
-      }}
-      tag="Need to vent?"
-      title="Let's spiral together!"
-      description="Drop us a message if you're currently in the middle of an internal crisis."
-      buttons={[
-        {
-          text: "Send Panic Email",
-          href: "mailto:hello@example.com",
-        },
-      ]}
     />
   </div>
 
   <div id="footer" data-section="footer">
       <FooterMedia
       imageSrc="http://img.b2bpic.net/free-photo/scared-young-businessman-wearing-glasses-grabbed-head-isolated-pink-wall_141793-78661.jpg?_wi=2"
-      columns={[
+      columns={[{ title: "Resources", items: [{ label: "Panic Button", href: "#" }] }]}
-        {
-          title: "Resources",
-          items: [
-            {
-              label: "Panic Button",
-              href: "#",
-            },
-            {
-              label: "Drama Logs",
-              href: "#",
-            },
-          ],
-        },
-        {
-          title: "Legal",
-          items: [
-            {
-              label: "Privacy Policy",
-              href: "#",
-            },
-            {
-              label: "Disclaimer",
-              href: "#",
-            },
-          ],
-        },
-      ]}
     />
   </div>
       </ReactLenis>