*********UPDATING THE FRONTEND*********

 WE WILL BEGIN WITH UPDATING THE FOOTER,

IN FOOTER.JS

import React from "react";

function Footer() {

  return (

    <>

      <div className="footer">

        <div className=" f-brand ">&copy;TradeEasy Private Ltd</div>

        <div className="f-info-socials  ">

          <br /><br /><br />

          <a href="https://www.linkedin.com/in/abhishek-kumar5471/">

            <i class="fa-brands fa-linkedin"></i>

          </a>

          <a href="https://github.com/abhishekkumar71">

            <i class="fa-brands fa-github"></i>

          </a>

          <a href="https://www.blogger.com/profile/11390721205359469828">

            <i class="fa-brands fa-blogger"></i>

          </a>

        </div>

      </div>

  );

}

export default Footer;

NOW WE REMOVE  SUPPORT , PRODUCTS FROM NAVBAR .

THE HOME PAGE IS UPDATED.

import React from "react";

import Hero from "./Hero";

import Pricing from "./Pricing";

import About from "./about";

function HomePage() {

  return (

    <>

      <Hero />

      <About />

      <Pricing />

    </>

  );

}

export default HomePage;

IN THE HERO SECTION, WE INCLUDE OUR IMAGE , LOGO AND CONTENT.

HERO.JS

import React from "react";

function Hero() {

  return (

    <>

      <div className="container p-5">

        <div className="row text-center ">

          <div className="container-fluid">

            <img

              src="media/images/left.png"

              className="mb-4"

              style={{ width: "20%",height:"80%",marginTop:"2.6rem" }}

            />

              <img

              src="media/images/watchlist.png"

              className="mb-4"

              style={{ width: "53%" }}

            />  <img

            src="media/images/holdings.png"

            className="mb-4"

            style={{ width: "25%",height:"80%",marginTop:"2.6rem" }}

          />

          </div>

          <h1 className="mt-5">Invest in everything</h1>

          <p className="m-4 fs-5">

            Online platform to invest in stocks

          </p>

          <button

            className="btn btn-primary fs-5"

            style={{ width: "18%", margin: "0 auto" }}

          >

            Signup now

          </button>

        </div>

      </div>

    </>

  );

}

export default Hero;

THE ABOUT SECTION  IN THE HOME PAGE IS UPDATED TOO

import React from "react";

export default function About() {

  return (

    <div className="container mt-5 p-5 fs-5" style={{textAlign:"center"}}>

      <p>

        Welcome to your personalized stock market dashboard! Our Stock Market

        Watchlist lets you effortlessly monitor the latest real-time stock data

        from various global exchanges, giving you up-to-date information on the

        companies you care about. Whether you’re a beginner or an experienced

        investor, this intuitive platform makes tracking stocks, viewing

        performance charts, and managing your investments simple.

      </p>

      <br />

      <p>

        Built with React and Material UI, the sleek, user-friendly interface

        offers a seamless experience across devices. You can add stocks to your

        watchlist, check live prices, and dive deep into detailed stock

        information, all while visualizing trends with interactive doughnut

        charts.

      </p>

      <p>

        Take control of your investments with ease, track your portfolio

        performance, and make smarter decisions, all from one place

      </p>

    </div>

  );

}

THE ABOUT SECTION IN NABVAR IS UPDATED. WE CREATED TWO SECTIONS NAMELY, LEFT AND RIGHT SECTION TO DISPLAY OUR CONTENT.

THE HERO COMPONENT IS UPDATED.

HERO.JS

function Hero() {

  return (

    <>

      <div className="container mt-5 p-5">

        <div className="row text-center flex flex-start">

          <h1 className="fs-2">

            Stay on top of the stock market with our interactive watchlist.<br/>

            Track real-time stock data from global exchanges, including detailed

            information, performance charts, and easy-to-read insights.

          </h1>

THE LEFTSECTION.JS

import React from "react";

function LeftSection({

    imgURL,

    ProductName,

    ProductDescription,

}) {

  return (

    <>

       <div className="container">

        <div className="row">

          <div className="col-7 mt-5 mr-2 p-5 mb-3" >

            <img src={imgURL} style={{width:"80%",border:"1px",borderRadius:"10px"}}/>

          </div>

          <div className="col-5 mt-5 p-5" style={{lineHeight:"1.8"}}>

            <h2>{ProductName}</h2>

            <p>{ProductDescription}</p>

          </div>

        </div>

      </div>

    </>

  );

}

export default LeftSection;

RIGHTSECTION.JS

import React from "react";

export default function RightSection({ imgURL, ProductName, ProductDescription}) {

  return (

    <>

      <div className="container">

        <div className="row ">

          <div className="col-5 p-5" style={{marginTop:"210px"}}>

            <h1>{ProductName}</h1>

            <p>{ProductDescription}</p>

           

          </div>

          <div className="col-7 mt-5 p-5">

          <img src={imgURL} style={{width:"80%",border:"1px",borderRadius:"10px"}}/>

          </div>

        </div>

      </div>

    </>

  );

}