🎨 Design improvements + update /api page.

src/app.css

@@ -6,13 +6,13 @@
   :root {
     --sb-track-color: rgb(229 229 229 / 0.5);
     --sb-thumb-color: #d4d4d4;
-    --sb-size: 8px;
+    --sb-size: 10px;
   }
 
   .dark {
     --sb-track-color: #171717;
     --sb-thumb-color: #404040;
-    --sb-size: 8px;
+    --sb-size: 10px;
   }
 }
 

src/components/endpoints.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { cn } from '@/utils/cn';
+
+  type methodType = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
+
+  export let method: methodType;
+  export let title: string;
+  export let description: string;
+</script>
+
+<div class={cn('border-2 border-neutral-100 dark:border-neutral-800 rounded-lg', 'p-4 mb-2')}>
+  <div class="flex items-center space-x-4 mb-4">
+    <p
+      class={cn(
+        'm-0 rounded-md font-medium px-1.5 py-0.5 text-sm leading-5',
+        method === 'GET' &&
+          ' text-green-600 dark:text-green-500 bg-green-400/20 dark:bg-green-400/20',
+        method === 'POST' && ' text-blue-600 dark:text-blue-500 bg-blue-400/20 dark:bg-blue-400/20',
+        method === 'PUT' &&
+          ' text-yellow-600 dark:text-yellow-500 bg-yellow-400/20 dark:bg-yellow-400/20',
+        method === 'PATCH' &&
+          ' text-yellow-600 dark:text-yellow-500 bg-yellow-400/20 dark:bg-yellow-400/20',
+        method === 'DELETE' && ' text-red-600 dark:text-red-500 bg-red-400/20 dark:bg-red-400/20'
+      )}
+    >
+      {method}
+    </p>
+    <div class="flex flex-col space-y-0 m-0">
+      <h3 class="m-0 font-medium">{title}</h3>
+      <p class="mb-0 font-mono text-sm">{description}</p>
+    </div>
+  </div>
+  <slot />
+</div>

src/components/svgCard.svelte

@@ -5,14 +5,10 @@
   import { MIMETYPE, getSvgContent } from '../utils/getSvgContent';
 
   // Icons:
-  import DownloadSimple from 'phosphor-svelte/lib/DownloadSimple';
-  import Copy from 'phosphor-svelte/lib/Copy';
-  import Link from 'phosphor-svelte/lib/Link';
-  import Star from 'phosphor-svelte/lib/Star';
+  import { CopyIcon, DownloadIcon, LinkIcon } from 'lucide-svelte';
 
   // Main Card:
   import CardSpotlight from './cardSpotlight.svelte';
-  import { CopyIcon, DownloadIcon, LinkIcon } from 'lucide-svelte';
 
   // Props:
   export let svgInfo: iSVG;
@@ -36,7 +32,6 @@
       await navigator.clipboard.writeText(content);
     }
     toast.success('Copied to clipboard!', {
-      icon: Star,
       description: `${svgInfo.title} - ${svgInfo.category}`
     });
   };

src/routes/+layout.svelte

@@ -63,6 +63,9 @@
             data-sveltekit-preload-data>{category}</a
           >
         {/each}
+      </div>
+      <div>
+        
       </div>
       <a
         href="https://twitter.com/pheralb_"

src/routes/api/+page.svelte

@@ -1 +1,49 @@
-<h1>Soon 🚀</h1>
+<script>
+  import { cn } from '@/utils/cn';
+  export let data;
+</script>
+
+<svelte:head>
+  <title>{data.meta.title} - SVGL</title>
+  <meta property="og:type" content="article" />
+  <meta property="og:title" content={data.meta.title} />
+  <meta property="og:description" content={data.meta.description} />
+</svelte:head>
+
+<section
+  class="bg-white dark:bg-neutral-900 bg-[url('./images/hero-pattern_light.svg')] dark:bg-[url('./images/hero-pattern_dark.svg')]"
+>
+  <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-20 z-10 relative">
+    <div class="flex items-center space-x-4 text-center justify-center">
+      <h1
+        class="mb-4 text-4xl font-bold tracking-tight leading-none text-neutral-900 md:text-5xl lg:text-6xl dark:text-white"
+      >
+        API Reference
+      </h1>
+      <span class="relative inline-block overflow-hidden rounded-full p-[1px] shadow-sm">
+        <span
+          class="absolute inset-[-1000%] animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_90deg_at_50%_50%,#121212_0%,#121212_50%,#737373_100%)]"
+        />
+        <div
+          class="inline-flex h-full w-full cursor-pointer items-center justify-center rounded-full bg-neutral-900 px-3 py-1 text-sm font-medium text-white backdrop-blur-3xl border border-neutral-800"
+        >
+          beta
+        </div>
+      </span>
+    </div>
+    <p class="text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-200">
+      The API reference is a detailed documentation of all the endpoints available in the API.
+    </p>
+  </div>
+</section>
+
+<article
+  class={cn(
+    'prose dark:prose-invert',
+    'mx-auto py-10 px-4 max-w-3xl',
+    'prose-h2:font-medium',
+    'prose-pre:m-0'
+  )}
+>
+  <svelte:component this={data.content} />
+</article>