Added Festival and Fair Card

src/app/globals.css

@@ -54,7 +54,7 @@ button, [role="button"] {
 /*  reset anchor style*/
 
 p{
-  font-family: "system-ui", "-apple-system", "BlinkMacSystemFont",sans-serif;
+  font-family: --myCustomFont,"system-ui", "-apple-system", "BlinkMacSystemFont",sans-serif;
   font-size: 14px;
   font-style: normal;
   font-weight: 300;

src/app/page.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import HeroMapImage from "/public/heroMapImage.webp"
 import Srinagar from "/public/Srinagar.webp"
 import GoriGanga from "/public/goriGanga.webp"
+import FestivalCard from "@/components/ui/FestivalCard";
 export default function Home() {
     return (
         <>
@@ -65,6 +66,9 @@ export default function Home() {
                     </div>
                 </div>
             </section>
+
+
+            <FestivalCard/>
         </>
     );
 }

src/components/ui/Card.module.css

@@ -4,7 +4,7 @@
     justify-content: space-between;
     align-items: center;
     width: 100%;
-    border-top: 1px solid var(--light-grey);
+    border-top: 1px solid var(--cloud-grey);
     padding-top: 4rem;
     margin-top: 4rem;
 }

src/components/ui/FestivalCard.module.css

@@ -0,0 +1,189 @@
+.festival-card {
+    border-top: 1px solid var(--cloud-grey);
+    margin-top: 5rem;
+}
+
+.fair-card {
+    border-top: 1px solid var(--cloud-grey);
+    margin-top: 3rem;
+}
+
+.festival-card > div{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding-top: 3rem;
+}
+
+.fair-card > div{
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding-top: 3rem;
+}
+
+.title{
+    /*font-size: 2em;*/
+}
+
+.subTitle{
+    margin-top: 0.5rem;
+    letter-spacing: 1px;
+}
+.description{
+    margin-top: 1rem;
+    font-size: 13px;
+    color: var(--black);
+    overflow: hidden;
+    height: 9em;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 6; /* Number of lines to show */
+    -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    white-space: normal; /* Allows the text to wrap within the box */
+}
+
+
+.link-container{
+    display: flex;
+    flex-direction: row;
+    margin-top: 1.5rem;
+
+}
+
+.link-container > div{
+    border-top: 1px solid #E1E4E8;
+    padding: 3px 10px 1px 10px;
+}
+.link-container1{
+    /*border-right: 1px solid #E1E4E8;*/
+}
+.link-container2{
+    border-left: 1px solid #E1E4E8;
+}
+.link-container > div > a{
+    text-align: center;
+    color: var(--grey);
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 350;
+    letter-spacing: 1px;
+    text-decoration: none;
+    text-transform: none;
+    line-height: 20px;
+
+    position: relative;
+}
+
+.link-container > div > a::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    height: 1px;
+    width: 100%;
+    left: 0;
+    background-color: var(--black);
+    transition: 0.3s ease-in-out;
+    transform: scale(0, 1);
+    transform-origin: 0% 100%;
+}
+
+.link-container > div:hover > a:hover::after {
+    transform: scale(1, 1);
+}
+
+.link-container > div:hover > a{
+    color: var(--black);
+    filter: drop-shadow(0 0 0.90rem #A0A5AC);
+}
+
+
+
+.image-container{
+    margin-left: 2rem;
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+}
+.image-container > img{
+
+    width: auto;
+    max-width: 250px;
+    height: auto;
+    border-radius: 5px;
+}
+
+
+
+/* Mobile */
+@media (max-width: 700px) {
+
+    /*.card{*/
+    /*    width: 96%;*/
+    /*    padding-top: 3rem;*/
+    /*    margin-top: 3rem;*/
+    /*}*/
+
+    .festival-card  {
+        border-top: 1px solid var(--cloud-grey);
+        margin-top: 8rem;
+    }
+
+    .fair-card {
+        border-top: 1px solid var(--cloud-grey);
+        margin-top: 5rem;
+    }
+
+
+    .festival-card > div{
+        flex-direction: column-reverse !important;
+        justify-content: space-between;
+    }
+
+    .fair-card > div{
+        flex-direction: column-reverse !important;
+        justify-content: space-between;
+    }
+
+
+
+
+    .subTitle{
+        font-weight: 300;
+    }
+
+    .title{
+        font-size: 20px;
+    }
+
+    .image-container{
+        margin-left: 0;
+        width: 100%;
+        margin-bottom: 1rem;
+    }
+    .image-container > img{
+        width: auto;
+        max-width: 250px;
+        height: auto;
+        border-radius: 5px;
+    }
+
+    .image-container > img{
+        /*width: 100px;*/
+        /*height: 100%;*/
+
+        width: 100%;
+        max-width: 100%;
+        height: auto;
+    }
+
+    .link-container > div > a{
+        font-size: 10px;
+    }
+}

src/components/ui/FestivalCard.tsx

@@ -1,10 +1,64 @@
 import styles from "./FestivalCard.module.css"
+import Link from "next/link";
+import Image from "next/image";
+import GheeSankranti from "/public/Ghee_Sankranti.jpeg"
+import Bagwal from "/public/bagwal.jpg"
 
 export default function FestivalCard() {
     return (
         <>
-            <section>
+            {/* Festival Card */}
+            <section className={styles["festival-card"]}>
+                <p>UPCOMING FESTIVAL</p>
 
+                <div>
+                    <div className={styles[""]}>
+                        <h2 className={styles["title"]}>Ghee Sankranti</h2>
+                        <p className={styles["subTitle"]}>MID-AUGUST · UTTARAKHAND</p>
+                        <p className={styles["description"]}>Ghee Sankranti is a festival that portrays the gratitude of
+                            the locals who earn a living via the occupation of farming by marking the onset of the
+                            harvesting season. It is also known as the &apos;Olgia&apos; festival and is celebrated on
+                            the first day of August (Bhado), a time wherein the crops are thriving, and the milk-laden
+                            cattle are ready to be milked. In terms of how the celebration has gradually evolved from
+                            over the years, the ancient tradition saw nephews and sons-in-laws give presents to their
+                            maternal uncles and fathers-in-laws respectively. However, today&apos;s context is
+                            summarised by the fact that agriculturists and artisans give presents to their landowners.
+                            Common presents that are exchanged include axes, ghee, datkhocha (metallic toothpick) and
+                            firewood. An important ritual of this festival includes that of eating ghee and chapatis
+                            stuffed with urad dal!</p>
+                        <div className={styles["link-container"]}>
+                            <div className={styles["link-container1"]}><Link href={"#"}>READ MORE</Link></div>
+                        </div>
+                    </div>
+
+                    <div className={styles["image-container"]}>
+                        <Image src={GheeSankranti} alt={""} width={300} height={200} placeholder={"blur"}/>
+                    </div>
+                </div>
+            </section>
+
+            {/* Fair Card */}
+            <section className={styles["fair-card"]}>
+                <p>UPCOMING FAIR</p>
+
+                <div>
+                    <div className={styles[""]}>
+                        <h2 className={styles["title"]}>Devidhura Mela </h2>
+
+                        <p className={styles["subTitle"]}>8 AUGUST - 19 AUGUST · DEVIDHURA, CHAMPAWAT</p>
+
+                        <p className={styles["description"]}>The Devidhura Mela is deeply rooted in mythology and tradition. It is primarily associated with the Varahi Devi Temple, which is dedicated to Varahi Devi, an incarnation of Goddess Durga. Legend has it that the temple and the festival date back to the time of the Pandavas from the Mahabharata. According to folklore, the festival began as a ritual to appease the goddess and seek her blessings for a bountiful harvest and protection from evil forces.</p>
+                        <div className={styles["link-container"]}>
+                            <div className={styles["link-container1"]}><Link href={"#"}>READ MORE</Link></div>
+                            <div className={styles["link-container2"]}><Link href={"https://www.google.com/maps/place/Devidhura,+Uttarakhand+263128/@29.3431585,79.4357138,15.41z/data=!4m6!3m5!1s0x39a09f6b22f4a44d:0x7f02252e2ae6a3ed!8m2!3d29.3473853!4d79.4460938!16s%2Fg%2F12hyszj84?entry=ttu"} target="_blank" rel="noopener noreferrer" >VIEW LOCATION</Link></div>
+
+                        </div>
+                    </div>
+
+                    <div className={styles["image-container"]}>
+                    <Image src={Bagwal} alt={""} width={300} height={200} placeholder={"blur"}/>
+                    </div>
+                </div>
             </section>
         </>
     );