From d6b93e71c61d5fbdbd20b6a92b0c6492a98c3837 Mon Sep 17 00:00:00 2001 From: Ikki Date: Tue, 29 Oct 2024 03:07:33 +0530 Subject: [PATCH 1/8] added-location --- .env.sample | 3 +- package.json | 1 + src/app/trekking/location-detail.js | 969 +++++++++++++------------- src/app/trekking/page.tsx | 2 +- src/components/ui/MapModal.module.css | 79 +++ src/components/ui/MapModal.tsx | 84 +++ src/components/ui/TrekCard.tsx | 22 +- 7 files changed, 682 insertions(+), 478 deletions(-) create mode 100644 src/components/ui/MapModal.module.css create mode 100644 src/components/ui/MapModal.tsx diff --git a/.env.sample b/.env.sample index da3c06c..9566e81 100644 --- a/.env.sample +++ b/.env.sample @@ -3,4 +3,5 @@ NODE_ENV= "development" SENDER_EMAIL= MAIL_SERVER_USER= MAIL_SERVER_PASS= -MAIL_SERVER_HOST= \ No newline at end of file +MAIL_SERVER_HOST= +NEXT_PUBLIC_MAPBOX_TOKEN= \ No newline at end of file diff --git a/package.json b/package.json index 62d64e3..8c7481d 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "bcryptjs": "^2.4.3", "drizzle-kit": "^0.24.2", "drizzle-orm": "^0.33.0", + "mapbox-gl": "^3.7.0", "next": "14.2.5", "next-auth": "^5.0.0-beta.22", "nodemailer": "^6.9.15", diff --git a/src/app/trekking/location-detail.js b/src/app/trekking/location-detail.js index 0a7ceb4..b8b026d 100644 --- a/src/app/trekking/location-detail.js +++ b/src/app/trekking/location-detail.js @@ -4,6 +4,8 @@ export const trekDetails = [ difficultyLevel: "DIFFICULT", altitude: 4536, district: "CHAMOLI", + address: "Roopkund Lake, Chamoli, Uttarakhand, India", + coordinates: [30.3440, 80.0940], introduction: "The Roopkund Trek is a mesmerizing journey through the pristine wilderness of the Himalayas, famously known as the 'Skeleton Lake.' This trek is shrouded in mystery and folklore, as the lake is home to human skeletal remains that date back centuries. Surrounded by majestic mountains and verdant meadows, the trek offers not just adventure but also a unique glimpse into the region's rich history and culture. As you traverse the rugged terrain, you'll encounter breathtaking landscapes that change with every turn, making this an unforgettable experience for every nature enthusiast.", overview: @@ -24,26 +26,30 @@ export const trekDetails = [ culturalInsights: [ "Engage with local communities and learn about their customs and traditions, enriching your understanding of the region.", "Experience the rich folklore surrounding the lake and the tales of the skeletal remains, deepening your connection to local history.", - "Visit local temples and understand the spiritual significance of the region, enhancing your cultural immersion." + "Visit local temples and understand the spiritual significance of the region, enhancing your cultural immersion.", ], physicalChallenges: [ "Steep ascents and descents requiring good stamina and acclimatization, essential for tackling high-altitude treks.", "Unpredictable weather conditions, particularly in the high-altitude sections, which can affect trekking plans.", - "Navigating rocky terrains that require careful footing and balance, adding an element of adventure and challenge." + "Navigating rocky terrains that require careful footing and balance, adding an element of adventure and challenge.", ], recommendedGear: [ "Trekking boots with good ankle support and grip, essential for navigating varied terrains safely.", "Warm clothing and waterproof jackets to handle sudden weather changes, ensuring comfort during the trek.", - "Sleeping bags suitable for cold temperatures and a sturdy backpack, essential for overnight camping and day treks." + "Sleeping bags suitable for cold temperatures and a sturdy backpack, essential for overnight camping and day treks.", ], - bestTimeToVisit: "The ideal months for the Roopkund Trek are May to June and September to October, when the weather is relatively stable, and the trails are accessible.", - image : 'https://upload.wikimedia.org/wikipedia/commons/2/24/Roopkund_Lake.jpg' + bestTimeToVisit: + "The ideal months for the Roopkund Trek are May to June and September to October, when the weather is relatively stable, and the trails are accessible.", + image: + "https://upload.wikimedia.org/wikipedia/commons/2/24/Roopkund_Lake.jpg", }, { title: "VALLEY OF FLOWERS TREK", difficultyLevel: "MODERATE", - altitude: 3658, - district: "CHAMOLI", + altitude: 3658, + district: "CHAMOLI", + address: "Nanda Devi National Park, Joshimath, Uttarakhand, India", + coordinates: [30.3954, 79.6613], introduction: "The Valley of Flowers Trek is a breathtaking expedition into one of India's most spectacular national parks. Known for its vibrant meadows filled with a stunning array of endemic flowers, this UNESCO World Heritage site is a paradise for nature lovers and photographers alike. As you trek through the valley, you’ll be greeted by a colorful landscape that comes alive during the monsoon season. The blend of beautiful flora and the majestic backdrop of snow-capped mountains creates a visual feast that captivates all who visit. The Valley of Flowers is not just a visual delight; it’s an opportunity to connect with nature at its most vibrant and enchanting.", overview: @@ -64,26 +70,31 @@ export const trekDetails = [ culturalInsights: [ "Interact with local communities, learning about their traditions and ways of life, enriching your cultural experience.", "Explore the spiritual significance of the region, with several temples along the way that tell stories of local beliefs.", - "Understand the conservation efforts in place to preserve the unique ecosystem of the valley, contributing to sustainable tourism." + "Understand the conservation efforts in place to preserve the unique ecosystem of the valley, contributing to sustainable tourism.", ], physicalChallenges: [ "Moderate trek suitable for beginners but requires good physical fitness to handle altitude and distance.", "Variable weather conditions that can change rapidly, especially in the high-altitude sections, requiring preparedness.", - "Some sections may involve steep ascents and rocky trails requiring caution, adding to the adventure." + "Some sections may involve steep ascents and rocky trails requiring caution, adding to the adventure.", ], recommendedGear: [ "Comfortable trekking shoes with good grip for diverse terrains, essential for a safe trekking experience.", "Layered clothing to adapt to varying temperatures and conditions, ensuring comfort throughout the trek.", - "A reliable daypack for carrying essentials, including water, snacks, and a first-aid kit for emergencies." + "A reliable daypack for carrying essentials, including water, snacks, and a first-aid kit for emergencies.", ], - bestTimeToVisit: "The best time to visit the Valley of Flowers is between late June and early September, when the flowers are in full bloom and the weather is pleasant.", - image : "https://upload.wikimedia.org/wikipedia/commons/6/63/Valley_of_flowers_uttaranchal_full_view.JPG" + bestTimeToVisit: + "The best time to visit the Valley of Flowers is between late June and early September, when the flowers are in full bloom and the weather is pleasant.", + image: + "https://upload.wikimedia.org/wikipedia/commons/6/63/Valley_of_flowers_uttaranchal_full_view.JPG", + }, { title: "HAR KI DUN TREK", difficultyLevel: "MODERATE", - altitude: 3566, - district: "UTTARKASHI", + altitude: 3566, + district: "UTTARKASHI", + address: "Har Ki Dun Valley, Uttarkashi, Uttarakhand, India", + coordinates: [30.6764, 78.4260], introduction: "The Har Ki Dun Trek offers a mesmerizing blend of natural beauty and rich cultural heritage, often referred to as the 'Valley of Gods.' This picturesque valley is steeped in mythological significance and is surrounded by magnificent snow-capped peaks, dense forests, and lush meadows. The trek is an ideal escape for those looking to immerse themselves in the tranquility of nature while exploring the rich history and traditions of the local people. Trekking in Har Ki Dun allows you to connect with the serene landscapes and delve into the stories that the mountains hold.", overview: @@ -104,26 +115,31 @@ export const trekDetails = [ culturalInsights: [ "Engage with the local community and learn about their traditions, enhancing your cultural understanding of the region.", "Explore the mythology associated with the valley, deepening your appreciation of its historical significance.", - "Discover the local cuisine and hospitality, providing a unique culinary experience that reflects the region's culture." + "Discover the local cuisine and hospitality, providing a unique culinary experience that reflects the region's culture.", ], physicalChallenges: [ "Moderate trek with steep sections, requiring good physical fitness and acclimatization to altitude.", "Weather conditions can change rapidly, especially in the higher altitudes, demanding preparedness and flexibility.", - "Rocky and uneven terrain in certain sections that require careful navigation and balance." + "Rocky and uneven terrain in certain sections that require careful navigation and balance.", ], recommendedGear: [ "Sturdy trekking boots for comfort and support on rugged terrains, essential for a safe trekking experience.", "Warm layers and waterproof clothing to handle variable weather conditions effectively.", - "A durable backpack to carry essential items, including a water bottle, snacks, and a first-aid kit." + "A durable backpack to carry essential items, including a water bottle, snacks, and a first-aid kit.", ], - bestTimeToVisit: "The ideal time to trek Har Ki Dun is from April to June and September to November, when the weather is pleasant and the trails are accessible.", - image : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Har_Ki_Dun.jpg/1200px-Har_Ki_Dun.jpg" + bestTimeToVisit: + "The ideal time to trek Har Ki Dun is from April to June and September to November, when the weather is pleasant and the trails are accessible.", + image: + "https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Har_Ki_Dun.jpg/1200px-Har_Ki_Dun.jpg", }, { title: "KEDARKANTHA TREK", difficultyLevel: "MODERATE", altitude: 3810, district: "UTTARKASHI", + address: "Kedarkantha, Uttarkashi, Uttarakhand, India", + coordinates: [31.0262, 78.5506], + introduction: "Experience the thrilling Kedarkantha Trek, renowned for its stunning winter landscapes and breathtaking summit views. This trek is especially popular during the winter months when the entire region is blanketed in snow, creating a picturesque setting for adventure seekers.", overview: @@ -143,180 +159,202 @@ export const trekDetails = [ culturalInsights: [ "Engage with the local communities in Sankri and surrounding villages, learning about their traditions and lifestyle.", "Explore the folklore associated with Kedarkantha, enhancing your appreciation of the region's cultural significance.", - "Sample local cuisine, offering a taste of the unique flavors and hospitality of the Himachali people." + "Sample local cuisine, offering a taste of the unique flavors and hospitality of the Himachali people.", ], physicalChallenges: [ "Moderate difficulty with steep sections and snow-covered trails, requiring good physical fitness and acclimatization to altitude.", "Weather conditions can change rapidly, so trekkers should be prepared for cold temperatures and snow.", - "Navigating through uneven terrain and maintaining balance on snowy paths may pose challenges." + "Navigating through uneven terrain and maintaining balance on snowy paths may pose challenges.", ], recommendedGear: [ "Sturdy, waterproof trekking boots with good grip to handle snow and icy conditions.", "Warm layers, including thermal wear, insulated jackets, and waterproof clothing to combat the cold.", - "Essential gear such as trekking poles, a good-quality backpack, and a first-aid kit for safety." + "Essential gear such as trekking poles, a good-quality backpack, and a first-aid kit for safety.", ], - bestTimeToVisit: "The best time for the Kedarkantha Trek is from December to April, when the region is covered in snow, providing an ideal winter trekking experience.", - image: "https://upload.wikimedia.org/wikipedia/commons/6/68/Kedarkantha_Peak.jpg" + bestTimeToVisit: + "The best time for the Kedarkantha Trek is from December to April, when the region is covered in snow, providing an ideal winter trekking experience.", + image: + "https://upload.wikimedia.org/wikipedia/commons/6/68/Kedarkantha_Peak.jpg", }, -{ - title: "NANDA DEVI BASE CAMP TREK", - difficultyLevel: "DIFFICULT", - altitude: 4000, - district: "CHAMOLI", - introduction: - "Discover the untouched beauty of Nanda Devi Base Camp, a majestic trek that offers a glimpse into the heart of the Himalayas. This trek is an adventure through one of India's most scenic and lesser-known trails, perfect for nature lovers and adventure seekers alike.", - overview: - "This trek leads you through lush forests and alpine meadows, culminating at the base of Nanda Devi, the second highest peak in India. With a combination of challenging terrains and breathtaking views, trekkers will experience the serenity of remote Himalayan landscapes and the rich biodiversity of the region.", - route: [ - "Day 1: Drive to Munsiari, your starting point, where you can enjoy the scenic views of the surrounding mountains.", - "Day 2: Trek to Lilam (6,600 feet), passing through scenic landscapes dotted with charming villages and vibrant flora.", - "Day 3: Continue to Pachu (8,000 feet), surrounded by pristine nature and breathtaking mountain vistas.", - "Day 4: Reach Nanda Devi Base Camp (13,120 feet) and soak in the stunning views of the towering peaks that surround you.", - "Day 5: Descend back to Pachu, followed by a return trek to Munsiari, reflecting on the unforgettable journey.", - ], - attractions: [ - "Spectacular views of Nanda Devi and surrounding peaks, including Nanda Kot and other majestic summits.", - "Rich biodiversity and unique flora, including rare Himalayan herbs and flowers.", - "Cultural insights from local villages, where you can interact with the inhabitants and learn about their traditional lifestyle.", - "Tranquility of the Himalayan wilderness, offering a peaceful retreat away from the hustle and bustle of everyday life.", - ], - culturalInsights: [ - "Engage with local communities, learning about their traditions and customs.", - "Experience the local cuisine, which often includes freshly prepared dishes using local ingredients.", - "Participate in traditional festivities if your trek coincides with local celebrations." - ], - physicalChallenges: [ - "Moderate to challenging sections of the trek that require good physical fitness and acclimatization to high altitudes.", - "Unpredictable weather conditions, necessitating preparation for rain, snow, and cold temperatures.", - ], - recommendedGear: [ - "Sturdy trekking boots with good ankle support for navigating varied terrains.", - "Warm layers, including thermal wear and waterproof clothing, to keep you comfortable.", - "Essential gear such as trekking poles, a high-quality backpack, and a first-aid kit." - ], - bestTimeToVisit: "The best time for the Nanda Devi Base Camp Trek is from May to October when the weather is relatively stable and the trails are clear.", - image : "https://upload.wikimedia.org/wikipedia/commons/d/d2/Mt._Nanda_Devi.jpg" -}, -{ - title: "PINDARI GLACIER TREK", - difficultyLevel: "MODERATE", - altitude: 3660, - district: "BAGESHWAR", - introduction: - "Venture to the Pindari Glacier, a mesmerizing trek that offers breathtaking views of the majestic glacier and surrounding peaks. This trek is renowned for its pristine natural beauty and serene atmosphere.", - overview: - "This trek takes you through quaint villages and lush landscapes, culminating at the Pindari Glacier, a true gem of the Kumaon Himalayas. The route is dotted with vibrant meadows and majestic pine forests, providing a rich tapestry of experiences along the way.", - route: [ - "Day 1: Drive to Khati (7,600 feet), your base camp, enjoying the scenic vistas along the way.", - "Day 2: Trek to Pindari Glacier (12,400 feet), enjoying the stunning scenery as you make your way to the glacier.", - "Day 3: Explore the glacier and its mesmerizing beauty, capturing moments with photography and reflection.", - "Day 4: Return trek to Khati, reflecting on your adventure and the breathtaking views encountered.", - ], - attractions: [ - "Stunning views of Pindari Glacier, with the impressive backdrop of Nanda Devi and other peaks.", - "Charming villages along the route, providing a glimpse into the local lifestyle.", - "Lush meadows and serene landscapes, ideal for nature walks and photography.", - "Unique opportunities for photography and exploration of the glacial landscape.", - ], - culturalInsights: [ - "Discover the local culture of the Kumaon region through interactions with villagers.", - "Taste local dishes that highlight the unique flavors of the region.", - ], - physicalChallenges: [ - "Moderate difficulty, with sections that may require stamina due to altitude.", - "Variable weather conditions, so trekkers should be prepared for sudden changes.", - ], - recommendedGear: [ - "Good-quality trekking boots with excellent grip and waterproofing.", - "Warm clothing layers, including down jackets and thermal innerwear.", - "Essential gear such as a daypack, hydration system, and a basic first-aid kit.", - ], - bestTimeToVisit: "The ideal time for the Pindari Glacier Trek is from May to October when the weather is stable and the trails are clear.", - image: "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Pindari_glacier%2C_Uttarakhand%2C_India.jpg/1200px-Pindari_glacier%2C_Uttarakhand%2C_India.jpg" -}, -{ - title: "BALI PASS TREK", - difficultyLevel: "DIFFICULT", - altitude: 4950, - district: "UTTARKASHI", - introduction: - "Embark on an extraordinary journey through the Bali Pass, a high-altitude trek that connects the Har Ki Dun and Yamunotri valleys. This trek offers a perfect blend of adventure and breathtaking natural beauty.", - overview: - "The Bali Pass Trek offers a rich tapestry of natural beauty, cultural experiences, and thrilling challenges, perfect for adventure enthusiasts. This trek is not only about the stunning landscapes but also about immersing yourself in the rich cultural heritage of the region.", - route: [ - "Day 1: Drive to Sankri (6,400 feet), the starting point, where you can admire the lush surroundings.", - "Day 2: Trek to Juda Ka Talab (9,100 feet), a serene campsite by an alpine lake.", - "Day 3: Continue to Bali Pass (16,200 feet), surrounded by stunning landscapes and glaciers.", - "Day 4: Descend to the beautiful Yamunotri valley, where hot springs and scenic beauty await.", - "Day 5: Return trek to Sankri, cherishing your journey and experiences.", - ], - attractions: [ - "Spectacular views from Bali Pass, providing panoramic vistas of the surrounding peaks and valleys.", - "Diverse landscapes from meadows to glaciers, showcasing the region's natural variety.", - "Cultural insights from local villages, offering a chance to learn about traditional customs and lifestyles.", - "Unique flora and fauna in the region, including rare and endemic species.", - ], - culturalInsights: [ - "Engage with local communities to understand their traditions and ways of life.", - "Explore local cuisine, which includes a mix of simple yet flavorful dishes.", - ], - physicalChallenges: [ - "High-altitude trek requiring good physical fitness and acclimatization.", - "Steep ascents and descents that demand endurance and stamina.", - ], - recommendedGear: [ - "Robust trekking boots suitable for varied terrains.", - "Warm clothing, including insulated jackets and moisture-wicking layers.", - "Essential gear such as a hydration system, trekking poles, and a first-aid kit.", - ], - bestTimeToVisit: "The best time for the Bali Pass Trek is from May to October when the weather is favorable and the trails are accessible.", - image : "https://himalayashelter.com/wp-content/uploads/2021/08/bali-pass-top-1024x576.webp" -}, + { + title: "NANDA DEVI BASE CAMP TREK", + difficultyLevel: "DIFFICULT", + altitude: 4000, + district: "CHAMOLI", + address: "Nanda Devi National Park, Uttarakhand, India", + coordinates: [30.3896, 79.7160], -{ - title: "KUMAON HIMALAYAS TREK", - difficultyLevel: "MODERATE", - altitude: 4200, - district: "ALMORA", - introduction: - "Explore the pristine beauty of the Kumaon Himalayas, where adventure and nature come together in perfect harmony. This trek promises an unforgettable experience for nature lovers and adventure seekers, offering an immersive journey through one of India's most scenic regions.", - overview: - "This trek offers a variety of landscapes, from lush forests to serene lakes, and showcases the rich biodiversity of the region. As you traverse through charming villages and vibrant meadows, you'll witness the majestic peaks of the Himalayas, making this trek a feast for the eyes and soul.", - route: [ - "Day 1: Drive to Munsiari (7,600 feet), your base camp, where you can acclimatize and soak in the stunning surroundings.", - "Day 2: Trek to Khaliya Top (11,500 feet) for panoramic views of the surrounding peaks, including Nanda Devi and Panchachuli.", - "Day 3: Explore the surrounding lakes and meadows, including the pristine Khaliya Lake, where you can relax and enjoy nature's tranquility.", - "Day 4: Descend back to Munsiari, reflecting on your journey and the breathtaking landscapes you've encountered.", - ], - attractions: [ - "Breathtaking views of the Kumaon peaks, including the majestic Nanda Devi and the stunning Panchachuli range.", - "Serene lakes such as Khaliya Lake, known for its crystal-clear waters and serene atmosphere.", - "Rich cultural heritage and local traditions, offering insights into the lifestyle and customs of the Kumaon region.", - "Diverse wildlife and ecosystems, providing opportunities for bird watching and encountering unique flora.", - ], - culturalInsights: [ - "Interact with local communities to learn about their customs and traditional practices.", - "Savor local dishes that highlight the culinary heritage of the Kumaon region, such as 'Aloo Gutuk' and 'Bhatt ki churdkhani'.", - ], - physicalChallenges: [ - "Moderate difficulty, suitable for trekkers with a basic level of fitness; however, good acclimatization is essential.", - "Variable weather conditions may affect the trek, so preparedness for rain and cool temperatures is necessary.", - ], - recommendedGear: [ - "Sturdy trekking boots with good grip and support for the varied terrain.", - "Layered clothing, including thermal wear and a waterproof jacket, to stay comfortable.", - "Essential trekking gear such as a daypack, water bottle, and first-aid kit.", - ], - bestTimeToVisit: "The best time for the Kumaon Himalayas Trek is from April to October when the weather is pleasant and the trails are clear.", - image :"https://cdn.britannica.com/23/120923-159-7ABAB87D/Nanga-Parbat.jpg" -}, + introduction: + "Discover the untouched beauty of Nanda Devi Base Camp, a majestic trek that offers a glimpse into the heart of the Himalayas. This trek is an adventure through one of India's most scenic and lesser-known trails, perfect for nature lovers and adventure seekers alike.", + overview: + "This trek leads you through lush forests and alpine meadows, culminating at the base of Nanda Devi, the second highest peak in India. With a combination of challenging terrains and breathtaking views, trekkers will experience the serenity of remote Himalayan landscapes and the rich biodiversity of the region.", + route: [ + "Day 1: Drive to Munsiari, your starting point, where you can enjoy the scenic views of the surrounding mountains.", + "Day 2: Trek to Lilam (6,600 feet), passing through scenic landscapes dotted with charming villages and vibrant flora.", + "Day 3: Continue to Pachu (8,000 feet), surrounded by pristine nature and breathtaking mountain vistas.", + "Day 4: Reach Nanda Devi Base Camp (13,120 feet) and soak in the stunning views of the towering peaks that surround you.", + "Day 5: Descend back to Pachu, followed by a return trek to Munsiari, reflecting on the unforgettable journey.", + ], + attractions: [ + "Spectacular views of Nanda Devi and surrounding peaks, including Nanda Kot and other majestic summits.", + "Rich biodiversity and unique flora, including rare Himalayan herbs and flowers.", + "Cultural insights from local villages, where you can interact with the inhabitants and learn about their traditional lifestyle.", + "Tranquility of the Himalayan wilderness, offering a peaceful retreat away from the hustle and bustle of everyday life.", + ], + culturalInsights: [ + "Engage with local communities, learning about their traditions and customs.", + "Experience the local cuisine, which often includes freshly prepared dishes using local ingredients.", + "Participate in traditional festivities if your trek coincides with local celebrations.", + ], + physicalChallenges: [ + "Moderate to challenging sections of the trek that require good physical fitness and acclimatization to high altitudes.", + "Unpredictable weather conditions, necessitating preparation for rain, snow, and cold temperatures.", + ], + recommendedGear: [ + "Sturdy trekking boots with good ankle support for navigating varied terrains.", + "Warm layers, including thermal wear and waterproof clothing, to keep you comfortable.", + "Essential gear such as trekking poles, a high-quality backpack, and a first-aid kit.", + ], + bestTimeToVisit: + "The best time for the Nanda Devi Base Camp Trek is from May to October when the weather is relatively stable and the trails are clear.", + image: + "https://upload.wikimedia.org/wikipedia/commons/d/d2/Mt._Nanda_Devi.jpg", + }, + { + title: "PINDARI GLACIER TREK", + difficultyLevel: "MODERATE", + altitude: 3660, + district: "BAGESHWAR", + address: "Pindari Glacier, Bageshwar, Uttarakhand, India", + coordinates: [30.2546, 80.0155], + + introduction: + "Venture to the Pindari Glacier, a mesmerizing trek that offers breathtaking views of the majestic glacier and surrounding peaks. This trek is renowned for its pristine natural beauty and serene atmosphere.", + overview: + "This trek takes you through quaint villages and lush landscapes, culminating at the Pindari Glacier, a true gem of the Kumaon Himalayas. The route is dotted with vibrant meadows and majestic pine forests, providing a rich tapestry of experiences along the way.", + route: [ + "Day 1: Drive to Khati (7,600 feet), your base camp, enjoying the scenic vistas along the way.", + "Day 2: Trek to Pindari Glacier (12,400 feet), enjoying the stunning scenery as you make your way to the glacier.", + "Day 3: Explore the glacier and its mesmerizing beauty, capturing moments with photography and reflection.", + "Day 4: Return trek to Khati, reflecting on your adventure and the breathtaking views encountered.", + ], + attractions: [ + "Stunning views of Pindari Glacier, with the impressive backdrop of Nanda Devi and other peaks.", + "Charming villages along the route, providing a glimpse into the local lifestyle.", + "Lush meadows and serene landscapes, ideal for nature walks and photography.", + "Unique opportunities for photography and exploration of the glacial landscape.", + ], + culturalInsights: [ + "Discover the local culture of the Kumaon region through interactions with villagers.", + "Taste local dishes that highlight the unique flavors of the region.", + ], + physicalChallenges: [ + "Moderate difficulty, with sections that may require stamina due to altitude.", + "Variable weather conditions, so trekkers should be prepared for sudden changes.", + ], + recommendedGear: [ + "Good-quality trekking boots with excellent grip and waterproofing.", + "Warm clothing layers, including down jackets and thermal innerwear.", + "Essential gear such as a daypack, hydration system, and a basic first-aid kit.", + ], + bestTimeToVisit: + "The ideal time for the Pindari Glacier Trek is from May to October when the weather is stable and the trails are clear.", + image: + "https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Pindari_glacier%2C_Uttarakhand%2C_India.jpg/1200px-Pindari_glacier%2C_Uttarakhand%2C_India.jpg", + }, + { + title: "BALI PASS TREK", + difficultyLevel: "DIFFICULT", + altitude: 4950, + district: "UTTARKASHI", + address: "Bali Pass, Yamunotri, Uttarkashi, Uttarakhand, India", + coordinates: [31.0597, 78.4649] , + + introduction: + "Embark on an extraordinary journey through the Bali Pass, a high-altitude trek that connects the Har Ki Dun and Yamunotri valleys. This trek offers a perfect blend of adventure and breathtaking natural beauty.", + overview: + "The Bali Pass Trek offers a rich tapestry of natural beauty, cultural experiences, and thrilling challenges, perfect for adventure enthusiasts. This trek is not only about the stunning landscapes but also about immersing yourself in the rich cultural heritage of the region.", + route: [ + "Day 1: Drive to Sankri (6,400 feet), the starting point, where you can admire the lush surroundings.", + "Day 2: Trek to Juda Ka Talab (9,100 feet), a serene campsite by an alpine lake.", + "Day 3: Continue to Bali Pass (16,200 feet), surrounded by stunning landscapes and glaciers.", + "Day 4: Descend to the beautiful Yamunotri valley, where hot springs and scenic beauty await.", + "Day 5: Return trek to Sankri, cherishing your journey and experiences.", + ], + attractions: [ + "Spectacular views from Bali Pass, providing panoramic vistas of the surrounding peaks and valleys.", + "Diverse landscapes from meadows to glaciers, showcasing the region's natural variety.", + "Cultural insights from local villages, offering a chance to learn about traditional customs and lifestyles.", + "Unique flora and fauna in the region, including rare and endemic species.", + ], + culturalInsights: [ + "Engage with local communities to understand their traditions and ways of life.", + "Explore local cuisine, which includes a mix of simple yet flavorful dishes.", + ], + physicalChallenges: [ + "High-altitude trek requiring good physical fitness and acclimatization.", + "Steep ascents and descents that demand endurance and stamina.", + ], + recommendedGear: [ + "Robust trekking boots suitable for varied terrains.", + "Warm clothing, including insulated jackets and moisture-wicking layers.", + "Essential gear such as a hydration system, trekking poles, and a first-aid kit.", + ], + bestTimeToVisit: + "The best time for the Bali Pass Trek is from May to October when the weather is favorable and the trails are accessible.", + image: + "https://himalayashelter.com/wp-content/uploads/2021/08/bali-pass-top-1024x576.webp", + }, + + { + title: "KUMAON HIMALAYAS TREK", + difficultyLevel: "MODERATE", + altitude: 4200, + district: "ALMORA", + address: "Kumaon Region, Uttarakhand, India", + coordinates: [29.4440, 79.5500] , + introduction: + "Explore the pristine beauty of the Kumaon Himalayas, where adventure and nature come together in perfect harmony. This trek promises an unforgettable experience for nature lovers and adventure seekers, offering an immersive journey through one of India's most scenic regions.", + overview: + "This trek offers a variety of landscapes, from lush forests to serene lakes, and showcases the rich biodiversity of the region. As you traverse through charming villages and vibrant meadows, you'll witness the majestic peaks of the Himalayas, making this trek a feast for the eyes and soul.", + route: [ + "Day 1: Drive to Munsiari (7,600 feet), your base camp, where you can acclimatize and soak in the stunning surroundings.", + "Day 2: Trek to Khaliya Top (11,500 feet) for panoramic views of the surrounding peaks, including Nanda Devi and Panchachuli.", + "Day 3: Explore the surrounding lakes and meadows, including the pristine Khaliya Lake, where you can relax and enjoy nature's tranquility.", + "Day 4: Descend back to Munsiari, reflecting on your journey and the breathtaking landscapes you've encountered.", + ], + attractions: [ + "Breathtaking views of the Kumaon peaks, including the majestic Nanda Devi and the stunning Panchachuli range.", + "Serene lakes such as Khaliya Lake, known for its crystal-clear waters and serene atmosphere.", + "Rich cultural heritage and local traditions, offering insights into the lifestyle and customs of the Kumaon region.", + "Diverse wildlife and ecosystems, providing opportunities for bird watching and encountering unique flora.", + ], + culturalInsights: [ + "Interact with local communities to learn about their customs and traditional practices.", + "Savor local dishes that highlight the culinary heritage of the Kumaon region, such as 'Aloo Gutuk' and 'Bhatt ki churdkhani'.", + ], + physicalChallenges: [ + "Moderate difficulty, suitable for trekkers with a basic level of fitness; however, good acclimatization is essential.", + "Variable weather conditions may affect the trek, so preparedness for rain and cool temperatures is necessary.", + ], + recommendedGear: [ + "Sturdy trekking boots with good grip and support for the varied terrain.", + "Layered clothing, including thermal wear and a waterproof jacket, to stay comfortable.", + "Essential trekking gear such as a daypack, water bottle, and first-aid kit.", + ], + bestTimeToVisit: + "The best time for the Kumaon Himalayas Trek is from April to October when the weather is pleasant and the trails are clear.", + image: "https://cdn.britannica.com/23/120923-159-7ABAB87D/Nanga-Parbat.jpg", + }, { title: "TUNGNATH CHOPTA TREK", difficultyLevel: "EASY", altitude: 3680, district: "CHAMOLI", + address: "Tungnath, Chamoli, Uttarakhand, India", + coordinates: [30.3225, 79.0658], introduction: "Experience the breathtaking beauty of the Chopta Tungnath Trek, known for its stunning landscapes and rich cultural heritage. This trek, leading to the highest Shiva temple in the world, combines adventure with spiritual significance, making it a unique experience for trekkers. Nestled in the heart of the Himalayas, Chopta is often referred to as the 'Mini Switzerland of India' due to its picturesque meadows and panoramic views of the surrounding peaks. The trek not only offers mesmerizing views but also a deep connection to the spiritual essence of the region, making it a favorite among both adventure seekers and those seeking solace.", overview: @@ -348,299 +386,292 @@ export const trekDetails = [ "Warm clothing layers for high-altitude temperatures.", "A daypack for carrying essentials, including water, snacks, and a first-aid kit.", ], - bestTimeToVisit: "The best time for the Chopta Tungnath Trek is between March to June and September to November, when the weather is pleasant and the trails are clear.", - image : "https://trisoj.com/travel-guide/wp-content/uploads/2022/11/Chandrashila.png" + bestTimeToVisit: + "The best time for the Chopta Tungnath Trek is between March to June and September to November, when the weather is pleasant and the trails are clear.", + image: + "https://trisoj.com/travel-guide/wp-content/uploads/2022/11/Chandrashila.png", + }, + { + title: "RUPIN PASS TREK", + difficultyLevel: "DIFFICULT", + altitude: 4650, + district: "UTTARKASHI", + address: "Rupin Pass, Uttarakhand, India", + coordinates: [31.1414, 78.5780], + introduction: + "Challenge yourself with the Rupin Pass trek, a breathtaking adventure that showcases the stunning beauty of the Himalayas. Known for its dramatic landscapes, this trek offers a unique opportunity to explore the diverse terrains and experience the rich culture of the region.", + overview: + "This trek takes you through picturesque landscapes, charming villages, and vibrant meadows, culminating at the Rupin Pass, which stands at an elevation of 4,650 meters. The journey is filled with mesmerizing views of snow-capped peaks, gushing waterfalls, and lush green valleys, making it a must-do for every adventure enthusiast.", + route: [ + "Day 1: Drive to Dhaula, the starting point, and acclimatize to the altitude while soaking in the natural beauty.", + "Day 2: Trek to Sewa, immersing in local culture and enjoying the warm hospitality of the villagers.", + "Day 3: Continue to Rupin Pass base camp, surrounded by breathtaking views of the surrounding peaks.", + "Day 4: Summit Rupin Pass and enjoy the panoramic views of the majestic Himalayas before descending.", + "Day 5: Return trek to Sewa, reflecting on your journey and the unforgettable memories created.", + ], + attractions: [ + "Stunning views from Rupin Pass, offering a vantage point of the snow-clad peaks.", + "Charming villages along the route, providing insight into local traditions and lifestyles.", + "Rich biodiversity and unique landscapes, including lush meadows, dense forests, and gushing streams.", + "Cultural insights from local communities, enhancing the overall trekking experience.", + ], + physicalChallenges: [ + "Moderate to challenging trek, requiring good physical fitness and acclimatization due to the high altitude.", + "Weather conditions can change rapidly, so preparedness for snow and rain is essential.", + ], + recommendedGear: [ + "High-quality trekking boots with good ankle support for rough terrain.", + "Warm clothing layers and waterproof gear to stay comfortable in varying weather conditions.", + "Essential trekking equipment, including trekking poles, a hydration system, and a first-aid kit.", + ], + culturalInsights: [ + "Experience the hospitality of the local villagers, who provide insights into their daily lives and customs.", + "Learn about the traditional practices and folklore of the region during your trek.", + ], + bestTimeToVisit: + "The best time for the Rupin Pass Trek is from May to October, when the weather is clear and the trails are accessible.", + image: + "https://trekthehimalayas.com/images/RupinPassTrek/GalleryDesktop/Winter/625ce941-4dcc-46d4-a5b7-015e4d037005_Rupin-Pass-6.webp", + }, + { + title: "CHOPTA TO TUNGNATH AND BACK", + difficultyLevel: "EASY", + altitude: 3680, + district: "CHAMOLI", + address: "Chopta, Chamoli, Uttarakhand, India", + coordinates: [30.3158, 79.0962] , + introduction: + "Embark on a scenic trek from Chopta to Tungnath, a journey filled with natural beauty and spiritual significance. This trek not only offers stunning vistas but also allows you to connect with the sacred heritage of the region.", + overview: + "This trek offers a perfect blend of adventure and tranquility, showcasing the stunning landscapes of the region. As you ascend towards Tungnath, you’ll encounter lush green meadows, dense forests, and picturesque views of the surrounding Himalayan peaks, making it a rejuvenating experience.", + route: [ + "Day 1: Drive to Chopta (2,680 meters), your base camp, where you can relax and acclimatize to the altitude.", + "Day 2: Trek to Tungnath (3,680 meters), visiting the ancient Tungnath Temple, one of the highest Shiva temples in the world.", + "Day 3: Return trek to Chopta, with reflections on your experience and the serene beauty of the landscape.", + ], + attractions: [ + "Tungnath Temple, a significant pilgrimage site with deep spiritual resonance.", + "Mesmerizing views of the surrounding peaks, including Chaukamba and Neelkanth.", + "Lush green meadows and forests, providing a serene atmosphere for nature lovers.", + "Serenity and tranquility of the Himalayan landscape, perfect for meditation and relaxation.", + ], + culturalInsights: [ + "Learn about the local legends and traditions associated with the Tungnath Temple and its significance in Hindu mythology.", + "Interact with local villagers and experience their hospitality and unique way of life.", + ], + physicalChallenges: [ + "Moderate trek, suitable for beginners with a reasonable level of fitness; however, be prepared for steep sections.", + "Variable weather conditions, especially in early spring and late autumn, may require warm clothing and rain gear.", + ], + recommendedGear: [ + "Comfortable trekking shoes with good grip and support for the ascent.", + "Layered clothing to accommodate changes in temperature throughout the day.", + "Essential items like a daypack, water bottle, and a basic first-aid kit.", + ], + bestTimeToVisit: + "The best time for the Chopta to Tungnath trek is from April to June and September to November, when the weather is pleasant and the trails are clear.", + image: "https://trekiq.in/uploads/2021/04/Chandrashila-in-winters.jpg", + }, + { + title: "PANWALI KANTHA TREK", + difficultyLevel: "MODERATE", + altitude: 3075, + district: "TEHRI GARHWAL", + address: "Panwali Kantha, Tehri Garhwal, Uttarakhand, India", + coordinates: [30.7110, 78.6460], + introduction: + "The Panwali Kantha Trek is a serene journey that offers a perfect blend of lush greenery, stunning views, and rich cultural heritage. Nestled in the Garhwal Himalayas, this trek is ideal for beginners and nature lovers looking to escape into the wilderness. The path winds through quaint villages, dense forests, and breathtaking meadows, providing an immersive experience in the heart of Uttarakhand's natural beauty.", + overview: + "Covering approximately 36 kilometers, the Panwali Kantha Trek leads you to an altitude of 10,700 feet. The trek begins at the charming village of Kandikhal and ascends through thick oak forests and lush meadows. As you reach the summit, you are greeted with panoramic views of the Himalayan peaks and the enchanting landscapes of the region. The trek is dotted with local flora and fauna, making it a perfect spot for wildlife enthusiasts and photographers alike.", + route: [ + "Day 1: Drive to Kandikhal, the starting point, and acclimatize to the beautiful surroundings.", + "Day 2: Trek to Panwali Kantha (10,700 feet) through picturesque meadows and enjoy stunning views along the way.", + "Day 3: Explore the area, interact with local communities, and take in the serene beauty of the Himalayas before returning to Kandikhal.", + ], + attractions: [ + "Breathtaking views of the surrounding mountains and valleys, perfect for photography enthusiasts.", + "Rich biodiversity, including various species of flora and fauna unique to the region.", + "Cultural experiences with local villagers, offering insights into traditional Garhwali lifestyles.", + ], + culturalInsights: [ + "Engage with local families and learn about their daily lives, customs, and traditional practices.", + "Explore local temples and understand their significance in the cultural landscape of Uttarakhand.", + ], + physicalChallenges: [ + "Gentle ascents with some steep sections, making it suitable for beginner trekkers with moderate fitness levels.", + "Potentially unpredictable weather, especially in higher altitudes, necessitating preparedness.", + ], + recommendedGear: [ + "Comfortable trekking shoes, suitable for varied terrain and long walks.", + "Lightweight and breathable clothing for warm days, along with a warm jacket for cooler evenings.", + "A reliable backpack to carry essentials, along with a water bottle for hydration.", + ], + bestTimeToVisit: + "The best time to visit Panwali Kantha is from April to June and September to November, ensuring pleasant weather for trekking.", + image: + "https://uttarakhandtriptrek.com/wp-content/uploads/2019/03/Panwali-Kantha-Trek-Image.jpg", + }, + { + title: "DRONAGIRI TREK", + difficultyLevel: "MODERATE", + altitude: 6070, + district: "CHAMOLI", + address: "Dronagiri Peak, Chamoli, Uttarakhand, India", + coordinates: [30.3334, 80.1312] , + + introduction: + "The Dronagiri Trek takes you on an extraordinary journey to one of the lesser-known peaks of the Himalayas. It is renowned for its stunning landscapes and rich mythology associated with the Dronagiri mountain, believed to be where Hanuman fetched the Sanjeevani herb. This trek offers breathtaking views of the surrounding mountains and a unique adventure for trekkers.", + overview: + "Spanning around 45 kilometers, the Dronagiri Trek reaches an altitude of 19,918 feet. The journey begins at the village of Kanchoti and leads trekkers through lush forests, rocky terrains, and picturesque meadows. The trek is challenging yet rewarding, offering stunning vistas of snow-clad peaks and valleys as you approach the summit. This trek is perfect for experienced trekkers looking for an adventure in the heart of the Himalayas.", + route: [ + "Day 1: Drive to Kanchoti, the base camp, and acclimatize to the stunning views.", + "Day 2: Trek to Dronagiri Base Camp (16,500 feet) through lush forests and rocky terrains.", + "Day 3: Summit Dronagiri Peak (19,918 feet) and return to Base Camp.", + "Day 4: Descend back to Kanchoti, reflecting on the incredible journey.", + ], + attractions: [ + "Panoramic views of Nanda Devi, Kamet, and other prominent peaks of the Himalayas.", + "Rich flora and fauna, with unique species found in high-altitude regions.", + "Mythological significance of Dronagiri, making it a culturally enriching experience.", + ], + culturalInsights: [ + "Learn about the legends associated with Dronagiri and its significance in Hindu mythology.", + "Experience the local culture and traditions of the villages along the trek.", + ], + physicalChallenges: [ + "Steep ascents and rocky terrains require good stamina and physical fitness.", + "Altitude sickness may be a concern due to high elevations, necessitating acclimatization.", + ], + recommendedGear: [ + "High-quality trekking boots for challenging terrains and a good grip.", + "Layered clothing suitable for varying temperatures, along with a warm sleeping bag.", + "A sturdy backpack for carrying essentials, including hydration packs.", + ], + bestTimeToVisit: + "The ideal time for the Dronagiri Trek is from May to June and September to October, offering stable weather conditions.", + image: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiWcyBC6dgDZKjp_xyCXjJSEEWd_XdnTrsAQ&s", }, { - title: "RUPIN PASS TREK", - difficultyLevel: "DIFFICULT", - altitude: 4650, - district: "UTTARKASHI", - introduction: - "Challenge yourself with the Rupin Pass trek, a breathtaking adventure that showcases the stunning beauty of the Himalayas. Known for its dramatic landscapes, this trek offers a unique opportunity to explore the diverse terrains and experience the rich culture of the region.", - overview: - "This trek takes you through picturesque landscapes, charming villages, and vibrant meadows, culminating at the Rupin Pass, which stands at an elevation of 4,650 meters. The journey is filled with mesmerizing views of snow-capped peaks, gushing waterfalls, and lush green valleys, making it a must-do for every adventure enthusiast.", - route: [ - "Day 1: Drive to Dhaula, the starting point, and acclimatize to the altitude while soaking in the natural beauty.", - "Day 2: Trek to Sewa, immersing in local culture and enjoying the warm hospitality of the villagers.", - "Day 3: Continue to Rupin Pass base camp, surrounded by breathtaking views of the surrounding peaks.", - "Day 4: Summit Rupin Pass and enjoy the panoramic views of the majestic Himalayas before descending.", - "Day 5: Return trek to Sewa, reflecting on your journey and the unforgettable memories created.", - ], - attractions: [ - "Stunning views from Rupin Pass, offering a vantage point of the snow-clad peaks.", - "Charming villages along the route, providing insight into local traditions and lifestyles.", - "Rich biodiversity and unique landscapes, including lush meadows, dense forests, and gushing streams.", - "Cultural insights from local communities, enhancing the overall trekking experience.", - ], - physicalChallenges: [ - "Moderate to challenging trek, requiring good physical fitness and acclimatization due to the high altitude.", - "Weather conditions can change rapidly, so preparedness for snow and rain is essential.", - ], - recommendedGear: [ - "High-quality trekking boots with good ankle support for rough terrain.", - "Warm clothing layers and waterproof gear to stay comfortable in varying weather conditions.", - "Essential trekking equipment, including trekking poles, a hydration system, and a first-aid kit.", - ], - culturalInsights: [ - "Experience the hospitality of the local villagers, who provide insights into their daily lives and customs.", - "Learn about the traditional practices and folklore of the region during your trek.", - ], - bestTimeToVisit: "The best time for the Rupin Pass Trek is from May to October, when the weather is clear and the trails are accessible.", - image : "https://trekthehimalayas.com/images/RupinPassTrek/GalleryDesktop/Winter/625ce941-4dcc-46d4-a5b7-015e4d037005_Rupin-Pass-6.webp" - }, - { - title: "CHOPTA TO TUNGNATH AND BACK", - difficultyLevel: "EASY", - altitude: 3680, - district: "CHAMOLI", - introduction: - "Embark on a scenic trek from Chopta to Tungnath, a journey filled with natural beauty and spiritual significance. This trek not only offers stunning vistas but also allows you to connect with the sacred heritage of the region.", - overview: - "This trek offers a perfect blend of adventure and tranquility, showcasing the stunning landscapes of the region. As you ascend towards Tungnath, you’ll encounter lush green meadows, dense forests, and picturesque views of the surrounding Himalayan peaks, making it a rejuvenating experience.", - route: [ - "Day 1: Drive to Chopta (2,680 meters), your base camp, where you can relax and acclimatize to the altitude.", - "Day 2: Trek to Tungnath (3,680 meters), visiting the ancient Tungnath Temple, one of the highest Shiva temples in the world.", - "Day 3: Return trek to Chopta, with reflections on your experience and the serene beauty of the landscape.", - ], - attractions: [ - "Tungnath Temple, a significant pilgrimage site with deep spiritual resonance.", - "Mesmerizing views of the surrounding peaks, including Chaukamba and Neelkanth.", - "Lush green meadows and forests, providing a serene atmosphere for nature lovers.", - "Serenity and tranquility of the Himalayan landscape, perfect for meditation and relaxation.", - ], - culturalInsights: [ - "Learn about the local legends and traditions associated with the Tungnath Temple and its significance in Hindu mythology.", - "Interact with local villagers and experience their hospitality and unique way of life.", - ], - physicalChallenges: [ - "Moderate trek, suitable for beginners with a reasonable level of fitness; however, be prepared for steep sections.", - "Variable weather conditions, especially in early spring and late autumn, may require warm clothing and rain gear.", - ], - recommendedGear: [ - "Comfortable trekking shoes with good grip and support for the ascent.", - "Layered clothing to accommodate changes in temperature throughout the day.", - "Essential items like a daypack, water bottle, and a basic first-aid kit.", - ], - bestTimeToVisit: "The best time for the Chopta to Tungnath trek is from April to June and September to November, when the weather is pleasant and the trails are clear.", - image : "https://trekiq.in/uploads/2021/04/Chandrashila-in-winters.jpg" - }, - { - title: "PANWALI KANTHA TREK", - difficultyLevel: "MODERATE", - altitude: 3075, - district: "TEHRI GARHWAL", - introduction: - "The Panwali Kantha Trek is a serene journey that offers a perfect blend of lush greenery, stunning views, and rich cultural heritage. Nestled in the Garhwal Himalayas, this trek is ideal for beginners and nature lovers looking to escape into the wilderness. The path winds through quaint villages, dense forests, and breathtaking meadows, providing an immersive experience in the heart of Uttarakhand's natural beauty.", - overview: - "Covering approximately 36 kilometers, the Panwali Kantha Trek leads you to an altitude of 10,700 feet. The trek begins at the charming village of Kandikhal and ascends through thick oak forests and lush meadows. As you reach the summit, you are greeted with panoramic views of the Himalayan peaks and the enchanting landscapes of the region. The trek is dotted with local flora and fauna, making it a perfect spot for wildlife enthusiasts and photographers alike.", - route: [ - "Day 1: Drive to Kandikhal, the starting point, and acclimatize to the beautiful surroundings.", - "Day 2: Trek to Panwali Kantha (10,700 feet) through picturesque meadows and enjoy stunning views along the way.", - "Day 3: Explore the area, interact with local communities, and take in the serene beauty of the Himalayas before returning to Kandikhal.", - ], - attractions: [ - "Breathtaking views of the surrounding mountains and valleys, perfect for photography enthusiasts.", - "Rich biodiversity, including various species of flora and fauna unique to the region.", - "Cultural experiences with local villagers, offering insights into traditional Garhwali lifestyles." - ], - culturalInsights: [ - "Engage with local families and learn about their daily lives, customs, and traditional practices.", - "Explore local temples and understand their significance in the cultural landscape of Uttarakhand." - ], - physicalChallenges: [ - "Gentle ascents with some steep sections, making it suitable for beginner trekkers with moderate fitness levels.", - "Potentially unpredictable weather, especially in higher altitudes, necessitating preparedness." - ], - recommendedGear: [ - "Comfortable trekking shoes, suitable for varied terrain and long walks.", - "Lightweight and breathable clothing for warm days, along with a warm jacket for cooler evenings.", - "A reliable backpack to carry essentials, along with a water bottle for hydration." - ], - bestTimeToVisit: "The best time to visit Panwali Kantha is from April to June and September to November, ensuring pleasant weather for trekking.", - image: 'https://uttarakhandtriptrek.com/wp-content/uploads/2019/03/Panwali-Kantha-Trek-Image.jpg' - }, - { - title: "DRONAGIRI TREK", - difficultyLevel: "MODERATE", - altitude: 6070, - district: "CHAMOLI", - introduction: - "The Dronagiri Trek takes you on an extraordinary journey to one of the lesser-known peaks of the Himalayas. It is renowned for its stunning landscapes and rich mythology associated with the Dronagiri mountain, believed to be where Hanuman fetched the Sanjeevani herb. This trek offers breathtaking views of the surrounding mountains and a unique adventure for trekkers.", - overview: - "Spanning around 45 kilometers, the Dronagiri Trek reaches an altitude of 19,918 feet. The journey begins at the village of Kanchoti and leads trekkers through lush forests, rocky terrains, and picturesque meadows. The trek is challenging yet rewarding, offering stunning vistas of snow-clad peaks and valleys as you approach the summit. This trek is perfect for experienced trekkers looking for an adventure in the heart of the Himalayas.", - route: [ - "Day 1: Drive to Kanchoti, the base camp, and acclimatize to the stunning views.", - "Day 2: Trek to Dronagiri Base Camp (16,500 feet) through lush forests and rocky terrains.", - "Day 3: Summit Dronagiri Peak (19,918 feet) and return to Base Camp.", - "Day 4: Descend back to Kanchoti, reflecting on the incredible journey.", - ], - attractions: [ - "Panoramic views of Nanda Devi, Kamet, and other prominent peaks of the Himalayas.", - "Rich flora and fauna, with unique species found in high-altitude regions.", - "Mythological significance of Dronagiri, making it a culturally enriching experience." - ], - culturalInsights: [ - "Learn about the legends associated with Dronagiri and its significance in Hindu mythology.", - "Experience the local culture and traditions of the villages along the trek." - ], - physicalChallenges: [ - "Steep ascents and rocky terrains require good stamina and physical fitness.", - "Altitude sickness may be a concern due to high elevations, necessitating acclimatization." - ], - recommendedGear: [ - "High-quality trekking boots for challenging terrains and a good grip.", - "Layered clothing suitable for varying temperatures, along with a warm sleeping bag.", - "A sturdy backpack for carrying essentials, including hydration packs." - ], - bestTimeToVisit: "The ideal time for the Dronagiri Trek is from May to June and September to October, offering stable weather conditions.", - image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiWcyBC6dgDZKjp_xyCXjJSEEWd_XdnTrsAQ&s' - }, - { - title: "TARSAR MARSAR TREK", - difficultyLevel: "DIFFICULT", - altitude: 4000, - district: "RUDRAPRAYAG", - introduction: - "The Tarsar Marsar Trek is a breathtaking journey that offers trekkers a unique experience of glacial lakes and mesmerizing landscapes. Nestled amidst towering peaks and verdant valleys, this trek provides stunning views of the Himalayas and an opportunity to explore the serene beauty of Tarsar and Marsar lakes, which are often compared to jewels in the mountains.", - overview: - "Spanning approximately 46 kilometers, the Tarsar Marsar Trek ascends to an altitude of 13,123 feet. The trek starts from Arakhota and leads trekkers through lush meadows, dense forests, and rocky terrains. The picturesque Tarsar and Marsar lakes, nestled in the lap of the mountains, are the highlights of this trek, offering tranquil spots for camping and reflection. The journey is filled with captivating views and diverse flora and fauna, making it an unforgettable experience.", - route: [ - "Day 1: Drive to Arakhota, the starting point, and enjoy the surrounding beauty.", - "Day 2: Trek to Tarsar Lake (12,100 feet), immersing in nature's tranquility.", - "Day 3: Explore the area around Tarsar Lake and trek to Marsar Lake (13,123 feet).", - "Day 4: Return trek to Arakhota, cherishing the memories made along the journey.", - ], - attractions: [ - "Stunning views of Tarsar and Marsar lakes, reflecting the surrounding mountains.", - "Rich biodiversity, with unique plant and animal species found in the region.", - "Cultural insights from local shepherd communities, offering a glimpse into their way of life." - ], - culturalInsights: [ - "Interact with local communities and learn about their traditions and lifestyles.", - "Discover the significance of the lakes in local folklore and culture." - ], - physicalChallenges: [ - "Steep climbs and rocky paths require good physical fitness and stamina.", - "Variable weather conditions may present challenges during the trek." - ], - recommendedGear: [ - "Durable trekking shoes for rocky terrains and variable weather.", - "Lightweight and insulated clothing for warmth and comfort.", - "A reliable backpack to carry camping gear and supplies." - ], - bestTimeToVisit: "The best months to undertake the Tarsar Marsar Trek are May to June and September to October when the weather is relatively stable.", - image: 'https://static.wixstatic.com/media/6671f2_656b6fb4d9614110be2d8bc177252fb6~mv2.jpg/v1/fill/w_640,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_auto/6671f2_656b6fb4d9614110be2d8bc177252fb6~mv2.jpg' - }, - { - title: "CHANDRASHILA TREK", - difficultyLevel: "MODERATE", - altitude: 4000, - district: "RUDRAPRAYAG", - introduction: - "The Chandrashila Trek is a popular trek in the Garhwal region, offering trekkers the chance to reach the summit of Chandrashila, a peak revered in Hindu mythology. This trek is renowned for its breathtaking views of the Himalayas and provides a unique opportunity to witness the majestic beauty of the region, including the stunning sunrise from the summit.", - overview: - "Covering approximately 22 kilometers, the Chandrashila Trek takes trekkers to an altitude of 13,070 feet. The trek begins at Chopta, a small village known as the 'Mini Switzerland of India.' Trekkers will journey through lush meadows, dense forests, and rocky paths leading to the summit. The journey is rich in scenic beauty, offering stunning views of peaks like Nanda Devi, Trishul, and Chaukhamba from the top of Chandrashila.", - route: [ - "Day 1: Drive to Chopta and acclimatize while enjoying the surrounding beauty.", - "Day 2: Trek to Chandrashila (13,070 feet), experiencing stunning landscapes along the way.", - "Day 3: Enjoy the sunrise from the summit, capturing unforgettable memories.", - "Day 4: Descend back to Chopta, reflecting on the mesmerizing journey.", - ], - attractions: [ - "Breathtaking views of the Himalayan peaks, including Nanda Devi and Trishul.", - "Diverse flora and fauna, making it a treat for nature enthusiasts.", - "Cultural experiences at local villages along the trek." - ], - culturalInsights: [ - "Learn about the legends associated with Chandrashila and its significance in Hindu culture.", - "Experience the warmth of local hospitality from villagers during the trek." - ], - physicalChallenges: [ - "Moderate difficulty with some steep sections, making it suitable for moderately fit trekkers.", - "Weather conditions can change rapidly, so preparedness is key." - ], - recommendedGear: [ - "Good-quality trekking boots for comfort and grip on rocky terrains.", - "Layered clothing suitable for fluctuating temperatures during the trek.", - "A sturdy backpack for carrying essentials, including snacks and hydration." - ], - bestTimeToVisit: "The best time for the Chandrashila Trek is from March to May and September to November, ensuring pleasant weather for trekking.", - image: 'https://media1.thrillophilia.com/filestore/vnxo50hgkek8ya56awjw92ok50rm_1513415035_Deoriatal-Chandrashila-Peak-trek-At-the-summit-Indiahikes.jpg' - }, - - { - title: "NAG TIBBA TREK", - difficultyLevel: "EASY", - altitude: 3022, - district: "TEHRI GARHWAL", - introduction: - "The Nag Tibba Trek is an easy yet rewarding trek that takes you through lush green forests, quaint villages, and offers mesmerizing views of the Himalayas. Known as the 'Serpent's Peak,' this trek is perfect for beginners and families looking to explore the beauty of the Garhwal region in Uttarakhand.", - overview: - "Spanning approximately 20 kilometers, the Nag Tibba Trek reaches an altitude of 9,914 feet. The trek begins from the village of Pantwari and winds through picturesque landscapes, including dense oak and deodar forests. As you ascend, you'll be rewarded with breathtaking views of the surrounding mountains, including the majestic views of the Gangotri and Yamunotri ranges. The summit offers a serene atmosphere, perfect for camping and relaxation.", - route: [ - "Day 1: Drive to Pantwari and begin the trek towards Nag Tibba Base Camp.", - "Day 2: Summit Nag Tibba (9,914 feet) and enjoy the panoramic views.", - "Day 3: Descend back to Pantwari, reflecting on the beautiful journey.", - ], - attractions: [ - "Stunning views of the surrounding peaks and valleys, ideal for photography.", - "Rich biodiversity, with various flora and fauna found along the trail.", - "Cultural experiences in local villages, showcasing Garhwali traditions." - ], - culturalInsights: [ - "Learn about the local folklore associated with Nag Tibba and its cultural significance.", - "Interact with local communities and experience their warm hospitality." - ], - physicalChallenges: [ - "Easy trek, suitable for beginners and families with children.", - "Short steep sections may present minor challenges, but overall accessible." - ], - recommendedGear: [ - "Comfortable trekking shoes for easy navigation and grip.", - "Light clothing suitable for warm weather, along with a warm layer for evenings.", - "A lightweight backpack for carrying essentials and snacks." - ], - bestTimeToVisit: "The best time for the Nag Tibba Trek is from March to June and September to November, ensuring pleasant weather.", - image: 'https://www.bikatadventures.com/images/BlogspotContents/BlogspotImageUrl3825.JPG' - }, - - { - title: "KALINDI KHAL TREK", - difficultyLevel: "DIFFICULT", - altitude: 5950, - district: "CHAMOLI", - introduction: - "The Kalindi Khal Trek is a thrilling adventure that connects the valleys of Bhagirathi and Alaknanda, offering breathtaking views of the Himalayan peaks. Known for its challenging terrains and high-altitude landscapes, this trek is suitable for experienced trekkers seeking a unique experience in the pristine wilderness of Uttarakhand.", - overview: - "Spanning approximately 80 kilometers, the Kalindi Khal Trek ascends to an altitude of 19,591 feet. The trek starts from Gangotri and takes trekkers through stunning glaciers, meadows, and rocky terrains. The highlight of this trek is the Kalindi Khal Pass, offering spectacular views of the surrounding peaks. The journey provides a perfect blend of adventure, beauty, and solitude, making it an unforgettable experience.", - route: [ - "Day 1: Drive to Gangotri and acclimatize while enjoying the views of the region.", - "Day 2: Trek to Bhoj Kharak, setting up camp amidst stunning landscapes.", - "Day 3: Continue to Kalindi Base Camp, preparing for the summit attempt.", - "Day 4: Summit Kalindi Khal and descend to the next campsite, soaking in the views.", - "Day 5: Trek back to Gangotri, reflecting on the incredible journey.", - ], - attractions: [ - "Stunning views of Bhagirathi peaks and other Himalayan ranges.", - "Challenging terrains that provide a sense of adventure and accomplishment.", - "Rich biodiversity and unique landscapes, perfect for nature lovers." - ], - culturalInsights: [ - "Learn about the cultural significance of the region and its local traditions.", - "Experience the spiritual essence of the Himalayas while visiting sacred sites." - ], - physicalChallenges: [ - "Difficult trek requiring good fitness and prior trekking experience.", - "High altitude can lead to altitude sickness, necessitating acclimatization." - ], - recommendedGear: [ - "High-quality trekking boots for tough terrains and comfort.", - "Warm clothing suitable for extremely cold temperatures at higher altitudes.", - "A durable backpack for carrying essentials, including climbing gear." - ], - bestTimeToVisit: "The best time for the Kalindi Khal Trek is from late June to early September, ensuring better weather conditions.", - image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdKV_lPz1AKPYoEfTG8c4Jy91NNzir4P2S_g&s' - } - ]; - \ No newline at end of file + title: "CHANDRASHILA TREK", + difficultyLevel: "MODERATE", + altitude: 4000, + district: "RUDRAPRAYAG", + address: "Chandrashila Peak, Rudraprayag, Uttarakhand, India", + coordinates: [30.3238, 79.0745], + introduction: + "The Chandrashila Trek is a popular trek in the Garhwal region, offering trekkers the chance to reach the summit of Chandrashila, a peak revered in Hindu mythology. This trek is renowned for its breathtaking views of the Himalayas and provides a unique opportunity to witness the majestic beauty of the region, including the stunning sunrise from the summit.", + overview: + "Covering approximately 22 kilometers, the Chandrashila Trek takes trekkers to an altitude of 13,070 feet. The trek begins at Chopta, a small village known as the 'Mini Switzerland of India.' Trekkers will journey through lush meadows, dense forests, and rocky paths leading to the summit. The journey is rich in scenic beauty, offering stunning views of peaks like Nanda Devi, Trishul, and Chaukhamba from the top of Chandrashila.", + route: [ + "Day 1: Drive to Chopta and acclimatize while enjoying the surrounding beauty.", + "Day 2: Trek to Chandrashila (13,070 feet), experiencing stunning landscapes along the way.", + "Day 3: Enjoy the sunrise from the summit, capturing unforgettable memories.", + "Day 4: Descend back to Chopta, reflecting on the mesmerizing journey.", + ], + attractions: [ + "Breathtaking views of the Himalayan peaks, including Nanda Devi and Trishul.", + "Diverse flora and fauna, making it a treat for nature enthusiasts.", + "Cultural experiences at local villages along the trek.", + ], + culturalInsights: [ + "Learn about the legends associated with Chandrashila and its significance in Hindu culture.", + "Experience the warmth of local hospitality from villagers during the trek.", + ], + physicalChallenges: [ + "Moderate difficulty with some steep sections, making it suitable for moderately fit trekkers.", + "Weather conditions can change rapidly, so preparedness is key.", + ], + recommendedGear: [ + "Good-quality trekking boots for comfort and grip on rocky terrains.", + "Layered clothing suitable for fluctuating temperatures during the trek.", + "A sturdy backpack for carrying essentials, including snacks and hydration.", + ], + bestTimeToVisit: + "The best time for the Chandrashila Trek is from March to May and September to November, ensuring pleasant weather for trekking.", + image: + "https://media1.thrillophilia.com/filestore/vnxo50hgkek8ya56awjw92ok50rm_1513415035_Deoriatal-Chandrashila-Peak-trek-At-the-summit-Indiahikes.jpg", + }, + + { + title: "NAG TIBBA TREK", + difficultyLevel: "EASY", + altitude: 3022, + district: "TEHRI GARHWAL", + address: "Nag Tibba, Tehri Garhwal, Uttarakhand, India", + coordinates: [30.4225, 78.4534], + introduction: + "The Nag Tibba Trek is an easy yet rewarding trek that takes you through lush green forests, quaint villages, and offers mesmerizing views of the Himalayas. Known as the 'Serpent's Peak,' this trek is perfect for beginners and families looking to explore the beauty of the Garhwal region in Uttarakhand.", + overview: + "Spanning approximately 20 kilometers, the Nag Tibba Trek reaches an altitude of 9,914 feet. The trek begins from the village of Pantwari and winds through picturesque landscapes, including dense oak and deodar forests. As you ascend, you'll be rewarded with breathtaking views of the surrounding mountains, including the majestic views of the Gangotri and Yamunotri ranges. The summit offers a serene atmosphere, perfect for camping and relaxation.", + route: [ + "Day 1: Drive to Pantwari and begin the trek towards Nag Tibba Base Camp.", + "Day 2: Summit Nag Tibba (9,914 feet) and enjoy the panoramic views.", + "Day 3: Descend back to Pantwari, reflecting on the beautiful journey.", + ], + attractions: [ + "Stunning views of the surrounding peaks and valleys, ideal for photography.", + "Rich biodiversity, with various flora and fauna found along the trail.", + "Cultural experiences in local villages, showcasing Garhwali traditions.", + ], + culturalInsights: [ + "Learn about the local folklore associated with Nag Tibba and its cultural significance.", + "Interact with local communities and experience their warm hospitality.", + ], + physicalChallenges: [ + "Easy trek, suitable for beginners and families with children.", + "Short steep sections may present minor challenges, but overall accessible.", + ], + recommendedGear: [ + "Comfortable trekking shoes for easy navigation and grip.", + "Light clothing suitable for warm weather, along with a warm layer for evenings.", + "A lightweight backpack for carrying essentials and snacks.", + ], + bestTimeToVisit: + "The best time for the Nag Tibba Trek is from March to June and September to November, ensuring pleasant weather.", + image: + "https://www.bikatadventures.com/images/BlogspotContents/BlogspotImageUrl3825.JPG", + }, + + { + title: "KALINDI KHAL TREK", + difficultyLevel: "DIFFICULT", + altitude: 5950, + district: "CHAMOLI", + address: "Kalindi Khal, Chamoli, Uttarakhand, India", + coordinates: [30.3750, 78.7040], + introduction: + "The Kalindi Khal Trek is a thrilling adventure that connects the valleys of Bhagirathi and Alaknanda, offering breathtaking views of the Himalayan peaks. Known for its challenging terrains and high-altitude landscapes, this trek is suitable for experienced trekkers seeking a unique experience in the pristine wilderness of Uttarakhand.", + overview: + "Spanning approximately 80 kilometers, the Kalindi Khal Trek ascends to an altitude of 19,591 feet. The trek starts from Gangotri and takes trekkers through stunning glaciers, meadows, and rocky terrains. The highlight of this trek is the Kalindi Khal Pass, offering spectacular views of the surrounding peaks. The journey provides a perfect blend of adventure, beauty, and solitude, making it an unforgettable experience.", + route: [ + "Day 1: Drive to Gangotri and acclimatize while enjoying the views of the region.", + "Day 2: Trek to Bhoj Kharak, setting up camp amidst stunning landscapes.", + "Day 3: Continue to Kalindi Base Camp, preparing for the summit attempt.", + "Day 4: Summit Kalindi Khal and descend to the next campsite, soaking in the views.", + "Day 5: Trek back to Gangotri, reflecting on the incredible journey.", + ], + attractions: [ + "Stunning views of Bhagirathi peaks and other Himalayan ranges.", + "Challenging terrains that provide a sense of adventure and accomplishment.", + "Rich biodiversity and unique landscapes, perfect for nature lovers.", + ], + culturalInsights: [ + "Learn about the cultural significance of the region and its local traditions.", + "Experience the spiritual essence of the Himalayas while visiting sacred sites.", + ], + physicalChallenges: [ + "Difficult trek requiring good fitness and prior trekking experience.", + "High altitude can lead to altitude sickness, necessitating acclimatization.", + ], + recommendedGear: [ + "High-quality trekking boots for tough terrains and comfort.", + "Warm clothing suitable for extremely cold temperatures at higher altitudes.", + "A durable backpack for carrying essentials, including climbing gear.", + ], + bestTimeToVisit: + "The best time for the Kalindi Khal Trek is from late June to early September, ensuring better weather conditions.", + image: + "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRdKV_lPz1AKPYoEfTG8c4Jy91NNzir4P2S_g&s", + }, +]; diff --git a/src/app/trekking/page.tsx b/src/app/trekking/page.tsx index 70bcfff..f9e6920 100644 --- a/src/app/trekking/page.tsx +++ b/src/app/trekking/page.tsx @@ -19,7 +19,7 @@ export default function Trekking() { }; // Extract unique districts from trekDetails - const districts = Array.from(new Set(trekDetails.map(trek => trek.district))); + const filterTreks = trekDetails.filter(trek => { const matchesDifficulty = difficultyLevel === "" || trek.difficultyLevel.toLowerCase() === difficultyLevel.toLowerCase(); diff --git a/src/components/ui/MapModal.module.css b/src/components/ui/MapModal.module.css new file mode 100644 index 0000000..f826deb --- /dev/null +++ b/src/components/ui/MapModal.module.css @@ -0,0 +1,79 @@ +.modalOverlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: flex; + justify-content: center; + align-items: center; + z-index: 20; + } + + .modalContent { + display: flex; + width: 80%; + max-width: 900px; + background-color: white; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + } + + .leftColumn { + width: 90%; + position: relative; + display: flex; + flex-direction: column; + justify-content: center; + } + + .mapContainer { + width: 100%; + height: 100%; /* Ensures the map fills the entire left column */ + min-height: 400px; /* A minimum height to prevent collapsing */ + position: relative; + } + + .rightColumn { + width: fit-content; + padding: 16px; + display: flex; + flex-direction: column; + justify-content: space-between; + } + .rightColumn h2{ + white-space: nowrap; + } + + .subTitle{ + white-space: nowrap; + width: fit-content; + } + + .imageSection { + display: flex; + flex-direction: column; + gap: 8px; + margin-top: 8px; + width: fit-content; + } + + .imageSection img { + width: 250px; + height: auto; + border-radius: 4px; + object-fit: cover; + } + + .closeButton { + margin-top: 16px; + padding: 8px 16px; + background-color: #333; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; + } + \ No newline at end of file diff --git a/src/components/ui/MapModal.tsx b/src/components/ui/MapModal.tsx new file mode 100644 index 0000000..920becf --- /dev/null +++ b/src/components/ui/MapModal.tsx @@ -0,0 +1,84 @@ +// components/MapModal.tsx +import React, { useRef, useEffect } from 'react'; +import mapboxgl from 'mapbox-gl'; +import styles from './MapModal.module.css'; +import 'mapbox-gl/dist/mapbox-gl.css'; + +// Ensure Mapbox token is defined +if (!process.env.NEXT_PUBLIC_MAPBOX_TOKEN) { + throw new Error("Mapbox access token is not defined. Please set NEXT_PUBLIC_MAPBOX_TOKEN in your environment variables."); +} + +mapboxgl.accessToken = process.env.NEXT_PUBLIC_MAPBOX_TOKEN; + +// Define the TrekDetails type with image as an array of strings +import { TrekDetails } from '../ui/TrekCard'; + +// Define the props interface, including `info` as a prop of type TrekDetails +interface MapModalProps { + isOpen: boolean; + onClose: () => void; + center?: number[]; + zoom?: number; + markerLocation?: number[]; + info: TrekDetails; + subTitle : string; +} + +const MapModal: React.FC = ({ + isOpen, + onClose, + center = [78.9629, 20.5937], + zoom = 5, + markerLocation = [78.9629, 20.5937], + info, + subTitle +}) => { + const mapContainerRef = useRef(null); + const mapRef = useRef(null); + + useEffect(() => { + if (isOpen && mapContainerRef.current) { + mapRef.current = new mapboxgl.Map({ + container: mapContainerRef.current, + style: 'mapbox://styles/mapbox/streets-v11', + center: [center[1],center[0]], + zoom: zoom, + }); + + // Add the marker to the specified location + new mapboxgl.Marker() + .setLngLat([markerLocation[1],markerLocation[0]]) + .addTo(mapRef.current); + + return () => mapRef.current?.remove(); + } + }, [isOpen, center, zoom, markerLocation]); + + if (!isOpen) return null; + + return ( +
+
e.stopPropagation()}> +
+
+
+
+

{info.title}

+

{subTitle}

+

Address

+

{info.address}

+

+
+ {`Image`} +
+ +
+
+
+ ); +}; + +export default MapModal; diff --git a/src/components/ui/TrekCard.tsx b/src/components/ui/TrekCard.tsx index bd6ea06..254d145 100644 --- a/src/components/ui/TrekCard.tsx +++ b/src/components/ui/TrekCard.tsx @@ -1,14 +1,14 @@ "use client"; // Marking this as a client component import React, { useState } from "react"; // Import useState for managing state -import Image from "next/image"; -import styles from "./TrekCard.module.css"; -import Link from "next/link"; -import Roopkund from "/public/roopkund.jpg"; -type TrekDetails = { +import styles from "./TrekCard.module.css"; +import MapModal from '../../components/ui/MapModal'; +export type TrekDetails = { title: string; introduction: string; + address : string; + coordinates : number[]; overview: string; route: string[]; attractions: string[]; @@ -29,7 +29,10 @@ type CardProps = { export default function TrekCard(props: CardProps) { const { title, subTitle, trekDetails, readMoreLink } = props; // Destructure props const [isExpanded, setIsExpanded] = useState(false); // State to track the expanded content - + const [isMapOpen, setIsMapOpen] = useState(false); + + const handleOpenMap = () => setIsMapOpen(true); + const handleCloseMap = () => setIsMapOpen(false); return ( @@ -116,7 +119,7 @@ export default function TrekCard(props: CardProps) {
)}
- VIEW LOCATION +
@@ -124,6 +127,11 @@ export default function TrekCard(props: CardProps) {
{title}
+ + + + + ); } From cd777a5d4abecca81f82b44c9208ab75a0d7b3f6 Mon Sep 17 00:00:00 2001 From: Ikki Date: Tue, 29 Oct 2024 16:54:44 +0530 Subject: [PATCH 2/8] google-apple-map-redirection --- src/components/ui/MapModal.module.css | 23 +++++++++++++- src/components/ui/MapModal.tsx | 45 ++++++++++++++++++++++++--- 2 files changed, 62 insertions(+), 6 deletions(-) diff --git a/src/components/ui/MapModal.module.css b/src/components/ui/MapModal.module.css index f826deb..fbaf6b2 100644 --- a/src/components/ui/MapModal.module.css +++ b/src/components/ui/MapModal.module.css @@ -76,4 +76,25 @@ border-radius: 4px; cursor: pointer; } - \ No newline at end of file + + .mapLinks { + margin-top: 10px; + gap: 2px; + } + + .mapLinks a { + display: inline-block; + color: #007aff; + text-align: center; + border-radius: 4px; + font-weight: 500; + } + + .mapLinks a:hover { + text-decoration: underline; + } + .mapLinks .icon { + margin-right: 8px; + display: inline-flex; + align-items: center; + } \ No newline at end of file diff --git a/src/components/ui/MapModal.tsx b/src/components/ui/MapModal.tsx index 920becf..0361081 100644 --- a/src/components/ui/MapModal.tsx +++ b/src/components/ui/MapModal.tsx @@ -42,13 +42,13 @@ const MapModal: React.FC = ({ mapRef.current = new mapboxgl.Map({ container: mapContainerRef.current, style: 'mapbox://styles/mapbox/streets-v11', - center: [center[1],center[0]], + center: [center[1], center[0]], zoom: zoom, }); // Add the marker to the specified location new mapboxgl.Marker() - .setLngLat([markerLocation[1],markerLocation[0]]) + .setLngLat([markerLocation[1], markerLocation[0]]) .addTo(mapRef.current); return () => mapRef.current?.remove(); @@ -57,6 +57,10 @@ const MapModal: React.FC = ({ if (!isOpen) return null; + // URLs for Google Maps and Apple Maps + const googleMapsUrl = `https://www.google.com/maps?q=${center[0]},${center[1]}`; + const appleMapsUrl = `https://maps.apple.com/?ll=${center[0]},${center[1]}`; + return (
e.stopPropagation()}> @@ -66,11 +70,42 @@ const MapModal: React.FC = ({

{info.title}

{subTitle}

-

Address

+

Address

{info.address}

-

- {`Image`} + Image +
+