feat: card descriptions

public/lit/texts.tsx

@@ -397,3 +397,71 @@ export const summaryHappy =
         EN: "Great score! That would make my brother happy.",
         SK: "Skvelé skóre! Môj brat by sa potešil.",
     }
+
+export const symptomsCards = [
+    {
+        id: 'thirst',
+        text: {
+            EN: 'Increased thirst is a common symptom of diabetes, particularly when blood sugar levels are high, as the body attempts to eliminate excess glucose through urine.',
+            SK: 'Zvýšený pocit smädu je bežným príznakom cukrovky, najmä keď sú hladiny cukru v krvi vysoké, pretože telo sa snaží odstrániť nadbytočnú glukózu močom.',
+        },
+        image: '/public/images/glass.svg',
+    },
+    {
+        id: 'hunger',
+        text: {
+            EN: 'Diabetes can cause frequent hunger, especially when blood sugar levels are low, resulting in a need for more energy.',
+            SK: 'Diabetes môže spôsobiť častý hlad, najmä keď sú hladiny cukru v krvi nízke, pretože telo potrebuje viac energie.',
+        },
+        image: '/public/images/pizza.svg',
+    },
+    {
+        id: 'fatigue',
+        text: {
+            EN: 'Diabetes-related fatigue is characterized by persistent tiredness and low energy levels. Fluctuations in blood sugar levels, particularly when they are poorly controlled, can lead to feelings of exhaustion and lethargy, impacting a person\'s ability to engage in daily activities.',
+            SK: 'Únava spojená s cukrovkou sa prejavuje neustálou nízkou hladinou energie. Kolísanie hladiny cukru v krvi, najmä keď nie je dostatočne kontrolované, môže spôsobiť pocit vyčerpania a ospalosti, čím ovplyvňuje schopnosť človeka byť aktívny na dennej báze.',
+        },
+        image: '/public/images/fatigue.svg',
+    },
+    {
+        id: 'vision',
+        text: {
+            EN: 'Elevated blood sugar levels may lead to difficulties in focusing and visual clarity. This symptom can come and go as blood sugar levels vary.',
+            SK: 'Zvýšené hladiny cukru v krvi môžu ovplyvniť schopnosť zaostrovať a vidieť poriadne. Tento príznak sa môže často meniť s kolísaním hladiny cukru v krvi.',
+        },
+        image: '/public/images/blurry.svg',
+    },
+    {
+        id: 'numbness',
+        text: {
+            EN: 'Diabetic neuropathy can lead to numbness and tingling in the limbs, as prolonged high blood sugar levels can damage nerves, affecting sensation.',
+            SK: 'Diabetická neuropatia môže spôsobiť znecitlivenie a brnenie v končatinách, pretože dlhodobé vysoké hladiny cukru v krvi môžu poškodiť nervy a ovplyvniť schopnosť citu v končatinách.',
+        },
+        image: '/public/images/numb.svg',
+    },
+    {
+        id: 'healing',
+        text: {
+            EN: 'Due to reduced blood flow and compromised immune function, a person with diabetes can experience slow wound healing, making it harder for the body to repair damaged tissue.',
+            SK: 'V dôsledku zníženého prúdenia krvi a oslabenej imunitnej funkcie môže osoba s cukrovkou zažiť pomalé hojenie rán, telo náročnejšie opravuje poškodenú tkaninu.',
+        },
+        image: '/public/images/bandaid.svg',
+    },
+    {
+        id: 'weightloss',
+        text: {
+            EN: 'Weight loss can occur in diabetes, particularly in type 1 diabetes, due to the body breaking down muscle and fat for energy when it cannot use glucose effectively.',
+            SK: 'Chudnutie sa môže vyskytnúť pri diabete, najmä pri diabete typu 1, keď telo rozkladá svaly a tuk na získanie energie, keď nemôže efektívne využívať glukózu.',
+        },
+        image: '/public/images/weight.svg',
+    },
+    {
+        id: 'urination',
+        text: {
+            EN: 'Diabetes can lead to frequent urination as the kidneys work to remove excess sugar from the blood, causing increased urine production.',
+            SK: 'Diabetes môže spôsobiť časté močenie, pretože obličky pracujú na odstránení nadbytočného cukru z krvi, čo vedie k zvýšenej produkcii moču.',
+        },
+        image: '/public/images/toilet.svg',
+    },
+]
+

src/components/FlippableCard.tsx

@@ -14,7 +14,7 @@ function FlippableCard(props: CardFlipProps) {
 
     return (
         <div
-            className={`w-64 h-96 border-sky-500 border-4 rounded-md relative card ${isFlipped ? 'flipped' : ''}`}
+            className={`w-64 h-96 border-sky-500 border-4 rounded-md relative hover:cursor-pointer card ${isFlipped ? 'flipped' : ''}`}
             onClick={handleCardClick}
         >
             <div className="front w-full h-full flex items-center justify-center">

src/components/Symptoms.tsx

 import FlippableCard from "./FlippableCard";
+import {symptomsCards} from "../../public/lit/texts";
+import {languageAtom} from "../atoms/languageAtom";
+import {useRecoilValue} from "recoil";
+import {Texts} from "../hooks/useAnimate";
 
 const Symptoms = () => {
+    const language = useRecoilValue(languageAtom);
     return (
         <div className="flex h-screen">
-            <div className="w-2/6 p-4">
-                {/*<div>*/}
-                {/*    <img src="src/assets/girly.svg"/>*/}
-                {/*</div>*/}
-            </div>
+            <div className="w-2/6 p-4"></div>
             <div className="w-4/6 p-4">
                 <div className="grid grid-rows-2 grid-cols-4 gap-4">
-                    <FlippableCard image="/public/images/glass.svg" text="thirst" alt="thirst"/>
-                    <FlippableCard image="/public/images/pizza.svg" text="hunger" alt="hunger"/>
-                    <FlippableCard image="/public/images/fatigue.svg" text="fatigue" alt="fatigue"/>
-                    <FlippableCard image="/public/images/blurry.svg" text="blurry" alt="blurry vision"/>
-                    <FlippableCard image="/public/images/numb.svg" text="numbness" alt="numbness"/>
-                    <FlippableCard image="/public/images/bandaid.svg" text="bandaid" alt="slow healing"/>
-                    <FlippableCard image="/public/images/weight.svg" text="weight" alt="weight loss"/>
-                    <FlippableCard image="/public/images/toilet.svg" text="toilet" alt="frequent urination"/>
+                    {symptomsCards.map((card) => (
+                        <FlippableCard
+                            key={card.id}
+                            image={card.image}
+                            text={card.text[language as keyof Texts]}
+                            alt={card.id}
+                        />
+                    ))}
                 </div>
             </div>
         </div>