feat: layout + homepage

src/app.css

@@ -49,3 +49,7 @@ a:not([class]) {
 blockquote.warning {
   @apply rounded-md bg-red-500 p-4 text-white dark:bg-red-500 dark:text-neutral-900;
 }
+
+.btn {
+  @apply inline-flex items-center justify-center rounded bg-gradient-to-r from-accent-400 to-accent-500 px-4 py-2 text-sm font-medium text-white shadow;
+}

src/routes/(docs)/+layout.svelte

@@ -0,0 +1,12 @@
+<script>
+  import Sidebar from './Sidebar.svelte'
+</script>
+
+<div class="flex w-full gap-12">
+  <div class="hidden min-w-[300px] lg:block">
+    <Sidebar />
+  </div>
+  <div class="flex flex-grow flex-col">
+    <slot />
+  </div>
+</div>

src/routes/(home)/+page.svelte

@@ -0,0 +1,18 @@
+<script>
+  import logo from '$images/louisette.svg'
+  import { base } from '$app/paths'
+</script>
+
+<!-- Vertically align -->
+<div class="flex h-[60vh] flex-col items-center justify-center">
+  <img src={logo} alt class="h-32 w-32" />
+  <p class="font-serif text-6xl">Louisette</p>
+  <p class="text-md text-center opacity-60">
+    <b>Louisette</b> is a collection of component primitives for <b>Svelte</b>.
+  </p>
+  <p class="mt-4">
+    <a href={`${base}/component/accordion`} class="btn" rel="noopener">
+      Get Started
+    </a>
+  </p>
+</div>

src/routes/+layout.server.ts

@@ -7,7 +7,7 @@ export const load: LayoutServerLoad = async () => {
   const __dirname = path.dirname(import.meta.url.replace('file://', ''))
 
   // Get the list of components in the component folder
-  const folders = await fs.readdir(path.join(__dirname, './component'))
+  const folders = await fs.readdir(path.join(__dirname, './(docs)/component'))
 
   const components = folders.map((folder) => {
     return {

src/routes/+layout.svelte

@@ -2,19 +2,13 @@
   import '../app.css'
   import '../highlight.less'
   import Header from './Header.svelte'
-  import Sidebar from './Sidebar.svelte'
 </script>
 
 <main
   class="flex min-h-screen w-full flex-col bg-gray-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100"
 >
   <Header />
-  <div class="container mx-auto flex max-w-6xl flex-grow gap-12 px-4">
-    <div class="hidden min-w-[300px] lg:block">
-      <Sidebar />
-    </div>
-    <div class="flex flex-grow flex-col pb-8">
-      <slot />
-    </div>
+  <div class="container mx-auto max-w-6xl flex-grow p-4">
+    <slot />
   </div>
 </main>

src/routes/Header.svelte

@@ -5,15 +5,15 @@
   import logo from '$images/louisette.svg'
 </script>
 
-<div class="container mx-auto flex max-w-6xl items-center gap-4 p-4 py-4">
+<div class="container mx-auto flex max-w-6xl items-center gap-4 p-4 pb-0">
   <a class="mr-auto flex items-center gap-2 rounded p-2" href="{base}/">
     <img src={logo} alt class="h-9 w-9" />
     <span class="font-serif text-3xl">Louisette</span>
     <span class="ml-2 rounded bg-accent-400 p-1 text-xs text-accent-900">
       {LOUISETTE_VERSION}
     </span>
   </a>
-  <div class="flex gap-4">
+  <div class="flex gap-2 md:gap-4">
     <a
       href="https://github.com/ubermanu/louisette"
       target="_blank"