Re-organize project

3 years ago · 0ec74296b3
parent 14813a6835
commit 0ec74296b3
27 changed files with 86 additions and 18 deletions
--- a/public/index.html
+++ b/public/index.html
@ -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>
--- a/src/Main.js
+++ b/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>
    )
 }
--- a/src/assets/welcome/budgethero1.png
+++ b/src/assets/welcome/budgethero1.png
--- a/src/assets/welcome/money1.png
+++ b/src/assets/welcome/money1.png
--- a/src/assets/welcome/money2.png
+++ b/src/assets/welcome/money2.png
--- a/src/assets/welcome/money3.png
+++ b/src/assets/welcome/money3.png
--- a/src/assets/widget_logos/budget_logo.png
+++ b/src/assets/widget_logos/budget_logo.png
--- a/src/assets/widget_logos/current_balance_logo.png
+++ b/src/assets/widget_logos/current_balance_logo.png
--- a/src/assets/widget_logos/expenses_logo.png
+++ b/src/assets/widget_logos/expenses_logo.png
--- a/src/assets/widget_logos/income_logo.png
+++ b/src/assets/widget_logos/income_logo.png
--- a/src/components/AddNewBill.css
+++ b/src/components/AddNewBill.css
--- a/src/components/AddNewBill.js
+++ b/src/components/AddNewBill.js
--- a/src/components/CurrentBalance.css
+++ b/src/components/CurrentBalance.css
--- a/src/components/CurrentBalance.js
+++ b/src/components/CurrentBalance.js
@ -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 (
--- a/src/components/Expenses.css
+++ b/src/components/Expenses.css
--- a/src/components/Expenses.js
+++ b/src/components/Expenses.js
@ -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 (
--- a/src/components/Income.css
+++ b/src/components/Income.css
--- a/src/components/Income.js
+++ b/src/components/Income.js
@ -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 (
--- a/src/components/RecentTransaction.css
+++ b/src/components/RecentTransaction.css
--- a/src/components/RecentTransactions.js
+++ b/src/components/RecentTransactions.js
--- a/src/components/SideNav.css
+++ b/src/components/SideNav.css
@ -1,3 +1,7 @@
+.sidebar {
+    padding: 0 12px;
+}
+
 .sidebar-header {
    display: flex;
    align-items: center;
--- a/src/components/SideNav.js
+++ b/src/components/SideNav.js
@ -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 />
--- a/src/components/budget.css
+++ b/src/components/budget.css
--- a/src/components/budget.js
+++ b/src/components/budget.js
@ -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 (
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@ -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 (
--- a/src/pages/Welcome.css
+++ b/src/pages/Welcome.css
--- a/src/pages/Welcome.jsx
+++ b/src/pages/Welcome.jsx
@ -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>
+  );
+}