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.

Sign up for GitHub

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 Page, Meta tags for SEO, Working Error Page #44

Closed
wants to merge 5 commits into from
Closed

Added:: Custom 404 Page, Meta tags for SEO, Working Error Page #44

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
710dfbc
added:: Custom 404 Notfound Page
myselfshivams Oct 2, 2024
d2eb625
added:: Meta tags for SEO
myselfshivams Oct 2, 2024
6bdc899
fixed:: 404 page removed border rand box shadow and added:: working-…
myselfshivams Oct 2, 2024
69fcb15
Update page.tsx
myselfshivams Oct 2, 2024
4e65be0
Update page.tsx
myselfshivams Oct 2, 2024
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
View file
Open in desktop
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>
);
}
69 changes: 69 additions & 0 deletions src/app/not-found.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
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',
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 Not Found
</h2>
<p style={{
fontSize: '18px',
marginBottom: '30px',
maxWidth: '600px',
lineHeight: '1.5',
color: '#555555',
}}>
Sorry, the page you are looking for does not exist. Please check the URL or return to the home page.
</p>
<Link href="/" style={{
padding: '10px 20px',
backgroundColor: '#000000',
color: '#ffffff',
borderRadius: '5px',
textDecoration: 'none',
fontWeight: 'bold',
transition: 'background-color 0.3s',
}}>
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;
135 changes: 83 additions & 52 deletions src/app/page.tsx
View file
Open in desktop
Copy link
Owner

Choose a reason for hiding this comment

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

Do not make any changes to this file. Restore it to its original state.

Original file line number Diff line number Diff line change
@@ -1,65 +1,89 @@
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/>*/}

{/*<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
<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
Expand All @@ -68,39 +92,45 @@ export default function Home() {
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>
identity but also deprive future generations of their cultural roots and traditions.
</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
<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. 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>
cultural heritage of Uttarakhand
</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"}
Expand All @@ -112,7 +142,6 @@ export default function Home() {
location={""}
/>


{/* UPCOMING FAIR */}
<SectionCard
cardTitle={"UPCOMING FAIR"}
Expand All @@ -124,28 +153,30 @@ export default function Home() {
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>


</>
);
}
Loading
Loading