Merge pull request #7 from TusharSSurve/test

[test] : Foundation

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -4,6 +4,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorPage from "./pages/ErrorPage";
 import Homepage from "./pages/Homepage";
 import Root from "./pages/Root";
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -16,7 +17,7 @@ const router = createBrowserRouter([
   },
 ]);
 
-function App() {
+const App = () => {
   return <RouterProvider router={router} />;
 }
 

src/global/Footer.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+const Footer = () => {
+  return (
+    <footer>
+      <h1>Footer</h1>
+    </footer>
+  );
+}
+export default Footer;

src/global/Header.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+const Header = () => {
+  return (
+    <header>
+      <h1>Header</h1>
+    </header>
+  );
+}
+export default Header;

src/index.css

@@ -1,13 +1,48 @@
+:root {
+  /*colors*/
+  --white-color: #f5f5f7;
+  --black-color: #1d1d1f;
+  --warm-black: #171717;
+  --grey-color: #444445;
+  --neon-orange-color: #FF5F1F;
+
+  /* fonts */
+  --font-64: 64px;
+  --font-56: 56px;
+  --font-48: 48px;
+  --font-36: 36px;
+  --font-32: 32px;
+  --font-28: 28px;
+  --font-26: 26px;
+  --font-24: 24px;
+  --font-22: 22px;
+  --font-20: 20px;
+  --font-18: 18px;
+  --font-16: 16px;
+  --font-12: 12px;
+
+  /*font weight*/
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-700: 700;
+  --font-weight-800: 800;
+
+  /*line height*/
+  --line-height-25: 25px;
+  --line-height-33: 33px;
+  --line-height-36: 36px;
+  --line-height-38: 38px;
+  --line-height-40: 40px;
+  --line-height-30: 30px;
+  --line-height-17: 17.5px;
+  --line-height-19: 19px;
+
+  /*font*/
+
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+}

src/pages/ErrorPage.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function ErrorPage() {
+const ErrorPage = () => {
   return (
     <>
       <h1>404 Error Page</h1>

src/pages/Homepage.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-function Homepage() {
+const Homepage = () => {
   return (
     <>
       <h1>Homepage</h1>

src/pages/Root.js

@@ -1,14 +1,18 @@
 import React from 'react';
 import { Outlet } from 'react-router-dom';
+import Footer from '../global/Footer';
+import Header from '../global/Header';
 
-function Root() {
-    return (
-      <>
-        <main>
-          <Outlet />
-        </main>
-      </>
-    );
-  }
-
-  export default Root;
+const Root = () => {
+  return (
+    <>
+      <Header />
+      <main>
+        <Outlet />
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export default Root;