| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Trek The Himalayas | Safest & Trusted Adventure Provider</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://unpkg.com/lucide@latest"></script> |
| <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800;900&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| fontFamily: { |
| display: ['Playfair Display', 'serif'], |
| body: ['Inter', 'sans-serif'], |
| }, |
| colors: { |
| mountain: { |
| 50: '#f0f7ff', |
| 100: '#dce8f7', |
| 200: '#b8d1ef', |
| 300: '#8ab5e3', |
| 400: '#5a93d4', |
| 500: '#3b75c2', |
| 600: '#2d5aa0', |
| 700: '#264d8a', |
| 800: '#1e3a66', |
| 900: '#0f1f3d', |
| 950: '#0a1628', |
| }, |
| sunset: { |
| 400: '#fb923c', |
| 500: '#f97316', |
| 600: '#ea580c', |
| }, |
| peak: { |
| 400: '#fbbf24', |
| 500: '#f59e0b', |
| 600: '#d97706', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| html { scroll-behavior: smooth; } |
| body { font-family: 'Inter', sans-serif; } |
| |
| .hero-gradient { |
| background: linear-gradient(135deg, rgba(10,22,40,0.95) 0%, rgba(15,31,61,0.7) 40%, rgba(30,58,102,0.4) 70%, transparent 100%); |
| } |
| |
| .text-gradient { |
| background: linear-gradient(135deg, #fbbf24, #f97316, #fb923c); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| .card-shine { |
| background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0.05) 100%); |
| } |
| |
| .glow-orange { |
| box-shadow: 0 0 40px rgba(249,115,22,0.3), 0 0 80px rgba(249,115,22,0.1); |
| } |
| |
| .parallax-slow { |
| animation: float 8s ease-in-out infinite; |
| } |
| |
| .parallax-medium { |
| animation: float 6s ease-in-out infinite reverse; |
| } |
| |
| @keyframes float { |
| 0%, 100% { transform: translateY(0px); } |
| 50% { transform: translateY(-20px); } |
| } |
| |
| @keyframes fadeInUp { |
| from { opacity: 0; transform: translateY(40px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| @keyframes slideInLeft { |
| from { opacity: 0; transform: translateX(-60px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| |
| @keyframes slideInRight { |
| from { opacity: 0; transform: translateX(60px); } |
| to { opacity: 1; transform: translateX(0); } |
| } |
| |
| @keyframes scaleIn { |
| from { opacity: 0; transform: scale(0.8); } |
| to { opacity: 1; transform: scale(1); } |
| } |
| |
| @keyframes countUp { |
| from { opacity: 0; transform: translateY(20px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .animate-fadeInUp { animation: fadeInUp 0.8s ease-out forwards; } |
| .animate-slideInLeft { animation: slideInLeft 0.8s ease-out forwards; } |
| .animate-slideInRight { animation: slideInRight 0.8s ease-out forwards; } |
| .animate-scaleIn { animation: scaleIn 0.6s ease-out forwards; } |
| |
| .delay-100 { animation-delay: 0.1s; } |
| .delay-200 { animation-delay: 0.2s; } |
| .delay-300 { animation-delay: 0.3s; } |
| .delay-400 { animation-delay: 0.4s; } |
| .delay-500 { animation-delay: 0.5s; } |
| .delay-600 { animation-delay: 0.6s; } |
| |
| .scroll-animate { |
| opacity: 0; |
| transform: translateY(40px); |
| transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| |
| .scroll-animate.visible { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| |
| .trek-card { |
| transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| |
| .trek-card:hover { |
| transform: translateY(-12px); |
| } |
| |
| .trek-card:hover .trek-img { |
| transform: scale(1.1); |
| } |
| |
| .trek-img { |
| transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| |
| .destination-card { |
| transition: all 0.4s ease; |
| } |
| |
| .destination-card:hover { |
| transform: scale(1.05); |
| } |
| |
| .destination-card:hover .dest-overlay { |
| background: linear-gradient(to top, rgba(10,22,40,0.9) 0%, rgba(10,22,40,0.3) 50%, transparent 100%); |
| } |
| |
| .dest-overlay { |
| transition: background 0.4s ease; |
| } |
| |
| .nav-link { |
| position: relative; |
| } |
| |
| .nav-link::after { |
| content: ''; |
| position: absolute; |
| bottom: -4px; |
| left: 0; |
| width: 0; |
| height: 2px; |
| background: linear-gradient(90deg, #fbbf24, #f97316); |
| transition: width 0.3s ease; |
| } |
| |
| .nav-link:hover::after { |
| width: 100%; |
| } |
| |
| .stat-number { |
| background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.7) 100%); |
| -webkit-background-clip: text; |
| -webkit-text-fill-color: transparent; |
| background-clip: text; |
| } |
| |
| ::-webkit-scrollbar { width: 8px; } |
| ::-webkit-scrollbar-track { background: #0a1628; } |
| ::-webkit-scrollbar-thumb { background: #2d5aa0; border-radius: 4px; } |
| ::-webkit-scrollbar-thumb:hover { background: #3b75c2; } |
| |
| .mobile-menu { |
| transform: translateX(100%); |
| transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
| } |
| |
| .mobile-menu.open { |
| transform: translateX(0); |
| } |
| |
| .mountain-divider { |
| position: relative; |
| } |
| |
| .mountain-divider::after { |
| content: ''; |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| height: 80px; |
| background: linear-gradient(to top, #0a1628, transparent); |
| } |
| |
| .testimonial-card { |
| transition: all 0.4s ease; |
| } |
| |
| .testimonial-card:hover { |
| transform: translateY(-4px); |
| box-shadow: 0 20px 60px rgba(0,0,0,0.3); |
| } |
| |
| .cta-glow { |
| position: relative; |
| } |
| |
| .cta-glow::before { |
| content: ''; |
| position: absolute; |
| inset: -2px; |
| background: linear-gradient(135deg, #fbbf24, #f97316, #ea580c); |
| border-radius: inherit; |
| z-index: -1; |
| opacity: 0; |
| transition: opacity 0.3s ease; |
| filter: blur(12px); |
| } |
| |
| .cta-glow:hover::before { |
| opacity: 0.6; |
| } |
| |
| .snow-particle { |
| position: absolute; |
| background: white; |
| border-radius: 50%; |
| opacity: 0.6; |
| pointer-events: none; |
| } |
| |
| @keyframes snowfall { |
| 0% { transform: translateY(-10px) translateX(0); opacity: 0; } |
| 10% { opacity: 0.6; } |
| 90% { opacity: 0.6; } |
| 100% { transform: translateY(100vh) translateX(50px); opacity: 0; } |
| } |
| </style> |
| </head> |
| <body class="bg-mountain-950 text-white overflow-x-hidden"> |
|
|
| |
| <nav id="navbar" class="fixed top-0 left-0 right-0 z-50 transition-all duration-500"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="flex items-center justify-between h-20"> |
| |
| <a href="#" class="flex items-center gap-3 group"> |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-peak-400 to-sunset-500 flex items-center justify-center shadow-lg group-hover:shadow-sunset-500/40 transition-shadow duration-300"> |
| <i data-lucide="mountain" class="w-5 h-5 text-mountain-950"></i> |
| </div> |
| <div class="flex flex-col"> |
| <span class="font-display font-bold text-lg leading-tight tracking-wide">TREK THE</span> |
| <span class="font-display font-bold text-lg leading-tight text-gradient">HIMALAYAS</span> |
| </div> |
| </a> |
|
|
| |
| <div class="hidden md:flex items-center gap-8"> |
| <a href="#home" class="nav-link text-sm font-medium text-white/80 hover:text-white transition-colors">Home</a> |
| <a href="#treks" class="nav-link text-sm font-medium text-white/80 hover:text-white transition-colors">Treks</a> |
| <a href="#destinations" class="nav-link text-sm font-medium text-white/80 hover:text-white transition-colors">Destinations</a> |
| <a href="#about" class="nav-link text-sm font-medium text-white/80 hover:text-white transition-colors">About</a> |
| <a href="#testimonials" class="nav-link text-sm font-medium text-white/80 hover:text-white transition-colors">Reviews</a> |
| <a href="#contact" class="px-5 py-2.5 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-semibold text-sm rounded-full hover:shadow-lg hover:shadow-sunset-500/30 transition-all duration-300 cta-glow"> |
| Book Now |
| </a> |
| </div> |
|
|
| |
| <button id="menuBtn" class="md:hidden text-white p-2"> |
| <i data-lucide="menu" class="w-6 h-6"></i> |
| </button> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div id="mobileMenu" class="mobile-menu fixed inset-y-0 right-0 w-72 bg-mountain-950/98 backdrop-blur-xl z-50 p-8 flex flex-col"> |
| <button id="closeMenu" class="self-end text-white/70 hover:text-white mb-10"> |
| <i data-lucide="x" class="w-6 h-6"></i> |
| </button> |
| <div class="flex flex-col gap-6"> |
| <a href="#home" class="text-xl font-display font-semibold text-white/80 hover:text-peak-400 transition-colors mobile-link">Home</a> |
| <a href="#treks" class="text-xl font-display font-semibold text-white/80 hover:text-peak-400 transition-colors mobile-link">Treks</a> |
| <a href="#destinations" class="text-xl font-display font-semibold text-white/80 hover:text-peak-400 transition-colors mobile-link">Destinations</a> |
| <a href="#about" class="text-xl font-display font-semibold text-white/80 hover:text-peak-400 transition-colors mobile-link">About</a> |
| <a href="#testimonials" class="text-xl font-display font-semibold text-white/80 hover:text-peak-400 transition-colors mobile-link">Reviews</a> |
| </div> |
| <a href="#contact" class="mt-auto px-6 py-3 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-bold text-center rounded-full mobile-link"> |
| Book Your Trek |
| </a> |
| </div> |
|
|
| |
| <section id="home" class="relative min-h-screen flex items-center overflow-hidden"> |
| |
| <div class="absolute inset-0"> |
| <img src="http://static.photos/nature/1200x630/42" alt="Himalayan Peaks" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 hero-gradient"></div> |
| <div class="absolute inset-0 bg-gradient-to-t from-mountain-950 via-transparent to-transparent"></div> |
| </div> |
|
|
| |
| <div id="snowContainer" class="absolute inset-0 pointer-events-none overflow-hidden"></div> |
|
|
| |
| <div class="absolute top-32 right-12 opacity-20 parallax-slow hidden lg:block"> |
| <i data-lucide="mountain-snow" class="w-32 h-32 text-peak-400"></i> |
| </div> |
| <div class="absolute bottom-40 left-12 opacity-10 parallax-medium hidden lg:block"> |
| <i data-lucide="cloud-snow" class="w-24 h-24 text-white"></i> |
| </div> |
|
|
| |
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-32 pb-20"> |
| <div class="max-w-3xl"> |
| |
| <div class="animate-fadeInUp opacity-0 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-md border border-white/20 mb-8"> |
| <i data-lucide="shield-check" class="w-4 h-4 text-peak-400"></i> |
| <span class="text-sm font-medium text-white/90">Safest & Trusted Adventure Provider</span> |
| </div> |
|
|
| |
| <h1 class="animate-fadeInUp opacity-0 delay-100 font-display text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-black leading-[0.9] mb-6"> |
| Conquer<br> |
| <span class="text-gradient">The Mighty</span><br> |
| Himalayas |
| </h1> |
|
|
| |
| <p class="animate-fadeInUp opacity-0 delay-200 text-lg sm:text-xl text-white/70 max-w-xl mb-10 leading-relaxed"> |
| Embark on life-changing adventures across Uttarakhand, Sikkim, Himachal, Ladakh, Kashmir, Nepal & beyond. Your journey to the top starts here. |
| </p> |
|
|
| |
| <div class="animate-fadeInUp opacity-0 delay-300 flex flex-wrap gap-4 mb-16"> |
| <a href="#treks" class="group px-8 py-4 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-bold rounded-full text-base hover:shadow-2xl hover:shadow-sunset-500/40 transition-all duration-300 flex items-center gap-2 cta-glow"> |
| Explore Treks |
| <i data-lucide="arrow-right" class="w-5 h-5 group-hover:translate-x-1 transition-transform"></i> |
| </a> |
| <a href="#about" class="px-8 py-4 border-2 border-white/30 text-white font-semibold rounded-full text-base hover:bg-white/10 hover:border-white/50 transition-all duration-300 flex items-center gap-2"> |
| <i data-lucide="play-circle" class="w-5 h-5"></i> |
| Watch Story |
| </a> |
| </div> |
|
|
| |
| <div class="animate-fadeInUp opacity-0 delay-400 flex flex-wrap gap-8 sm:gap-12"> |
| <div class="text-center"> |
| <div class="stat-number text-3xl sm:text-4xl font-bold font-display" data-count="5526">0</div> |
| <div class="text-white/50 text-sm mt-1">Adventure Posts</div> |
| </div> |
| <div class="w-px bg-white/20 hidden sm:block"></div> |
| <div class="text-center"> |
| <div class="stat-number text-3xl sm:text-4xl font-bold font-display" data-count="140">0</div> |
| <div class="text-white/50 text-sm mt-1">K+ Followers</div> |
| </div> |
| <div class="w-px bg-white/20 hidden sm:block"></div> |
| <div class="text-center"> |
| <div class="stat-number text-3xl sm:text-4xl font-bold font-display" data-count="500">0</div> |
| <div class="text-white/50 text-sm mt-1">+ Treks Completed</div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-bounce"> |
| <span class="text-white/40 text-xs tracking-widest uppercase">Scroll</span> |
| <i data-lucide="chevrons-down" class="w-5 h-5 text-white/40"></i> |
| </div> |
| </section> |
|
|
| |
| <section id="treks" class="relative py-24 bg-mountain-950"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| |
| <div class="scroll-animate text-center mb-16"> |
| <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-sunset-500/10 border border-sunset-500/20 mb-4"> |
| <i data-lucide="compass" class="w-4 h-4 text-sunset-400"></i> |
| <span class="text-sm font-medium text-sunset-400">Featured Treks</span> |
| </div> |
| <h2 class="font-display text-4xl sm:text-5xl font-bold mb-4"> |
| Upcoming <span class="text-gradient">Adventures</span> |
| </h2> |
| <p class="text-white/60 max-w-2xl mx-auto"> |
| Hand-picked treks curated by our expert mountaineers. Each journey is designed to push your limits and transform your soul. |
| </p> |
| </div> |
|
|
| |
| <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
| |
| <div class="scroll-animate trek-card rounded-2xl overflow-hidden bg-mountain-900/50 border border-white/5 group cursor-pointer"> |
| <div class="relative h-56 overflow-hidden"> |
| <img src="http://static.photos/nature/640x360/101" alt="Kedarkantha Trek" class="trek-img w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-mountain-950/90 via-transparent to-transparent"></div> |
| <div class="absolute top-4 left-4 flex gap-2"> |
| <span class="px-3 py-1 bg-peak-500/90 text-mountain-950 text-xs font-bold rounded-full">BESTSELLER</span> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <button class="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center hover:bg-white/20 transition-colors"> |
| <i data-lucide="heart" class="w-4 h-4 text-white"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-4 left-4"> |
| <div class="flex items-center gap-1 text-peak-400"> |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> |
| <span class="text-sm font-semibold">4.8</span> |
| <span class="text-white/50 text-xs">(234)</span> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-display text-xl font-bold mb-2 group-hover:text-peak-400 transition-colors">Kedarkantha Trek</h3> |
| <div class="flex items-center gap-2 text-white/50 text-sm mb-4"> |
| <i data-lucide="map-pin" class="w-3.5 h-3.5"></i> |
| <span>Uttarakhand</span> |
| <span class="w-1 h-1 bg-white/30 rounded-full"></span> |
| <span>6 Days</span> |
| </div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="mountain" class="w-3.5 h-3.5"></i> |
| <span>12,500 ft</span> |
| </div> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="thermometer-snowflake" class="w-3.5 h-3.5"></i> |
| <span>-10°C to 5°C</span> |
| </div> |
| </div> |
| <div class="flex items-center justify-between pt-4 border-t border-white/10"> |
| <div> |
| <span class="text-xs text-white/50">From</span> |
| <div class="text-xl font-bold text-peak-400">₹8,999</div> |
| </div> |
| <button class="px-5 py-2.5 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-semibold text-sm rounded-full hover:shadow-lg hover:shadow-sunset-500/20 transition-all"> |
| Book Now |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-animate trek-card rounded-2xl overflow-hidden bg-mountain-900/50 border border-white/5 group cursor-pointer"> |
| <div class="relative h-56 overflow-hidden"> |
| <img src="http://static.photos/travel/640x360/55" alt="Brahmatal Trek" class="trek-img w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-mountain-950/90 via-transparent to-transparent"></div> |
| <div class="absolute top-4 left-4"> |
| <span class="px-3 py-1 bg-green-500/90 text-white text-xs font-bold rounded-full">NEW</span> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <button class="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center hover:bg-white/20 transition-colors"> |
| <i data-lucide="heart" class="w-4 h-4 text-white"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-4 left-4"> |
| <div class="flex items-center gap-1 text-peak-400"> |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> |
| <span class="text-sm font-semibold">4.9</span> |
| <span class="text-white/50 text-xs">(189)</span> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-display text-xl font-bold mb-2 group-hover:text-peak-400 transition-colors">Brahmatal Trek</h3> |
| <div class="flex items-center gap-2 text-white/50 text-sm mb-4"> |
| <i data-lucide="map-pin" class="w-3.5 h-3.5"></i> |
| <span>Uttarakhand</span> |
| <span class="w-1 h-1 bg-white/30 rounded-full"></span> |
| <span>7 Days</span> |
| </div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="mountain" class="w-3.5 h-3.5"></i> |
| <span>12,256 ft</span> |
| </div> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="thermometer-snowflake" class="w-3.5 h-3.5"></i> |
| <span>-12°C to 3°C</span> |
| </div> |
| </div> |
| <div class="flex items-center justify-between pt-4 border-t border-white/10"> |
| <div> |
| <span class="text-xs text-white/50">From</span> |
| <div class="text-xl font-bold text-peak-400">₹9,499</div> |
| </div> |
| <button class="px-5 py-2.5 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-semibold text-sm rounded-full hover:shadow-lg hover:shadow-sunset-500/20 transition-all"> |
| Book Now |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-animate trek-card rounded-2xl overflow-hidden bg-mountain-900/50 border border-white/5 group cursor-pointer"> |
| <div class="relative h-56 overflow-hidden"> |
| <img src="http://static.photos/nature/640x360/77" alt="Stok Kangri Trek" class="trek-img w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-mountain-950/90 via-transparent to-transparent"></div> |
| <div class="absolute top-4 left-4"> |
| <span class="px-3 py-1 bg-red-500/90 text-white text-xs font-bold rounded-full">CHALLENGING</span> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <button class="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center hover:bg-white/20 transition-colors"> |
| <i data-lucide="heart" class="w-4 h-4 text-white"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-4 left-4"> |
| <div class="flex items-center gap-1 text-peak-400"> |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> |
| <span class="text-sm font-semibold">4.7</span> |
| <span class="text-white/50 text-xs">(156)</span> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-display text-xl font-bold mb-2 group-hover:text-peak-400 transition-colors">Stok Kangri Expedition</h3> |
| <div class="flex items-center gap-2 text-white/50 text-sm mb-4"> |
| <i data-lucide="map-pin" class="w-3.5 h-3.5"></i> |
| <span>Ladakh</span> |
| <span class="w-1 h-1 bg-white/30 rounded-full"></span> |
| <span>9 Days</span> |
| </div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="mountain" class="w-3.5 h-3.5"></i> |
| <span>20,187 ft</span> |
| </div> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="thermometer-snowflake" class="w-3.5 h-3.5"></i> |
| <span>-20°C to 0°C</span> |
| </div> |
| </div> |
| <div class="flex items-center justify-between pt-4 border-t border-white/10"> |
| <div> |
| <span class="text-xs text-white/50">From</span> |
| <div class="text-xl font-bold text-peak-400">₹24,999</div> |
| </div> |
| <button class="px-5 py-2.5 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-semibold text-sm rounded-full hover:shadow-lg hover:shadow-sunset-500/20 transition-all"> |
| Book Now |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-animate trek-card rounded-2xl overflow-hidden bg-mountain-900/50 border border-white/5 group cursor-pointer"> |
| <div class="relative h-56 overflow-hidden"> |
| <img src="http://static.photos/nature/640x360/23" alt="Everest Base Camp" class="trek-img w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-mountain-950/90 via-transparent to-transparent"></div> |
| <div class="absolute top-4 left-4"> |
| <span class="px-3 py-1 bg-purple-500/90 text-white text-xs font-bold rounded-full">ICONIC</span> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <button class="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center hover:bg-white/20 transition-colors"> |
| <i data-lucide="heart" class="w-4 h-4 text-white"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-4 left-4"> |
| <div class="flex items-center gap-1 text-peak-400"> |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> |
| <span class="text-sm font-semibold">4.9</span> |
| <span class="text-white/50 text-xs">(412)</span> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-display text-xl font-bold mb-2 group-hover:text-peak-400 transition-colors">Everest Base Camp</h3> |
| <div class="flex items-center gap-2 text-white/50 text-sm mb-4"> |
| <i data-lucide="map-pin" class="w-3.5 h-3.5"></i> |
| <span>Nepal</span> |
| <span class="w-1 h-1 bg-white/30 rounded-full"></span> |
| <span>14 Days</span> |
| </div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="mountain" class="w-3.5 h-3.5"></i> |
| <span>17,598 ft</span> |
| </div> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="thermometer-snowflake" class="w-3.5 h-3.5"></i> |
| <span>-15°C to 10°C</span> |
| </div> |
| </div> |
| <div class="flex items-center justify-between pt-4 border-t border-white/10"> |
| <div> |
| <span class="text-xs text-white/50">From</span> |
| <div class="text-xl font-bold text-peak-400">₹45,999</div> |
| </div> |
| <button class="px-5 py-2.5 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-semibold text-sm rounded-full hover:shadow-lg hover:shadow-sunset-500/20 transition-all"> |
| Book Now |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-animate trek-card rounded-2xl overflow-hidden bg-mountain-900/50 border border-white/5 group cursor-pointer"> |
| <div class="relative h-56 overflow-hidden"> |
| <img src="http://static.photos/travel/640x360/88" alt="Goechala Trek" class="trek-img w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-mountain-950/90 via-transparent to-transparent"></div> |
| <div class="absolute top-4 left-4"> |
| <span class="px-3 py-1 bg-blue-500/90 text-white text-xs font-bold rounded-full">SCENIC</span> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <button class="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center hover:bg-white/20 transition-colors"> |
| <i data-lucide="heart" class="w-4 h-4 text-white"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-4 left-4"> |
| <div class="flex items-center gap-1 text-peak-400"> |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> |
| <span class="text-sm font-semibold">4.8</span> |
| <span class="text-white/50 text-xs">(97)</span> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-display text-xl font-bold mb-2 group-hover:text-peak-400 transition-colors">Goechala Trek</h3> |
| <div class="flex items-center gap-2 text-white/50 text-sm mb-4"> |
| <i data-lucide="map-pin" class="w-3.5 h-3.5"></i> |
| <span>Sikkim</span> |
| <span class="w-1 h-1 bg-white/30 rounded-full"></span> |
| <span>11 Days</span> |
| </div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="mountain" class="w-3.5 h-3.5"></i> |
| <span>16,207 ft</span> |
| </div> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="thermometer-snowflake" class="w-3.5 h-3.5"></i> |
| <span>-10°C to 5°C</span> |
| </div> |
| </div> |
| <div class="flex items-center justify-between pt-4 border-t border-white/10"> |
| <div> |
| <span class="text-xs text-white/50">From</span> |
| <div class="text-xl font-bold text-peak-400">₹18,499</div> |
| </div> |
| <button class="px-5 py-2.5 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-semibold text-sm rounded-full hover:shadow-lg hover:shadow-sunset-500/20 transition-all"> |
| Book Now |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-animate trek-card rounded-2xl overflow-hidden bg-mountain-900/50 border border-white/5 group cursor-pointer"> |
| <div class="relative h-56 overflow-hidden"> |
| <img src="http://static.photos/nature/640x360/45" alt="Kashmir Great Lakes" class="trek-img w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-t from-mountain-950/90 via-transparent to-transparent"></div> |
| <div class="absolute top-4 left-4"> |
| <span class="px-3 py-1 bg-cyan-500/90 text-white text-xs font-bold rounded-full">POPULAR</span> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <button class="w-9 h-9 rounded-full bg-white/10 backdrop-blur-sm flex items-center justify-center hover:bg-white/20 transition-colors"> |
| <i data-lucide="heart" class="w-4 h-4 text-white"></i> |
| </button> |
| </div> |
| <div class="absolute bottom-4 left-4"> |
| <div class="flex items-center gap-1 text-peak-400"> |
| <i data-lucide="star" class="w-4 h-4 fill-current"></i> |
| <span class="text-sm font-semibold">4.9</span> |
| <span class="text-white/50 text-xs">(321)</span> |
| </div> |
| </div> |
| </div> |
| <div class="p-6"> |
| <h3 class="font-display text-xl font-bold mb-2 group-hover:text-peak-400 transition-colors">Kashmir Great Lakes</h3> |
| <div class="flex items-center gap-2 text-white/50 text-sm mb-4"> |
| <i data-lucide="map-pin" class="w-3.5 h-3.5"></i> |
| <span>Kashmir</span> |
| <span class="w-1 h-1 bg-white/30 rounded-full"></span> |
| <span>7 Days</span> |
| </div> |
| <div class="flex items-center gap-3 mb-4"> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="mountain" class="w-3.5 h-3.5"></i> |
| <span>13,750 ft</span> |
| </div> |
| <div class="flex items-center gap-1 text-xs text-white/60"> |
| <i data-lucide="thermometer-snowflake" class="w-3.5 h-3.5"></i> |
| <span>-5°C to 15°C</span> |
| </div> |
| </div> |
| <div class="flex items-center justify-between pt-4 border-t border-white/10"> |
| <div> |
| <span class="text-xs text-white/50">From</span> |
| <div class="text-xl font-bold text-peak-400">₹11,499</div> |
| </div> |
| <button class="px-5 py-2.5 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-semibold text-sm rounded-full hover:shadow-lg hover:shadow-sunset-500/20 transition-all"> |
| Book Now |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-animate text-center mt-12"> |
| <a href="#" class="inline-flex items-center gap-2 px-8 py-3.5 border-2 border-white/20 text-white font-semibold rounded-full hover:bg-white/10 hover:border-white/40 transition-all duration-300"> |
| View All Treks |
| <i data-lucide="arrow-right" class="w-5 h-5"></i> |
| </a> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="destinations" class="relative py-24 bg-mountain-950"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| |
| <div class="scroll-animate text-center mb-16"> |
| <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-mountain-700/30 border border-mountain-600/30 mb-4"> |
| <i data-lucide="globe" class="w-4 h-4 text-mountain-300"></i> |
| <span class="text-sm font-medium text-mountain-300">Our Destinations</span> |
| </div> |
| <h2 class="font-display text-4xl sm:text-5xl font-bold mb-4"> |
| Where We <span class="text-gradient">Take You</span> |
| </h2> |
| <p class="text-white/60 max-w-2xl mx-auto"> |
| From the snow-capped peaks of the Himalayas to the wilderness of Africa and Russia — we bring adventure to every corner. |
| </p> |
| </div> |
|
|
| |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
| <div class="scroll-animate destination-card relative rounded-2xl overflow-hidden h-64 md:h-80 cursor-pointer group col-span-2 row-span-2"> |
| <img src="http://static.photos/nature/640x360/120" alt="Uttarakhand" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> |
| <div class="dest-overlay absolute inset-0 bg-gradient-to-t from-mountain-950/80 via-mountain-950/20 to-transparent"></div> |
| <div class="absolute bottom-6 left-6"> |
| <h3 class="font-display text-2xl md:text-3xl font-bold mb-1">Uttarakhand</h3> |
| <p class="text-white/60 text-sm">12 Treks Available</p> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <span class="px-3 py-1.5 bg-peak-500/80 backdrop-blur-sm text-mountain-950 text-xs font-bold rounded-full">MOST POPULAR</span> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate destination-card relative rounded-2xl overflow-hidden h-64 md:h-[calc(50%-0.5rem)] cursor-pointer group"> |
| <img src="http://static.photos/nature/320x240/60" alt="Ladakh" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> |
| <div class="dest-overlay absolute inset-0 bg-gradient-to-t from-mountain-950/80 via-mountain-950/20 to-transparent"></div> |
| <div class="absolute bottom-4 left-4"> |
| <h3 class="font-display text-lg font-bold">Ladakh</h3> |
| <p class="text-white/60 text-xs">8 Treks</p> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate destination-card relative rounded-2xl overflow-hidden h-64 md:h-[calc(50%-0.5rem)] cursor-pointer group"> |
| <img src="http://static.photos/nature/320x240/33" alt="Sikkim" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> |
| <div class="dest-overlay absolute inset-0 bg-gradient-to-t from-mountain-950/80 via-mountain-950/20 to-transparent"></div> |
| <div class="absolute bottom-4 left-4"> |
| <h3 class="font-display text-lg font-bold">Sikkim</h3> |
| <p class="text-white/60 text-xs">5 Treks</p> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate destination-card relative rounded-2xl overflow-hidden h-64 md:h-[calc(50%-0.5rem)] cursor-pointer group"> |
| <img src="http://static.photos/nature/320x240/90" alt="Kashmir" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> |
| <div class="dest-overlay absolute inset-0 bg-gradient-to-t from-mountain-950/80 via-mountain-950/20 to-transparent"></div> |
| <div class="absolute bottom-4 left-4"> |
| <h3 class="font-display text-lg font-bold">Kashmir</h3> |
| <p class="text-white/60 text-xs">6 Treks</p> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate destination-card relative rounded-2xl overflow-hidden h-64 md:h-[calc(50%-0.5rem)] cursor-pointer group"> |
| <img src="http://static.photos/nature/320x240/15" alt="Himachal Pradesh" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> |
| <div class="dest-overlay absolute inset-0 bg-gradient-to-t from-mountain-950/80 via-mountain-950/20 to-transparent"></div> |
| <div class="absolute bottom-4 left-4"> |
| <h3 class="font-display text-lg font-bold">Himachal</h3> |
| <p class="text-white/60 text-xs">9 Treks</p> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate destination-card relative rounded-2xl overflow-hidden h-64 md:h-80 cursor-pointer group col-span-2"> |
| <img src="http://static.photos/travel/640x360/70" alt="Nepal" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> |
| <div class="dest-overlay absolute inset-0 bg-gradient-to-t from-mountain-950/80 via-mountain-950/20 to-transparent"></div> |
| <div class="absolute bottom-6 left-6"> |
| <h3 class="font-display text-2xl font-bold mb-1">Nepal</h3> |
| <p class="text-white/60 text-sm">7 Treks Available</p> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <span class="px-3 py-1.5 bg-sunset-500/80 backdrop-blur-sm text-mountain-950 text-xs font-bold rounded-full">INTERNATIONAL</span> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate destination-card relative rounded-2xl overflow-hidden h-64 md:h-80 cursor-pointer group col-span-2"> |
| <img src="http://static.photos/nature/640x360/160" alt="Africa" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"> |
| <div class="dest-overlay absolute inset-0 bg-gradient-to-t from-mountain-950/80 via-mountain-950/20 to-transparent"></div> |
| <div class="absolute bottom-6 left-6"> |
| <h3 class="font-display text-2xl font-bold mb-1">Africa & Russia</h3> |
| <p class="text-white/60 text-sm">Expeditions Beyond Boundaries</p> |
| </div> |
| <div class="absolute top-4 right-4"> |
| <span class="px-3 py-1.5 bg-red-500/80 backdrop-blur-sm text-white text-xs font-bold rounded-full">EXOTIC</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="about" class="relative py-24 overflow-hidden"> |
| |
| <div class="absolute inset-0 bg-gradient-to-b from-mountain-950 via-mountain-900/50 to-mountain-950"></div> |
| <div class="absolute inset-0 opacity-5" style="background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="1"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')"></div> |
|
|
| <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| <div class="grid lg:grid-cols-2 gap-16 items-center"> |
| |
| <div class="scroll-animate relative"> |
| <div class="grid grid-cols-2 gap-4"> |
| <div class="space-y-4"> |
| <div class="rounded-2xl overflow-hidden h-48 sm:h-56"> |
| <img src="http://static.photos/people/320x240/10" alt="Trekking team" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"> |
| </div> |
| <div class="rounded-2xl overflow-hidden h-32 sm:h-40"> |
| <img src="http://static.photos/nature/320x240/80" alt="Campsite" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"> |
| </div> |
| </div> |
| <div class="space-y-4 pt-8"> |
| <div class="rounded-2xl overflow-hidden h-32 sm:h-40"> |
| <img src="http://static.photos/outdoor/320x240/5" alt="Mountain pass" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"> |
| </div> |
| <div class="rounded-2xl overflow-hidden h-48 sm:h-56"> |
| <img src="http://static.photos/nature/320x240/110" alt="Summit view" class="w-full h-full object-cover hover:scale-105 transition-transform duration-500"> |
| </div> |
| </div> |
| </div> |
| |
| <div class="absolute -bottom-6 -right-4 sm:right-0 bg-gradient-to-br from-peak-400 to-sunset-500 rounded-2xl p-6 shadow-2xl glow-orange"> |
| <div class="text-mountain-950 font-display text-4xl font-black">10+</div> |
| <div class="text-mountain-950/80 text-sm font-medium">Years of Adventure</div> |
| </div> |
| </div> |
|
|
| |
| <div class="scroll-animate"> |
| <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-peak-500/10 border border-peak-500/20 mb-4"> |
| <i data-lucide="shield-check" class="w-4 h-4 text-peak-400"></i> |
| <span class="text-sm font-medium text-peak-400">Why Choose Us</span> |
| </div> |
| <h2 class="font-display text-4xl sm:text-5xl font-bold mb-6"> |
| The Safest Way to <span class="text-gradient">Reach The Top</span> |
| </h2> |
| <p class="text-white/60 text-lg mb-10 leading-relaxed"> |
| With over a decade of mountaineering expertise, Trek The Himalayas has earned the trust of 140,000+ adventurers. We don't just organize treks — we craft life-changing experiences with safety at the core of every step. |
| </p> |
|
|
| |
| <div class="grid sm:grid-cols-2 gap-6"> |
| <div class="flex gap-4 group"> |
| <div class="w-12 h-12 rounded-xl bg-sunset-500/10 border border-sunset-500/20 flex items-center justify-center shrink-0 group-hover:bg-sunset-500/20 transition-colors"> |
| <i data-lucide="shield" class="w-5 h-5 text-sunset-400"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">Safety First</h4> |
| <p class="text-white/50 text-sm">Certified guides & emergency medical support on every trek.</p> |
| </div> |
| </div> |
| <div class="flex gap-4 group"> |
| <div class="w-12 h-12 rounded-xl bg-peak-500/10 border border-peak-500/20 flex items-center justify-center shrink-0 group-hover:bg-peak-500/20 transition-colors"> |
| <i data-lucide="users" class="w-5 h-5 text-peak-400"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">Expert Team</h4> |
| <p class="text-white/50 text-sm">Professional mountaineers with 10+ years of experience.</p> |
| </div> |
| </div> |
| <div class="flex gap-4 group"> |
| <div class="w-12 h-12 rounded-xl bg-blue-500/10 border border-blue-500/20 flex items-center justify-center shrink-0 group-hover:bg-blue-500/20 transition-colors"> |
| <i data-lucide="tent" class="w-5 h-5 text-blue-400"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">Premium Gear</h4> |
| <p class="text-white/50 text-sm">Top-quality equipment provided for every expedition.</p> |
| </div> |
| </div> |
| <div class="flex gap-4 group"> |
| <div class="w-12 h-12 rounded-xl bg-green-500/10 border border-green-500/20 flex items-center justify-center shrink-0 group-hover:bg-green-500/20 transition-colors"> |
| <i data-lucide="heart-handshake" class="w-5 h-5 text-green-400"></i> |
| </div> |
| <div> |
| <h4 class="font-semibold mb-1">Eco Conscious</h4> |
| <p class="text-white/50 text-sm">Sustainable trekking with zero-waste principles.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="testimonials" class="relative py-24 bg-mountain-950"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
| |
| <div class="scroll-animate text-center mb-16"> |
| <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-green-500/10 border border-green-500/20 mb-4"> |
| <i data-lucide="message-circle" class="w-4 h-4 text-green-400"></i> |
| <span class="text-sm font-medium text-green-400">Testimonials</span> |
| </div> |
| <h2 class="font-display text-4xl sm:text-5xl font-bold mb-4"> |
| Voices From <span class="text-gradient">The Mountains</span> |
| </h2> |
| <p class="text-white/60 max-w-2xl mx-auto"> |
| Real stories from real adventurers who trusted us with their dreams. |
| </p> |
| </div> |
|
|
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="scroll-animate testimonial-card bg-mountain-900/50 border border-white/5 rounded-2xl p-8"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| </div> |
| <p class="text-white/70 mb-6 leading-relaxed"> |
| "The Kedarkantha trek was a dream come true! The guides were professional, supportive, and made sure everyone was safe throughout. The camping arrangements were top-notch. Can't wait for my next trek with them!" |
| </p> |
| <div class="flex items-center gap-3"> |
| <div class="w-11 h-11 rounded-full bg-gradient-to-br from-sunset-400 to-sunset-600 flex items-center justify-center text-white font-bold text-sm"> |
| AP |
| </div> |
| <div> |
| <div class="font-semibold text-sm">Ananya Patel</div> |
| <div class="text-white/40 text-xs">Kedarkantha Trek • Dec 2024</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate testimonial-card bg-mountain-900/50 border border-white/5 rounded-2xl p-8"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| </div> |
| <p class="text-white/70 mb-6 leading-relaxed"> |
| "I was a first-time trekker and was quite nervous. The team at Trek The Himalayas made me feel so comfortable! Their safety protocols are incredible, and the views were beyond what I imagined. Truly life-changing." |
| </p> |
| <div class="flex items-center gap-3"> |
| <div class="w-11 h-11 rounded-full bg-gradient-to-br from-peak-400 to-peak-600 flex items-center justify-center text-mountain-950 font-bold text-sm"> |
| RS |
| </div> |
| <div> |
| <div class="font-semibold text-sm">Rahul Sharma</div> |
| <div class="text-white/40 text-xs">Brahmatal Trek • Jan 2025</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="scroll-animate testimonial-card bg-mountain-900/50 border border-white/5 rounded-2xl p-8"> |
| <div class="flex items-center gap-1 mb-4"> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| <i data-lucide="star" class="w-4 h-4 text-peak-400 fill-current"></i> |
| </div> |
| <p class="text-white/70 mb-6 leading-relaxed"> |
| "Did the Everest Base Camp trek with TTH and it exceeded all expectations. From Kathmandu to base camp, every detail was handled perfectly. The guides' knowledge of the terrain is unmatched. 100% recommend!" |
| </p> |
| <div class="flex items-center gap-3"> |
| <div class="w-11 h-11 rounded-full bg-gradient-to-br from-blue-400 to-blue-600 flex items-center justify-center text-white font-bold text-sm"> |
| MK |
| </div> |
| <div> |
| <div class="font-semibold text-sm">Meghna Kapoor</div> |
| <div class="text-white/40 text-xs">EBC Trek • Mar 2025</div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="relative py-24 overflow-hidden"> |
| |
| <div class="absolute inset-0"> |
| <img src="http://static.photos/nature/1200x630/130" alt="Mountain vista" class="w-full h-full object-cover"> |
| <div class="absolute inset-0 bg-gradient-to-r from-mountain-950/95 to-mountain-900/85"></div> |
| </div> |
|
|
| <div class="relative z-10 max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
| <div class="scroll-animate"> |
| <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-white/10 border border-white/20 mb-6"> |
| <i data-lucide="sparkles" class="w-4 h-4 text-peak-400"></i> |
| <span class="text-sm font-medium text-white/90">Start Your Journey</span> |
| </div> |
| <h2 class="font-display text-4xl sm:text-5xl md:text-6xl font-black mb-6"> |
| Ready To <span class="text-gradient">Conquer</span> The Peaks? |
| </h2> |
| <p class="text-white/60 text-lg mb-10 max-w-2xl mx-auto"> |
| Join 140,000+ adventurers who trusted Trek The Himalayas for their life-changing mountain experience. Your next adventure awaits. |
| </p> |
|
|
| |
| <div class="flex flex-col sm:flex-row gap-3 max-w-lg mx-auto mb-8"> |
| <input type="email" placeholder="Enter your email address" class="flex-1 px-6 py-4 bg-white/10 backdrop-blur-sm border border-white/20 rounded-full text-white placeholder-white/40 focus:outline-none focus:border-peak-400/50 focus:ring-2 focus:ring-peak-400/20 transition-all"> |
| <button class="px-8 py-4 bg-gradient-to-r from-peak-400 to-sunset-500 text-mountain-950 font-bold rounded-full hover:shadow-2xl hover:shadow-sunset-500/30 transition-all duration-300 whitespace-nowrap cta-glow"> |
| Get Notified |
| </button> |
| </div> |
| <p class="text-white/30 text-sm">No spam, only adventure updates. Unsubscribe anytime.</p> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-mountain-950 border-t border-white/5"> |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
| <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-10"> |
| |
| <div class="sm:col-span-2 lg:col-span-1"> |
| <a href="#" class="flex items-center gap-3 mb-4"> |
| <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-peak-400 to-sunset-500 flex items-center justify-center"> |
| <i data-lucide="mountain" class="w-5 h-5 text-mountain-950"></i> |
| </div> |
| <div class="flex flex-col"> |
| <span class="font-display font-bold text-base leading-tight">TREK THE</span> |
| <span class="font-display font-bold text-base leading-tight text-gradient">HIMALAYAS</span> |
| </div> |
| </a> |
| <p class="text-white/40 text-sm leading-relaxed mb-6"> |
| Safest & Trusted Adventure Provider. Crafting unforgettable Himalayan experiences since 2014. |
| </p> |
| <div class="flex gap-3"> |
| <a href="#" class="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all"> |
| <i data-lucide="instagram" class="w-4 h-4 text-white/70"></i> |
| </a> |
| <a href="#" class="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all"> |
| <i data-lucide="facebook" class="w-4 h-4 text-white/70"></i> |
| </a> |
| <a href="#" class="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all"> |
| <i data-lucide="youtube" class="w-4 h-4 text-white/70"></i> |
| </a> |
| <a href="#" class="w-9 h-9 rounded-full bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 hover:border-white/20 transition-all"> |
| <i data-lucide="twitter" class="w-4 h-4 text-white/70"></i> |
| </a> |
| </div> |
| </div> |
|
|
| |
| <div> |
| <h4 class="font-display font-bold text-sm uppercase tracking-wider mb-4 text-white/90">Quick Links</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">About Us</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">All Treks</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Customize Trek</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Gallery</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Blog</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h4 class="font-display font-bold text-sm uppercase tracking-wider mb-4 text-white/90">Destinations</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Uttarakhand</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Himachal Pradesh</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Ladakh</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Sikkim</a></li> |
| <li><a href="#" class="text-white/40 hover:text-peak-400 text-sm transition-colors">Nepal</a></li> |
| </ul> |
| </div> |
|
|
| |
| <div> |
| <h4 class="font-display font-bold text-sm uppercase tracking-wider mb-4 text-white/90">Contact</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-center gap-2 text-white/40 text-sm"> |
| <i data-lucide="phone" class="w-4 h-4 text-peak-400"></i> |
| +91 98765 43210 |
| </li> |
| <li class="flex items-center gap-2 text-white/40 text-sm"> |
| <i data-lucide="mail" class="w-4 h-4 text-peak-400"></i> |
| hello@trekthehimalayas.com |
| </li> |
| <li class="flex items-start gap-2 text-white/40 text-sm"> |
| <i data-lucide="map-pin" class="w-4 h-4 text-peak-400 mt-0.5 shrink-0"></i> |
| Dehradun, Uttarakhand, India |
| </li> |
| </ul> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-12 pt-8 border-t border-white/5 flex flex-col sm:flex-row justify-between items-center gap-4"> |
| <p class="text-white/30 text-sm">© 2025 Trek The Himalayas. All rights reserved.</p> |
| <div class="flex gap-6"> |
| <a href="#" class="text-white/30 hover:text-white/60 text-sm transition-colors">Privacy</a> |
| <a href="#" class="text-white/30 hover:text-white/60 text-sm transition-colors">Terms</a> |
| <a href="#" class="text-white/30 hover:text-white/60 text-sm transition-colors">Refund Policy</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <button id="backToTop" class="fixed bottom-8 right-8 w-12 h-12 bg-gradient-to-r from-peak-400 to-sunset-500 rounded-full flex items-center justify-center shadow-lg shadow-sunset-500/20 opacity-0 translate-y-4 transition-all duration-300 z-50 hover:shadow-xl hover:shadow-sunset-500/30"> |
| <i data-lucide="chevron-up" class="w-5 h-5 text-mountain-950"></i> |
| </button> |
|
|
| <script> |
| |
| lucide.createIcons(); |
| |
| |
| const navbar = document.getElementById('navbar'); |
| let lastScroll = 0; |
| |
| window.addEventListener('scroll', () => { |
| const currentScroll = window.pageYOffset; |
| |
| if (currentScroll > 80) { |
| navbar.classList.add('bg-mountain-950/90', 'backdrop-blur-xl', 'shadow-lg', 'shadow-black/10'); |
| navbar.querySelector('.flex').classList.add('h-16'); |
| navbar.querySelector('.flex').classList.remove('h-20'); |
| } else { |
| navbar.classList.remove('bg-mountain-950/90', 'backdrop-blur-xl', 'shadow-lg', 'shadow-black/10'); |
| navbar.querySelector('.flex').classList.remove('h-16'); |
| navbar.querySelector('.flex').classList.add('h-20'); |
| } |
| |
| lastScroll = currentScroll; |
| }); |
| |
| |
| const menuBtn = document.getElementById('menuBtn'); |
| const closeMenu = document.getElementById('closeMenu'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| const mobileLinks = document.querySelectorAll('.mobile-link'); |
| |
| menuBtn.addEventListener('click', () => { |
| mobileMenu.classList.add('open'); |
| document.body.style.overflow = 'hidden'; |
| }); |
| |
| closeMenu.addEventListener('click', () => { |
| mobileMenu.classList.remove('open'); |
| document.body.style.overflow = ''; |
| }); |
| |
| mobileLinks.forEach(link => { |
| link.addEventListener('click', () => { |
| mobileMenu.classList.remove('open'); |
| document.body.style.overflow = ''; |
| }); |
| }); |
| |
| |
| const scrollElements = document.querySelectorAll('.scroll-animate'); |
| |
| const observer = new IntersectionObserver((entries) => { |
| entries.forEach((entry, index) => { |
| if (entry.isIntersecting) { |
| setTimeout(() => { |
| entry.target.classList.add('visible'); |
| }, index * 100); |
| observer.unobserve(entry.target); |
| } |
| }); |
| }, { |
| threshold: 0.1, |
| rootMargin: '0px 0px -50px 0px' |
| }); |
| |
| scrollElements.forEach(el => observer.observe(el)); |
| |
| |
| const statNumbers = document.querySelectorAll('[data-count]'); |
| |
| const countObserver = new IntersectionObserver((entries) => { |
| entries.forEach(entry => { |
| if (entry.isIntersecting) { |
| const target = parseInt(entry.target.getAttribute('data-count')); |
| const duration = 2000; |
| const start = Date.now(); |
| |
| const animate = () => { |
| const elapsed = Date.now() - start; |
| const progress = Math.min(elapsed / duration, 1); |
| const eased = 1 - Math.pow(1 - progress, 3); |
| const current = Math.floor(eased * target); |
| |
| entry.target.textContent = current.toLocaleString(); |
| |
| if (progress < 1) { |
| requestAnimationFrame(animate); |
| } else { |
| entry.target.textContent = target.toLocaleString(); |
| } |
| }; |
| |
| animate(); |
| countObserver.unobserve(entry.target); |
| } |
| }); |
| }, { threshold: 0.5 }); |
| |
| statNumbers.forEach(el => countObserver.observe(el)); |
| |
| |
| const backToTop = document.getElementById('backToTop'); |
| |
| window.addEventListener('scroll', () => { |
| if (window.pageYOffset > 600) { |
| backToTop.classList.remove('opacity-0', 'translate-y-4'); |
| backToTop.classList.add('opacity-100', 'translate-y-0'); |
| } else { |
| backToTop.classList.add('opacity-0', 'translate-y-4'); |
| backToTop.classList.remove('opacity-100', 'translate-y-0'); |
| } |
| }); |
| |
| backToTop.addEventListener('click', () => { |
| window.scrollTo({ top: 0, behavior: 'smooth' }); |
| }); |
| |
| |
| const snowContainer = document.getElementById('snowContainer'); |
| |
| function createSnow() { |
| const particle = document.createElement('div'); |
| particle.className = 'snow-particle'; |
| const size = Math.random() * 3 + 1; |
| particle.style.width = size + 'px'; |
| particle.style.height = size + 'px'; |
| particle.style.left = Math.random() * 100 + '%'; |
| particle.style.animation = `snowfall ${Math.random() * 8 + 6}s linear forwards`; |
| snowContainer.appendChild(particle); |
| |
| setTimeout(() => { |
| particle.remove(); |
| }, 14000); |
| } |
| |
| setInterval(createSnow, 400); |
| |
| |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
| anchor.addEventListener('click', function(e) { |
| e.preventDefault(); |
| const target = document.querySelector(this.getAttribute('href')); |
| if (target) { |
| const offset = 80; |
| const bodyRect = document.body.getBoundingClientRect().top; |
| const elementRect = target.getBoundingClientRect().top; |
| const elementPosition = elementRect - bodyRect; |
| const offsetPosition = elementPosition - offset; |
| |
| window.scrollTo({ |
| top: offsetPosition, |
| behavior: 'smooth' |
| }); |
| } |
| }); |
| }); |
| |
| |
| document.querySelectorAll('.trek-card button').forEach(btn => { |
| btn.addEventListener('click', function(e) { |
| e.stopPropagation(); |
| const icon = this.querySelector('[data-lucide]'); |
| if (icon.style.fill === 'rgb(239, 68, 68)') { |
| icon.style.fill = 'none'; |
| icon.style.color = 'white'; |
| } else { |
| icon.style.fill = 'rgb(239, 68, 68)'; |
| icon.style.color = 'rgb(239, 68, 68)'; |
| } |
| }); |
| }); |
| </script> |
| <script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
| </body> |
| </html> |
