updates

src/app.css

@@ -90,8 +90,6 @@
     --font-family-aeonik-pro: 'Aeonik Pro', var(--font-family-sans);
     --font-family-archia: 'Archia', arial, sans-serif;
 
-    --font-size-xs: clamp(0.75rem, 2.5vw + 0.5rem, 1rem);
-    --font-size-xs--line-height: clamp(1rem, 2.5vw + 0.75rem, 1.25rem);
     --font-size-sm: clamp(0.875rem, 2.5vw + 0.625rem, 1.125rem);
     --font-size-sm--line-height: clamp(1.25rem, 2.5vw + 0.875rem, 1.5rem);
     --font-size-base: clamp(1rem, 2.5vw + 0.75rem, 1.25rem);

src/lib/animations/Products/Products.svelte

@@ -158,6 +158,7 @@
     import { postController } from './post';
     import Post from './post/post.svelte';
     import { anyify } from '$lib/utils/anyify';
+    import Badge from '$lib/components/ui/Badge.svelte';
 
     /* Basic Animation setup */
     let scrollInfo = {

src/lib/components/ui/Badge.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    import { classNames } from '$lib/utils/classnames';
+    import type { SvelteHTMLElements } from 'svelte/elements';
+
+    type $$Props = SvelteHTMLElements['span'];
+
+    const { class: classes, ...props } = $$restProps;
+</script>
+
+<span
+    class={classNames(
+        'badge text-xs self-start uppercase font-aeonik-fono text-white py-[0.375rem] px-3 rounded-[0.375rem] backdrop-blur-2xl',
+        classes
+    )}
+    {...props}
+>
+    <slot />
+</span>
+
+<style>
+    :root,
+    .light {
+        --shadow-bg-color: #f2c8d6;
+        --shadow-border-color: #f69db7;
+        --shadow-opacity: 0.4;
+    }
+
+    .dark {
+        --shadow-bg-color: #2c2c2f;
+        --shadow-border-color: #39393c;
+        --shadow-opacity: 0.13;
+    }
+
+    .badge {
+        background: radial-gradient(
+            98.13% 199.7% at 98.13% 100%,
+            #fe6947 0%,
+            #fd366e 41.6%,
+            #fd366e 100%
+        );
+        box-shadow:
+            0.1875rem 0.1875rem var(--shadow-bg-color),
+            0.25rem 0.1875rem var(--shadow-border-color),
+            0.1875rem 0.25rem var(--shadow-border-color),
+            0.125rem 0.1875rem var(--shadow-border-color),
+            0.1875rem 0.125rem var(--shadow-border-color);
+    }
+</style>

src/lib/components/ui/Hero.svelte

@@ -9,7 +9,7 @@
         variants: {
             layout: {
                 vertical: ['flex-col', 'max-w-[600px]'],
-                horizontal: ['flex-col', 'md:flex-row']
+                horizontal: ['flex-col', 'lg:flex-row']
             }
         },
         defaultVariants: {

src/markdoc/layouts/Integration.svelte

@@ -156,9 +156,7 @@
                     <section
                         class="web-hero web-u-max-width-580 flex items-center justify-center gap-y-4"
                     >
-                        <h2
-                            class="web-display web-u-text-align-center web-u-color-text-primary max-w-[600px]"
-                        >
+                        <h2 class="web-display text-center web-u-color-text-primary max-w-[600px]">
                             Become a Technology Partner
                         </h2>
                         <p class="web-main-body-500">

src/routes/+page.svelte

@@ -15,6 +15,7 @@
     import Button from '$lib/components/ui/Button.svelte';
     import Hero from '$lib/components/ui/Hero.svelte';
     import GradientText from '$lib/components/ui/GradientText.svelte';
+    import Badge from '$lib/components/ui/Badge.svelte';
 
     const title = 'Appwrite - Build like a team of hundreds';
     const description = DEFAULT_DESCRIPTION;
@@ -167,7 +168,7 @@
             <div class="my-[7.5rem]">
                 <div class="container">
                     <h2
-                        class="web-title web-u-color-text-primary web-u-text-align-center web-u-max-width-600 mx-auto"
+                        class="web-title web-u-color-text-primary text-center web-u-max-width-600 mx-auto"
                     >
                         Trusted by developers from the world's leading organizations
                     </h2>
@@ -289,7 +290,7 @@
             <div class="my-[7.5rem]">
                 <div class="container">
                     <section class="web-hero is-align-start">
-                        <span class="web-badges web-eyebrow !text-white">PRIVACY & SECURITY_</span>
+                        <Badge>PRIVACY & SECURITY_</Badge>
                         <h2 class="web-display text-primary max-w-[700px]">
                             Self-host your data or take it to the Cloud
                         </h2>

src/routes/integrations/+page.svelte

@@ -425,9 +425,7 @@
                     <section
                         class="web-hero web-u-max-width-580 flex items-center justify-center gap-4"
                     >
-                        <h2
-                            class="web-display web-u-text-align-center web-u-color-text-primary max-w-[600px]"
-                        >
+                        <h2 class="web-display text-center web-u-color-text-primary max-w-[600px]">
                             Become a Technology Partner
                         </h2>
                         <p class="web-main-body-500">

src/routes/pricing/compare-plans.svelte

@@ -362,7 +362,7 @@
             <article use:melt={$root}>
                 <div class="container">
                     <header
-                        class="web-u-text-align-center"
+                        class="text-center"
                         use:visible
                         on:visible={(e) => {
                             shouldShowTable = !e.detail;