Navbar update

.gitignore

@@ -21,3 +21,7 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.prettierrc
+.vscode
+.npmrc

package.json

@@ -1,42 +1,43 @@
 {
-  "name": "vda",
-  "version": "0.1.0",
-  "private": true,
-  "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "framer-motion": "^8.1.7",
-    "node-sass": "^8.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-grid-system": "^8.1.6",
-    "react-router-dom": "^6.6.1",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
+	"name": "vda",
+	"version": "0.1.0",
+	"private": true,
+	"dependencies": {
+		"@testing-library/jest-dom": "^5.16.5",
+		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^13.5.0",
+		"framer-motion": "^8.1.7",
+		"node-sass": "^8.0.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"react-grid-system": "^8.1.6",
+		"react-router-dom": "^6.6.1",
+		"react-scripts": "5.0.1",
+		"react-uuid": "^2.0.0",
+		"web-vitals": "^2.1.4"
+	},
+	"scripts": {
+		"start": "react-scripts start",
+		"build": "react-scripts build",
+		"test": "react-scripts test",
+		"eject": "react-scripts eject"
+	},
+	"eslintConfig": {
+		"extends": [
+			"react-app",
+			"react-app/jest"
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
 }

src/App.js

@@ -1,34 +1,40 @@
-import { useEffect } from "react";
-import {
-  BrowserRouter as Router,
-  Route,
-  Routes,
-  useLocation,
-} from "react-router-dom";
-import Home from "./pages/home";
-import ProgramOverview from "./pages/programOverview";
+import { useEffect } from 'react'
+import { BrowserRouter as Router, Route, Routes, useLocation } from 'react-router-dom'
+import Home from './pages/about'
+import ProgramOverview from './pages/programOverview'
+import Showcase from './pages/home'
 
 const ScrollToTop = () => {
-  const { pathname } = useLocation();
+	const { pathname } = useLocation()
 
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+	useEffect(() => {
+		window.scrollTo(0, 0)
+	}, [pathname])
 
-  return null;
-};
+	return null
+}
 
 function App() {
-  return (
-    <Router>
-      {" "}
-      <ScrollToTop />
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/program-overview" element={<ProgramOverview />} />
-      </Routes>
-    </Router>
-  );
+	return (
+		<Router>
+			{' '}
+			<ScrollToTop />
+			<Routes>
+				<Route
+					path='/'
+					element={<Showcase />}
+				/>
+				<Route
+					path='/program-overview'
+					element={<ProgramOverview />}
+				/>
+				<Route
+					path='/about'
+					element={<Home />}
+				/>
+			</Routes>
+		</Router>
+	)
 }
 
-export default App;
+export default App

src/components/landing/index.js

@@ -7,19 +7,7 @@ import WhiteStar from '../../assets/images/home/star-white.png';
 import {motion} from 'framer-motion'
 import './styles.scss';
 
-function Landing() {
-
-    const messagesArray = [
-        {line: "12 weeks (Jan 23 - Apr 14, 2023)",},
-        {line: "3-6 hr commitment per week",},
-        {line: "Hands-on practice in visual design",},
-        {line: "Peer feedback and support",}
-    ];
-
-    const messagesArray2 = [
-        {line: "A few solid portfolio pieces + a brand case study that can be presented in interviews",},
-        {line: "Experience working on brand identity, print design, UI design, social media graphics, and more",}
-    ];
+function Landing({description, button=null}) {
 
   return (
     <div className='landing'>
@@ -67,15 +55,12 @@ function Landing() {
 
             <div className='grid-child-text'>
                 <h2>VISUAL DESIGN APPRENTICESHIP</h2>
+                <div className='grid-child-text-inner'>
                 <p className='justify'>
-                    Design Co’s first ever Visual Design Apprenticeship is a 12-week long 
-                    program where student designers will work on a variety of hands-on 
-                    assignments focusing on visual, graphic, and brand design. <br></br><br></br>
-                    Students will learn fundamental techniques in Adobe and Figma through 
-                    in-person lessons and will have the opportunity to participate in 
-                    critique sessions, work sessions, and accountability buddy groups! This 
-                    is NOT a UX-based program.
+                    {description}
                 </p>
+                {button}
+                </div>
             </div>
 
             <div className='grid-child-img'>
@@ -84,31 +69,6 @@ function Landing() {
 
         </div>
 
-        <div className='grid-container2'>
-
-            <div className='grid-child-orange2'>
-                {messagesArray.map((message) => (
-                    <div className='response-container'>
-                        <img src={BlackStar} />
-                        <p>{message.line}</p>
-                    </div>
-                ))}
-            </div>
-
-            <div className='grid-child-text'>
-                <h3>
-                    By the end of the program, apprentices will be equipped with:
-                </h3>
-                <div className='bottom-container'>
-                    {messagesArray2.map((message) => (
-                        <div className='response-container'>
-                            <img src={WhiteStar} />
-                            <p>{message.line}</p>
-                        </div>
-                    ))}                    
-                </div>
-            </div>
-        </div>
     </div>
   )
 }

src/components/landing/styles.scss

@@ -75,18 +75,20 @@ body {
   display: grid;
   grid-template-columns: 1fr 1fr;
 
-  @media only screen and (max-width: $mobile) {
-    grid-template-columns: 1fr;
+  @media only screen and (max-width: 800px) {
+    grid-template-columns: 1fr !important;
   }
 
   .justify {
     text-align: justify;
   }
 
   .grid-child-img {
-    @media only screen and (max-width: $mobile) {
+
+    @media only screen and (max-width: 800px) {
       display: none;
     }
+
   }
 
   .green-blob {
@@ -101,8 +103,18 @@ body {
   }
 
   .grid-child-text {
+    &-inner {
+      padding-right: 20%;
+
+    }
     padding: 4rem 8vw;
 
+    @media only screen and (max-width: 1200px) {
+      &-inner {
+        padding-right: 0;
+      }
+    }
+
     @media only screen and (max-width: $mobile) {
       padding: 2.5rem 8vw;
     }

src/components/landingLogistics/index.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import DesignCo from '../../assets/images/home/dco-logo.png';
+import VDA from '../../assets/images/home/vda-black.png';
+import Green from '../../assets/images/home/green-blob.png';
+import BlackStar from '../../assets/images/home/star-black.png';
+import WhiteStar from '../../assets/images/home/star-white.png';
+import {motion} from 'framer-motion'
+import './styles.scss';
+
+function LandingLogistics() {
+
+    const messagesArray = [
+        {line: "12 weeks (Jan 23 - Apr 14, 2023)",},
+        {line: "3-6 hr commitment per week",},
+        {line: "Hands-on practice in visual design",},
+        {line: "Peer feedback and support",}
+    ];
+
+    const messagesArray2 = [
+        {line: "A few solid portfolio pieces + a brand case study that can be presented in interviews",},
+        {line: "Experience working on brand identity, print design, UI design, social media graphics, and more",}
+    ];
+
+  return (
+    <div className='landing'>
+
+        <div className='grid-container2'>
+
+            <div className='grid-child-orange2'>
+                {messagesArray.map((message) => (
+                    <div className='response-container'>
+                        <img src={BlackStar} />
+                        <p>{message.line}</p>
+                    </div>
+                ))}
+            </div>
+
+            <div className='grid-child-text'>
+                <h3>
+                    By the end of the program, apprentices will be equipped with:
+                </h3>
+                <div className='bottom-container'>
+                    {messagesArray2.map((message) => (
+                        <div className='response-container'>
+                            <img src={WhiteStar} />
+                            <p>{message.line}</p>
+                        </div>
+                    ))}                    
+                </div>
+            </div>
+        </div>
+    </div>
+  )
+}
+
+export default LandingLogistics;