From 6b992c937d4291fa7d75efc485fae1d003a7173c Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sat, 22 Nov 2025 22:18:21 -0500
Subject: [PATCH 1/2] feat(challenges): create challenge grid tile component
 with Tailwind Variants

---
 src/components/Challenges/ChallengeTile.jsx | 41 +++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 src/components/Challenges/ChallengeTile.jsx

diff --git a/src/components/Challenges/ChallengeTile.jsx b/src/components/Challenges/ChallengeTile.jsx
new file mode 100644
index 0000000..33be9d1
--- /dev/null
+++ b/src/components/Challenges/ChallengeTile.jsx
@@ -0,0 +1,41 @@
+import { tv } from "tailwind-variants/lite";
+import Button from "../Button";
+import { FaArrowRight } from "react-icons/fa6";
+
+const tileVariants = tv({
+    base: 'font-poppins flex flex-col justify-start py-6 px-4 rounded-lg shadow-[0_4px_15px_rgba(0,0,0,0.25)]',
+
+    variants: {
+        size: {
+            sm: 'h-[222px]',
+            lg: 'h-[222px] md:h-[340px]'
+        },
+        span: {
+            2: 'col-span-1 md:col-span-2',
+            3: 'col-span-1 md:col-span-3'
+        }
+    },
+});
+
+export default function ChallengeTile({ size, span, title, subtitle, tags, to }){
+    return (
+        <div className={tileVariants({ size, span })}>
+            <div className="h-full flex flex-col justify-between">
+                <div className="flex flex-col gap-2">
+                    <h2 className="text-lg md:text-[20px] font-medium">{title}</h2>
+                    <p className="text-base">{subtitle}</p>
+                </div>
+                {/* tag and button */}
+                <div className="flex flex-row justify-between items-center">
+                    <p>{tags}</p>
+                    <Button
+                        size='circ'
+                        color='primary'
+                        label={<FaArrowRight/>}
+                        to={to}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+};
\ No newline at end of file

From 057b5c449266590494787d421925c9397f4552bd Mon Sep 17 00:00:00 2001
From: Mag <166319982+magali-la@users.noreply.github.com>
Date: Sat, 22 Nov 2025 23:41:27 -0500
Subject: [PATCH 2/2] feat(challenges): create responsive grid layout for
 tiles, fixed issue with button on large tiles

---
 src/components/Challenges/ChallengeTile.jsx |   2 +-
 src/pages/Challenges.jsx                    | 110 +++++++++-----------
 2 files changed, 51 insertions(+), 61 deletions(-)

diff --git a/src/components/Challenges/ChallengeTile.jsx b/src/components/Challenges/ChallengeTile.jsx
index 33be9d1..7047c72 100644
--- a/src/components/Challenges/ChallengeTile.jsx
+++ b/src/components/Challenges/ChallengeTile.jsx
@@ -27,7 +27,7 @@ export default function ChallengeTile({ size, span, title, subtitle, tags, to })
                 </div>
                 {/* tag and button */}
                 <div className="flex flex-row justify-between items-center">
-                    <p>{tags}</p>
+                    <p className="flex-1">{tags}</p>
                     <Button
                         size='circ'
                         color='primary'
diff --git a/src/pages/Challenges.jsx b/src/pages/Challenges.jsx
index 388a9dd..3ca2792 100644
--- a/src/pages/Challenges.jsx
+++ b/src/pages/Challenges.jsx
@@ -1,66 +1,56 @@
-import { db } from "../firebase";
-import { doc, setDoc, updateDoc, getDoc } from "firebase/firestore";
 import Button from "../components/Button";
-import { useState } from "react";
+import ChallengeTile from "../components/Challenges/ChallengeTile";
 
 export default function Challenges() {
-    // use state to use data
-    const [teamData, setTeamData] = useState(null);
-
-    // add a new document in the collection test function
-    async function writeTestDoc() {
-        // create a collection with a document called team 
-        try {       
-            await setDoc(doc(db, "test", "team"), {
-                name: "Mint Chip Mavericks",
-                sprintsCompleted: 3
-            });
-            console.log("New Team data added")
-        } catch (error) {
-            console.error("The error found", error);
-        };
-    };
-
-    // update data in an existing doc
-    async function addDataToDoc() {
-        const teamDocRef = doc(db, "test", "team")
-        await updateDoc(teamDocRef, {
-            members: 3
-        });
-
-        console.log("New field added");
-    };
-
-    // read data in the doc to display
-    async function readTestDoc() {
-        const teamDocRef = doc(db, "test", "team");
-        const teamDocSnap = await getDoc(teamDocRef);
-
-        if (teamDocSnap.exists()) {
-            console.log("document data", teamDocSnap.data());
-            setTeamData(teamDocSnap.data());
-        } else {
-            console.log("there is no data")
-        };
-    };
-
     return (
-    <div className="min-h-screen bg-emerald-100 flex flex-col gap-10 items-center justify-center">
-        <h1 className="text-4xl font-bold text-lime-500">Challenges Page! 🎉</h1>
-
-        {/* test write document button */}
-        <Button onClick={writeTestDoc} label="create a collection/document" size="lg"/>
-
-        {/* update test document button */}
-        <Button onClick={addDataToDoc} label="add data field to a document" size="lg"/>
-    
-        {/* test read document button */}
-        <Button onClick={readTestDoc} label="read a document and display data" size="lg"/>
-
-        {/* tester sentence with the added firestore data */}
-        {teamData && (
-            <p>{teamData.name} has {teamData.members} members and completed {teamData.sprintsCompleted} sprints!</p>
-        )}
-    </div>
+        <div className="bg-white">
+            {/* title section */}
+            <div className="flex flex-col mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
+                <h1 className="text-3xl font-playfair font-semibold text-eerie place-self-center lg:place-self-start mt-4">Which task would you like to work on today?</h1>
+            </div>
+
+            {/* challenge tile grid */}
+            <div className="grid grid-cols-1 md:grid-cols-6 gap-8 auto-rows-min my-10 mx-8 sm:mx-15 md:mx-10 lg:mx-20 xl:mx-40 2xl:mx-80">
+                {/* row 1 */}
+                <ChallengeTile 
+                    size="sm" 
+                    span="2"
+                    title="Sleep 7-9 hours" 
+                    subtitle="Better sleep means a better you."
+                    tags='#Sleep #Stress'
+                />
+                <ChallengeTile 
+                    size="sm" 
+                    span="2"
+                    title="Read a Book" 
+                    subtitle="Destress by reading for at least 20 minutes a day."
+                    tags='#Sleep #Stress'
+                />
+                <ChallengeTile 
+                    size="sm" 
+                    span="2"
+                    title="Practice Saying No" 
+                    subtitle="Learn the different ways you can say no in & outside in the office."
+                    tags='#Stress #SelfDoubt'
+                />
+
+                {/* row 2 */}
+                <ChallengeTile 
+                    size="lg" 
+                    span="3"
+                    title="Read Positive Affirmations" 
+                    subtitle="Recite empowering messages meant to help you fight self-doubt and anxiety."
+                    tags='#Sleep #SelfDoubt #GenderBias #Postpartum'
+                />
+                <ChallengeTile 
+                    size="lg" 
+                    span="3"
+                    title="Daily Journal Entry" 
+                    subtitle="Answer a different prompt each day or share what’s on your mind."
+                    tags='#Stress #SelfDoubt #GenderBias #Postpartum'
+                    to='/journal'
+                />
+            </div>
+        </div>
   );
 };
\ No newline at end of file