From 032d301d5651fb30d9fef3fd1743c4afee4466d4 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 27 Apr 2023 16:49:28 +0100
Subject: [PATCH] feat: claim your card btn

---
 src/lib/layout/header.svelte | 70 ++++++++++++++++++++++++++++++++++++
 1 file changed, 70 insertions(+)

diff --git a/src/lib/layout/header.svelte b/src/lib/layout/header.svelte
index 88a9a0b4b..79088f437 100644
--- a/src/lib/layout/header.svelte
+++ b/src/lib/layout/header.svelte
@@ -201,9 +201,79 @@
                                 </li>
                             </ul>
                         </section>
+                        <section class="drop-section">
+                            <a
+                                class="claim"
+                                title="Gradient Border"
+                                href="/cloud-beta-card"
+                                data-sveltekit-reload>
+                                Claim your Cloud card
+                            </a>
+                        </section>
                     </div>
                 {/if}
             </div>
         {/if}
     </nav>
 </div>
+
+<style lang="scss">
+    .claim {
+        display: block;
+        background-image: linear-gradient(90deg, #fd7f34, #bd155b);
+
+        padding: 0.6875rem 0.625rem;
+        position: relative;
+        z-index: 0;
+        border-radius: 0.5rem;
+        text-align: center;
+        width: 100%;
+
+        font-family: 'Inter';
+        font-style: normal;
+        font-weight: 500;
+        font-size: 12px;
+        line-height: 150%;
+
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+
+        color: #ffffff;
+
+        transition: 150ms ease;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: -1px;
+            top: -1px;
+            width: calc(100% + 2px);
+            height: calc(100% + 2px);
+            background: linear-gradient(
+                113.48deg,
+                #3b3b4eaa -15.8%,
+                rgba(255, 255, 255, 0.7) 27.72%,
+                #3b3b4eaa 109.47%
+            );
+            z-index: -2;
+            border-radius: 0.3125rem;
+        }
+
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(180deg, #1b1b28 0%, #272739 62.73%, #c81b4c 136.87%);
+            z-index: -1;
+
+            border-radius: 0.25rem;
+        }
+
+        &:hover {
+            opacity: 0.75;
+        }
+    }
+</style>