HOME COMPONENTS (PART-4)

 WE START WITH STATS.JS, WE HAVE TWO SECTIONS ONE WITH SOME TEXT AND THE OTHER WITH AN IMAGE AND TWO TAGS.

TO DIVIDE WE USE CONTAINER CLASS.

STATS.JS

import React from "react";

function Stats() {

  return (

    <>

      <div className="container p-3">

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

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

            <h1>Trust with confidence</h1>

            <div className="mt-5">

              <h3>Customer-first always</h3>

              <p className="text-muted " >

                That's why 1.5+ crore customers trust Zerodha with ₹4.5+ lakh

                crores of equity investments and contribute to 15% of daily

                retail exchange volumes in India.

              </p>

            </div>

            <div>

              <h3>No spam or gimmicks</h3>

              <p className="text-muted">

                No gimmicks, spam, "gamification", or annoying push

                notifications. High quality apps that you use at your pace, the

                way you like.

              </p>

            </div>

            <div>

              <h3>The Zerodha universe</h3>

              <p className="text-muted">

                Not just an app, but a whole ecosystem. Our investments in 30+

                fintech startups offer you tailored services specific to your

                needs.

              </p>

            </div>

            <div>

              <h3>Do better with money</h3>

              <p className="text-muted">

                With initiatives like Nudge and Kill Switch, we don't just

                facilitate transactions, but actively help you do better with

                your money.

              </p>

            </div>

          </div>

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

            <img src="media/images/ecosystem.png" style={{ height:"90%",width: "90%" }} />

            <div className="row text-center">

              <div className="col-6 ">

                <a href="" className="mx-5" style={{textDecoration:"none"}}>

                  Explore &nbsp;<i class="fa-solid fa-arrow-right"></i>

                </a>

              </div>

              <div className="col-6">

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

                  Try kite &nbsp;<i class="fa-solid fa-arrow-right"></i>

                </a>

              </div>

            </div>

          </div>

        </div>

      </div>

    </>

  );

}

export default Stats;

PRICING.JS

WE HAVE TO DIVIDE THEM IN TWO BY USING CONTAINER CLASS. WE ASSIGN THE COLUMNS IN 5 AND 7.

import React from "react";

function Pricing() {

  return (

    <div className="container">

      <div className="row p-5">

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

          <h1>Unbeatable pricing</h1>

          <p>

            We pioneered the concept of discount broking and price transparency

            in India. Flat fees and no hidden charges.

          </p>

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

            See pricing &nbsp; <i class="fa-solid fa-arrow-right"></i>

          </a>

        </div>

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

          <div className="row">

            <div className="col-4" style={{display:"flex"}}>

              <img

                src="media/images/pricing0.svg"

                style={{ height: "80px" }}

              />

              <p style={{ fontSize: "12px" }}> Free account opening</p>

            </div>

            <div className="col-4" style={{display:"flex"}}>

              <img

                src="media/images/pricing0.svg"

                style={{ height: "80px" }}

              />

              <p style={{ fontSize: "12px" }}>

                Free equity delivery and direct mutual funds

              </p>

            </div>

            <div className="col-4 "style={{display:"flex"}}>

              <img

                src="media/images/intradayTrades.svg"

                style={{ height: "80px" }}

              />

              <p style={{ fontSize: "12px" }}> Intraday and F&O</p>

            </div>

          </div>

        </div>

      </div>

    </div>

  );

}

export default Pricing;

EDUCATION.JS

WE HAVE AN IMAGE ON THE LEFT AND H1,P,IMG TAGS ON THE RIGHT.

import React from "react";

function Education() {

  return (

    <div className="container">

      <div className="row">

        <div className="col-5">

          <img src="media/images/education.svg" />

        </div>

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

          <h1>Free and open market education</h1>

          <div className="mt-5">

            <p>

              Varsity, the largest online stock market education book in the

              world covering everything from the basics to advanced trading.

            </p>

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

              Varsity&nbsp; <i class="fa-solid fa-arrow-right"></i>{" "}

            </a>

          </div>

          <div className="mt-3">

            <p>

              TradingQ&A, the most active trading and investment community in

              India for all your market related queries.

            </p>

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

              TradingQ&A &nbsp; <i class="fa-solid fa-arrow-right"></i>

            </a>

          </div>

        </div>

      </div>

    </div>

  );

}

export default Education;