feat: big promo section

2 files changed, 98 insertions, 2 deletions

diff --git a/public/index.php b/public/index.php
index b0fa818..1e3c04b 100644
--- a/public/index.php
+++ b/public/index.php
@@ -15,7 +15,23 @@ include_once $_SERVER['DOCUMENT_ROOT'] . '/../lib/partials.php';
         <?php html_navigation_bar() ?>
 
         <content>
-            <h1>test</h1>
+            <!-- PROMO -->
+            <section class="row justify-between align-center background-colorful border" style="border-radius:4px">
+                <div class="row justify-center align-center img-gradient">
+                    <img src="/static/img/brand/profile_picture.png" alt=""
+                        style="border-top-left-radius:4px;border-bottom-left-radius:4px;">
+                </div>
+                <div class="column justify-end gap-8 p-16">
+                    <h1 class="self-end text-right">Enhance your chat with the bot</h1>
+                    <p class="self-end text-right">
+                        A multi-utility Twitch chat bot that brings<br>
+                        a lot of functionality into your chat.
+                    </p>
+                    <a href="#" class="self-end">
+                        <button>Get the bot</button>
+                    </a>
+                </div>
+            </section>
         </content>
     </main>
 
diff --git a/public/static/style.css b/public/static/style.css
index 6f39084..fa37b36 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -1,9 +1,20 @@
+:root {
+    --primary-color: #6ee7b7;
+    --secondary-color: #59c59a;
+
+    --promo-button-background: linear-gradient(0deg, #ff9028 0% 50%, #ffb224 50% 100%);
+    --promo-button-background-hover: #ff9028;
+    --promo-button-foreground: #662000;
+    --promo-button-border: #ac6019;
+}
+
 * {
     padding: 0;
     margin: 0;
 }
 
 body {
+    background: #ccebdd;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -35,7 +46,7 @@ content {
 }
 
 footer {
-    background: #cacaca;
+    background: #9bbdad;
     width: 100%;
     display: flex;
     justify-content: center;
@@ -47,15 +58,64 @@ footer.big {
     padding: 32px 0;
 }
 
+a {
+    color: #000;
+}
+
+a:hover {
+    color: var(--secondary-color);
+}
+
+button {
+    background: var(--promo-button-background);
+    border: 1px solid var(--promo-button-border);
+    border-radius: 4px;
+    color: var(--promo-button-foreground);
+    text-shadow: 0 1px #804e15;
+    font-weight: bold;
+
+    font-size: 16px;
+    padding: 8px;
+}
+
+button:hover {
+    cursor: pointer;
+    background: var(--promo-button-background-hover);
+}
+
+.img-gradient {
+    position: relative;
+    display: inline-block;
+}
+
+.img-gradient:after {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, var(--primary-color) 100%);
+}
 
 /**
 --- SHORTCUTS
 */
 
+.background-colorful {
+    background: var(--primary-color);
+}
+
 .w-50 {
     width: 50%;
 }
 
+.column {
+    display: flex;
+    flex-direction: column;
+}
+
 .row {
     display: flex;
     flex-direction: row;
@@ -69,6 +129,18 @@ footer.big {
     justify-content: center;
 }
 
+.justify-between {
+    justify-content: space-between;
+}
+
+.self-end {
+    align-self: flex-end;
+}
+
+.text-right {
+    text-align: right;
+}
+
 .gap-32 {
     gap: 32px;
 }
@@ -79,4 +151,12 @@ footer.big {
 
 .gap-8 {
     gap: 8px;
+}
+
+.p-16 {
+    padding: 16px;
+}
+
+.border {
+    border: 0.25px solid rgba(133, 133, 133, 0.25);
 }
\ No newline at end of file