Skip to content

Conversation

Asmi768
Copy link

@Asmi768 Asmi768 commented Aug 8, 2025

📌 Summary

This PR enhances the Trending Tours page with improved UI/UX, interactivity, and filtering features to make the browsing experience more engaging and user-friendly.

🔹 New Features Added

1. Search Bar

  • Allows users to search for specific tours/destinations in real-time.

2. Star Rating System ⭐

  • Added Font Awesome star ratings inside each tour card to visually indicate tour popularity.

3. "More Details" Button

Replaced/added a button linking to a dedicated tour-details.html for expanded information.

4. Category Filter

Implemented filter buttons (All, Adventure, Cultural, Relaxation) using data-category attributes for tour cards.

5. Improved Card Styling 🎨

Modernized design with rounded corners, hover animations, image zoom effect, and better shadows.

6. Back to Top Button ⬆️

Added a floating button with smooth scroll for quick navigation.

### 📂 File Changes

  • trending.html – Added HTML for search bar, rating stars, filter buttons, back-to-top button, and linked tour-details.html.

  • trending.css (new or updated) – Added styling for search bar, filter, ratings, cards, and back-to-top button.

  • JavaScript (inside trending.html) – Added searchTours() and filterTours() functions, plus scroll-to-top logic.

### 🛠 Implementation Notes

  • All CSS changes can be placed in a dedicated trending.css or inside <style> tags in trending.html.

  • JavaScript is added before the closing tag for better performance.

  • Requires Font Awesome link in for star icons.

Ensure that tour-details.html exists with relevant tour content.

✅ Tested and verified for proper functionality on desktop view.
🎯 Goal: Enhance user engagement and make the Trending Tours page more interactive

Copy link

netlify bot commented Aug 8, 2025

Deploy Preview for taupe-cendol-f7e2bb ready!

Name Link
🔨 Latest commit ce12543
🔍 Latest deploy log https://app.netlify.com/projects/taupe-cendol-f7e2bb/deploys/689575e8495d7d00088c1e5e
😎 Deploy Preview https://deploy-preview-1824--taupe-cendol-f7e2bb.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

github-actions bot commented Aug 8, 2025

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant