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() { + image={Bagwal} readMoreLink={"/trekking"}/> + image={Bagwal} readMoreLink={"/language"}/>
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 ( <> -
-
-

Uttarakhand Culture

-

Progress with the present, but respect your roots

-
-
- TREKKING -
-
+
+
+

Uttarakhand Culture

+

Progress with the present, but respect your roots

+
+
+ TREKKING +
+
@@ -24,13 +30,15 @@ export default function Home() {
TREKKING -

A Painting of a Rope bridge across Alaknanda River, + priority={true}/> +

A Painting of a Rope bridge across Alaknanda + River, Srinagar, in the times of Garhwal Kingdom, 1784-94. Photo Src: British Library

WHY WE BUILD IT

-

A concerning trend is emerging in Uttarakhand, where the younger generation is gradually +

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() {

EXPLORE UTTARAKAHND

-

To address this problem, we have come up with a solution to digitize this cultural +

To address this problem, we have + come up with a solution to digitize this cultural knowledge. Since today'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() {

TREKKING -

Water-colour painting of the River Gori in Uttar Pradesh by James Manson (1791-1862), c.1826.

+

Water-colour painting of the River Gori + in Uttar Pradesh by James Manson (1791-1862), c.1826.

+ +
+ + + {/* UPCOMING FESTIVAL */} + + + + {/* UPCOMING FAIR */} + + + +
+
+
+ {"notify-early-banner-image"} +
+ +
+

GET NOTIFIED EARLY

+

Get Upcoming + Uttarakhand Festival & Fair Alerts!

+
+

Sign up Today!

+
+
+
- ); } 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 ( -
+
-
-
-

{props.cardTitle}

+
+
+

{props.cardTitle}

+
-
+
-

{props.title}

-

{props.subTitle}

-

{props.description}

-
-
READ MORE
-
-
- -
- {""} +

{props.title}

+

{props.subTitle}

+

{props.description}

+ +
+
READ MORE
+ {props.location && ( +
+ + VIEW LOCATION + +
+ )}
+
+
+ {""}
-
+ + +
); }; 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;