New Header

src/components/App/App.tsx

@@ -1,84 +1,14 @@
 import React, { Suspense } from "react";
 
-import { NavBar, Panorama, Info, Toolbar, IconGrid } from "../";
-import { ArrowUpRightCircle, DocumentText, Heart, Droid } from "phosphor-react";
+import { Info, Toolbar, IconGrid } from "../";
+import { Heart, Droid } from "phosphor-react";
 import "./App.css";
+import Header from "../Header/Header";
 
 const App: React.FC<any> = () => {
   return (
     <>
-      <NavBar />
-      <Panorama />
-      <Info id="overview">
-        <h2>
-          Phosphor is a flexible icon family for interfaces, diagrams,
-          presentations — whatever, really.
-        </h2>
-        <div className="feature">
-          <h3>
-            Clear and
-            <br />
-            reductive
-          </h3>
-          <div className="feature-contents">
-            <p>
-              Phosphor has been meticulously crafted to work together in
-              harmony. With 6 weights and alternative glyphs, Phosphor pairs
-              with all sorts of type sizes and layouts.
-            </p>
-            <h4>Design Specs</h4>
-            <ul>
-              <li>6 weights: Regular, Bold, Light, Thin, Fill, Duotone</li>
-              <li>Designed at 16px to scale down to a small size</li>
-              <li>Rounded end caps and ever so slightly rounded corners</li>
-              <li>Alternate glyphs to suit your needs</li>
-              <li>6,341 icons and counting</li>
-            </ul>
-            <button
-              className="main-button"
-              onClick={(e) => e.currentTarget.blur()}
-            >
-              <ArrowUpRightCircle size={32} style={{ marginRight: 12 }} />
-              Download icons
-            </button>
-          </div>
-        </div>
-        <div className="feature">
-          <h3>
-            Intuitive
-            <br />
-            and light
-          </h3>
-          <div className="feature-contents">
-            <p>
-              Phosphor is available as an icon font and a React package, and can
-              be sourced from NPM, a CDN like CDNJS and jsDelivr, or downloaded
-              and used locally.
-            </p>
-            <h4>Eng Specs</h4>
-            <ul>
-              <li>Intuitive, powerful API to style and add interactivity</li>
-              <li>Lightweight and full support for tree-shaking</li>
-              <li>Familiar usage and naming scheme</li>
-              <li>
-                Built with TypeScript, and includes type definitions to ease
-                development
-              </li>
-            </ul>
-            <button
-              className="main-button"
-              onClick={(e) =>
-                window.open(
-                  "https://github.com/rektdeckard/phosphor-web#phosphor-icons"
-                ) && e.currentTarget.blur()
-              }
-            >
-              <DocumentText size={32} style={{ marginRight: 12 }} />
-              See documentation
-            </button>
-          </div>
-        </div>
-      </Info>
+      <Header />
       <main>
         <Toolbar />
         <Suspense fallback={<div>Loading...</div>}>

src/components/Header/Header.css

@@ -0,0 +1,58 @@
+header {
+  height: 1435px;
+  width: 100%;
+  background-color: #ffd171;
+  overflow: hidden;
+  /* display: block; */
+
+  /* display: flex;
+  align-items: center;
+  justify-content: center; */
+}
+
+.image-container {
+  position: relative;
+  width: 1366px;
+  height: 100%;
+  margin: auto;
+}
+
+#marker-purple {
+  position: absolute;
+  transform: translate(143px, -158px);
+}
+
+#tablet {
+  position: absolute;
+  transform: translate(577px, -900px);
+}
+
+#billiard-ball {
+  position: absolute;
+  transform: translate(917.83px, 359.83px);
+}
+
+#warning {
+  position: absolute;
+  transform: translate(1184px, 421px);
+}
+
+#paperclips {
+  position: absolute;
+  transform: translate(982px, 621px);
+}
+
+#cutting-mat {
+  position: absolute;
+  transform: translate(119px, 825px);
+}
+
+#receipt {
+  position: absolute;
+  transform: translate(-5px, 1016px);
+}
+
+#calculator {
+  position: absolute;
+  transform: translate(924px, 940px);
+}

src/components/Header/Header.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+import markerPurple from "../../assets/marker-purple.svg";
+import tablet from "../../assets/tablet.svg";
+import billiardBall from "../../assets/billiard-ball.svg";
+import warning from "../../assets/warning.svg";
+import paperclips from "../../assets/paperclips.svg";
+import cuttingMat from "../../assets/cutting-mat.svg";
+import receipt from "../../assets/receipt.svg";
+import calculator from "../../assets/calculator.svg";
+import "./Header.css";
+
+type HeaderProps = {};
+
+const variants = {
+  hidden: { opacity: 0, y: 100 },
+  visible: { opacity: 1, y: 0 },
+};
+
+const Header: React.FC<HeaderProps> = () => {
+  return (
+    <header>
+      <motion.div
+        className="image-container"
+        variants={variants}
+        initial="hidden"
+        animate="visible"
+        transition={{ duration: 2 }}
+      >
+        {/* <MarkerPurple id="marker-purple" /> */}
+        {/* <Tablet id="tablet" /> */}
+        <img src={tablet} id="tablet" />
+        <img src={markerPurple} id="marker-purple" />
+        <img src={billiardBall} id="billiard-ball" />
+        <img src={warning} id="warning" />
+        <img src={paperclips} id="paperclips" />
+        <img src={cuttingMat} id="cutting-mat" />
+        <img src={receipt} id="receipt" />
+        <img src={calculator} id="calculator" />
+      </motion.div>
+    </header>
+  );
+};
+
+export default Header;