Merge pull request #273 from appwrite/fix-docs-header

src/lib/components/Spline.svelte

@@ -15,7 +15,15 @@
     onMount(async () => {
         await import('@splinetool/viewer');
         const onLoad = () => {
-            spline.shadowRoot?.querySelector('#logo')?.remove(); // Remove Spline logo
+            const shadowRoot = spline.shadowRoot;
+            if (shadowRoot) {
+                shadowRoot.querySelector('#logo')?.remove(); // Remove Spline logo
+                const canvas = shadowRoot.getElementById('spline');
+                if (canvas) {
+                    canvas.style.width = '100%';
+                    canvas.style.height = '100%';
+                }
+            }
 
             setTimeout(() => {
                 loaded.set(true);

src/routes/docs/+page.svelte

@@ -65,9 +65,6 @@
 
 <Docs variant="default">
     <Sidebar />
-    <div class="u-position-absolute u-inset-inline-end-0 aw-u-opacity-40-mobile" style="">
-        <img src="/images/bgs/docs-blur-1.svg" alt="" />
-    </div>
 
     <div
         class="u-position-absolute aw-is-not-mobile u-only-light"
@@ -85,26 +82,11 @@
         />
     </div>
 
-    <div
-        class="u-position-absolute aw-is-not-mobile u-only-dark"
-        style:inline-size="768px"
-        style:block-size="768px"
-        style:inset-block-start="26rem"
-        style:z-index="-1"
-        style:left="calc(50% - 384px + 600px)"
-    >
-        <Spline url="/images/animations/dark-scene.splinecode" width={768} height={768}>
-            <img
-                src="/images/animations/tech-dark.png"
-                width="768"
-                height="768"
-                alt=""
-                style="position: absolute;"
-            />
-        </Spline>
-    </div>
-
     <main class="aw-main-section u-position-relative">
+        <div class="u-position-absolute aw-u-opacity-40-mobile bg-blur">
+            <img src="/images/bgs/docs-blur-1.svg" alt="" />
+        </div>
+
         <div
             class="u-position-absolute u-inset-inline-start-0 u-inset-block-start-16 aw-u-opacity-40-mobile"
             style="    margin-inline-start: -30px;"
@@ -114,25 +96,40 @@
 
         <section class="aw-hero is-align-start u-position-relative">
             <h1 class="aw-display aw-u-color-text-primary u-max-width-600">
-                Learn how to build like a team of hundreds
+                Learn how to build like a team of hundreds<span class="aw-u-color-text-accent"
+                    >_
+                </span>
             </h1>
             <p class="aw-description u-max-width-600">
-                Appwrite is a backend development platform built by hundreds of open-source
-                developers, where you can build any application at any scale using the coding
-                languages and tools you want.
+                Appwrite helps you build secure and scalable apps, faster. Leverage Appwrite's
+                powerful APIs to stop fighting technologies and start delivering value.
             </p>
         </section>
-        <section class="aw-hero is-align-start">
+        <section class="aw-hero is-align-start tech-hero">
             <h2 class="aw-title aw-u-color-text-primary u-max-width-600">
                 Get started with your technologies
             </h2>
             <p class="aw-description u-max-width-600">
-                Follow a quick start guide on your web, mobile, and native frameworks.
+                Start building with your preferred web, mobile, and native frameworks by following a
+                quick start guide.
             </p>
             <Technologies />
             <a href="/docs/sdks" class="aw-button is-secondary" style:align-self="start">
                 <span class="aw-sub-body-500">Explore all technologies</span>
             </a>
+
+            <div class="u-position-absolute aw-is-not-mobile u-only-dark spline-wrapper">
+                <Spline url="/images/animations/dark-scene.splinecode" width={660} height={660}>
+                    <img
+                        src="/images/animations/tech-dark.png"
+                        width="660"
+                        height="660"
+                        alt=""
+                        style="position: absolute;"
+                    />
+                </Spline>
+            </div>
+            <div class="bg-boi" />
         </section>
         <section>
             <h2 class="aw-title aw-u-color-text-primary u-max-width-600">Show me some code</h2>
@@ -413,3 +410,64 @@
         <MainFooter variant="docs" />
     </main>
 </Docs>
+
+<style lang="scss">
+    .aw-main-section {
+        max-inline-size: unset;
+        margin-inline: unset;
+        padding-inline-start: 3rem; // 48px
+    }
+
+    .bg-blur {
+        inset-inline-end: -300px;
+        inset-block-start: -100px;
+    }
+
+    .tech-hero {
+        @include border-block-gradient;
+
+        background: linear-gradient(to right, #19191c80, #19191c00);
+        // background-color: #19191c80;
+        backdrop-filter: blur(1rem);
+        -webkit-backdrop-filter: blur(1rem);
+
+        --m-border-size: 1px;
+        --m-border-gradient-before: linear-gradient(
+            to right,
+            hsl(var(--aw-color-smooth)) 0%,
+            hsl(var(--aw-color-smooth)) 90%,
+            transparent
+        );
+
+        max-inline-size: unset;
+        margin-block-start: 2rem;
+        margin-inline-start: -3rem;
+        padding-block: 5rem;
+        padding-inline-start: 3rem;
+
+        position: relative;
+        z-index: 10;
+
+        .spline-wrapper {
+            --p-size: 700px;
+            inline-size: var(--p-size);
+            block-size: var(--p-size);
+            inset-block-start: -3rem;
+            z-index: -1;
+            left: calc(50% - 384px + 600px);
+        }
+
+        .bg-boi {
+            position: absolute;
+            background: linear-gradient(to right, #19191c00 0%, #19191c00 10%, #19191c);
+
+            top: 0;
+            right: 10rem;
+            translate: 100%;
+            width: 25rem;
+            height: 100%;
+            content: '';
+            z-index: 9999;
+        }
+    }
+</style>

src/scss/abstract/mixins/_border-gradient.scss

@@ -23,4 +23,33 @@
     @include border-gradient-inner;
     background: var(--m-border-gradient-after) border-box;
   }
-}
+}
+
+
+@mixin border-block-gradient-inner {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: var(--m-border-radius);
+  border-block: var(--m-border-size, 1px) solid transparent;
+  -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
+  -webkit-mask-composite: destination-out;
+  mask-composite: exclude;
+  pointer-events: none;
+}
+
+@mixin border-block-gradient {
+  position: relative;
+  border-radius: var(--m-border-radius);
+
+  &::before {
+    @include border-block-gradient-inner;
+    background: var(--m-border-gradient-before) border-box;
+  }
+
+  &::after {
+    @include border-block-gradient-inner;
+    background: var(--m-border-gradient-after) border-box;
+  }
+}
+