Technigo · Alexander-Gabor · Apr 4, 2023 · Apr 4, 2023 · Apr 8, 2023 · Apr 9, 2023
diff --git a/.gitignore b/.gitignore
@@ -1,15 +1,15 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
-/.pnp
+node_modules
+.pnp
 .pnp.js
 
 # testing
 /coverage
 
 # production
-/build
+build
 
 # misc
 .DS_Store

diff --git a/.eslintrc.json → code/.eslintrc.json b/.eslintrc.json → code/.eslintrc.json
@@ -42,6 +42,10 @@
         "allowSingleLine": true
       }
     ],
+    "linebreak-style":[
+      "off",
+      "unix"
+    ],
     "comma-dangle": [
       "error",
       "never"
@@ -128,4 +132,4 @@
     "react-hooks/exhaustive-deps": "warn",
     "semi": "off"
   }
-}
+}
diff --git a/jsconfig.json → code/jsconfig.json b/jsconfig.json → code/jsconfig.json
diff --git a/package-lock.json → code/package-lock.json b/package-lock.json → code/package-lock.json
diff --git a/package.json → code/package.json b/package.json → code/package.json
@@ -11,7 +11,8 @@
     "eslint-plugin-react": "^7.30.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.9"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html → code/public/index.html b/public/index.html → code/public/index.html
