Abhishek Gurjar

Posted on Sep 11

Building a Manage Landing Page using React

#css #javascript #react #managelandingpage

Introduction

The "Manage" landing page is designed to introduce users to the Manage application, highlighting its features and encouraging them to get started. We'll use React for component-based development and CSS for styling the page.

Project Overview

The landing page consists of several key components:

Navbar: Contains navigation links and a call-to-action button.
Home: Features a headline, a description of the product, and a prominent illustration.
About: Provides details about what sets Manage apart.
Testimonials: Displays user testimonials to build credibility.
Footer: Contains links, social media icons, and a subscription form.

Features

Responsive Design: The layout adjusts to different screen sizes.
Interactive Elements: Buttons and links have hover effects to improve user interaction.
Clean Layout: Each section of the page is clearly defined for a pleasant user experience.

Technologies Used

React: For building reusable components.
CSS: For styling and layout adjustments.

Project Structure

The project is organized into the following structure:

/src
  /assets
    /images
  /components
    About.js
    Footer.js
    Home.js
    Navbar.js
    Testimonials.js
  App.js
  App.css

Installation

To get started with this project, clone the repository and install the necessary dependencies:

git clone https://github.com/abhishekgurjar-in/
cd Manage-Landing-Page
npm install

Run the project locally using:

npm start

Code Explanation

`App.js`

The App component is the root of the application. It imports and renders the Navbar, Home, About, Testimonials, and Footer components, applying different background styles for visual differentiation.

import React from "react";
import "./App.css";
import Navbar from "./components/Navbar";
import Home from "./components/Home";
import About from "./components/About";
import Testimonials from "./components/Testimonials";
import Footer from "./components/Footer";

const App = () => {
  return (
    <>
      <div className="bg">
        <Navbar />
        <Home />
      </div>
     <div className="bg-2">
     <About />
     <Testimonials />
     </div>
      <Footer />
    </>
  );
};

export default App;

`Navbar.js`

The Navbar component includes the logo and navigation links. The call-to-action button encourages users to get started.

import React from "react";
import logo from "../assets/images/logo.svg";
const Navbar = () => {
  return (
    <div className="navbar">
      <div className="logo">
        <img src={logo} alt="logo" />
      </div>
      <div className="header">
        <a href="">Pricing</a>
        <a href="">Product</a>
        <a href="">About Us</a>
        <a href="">Careers</a>
        <a href="">Community</a>
      </div>
      <div className="button">
        <p>Get Started</p>
      </div>
    </div>
  );
};

export default Navbar;

`Home.js`

The Home component features a headline, a description of the Manage app, and an illustration.

import React from 'react'
import illustration from "../assets/images/illustration-intro.svg"
const Home = () => {
  return (
    <div className='home'>
      <div className="left-home">
        <h1>Bring everyone together to build better products.</h1>
        <p>Manage makes it simple for software teams to plan day-to-day tasks while keeping the larger team goals in view.</p>
        <div className="button">
          <p>Get Started</p>
        </div>
      </div>
      <div className="right-home">
          <img src={illustration} alt="" />
      </div>
    </div>
  )
}

export default Home

`About.js`

The About component outlines the features and benefits of Manage with numbered sections.

import React from "react";

const About = () => {
  return (
    <div className="about">
      <div className="left-about">
        <h1>What's different about Manage?</h1>
        <p>
          Manage provides all the functionality your team needs, without the
          complexity. Our software is tailor-made for modern digital product
          teams.
        </p>
      </div>
      <div className="right-about">
        <div className="box">
          <div className="title">
            <h3>01</h3>
            <h4>Track company-wide progress</h4>
          </div>
          <p className="para">
            See how your day-to-day tasks fit into the wider vision. Go from
            tracking progress at the milestone level all the way done to the
            smallest of details. Never lose sight of the bigger picture again.
          </p>
        </div>
        <div className="box">
          <div className="title">
            <h3>02</h3>
            <h4>Advanced built-in reports</h4>
          </div>
          <p className="para" >
            Set internal delivery estimates and track progress toward company
            goals. Our customisable dashboard helps you build out the reports
            you need to keep key stakeholders informed.
          </p>
        </div>
        <div className="box">
          <div className="title">
            <h3>03</h3>
            <h4>Everything you need in one place</h4>
          </div>
          <p className="para" >
            Stop jumping from one service to another to communicate, store
            files, track tasks and share documents. Manage offers an all-in-one
            team productivity solution.
          </p>
        </div>
      </div>
    </div>
  );
};

