SwatExplorer/jarogo.html at main · ShahFaisal03/SwatExplorer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Jarogo Waterfall – Swat Valley Explorer</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet"/>
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🏔</text></svg>"/>
<link rel="stylesheet" href="css/global.css"/>
<link rel="stylesheet" href="css/attraction.css"/>
</head>
<body>

<nav id="mainNav">
  <a href="index.html" class="logo">
    <div class="logo-icon">🏔</div>
    <div class="logo-text"><span>SwatExplorer</span><span>Swat Valley · Pakistan</span></div>
  </a>
  <a href="index.html#attractions" class="nav-back">← Back to All Attractions</a>
</nav>

<section class="hero">
  <div class="hero-bg" style="background-image:url('https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=1800&q=85')"></div>
  <div class="hero-grad"></div>
  <div class="hero-grad2"></div>
  <!-- animated rain drops -->
  <div class="drops" id="drops"></div>
  <div class="hero-content">
    <div class="hero-tag">💧 Waterfall · Upper Swat</div>
    <h1>Jarogo Waterfall</h1>
    <p class="hero-sub-title">"Pakistan's most thunderous cascade hidden in the forest"</p>
    <div class="hero-meta">
      <div class="meta-item">📍 <span>101 km from Mingora</span></div>
      <div class="meta-item">💧 <span>~100m Drop</span></div>
      <div class="meta-item">🌿 <span>Near Kalam</span></div>
      <div class="meta-item">⭐ <span>4.8 / 5 Rating</span></div>
    </div>
  </div>
  <div class="scroll-line">Scroll</div>
</section>

<div class="facts-bar">
  <div class="facts-inner">
    <div class="fact"><span class="fval">~100m</span><span class="flbl">Drop Height</span></div>
    <div class="fact"><span class="fval">101 km</span><span class="flbl">From Mingora</span></div>
    <div class="fact"><span class="fval">45 min</span><span class="flbl">Trek from Road</span></div>
    <div class="fact"><span class="fval">Jun–Sep</span><span class="flbl">Best Season</span></div>
    <div class="fact"><span class="fval">Glacial</span><span class="flbl">Water Source</span></div>
  </div>
</div>

<section class="section" id="overview">
  <div class="container">
    <div class="overview-grid reveal">
      <div class="overview-text">
        <div class="sec-label">Overview</div>
        <h2 class="sec-title">Pakistan's Most Dramatic Waterfall</h2>
        <p>Jarogo Waterfall is one of Pakistan's most awe-inspiring natural spectacles — a thundering cascade of glacial water plunging nearly 100 metres down a sheer rock face into a mist-filled pool below, surrounded by dense pine and deodar forest in upper Swat Valley.</p>
        <p>Located just 6 km from Kalam, the waterfall is accessible via a scenic forest trek that winds through towering trees, across wooden bridges and along a rushing mountain stream. The sound of the falls can be heard long before they come into view — building anticipation with every step.</p>
        <p>In summer, the falls are at their most powerful — fed by snowmelt from the surrounding peaks. The mist created by the cascade keeps the surrounding forest lush, cool and otherworldly even on the hottest days.</p>
        <div class="highlight-box">
          <h4>💎 Why Jarogo is Unmissable</h4>
          <ul>
            <li>Nearly 100m thundering glacial waterfall</li>
            <li>Stunning forest trek to reach it</li>
            <li>Natural pool at the base for cooling off</li>
            <li>Mist-shrouded pine forest atmosphere</li>
            <li>Rainbow visible in the spray on sunny days</li>
            <li>Combined perfectly with a Kalam Valley trip</li>
          </ul>
        </div>
      </div>
      <div class="overview-imgs">
        <img src="https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=900&q=85" alt="Jarogo Waterfall"/>
        <img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=500&q=80" alt="Forest path"/>
        <img src="https://images.unsplash.com/photo-1586348943529-beaae6c28db9?w=500&q=80" alt="Valley"/>
      </div>
    </div>
  </div>
