From 8c21d8c4980532acd9d82fb258166da1f4c18a0e Mon Sep 17 00:00:00 2001 From: rektdeckard Date: Sat, 8 Aug 2020 11:33:18 -0400 Subject: [PATCH] New Header --- src/assets/back-to-top.svg | 13 + src/assets/billiard-ball-spec.svg | 18 + src/assets/billiard-ball.svg | 25 ++ src/assets/calculator-spec.svg | 252 ++++++++++++++ src/assets/calculator.svg | 558 ++++++++++++++++++++++++++++++ src/assets/command-key-spec.svg | 18 + src/assets/command-key.svg | 14 + src/assets/cutting-mat-spec.svg | 27 ++ src/assets/cutting-mat.svg | 24 ++ src/assets/marker-green.svg | 22 ++ src/assets/marker-purple.svg | 22 ++ src/assets/paperclips.svg | 14 + src/assets/phone-spec.svg | 59 ++++ src/assets/phone.svg | 38 ++ src/assets/receipt-spec.svg | 70 ++++ src/assets/receipt.svg | 51 +++ src/assets/tablet-spec.svg | 51 +++ src/assets/tablet.svg | 36 ++ src/assets/warning-spec.svg | 18 + src/assets/warning.svg | 14 + src/components/App/App.tsx | 78 +---- src/components/Header/Header.css | 58 ++++ src/components/Header/Header.tsx | 46 +++ 23 files changed, 1452 insertions(+), 74 deletions(-) create mode 100644 src/assets/back-to-top.svg create mode 100644 src/assets/billiard-ball-spec.svg create mode 100644 src/assets/billiard-ball.svg create mode 100644 src/assets/calculator-spec.svg create mode 100644 src/assets/calculator.svg create mode 100644 src/assets/command-key-spec.svg create mode 100644 src/assets/command-key.svg create mode 100644 src/assets/cutting-mat-spec.svg create mode 100644 src/assets/cutting-mat.svg create mode 100644 src/assets/marker-green.svg create mode 100644 src/assets/marker-purple.svg create mode 100644 src/assets/paperclips.svg create mode 100644 src/assets/phone-spec.svg create mode 100644 src/assets/phone.svg create mode 100644 src/assets/receipt-spec.svg create mode 100644 src/assets/receipt.svg create mode 100644 src/assets/tablet-spec.svg create mode 100644 src/assets/tablet.svg create mode 100644 src/assets/warning-spec.svg create mode 100644 src/assets/warning.svg create mode 100644 src/components/Header/Header.css create mode 100644 src/components/Header/Header.tsx diff --git a/src/assets/back-to-top.svg b/src/assets/back-to-top.svg new file mode 100644 index 0000000..3f38c8a --- /dev/null +++ b/src/assets/back-to-top.svg @@ -0,0 +1,13 @@ + + + back-to-top + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/billiard-ball-spec.svg b/src/assets/billiard-ball-spec.svg new file mode 100644 index 0000000..fb8cfdd --- /dev/null +++ b/src/assets/billiard-ball-spec.svg @@ -0,0 +1,18 @@ + + + billiard-ball-spec + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/billiard-ball.svg b/src/assets/billiard-ball.svg new file mode 100644 index 0000000..609c8e8 --- /dev/null +++ b/src/assets/billiard-ball.svg @@ -0,0 +1,25 @@ + + + billiard-ball + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/calculator-spec.svg b/src/assets/calculator-spec.svg new file mode 100644 index 0000000..1e49cfe --- /dev/null +++ b/src/assets/calculator-spec.svg @@ -0,0 +1,252 @@ + + + calculator-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/calculator.svg b/src/assets/calculator.svg new file mode 100644 index 0000000..6b6982b --- /dev/null +++ b/src/assets/calculator.svg @@ -0,0 +1,558 @@ + + + calculator + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + MC + + + + + + + + + + MR + + + + + + + + + + M– + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/command-key-spec.svg b/src/assets/command-key-spec.svg new file mode 100644 index 0000000..fef317c --- /dev/null +++ b/src/assets/command-key-spec.svg @@ -0,0 +1,18 @@ + + + command-key-spec + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/command-key.svg b/src/assets/command-key.svg new file mode 100644 index 0000000..0d53716 --- /dev/null +++ b/src/assets/command-key.svg @@ -0,0 +1,14 @@ + + + command-key + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/cutting-mat-spec.svg b/src/assets/cutting-mat-spec.svg new file mode 100644 index 0000000..4558dff --- /dev/null +++ b/src/assets/cutting-mat-spec.svg @@ -0,0 +1,27 @@ + + + cutting-mat-spec + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/cutting-mat.svg b/src/assets/cutting-mat.svg new file mode 100644 index 0000000..f2fec9a --- /dev/null +++ b/src/assets/cutting-mat.svg @@ -0,0 +1,24 @@ + + + cutting-mat + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/marker-green.svg b/src/assets/marker-green.svg new file mode 100644 index 0000000..19f54f8 --- /dev/null +++ b/src/assets/marker-green.svg @@ -0,0 +1,22 @@ + + + marker-green + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/marker-purple.svg b/src/assets/marker-purple.svg new file mode 100644 index 0000000..cff2ede --- /dev/null +++ b/src/assets/marker-purple.svg @@ -0,0 +1,22 @@ + + + marker-purple + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/paperclips.svg b/src/assets/paperclips.svg new file mode 100644 index 0000000..f2c4b18 --- /dev/null +++ b/src/assets/paperclips.svg @@ -0,0 +1,14 @@ + + + paperclips + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/phone-spec.svg b/src/assets/phone-spec.svg new file mode 100644 index 0000000..0fefe5e --- /dev/null +++ b/src/assets/phone-spec.svg @@ -0,0 +1,59 @@ + + + phone-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/phone.svg b/src/assets/phone.svg new file mode 100644 index 0000000..21b062e --- /dev/null +++ b/src/assets/phone.svg @@ -0,0 +1,38 @@ + + + phone + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/receipt-spec.svg b/src/assets/receipt-spec.svg new file mode 100644 index 0000000..1ee673d --- /dev/null +++ b/src/assets/receipt-spec.svg @@ -0,0 +1,70 @@ + + + receipt-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/receipt.svg b/src/assets/receipt.svg new file mode 100644 index 0000000..3e5888a --- /dev/null +++ b/src/assets/receipt.svg @@ -0,0 +1,51 @@ + + + receipt + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/tablet-spec.svg b/src/assets/tablet-spec.svg new file mode 100644 index 0000000..2fa5253 --- /dev/null +++ b/src/assets/tablet-spec.svg @@ -0,0 +1,51 @@ + + + tablet-spec + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/tablet.svg b/src/assets/tablet.svg new file mode 100644 index 0000000..9d72593 --- /dev/null +++ b/src/assets/tablet.svg @@ -0,0 +1,36 @@ + + + tablet + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/warning-spec.svg b/src/assets/warning-spec.svg new file mode 100644 index 0000000..4663026 --- /dev/null +++ b/src/assets/warning-spec.svg @@ -0,0 +1,18 @@ + + + warning-spec + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/warning.svg b/src/assets/warning.svg new file mode 100644 index 0000000..a27a787 --- /dev/null +++ b/src/assets/warning.svg @@ -0,0 +1,14 @@ + + + warning + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx index c97e688..d60a32a 100644 --- a/src/components/App/App.tsx +++ b/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 = () => { return ( <> - - - -

- Phosphor is a flexible icon family for interfaces, diagrams, - presentations — whatever, really. -

-
-

- Clear and -
- reductive -

-
-

- 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. -

-

Design Specs

-
    -
  • 6 weights: Regular, Bold, Light, Thin, Fill, Duotone
    • -
  • Designed at 16px to scale down to a small size
    • -
  • Rounded end caps and ever so slightly rounded corners
    • -
  • Alternate glyphs to suit your needs
    • -
  • 6,341 icons and counting
    • -
- -
-
-
-

- Intuitive -
- and light -

-
-

- 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. -

-

Eng Specs

-
    -
  • Intuitive, powerful API to style and add interactivity
    • -
  • Lightweight and full support for tree-shaking
    • -
  • Familiar usage and naming scheme
    • -
  • - Built with TypeScript, and includes type definitions to ease - development -
    • -
- -
-
- +
Loading...}> diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css new file mode 100644 index 0000000..fa24a73 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..72d0be4 --- /dev/null +++ b/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 = () => { + return ( +
+ + {/* */} + {/* */} + + + + + + + + + +
+ ); +}; + +export default Header;