rearranged css

src/Background.tsx

@@ -14,7 +14,7 @@ function Background() {
             <Shader>
                 <Swirl
                     colorA="#00529b"
-                    colorB="#087dca"
+                    colorB="#0996ec"
                     speed={0.4}
                     detail={3.6}
                     blend={50}

src/ButtonNew.tsx

@@ -1,10 +1,15 @@
 import './buttonNew.scss'
+import newclientImage from '/newclient.png'
 
 function ButtonNew() {
     return (
         <div className="client newclient">
-            <div className="content"></div>
+            <img src={newclientImage} />
-            <div className="new-button">Start</div>
+            <div className="content">
+                <div>Join with the</div>
+                <div>New Client</div>
+            </div>
+            <div className="button">Start</div>
         </div>
     )
 }

src/ButtonOld.tsx

@@ -1,16 +1,16 @@
 import './buttonOld.scss'
-import oldclientWave from '/oldclient-wave.svg'
+import oldclientImg from '/oldclient.svg'
 
 function ButtonOld() {
     return (
         <div className="client oldclient">
             <div className="oldclient-inner">
+                <img src={oldclientImg} />
                 <div className="content">
-                    <img src={oldclientWave} />
                     <div>JOIN WITH THE</div>
                     <div>OLD CLIENT</div>
                 </div>
-                <div className="old-button">START</div>
+                <div className="button">START</div>
             </div>
         </div>
     )

src/buttonNew.scss

@@ -7,43 +7,54 @@
     background: rgba(9, 150, 236, 1);
     border-radius: 5px;
 
+    color: white;
+    font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
+    text-decoration: none;
+    font-size: 24px;
+    text-align: center;
+    
     display: flex;
     align-items: center;
     flex-direction: column;
 
+    img {
+        display: inline;
+        height: 60%;
+        margin-top: 30px;
+        margin-bottom: 30px;
+    }
+
     .content {
         flex-grow: 1;
-    }
+
-}
+        text-align: center;
-
+    }
-.new-button {
+
-    display: inline-block;
+    .button {
-    user-select: none;
+        display: inline-block;
-
+        user-select: none;
-    color: white;
+
-    font-family: 'ProximaNova Bold', Helvetica, Arial, sans-serif;
+        font-size: 18px;
-    text-decoration: none;
+
-    font-size: 18px;
+        width: 226px;
-    text-align: center;
+        height: 58px;
-
+        line-height: 58px;
-    width: 226px;
+        box-sizing: border-box;
-    height: 58px;
+        margin: 20px;
-    line-height: 58px;
+
-    box-sizing: border-box;
+        border-radius: 8px;
-    margin: 20px;
+
-
+        background: #22a4f3;
-    border-radius: 8px;
+        background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
-
+
-    background: #22a4f3;
+        box-shadow:
-    background: linear-gradient(-180deg, #22a4f3 0%, #004093 100%);
+            0 3px 0 0 rgba(0, 82, 175, 0.4),
-
+            inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
-    box-shadow:
+
-        0 3px 0 0 rgba(0, 82, 175, 0.4),
+        border: 1px solid #003f72;
-        inset 0 2px 0 0 rgba(255, 255, 255, 0.4);
+
-
+        &:hover {
-    border: 1px solid #003f72;
+            background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
-
+        }
-    &:hover {
-        background: linear-gradient(-180deg, #004093 0%, #22a4f3 100%);
     }
 }

src/buttonOld.scss

@@ -14,13 +14,10 @@
     font-style: italic;
     text-align: center;
 
-
     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
 
@@ -39,60 +36,59 @@
         align-items: center;
         flex-direction: column;
 
+        img {
+            width: 100%;
+            height: 60%;
+            margin-bottom: 30px;
+        }
+
         .content {
             flex-grow: 1;
 
             text-align: center;
-            padding: 20px;
+        }
+    }
 
-            img {
+    .button {
-                width: 100%;
+        display: inline-block;
-                height: 70%;
+        user-select: none;
-                margin-bottom: 30px;
+
-            }
+        font-size: 40px;
+        -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%
+            );
         }
     }
 }
-
-.old-button {
-    display: inline-block;
-    user-select: none;
-
-    font-size: 40px;
-    -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

@@ -16,6 +16,8 @@
 
         margin-left: 50px;
 
+        box-shadow: rgba(67, 67, 67, 0.8) 0 0 5px;
+
         &:nth-child(0) {
             margin-left: 0px;
         }