UPDATES IN OUR PROJECT
- WE CREATE A NEW LOGO AND NAME FOR OUR PROJECT. LOGO IS DESIGNED USING CHATGPT.
NAVBAR.JS
<Link class="navbar-brand" to="/">
<img src="media/images/logo3.png" style={{ width: "10%" }} />
</Link>
DASHBOARD
MENU.JS
return (
<>
<div className="menu-container">
<img src="logo3.png" style={{ width: "5%" }} />
<div className="menus">
<ul>
<li>
THE HOME PAGE IS UPDATED.
WE UPDATE THE IMAGE ON THE ROOT PAGE. WE MERGE THREE OF OUR DASHBOARD IMAGES TO CREATE IT.
HERO.JS
import React from "react";
function Hero() {
return (
<>
<div className="container p-5">
<div className="row text-center ">
<div
className="container-fluid images"
style={{
width: "100%",
marginRight: "5rem",
display: "flex",
justifyContent: "center",
}}
>
<img
src="media/images/left.png"
className="mb-4 leftImg"
alt="left img"
style={{ width: "24%", height: "80%", marginTop: "2.6rem" }}
/>
<img
src="media/images/watchlist.png"
className="mb-4 centerImg"
alt="center img"
style={{ width: "53%" }}
/>{" "}
<img
src="media/images/holdings.png"
className="mb-4 rightImg"
alt="right img"
style={{ width: "30%", 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 OTHER PRICING AND ABOUT COMPONENTS ARE UPDATED.
THE ABOUT PAGE IS UPDATED.
HERO COMPONENT.
WE CREATED TWO COMPONENTS LEFT SECTION AND RIGHT SECTION
import React from "react";
import Hero from "./Hero";
import LeftSection from "./LeftSection";
import RightSection from "./RightSection";
function AboutPage() {
return (
<>
<Hero />
<LeftSection
imgURL="media/images/watchlist.png"
ProductName="Watchlist"
ProductDescription="The watchlist lets users track selected stocks in real-time. It displays live data like current price, daily change, and percentage movement"
/>
<RightSection
imgURL="media/images/holdings2.png"
ProductName="Holdings"
ProductDescription="Holdings show the stocks currently owned by the user, along with quantities and average buy prices."
/>
<LeftSection
imgURL="media/images/orders.png"
ProductName="Orders"
ProductDescription="Orders reflect the most recent transactions placed by the user. This includes pending or just-executed buy/sell actions, giving a snapshot of the latest activity in the account."
/>
<RightSection
imgURL="media/images/positions.png"
ProductName="Positions"
ProductDescription="Positions keep a complete record of all buy and sell transactions. Each entry includes stock name, quantity, price, and timestamp, helping users analyze their trading history."
/>
</>
);
}
export default AboutPage;
LEFT SECTION.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;
RIGHT SECTION.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>
</>
);
}
Comments
Post a Comment