feat: features

5 files changed, 100 insertions, 2 deletions

diff --git a/public/static/img/icons/bell.png b/public/static/img/icons/bell.png
new file mode 100644
index 0000000..e4d6487
--- /dev/null
+++ b/public/static/img/icons/bell.png
diff --git a/public/static/img/icons/clock.png b/public/static/img/icons/clock.png
new file mode 100644
index 0000000..87143fe
--- /dev/null
+++ b/public/static/img/icons/clock.png
diff --git a/public/static/img/icons/keyboard.png b/public/static/img/icons/keyboard.png
new file mode 100644
index 0000000..1ff7324
--- /dev/null
+++ b/public/static/img/icons/keyboard.png
diff --git a/public/static/img/icons/terminal.png b/public/static/img/icons/terminal.png
new file mode 100644
index 0000000..c1a00d7
--- /dev/null
+++ b/public/static/img/icons/terminal.png
diff --git a/public/static/style.css b/public/static/style.css
index fa37b36..a39a3bd 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -2,6 +2,9 @@
     --primary-color: #6ee7b7;
     --secondary-color: #59c59a;
 
+    --box-background: #9bbdad;
+    --box-border: #92b3a3;
+
     --promo-button-background: linear-gradient(0deg, #ff9028 0% 50%, #ffb224 50% 100%);
     --promo-button-background-hover: #ff9028;
     --promo-button-foreground: #662000;
@@ -14,7 +17,7 @@
 }
 
 body {
-    background: #ccebdd;
+    background: #e4f5ed;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -22,6 +25,9 @@ body {
 
     width: 100%;
     min-height: 100vh;
+
+    font-family: Arial, Helvetica, sans-serif;
+    font-size: 18px;
 }
 
 main {
@@ -46,12 +52,14 @@ content {
 }
 
 footer {
-    background: #9bbdad;
+    background: var(--box-background);
+    border-top: 1px solid var(--box-border);
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 8px 0;
+    margin-top: 64px;
 }
 
 footer.big {
@@ -100,6 +108,87 @@ button:hover {
 }
 
 /**
+--- BOX
+*/
+
+.features-box>.tab {
+    background: var(--box-background);
+    border: 1px solid var(--box-border);
+    padding: 4px 0;
+    margin-bottom: 64px;
+    border-radius: 4px;
+}
+
+.features-box:has(.tab)>.content {
+    display: flex;
+    flex-direction: column;
+    gap: 128px;
+    line-height: 1.5em;
+}
+
+.features-box:has(.tab)>.content>section {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 64px;
+}
+
+.features-box:has(.tab)>.content>section:nth-child(even) {
+    flex-direction: row-reverse;
+}
+
+.features-box:has(.tab)>.content>section>.description {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.features-box:has(.tab)>.content>section:nth-child(even)>.description>* {
+    text-align: right;
+}
+
+.features-box:has(.tab)>.content>section>.icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.features-box:has(.tab)>.content>section>.icon>img {
+    width: 72px;
+    height: 72px;
+}
+
+.small-features>section {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    line-height: 1.5em;
+}
+
+.small-features>section>.icon>img {
+    background: #fff;
+    padding: 8px;
+    border-radius: 4px;
+    border: 1px solid var(--box-border);
+}
+
+.small-features>section:nth-child(1)>.icon>img {
+    background: linear-gradient(to left, #059669, #065f46);
+}
+
+.small-features>section:nth-child(2)>.icon>img {
+    background: linear-gradient(to left, #d97706, #92400e);
+}
+
+.small-features>section:nth-child(3)>.icon>img {
+    background: linear-gradient(to left, #2563eb, #1e40af);
+}
+
+.small-features>section:nth-child(4)>.icon>img {
+    background: linear-gradient(to left, #dc2626, #991b1b);
+}
+
+/**
 --- SHORTCUTS
 */
 
@@ -121,6 +210,11 @@ button:hover {
     flex-direction: row;
 }
 
+.grid-2 {
+    display: grid;
+    grid-template-columns: auto auto;
+}
+
 .align-center {
     align-items: center;
 }
@@ -141,6 +235,10 @@ button:hover {
     text-align: right;
 }
 
+.gap-64 {
+    gap: 64px;
+}
+
 .gap-32 {
     gap: 32px;
 }