gabehf/BudgetBuddy
1
0
Fork 0
mirror of https://github.com/gabehf/BudgetBuddy.git synced 2026-03-08 23:18:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Migrate Welcome page to react

Browse source
This commit is contained in:
jveebs 2023-04-06 13:08:54 -04:00
parent 0ec74296b3
commit a7f5d35497
3 changed files with 221 additions and 39 deletions
Download patch file Download diff file Expand all files Collapse all files

83
src/pages/Welcome.jsx
View file

@ -5,48 +5,53 @@ import budgethero from '../assets/welcome/budgethero1.png';
import money1 from '../assets/welcome/money1.png';
import money2 from '../assets/welcome/money2.png';
import money3 from '../assets/welcome/money3.png';
import { Container, Button, Row, Col, Image } from 'react-bootstrap'
export default function Welcome() {
return (
<div className="container">
<div className="jumbotron mt-4 mb-5">
<div className="row">
<div className="col-8">
<h1>Start Building Your Wealth</h1>
<p>BudgetBuddy’s top notch budgeting tools will help you start building wealth, no matter your income or debt.</p>
<button className="btn btn-outline-success">Get Started</button>
</div>
<div className="col-4">
<img className="w-100" src={budgethero} alt="budgethero" />
</div>
</div>
</div>
<div className="container-fluid text-center">
<div className="row">
<div className="col-4">
<div className="container-fluid" style={{ maxWidth: '200px' }}>
<img src={money1} alt="money1" className="w-100" />
<h6>Track Your Spending</h6>
<p>Keep track of how much you spend on any number of spending categories.</p>
</div>
</div>
<div className="col-4">
<div className="container-fluid">
<img src={money2} alt="money2" className="w-100" style={{ maxWidth: '200px' }} />
<h6>Plan Your Income</h6>
<p>Map out your income into savings categories to manage your money faster and easier than ever.</p>
</div>
</div>
<div className="col-4">
<div className="container-fluid">
<img src={money3} alt="money3" className="w-100" style={{ maxWidth: '200px' }} />
<h6>See Your Wealth Grow</h6>
<p>Use BudgetBuddy’s widgets to visualize your wealth growing and debt shrinking.</p>
</div>
</div>
</div>
<button className="btn btn-outline-success">Get Started</button>
</div>
<div>
<Container className="mt-4 mb-5">
<Row className="d-flex justify-content-between">
<Col md={6} className='justify-contents-left'>
<h1 className="mb-3" style={{
fontSize: "calc(24px + 2vw)",
fontWeight: 'bold',
}}
>Start Building Your Wealth</h1>
<p className="mb-4">BudgetBuddy’s top notch budgeting tools will help you start building wealth, no matter your income or debt.</p>
<Button className='mx-0 mb-4' variant="outline-success">Get Started</Button>
</Col>
<Col className='d-flex' md={4}>
<Image className='align-self-end' src={budgethero} fluid />
</Col>
</Row>
</Container>
<Container className="text-center">
<Row className="mb-4">
<Col md={4}>
<div className="mx-auto" style={{ maxWidth: '180px' }}>
<Image src={money1} fluid />
<h6>Track Your Spending</h6>
<p>Keep track of how much you spend on any number of spending categories.</p>
</div>
</Col>
<Col md={4}>
<div className="mx-auto" style={{ maxWidth: '180px' }}>
<Image src={money2} fluid />
<h6>Plan Your Income</h6>
<p>Map out your income into savings categories to manage your money faster and easier than ever.</p>
</div>
</Col>
<Col md={4}>
<div className="mx-auto" style={{ maxWidth: '180px' }}>
<Image src={money3} fluid />
<h6>See Your Wealth Grow</h6>
<p>Use BudgetBuddy’s widgets to visualize your wealth growing and debt shrinking.</p>
</div>
</Col>
</Row>
<Button className="mx-auto" variant="outline-success">Create an account for free</Button>
</Container>
</div>
);
}