main layout

src/App.tsx

@@ -0,0 +1,13 @@
+import Background from './Background'
+import Buttons from './Buttons'
+
+function App() {
+    return (
+        <>
+            <Background />
+            <Buttons />
+        </>
+    )
+}
+
+export default App

src/Background.tsx

@@ -0,0 +1,81 @@
+import {
+    Shader,
+    DiffuseBlur,
+    FilmGrain,
+    Glow,
+    Liquify,
+    Swirl,
+} from 'shaders/react'
+import './background.scss'
+
+function Background() {
+    return (
+        <div id="background">
+            <Shader>
+                <Swirl
+                    colorA="#00529b"
+                    colorB="#087dca"
+                    speed={0.4}
+                    detail={3.6}
+                    blend={50}
+                    coarseX={50}
+                    coarseY={50}
+                    mediumX={50}
+                    mediumY={50}
+                    fineX={50}
+                    fineY={50}
+                    colorSpace="linear"
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+                <Liquify
+                    intensity={5}
+                    swirl={0.56}
+                    decay={0.3}
+                    radius={2}
+                    edges="stretch"
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+                <DiffuseBlur intensity={30} />
+                <Glow
+                    size={27.5}
+                    intensity={2.69}
+                    threshold={0.37}
+                    visible={true}
+                />
+                <FilmGrain
+                    strength={0.1}
+                    maskType="alpha"
+                    transform={{
+                        offsetX: 0,
+                        offsetY: 0,
+                        rotation: 0,
+                        scale: 1,
+                        anchorX: 0.5,
+                        anchorY: 0.5,
+                        edges: 'transparent',
+                    }}
+                />
+            </Shader>
+        </div>
+    )
+}
+
+export default Background

src/ButtonNew.tsx

@@ -0,0 +1,11 @@
+import './buttonNew.scss'
+
+function ButtonNew() {
+    return (
+        <div className="client newclient">
+            <div className="new-button">Start</div>
+        </div>
+    )
+}
+
+export default ButtonNew

src/ButtonOld.tsx

@@ -0,0 +1,13 @@
+import './buttonOld.scss'
+
+function ButtonOld() {
+    return (
+        <div className="client oldclient">
+            <div className="oldclient-inner">
+                <div className="old-button">STA RT</div>
+            </div>
+        </div>
+    )
+}
+
+export default ButtonOld

src/Buttons.tsx

@@ -0,0 +1,20 @@
+import ButtonNew from './ButtonNew'
+import ButtonOld from './ButtonOld'
+import './buttons.scss'
+
+function Buttons() {
+    return (
+        <div className="buttons">
+            {/* <a href="https://old.penguin.ikea.fishing/"> */}
+            <a href="#">
+                <ButtonOld />
+            </a>
+            {/* <a href="https://new.penguin.ikea.fishing/#/login"> */}
+            <a href="#">
+                <ButtonNew />
+            </a>
+        </div>
+    )
+}
+
+export default Buttons

src/background.scss

@@ -0,0 +1,30 @@
+body {
+    // background: rgb(34, 164, 243);
+    background: #00529b;
+}
+
+#background {
+    position: fixed;
+
+    // top: 25%;
+    // left: 25%;
+    // width: 50%;
+    // height: 50%;
+
+    top: 0%;
+    left: 0%;
+    width: 100%;
+    height: 100%;
+
+    .shader {
+        aspect-ratio: 16 / 9;
+
+        min-width: 100%;
+        min-height: 100%;
+
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}

src/buttonNew.scss

@@ -0,0 +1,46 @@
+@font-face {
+    font-family: 'ProximaNova Bold';
+    src: url('/ProximaNova-Bold-webfont.woff2') format('opentype');
+}
+
+.newclient {
+    background: rgba(9, 150, 236, 1);
+    border-radius: 5px;
+
+    display: flex;
+    justify-content: center;
+}
+
+.new-button {
+    align-self: flex-end;
+
+    display: inline-block;
+    user-select: none;
+
+    color: white;
+    font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
+    text-decoration: none;
+    font-size: 18px;
+    text-align: center;
+
+    width: 226px;
+    height: 58px;
+    line-height: 58px;
+    box-sizing: border-box;
+    margin: 20px;
+
+    border-radius: 8px;
+
+    background: #22a4f3;
+    background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
+
+    box-shadow:
+        0 3px 0 0 rgba(0, 82, 175, 0.4),
+        inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
+
+    border: 1px solid #003f72;
+
+    &:hover {
+        background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
+    }
+}

src/buttonOld.scss

@@ -0,0 +1,86 @@
+@font-face {
+    font-family: 'CCFaceFront Italic';
+    src: url('/CCFaceFront Italic.ttf') format('opentype');
+}
+
+.oldclient {
+    border: 10px solid #0062b6;
+    border-radius: 40px;
+
+    background: linear-gradient(0deg, #016ec1 0%, #0280cd 100%);
+
+    padding: 5px;
+
+    box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
+
+    .oldclient-inner {
+        border-radius: 25px; // border-radius - border - padding
+
+        background: #0173c4;
+        background: radial-gradient(
+            ellipse 300% 100% at 50% 100%,
+            rgb(1, 115, 196) 0%,
+            rgb(1, 119, 199) 49%,
+            rgb(49, 145, 210) 51%,
+            rgb(8, 125, 202) 100%
+        );
+
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+    }
+}
+
+.old-button {
+    align-self: flex-end;
+
+    display: inline-block;
+    user-select: none;
+
+    color: white;
+    font-family: 'CCFaceFront Italic', Helvetica, Arial, sans-serif;
+    letter-spacing: -0.7rem;
+    word-spacing: 0.65rem;
+    text-decoration: none;
+    font-size: 40px;
+    font-style: italic;
+    text-align: center;
+
+    -webkit-text-stroke: 6px black;
+    paint-order: stroke fill;
+
+    width: 250px;
+    height: 100px;
+    line-height: 100px;
+    box-sizing: border-box;
+    margin: 20px;
+
+    border-radius: 22px / 28px;
+
+    background: #0396e5;
+    background: linear-gradient(
+        0deg,
+        rgb(3, 150, 229) 0%,
+        rgb(1, 100, 199) 25%,
+        rgb(0, 83, 175) 50%,
+        rgb(77, 176, 243) 100%
+    );
+
+    box-shadow:
+        #00ccff 3px 1px 0px -1px inset,
+        #003366 0px 2px 0px 4px,
+        #00ccff 2.5px 6px 0px 4px,
+        #00529b -1px -2.5px 0px 5.5px;
+
+    &:hover {
+        background: #0054b0;
+        background: linear-gradient(
+            0deg,
+            rgb(0, 84, 176) 0%,
+            rgb(0, 82, 174) 53%,
+            rgb(0, 90, 180) 54%,
+            rgb(30, 125, 191) 100%
+        );
+    }
+}

src/buttons.scss

@@ -0,0 +1,25 @@
+.buttons {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    // background: #00529B;
+
+    .client {
+        width: 500px;
+        height: 800px;
+        box-sizing: border-box;
+
+        margin-left: 50px;
+
+        &:nth-child(0) {
+            margin-left: 0px;
+        }
+    }
+}

src/main.scss

@@ -0,0 +1,7 @@
+body {
+    margin: 0;
+}
+
+a {
+    text-decoration: none;
+}

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './main.scss'
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <App />
+    </StrictMode>,
+)