Starter

package.json

@@ -7,10 +7,17 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "gsap": "^3.1.1",
-    "node-sass": "^4.13.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
-    "react-scripts": "3.3.1"
+<<<<<<< HEAD
+    "react-router-dom": "^6.4.5",
+    "react-scripts": "3.3.1",
+    "sass": "^1.56.2"
+=======
+    "react-router-dom": "^5.1.2",
+    "react-scripts": "3.3.1",
+    "react-transition-group": "^4.3.0"
+>>>>>>> master
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,11 +1,136 @@
-import React from "react";
+<<<<<<< HEAD
+import React, { useEffect, useState } from "react";
+import { Route, Routes } from "react-router-dom";
+import gsap from "gsap";
+=======
+import React, { useEffect } from "react";
+import { Route } from "react-router-dom";
+import { gsap } from "gsap";
+>>>>>>> master
 import "./styles/App.scss";
+import Header from "./components/header";
+import Navigation from "./components/navigation";
+
+import CaseStudies from "./pages/caseStudies";
+import Approach from "./pages/approach";
+import Services from "./pages/services";
+import About from "./pages/about";
+import Home from "./pages/home";
+
+const routes = [
+  { path: "/", name: "Home", Component: Home },
+  { path: "/case-studies", name: "caseStudies", Component: CaseStudies },
+  { path: "/approach", name: "approach", Component: Approach },
+  { path: "/services", name: "services", Component: Services },
+  { path: "/about-us", name: "about", Component: About }
+];
+
+function debounce(fn, ms) {
+  let timer;
+  return () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, arguments);
+    }, ms);
+  };
+}
+
+//components
+import Header from "./components/Header";
+import Navigation from "./components/Navigation";
+
+//pages
+import Home from "./pages/home";
+import CaseStudies from "./pages/caseStudies";
+import About from "./pages/about";
+import Approach from "./pages/approach";
+
+const routes = [
+  { path: "/", name: "Home", Component: Home },
+  { path: "/case-studies", name: "Case Studies", Component: CaseStudies },
+  { path: "/about", name: "About", Component: About },
+  { path: "/approach", name: "Approach", Component: Approach },
+];
+
+function debounce(fn, ms) {
+  let timer;
+  return () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      timer = null;
+      fn.apply(this, arguments);
+    }, ms);
+  };
+}
 
 function App() {
+<<<<<<< HEAD
+  const [dimensions, setDimensions] = useState({
+    height: window.innerHeight,
+    width: window.innerWidth,
+  });
+  useEffect(() => {
+    let vh = dimensions.innerHeight * 0.01;
+    document.documentElement.style.setProperty("--vh", `${vh}px`);
+    gsap.to("body", 0, { css: { visibility: "visible" } });
+
+    const debouncedHandleResize = debounce(function handleResize() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth,
+=======
+  const [dimensions, setDimensions] = React.useState({
+    height: window.innerHeight,
+    width: window.innerWidth
+  });
+
+  useEffect(() => {
+    // prevents flashing
+    gsap.to("body", 0, { css: { visibility: "visible" } });
+    const debouncedHandleResize = debounce(function handleResize() {
+      setDimensions({
+        height: window.innerHeight,
+        width: window.innerWidth
+>>>>>>> master
+      });
+    }, 1000);
+
+    window.addEventListener("resize", debouncedHandleResize);
+<<<<<<< HEAD
+
+    return () => {
+      window.removeEventListener("resize", debouncedHandleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      <Header />
+      <div className="App">
+        <Routes>
+          {routes.map(({ path, Component }) => (
+            <Route key={path} exact path={path} element={<Component />}></Route>
+          ))}
+        </Routes>
+=======
+    return () => {
+      window.removeEventListener("resize", debouncedHandleResize);
+    };
+  });
   return (
-    <div className='App'>
-      <h2>Hello this is your starter files </h2>
-    </div>
+    <>
+      <Header dimensions={dimensions} />
+      <div className='App'>
+        {routes.map(({ path, Component }) => (
+          <Route key={path} exact path={path}>
+            <Component dimensions={dimensions} />
+          </Route>
+        ))}
+>>>>>>> master
+      </div>
+      <Navigation />
+    </>
   );
 }
 

src/animations/menuAnimations.js

@@ -0,0 +1,101 @@
+import gsap from "gsap";
+
+let tl = gsap.timeline();
+
+export const openMenu = width => {
+  tl.to("nav", 0, {
+    css: { display: "block" }
+  })
+    .to("body", 0, { css: { overflow: "hidden" } })
+    .to(".App", 1, {
+      y: width <= 654 ? "70vh" : window.innerHeight / 2,
+      ease: "expo.inOut"
+    })
+    .to(".hamburger-menu span", 0.6, {
+      delay: -1,
+      scaleX: 0,
+      transformOrigin: "50% 0%",
+      ease: "expo.inOut"
+    })
+    .to("#Path_1", 0.4, {
+      delay: -0.6,
+      css: {
+        strokeDashoffset: 10,
+        strokeDasharray: 5
+      }
+    })
+    .to("#Path_2", 0.4, {
+      delay: -0.6,
+      css: {
+        strokeDashoffset: 10,
+        strokeDasharray: 20
+      }
+    })
+    .to("#Line_1", 0.4, {
+      delay: -0.6,
+      css: {
+        strokeDashoffset: 40,
+        strokeDasharray: 18
+      }
+    })
+    .to("#circle", 0.6, {
+      delay: -0.8,
+      css: {
+        strokeDashoffset: 0
+      },
+      ease: "expo.inOut"
+    })
+    .to(".hamburger-menu-close", 0.6, {
+      delay: -0.8,
+      css: { display: "block" }
+    });
+};
+
+export const closeMenu = () => {
+  tl.to(".App", 1, {
+    y: 0,
+    ease: "expo.inOut"
+  })
+    .to("#circle", 0.6, {
+      delay: -0.6,
+      css: {
+        strokeDashoffset: -193,
+        strokeDasharray: 227
+      }
+    })
+    .to("#Path_1", 0.4, {
+      delay: -0.6,
+      css: {
+        strokeDashoffset: 10,
+        strokeDasharray: 10
+      }
+    })
+    .to("#Path_2", 0.4, {
+      delay: -0.6,
+      css: {
+        strokeDashoffset: 10,
+        strokeDasharray: 10
+      }
+    })
+    .to("#Line_1", 0.4, {
+      delay: -0.6,
+      css: {
+        strokeDashoffset: 40,
+        strokeDasharray: 40
+      }
+    })
+    .to(".hamburger-menu span", 0.6, {
+      delay: -0.6,
+      scaleX: 1,
+      transformOrigin: "50% 0%",
+      ease: "expo.inOut"
+    })
+    .to(".hamburger-menu-close", 0, {
+      delay: -0.1,
+      css: { display: "none" }
+    })
+    .to("body", 0, { css: { overflow: "auto" } })
+    .to("nav", 0, {
+      css: { display: "none" }
+    });
+};

src/components/Banner.js

@@ -0,0 +1,28 @@
+import React from "react";
+import { ReactComponent as RightArrow } from "../assets/arrow-right.svg";
+
+function Banner() {
+  return (
+    <section className="main">
+      <div className="container">
+        <div className="row">
+          <h2>
+            <div className="line">
+              <span>Creating unique brand</span>
+            </div>
+            <div className="line">
+              <span>that sticks</span>
+            </div>
+          </h2>
+          <div className="btn-row">
+            <a href="/">
+              More about us <RightArrow />
+            </a>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Banner;

src/components/Cases.js

@@ -0,0 +1,59 @@
+import React from "react";
+import { ReactComponent as CasesNext } from "../assets/arrow-right.svg";
+import { ReactComponent as CasesPrev } from "../assets/arrow-left.svg";
+
+const caseStudies = [
+  {
+    id: 1,
+    subtitle: "Curology",
+    title: "A custom formula for your skins unique's needs",
+    img: "curology-min",
+  },
+  {
+    id: 2,
+    subtitle: "Yourspace",
+    title: "Open space floor plans for your next venture",
+    img: "yourspace-min",
+  },
+  {
+    id: 3,
+    subtitle: "Lumin",
+    title: "For your best look ever",
+    img: "lumin-min",
+  },
+];
+
+function Cases() {
+  return (
+    <section className="cases">
+      <div className="container-fluid">
+        <div className="cases-navigation">
+          <div className="cases-arrow prev disabled">
+            <CasesPrev />
+          </div>
+          <div className="cases-arrow next">
+            <CasesNext />
+          </div>
+        </div>
+        <div className="row">
+          {caseStudies.map((caseItem) => (
+            <div className="case" key={caseItem.id}>
+              <div className="case-details">
+                <span>{caseItem.subtitle}</span>
+                <h2>{caseItem.title}</h2>
+              </div>
+              <div className="case-image">
+                <img
+                  src={require(`../assets/${caseItem.img}.png`)}
+                  alt="{caseItem.title}"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default Cases;