Implementing ABOUT Component

 THE ABOUT COMPONENT HAS TWO COMPONENTS, HERO AND TEAM.

IN THE HERO COMPONENT, WE HAVE A h1 TAG AND SOME <p> TAGS

THE PARAGRAPH IS DIVIDED INTO TWO ROWS.

IN THE TEAM COMPONENT , WE WILL INCLUDE THE FOUNDER'S IMAGE AND SOME DETAILS USING THE SAME CONTAINER CLASS.

HERO.JS

import React from "react";

function Hero() {

  return (

    <>

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

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

          <h1 className="fs-2">

            We pioneered the discount broking model in India.

            <br /> Now, we are breaking ground with our technology.

          </h1>

          <div

            className="col-6  border-top"

            style={{

              marginTop: "100px",

              padding: "75px",

              fontSize: "15px",

              lineHeight: "1.8",

              textAlign:"left",

            }}

          >

            <p>

              We kick-started operations on the 15th of August, 2010 with the

              goal of breaking all barriers that traders and investors face in

              India in terms of cost, support, and technology. We named the

              company Zerodha, a combination of Zero and "Rodha", the Sanskrit

              word for barrier.

            </p>

            <p>

              Today, our disruptive pricing models and in-house technology have

              made us the biggest stock broker in India.

            </p>

            <p>

              Over 1+ Crore clients place millions of orders every day through

              our powerful ecosystem of investment platforms, contributing over

              15% of all Indian retail trading volumes.

            </p>

          </div>

          <div

            className="col-6 border-top "

            style={{

              marginTop: "100px",

              padding: "75px",

              fontSize: "15px",

              lineHeight: "1.8",

            }}

          >

            <p>

              In addition, we run a number of popular open online educational

              and community initiatives to empower retail traders and investors.

            </p>

            <p>

              <a href="" style={{textDecoration:"none"}}>Rainmatter</a>, our fintech

              fund and incubator, has invested in several fintech startups with

              the goal of growing the Indian capital markets

            </p>

            <p>

              And yet, we are always up to something new every day. Catch up on

              the latest updates on our blog or see what the media is saying

              about us

            </p>

          </div>

        </div>

      </div>

    </>

  );

}

export default Hero;

TEAM.JS

import React from "react";

function Team() {

  return (

    <>

      <>

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

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

            <h1 className="fs-2">People</h1>

            <div className="col-6 mt-5">

                <img src="media/images/nithinKamath.jpg" style={{border:"1px",borderRadius:"100%",width:"60%"}}/>

                <h5 className="mt-3 text-muted">Nithin Kamath</h5>

                <p>Founder,CEO</p>

            </div>

            <div

              className="col-6 p-5 mt-5 "

              style={{

              textAlign:"left",

                fontSize: "15px",

                lineHeight: "1.8",

              }}

            >

              <p>

                Nithin bootstrapped and founded Zerodha in 2010 to overcome the

                hurdles he faced during his decade long stint as a trader.

                Today, Zerodha has changed the landscape of the Indian broking

                industry.

              </p>

              <p>

                He is a member of the SEBI Secondary Market Advisory Committee

                (SMAC) and the Market Data Advisory Committee (MDAC).

              </p>

              <p>Playing basketball is his zen.</p>

              <p>

                Connect on&nbsp;

                <a href="" style={{ textDecoration: "none" }}>

                  Homepage/&nbsp;

                </a>

                <a href="" style={{ textDecoration: "none" }}>

                 

                  TradingQnA/&nbsp;

                </a>

                <a href=""style={{textDecoration:"none"}}> Twitter </a>

              </p>

            </div>

          </div>

        </div>

      </>

    </>

  );

}

export default Team;