export default About;

`Testimonials.js`

The Testimonials component showcases user feedback to build trust.

import React from "react";
import Ali from "../assets//images/avatar-ali.png";
import anisha from "../assets/images/avatar-anisha.png";
import richard from "../assets/images/avatar-richard.png";
import shanai from "../assets/images/avatar-shanai.png";
const Testimonials = () => {
  return (
    <div className="testimonials">
      <h1>What they've said</h1>
      <div className="cards">
        <div className="card">
          <img src={richard} alt="" />
          <h4>Richard Watts</h4>
          <p>
            “Manage allows us to provide structure and process. It keeps us
            organized and focused. I can’t stop recommending them to everyone I
            talk to!”
          </p>
        </div>
        <div className="card">
          <img src={shanai} alt="" />
          <h4> Shanai Gough</h4>
          <p>
            “Their software allows us to track, manage and collaborate on our
            projects from anywhere. It keeps the whole team in-sync without
            being intrusive.”
          </p>
        </div>
        <div className="card">
          <img src={anisha} alt="" />
          <h4>Anisha Li</h4>
          <p>
            “Manage has supercharged our team’s workflow. The ability to
            maintain visibility on larger milestones at all times keeps everyone
            motivated.”
          </p>
        </div>
        <div className="card">
          <img src={Ali} alt="" />
          <h4>Ali Bravo</h4>
          <p>
            “We have been able to cancel so many other subscriptions since using
            Manage. There is no more cross-channel confusion and everyone is
            much more focused.”
          </p>
        </div>
      </div>
      <div className="button">
        <p>Get started</p>
      </div>
    </div>
  );
};

export default Testimonials;

`Footer.js`

The Footer component includes social media links, additional navigation links, and a subscription form.

import React from "react";
import logo from "../assets/images/logo.svg";
import fb from "../assets/images/icon-facebook.svg";
import ig from "../assets/images/icon-instagram.svg";
import tw from "../assets/images/icon-twitter.svg";
import pt from "../assets/images/icon-pinterest.svg";
import yt from "../assets/images/icon-youtube.svg";
const Footer = () => {
  return (
    <div className="Footer">
      <div className="first-footer">
        <h1>Simplify how your team works today.</h1>
        <div className="button">
          <p>Get Started</p>
        </div>
      </div>
      <div className="last-footer">
        <div className="logos">
          <img src={logo} alt="" />
          <div className="social-logo">
            <img src={fb} alt="" />
            <img src={yt} alt="" />
            <img src={tw} alt="" />
            <img src={pt} alt="" />
            <img src={ig} alt="" />
          </div>
          <p>Made with ❤️ by Abhishek Gurjar</p>
        </div>
        <div className="links1">
          <a href="">Home</a>
          <a href="">Pricing</a>
          <a href="">Products</a>
          <a href="">About Us</a>
        </div>
        <div className="links2">
          <a href="">Careers</a>
          <a href="">Community</a>
          <a href="">Privacy Policy</a>

        </div>
        <div className="subscribe">
          <div className="input-section">
            <div className="input-box">
              <input type="text" placeholder="updates tour in inbox" />
            </div>
            <div className="button">
                <p>Go</p>
              </div>
          </div>
          <p className="copyright" >Copyright 2020. All Rights Reserved</p>
        </div>
      </div>
    </div>
  );
};

export default Footer;

Live Demo

You can view the live demo of the project here.

Conclusion

Building the "Manage" landing page provides a great example of how to create a responsive and user-friendly interface using React and CSS. By focusing on clear design principles and interactive elements, you can create an engaging landing page that effectively communicates the value of your product.

Credits

React: For building the user interface.
CSS: For styling and layout.
Images: Custom illustrations and icons.

Author

Abhishek Gurjar is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on GitHub.

DEV Community