From 7ddc6d524fc70632f5e83cdc6e2b1d4c589c2976 Mon Sep 17 00:00:00 2001
From: Ajay Negi <ajaynegi3345@icloud.com>
Date: Mon, 23 Sep 2024 00:47:28 +0530
Subject: [PATCH] Update

---
 src/app/explore/page.tsx                 |  10 +-
 src/app/page.module.css                  | 217 ++++++++++++++++++++++-
 src/app/page.tsx                         |  87 +++++++--
 src/components/ui/SectionCard.tsx        |  49 +++--
 src/components/ui/sectionCard.module.css |   1 -
 5 files changed, 322 insertions(+), 42 deletions(-)

diff --git a/src/app/explore/page.tsx b/src/app/explore/page.tsx
index 85ca80e..897f4da 100644
--- a/src/app/explore/page.tsx
+++ b/src/app/explore/page.tsx
@@ -1,10 +1,8 @@
 import styles from "./page.module.css"
-import Link from "next/link";
-import Card from "@/components/ui/Card";
 import SectionCard from "@/components/ui/SectionCard";
 import Image from "next/image";
-import GheeSankranti from "/public/Ghee_Sankranti.jpeg"
-import Mountain from '/public/mountain.svg'
+import Mountain from '/public/mountain.svg';
+import Bagwal from "/public/bagwal.jpg";
 
 export default function Explore() {
     return (
@@ -18,12 +16,12 @@ export default function Explore() {
             <SectionCard cardTitle={"TREKKING IN UTTARAKHAND"} title={"EXPLORE TREKKING"}
                          subTitle={"FIND OLD TREKKING ROUTES, SEARCH PLACES TO SUIT YOUR NEEDS"}
                          description={"Trekking in Uttarakhand offers an exhilarating experience through some of the most breathtaking landscapes in the Himalayas. Known as the 'Land of the Gods,' Uttarakhand is home to a diverse range of trekking trails that cater to both beginners and seasoned trekkers. From the popular Valley of Flowers, known for its vibrant alpine flora, to the challenging Roopkund trek, famous for its mysterious skeletal lake, the state provides a perfect blend of adventure and natural beauty. Trekkers can explore pristine forests, towering snow-capped peaks, crystal-clear rivers, and ancient temples along the way. The spiritual significance of many trails, such as the Kedarnath and Hemkund Sahib treks, adds a deeper dimension to the journey, attracting not only nature enthusiasts but also pilgrims. Whether it's the awe-inspiring beauty of the Nanda Devi National Park or the serene paths of Chopta, trekking in Uttarakhand offers a chance to connect with nature while discovering the cultural richness of the region's remote villages. With its well-marked trails and stunning vistas at every turn, Uttarakhand remains a paradise for trekkers seeking adventure, tranquility, and a deep connection to the Himalayas."}
-                         image={""} readMoreLink={"/trekking"}/>
+                         image={Bagwal} readMoreLink={"/trekking"}/>
 
             <SectionCard cardTitle={"UTTARAKHAND LANGUAGE"} title={"EXPLORE LANGUAGE"}
                          subTitle={"KUMAONI · GARHWALI · JAUNSARI"}
                          description={"Uttarakhand is a state rich in linguistic diversity, with its residents speaking several regional languages and dialects. The most widely spoken languages include Kumaoni, Garhwali, and Jaunsari, which vary based on the region's geography and communities. Each of these languages carries a deep cultural significance, passed down through generations, reflecting the local folklore, traditions, and lifestyle. These languages serve as a vital link to the past, preserving Uttarakhand’s heritage through oral literature, songs, and storytelling. By learning and promoting these languages, we continue to celebrate and preserve the unique identity of this beautiful region."}
-                         image={""} readMoreLink={"/language"}/>
+                         image={Bagwal} readMoreLink={"/language"}/>
 
             <section>
 
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 76ad749..bb0da6a 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -34,7 +34,6 @@
 
 /* Why we Build it */
 
-
 .home-story-container{
     width: 95%;
     margin-top: 10rem;
@@ -82,9 +81,11 @@
     color: var(--black);
 }
 
+
+
 /* Explore Uttarakhand */
 .journey-container{
-    border-top: 1px solid var(--cloud-grey);
+    border-top: 1px solid var(--line-grey);
     padding-top: 1rem;
     margin-top: 3rem;
 }
@@ -324,8 +325,220 @@
 
 
 
+/* Notify Banner */
+
+.notifyBannerContainer {
+    position: relative;
+    margin-top: 7rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-width: 100%;
+    height: auto;
+}
+.colorBlend{
+    position: absolute;
+    background: linear-gradient(to bottom, #ffffff, #E9F4F6);
+    background-size: cover;
+    height: 80px;
+    width: 100%;
+    z-index: 1;
+    top: -10px;
+    /*border :1px solid red;*/
+}
+
+.notifyBannerImageContainer {
+    position: relative; /* This will act as the base for the absolute positioning of the text */
+}
+
+.notifyBannerImageContainer img {
+    max-width: 100%; /* Ensures the image covers the container */
+    height: auto;
+}
+
+.notifyBannerTextContainer {
+    position: absolute; /* Place the text container on top of the image */
+    top: 50%; /* Center the text vertically */
+    left: 50%; /* Center the text horizontally */
+    transform: translate(-50%, -50%); /* Adjusts the positioning to the center */
+    color: white; /* Set text color to white for contrast */
+    z-index: 2; /* Ensure text is on top */
+    text-align: center;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1rem;
+    width: 100%;
+}
+
+.notifyBannerHeading {
+    font-size: 60px;
+    margin-bottom: 1rem;
+    font-weight: bolder;
+}
+
+.notifyBannerMessage {
+    font-size: 18px;
+    color: var(--black);
+    font-weight: 450;
+    margin-bottom: 1rem;
+}
+
+.notifyBannerButtonContainer {
+    margin-top: 1.5rem;
+}
+
+.notifyBannerButtonText {
+    font-size: 14px;
+    color: white;
+    background-color: var(--black);
+    padding: 10px 12px;
+    width: fit-content;
+    border-radius: 5px;
+    cursor: pointer;
+
+    font-weight: normal;
+
+    box-shadow: 0 .7065919983928324px .7065919983928324px -.625px #00000026,0 1.8065619053231785px 1.8065619053231785px -1.25px #00000025,0 3.6217592146567767px 3.6217592146567767px -1.875px #00000023,0 6.8655999097303715px 6.8655999097303715px -2.5px #00000020,0 13.646761411524492px 13.646761411524492px -3.125px #0000001b,0 30px 30px -3.75px #0000000d;
+
+}
+
+
+
+.notifyBannerButtonText:hover {
+    background-color: var(--green);
+}
+
+.greenText{
+    color: var(--green);
+}
+
+.soilText{
+    color: var(--soil);
+}
+
+
+
+
+
+
+
+
+@media (max-width: 1300px) {
+
+    .notifyBannerTextContainer {
+        gap: 0;
+        top: 40% ;
+
+    }
+
+    .colorBlend{
+        height: 60px;
+        top: -10px;
+    }
+
+}
+
+@media (max-width: 900px) {
+
+    .notifyBannerHeading {
+        font-size: 45px !important;
+    }
+
+    .notifyBannerButtonText {
+        font-size: 12px;
+        padding: 8px 10px;
+        border-radius: 5px;
+    }
+
+
+    .notifyBannerMessage {
+        font-size: 15px;
+        margin-bottom: 0;
+    }
+
+    .colorBlend{
+        height: 50px;
+        top: -30px;
+    }
+
+    .notifyBannerTextContainer {
+        gap: 0;
+        top: 38% !important;
+    }
+}
+
+@media (max-width: 700px) {
+    .notifyBannerHeading {
+        font-size: 30px !important;
+    }
+
+    .notifyBannerMessage {
+        font-size: 14px;
+        margin-bottom: -0.5rem !important;
+    }
 
+    .notifyBannerTextContainer {
+        top: 35% !important; /* Center the text vertically */
 
+    }
+}
+
+@media (max-width: 600px) {
+    .notifyBannerImageContainer img {
+        scale: 1.2;
+    }
+}
+
+@media (max-width: 550px) {
+    .notifyBannerHeading {
+        font-size: 30px !important;
+    }
+
+    .notifyBannerMessage {
+        font-size: 13.5px;
+    }
+    .notifyBannerImageContainer img {
+        scale: 1.5;
+        height: 160px;
+    }
+
+    .colorBlend{
+        height: 50px;
+        top: -50px;
+    }
+
+    .notifyBannerButtonText {
+        font-size: 10px !important;
+        padding: 6px 8px !important;
+    }
+
+}
+
+@media (max-width: 375px) {
+    .notifyBannerHeading {
+        font-size: 20px !important;
+    }
+
+    .notifyBannerMessage {
+        font-size: 13px;
+    }
+    .notifyBannerImageContainer img {
+        scale: 1.5;
+        height: 160px;
+    }
+
+    .colorBlend{
+        height: 50px;
+        top: -50px;
+    }
+
+
+
+}
 
 
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2c7c1ee..96dba5e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,19 +4,25 @@ 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";
+import SectionCard from "@/components/ui/SectionCard";
+import GheeSankranti from "/public/Ghee_Sankranti.jpeg";
+import Bagwal from "/public/bagwal.jpg";
+import Nanda_Sunanda from "/public/Nanda-Sunanda.webp";
+import Notify_Banner from "/public/notify-early-banner.jpg"
+
 export default function Home() {
     return (
         <>
-             <section className={styles["hero-container"]}>
-                 <div className={styles["text-container"]}>
-                     <h1>Uttarakhand Culture</h1>
-                     <p>Progress with the present, but respect your roots</p>
-                 </div>
-                 <div className={styles["img-container"]}>
-                     <Image src={HeroMapImage} alt="TREKKING" width="538" height={"500"} loading={"eager"}  priority={true}/>
-                 </div>
-             </section>
+            <section className={styles["hero-container"]}>
+                <div className={styles["text-container"]}>
+                    <h1>Uttarakhand Culture</h1>
+                    <p>Progress with the present, but respect your roots</p>
+                </div>
+                <div className={styles["img-container"]}>
+                    <Image src={HeroMapImage} alt="TREKKING" width="538" height={"500"} loading={"eager"}
+                           priority={true} placeholder={"blur"}/>
+                </div>
+            </section>
 
             <section className={styles["home-story-container"]}>
 
@@ -24,13 +30,15 @@ export default function Home() {
                 <div className={styles["why-built-it-container"]}>
                     <div className={styles["built-image-container"]}>
                         <Image src={Srinagar} alt="TREKKING" width="300" height={"211"} loading={"eager"}
-                                priority={true}/>
-                        <p className={styles["journey-image-description"]}>A Painting of a Rope bridge across Alaknanda River,
+                               priority={true}/>
+                        <p className={styles["journey-image-description"]}>A Painting of a Rope bridge across Alaknanda
+                            River,
                             Srinagar, in the times of Garhwal Kingdom, 1784-94. Photo Src: British Library</p>
                     </div>
                     <div className={styles["built-text-container"]}>
                         <p className={styles["why-built-it-title"]}>WHY WE BUILD IT</p>
-                        <p className={styles["built-description-container"]}>A concerning trend is emerging in Uttarakhand, where the younger generation is gradually
+                        <p className={styles["built-description-container"]}>A concerning trend is emerging in
+                            Uttarakhand, where the younger generation is gradually
                             forgetting their cultural heritage and traditional rituals. This decline in cultural
                             knowledge is evident across generations, with each successive generation possessing less
                             knowledge than the previous one. For instance, the amount of cultural knowledge possessed by
@@ -49,7 +57,8 @@ export default function Home() {
 
                         <div className={styles["journey-left-container"]}>
                             <div><h3>EXPLORE UTTARAKAHND</h3></div>
-                            <div><p className={styles["built-description-container"]}>To address this problem, we have come up with a solution to digitize this cultural
+                            <div><p className={styles["built-description-container"]}>To address this problem, we have
+                                come up with a solution to digitize this cultural
                                 knowledge. Since today&apos;s generation is more comfortable with technology, we aim to
                                 provide a platform where they can learn about their cultural heritage using their
                                 devices, from anywhere in the world. By doing so, we hope to make cultural knowledge
@@ -61,14 +70,60 @@ export default function Home() {
                         <div className={styles["journey-right-container"]}>
                             <Image src={GoriGanga} alt="TREKKING" width="350" height={"256"} loading={"eager"}
                                    priority={true}/>
-                            <p className={styles["journey-image-description"]}>Water-colour painting of the River Gori in Uttar Pradesh by James Manson (1791-1862), c.1826. </p>
+                            <p className={styles["journey-image-description"]}>Water-colour painting of the River Gori
+                                in Uttar Pradesh by James Manson (1791-1862), c.1826. </p>
                         </div>
                     </div>
                 </div>
+
+            </section>
+
+
+            {/* UPCOMING FESTIVAL */}
+            <SectionCard
+                cardTitle={"UPCOMING FESTIVAL"}
+                title={"Egaas Bagwal"}
+                subTitle={"12 NOVEMBER · UTTARAKHAND"}
+                description={"Egaas Bagwal is a unique festival celebrated 11 days after Diwali in the hilly regions of Uttarakhand. According to local belief, Lord Rama returned from exile late to these areas, which is why people here celebrate Egaas with great enthusiasm. The festival involves preparing traditional delicacies, performing joyful folk dances, and lighting up homes, much like Diwali. A standout tradition is spinning a flaming rope called \"Bhailo\", where villagers twirl a fire-lit rope, creating a mesmerizing display symbolizing light’s triumph over darkness. Egaas Bagwal reflects Uttarakhand’s rich cultural heritage, offering a glimpse into the community’s deep-rooted traditions and festive spirit. For the people of Uttarakhand, it’s not just a festival, but a meaningful tribute to their ancestors and the vibrant life of the hills."}
+                image={GheeSankranti}
+                readMoreLink={""}
+                location={""}
+            />
+
+
+            {/* UPCOMING FAIR */}
+            <SectionCard
+                cardTitle={"UPCOMING FAIR"}
+                title={"Nanda Devi Mahotsav"}
+                subTitle={"8 SEPTEMBER - 19 SEPTEMBER · NAINITAL"}
+                description={"The Nanda Devi Mahotsav is a grand celebration dedicated to Goddess Nanda Devi, the revered deity of the Kumaon region. This vibrant festival, which takes place annually in Nainital, is deeply ingrained in the cultural fabric of Uttarakhand. It is believed to have started centuries ago to honor Nanda Devi, who is considered the protector of the region. The festival is marked by colorful processions, traditional dance performances, and rituals that attract devotees and tourists alike. The highlight of the event is the ‘Nanda Jaat Yatra,’ where a grand procession of devotees carries a palanquin of the goddess through the scenic landscapes of Uttarakhand, symbolizing her journey to her maternal home."}
+                image={Nanda_Sunanda}
+                readMoreLink={""}
+                location={"https://www.google.com/maps/place/Maa+Nanda+Devi+Temple,+Almora/@29.5998843,79.6584971,17z/data=!3m1!4b1!4m6!3m5!1s0x39a0b76914898c8b:0x887deeed7e5d3c82!8m2!3d29.5998843!4d79.661072!16s%2Fg%2F11fmrk8bnv?hl=en&entry=ttu&g_ep=EgoyMDI0MDgyOC4wIKXMDSoASAFQAw%3D%3D"}
+            />
+
+
+            <section className={styles.notifyBannerContainer}>
+                <div className={styles.colorBlend}></div>
+                <div className={styles.notifyBannerImageContainer}>
+                    <Image src={Notify_Banner} alt={"notify-early-banner-image"} width={1440} height={460}
+                           placeholder={"blur"}/>
+                </div>
+
+                <div className={styles.notifyBannerTextContainer}>
+                    <h1 className={styles.notifyBannerHeading}>GET <span
+                        className={styles.greenText}>NOTIFIED</span> EARLY</h1>
+                    <p className={styles.notifyBannerMessage}>Get Upcoming
+                        Uttarakhand <span className={styles.greenText}>Festival</span> & <span
+                            className={styles.soilText}>Fair</span> Alerts!</p>
+                    <div className={styles.notifyBannerButtonContainer}>
+                        <p className={styles.notifyBannerButtonText}>Sign up Today!</p>
+                    </div>
+                </div>
+
             </section>
 
 
-            <FestivalCard/>
         </>
     );
 }
diff --git a/src/components/ui/SectionCard.tsx b/src/components/ui/SectionCard.tsx
index d581658..52dee4f 100644
--- a/src/components/ui/SectionCard.tsx
+++ b/src/components/ui/SectionCard.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styles from "@/components/ui/sectionCard.module.css";
 import Link from "next/link";
 import Image from "next/image";
+import {StaticImageData} from 'next/image';
 import GheeSankranti from "/public/Ghee_Sankranti.jpeg"
 
 type SectionCardProps = {
@@ -9,36 +10,50 @@ type SectionCardProps = {
     title: string;
     subTitle: string;
     description: string;
-    image: string;
+    image: StaticImageData;
     readMoreLink: string
+    location?: string
 }
 
 
 const SectionCard = ( props : SectionCardProps) => {
     return (
-            <section className={styles.sectionCardContainer}>
+        <section className={styles.sectionCardContainer}>
 
-                <div className={styles.sectionCardTitle}>
-                    <div className={styles.sectionCardTitleLine}></div>
-                    <p>{props.cardTitle}</p></div>
+            <div className={styles.sectionCardTitle}>
+                <div className={styles.sectionCardTitleLine}></div>
+                <p>{props.cardTitle}</p>
+            </div>
 
 
-                <div className={styles.sectionCard}>
+            <div className={styles.sectionCard}>
                 <div className={styles.sectionCardLeftSide}>
-                        <h2 className={styles.title}>{props.title}</h2>
-                        <p className={styles.subTitle}>{props.subTitle}</p>
-                        <p className={styles.description}>{props.description}</p>
-                        <div className={styles.linkContainer}>
-                            <div className={styles.linkContainer1}><Link href={props.readMoreLink ? props.readMoreLink : '#'}>READ MORE</Link></div>
-                        </div>
-                    </div>
-
-                    <div className={styles.imageContainer}>
-                        <Image src={GheeSankranti} alt={""} width={300} height={200} placeholder={"blur"}/>
+                    <h2 className={styles.title}>{props.title}</h2>
+                    <p className={styles.subTitle}>{props.subTitle}</p>
+                    <p className={styles.description}>{props.description}</p>
+
+                    <div className={styles.linkContainer}>
+                        <div className={styles.linkContainer1}><Link href={props.readMoreLink ? props.readMoreLink : '#'}>READ MORE</Link></div>
+                        {props.location && (
+                            <div className={styles.linkContainer2}>
+                                <Link
+                                    href={props.location}
+                                    target="_blank"
+                                    rel="noopener noreferrer"
+                                >
+                                    VIEW LOCATION
+                                </Link>
+                            </div>
+                        )}
                     </div>
+                </div>
 
+                <div className={styles.imageContainer}>
+                    <Image src={props.image} alt={""} width={300} height={200} placeholder={"blur"}/>
                 </div>
-            </section>
+
+            </div>
+        </section>
     );
 };
 
diff --git a/src/components/ui/sectionCard.module.css b/src/components/ui/sectionCard.module.css
index afc31bb..a0f2a80 100644
--- a/src/components/ui/sectionCard.module.css
+++ b/src/components/ui/sectionCard.module.css
@@ -78,7 +78,6 @@
     padding: 3px 10px 1px 10px;
 }
 .linkContainer1{
-    /*border-right: 1px solid #E1E4E8;*/
 }
 .linkContainer2{
     border-left: 1px solid #E1E4E8;