Re-organize project
jveebs
|
|
@ -27,6 +27,8 @@
|
|||
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`.
|
||||
-->
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
24
src/Main.js
|
|
@ -8,6 +8,7 @@ import Privacy from './pages/Privacy'
|
|||
import Settings from './pages/Settings'
|
||||
import Support from './pages/Support'
|
||||
import ContactUs from './pages/Contact-Us'
|
||||
import Welcome from './pages/Welcome'
|
||||
import Error from './pages/Error-Page'
|
||||
import './styles.css'
|
||||
|
||||
|
|
@ -27,12 +28,19 @@ export default function Main() {
|
|||
case "/settings":
|
||||
Layout = Settings
|
||||
break;
|
||||
/*
|
||||
case "/support":
|
||||
Layout = Support
|
||||
break;
|
||||
*/
|
||||
case "/contact-us":
|
||||
Layout = ContactUs
|
||||
break;
|
||||
|
||||
case "/welcome":
|
||||
Layout = Welcome
|
||||
break;
|
||||
|
||||
default:
|
||||
Layout = Error
|
||||
break;
|
||||
|
|
@ -41,14 +49,16 @@ export default function Main() {
|
|||
return (
|
||||
<div>
|
||||
<NavBar />
|
||||
<ProSidebarProvider>
|
||||
<div class="main-body">
|
||||
<SideNav />
|
||||
<div class="page-display">
|
||||
<Layout />
|
||||
{window.location.pathname != "/welcome" ?
|
||||
<ProSidebarProvider>
|
||||
<div class="main-body">
|
||||
<SideNav />
|
||||
<div class="page-display">
|
||||
<Layout />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ProSidebarProvider>
|
||||
</ProSidebarProvider>
|
||||
: <Layout />}
|
||||
</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 './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() {
|
||||
return (
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import './Expenses.css'
|
||||
import logo from './widget_logos/expenses_logo.png';
|
||||
import logo from '../assets/widget_logos/expenses_logo.png';
|
||||
|
||||
export default function Expenses() {
|
||||
return (
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import './Income.css'
|
||||
import logo from './widget_logos/income_logo.png';
|
||||
import logo from '../assets/widget_logos/income_logo.png';
|
||||
|
||||
export default function Income() {
|
||||
return (
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
.sidebar {
|
||||
padding: 0 12px;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import './SideNav.css'
|
|||
|
||||
export default function SideNav() {
|
||||
return(
|
||||
<Sidebar backgroundColor='transparent'>
|
||||
<Sidebar className='sidebar' backgroundColor='transparent'>
|
||||
<div className='sidebar-header'>
|
||||
<div className='sidebar-avatar'>
|
||||
<Avatar />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react'
|
||||
import './budget.css'
|
||||
import logo from './widget_logos/budget_logo.png';
|
||||
import logo from '../assets/widget_logos/budget_logo.png';
|
||||
|
||||
export default function Budget() {
|
||||
return (
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
import AddNewBill from './AddNewBill'
|
||||
import CurrentBalance from './CurrentBalance'
|
||||
import Expenses from './Expenses'
|
||||
import Income from './Income'
|
||||
import Budget from './budget'
|
||||
import RecentTransactions from './RecentTransactions'
|
||||
import AddNewBill from '../components/AddNewBill'
|
||||
import CurrentBalance from '../components/CurrentBalance'
|
||||
import Expenses from '../components/Expenses'
|
||||
import Income from '../components/Income'
|
||||
import Budget from '../components/budget'
|
||||
import RecentTransactions from '../components/RecentTransactions'
|
||||
|
||||
export default function Dashboard() {
|
||||
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>
|
||||
);
|
||||
}
|
||||