PRODUCT COMPONENT
INCLUDES A HERO, LEFT SECTION, RIGHT SECTION, UNIVERSE SECTION
IN THE HERO COMPONENT, WE CONTAIN A <h1>,<h4>,<p>,<a> TAG.
HERO.JS
import React from "react";
function Hero() {
return (
<>
<div className="text-center mt-5 p-5 border-bottom" style={{lineHeight:"1.8"}}>
<h1>Zerodha Products</h1>
<h4 className="mt-3">Sleek, modern, and intuitive trading platforms</h4>
<p className="mt-3">
Check out our
<a href="" style={{ textDecoration: "none" }}>
investment offerings →
</a>
</p>
</div>
</>
);
}
export default Hero;
LEFTSECTION.JS
IN THE LEFT SECTION, WE HAVE AN IMAGE ON THE LEFT AND PRODUCT NAME, DESCRIPTION, ANCHOR TAGS AND PLAYSTORE,APPSTORE COMPONENTS.
IMGURL,PRODUCTNAME,PRODUCT DESCRIPTION,TRY DEMO AND LEARN MORE (ANCHOR TAGS) AND STOR ARE SENT AS PROPS.
SO THEY CAN BE USED AGAIN.
import React from "react";
function LeftSection({
imgURL,
ProductName,
ProductDescription,
TryDemo,
LearnMore,
appStore,
PlayStore,
}) {
return (
<>
<div className="container">
<div className="row">
<div className="col-7 mt-5 mr-2 p-5 mb-3" >
<img src={imgURL} />
</div>
<div className="col-5 mt-5 p-5" style={{lineHeight:"1.8"}}>
<h2>{ProductName}</h2>
<p>{ProductDescription}</p>
<div className="mt-3 ">
<a href={TryDemo} style={{ textDecoration: "none" }}>
Try demo <i class="fa-solid fa-arrow-right"></i>
</a>
<a href={LearnMore} style={{ textDecoration: "none",marginLeft:"105px" }}>
Learn more <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div className="mt-3 " >
<a href={appStore}>
<img src="media/images/appstoreBadge.svg" />
</a>
<a href={PlayStore} style={{marginLeft:"50px"}}>
<img src="media/images/googlePlayBadge.svg" />
</a>
</div>
</div>
</div>
</div>
</>
);
}
export default LeftSection;
RIGHTSECTION.JS
SIMILAR TO THAT OF THE LEFT SECTION, WE SENT PROPS TO USE THE COMPONENT MULTIPLE TIMES.
import React from "react";
function RightSection({ imgURL, ProductName, ProductDescription, LearnMore }) {
return (
<>
<div className="container">
<div className="row ">
<div className="col-5 p-5" style={{marginTop:"210px"}}>
<h1>{ProductName}</h1>
<p>{ProductDescription}</p>
<a href={LearnMore}>
Learn More <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<div className="col-7 mt-5 p-5">
<img src={imgURL} />
</div>
</div>
</div>
</>
);
}
export default RightSection;
UNIVERSE.JS
CONTAINS <h1>,<p> TAGS ALONG WITH MULTIPLE IMAGES AND THEIR DESCRIPTIONS.
THE MULTIPLE IMAGES ARE STRUCTURED IN THE FORM OF ROWS AND COLUMNS.
EACH ROW CONTAINS OF 3 COLS.
import React from "react";
function Universe() {
return (
<>
<div className="container text-center mt-5 p-5">
<h1>The Zerodha Universe</h1>
<p>
Extend your trading and investment experience even further with our
partner platforms
</p>
<div className="row">
<div className="col-4 mt-5 p-3">
<img
src="media/images/zerodhaFundhouse.png"
style={{ height: "50%", width: "50%", marginTop: "3px" }}
/>
<p
className="small text-muted mt-3 "
style={{ textAlign: "center" }}
>
Our asset management venture that is creating simple and
transparent index funds to help you save for your goals.
</p>
</div>
<div className="col-4 mt-5 p-3">
<img
src="media/images/sensibullLogo.svg"
style={{ height: "50%", width: "50%", marginTop: "3px" }}
/>
<p
className="small text-muted mt-3 "
style={{ textAlign: "center" }}
>
Options trading platform that lets you create strategies, analyze
positions, and examine data points like open interest, FII/DII,
and more.
</p>
</div>
<div className="col-4 p-3 mt-5">
<img
src="media/images/goldenpiLogo.png"
style={{ height: "40%", width: "50%" }}
/>
<p
className="small text-muted mt-3"
style={{ textAlign: "center" }}
>
<br />
Investment research platform that offers detailed insights on
stocks, sectors, supply chains, and more.
</p>
</div>
</div>
<div className="row">
<div className="col-4 mt-5 p-3">
<img
src="media/images/streakLogo.png"
style={{ height: "35%", width: "45%", marginTop: "3px" }}
/>
<p
className="small text-muted mt-3 "
style={{ textAlign: "center" }}
>
Systematic trading platform that allows you to create and backtest
strategies without coding.
</p>
</div>
<div className="col-4 mt-5 p-3">
<img
src="media/images/smallcaseLogo.png"
style={{ height: "40%", width: "45%", marginTop: "3px" }}
/>
<p
className="small text-muted mt-3 "
style={{ textAlign: "center" }}
>
Thematic investing platform that helps you invest in diversified
baskets of stocks on ETFs.
</p>
</div>
<div className="col-4 p-3 mt-5">
<img
src="media/images/dittoLogo.png"
style={{ height: "40%", width: "45%" }}
/>
<p
className="small text-muted mt-3"
style={{ textAlign: "center" }}
>
Personalized advice on life and health insurance. No spam and no
mis-selling. Sign up for free
</p>
</div>
</div>
</div>
</>
);
}
export default Universe;
UNIVERSE
Comments
Post a Comment