@@ -13,7 +13,7 @@
       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`.
     -->
-    <title>Technigo React App</title>
+    <title>Alexander - Aerial Silks</title>
   </head>
 
   <body>

diff --git a/code/src/App.js b/code/src/App.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import Footer from 'components/Footer'
+import Header from './components/Header'
+import Landing from './components/Landing'
+
+export const App = () => {
+  return (
+    <div className="App">
+      <Header />
+      <Landing />
+      <Footer />
+    </div>
+  )
+}
diff --git a/code/src/components/Button.js b/code/src/components/Button.js
@@ -0,0 +1,41 @@
+import styled from 'styled-components';
+
+const Button = styled.button`
+  font-family: 'Poppins', sans-serif;
+  font-weight: 400;
+  font-size: 18px;
+  background-color: #BDE0FE;
+  color: #131313;
+  border: none;
+  padding: 8px 18px;
+  border-radius: 16px;
+  /* font-size: 1rem; */
+  z-index: 4;
+
+    @media (min-width: 641px) {
+    font-size: 0.8rem;
+    padding: 8px 16px;
+    z-index: 4;
+    }
+
+    @media (min-width: 1025px) {
+        padding: 10px 24px;
+        font-size: 24px;
+        line-height: 36px;
+    } 
+`;
+
+const CTAButton = styled(Button)`
+  background-color: #ff5722;
+
+
+    @media (min-width: 641px) {
+    font-size: 0.8rem;
+    padding: 8px 16px;
+    }
+
+    @media (min-width: 1025px) {
+    }
+`;
+
+export { Button, CTAButton };
diff --git a/code/src/components/Classes.css b/code/src/components/Classes.css
diff --git a/code/src/components/Classes.js b/code/src/components/Classes.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import './Classes.css';
+
+const Classes = () => {
+  return (
+    <div className="classes-container">
+      <p>Classes!</p>
+    </div>
+  )
+}
+
+export default Classes;
diff --git a/code/src/components/Footer.css b/code/src/components/Footer.css
@@ -0,0 +1,80 @@
+.footer-container {
+    width: 100%;
+    max-height: 500px;
+    padding: 50px;
+    background-color: #4C5A66;
+    color: var(--main-light-color);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 30px;
+}
+
+hr {
+    color: var(--main-light-color);
+    border: 0.25px solid var(--main-light-color);
+    opacity: 0.5;
+    width: 80%;
+}
+
+.linkfield {
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+}
+
+.linkfield p {
+    cursor: pointer;
+}
+
+
+.icons {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: 20px;
+}
+
+.icons img {
+    scale: 0.9;
+    cursor: pointer;
+}
+
+
+@media (min-width: 641px) {
+    .linkfield {
+        gap: 55px;
+    }
+
+    .icons {
+        gap: 30px;
+    }
+
+    .icons img {
+        scale: 1;
+    }
+
+    hr {
+        width: 50%;
+    }
+
+  }
+
+  @media (min-width: 1025px) {
+    .linkfield {
+        gap: 65px;
+    }
+
+    .iconfield {
+        gap: 40px;
+    }
+
+    .icons img {
+        scale: 1;
+    }
+
+    hr {
+        width: 500px;
+    }
+
+  }
diff --git a/code/src/components/Footer.js b/code/src/components/Footer.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import LogoMobile from '../images/Vector (1).svg'
+import LogoTablet from '../images/Vector (2).svg'
+import LogoDesktop from '../images/Vector (3).svg'
+import Twitter from '../images/twitter.svg'
+import Linkedin from '../images/linkedin.svg'
+import Facebook from '../images/facebook.svg'
+import Instagram from '../images/instagram.svg'
+
+import './Footer.css';
+
+const Footer = ({ screenSize }) => {
+  const isMobile = screenSize <= 640;
+  const isDesktop = screenSize >= 1025;
+  return (
+    <div className="footer-container">
+      {isMobile && (<img src={LogoMobile} alt="" />)}
+      {isDesktop && (<img src={LogoDesktop} alt="" />)}
+      {!isDesktop && !isMobile && (<img src={LogoTablet} alt="" />)}
+      <div className="linkfield">
+        <p>Classes</p>
+        <p>About</p>
+        <p>Contact</p>
+      </div>
+      <hr />
+      <div className="icons">
+        <img src={Instagram} alt="Instagram icon" />
+        <img src={Facebook} alt="Facebook icon" />
+        <img src={Linkedin} alt="Linkedin icon" />
+        <img src={Twitter} alt="Twitter icon" />
+      </div>
+    </div>
+  );
+}
+
+export default Footer;
diff --git a/code/src/components/Form.css b/code/src/components/Form.css
diff --git a/code/src/components/Form.js b/code/src/components/Form.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import './Form.css';
+
+const Form = () => {
+  return (
+    <div className="form-container">
+      <p>Form!</p>
+    </div>
+  )
+}
+
+export default Form;
diff --git a/code/src/components/Header.css b/code/src/components/Header.css
@@ -0,0 +1,63 @@
+.Header {
+  width: calc(100% - 32px);
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 32px 16px;
+  padding: 0;
+}
+
+.logo-img {
+  height: 29px;
+  width: 96px;
+}
+
+.icons {
+  display: flex;
+  align-items: center;
+}
+
+.search {
+  width: 25px;
+  height: 25px;
+}
+
+.menu {
+  width: 40px;
+  height: 40px;
+}
+
+
+.menu-text {
+  display: flex;
+  gap: 80px;
+}
+
+@media (min-width: 641px) {
+  .Header {
+    width: calc(100% - 64px);
+    margin: 32px 32px;
+  }
+}
+
+@media (min-width: 1025px) {
+  .Header {
+    width: calc(100% - 128px);
+    margin: 32px 64px;
+  }
+
+  .logo-img {
+    width: 180px;
+    height: 50px;
+  }
+
+  .menu-text {
+    font-size: 24px;
+    gap: 10rem;
+  }
+}
+
diff --git a/code/src/components/Header.js b/code/src/components/Header.js
@@ -0,0 +1,44 @@
+import React, { useState, useEffect } from 'react';
+import logo from '../images/logo.svg';
+import menuicon from '../images/menu.svg';
+import searchicon from '../images/searchglass.svg';
+import './Header.css';
+
+const Header = () => {
+  const [screenSize, setScreenSize] = useState(window.innerWidth);
+  const isDesktop = screenSize >= 1025;
+
+  useEffect(() => {
+    const handleResize = () => setScreenSize(window.innerWidth);
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return (
+    <>
+      {!isDesktop && (
+        <div className="Header">
+          <img className="logo-img" src={logo} alt="Gracious moments logo" />
+          <div className="icons">
+            <img src={menuicon} alt="menu" className="menu" />
+            <img src={searchicon} alt="search" className="search" />
+          </div>
+        </div>
+      )}
+
+      {isDesktop && (
+        <div className="Header">
+          <img className="logo-img" src={logo} alt="Gracious moments logo" />
+          <div className="menu-text">
+            <p>Classes</p>
+            <p>About</p>
+            <p>Contact</p>
+          </div>
+          <p className="search-text">Search</p>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Header;