Toolkit learn page

src/app/toolkit/info/CategoriesInfoPage.tsx

@@ -0,0 +1,96 @@
+import Button from "@/ui/shared/Button";
+import { Header } from "@/ui/shared/Header";
+import { useRouter } from "next/navigation";
+
+
+const categoriesBarClass = `
+  whitespace-nowrap flex items-center gap-4 px-4 py-2 
+  overflow-x-auto bg-[#262537] 
+  sm:gap-6 sm:px-6  focus:ring-2 focus:ring-twd-secondary-purple
+`;
+
+const categories = [
+    {
+        id: 1, 
+        name: "Replace", 
+        description: "Adding a replacement action can help when you want to stop doing something. This is called a competing response and is part of Habit Reversal Training.", 
+        link: "https://www.ncbi.nlm.nih.gov/pmc/articles/PMC7404378/",
+        title: "Read more about Habit Reversal Training here"
+    },
+    {id: 2, name: "Distract", description: "Distracting yourself with something you enjoy can help you feel better."},
+    {id: 3, name: "Barrier", description:  "Creating a barrier can help to prevent you doing something you are trying to stop."},
+    {id: 4, name: "Change state", description: "Calming your nervous system down or making yourself more alert can help you get out of a spiral."}
+];
+
+export default function CategoriesInfoPage() {
+    const router = useRouter();
+
+    const goBack = () => {
+      router.back();
+    };
+
+    return (
+        <>
+          {/* Header */}
+          <Header title="Categories" isInfoPage={true}/>
+          <div className="bg-twd-background text-white min-h-screen px-10 py-6">
+
+          {/* Subheader */}
+          <p className="text-gray-400 mt-3 mb-2">
+            Filter by categories you might find helpful or add your own:
+          </p>
+
+          {/* Scrollable Categories */}
+          <div className={categoriesBarClass}>
+                <div className="flex overflow-x-auto whitespace-nowrap space-x-2">
+                {categories.map((category) => (
+                    <Button
+                    key={category.id}
+                    label={category.name}
+                    className=" text-white px-4 py-2 text-sm font-bold rounded-full"
+                    />
+                ))}
+                </div>
+            </div>
+
+            {/* Content */}
+            <div className="mt-6 space-y-6">
+                {categories.map((category) => (
+                <div key={category.id} className="space-y-2">
+                    <h2 className="text-xl font-semibold text-white">
+                    {category.name}
+                    </h2>
+                    <p className="text-gray-400">{category.description}</p>
+                    {category.link && (
+                    <a
+                        href={category.link}
+                        className="text-twd-text-link underline"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        {category.title}
+                    </a>
+                    )}
+                </div>
+                ))}
+                <div className="space-y-2">
+                  <h2 className="text-xl font-semibold text-white">
+                    Add your own category
+                  </h2>
+                  <p className="text-gray-400">Adding your own categories can help you organise in the best way for you.</p>
+                </div>
+            </div>
+
+
+            {/* Back Button */}
+            <div className="mt-6">
+               <Button 
+                  label="← Back" 
+                  className="bg-twd-primary-purple text-white px-6 py-2 rounded-full"
+                  onClick={goBack}
+                />
+            </div>
+        </div>
+      </>
+);
+}

src/app/toolkit/info/page.tsx

@@ -1,3 +1,89 @@
-export default function Page() {
-  return <h1>this is a placeholder</h1>;
-}
+"use client";
+
+import Button from "@/ui/shared/Button";
+import { Header } from "@/ui/shared/Header";
+import { useState } from "react";
+import CategoriesInfoPage from "./CategoriesInfoPage";
+
+export default function ToolkitInfoPage() {
+  const [showCategories, setShowCategories] = useState(false);
+
+  if (showCategories) {
+    return <CategoriesInfoPage />;
+  }
+
+  return (
+    <>
+      {/* Header */}
+      <Header title="Learn More" isInfoPage={true} />
+      <div className="bg-twd-background text-white min-h-screen px-10 py-6">
+      {/* Introduction Section */}
+      <div className="mt-6">
+        <h2 className="text-xl font-bold text-white mb-5">
+          What is this Tab About?
+        </h2>
+        <p className="text-gray-400 leading-relaxed">
+          Toolkit tab is your personal space to create, organize, and manage a
+          toolkit that’s tailored to your unique needs and experiences. It’s
+          designed to help you quickly access the tools and resources that work
+          best for you, especially during moments when you feel uneasy,
+          impulsive, or overwhelmed. By customizing this toolkit, you can rely
+          on your own expertise about what helps you the most, making it a
+          powerful support system at your fingertips.
+        </p>
+      </div>
+
+      {/* How It Helps Section */}
+      <div className="mt-10">
+        <h2 className="text-xl font-semibold text-white mb-5">
+          How Can This Tab Help?
+        </h2>
+        <ul className="list-disc list-inside space-y-4 text-gray-400">
+          <li>
+            <span className="font-semibold text-white">Personalized Tools:</span>{" "}
+            Add descriptions, images, and links to create tools that resonate
+            with you. These visual and textual cues are designed to help you act
+            quickly when decision-making feels harder than usual.
+          </li>
+          <li>
+            <span className="font-semibold text-white">
+              Guidance and Inspiration:
+            </span>{" "}
+            Explore expert-recommended suggestions and discover tools that have
+            helped others. This can give you fresh ideas and reassurance that
+            you’re not alone in your journey.
+          </li>
+          <li>
+            <span className="font-semibold text-white">Easy Organization:</span>{" "}
+            Categorize your tools in a way that makes sense to you. Use filters
+            to find what you need and prioritize your most-used tools for quick
+            access.
+          </li>
+
+          <div className="mt-10">
+            <Button
+              label="Explore Categories"
+              onClick={() => setShowCategories(true)}
+              className="bg-twd-primary-purple text-white text-base px-6 py-3 rounded-full font-semibold"
+            />
+          </div>
+
+          <li>
+            <span className="font-semibold text-white">Adaptability:</span>{" "}
+            Update your toolkit as your needs change. Add new tools, remove what
+            no longer works, and even create your own categories to reflect your
+            unique experience.
+          </li>
+          <li>
+            <span className="font-semibold text-white">
+              Reflection and Growth:
+            </span>{" "}
+            Rate how helpful each tool is so you can refine your toolkit over
+            time, ensuring it stays effective and relevant.
+          </li>
+        </ul>
+      </div>
+    </div>
+  </>
+  );
+}