Skip to main content

LandingPage

🔍 Overview​

The LandingPage component serves as the main entry point for the NAVIGO application. Its primary role is to introduce new or returning users to the game, explain its key features, and guide users toward starting their campus exploration journey through the Start Quest button. The component emphasizes clarity, engagement, and a visually appealing layout to encourage users to interact with the app.

Purpose​

  • Acts as a promotional splash page for first-time or returning users.
  • Provides a clear and engaging overview of NAVIGO’s features and objectives.
  • Serves as the gateway to user onboarding, guiding users to sign up or log in and begin gameplay.
  • Establishes a consistent brand experience with color schemes, typography, and visual elements.

File Path​

src/pages/LandingPage.js

Component Breakdown​

1. Hero Section​

  • Displays the app name prominently along with a brief tagline or description of NAVIGO.
  • Includes a Call-to-Action (CTA) button labeled Start Quest, which navigates users to the /SignUp route using <Link> from react-router-dom.
  • Uses a gradient background and centered layout to create a visually engaging entry point.

2. Features Section​

  • Highlights the core functionality of NAVIGO using reusable FeatureCard components:
    • Location Quests: Encourages campus exploration through GPS-verified quests.
    • Treasure Hunts: Provides additional challenges that motivate teamwork and problem-solving.
    • Collectibles: Rewards users with digital achievements and badges.
    • Leaderboard: Tracks user performance and encourages friendly competition.
  • Features are arranged in a responsive grid layout, adapting to various screen sizes.
  • Simple, minimal footer with centered copyright information.
  • Provides visual closure to the page and consistent branding.

FeatureCard Component​

A stateless sub-component defined within the same file, used to render feature blocks consistently.

Props:

  • icon – A visual or symbolic representation of the feature (image or symbol).
  • title – The title of the feature.
  • description – A short, descriptive explanation of the feature.

Purpose: Ensures consistent styling and layout for each feature highlight while keeping the code modular and reusable.

Design Notes​

  • Built using Tailwind CSS for flexible and responsive styling.
  • Gradient hero section (blue to indigo) to attract attention.
  • Responsive grid layout for features, which adapts to different device widths.
  • Smooth hover and transition effects for interactive elements, enhancing user experience.
  • Consistent typography and spacing for readability and aesthetic appeal.

Dependencies​

  • React – For component-based rendering.
  • react-router-dom – For client-side navigation using <Link>.
  • Tailwind CSS – For utility-first styling and responsive layouts.

Planned Enhancements​

  • Add animations or scroll effects for more engaging interaction.
  • Integrate dynamic leaderboard data and feature highlights fetched from the backend.