Add look and feel

public/index.html

@@ -20,9 +20,10 @@
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo512.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>PolicyEngine</title>
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif&family=Roboto:wght@300&display=swap" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.googleapis.com"> 
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
+    <link href="https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz@8..144&family=Roboto:wght@300;500&display=swap" rel="stylesheet">
+
     <script>
       (function (w, d, s, l, i) {
         w[l] = w[l] || [];

src/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "bootstrap/dist/css/bootstrap.min.css";
 import "antd/dist/antd.min.css";
-import PolicyEngine from "./PolicyEngine";
+import PolicyEngine from "./redesign/PolicyEngine";
 import * as serviceWorkerRegistration from "./serviceWorkerRegistration";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));

src/layout/Responsive.jsx

@@ -2,15 +2,32 @@ import { useEffect, useMemo, useState } from "react";
 
 const DisplaySize = {
   Mobile: 0,
-  Desktop: 1200,
+  Tablet: 768,
+  Desktop: 1080,
 };
 
 const determineDisplayCategory = (width) => {
-  if (width < DisplaySize.Desktop) {
+  if (width < DisplaySize.Tablet) {
     return "mobile";
-  } else {
-    return "desktop";
+  } else if (width < DisplaySize.Desktop) {
+    return "tablet";
   }
+  return "desktop";
+};
+
+const useDisplayCategory = () => {
+  const [currentDisplayCategory, setcurrentDisplayCategory] = useState(
+    determineDisplayCategory(window.innerWidth)
+  );
+
+  useEffect(() => {
+    const handler = () =>
+      setcurrentDisplayCategory(determineDisplayCategory(window.innerWidth));
+    window.addEventListener("resize", handler);
+    return () => window.removeEventListener("resize", handler);
+  }, []);
+
+  return useMemo(() => currentDisplayCategory, [currentDisplayCategory]);
 };
 
 const useMobile = () => {
@@ -30,4 +47,16 @@ const useMobile = () => {
   return useMemo(() => currentDisplayCategory, [currentDisplayCategory]);
 };
 
+function ResponsiveComponent(props) {
+  const displayCategory = useDisplayCategory();
+  if (displayCategory === "mobile") {
+    return props.mobile;
+  } else if (displayCategory === "tablet") {
+    return props.tablet;
+  }
+  return props.desktop;
+}
+
 export default useMobile;
+
+export { useDisplayCategory, ResponsiveComponent };

src/redesign/PolicyEngine.jsx

@@ -0,0 +1,231 @@
+import { useDisplayCategory } from "layout/Responsive"
+import style from "style";
+import PolicyEngineMainLogo from "../images/logos/policyengine/white.svg";
+import PolicyEngineSmallLogo from "../images/logos/policyengine/profile/white.svg";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+
+export default function PolicyEngine() {
+    return (
+        <div>
+            <HeaderBar />
+        </div>
+    )
+}
+
+function HeaderBar() {
+    const displayCategory = useDisplayCategory();
+    return (
+        <>
+        <div style={{
+            backgroundColor: style.colors.BLUE,
+            width: "100%",
+            height: 90,
+            display: "flex",
+            alignItems: "center",
+            position: "fixed",
+        }}>
+            {{
+                mobile: <MobileHeaderBar />,
+                tablet: <TabletHeaderBar />,
+                desktop: <DesktopHeaderBar />,
+            }[displayCategory]}
+        </div>
+        <div style={{
+            height: 90,
+        }}/>
+        </>
+    )
+}
+
+function MobileHeaderBar() {
+    return <>
+        <MobileHeaderLogo />
+        <MobileCalculatorButton />
+        <Hamburger />
+    </>
+}
+
+function TabletHeaderBar() {
+    return <>
+        <MainHeaderLogo />
+        <DesktopCalculatorButton />
+        <Hamburger />
+    </>
+}
+
+function DesktopHeaderBar() {
+    return <>
+        <MainHeaderLogo />
+        <PageLinks />
+        <DesktopCalculatorButton />
+    </>
+}
+
+function MobileHeaderLogo() {
+    return <div style={{
+        display: "flex",
+        alignItems: "center",
+        maxWidth: "20vw",
+    }}>
+        <img 
+            src={PolicyEngineSmallLogo} 
+            alt="PolicyEngine logo"
+            style={{
+                height: 50,
+                margin: 20,
+            }}
+        />
+    </div>
+}
+
+function MobileCalculatorButton() {
+    return <div style={{
+        backgroundColor: "#39C6C0",
+        height: 50,
+        width: 50,
+        margin: 20,
+        marginLeft: "auto",
+    }}>
+
+    </div>
+}
+
+function Hamburger() {
+    return <div style={{
+        height: 50,
+        width: 50,
+        margin: 20,
+        alignItems: "center",
+        display: "flex",
+        justifyContent: "center",
+        padding: 15,
+        color: "white",
+        border: "1px solid white",
+    }}>
+        =
+    </div>
+}
+
+function DesktopCalculatorButton() {
+    return <div style={{
+        backgroundColor: "#39C6C0",
+        height: 50,
+        margin: 20,
+        marginLeft: "auto",
+        alignItems: "center",
+        display: "flex",
+        justifyContent: "center",
+        color: "white",
+        padding: 15,
+        paddingLeft: 30,
+        paddingRight: 30,
+        fontSize: 20,
+        fontFamily: "Roboto",
+        fontWeight: 500,
+        letterSpacing: 2.4,
+    }}>
+        CALCULATE
+    </div>
+}
+
+function MainHeaderLogo() {
+    return <div style={{
+        display: "flex",
+        alignItems: "center",
+        width: "min(300px, 25vw)",
+        margin: 20,
+    }}>
+        <img 
+            src={PolicyEngineMainLogo} 
+            alt="PolicyEngine logo"
+            style={{
+                // make whatever height fits the container
+                width: "min(300px, 25vw)",
+                objectFit: "contain",
+            }}
+        />
+    </div>
+}
+
+function PageLinks() {
+    return <div style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        width: "min(600px, 50vw)",
+        paddingLeft: 30,
+    }}>
+        {["Research", "About", "Contact", "Donate"].map((link) => {
+            return <div style={{
+                color: "white",
+                margin: 15,
+                fontSize: 20,
+                fontFamily: "Roboto",
+                fontWeight: 500,
+                letterSpacing: 2.4,
+                textTransform: "uppercase",
+            }}
+            key="link"
+            >
+                <HoverBackground
+                    defaultBackground="transparent"
+                    hoverBackground="white"
+                    height={90}
+                    width={150}
+                    >
+                        <motion.div style={{
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            height: 90,
+                            cursor: "pointer",
+                        }}
+                        whileHover={{
+                            color: style.colors.BLUE,
+                        }}
+                        >
+                            {link}
+                        </motion.div>
+                </HoverBackground>
+            </div>
+        })}
+    </div>
+
+}
+
+function HoverBackground(props) {
+    // A div that changes color on hover by having a different covered background slide upwards.
+    const { children, defaultBackground, hoverBackground, height, width } = props;
+    const [hovering, setHovering] = useState(false);
+    // use motion.div
+    return (
+        <motion.div
+          style={{
+            backgroundColor: defaultBackground,
+            overflow: "hidden",
+            height: height,
+            width: width,
+            margin: 0,
+          }}
+        onMouseEnter={() => setHovering(true)}
+        onMouseLeave={() => setHovering(false)}
+        >
+          {children}
+            <motion.div
+                style={{
+                    backgroundColor: hoverBackground,
+                    position: "relative",
+                    height: height * 2,
+                    top: -height * 2,
+                    zIndex: -1,
+                }}
+                animate={hovering ? { y: height / 2 } : { y: -height }}
+                transition={{ 
+                    duration: 0.2,
+                }}
+            />
+        </motion.div>
+      );
+}

src/style/App.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:opsz@8..144&family=Roboto:wght@300;500&display=swap');
+
 h1,
 h2,
 h3,