Landing Page Component

The Landing Page component serves as the entry point to the application. It introduces the user to the game and provides an option to start the mission. Below, we break down its implementation.

1. Import Statements

import { useNavigate } from 'react-router-dom';

This imports `useNavigate` from `react-router-dom`, which is used for navigation between different routes/pages.

2. Functional Component Declaration

const LandingPage = () => { ... };

The `LandingPage` component is a functional component that renders the main landing screen for the application. It includes navigation logic and UI elements.

3. Navigation Hook

const navigate = useNavigate(); 
      return( ... );

This hook initializes the `navigate` function, which is used to programmatically navigate to different routes in the application.

4. Main Layout and Background Effects


        <div className="landing-container">
          <div className="stars"></div>
          <div className="twinkling"></div>

The `landing-container` serves as the main wrapper for the page. The `stars` and `twinkling` elements are added for animated background effects, giving the page a space-themed design.

5. Content Section


          <div className="content">
            <h1 className="game-title">GDG Space Fighters</h1>
            <div className="spaceship-icon">▲</div>
            <button 
              className="play-button"
              onClick={() => navigate('/game')}
            >
              Start Mission
            </button>
          </div>

This section contains the main content: - The title (`GDG Space Fighters`) is displayed prominently. - A spaceship icon (`▲`) is used for visual flair. - A 'Start Mission' button navigates to the `/game` route when clicked.

6. Export Statement

export default LandingPage;

Exports the `LandingPage` component so it can be used in the application as the main landing page.

Back to Home