</section>

<!-- WATERFALL FACTS -->
<section class="section" id="science" style="padding-top:0;">
  <div class="container">
    <div class="sec-label reveal" style="color:rgba(255,255,255,0.5);">Waterfall Facts</div>
    <h2 class="sec-title reveal" style="color:#fff;">The Science of Jarogo</h2>
    <div class="science-grid reveal">
      <div class="sci-card"><span class="sci-icon">📏</span><h4>Height</h4><p>The main cascade drops approximately 100 metres in a single unbroken plunge — one of the tallest single-drop waterfalls in Khyber Pakhtunkhwa.</p><span class="sci-val">~100 metres</span></div>
      <div class="sci-card"><span class="sci-icon">🧊</span><h4>Water Source</h4><p>Fed entirely by glacial meltwater from the snow-capped peaks above Kalam. Flow peaks in July–August when snowmelt is at its maximum.</p><span class="sci-val">Glacial Origin</span></div>
      <div class="sci-card"><span class="sci-icon">🌡</span><h4>Water Temperature</h4><p>Even in peak summer the water at Jarogo is ice-cold — typically 4–8°C. The natural pool at the base is refreshingly cold on a warm day.</p><span class="sci-val">4–8°C</span></div>
      <div class="sci-card"><span class="sci-icon">🌈</span><h4>The Rainbow</h4><p>On clear sunny mornings (9–11 AM), sunlight catches the spray and creates a vivid rainbow in the mist at the base. A truly magical sight.</p><span class="sci-val">Best: 9–11 AM</span></div>
      <div class="sci-card"><span class="sci-icon">🌿</span><h4>Ecosystem</h4><p>The perpetual moisture from the falls supports an unusually lush microclimate — mosses, ferns and rare mountain flowers thrive in the surrounding forest.</p><span class="sci-val">Rich Biodiversity</span></div>
      <div class="sci-card"><span class="sci-icon">🔊</span><h4>Sound</h4><p>The roar of Jarogo can be heard from over 500 metres away on calm days. The sound builds dramatically as you approach on the forest trail.</p><span class="sci-val">Heard from 500m</span></div>
    </div>
  </div>
</section>

<section class="section" id="gallery">
  <div class="container">
    <div class="sec-label reveal">Photo Gallery</div>
    <h2 class="sec-title reveal">Jarogo in Pictures</h2>
    <div class="gallery-grid reveal">
      <div class="g-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?w=1200&q=85" alt="Jarogo wide"/></div>
      <div class="g-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=700&q=80" alt="Forest"/></div>
      <div class="g-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1586348943529-beaae6c28db9?w=700&q=80" alt="Valley"/></div>
      <div class="g-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=700&q=80" alt="Peaks"/></div>
      <div class="g-item" onclick="openLightbox(this)"><img src="https://images.unsplash.com/photo-1519681393784-d120267933ba?w=700&q=80" alt="Night"/></div>
    </div>
  </div>
</section>
<div class="lightbox" id="lightbox" onclick="closeLightbox()">
  <span class="lightbox-close">✕</span>
  <img id="lightboxImg" src="" alt=""/>
</div>

