Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added:: Custom 404 Notfound Page #43

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 41 additions & 22 deletions src/app/layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,33 +6,52 @@ import Navbar from "@/components/ui/Navbar";
import Footer from "@/components/ui/Footer";
// import { SpeedInsights } from '@vercel/speed-insights/next';

const customFont = localFont(
{
src: "../font/customFont.otf",
variable: "--myCustomFont",
}
)
const customFont = localFont({
src: "../font/customFont.otf",
variable: "--myCustomFont",
});

export const metadata: Metadata = {
title: "Uttarakhand Culture",
description: "Our aim is to ensure that this invaluable heritage is passed down to future generations.",
title: "Uttarakhand Culture",
description: "Our aim is to ensure that this invaluable heritage is passed down to future generations.",
keywords: "Uttarakhand, culture, heritage, festivals, traditions, digital preservation",
openGraph: {
title: "Uttarakhand Culture",
description: "Explore the rich cultural heritage of Uttarakhand.",
url: "https://uttarakhand-culture.vercel.app",
siteName: "Uttarakhand Culture",
images: [
{
url: "https://uttarakhand-culture.vercel.app/_next/image?url=%2F_next%2Fstatic%2Fmedia%2FheroMapImage.fc8fad10.webp&w=828&q=75",
width: 800,
height: 600,
alt: "Cultural Heritage of Uttarakhand",
},
],
locale: "en_US",
type: "website",
},
robots: {
index: true,
follow: true,
},
};

export default function RootLayout({
children,
children,
}: Readonly<{
children: React.ReactNode;
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body className={customFont.className} >
<main>
<Navbar/>
{children}
{/*<SpeedInsights />*/}
<Footer/>
</main>
</body>
</html>
);
return (
<html lang="en">
<body className={customFont.className}>
<main>
<Navbar/>
{children}
{/*<SpeedInsights />*/}
<Footer/>
</main>
</body>
</html>
);
}
72 changes: 72 additions & 0 deletions src/app/not-found.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import Link from 'next/link';

const Custom404 = () => {
return (
<div style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
height: '70vh',
backgroundColor: 'rgba(255, 255, 255, 0.8)',
color: '#000000',
fontFamily: 'Arial, sans-serif',
textAlign: 'center',
padding: '40px',
boxSizing: 'border-box',
border: '2px solid rgba(0, 0, 0, 0.2)',
boxShadow: '0 4px 20px rgba(0, 0, 0, 0.1)',
borderRadius: '10px',
backdropFilter: 'blur(10px)',
width: '90%',
maxWidth: '900px',
margin: '0 auto',
}}>
<h1 style={{
fontSize: '72px',
fontWeight: 'bold',
marginBottom: '20px',
textShadow: '1px 1px 2px rgba(0, 0, 0, 0.1)',
}}>
404
</h1>
<h2 style={{
fontSize: '36px',
marginBottom: '10px',
color: '#333333',
}}>
Page Under Construction
</h2>
<p style={{
fontSize: '18px',
marginBottom: '30px',
maxWidth: '600px',
lineHeight: '1.5',
color: '#555555',
}}>
Sorry, this page is currently under construction. We’re working hard to get it ready for you.
</p>
<Link href="/" style={{
padding: '10px 20px',
backgroundColor: '#000000',
color: '#ffffff',
borderRadius: '5px',
textDecoration: 'none',
fontWeight: 'bold',
transition: 'background-color 0.3s',
boxShadow: '0 2px 10px rgba(0, 0, 0, 0.2)',
}}>
Go back to Home
</Link>
<p style={{
marginTop: '20px',
color: '#777777',
fontSize: '14px',
}}>
Or you can try searching for what you need.
</p>
</div>
);
};

export default Custom404;
149 changes: 83 additions & 66 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,151 +1,168 @@
import Image from "next/image";
import styles from "./page.module.css";
import Link from "next/link";
import HeroMap from "/public/heroMapImage.webp"
import Srinagar from "/public/Srinagar.webp"
import GoriGanga from "/public/goriGanga.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 Notify_Banner from "/public/notify-early-banner.jpg";
import PahadiWomen from "/public/bhotiaWoman.webp";
import Screen from "@/components/Screen";

export default function Home() {

return (
<>
<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"}/>
<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"}/>
<Image
src={HeroMap}
alt={"Image of Uttarakhand Map"}
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"}/>
<Image
src={PahadiWomen}
alt={"Image of Pahadi Women"}
loading={"eager"}
height={500}
priority={true}
placeholder={"blur"}
/>
</div>
</div>

<div className={styles.headerTextContainer}>
<h1>We love <span className={styles.greenText}>Uttarakhand</span> and the people</h1>
<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>
<Link className={styles.headerbuttonLink} href={"/explore"}>
Start Your Journey
</Link>
</div>

</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} 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>
<Image
src={Srinagar}
alt="TREKKING"
width="300"
height={"211"}
loading={"eager"}
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>
</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
grandparents is significantly more than that of their children, and the cultural knowledge
of today&apos;s youth is likely to be even less than that of their parents. If this trend
continues, there is a risk that the cultural heritage of Uttarakhand may eventually
disappear from the society. This loss would not only erase the region&apos;s rich cultural
identity but also deprive future generations of their cultural roots and traditions.</p>
knowledge than the previous one...
</p>
</div>
</div>

<div className={styles["journey-container"]}>
<p>Explore, Learn and Discover the Beauty of Uttarakhand&apos;s Culture</p>

<p>Explore, Learn and Discover the Beauty of Uttarakhand's Culture</p>
<div>

<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
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
more accessible and engaging for the younger generation, and thus help preserve the rich
cultural heritage of Uttarakhand.</p></div>
<h3>EXPLORE UTTARAKAND</h3>
<p className={styles["built-description-container"]}>
To address this problem, we have come up with a solution to digitize this cultural knowledge...
</p>
<Link href={"/explore"}>Start Your Journey</Link>
</div>

<div className={styles["journey-right-container"]}>
<Image src={GoriGanga} alt="TREKKING" width="350" height={"256"} loading={"eager"}
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>
<Image
src={GoriGanga}
alt="TREKKING"
width="350"
height={"256"}
loading={"eager"}
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>
</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."}
description={"Egaas Bagwal is a unique festival celebrated 11 days after Diwali..."}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't remove it.

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."}
description={"The Nanda Devi Mahotsav is a grand celebration dedicated to Goddess Nanda Devi..."}
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

don't remove it

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"}/>
<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>
<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>


</>
);
}