diff --git a/package.json b/package.json index a544109071..37ee67fffb 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "start-fakeyou-w": "set PORT=7000 && lerna exec --scope @storyteller/fakeyou -- yarn start-w", "build-fakeyou": "lerna exec --scope @storyteller/fakeyou -- yarn build", "start-storyteller-home": "PORT=7008 BROWSER=none lerna exec --scope @storyteller/storyteller-home -- yarn start", + "start-storyteller-home-w": "set PORT=7008 && lerna exec --scope @storyteller/storyteller-home -- yarn start-w", "build-storyteller-home": "lerna exec --scope @storyteller/storyteller-home -- yarn build", "start-storyteller-obs": "PORT=7007 BROWSER=none lerna exec --scope @storyteller/storyteller-obs -- yarn start", "build-storyteller-obs": "lerna exec --scope @storyteller/storyteller-obs -- yarn build", diff --git a/packages/storyteller-home/package.json b/packages/storyteller-home/package.json index e37c03fb13..17fb7cc0e2 100644 --- a/packages/storyteller-home/package.json +++ b/packages/storyteller-home/package.json @@ -5,10 +5,10 @@ "dependencies": { "@storyteller/components": "0.1.0", "@craco/craco": "^6.4.3", - "@fortawesome/fontawesome-svg-core": "^1.2.36", - "@fortawesome/free-brands-svg-icons": "^5.15.4", - "@fortawesome/free-solid-svg-icons": "^5.15.4", - "@fortawesome/react-fontawesome": "^0.1.15", + "@fortawesome/fontawesome-svg-core": "^6.1.1", + "@fortawesome/free-brands-svg-icons": "^6.1.1", + "@fortawesome/free-solid-svg-icons": "^6.1.1", + "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.16.1", "@testing-library/react": "^9.5.0", "@testing-library/user-event": "^13.5.0", @@ -27,10 +27,13 @@ "react-scripts": "5.0.0", "three": "0.138.3", "typescript": "^4.5.5", - "web-vitals": "^2.1.4" + "web-vitals": "^2.1.4", + "locomotive-scroll": "^4.1.4", + "react-locomotive-scroll": "^0.2.2" }, "scripts": { "start": "craco start", + "start-w": "set BROWSER=none && craco start", "build": "craco build", "test": "craco test", "eject": "craco eject" diff --git a/packages/storyteller-home/public/hero/hero-img.png b/packages/storyteller-home/public/hero/hero-img.png new file mode 100644 index 0000000000..317de39e7a Binary files /dev/null and b/packages/storyteller-home/public/hero/hero-img.png differ diff --git a/packages/storyteller-home/public/index.html b/packages/storyteller-home/public/index.html index 95efac325d..34e3fb8ccd 100644 --- a/packages/storyteller-home/public/index.html +++ b/packages/storyteller-home/public/index.html @@ -3,16 +3,27 @@ - - - + + + - + - + - + - + - + - + + + + + + + + diff --git a/packages/storyteller-home/public/logo/Storyteller-Logo.png b/packages/storyteller-home/public/logo/Storyteller-Logo.png new file mode 100644 index 0000000000..1f4cdf310c Binary files /dev/null and b/packages/storyteller-home/public/logo/Storyteller-Logo.png differ diff --git a/packages/storyteller-home/src/App.scss b/packages/storyteller-home/src/App.scss index ba51f8cd34..dcd1b462fa 100644 --- a/packages/storyteller-home/src/App.scss +++ b/packages/storyteller-home/src/App.scss @@ -1,27 +1,284 @@ //@import-normalize; /* bring in normalize.css styles */ - -$page-width: 700px; +@import "./locomotive-scroll.scss"; $light-text-color: #777; $button-text-color: #666; +$primary: #fa6b68; +$white: #ffffff; -$body-font-family: 'Fira Sans', serif; -$nav-font-family: 'Fira Sans', sans-serif; -$footer-font-family: 'Fira Sans Condensed', sans-serif; -$textarea-font-family: 'Fira Sans', sans-serif; -$headings-font-family: 'Merriweather', serif; +$body-font-family: "Fira Sans", serif; body { font-family: $body-font-family; font-weight: 300; // For Fira Sans + color: $white; } -.mainwrap { - max-width: 1000px; - margin: auto; +::-moz-selection { + /* Code for Firefox */ + color: $white; + background: $primary; +} + +::selection { + color: $white; + background: $primary; +} + +.container-fluid { + padding-right: var(--bs-gutter-x, 1rem); + padding-left: var(--bs-gutter-x, 1rem); +} + +.container { + max-width: 1200px; } .git-sha { color: #999; font-size: 0.8rem; } + +.noselect { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Old versions of Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently + supported by Chrome, Edge, Opera and Firefox */ +} + +.bg-hero { + background: rgb(34, 34, 56); + background: linear-gradient( + 180deg, + rgba(34, 34, 56, 1) 0%, + rgba(23, 23, 37, 1) 100% + ); + height: 100vh; + min-height: 960px; + overflow: hidden; + position: relative; +} + +#content { + z-index: 10; +} + +#navbar { + top: 0; + position: fixed; + z-index: 10; + padding: 0; +} + +.topnav { + z-index: 10; +} + +.nav-link { + font-size: 16px; + font-weight: 500; + color: rgba($white, 0.6); + padding: 4px 0; + margin: auto 24px; + + &:hover { + color: $white; + } + + &.active { + color: $white; + border-bottom: 3px solid $primary; + } +} + +.lead { + color: rgba($white, 0.8); +} + +.btn { + border-radius: 5px; + outline: none; + font-size: 15px; + font-weight: 600; + padding: 10px 24px; + z-index: 2; + align-items: center; + justify-content: center; +} + +.btn-primary, +.btn-primary:focus, +.btn-primary:active { + background-color: $primary !important; + border: 2.5px solid; + border-color: $primary !important; + transition: 0.2s; + color: $white; + + &:hover { + background-color: lighten($primary, 5%) !important; + border-color: lighten($primary, 5%) !important; + color: $white; + } +} + +.hero-title-container { + position: relative; +} + +.hero-title { + font-size: 7.5rem; + font-weight: 900; + text-transform: uppercase; + width: 100%; + padding-top: 130px; + letter-spacing: 3px; + // text-shadow: 0px 10px 100px #171725; + z-index: 1; + white-space: nowrap; + + .hero-title-one { + text-align: left; + + span { + color: $primary; + } + } + + .hero-title-two { + margin-top: -35px; + padding-left: 22%; + } +} + +.hero-sub-title { + max-width: 400px; + margin-top: -10px; +} + +.hero-title-outline { + position: absolute; + width: 100%; + transform: scale(1.72); + top: -44px; +} + +.text-outline { + color: transparent; + -webkit-text-stroke: 0.5px rgba($white, 0.1); +} + +.shape-1-container { + position: absolute; + bottom: 38%; + left: 18%; +} +.shape-1 { + width: 140px; + height: 140px; + background: #2c2c40; + border-radius: 12px; + transform: translate3d(0px, 0px, 0px) rotate(45deg); + z-index: 5; + opacity: 0.5; +} + +.shape-2 { + width: 220px; + height: 220px; + background: #2c2c40; + border-radius: 16px; + transform: translate3d(0px, 0px, 0px) rotate(45deg); + position: absolute; + top: -10%; + right: 18%; + z-index: 5; + opacity: 0.5; +} + +.shape-3-container { + position: absolute; + bottom: 32%; + right: 28%; +} + +.shape-3 { + width: 100px; + height: 100px; + background: #2c2c40; + border-radius: 12px; + transform: translate3d(0px, 0px, 0px) rotate(45deg); + z-index: 5; + opacity: 0.5; +} + +.shape-4-container { + position: absolute; + bottom: 15%; + left: 32%; +} + +.shape-4 { + width: 60px; + height: 60px; + background: #2c2c40; + border-radius: 10px; + transform: translate3d(0px, 0px, 0px) rotate(45deg); + z-index: 5; + opacity: 0.5; +} + +.zi-1 { + z-index: 1; +} + +.zi-2 { + z-index: 2; +} + +.zi-10 { + z-index: 10; +} + +.hero-img { + width: 100%; + min-width: 1920px; + position: absolute; + bottom: 0; + z-index: 5; + pointer-events: none; +} + +.bg-light { + background: rgb(47, 47, 75); + background: linear-gradient( + 180deg, + rgba(47, 47, 75, 1) 0%, + rgba(32, 32, 51, 1) 100% + ); +} + +.section { + margin-top: -1px; + padding-top: 5rem; + padding-bottom: 5rem; +} + +.social-icons { + margin-left: 1rem; + font-size: 26px; + position: absolute; + top: 50%; + + a { + color: #7676a0; + transition: 0.3s; + + &:hover { + color: lighten(#7676a0, 10%); + } + } +} diff --git a/packages/storyteller-home/src/App.tsx b/packages/storyteller-home/src/App.tsx index f6030e0da9..5d06e71475 100644 --- a/packages/storyteller-home/src/App.tsx +++ b/packages/storyteller-home/src/App.tsx @@ -1,37 +1,53 @@ -import 'bulma/css/bulma.css' -import './App.scss'; +// import 'bulma/css/bulma.css' +import "./App.scss"; -import React from 'react'; -import { BrowserRouter, Route, Switch } from 'react-router-dom'; -import IndexPage from './pages/index/IndexPage'; -import VoxelCamPage from './pages/voxelcam/VoxelCamPage'; -import { Footer } from './common/Footer'; -import JobsPage from './pages/jobs/JobsPage'; -import ScrollToTop from '@storyteller/components/src/elements/ScrollToTop'; +import React, { useRef } from "react"; +import { BrowserRouter, Route, Switch } from "react-router-dom"; +import IndexPage from "./pages/index/IndexPage"; +import VoxelCamPage from "./pages/voxelcam/VoxelCamPage"; +import JobsPage from "./pages/jobs/JobsPage"; +import { LocomotiveScrollProvider } from "react-locomotive-scroll"; +import { TopNav } from "./common/TopNav"; + +function App() { + const containerRef = useRef(null); -function App () { return ( <> - -
-
- {/* */} - - - - - - - - - - - - + + +
+
+ + + + + + + + + + + + +
-
-