feat: implement a to z cards (#34)

Co-authored-by: Pawan Senpura <86240715+pawan-live@users.noreply.github.com>

src/app/components/AZCards.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { AZCards as AZCardsType } from "@/app/types";
+
+type AZCardsProps = {
+    azCards: AZCardsType;
+};
+
+const AZCards = ({ azCards }: AZCardsProps) => {
+    const { health, medicine } = azCards;
+
+    return (
+        <div
+            className="w-full max-w-[1512px] h-auto px-[67px] py-[82px] flex flex-col md:flex-row md:justify-between gap-6 mx-auto"
+            style={{ background: "#FFFFFF" }}
+        >
+            {/* Health A to Z */}
+            <a
+                href="#"
+                className="flex flex-col justify-between w-full md:w-[calc(50%-36px)] lg:w-[678px] min-h-[287px] border-4 border-[#DBEBFB] rounded-lg bg-white p-8 hover:shadow-lg transition duration-300 relative"
+            >
+                <div className="flex flex-col items-start md:items-stretch gap-4">
+                    <h2
+                        className="text-[#484848] font-extrabold text-[24px] md:text-[28px] lg:text-[32px] leading-tight text-left"
+                    >
+                        {health.title}
+                    </h2>
+                    <p
+                        className="text-[#9E9E9E] font-medium text-[16px] md:text-[18px] lg:text-[20px] leading-relaxed text-left"
+                    >
+                        {health.description}
+                    </p>
+                </div>
+                <div className="flex md:justify-end justify-center md:absolute md:bottom-6 md:right-6 mt-6 md:mt-0">
+                    <div className="w-[60px] h-[60px] md:w-[74px] md:h-[74px] bg-[#2F7CC4] flex justify-center items-center rounded-[14px]">
+                        <svg
+                            width="32"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M5 12h13M12 5l7 7-7 7"
+                                stroke="white"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </a>
+
+            {/* Medicine A to Z */}
+            <a
+                href="#"
+                className="flex flex-col justify-between w-full md:w-[calc(50%-36px)] lg:w-[678px] min-h-[287px] border-4 border-[#DBEBFB] rounded-lg bg-white p-8 hover:shadow-lg transition duration-300 relative"
+            >
+                <div className="flex flex-col items-start md:items-stretch gap-4">
+                    <h2
+                        className="text-[#484848] font-extrabold text-[24px] md:text-[28px] lg:text-[32px] leading-tight text-left"
+                    >
+                        {medicine.title}
+                    </h2>
+                    <p
+                        className="text-[#9E9E9E] font-medium text-[16px] md:text-[18px] lg:text-[20px] leading-relaxed text-left"
+                    >
+                        {medicine.description}
+                    </p>
+                </div>
+                <div className="flex md:justify-end justify-center md:absolute md:bottom-6 md:right-6 mt-6 md:mt-0">
+                    <div className="w-[60px] h-[60px] md:w-[74px] md:h-[74px] bg-[#2F7CC4] flex justify-center items-center rounded-[14px]">
+                        <svg
+                            width="32"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M5 12h13M12 5l7 7-7 7"
+                                stroke="white"
+                                strokeWidth="2"
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                            />
+                        </svg>
+                    </div>
+                </div>
+            </a>
+        </div>
+    );
+};
+
+export default AZCards;

src/app/data/translations.json

@@ -2,6 +2,46 @@
   "en": {
     "title": "Expert backed, FREE medical advice for your Rheumatic Condition",
     "description": "Everything about your pre-diagnosed rheumatic condition is just a button-click away with RheumaConnect.",
-    "button": "Get Started"
+    "button": "Get Started",
+    "az-cards": {
+      "health": {
+        "title": "Health A to Z",
+        "description": "Find out about conditions, symptoms and treatments, including what to do and when to get help"
+      },
+      "medicine": {
+        "title": "Medicine A to Z",
+        "description": "Find out how your medicine works, how and when to take it, and possible side effects"
+      }
+    }
+  },
+  "ta": {
+    "title": "உங்கள் மூட்டுவலி நிலைக்கு நிபுணர் ஆதரவு, இலவச மருத்துவ ஆலோசனை",
+    "description": "உங்கள் முன்கூட்டியே கண்டறியப்பட்ட மூட்டுவலி நிலை குறித்த அனைத்தும் RheumaConnect மூலம் ஒரு பட்டனை அழுத்துவதன் மூலம் அணுகக்கூடியது.",
+    "button": "தொடங்குங்கள்",
+    "az-cards": {
+      "health": {
+        "title": "சுகாதாரம் A முதல் Z வரை",
+        "description": "நோய்கள், அறிகுறிகள் மற்றும் சிகிச்சைகள் குறித்த தகவல்களை, செய்யவேண்டியவை மற்றும் உதவி எப்போது பெற வேண்டும் என்பதை அறியவும்"
+      },
+      "medicine": {
+        "title": "மருந்துகள் A முதல் Z வரை",
+        "description": "உங்கள் மருந்து எவ்வாறு செயல்படுகிறது, அதை எப்போது எடுக்க வேண்டும், மற்றும் சாத்தியமான பக்க விளைவுகள் குறித்ததைப் பாருங்கள்"
+      }
+    }
+  },
+  "si": {
+    "title": "ඔබේ සන්ධි රෝග තත්ත්වය සඳහා විශේෂඥ මඟ පෙන්වීමක් සහිත, නොමිලේ වෛද්‍ය උපදෙස්",
+    "description": "ඔබගේ පෙර අධ්‍යයනය කළ සන්ධි රෝග තත්ත්වය පිළිබඳ සියල්ල RheumaConnect මඟින් බොත්තමක් ක්ලික් කිරීමෙන් ලබාගත හැක.",
+    "button": "ආරම්භ කරන්න",
+    "az-cards": {
+      "health": {
+        "title": "සෞඛ්‍යය A සිට Z දක්වා",
+        "description": "රෝග තත්ත්ව, ලක්ෂණ සහ ප්‍රතිකාර පිළිබඳව, කුමක් කරන්නද සහ උදව් ගන්නා අවස්ථාවන් පිළිබඳව දැනගන්න"
+      },
+      "medicine": {
+        "title": "ඔෂධ A සිට Z දක්වා",
+        "description": "ඔබේ ඔෂධය කෙසේ කටයුතු කරන්නේද, එය කවදා ගැනීමටත්, සහ සම්බන්ධ පාර්ශ්ව පලවිපාක පිළිබඳව දැනගන්න"
+      }
+    }
   }
 }

src/app/page.tsx

@@ -1,13 +1,18 @@
 import HeroSection from "./components/HeroSection";
+import AZCards from "@/app/components/AZCards";
+import translations from "@/app/data/translations.json";
+import { Translations } from "@/app/types";
 import ContactCard from "./components/ContactCard";
 import MainCategorySection from "./components/MainCategorySection";
+const translationsData: Translations = translations;
 
 export default function Home() {
   return (
     <div>
       <HeroSection selectedLang="en" />
       <ContactCard />
       <MainCategorySection />
+      <AZCards azCards={translationsData["si"]["az-cards"]} />
     </div>
   );
 }

src/app/types/AZCards.ts

@@ -0,0 +1,9 @@
+export type AZCard = {
+    title: string;
+    description: string;
+};
+
+export type AZCards = {
+    health: AZCard;
+    medicine: AZCard;
+};

src/app/types/Translations.ts

@@ -0,0 +1,10 @@
+import { AZCards } from "./AZCards";
+
+export type Translations = {
+    [key: string]: {
+        title: string;
+        description: string;
+        button: string;
+        "az-cards": AZCards;
+    };
+};

src/app/types/index.ts

@@ -0,0 +1,2 @@
+export * from "./AZCards";
+export * from "./Translations";