Merge pull request #28 from ajaynegi45/card

Update Home Page

src/app/page.module.css

@@ -1,42 +1,163 @@
-.hero-container{
-    margin-top: 5rem;
+.headerContainer{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+.headerImageContainer{
+    min-width: 100%;
     display: flex;
     flex-direction: row;
+    justify-content: space-around;
     align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    padding: 0 4rem 0 4rem;
+}
 
+.headerLeftImageContainer > img{
+    width: auto;
+    transform: rotateY(180deg);
+    filter: drop-shadow(0 0 0.40rem #A0A5AC);
+}
+.headerCenterImageContainer > img{
+    width: auto;
+    filter: drop-shadow(0 0 0.40rem #A0A5AC);
+}
+.headerRightImageContainer > img{
+    width: auto;
+    filter: drop-shadow(0 0 0.40rem #A0A5AC);
 }
 
-.text-container{
+.headerTextContainer{
+    margin-top: 1rem;
+    width: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center;
     align-items: center;
+    justify-content: center;
+    text-align: center;
+}
+.headerTextContainer > h1 {
+    font-family: "-apple-system","system-ui";
+    font-size: 5vw;
+    font-weight: bolder;
+}
 
+.headerTextContainer > p {
+    font-size: 16px;
+    margin-top: 2rem;
+    font-weight: 400;
 }
-.text-container > p {
-    letter-spacing: 2px;
-    text-transform: uppercase;
-    margin-top: 1rem;
+
+.headerTextContainer > .headerbuttonLink {
+    font-size: 16px;
+    color: white;
+    margin-top: 3rem;
+    background-color: var(--black);
+    padding: 12px 20px;
+    border-radius: 5px;
+    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;
 }
-.img-container{
-    overflow: hidden;
+
+.headerTextContainer > .headerbuttonLink:hover {
+    background-color: var(--slate-black);
+    cursor: pointer;
+    box-shadow: none;
 }
 
+@media (min-width: 1440px) {
+    .headerTextContainer > h1 {
+        font-size: 60px;
+    }
+}
+@media (max-width: 950px) {
+    .headerLeftImageContainer > img{
+        height: 400px;
+    }
+    .headerCenterImageContainer > img{
+        height: 250px;
+    }
+    .headerRightImageContainer > img{
+        height: 400px;
+    }
+}
 
-.img-container > img{
-    filter: drop-shadow(0 0 0.40rem #A0A5AC);
+@media (max-width: 700px) {
+    .headerLeftImageContainer > img{
+        height: 300px;
+    }
+    .headerCenterImageContainer > img{
+        height: 150px;
+    }
+    .headerRightImageContainer > img{
+        height: 300px;
+    }
+    .headerTextContainer > h1 {
+        font-size: 4.8vw;
+    }
+    .headerTextContainer > p {
+        font-size: 14px;
+    }
+    .headerTextContainer > .headerbuttonLink {
+        font-size: 14px;
+        padding: 12px 20px;
+    }
+}
+@media (max-width: 500px) {
+    .headerLeftImageContainer > img{
+        height: 210px;
+    }
+    .headerCenterImageContainer > img{
+        height: 135px;
+    }
+    .headerRightImageContainer > img{
+        height: 210px;
+    }
+    .headerTextContainer > h1 {
+        font-size: 4.47vw;
+    }
+    .headerTextContainer > p {
+        font-size: 12px;
+        margin-top: 1rem;
+    }
+    .headerTextContainer > .headerbuttonLink {
+        margin-top: 2rem;
+    }
+}
 
+@media (max-width: 374px) {
+    .headerLeftImageContainer > img{
+        height: 170px;
+    }
+    .headerCenterImageContainer > img{
+        height: 120px;
+    }
+    .headerRightImageContainer > img{
+        height: 170px;
+    }
+    .headerTextContainer > h1 {
+        font-size: 4vw;
+    }
+    .headerTextContainer > p {
+        font-size: 10px;
+        margin-top: 1rem;
+    }
+    .headerTextContainer > .headerbuttonLink {
+        font-size: 11px;
+        margin-top: 2rem;
+        padding: 10px 14px;
+    }
 }
 
 
+
+
+
+
 /* Why we Build it */
 
 .home-story-container{
     width: 95%;
-    margin-top: 10rem;
+    margin-top: 2rem;
     /*border-top: 1px solid var(--cloud-grey)*/
 }
 
@@ -410,6 +531,7 @@
 
 .notifyBannerButtonText:hover {
     background-color: var(--green);
+    box-shadow: none;
 }
 
 .greenText{

src/app/page.tsx

@@ -1,36 +1,58 @@
 import Image from "next/image";
 import styles from "./page.module.css";
 import Link from "next/link";
-import HeroMapImage from "/public/heroMapImage.webp"
+import HeroMap from "/public/heroMapImage.webp"
 import Srinagar from "/public/Srinagar.webp"
 import GoriGanga from "/public/goriGanga.webp"
 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"
+import PahadiWomen from "/public/bhotiaWoman.webp"
+import Screen from "@/components/Screen";
 
 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>
+            <header className={styles.headerContainer}>
+
+                {/* Header Images */}
+                <div className={styles.headerImageContainer}>
+                    <div className={styles.headerLeftImageContainer}>
+                        <Image src={PahadiWomen} alt={"Image of Pahadi Women"} loading={"eager"} height={500}
+                               priority={true} placeholder={"blur"}/>
+                    </div>
+                    <div className={styles.headerCenterImageContainer}>
+                        <Image src={HeroMap} alt={"Image of Pahadi Women"} loading={"eager"} height={350}
+                               priority={true} placeholder={"blur"}/>
+                    </div>
+                    <div className={styles.headerRightImageContainer}>
+                        <Image src={PahadiWomen} alt={"Image of Pahadi Women"} loading={"eager"} height={500}
+                               priority={true} placeholder={"blur"}/>
+                    </div>
                 </div>
-                <div className={styles["img-container"]}>
-                    <Image src={HeroMapImage} alt="TREKKING" width="538" height={"500"} loading={"eager"}
-                           priority={true} placeholder={"blur"}/>
+
+                <div className={styles.headerTextContainer}>
+                    <h1>We love <span className={styles.greenText}>Uttarakhand</span> and the people</h1>
+                    <h1> who <span className={styles.soilText}>preserve</span> it.</h1>
+                    <p>EXPERIENCE THE SOUL OF UTTARAKHAND</p>
+                    <Link className={styles.headerbuttonLink} href={"/explore"}>Start Your Journey</Link>
                 </div>
-            </section>
+
+            </header>
+
+            {/*<Screen/>*/}
+
 
             <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}/>
+                               priority={true} placeholder={"blur"}/>
                         <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>
@@ -69,7 +91,7 @@ export default function Home() {
 
                         <div className={styles["journey-right-container"]}>
                             <Image src={GoriGanga} alt="TREKKING" width="350" height={"256"} loading={"eager"}
-                                   priority={true}/>
+                                   priority={true} placeholder={"blur"}/>
                             <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>

src/components/Screen.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+
+const ScreenWidth: React.FC = () => {
+    const [screenWidth, setScreenWidth] = useState<number>(0);
+
+    useEffect(() => {
+        // Function to update the screen width
+        const updateWidth = () => setScreenWidth(window.innerWidth);
+
+        // Set the initial width
+        updateWidth();
+
+        // Add event listener to track window resize
+        window.addEventListener('resize', updateWidth);
+
+        // Cleanup event listener on component unmount
+        return () => window.removeEventListener('resize', updateWidth);
+    }, []);
+
+    return (
+        <div>
+            <h1>Screen Width: {screenWidth}px</h1>
+        </div>
+    );
+};
+
+export default ScreenWidth;

src/components/ui/Footer.module.css

@@ -76,17 +76,18 @@
 }
 
 .newsletter-right-container > .newsletter-email-container > form > p{
+    color: white;
     height: 3rem;
     font-size: 1rem;
     line-height: 1.5rem;
     padding: 10px 18px 10px 18px;
-    border: 1px solid var(--line-grey);
     border-radius: 5px;
-    background-color: white;
+    background-color: var(--black);
+
+    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;
 }
 .newsletter-right-container > .newsletter-email-container > form > p:hover{
-    color: white;
-    background-color: var(--black);
+    background-color: var(--slate-black);
     cursor: pointer;
 }
 

src/components/ui/Footer.tsx

@@ -14,7 +14,7 @@ export default function Footer() {
 
                     <div className={styles["newsletter-email-container"]}>
                         <form action="">
-                            <input id={"email-input"} type="email" placeholder="Enter Your email" required={true}/>
+                            <input id={"email-input"} type="email" placeholder="Enter Your email" required={true} disabled={true}/>
                             <p>Subscribe</p>
                         </form>
                     </div>

src/components/ui/Navbar.tsx

@@ -6,7 +6,9 @@ export default function Navbar() {
             <div className={styles["navbar-container"]}>
                 <nav className={styles["navbar"]}>
                     <Link href="/" className={styles["heading"]}>
-                        <h3 className={styles["title"]}>UTTARAKHAND CULTURE</h3>
+                        <h3 className={styles["title"]}>DAGADI</h3>
+
+                        {/*<h3 className={styles["title"]}>UTTARAKHAND CULTURE</h3>*/}
                     </Link>
                     <Link href="/" className={styles.link}>LOGIN</Link>
                 </nav>