add: design, icons, calculation

Implemented new design for PriceCards, added some icons for visuals, added calculation per price card

app/assets/styles/button.css

@@ -0,0 +1,20 @@
+.Button {
+    all: unset;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+
+    &.cta {
+        background: var(--color-main);
+        color: var(--color-white);
+        padding: .5rem 1.5rem;
+        border-radius: var(--radius-default);
+        box-shadow: var(--box-shadow-z2);
+        transition: var(--transition-default);
+
+        &:hover {
+            background: var(--color-main-dark);
+        }
+    }
+}

app/assets/styles/formInput.css

@@ -1,7 +1,5 @@
 .Input {
     position: relative;
-    display: flex;
-    flex-direction: column;
     flex: 25% 1 0;
     border: 2px solid var(--color-blue);
     border-radius: var(--radius-default);

app/assets/styles/general.css

@@ -5,11 +5,14 @@
 
     --color-white: white;
     --color-red: #cc0001;
-    --color-blue-dark: #341f97;
+    --color-blue-light: #61a7fd;
     --color-blue: #2e86de;
+    --color-blue-dark: #1b4b7f;
     --color-grey: #c7c7c7;
 
     --color-main: var(--color-blue);
+    --color-main-light: var(--color-blue-light);
+    --color-main-dark: var(--color-blue-dark);
 
     --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
 }
@@ -24,4 +27,26 @@ html,
 body {
     height: 100%;
     overflow-x: hidden;
+    font-family: sans-serif;
+}
+
+.card {
+    overflow: hidden;
+    border-radius: var(--radius-default);
+    border: 1px solid var(--color-main);
+    box-shadow: var(--box-shadow-z2);
+}
+
+.content {
+    padding: 1rem;
+}
+
+.pc-wrapper {
+    gap: 1rem;
+    margin-bottom: 1rem;
+}
+
+.flex-col {
+    display: flex;
+    flex-direction: column;
 }

app/assets/styles/header.css

@@ -22,8 +22,6 @@
 
     & nav,
     & ul {
-        display: flex;
-        flex-direction: column;
         gap: 1em;
     }
 

app/assets/styles/priceCard.css

@@ -1,16 +1,49 @@
 .PriceCard {
-    padding: var(--padding-default);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
     width: 100%;
-    background: var(--color-blue);
-    border-bottom: 1px solid var(--color-white);
 
-    & > .wrapper {
+    & > .padding {
+        gap: 1rem;
+        padding: var(--padding-default);
+    }
+
+    & > .bg-blue {
+        background: var(--color-blue);
+    }
+
+    & > .bg-white {
+        background: var(--color-white);
+    }
+
+    & .wrapper {
         display: flex;
+        flex-direction: row;
         width: 100%;
         gap: 1rem;
         justify-content: space-between;
+
+        & > * {
+            flex-basis: 30%;
+            flex-grow: 1;
+        }
+
+        & > .info {
+            align-items: center;
+
+            & > .icon {
+                color: var(--color-blue-light);
+                font-size: 2rem;
+                padding: .2rem;
+            }
+
+            & > .price {
+                font-size: 1.2rem;
+            }
+
+            & > .pro {
+                font-size: .8rem;
+                font-weight: bold;
+                color: var(--color-main-light);
+            }
+        }
     }
 }