<section class="section" id="activities" style="padding-top:0;">
  <div class="container">
    <div class="sec-label reveal">Activities</div>
    <h2 class="sec-title reveal">Things To Do at Jarogo</h2>
    <div class="activities-grid reveal">
      <div class="act-card"><span class="act-icon">🥾</span><h4>Forest Trek</h4><p>The 45-minute trail through pine forest to reach the falls is an experience in itself — mossy rocks, wooden bridges and birdsong.</p><span class="act-badge">Jun – Sep</span></div>
      <div class="act-card"><span class="act-icon">📸</span><h4>Waterfall Photography</h4><p>The falls offer incredible long-exposure photography opportunities. Best light is morning when the sun hits the spray.</p><span class="act-badge">All Year</span></div>
      <div class="act-card"><span class="act-icon">💦</span><h4>Mist Pool Dip</h4><p>Wade into the ice-cold natural pool at the base of the falls. Absolutely refreshing on a summer day — bring a change of clothes!</p><span class="act-badge">Jun – Aug</span></div>
      <div class="act-card"><span class="act-icon">🌈</span><h4>Rainbow Watching</h4><p>On clear mornings, a rainbow forms in the mist. Arrive by 9 AM for the best chance of seeing this natural phenomenon.</p><span class="act-badge">Jun – Aug</span></div>
      <div class="act-card"><span class="act-icon">🧺</span><h4>Forest Picnic</h4><p>The clearing near the falls is a perfect picnic spot. Pack lunch and enjoy the soundtrack of the waterfall with mountain air.</p><span class="act-badge">Jun – Sep</span></div>
      <div class="act-card"><span class="act-icon">🐦</span><h4>Birdwatching</h4><p>The moist forest around Jarogo is home to rare Himalayan bird species. Bring binoculars for a rewarding morning wildlife session.</p><span class="act-badge">All Year</span></div>
    </div>
  </div>
</section>

