Re-organize project
jveebs
|
|
@ -27,6 +27,8 @@
|
||||||
work correctly both with client-side routing and a non-root public URL.
|
work correctly both with client-side routing and a non-root public URL.
|
||||||
Learn how to configure a non-root public URL by running `npm run build`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
|
||||||
|
|
||||||
<title>Budget Buddy</title>
|
<title>Budget Buddy</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
24
src/Main.js
|
|
@ -8,6 +8,7 @@ import Privacy from './pages/Privacy'
|
||||||
import Settings from './pages/Settings'
|
import Settings from './pages/Settings'
|
||||||
import Support from './pages/Support'
|
import Support from './pages/Support'
|
||||||
import ContactUs from './pages/Contact-Us'
|
import ContactUs from './pages/Contact-Us'
|
||||||
|
import Welcome from './pages/Welcome'
|
||||||
import Error from './pages/Error-Page'
|
import Error from './pages/Error-Page'
|
||||||
import './styles.css'
|
import './styles.css'
|
||||||
|
|
||||||
|
|
@ -27,12 +28,19 @@ export default function Main() {
|
||||||
case "/settings":
|
case "/settings":
|
||||||
Layout = Settings
|
Layout = Settings
|
||||||
break;
|
break;
|
||||||
|
/*
|
||||||
case "/support":
|
case "/support":
|
||||||
Layout = Support
|
Layout = Support
|
||||||
break;
|
break;
|
||||||
|
*/
|
||||||
case "/contact-us":
|
case "/contact-us":
|
||||||
Layout = ContactUs
|
Layout = ContactUs
|
||||||
break;
|
break;
|
||||||
|
|
||||||
|
case "/welcome":
|
||||||
|
Layout = Welcome
|
||||||
|
break;
|
||||||
|
|
||||||
default:
|
default:
|
||||||
Layout = Error
|
Layout = Error
|
||||||
break;
|
break;
|
||||||
|
|
@ -41,14 +49,16 @@ export default function Main() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<NavBar />
|
<NavBar />
|
||||||
<ProSidebarProvider>
|
{window.location.pathname != "/welcome" ?
|
||||||
<div class="main-body">
|
<ProSidebarProvider>
|
||||||
<SideNav />
|
<div class="main-body">
|
||||||
<div class="page-display">
|
<SideNav />
|
||||||
<Layout />
|
<div class="page-display">
|
||||||
|
<Layout />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</ProSidebarProvider>
|
||||||
</ProSidebarProvider>
|
: <Layout />}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Before Width: | Height: | Size: 483 KiB After Width: | Height: | Size: 483 KiB |
|
Before Width: | Height: | Size: 120 KiB After Width: | Height: | Size: 120 KiB |
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 121 KiB |
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 5.8 KiB After Width: | Height: | Size: 5.8 KiB |
|
Before Width: | Height: | Size: 934 B After Width: | Height: | Size: 934 B |
|
Before Width: | Height: | Size: 334 KiB After Width: | Height: | Size: 334 KiB |
|
Before Width: | Height: | Size: 29 KiB After Width: | Height: | Size: 29 KiB |
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import './CurrentBalance.css'
|
import './CurrentBalance.css'
|
||||||
import logo from './widget_logos/current_balance_logo.png';
|
import logo from '../assets/widget_logos/current_balance_logo.png';
|
||||||
|
|
||||||
export default function CurrentBalance() {
|
export default function CurrentBalance() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import './Expenses.css'
|
import './Expenses.css'
|
||||||
import logo from './widget_logos/expenses_logo.png';
|
import logo from '../assets/widget_logos/expenses_logo.png';
|
||||||
|
|
||||||
export default function Expenses() {
|
export default function Expenses() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import './Income.css'
|
import './Income.css'
|
||||||
import logo from './widget_logos/income_logo.png';
|
import logo from '../assets/widget_logos/income_logo.png';
|
||||||
|
|
||||||
export default function Income() {
|
export default function Income() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -1,3 +1,7 @@
|
||||||
|
.sidebar {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-header {
|
.sidebar-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@ import './SideNav.css'
|
||||||
|
|
||||||
export default function SideNav() {
|
export default function SideNav() {
|
||||||
return(
|
return(
|
||||||
<Sidebar backgroundColor='transparent'>
|
<Sidebar className='sidebar' backgroundColor='transparent'>
|
||||||
<div className='sidebar-header'>
|
<div className='sidebar-header'>
|
||||||
<div className='sidebar-avatar'>
|
<div className='sidebar-avatar'>
|
||||||
<Avatar />
|
<Avatar />
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import './budget.css'
|
import './budget.css'
|
||||||
import logo from './widget_logos/budget_logo.png';
|
import logo from '../assets/widget_logos/budget_logo.png';
|
||||||
|
|
||||||
export default function Budget() {
|
export default function Budget() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
import AddNewBill from './AddNewBill'
|
import AddNewBill from '../components/AddNewBill'
|
||||||
import CurrentBalance from './CurrentBalance'
|
import CurrentBalance from '../components/CurrentBalance'
|
||||||
import Expenses from './Expenses'
|
import Expenses from '../components/Expenses'
|
||||||
import Income from './Income'
|
import Income from '../components/Income'
|
||||||
import Budget from './budget'
|
import Budget from '../components/budget'
|
||||||
import RecentTransactions from './RecentTransactions'
|
import RecentTransactions from '../components/RecentTransactions'
|
||||||
|
|
||||||
export default function Dashboard() {
|
export default function Dashboard() {
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
52
src/pages/Welcome.jsx
Normal file
|
|
@ -0,0 +1,52 @@
|
||||||
|
import React from 'react';
|
||||||
|
import './Welcome.css';
|
||||||
|
import logo from '../assets/BudgetBuddyLogo.png';
|
||||||
|
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';
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
}
|
||||||