Skip to content

Commit

Permalink
Merge pull request #26 from ajaynegi45/card
Browse files Browse the repository at this point in the history 
Added GET NOTIFIED EARLY Section
  • Loading branch information
@ajaynegi45
ajaynegi45 authored Sep 23, 2024
2 parents afbe347 + 7ddc6d5 commit 56b2748
Show file tree
Hide file tree
Showing 5 changed files with 322 additions and 42 deletions.
10 changes: 4 additions & 6 deletions src/app/explore/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
Expand All @@ -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>

Expand Down
217 changes: 215 additions & 2 deletions src/app/page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@

/* Why we Build it */


.home-story-container{
width: 95%;
margin-top: 10rem;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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;
}



}



Expand Down
87 changes: 71 additions & 16 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,33 +4,41 @@ 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"]}>


<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
Expand All @@ -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
Expand All @@ -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/>
</>
);
}
Loading

0 comments on commit 56b2748

Please sign in to comment.