diff --git a/public/AIPAN.jpg b/public/AIPAN.jpg new file mode 100644 index 0000000..ca848dd Binary files /dev/null and b/public/AIPAN.jpg differ diff --git a/public/handicrafthero.jpg b/public/handicrafthero.jpg new file mode 100644 index 0000000..aa24131 Binary files /dev/null and b/public/handicrafthero.jpg differ diff --git a/public/language.jpg b/public/language.jpg new file mode 100644 index 0000000..0d5ecb0 Binary files /dev/null and b/public/language.jpg differ diff --git a/public/ringal.jpg b/public/ringal.jpg new file mode 100644 index 0000000..6102fc2 Binary files /dev/null and b/public/ringal.jpg differ diff --git a/public/tamta.jpg b/public/tamta.jpg new file mode 100644 index 0000000..ef3828f Binary files /dev/null and b/public/tamta.jpg differ diff --git a/public/temple.jpg b/public/temple.jpg new file mode 100644 index 0000000..2c90a09 Binary files /dev/null and b/public/temple.jpg differ diff --git a/public/trekking.jpg b/public/trekking.jpg new file mode 100644 index 0000000..6e71a16 Binary files /dev/null and b/public/trekking.jpg differ diff --git a/public/wood.jpg b/public/wood.jpg new file mode 100644 index 0000000..e8fbaab Binary files /dev/null and b/public/wood.jpg differ diff --git a/public/wood_craving.jpg b/public/wood_craving.jpg new file mode 100644 index 0000000..db17350 Binary files /dev/null and b/public/wood_craving.jpg differ diff --git a/public/woolen.jpg b/public/woolen.jpg new file mode 100644 index 0000000..4a9bd3e Binary files /dev/null and b/public/woolen.jpg differ diff --git a/src/app/explore/page.tsx b/src/app/explore/page.tsx index 897f4da..803c977 100644 --- a/src/app/explore/page.tsx +++ b/src/app/explore/page.tsx @@ -1,38 +1,73 @@ -import styles from "./page.module.css" +import styles from "./page.module.css"; import SectionCard from "@/components/ui/SectionCard"; import Image from "next/image"; -import Mountain from '/public/mountain.svg'; -import Bagwal from "/public/bagwal.jpg"; +import Mountain from "/public/mountain.svg"; +import Aipan from "/public/AIPAN.jpg"; +import language from "/public/language.jpg"; +import trekking from "/public/trekking.jpg"; +import temple from "/public/temple.jpg"; export default function Explore() { - return ( - <> -
-

Explore Uttarakhand

- {"Mountain -
+ return ( + <> +
+

Explore Uttarakhand

+ {"Mountain +
+ - + - + -
+ -
-

We’re currently building this page…

+
+
+

We’re currently building this page…

-

In the meantime, check out the pages we’ve already completed - below:

-
-
- - - ); +

+ In the meantime, check out the pages we’ve already completed below: +

+
+
+ + ); } diff --git a/src/app/handicrafts/page.module.css b/src/app/handicrafts/page.module.css new file mode 100644 index 0000000..6121e99 --- /dev/null +++ b/src/app/handicrafts/page.module.css @@ -0,0 +1,107 @@ + .card-container{ + width: 95%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; +} + +.page-header { + background-color: #f5f5f5; + padding: 2rem 0; + } + + .hero-section { + display: flex; + justify-content: space-between; + align-items: center; + max-width: 1200px; + margin: 0 auto; + padding: 0 2rem; + } + + .text-container { + flex: 1; + } + + .text-container h1 { + font-size: 3rem; + color: #333; + margin-bottom: 0.5rem; + } + + .text-container p { + font-size: 1.2rem; + color: #666; + } + + .img-container { + flex: 1; + display: flex; + justify-content: flex-end; + } + + .img-container img { + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + } + + .featured-crafts { + max-width: 1200px; + margin: 2rem auto; + padding: 0 2rem; + } + + .featured-crafts h2 { + font-size: 2rem; + color: #333; + margin-bottom: 1rem; + text-align: center; + } + + .craft-icons { + display: flex; + justify-content: space-around; + flex-wrap: wrap; + } + + .craft-item { + display: flex; + flex-direction: column; + align-items: center; + margin: 1rem; + } + + .craft-item img { + margin-bottom: 0.5rem; + } + + .craft-item span { + font-size: 1rem; + color: #666; + } + + /* .card-container { + max-width: 1200px; + margin: 2rem auto; + padding: 0 2rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 2rem; + } */ + + @media (max-width: 768px) { + .hero-section { + flex-direction: column; + text-align: center; + } + + .img-container { + justify-content: center; + margin-top: 2rem; + } + + .craft-icons { + justify-content: center; + } + } \ No newline at end of file diff --git a/src/app/handicrafts/page.tsx b/src/app/handicrafts/page.tsx new file mode 100644 index 0000000..81243de --- /dev/null +++ b/src/app/handicrafts/page.tsx @@ -0,0 +1,119 @@ +import styles from "./page.module.css"; +import Image from "next/image"; +import Card from "@/components/ui/Card"; +import handicrafthero from "/public/handicrafthero.jpg"; + +// Ensure images are in the public folder (e.g., public/aipan.jpg) +export default function handicrafts() { + return ( + <> +
+
+
+

Handicrafts

+

DISCOVER THE ARTISTRY OF UTTARAKHAND

+
+
+ HANDICRAFTS +
+
+ +
+

Featured Crafts

+
+
+ Woodcarving + Woodcarving +
+
+ Textile Weaving + Copper Wire +
+
+ Metal Crafts + Ringal Crafts +
+
+ Pottery + Aipan +
+
+
+
+ +
+ + + + + + + + + +
+ + ); +} diff --git a/src/app/trekking/page.tsx b/src/app/trekking/page.tsx index 23dfcc1..b6235d1 100644 --- a/src/app/trekking/page.tsx +++ b/src/app/trekking/page.tsx @@ -1,127 +1,176 @@ -import styles from "./page.module.css" -import Image from "next/image" +import styles from "./page.module.css"; +import Image from "next/image"; import Card from "@/components/ui/Card"; -import TrekkingHeroImage from "/public/heroImage.png" +import TrekkingHeroImage from "/public/heroImage.png"; export default function Trekking() { - return (<> -
- -
-
-

Trekking

-

EXPLORE HIDDEN PLACES IN UTTARAKHAND

-
-
- TREKKING -
-
- - -
-
-
-
- -
-
- -
-
-
-
-
- -
- - - - - - - - - - - - - - - - - - - - - + return ( + <> +
+
+
+

Trekking

+

EXPLORE HIDDEN PLACES IN UTTARAKHAND

+
+
+ TREKKING +
+
+ +
+
+
+
+
+
+
+
- - ); +
+
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
+ + ); } diff --git a/src/components/Festivals.tsx b/src/components/Festivals.tsx index a022fc2..bbf6deb 100644 --- a/src/components/Festivals.tsx +++ b/src/components/Festivals.tsx @@ -1,34 +1,42 @@ -import React from 'react'; +import React from "react"; import { getUpcomingFestival } from "@/utils/festivals"; import SectionCard from "@/components/ui/SectionCard"; import Nanda_Sunanda from "/public/Nanda-Sunanda.webp"; - const Festivals: React.FC = () => { - const upcomingFestival = getUpcomingFestival(); // Get the upcoming festival + const upcomingFestival = getUpcomingFestival(); // Get the upcoming festival - // Function to format a date in DD-MM-YYYY format - const formatFestivalDate = (festivalDate: string): string => { - const [day, month] = festivalDate.split('-'); - const currentYear = new Date().getFullYear(); - return `${day}-${month}-${currentYear}`; // Convert to DD-MM-YYYY format - }; + // Function to format a date in DD-MM-YYYY format + const formatFestivalDate = (festivalDate: string): string => { + const [day, month] = festivalDate.split("-"); + const currentYear = new Date().getFullYear(); + return `${day}-${month}-${currentYear}`; // Convert to DD-MM-YYYY format + }; - return ( + return ( +
+

Upcoming Festivals in Uttarakhand

+ {upcomingFestival ? (
-

Upcoming Festivals in Uttarakhand

- {upcomingFestival ? ( -
- {upcomingFestival.name} - {formatFestivalDate(upcomingFestival.date)} -
- ) : ( -

No upcoming festivals

- )} - - + {upcomingFestival.name} -{" "} + {formatFestivalDate(upcomingFestival.date)}
- ); + ) : ( +

No upcoming festivals

+ )} + + +
+ ); }; export default Festivals; diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx index 7c4025a..e26c90a 100644 --- a/src/components/ui/Card.tsx +++ b/src/components/ui/Card.tsx @@ -1,32 +1,41 @@ import Image from "next/image"; import styles from "./Card.module.css"; import Link from "next/link"; -import Roopkund from "/public/roopkund.jpg" - type CardProps = { - title: string; - subTitle: string; - description: string; - image: string; - readMoreLink?: string -} + title: string; + subTitle: string; + description: string; + image: string; + readMoreLink?: string; +}; export default function Card(props: CardProps) { - return( -
-
-

{props.title}

-

{props.subTitle}

-

{props.description}

-
-
READ MORE
-
VIEW LOCATION
-
-
-
- {""} -
-
- ); -} \ No newline at end of file + return ( +
+
+

{props.title}

+

{props.subTitle}

+

{props.description}

+
+
+ READ MORE +
+
+ + VIEW LOCATION + +
+
+
+
+ {props.title} +
+
+ ); +} diff --git a/src/components/ui/SectionCard.tsx b/src/components/ui/SectionCard.tsx index 52dee4f..e63950e 100644 --- a/src/components/ui/SectionCard.tsx +++ b/src/components/ui/SectionCard.tsx @@ -1,60 +1,65 @@ -import React from 'react'; +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" +import { StaticImageData } from "next/image"; type SectionCardProps = { - cardTitle: string - title: string; - subTitle: string; - description: string; - image: StaticImageData; - readMoreLink: string - location?: string -} + cardTitle: string; + title: string; + subTitle: string; + description: string; + image: StaticImageData; + readMoreLink: string; + location?: string; +}; +const SectionCard = (props: SectionCardProps) => { + return ( +
+
+
+

{props.cardTitle}

+
-const SectionCard = ( props : SectionCardProps) => { - return ( -
+
+
+

{props.title}

+

{props.subTitle}

+

{props.description}

-
-
-

{props.cardTitle}

+
+
+ + READ MORE +
+ {props.location && ( +
+ + VIEW LOCATION + +
+ )} +
+
- -
-
-

{props.title}

-

{props.subTitle}

-

{props.description}

- -
-
READ MORE
- {props.location && ( -
- - VIEW LOCATION - -
- )} -
-
- -
- {""} -
- -
-
- ); +
+ {""} +
+
+ + ); }; -export default SectionCard; \ No newline at end of file +export default SectionCard;