pro update

Author: FireMario211

src/components/Header.astro

@@ -2,6 +2,7 @@
 const PAGES = [
     { title: 'Home', href: '/' },
     { title: 'FAQ', href: '/faq' },
+    { title: 'Pro', href: '/pro' },
     // { title: 'Page 3', href: '/page3'},
 ]
 

src/pages/pro.astro

@@ -0,0 +1,134 @@
+---
+import CellButton from '../components/CellButton.astro';
+import Container from '../components/Container.astro';
+import Layout from '../layouts/Layout.astro';
+---
+
+<Layout>
+    <div class="content">
+        <div class="container py-6">
+            <div class="row">
+                <div>
+                    <h1 class="title">Eclipse Pro</h1>
+                    <p class="sub-title">
+                        A <span style="--col1:#e6a9ff;--col2:#cb4bff;" class="color-grad">pro version</span> mod menu<br/>
+                        for <span style="--col1:#EEFF00;--col2:#F2FA10;" class="color-grad">Geometry Dash</span><br/>
+                        with even <span style="--col1:#35D377;--col2:#3affb3;" class="color-grad">better features</span><br/>
+                        Only <span style="--col1:#EEFF00;--col2:#F2FA10;" class="color-grad">25$ per month!</span>
+                    </p>
+                    <p>
+                        <CellButton href="#purchase"
+                            text="Buy Now!" icon="/kofi.svg"
+                            gradBegin="#6117BC" gradEnd="#410C82"/>
+                    </p>
+                </div>
+                <div>
+                    <img src="/eclipse.png" alt="Eclipse Menu" height="200px" />
+                </div>
+            </div>
+        </div>
+
+        <!-- <Container id="about">
+            About
+        </Container> -->
+
+        <Container id="about" title="Features" titleColor="#AAFFAA">
+            <p>
+                Eclipse Pro comes with many features that you all have been asking for!
+                Including but not limited to:
+            </p>
+            <ul>
+                <li>iOS support</li>
+                <li>CBF support (For Android and iOS, must have a keyboard or mouse!!!)</li>
+                <li>AI generated themes</li>
+                <li>AI generated labels</li>
+                <li>Innovative Bot Replay</li>
+                <li>AI level editor</li>
+            </ul>
+
+        </Container>
+        <Container id="purchase" title="Purchase" titleColor="#6117BC">
+            <h3>Tutorial</h3>
+            <iframe width="840" height="472" src="https://www.youtube.com/embed/y6lPRpEwigQ?si=Unfm-kD2dhFaHZE7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+            <p>
+                Click <a href="">here</a> to purchase Eclipse Pro!
+            </p>
+        </Container>
+    </div>
+</Layout>
+
+<style>
+    .container {
+        max-width: 800px;
+        margin: 0 auto;
+        padding-left: 2rem;
+        padding-right: 2rem;
+    }
+
+    .py-6 {
+        padding-top: 6rem;
+        padding-bottom: 6rem;
+    }
+
+    .row {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    @media (max-width: 800px) {
+        .row {
+            flex-direction: column-reverse;
+        }
+        .container {
+            padding-left: 1rem;
+            padding-right: 1rem;
+            text-align: center;
+        }
+    }
+
+    .title {
+        font-size: 4rem;
+        margin: 0;
+    }
+
+    .sub-title {
+        font-size: 1.7rem;
+        margin: 0;
+    }
+    
+    @media (max-width: 600px) {
+        .title {
+            font-size: 3rem;
+        }
+        .sub-title {
+            font-size: 1.2rem;
+        }
+    }
+
+    .color-grad {
+        background: linear-gradient(90deg, var(--col1) 0%, var(--col2) 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .image-fit {
+        width: 100%;
+        height: auto;
+        object-fit: contain;
+    }
+
+    kbd {
+        background: rgba(155, 155, 155, 0.3);
+        padding: 0.2rem 0.4rem;
+        border-radius: 0.2rem;
+        font-size: 0.9rem;
+    }
+
+    hr {
+        margin-top: 2rem;
+        margin-bottom: 2rem;
+        border: 0;
+        border-top: 1px solid rgba(255, 255, 255, 0.25);
+    }
+</style>