<!-- TREK GUIDE -->
<section class="section" id="trek">
  <div class="container">
    <div class="sec-label reveal">Trek Guide</div>
    <h2 class="sec-title reveal">How to Reach the Falls — Step by Step</h2>
    <p class="sec-sub reveal">The trek to Jarogo is straightforward and suitable for all fitness levels. Here's exactly what to expect.</p>
    <div class="trek-steps reveal">
      <div class="trek-step">
        <div class="step-num">1</div>
        <div class="step-body">
          <h4>Start at Kalam Bazaar</h4>
          <p>Begin from Kalam town centre. Head towards the Jarogo road — locals will point you in the right direction. The trailhead is clearly marked.</p>
          <span class="step-tag">📍 Kalam Town</span>
        </div>
      </div>
      <div class="trek-step">
        <div class="step-num">2</div>
        <div class="step-body">
          <h4>Drive or Walk to Trailhead (6 km)</h4>
          <p>A short road leads from Kalam to the Jarogo trailhead. Drive (10 min) or hire a motorbike taxi (Rs 150–200). Park at the small clearing near the stream.</p>
          <span class="step-tag">🚗 6 km from Kalam</span>
        </div>
      </div>
      <div class="trek-step">
        <div class="step-num">3</div>
        <div class="step-body">
          <h4>Forest Trail Begins</h4>
          <p>The trail follows a mountain stream through dense pine forest. The path is mostly flat with a gentle incline. Watch for wooden bridges over the stream.</p>
          <span class="step-tag">⏱ 20 minutes in</span>
        </div>
      </div>
      <div class="trek-step">
        <div class="step-num">4</div>
        <div class="step-body">
          <h4>You Hear the Waterfall</h4>
          <p>About 30 minutes in, the roar of Jarogo begins to build. The air gets noticeably cooler and more misty. You're almost there — keep going!</p>
          <span class="step-tag">🔊 30 minutes in</span>
        </div>
      </div>
      <div class="trek-step">
        <div class="step-num">5</div>
        <div class="step-body">
          <h4>Arrive at Jarogo Waterfall!</h4>
          <p>The forest opens dramatically and the full 100m cascade comes into view. The spray fills the air and a natural pool awaits at the base. Enjoy!</p>
          <span class="step-tag">🎉 ~45 minutes total</span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="booking">
  <div class="container">
    <div class="sec-label reveal">Book Your Visit</div>
    <h2 class="sec-title reveal">Plan Your Jarogo Adventure</h2>
    <p class="sec-sub reveal">We combine Jarogo with Kalam Valley for the ultimate upper Swat experience.</p>
    <div class="booking-grid reveal">
      <div class="booking-packages">
        <div class="pkg active" onclick="selectPkg(this)">
          <div class="pkg-top"><h4>💧 Waterfall Day Trip</h4><div class="pkg-price">Rs 3,500 <small>/person</small></div></div>
          <p>Transport from Kalam, guided forest trek to Jarogo, packed lunch & return.</p>
          <div class="pkg-features"><span>Transport</span><span>Guide</span><span>Lunch</span></div>
        </div>
        <div class="pkg popular" onclick="selectPkg(this)">
          <div class="pkg-top"><h4>🌿 Kalam + Jarogo</h4><div class="pkg-price">Rs 8,500 <small>/person</small></div></div>
          <p>2 days — Kalam overnight stay, Jarogo trek, Ushu Forest & river activities.</p>
          <div class="pkg-features"><span>1 Night</span><span>Jarogo</span><span>Ushu</span><span>Meals</span></div>
        </div>
        <div class="pkg" onclick="selectPkg(this)">
          <div class="pkg-top"><h4>🏔 Upper Swat Explorer</h4><div class="pkg-price">Rs 20,000 <small>/person</small></div></div>
          <p>3 days — Kalam base, Jarogo, Mahodand Lake & Utror Valley full package.</p>
          <div class="pkg-features"><span>3 Days</span><span>Jarogo</span><span>Mahodand</span><span>Utror</span></div>
        </div>
        <div class="pkg" onclick="selectPkg(this)">
          <div class="pkg-top"><h4>📸 Photography Tour</h4><div class="pkg-price">Rs 12,000 <small>/person</small></div></div>
          <p>2-day professional photography tour of Jarogo — golden hour, rainbow mist & long exposures.</p>
          <div class="pkg-features"><span>2 Days</span><span>Pro Guide</span><span>Best Angles</span></div>
        </div>
      </div>
      <div class="booking-form">
        <h3>📋 Reserve Your Spot</h3>
        <div class="form-row">
          <div class="form-group"><label>Full Name</label><input type="text" placeholder="Your name"/></div>
          <div class="form-group"><label>Phone / WhatsApp</label><input type="text" placeholder="+92 300 ..."/></div>
        </div>
        <div class="form-row">
          <div class="form-group"><label>Travel Date</label><input type="date"/></div>
          <div class="form-group"><label>No. of Guests</label>
            <select><option>1 Person</option><option>2 Persons</option><option>3-5 Persons</option><option>6-10 Persons</option><option>10+ Persons</option></select>
          </div>
        </div>
        <div class="form-group"><label>Package</label>
          <select><option>Waterfall Day Trip – Rs 3,500</option><option>Kalam + Jarogo – Rs 8,500</option><option>Upper Swat Explorer – Rs 20,000</option><option>Photography Tour – Rs 12,000</option></select>
        </div>
        <div class="form-group"><label>Special Requests</label><textarea placeholder="Photography equipment, accessibility needs, early start..."></textarea></div>
        <button class="btn-book" onclick="submitBooking()">✈ Confirm Booking</button>
        <a href="https://wa.me/923001234567?text=Hi!%20I%20want%20to%20visit%20Jarogo%20Waterfall." target="_blank" class="btn-wa2">
          <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
          Book via WhatsApp
        </a>
      </div>
    </div>
  </div>
</section>

