work

src/lib/components/ui/Button.svelte

@@ -14,10 +14,13 @@
       variants: {
         variant: {
           primary: [
-            "to-secondary-100 bg-gradient-to-br from-pink-500 via-pink-500",
+            "bg-gradient-to-br from-pink-500 via-pink-500 to-secondary-100",
-            "hover:shadow-[0_0_2rem_#fd366e52]",
+            "hover:shadow-[0_0_2rem_#fd366e52] active:not:disabled:shadow-[0_0_2rem_#fd366e52]",
+          ],
+          secondary: [
+            "bg-[#fd366e0a] relative",
+            "hover:shadow-[0_-6px_10px_0px_rgba(253,54,110,0.08)_inset]",
           ],
-          secondary: ["bg-[#fd366e0a] relative"],
           text: [
             "bg-transparent border-transparent",
             "hover:bg-gradient-to-b from-[#ffffff0f] via-[#ffffff1a] to-[#ffffff0f];",
@@ -38,22 +41,25 @@
   const { class: classes, ...props } = $$restProps;
 
   const buttonClasses = classNames(button({ variant }), classes, {
-    gradient: variant === "secondary",
+    secondary: variant === "secondary",
+    "leading-tight": $$slots.icon,
   });
 </script>
 
 {#if href}
   <a {...props} {href} class={buttonClasses}>
+    <slot name="icon" />
     <slot />
   </a>
 {:else}
   <button {...props} class={buttonClasses}>
+    <slot name="icon" />
     <slot />
   </button>
 {/if}
 
 <style>
-  .gradient {
+  .secondary {
     --border-gradient-before: linear-gradient(
       to bottom,
       rgba(253, 54, 110, 0.48) 0%,

src/lib/components/ui/Input.svelte

@@ -19,13 +19,12 @@
     )}
   >
     <slot name="icon" />
-    {label}
-    {name}
     <input
       on:input
       on:change
       on:focus
       on:blur
+      {name}
       bind:value
       class="w-full border-0 ring-0 outline-none"
       {...props}
@@ -42,7 +41,7 @@
     on:blur
     bind:value
     class={classNames(
-      "focus:border-greyscale-100 bg-greyscale-800 border-greyscale-700 flex items-center gap-1 rounded-lg border py-2 px-3 text-sm font-light transition-colors focus-within:border-white active:shadow-sm active:shadow-black/30",
+      "focus:border-greyscale-100 bg-greyscale-800 border-greyscale-700 mt-2 flex items-center gap-1 rounded-lg border py-2 px-3 text-sm font-light transition-colors focus-within:border-white active:shadow-sm active:shadow-black/30",
       classes,
     )}
     {...props}

src/routes/+page.svelte

@@ -12,6 +12,7 @@
   import DeveloperCard from "./DeveloperCard.svelte";
   import { PUBLIC_APPWRITE_DASHBOARD } from "$env/static/public";
   import CoverImage from "./dashboard.png";
+  import Button from "$lib/components/ui/Button.svelte";
 
   const title = "Appwrite - Build like a team of hundreds";
   const description = DEFAULT_DESCRIPTION;
@@ -146,12 +147,12 @@
                 Databases, Functions, Storage, and Messaging to your projects
                 using the frameworks and languages of your choice.
               </p>
-              <a
+              <Button
                 href={PUBLIC_APPWRITE_DASHBOARD}
-                class="web-button is-full-width-mobile mt-8"
+                class="mt-8 w-full lg:w-fit"
               >
-                <span class="text">Get started</span>
+                Get started
-              </a>
+              </Button>
             </div>
           </div>
         </section>
@@ -460,13 +461,9 @@
               ensuring you can code with the language you want at any time.
             </p>
             <Technologies />
-            <a
+            <Button href="/docs/sdks" variant="secondary"
-              href="/docs/sdks"
+              >Explore all SDKs</Button
-              class="web-button is-secondary"
-              style:align-self="start"
             >
-              <span class="web-sub-body-500">Explore all SDKs</span>
-            </a>
           </section>
         </div>
       </div>

src/routes/integrations/+page.svelte

@@ -131,7 +131,13 @@
                 placeholder="Search"
                 bind:value={$query}
                 autocomplete="off"
-              ></Input>
+              >
+                <span
+                  class="web-icon-search"
+                  aria-hidden="true"
+                  slot="icon"
+                /></Input
+              >
 
               <!-- <label
                 class="web-input-button focus:border-greyscale-100 web-flex-basis-400"