<section class="section" id="reach">
  <div class="container">
    <div class="sec-label reveal">Getting There</div>
    <h2 class="sec-title reveal">How To Reach Jarogo Waterfall</h2>
    <div class="reach-grid reveal">
      <div class="reach-card"><div class="r-icon">🚗</div><h4>From Mingora</h4><p>Drive to Kalam (3 hrs via Bahrain). From Kalam take the Jarogo road 6 km to the trailhead. Total driving: ~3.5 hrs from Mingora.</p></div>
      <div class="reach-card"><div class="r-icon">🏍</div><h4>Motorbike from Kalam</h4><p>The most popular local option — motorbike taxis from Kalam bazaar take you to the Jarogo trailhead for Rs 150–200 per person.</p></div>
      <div class="reach-card"><div class="r-icon">🚶</div><h4>The Trek</h4><p>From the trailhead, the forest hike to the waterfall takes 40–50 minutes at a comfortable pace. The trail is well-trodden and easy to follow.</p></div>
      <div class="reach-card"><div class="r-icon">📍</div><h4>GPS Coordinates</h4><p>35.4923° N, 72.5612° E (Jarogo trailhead) — Search "Jarogo Waterfall Kalam" on Google Maps for directions.</p></div>
    </div>
  </div>
</section>

<section class="section" id="tips-section">
  <div class="container">
    <div class="sec-label reveal">Visitor Tips</div>
    <h2 class="sec-title reveal">Essential Tips for Jarogo</h2>
    <div class="tips-list reveal">
      <div class="tip"><div class="tip-icon">👟</div><p><strong>Wear Proper Footwear</strong>The trail has wet, slippery rocks near the falls. Wear hiking shoes or sturdy trainers — never sandals or flip-flops.</p></div>
      <div class="tip"><div class="tip-icon">👕</div><p><strong>Bring a Change of Clothes</strong>The mist at the base soaks you within minutes. Pack a dry set of clothes in a waterproof bag before you head in.</p></div>
      <div class="tip"><div class="tip-icon">🕗</div><p><strong>Go Early for Rainbow</strong>The rainbow in the mist appears between 9–11 AM on clear days. This is also the best time for photography with soft morning light.</p></div>
      <div class="tip"><div class="tip-icon">💵</div><p><strong>No Facilities at Falls</strong>No shops or vendors near the waterfall. Bring all food, water and snacks from Kalam. The nearest tea stall is at the trailhead.</p></div>
      <div class="tip"><div class="tip-icon">🌧</div><p><strong>Avoid After Heavy Rain</strong>After heavy rainfall, the trail becomes dangerously slippery and the pool floods. Wait 24 hours after rain before visiting.</p></div>
      <div class="tip"><div class="tip-icon">📸</div><p><strong>Photography Settings</strong>Use a slow shutter speed (1/4 – 1 second) for silky water effect. Bring a tripod for best long-exposure shots of the falls.</p></div>
    </div>
  </div>
</section>

<section class="section" id="more">
  <div class="container">
    <div class="sec-label reveal">Explore More</div>
    <h2 class="sec-title reveal">More Upper Swat Wonders</h2>
    <div class="more-grid reveal">
      <a href="kalam.html" class="more-card"><img src="/images/kalam.webp" alt="Kalam"/><div class="more-card-body"><h4>Kalam Valley</h4><p>Base camp & gateway · 6 km away</p></div></a>
      <a href="mahodand.html" class="more-card"><img src="https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?w=600&q=80" alt="Mahodand"/><div class="more-card-body"><h4>Mahodand Lake</h4><p>Alpine lake · 35 km from Kalam</p></div></a>
      <a href="malam-jabba.html" class="more-card"><img src="/images/malamjabba.webp" alt="Malam Jabba"/><div class="more-card-body"><h4>Malam Jabba</h4><p>Ski resort · 68 km from Mingora</p></div></a>
      <a href="fizagat.html" class="more-card"><img src="https://images.unsplash.com/photo-1518021964703-4b2030f03085?w=600&q=80" alt="Fizagat"/><div class="more-card-body"><h4>Fizagat Park</h4><p>Riverside park · 8 km from Mingora</p></div></a>
    </div>
  </div>
</section>

<footer><p>© 2025 <a href="index.html">SwatExplorer</a> · Jarogo Waterfall — Pakistan's Thundering Cascade · Made with ❤ in Swat</p></footer>

<script src="js/main.js"></script>
<script src="js/attraction.js"></script>
</body>
</html>