flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/landing/CTA.svelte

@@ -0,0 +1,98 @@
+<script>
+  import Button from '$lib/buttons/Button.svelte';
+  import DarkMode from '$lib/darkmode/DarkMode.svelte';
+  import Li from '$lib/typography/Li.svelte';
+  import List from '$lib/typography/List.svelte';
+  import ArrowRight from '../utils/icons/ArrowRight.svelte';
+  import Check from '../utils/icons/Check.svelte';
+  import Moon from '../utils/icons/Moon.svelte';
+  import Sun from '../utils/icons/Sun.svelte';
+  import A from './utils/A.svelte';
+  import H2 from './utils/H2.svelte';
+  import Row from './utils/Row.svelte';
+  import Section from './utils/Section.svelte';
+
+  const features = ['Huge collection of UI components', 'Open-source under the MIT License', 'Interactivity handled by Svelte', 'Utility classes based on Tailwind CSS', 'Based on the Flowbite ecosystem and design'];
+</script>
+
+<Section class="lg:py-24" tinted>
+  <Row image="bg-[url('/images/code-example.png')] dark:bg-[url('/images/code-example-dark.png')]" divide h_full>
+    <div class="flex flex-col items-start gap-3 sm:gap-4 self-stretch">
+      <H2>Svelte UI components</H2>
+      <p class="text-lg text-gray-500 dark:text-gray-400">
+        <A href="/docs/pages/introduction">Flowbite Svelte</A> is a free and open-source UI component library built using Svelte based on Flowbite and Tailwind CSS.
+      </p>
+      <p class="text-lg text-gray-500 dark:text-gray-400">By installing the package via NPM you will be able to build modern looking web applications fast by leveraging Svelte, Tailwind CSS and Flowbite using ready-made UI components like dropdowns, navbars, modals, and more.</p>
+    </div>
+
+    <div class="flex flex-col items-start pt-8 self-stretch">
+      <List tag="ul" class="mb-6 lg:mb-8 space-y-4 font-medium text-gray-900 dark:text-white" list="none" ulClass="">
+        {#each features as feature}
+          <Li icon class="gap-2">
+            <Check class="w-5 h-5 p-1 rounded-full bg-primary-100 dark:bg-gray-700 text-primary-700" />
+            {feature}
+          </Li>
+        {/each}
+      </List>
+
+      <div class="flex flex-row gap-4">
+        <Button href="/docs/pages/introduction" color="primary" class="gap-2">
+          Start building <ArrowRight />
+        </Button>
+        <Button href="https://github.com/themesberg/flowbite-svelte" color="light" class="w-auto dark:!text-gray-400">View on GitHub</Button>
+      </div>
+    </div>
+  </Row>
+
+  <Row image="bg-[url('/images/graphs.png')] dark:bg-[url('/images/graphs-dark.png')]" reversed contain>
+    <div class="text-red-500 flex flex-row gap-8">
+      <div class="flex flex-col items-center gap-2 font-medium text-gray-900 dark:text-gray-400">
+        <DarkMode size="lg" class="hidden dark:block dark:bg-gray-700" />
+        <Sun class="dark:hidden w-11 h-11 p-2 rounded-lg bg-primary-700 dark:bg-gray-700  text-white" />
+        Light
+      </div>
+      <div class="flex flex-col items-center gap-2 font-medium text-gray-400 dark:text-white">
+        <Moon class="hidden dark:block w-11 h-11 p-2 rounded-lg bg-primary-700" />
+        <DarkMode size="lg" class="dark:hidden bg-gray-100 dark:bg-gray-700 hover:bg-gray-200" />
+        Dark
+      </div>
+    </div>
+    <div class="flex flex-col items-start py-4 gap-4 self-stretch">
+      <H2>Dark mode integration</H2>
+      <p class="text-lg text-gray-500 dark:text-gray-400 mb-2">
+        Flowbite Svelte supports <A href="/docs/components/darkmode">dark mode</A> and can be easily integrated into your project by following the official documentation based on Svelte.
+      </p>
+      <p class="text-lg text-gray-500 dark:text-gray-400">Enabling dark mode will allow users to either select the preferred method (light or dark) or automatically switch based on the operating system settings.</p>
+    </div>
+    <List tag="ul" ulClass="" class="space-y-4 self-stretch font-medium text-gray-900 dark:text-white border-t dark:border-gray-700 pt-8" list="none">
+      <Li icon class="gap-2">
+        <Check class="w-5 h-5 p-1 rounded-full bg-primary-100 dark:bg-gray-700 text-primary-700" />
+        Increased accessibility based on room brightness
+      </Li>
+      <Li icon class="gap-2">
+        <Check class="w-5 h-5 p-1 rounded-full bg-primary-100 dark:bg-gray-700 text-primary-700" />
+        Better visibility for users with low vision
+      </Li>
+      <Li icon class="gap-2">
+        <Check class="w-5 h-5 p-1 rounded-full bg-primary-100 dark:bg-gray-700 text-primary-700" />
+        Improved readability for users with light sensitivity
+      </Li>
+    </List>
+    <a href="/docs/components/darkmode" class="flex items-center gap-4 text-primary-600 hover:underline font-medium">
+      Learn more how to integrate dark mode <ArrowRight />
+    </a>
+  </Row>
+
+  <Row image="bg-[url('/images/tailwind-code.png')] dark:bg-[url('/images/tailwind-code-dark.png')]" divide>
+    <div class="flex flex-col items-start gap-4 self-stretch">
+      <H2>Works with Tailwind CSS</H2>
+      <p class="text-lg text-gray-500 dark:text-gray-400">Flowbite Svelte uses the Tailwind CSS utility classes under the hood which means it will be easy to customize the appearance and specifications of the UI components directly from the HTML code.</p>
+      <p class="text-lg text-gray-500 dark:text-gray-400">
+        <A href="https://tailwindcss.com">Tailwind CSS</A> is a popular and open-source utility-first CSS framework that you can use to speed up the development of your front-end projects.
+      </p>
+      <p class="text-lg text-gray-500 dark:text-gray-400">
+        Flowbite Svelte is also based on the core <A href="https://flowbite.com">Flowbite</A> UI component library the also features interactive UI components like dropdowns, modals, navbars, and more.
+      </p>
+    </div>
+  </Row>
+</Section>

package/src/routes/landing/Components.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import Button from '$lib/buttons/Button.svelte';
+  import type { PageData } from '../$types';
+  import CompoCard from '../utils/CompoCard.svelte';
+  import Section from './utils/Section.svelte';
+
+  export let data: PageData;
+
+  let components = [...data.posts.forms, ...data.posts.components, ...data.posts.typography, ...data.posts.experimental].sort((a, b) => a.meta.component_title.localeCompare(b.meta.component_title));
+
+  const INIT_COUNT = 18;
+  let expanded: boolean = false;
+</script>
+
+<Section class="flex flex-col gap-8 sm:gap-12 lg:pt-24">
+  <div class="flex flex-col items-center gap-4 sm:gap-4">
+    <h2 class="tracking-tight font-extrabold text-3xl lg:text-4xl text-gray-900 dark:text-white">Svelte UI components</h2>
+    <p class="text-lg font-normal text-gray-500 dark:text-gray-400 max-w-3xl mx-auto text-center">
+      Explore the whole collection of <span class="font-medium text-gray-900 dark:text-white">
+        over {components.length} open-source
+      </span>
+      UI components and interactive elements built with Svelte and Flowbite
+    </p>
+  </div>
+
+  <div class="grid grid-cols-1 gap-4 sm:gap-8 sm:grid-cols-2 xl:grid-cols-3">
+    {#each components.slice(0, INIT_COUNT) as { path, meta: { dir, component_title, thumnailSize } } (dir + path)}
+      <CompoCard name={component_title} {thumnailSize} {dir} {path} />
+    {/each}
+    {#if expanded}
+      {#each components.slice(INIT_COUNT) as { path, meta: { dir, component_title, thumnailSize } } (dir + path)}
+        <CompoCard name={component_title} {thumnailSize} {dir} {path} />
+      {/each}
+    {/if}
+  </div>
+
+  {#if !expanded}
+    <div class="w-full flex justify-center mb-4">
+      <Button size="md" class="whitespace-nowrap hover:text-primary-600 focus:text-primary-600" color="alternative" on:click={() => (expanded = true)}>View all components</Button>
+    </div>
+  {/if}
+</Section>

package/src/routes/landing/Contributors.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import Avatar from '$lib/avatar/Avatar.svelte';
+  import Tooltip from '$lib/tooltips/Tooltip.svelte';
+  import { ChevronRightSolid } from 'flowbite-svelte-icons';
+  import Community from '../utils/icons/Community.svelte';
+  import type { PageData } from '../$types';
+  import Section from './utils/Section.svelte';
+
+  export let data: PageData;
+
+  let name: string;
+  function on_show(e: CustomEvent<any>) {
+    if (e?.target instanceof HTMLElement) {
+      name = e?.target?.dataset.name ?? '';
+    }
+  }
+</script>
+
+<Section class="lg:py-24">
+  <!-- containter -->
+  <div class="flex flex-col gap-12 items-center w-full max-w-7xl mx-auto">
+    <!-- heading -->
+    <div class="flex flex-col gap-4 items-center justify-center max-w-2xl">
+      <h2 class="tracking-tight text-center text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white">Community contributors</h2>
+      <p class="text-lg font-normal text-center">Join the open-source community by contributing to the Flowbite Svelte Library and become one of the highlighted members</p>
+    </div>
+    <!-- avatars -->
+    <div class="flex flex-col gap-3 max-w-5xl px-4 lg:px-8">
+      <div class="flex flex-wrap items-center justify-center gap-3">
+        {#if data?.contributors}
+          {#each data?.contributors || [] as contributor}
+            <a href={contributor.html_url} rel="nofollow noreferrer" target="_blank">
+              <Avatar data-name={contributor.login} src={contributor.avatar_url} class="w-8 h-8 sm:w-12 sm:h-12 lg:w-16 lg:h-16" />
+            </a>
+          {/each}
+        {/if}
+      </div>
+      <Tooltip triggeredBy="[data-name]" on:show={on_show}>{name}</Tooltip>
+    </div>
+    <div class="flex flex-row items-center justify-between w-full max-w-5xl lg:px-4">
+      <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 sm:gap-8 w-full p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
+        <div class="hidden lg:block lg:w-fit">
+          <Community />
+        </div>
+        <div class="flex flex-col w-full">
+          <h2 class="tracking-tight text-xl font-bold text-left text-gray-900 dark:text-white">Join the community</h2>
+          <p>Become a member of a community of developers supporting by Flowbite</p>
+        </div>
+        <a class="flex gap-2 items-center text-primary-700 text-base font-medium whitespace-nowrap hover:underline" href="http://github.com/themesberg/flowbite-svelte">
+          See our repository <ChevronRightSolid class="w-3 h-3" />
+        </a>
+      </div>
+    </div>
+  </div>
+</Section>

package/src/routes/landing/DesignFigma.svelte

@@ -0,0 +1,39 @@
+<script>
+  import Button from '$lib/buttons/Button.svelte';
+  import ArrowRight from '../utils/icons/ArrowRight.svelte';
+  import Figma from '../utils/icons/Figma.svelte';
+  import FlowbiteLogo from '../utils/icons/FlowbiteLogo.svelte';
+  import Section from './utils/Section.svelte';
+</script>
+
+<Section tinted class="lg:py-24">
+  <div class="mx-auto max-w-8xl items-start justify-between gap-24 py-1 grid grid-cols-1 lg:grid-cols-2">
+    <div class="flex flex-col gap-8">
+      <div class="flex flex-col items-start gap-6">
+        <h2 class="leading-none text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white">Design with Figma</h2>
+        <p class="text-lg">Track work across the enterprise through an open, collaborative platform. Link issues across Jira and ingest data from other software development tools.</p>
+      </div>
+      <div class="flex flex-col items-center gap-4">
+        <p class="self-stretch">Our design system is being used by a large number of devs:</p>
+        <div class="flex flex-col items-start gap-4 isolate self-stretch max-w-l">
+          <Button color="light" class="self-stretch max-w-lg !px-4 !justify-start gap-5 sm:gap-7" size="xl" href="https://www.figma.com/file/5pHMkriSz9q98zawojb4mx/flowbite-pro-figma-v2.5.0?node-id=18-0&t=X431WUvSP7jsPiEI-0">
+            <Figma /> Preview in Figma
+            <div class="ml-auto hidden sm:block"><ArrowRight /></div>
+          </Button>
+          <Button color="light" class="self-stretch max-w-lg !px-4 !justify-start gap-4 sm:gap-6" size="xl" href="https://flowbite.com/figma/">
+            <FlowbiteLogo /> Learn more
+            <div class="ml-auto hidden sm:block"><ArrowRight /></div>
+          </Button>
+        </div>
+      </div>
+    </div>
+    <div class="flex-col items-center justify-center hidden h-full lg:flex">
+      <div class="relative dark:hidden rounded-xl">
+        <img class="max-w-auto w-full" src="/images/figma.png" alt="Header" />
+      </div>
+      <div class="hidden relative dark:block">
+        <img class="max-w-auto rounded-xl w-full" src="/images/figma-dark.png" alt="Header" />
+      </div>
+    </div>
+  </div>
+</Section>

package/src/routes/landing/Featured.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import Dev from '../utils/icons/Dev.svelte';
+  import Reddit from '../utils/icons/Reddit.svelte';
+  import YouTubeFull from '../utils/icons/YouTubeFull.svelte';
+  import Hunt from '../utils/icons/Hunt.svelte';
+  import Combinator from '../utils/icons/Combinator.svelte';
+  import Section from './utils/Section.svelte';
+
+  const features = {
+    '#reddit': Reddit,
+    '#dev': Dev,
+    '#hunt': Hunt,
+    '#combinator': Combinator,
+    '#youtube': YouTubeFull
+  };
+</script>
+
+<Section>
+  <div class="flex flex-col gap-2">
+    <div class="mx-auto text-base tracking-tight lg:hidden mb-4">Featured in:</div>
+    <div class="flex flex-wrap items-center gap-8 justify-center lg:hidden">
+      {#each Object.entries(features) as [href, comp]}
+        <!-- a {href} --><svelte:component this={comp} /><!-- /a -->
+      {/each}
+    </div>
+    <div class="items-center gap-8 justify-center self-stretch py-2 hidden lg:flex flex-wrap">
+      <div class="text-base tracking-tight">Featured in:</div>
+      {#each Object.entries(features) as [href, comp]}
+        <!-- a {href} --><svelte:component this={comp} /><!-- /a -->
+      {/each}
+    </div>
+  </div>
+</Section>

package/src/routes/landing/GetStarted.svelte

@@ -0,0 +1,23 @@
+<script>
+  import Button from '$lib/buttons/Button.svelte';
+  import CopyCliboardInput from '../utils/CopyCliboardInput.svelte';
+  import ArrowRight from '../utils/icons/ArrowRight.svelte';
+  import Section from './utils/Section.svelte';
+</script>
+
+<Section tinted class="lg:py-24">
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col flex-start gap-4">
+      <h2 class="tracking-tight text-3xl lg:text-4xl font-extrabold text-center text-gray-900 dark:text-white">Get started</h2>
+      <p class="max-w-2xl text-lg text-center">Explore our Svelte UI components – easily create clean, accessible web designs. Begin your journey and enhance your projects today.</p>
+    </div>
+    <div class="mt-4 md:mt-5 sm:flex justify-center sm:justify-start1 w-full">
+      <div class="flex flex-col sm:flex-row mx-0 gap-4 sm:gap-6 items-center max-w-2xl">
+        <CopyCliboardInput class="bg-white md:!w-80" />
+        <Button size="lg" class="gap-2 sm:max-w-sm w-full md:w-fit whitespace-nowrap hover:bg-primary-800" href="/docs/components/accordion" color="primary">
+          See our docs <ArrowRight />
+        </Button>
+      </div>
+    </div>
+  </div>
+</Section>

package/src/routes/landing/Hero.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import Button from '$lib/buttons/Button.svelte';
+  import CopyCliboardInput from '../utils/CopyCliboardInput.svelte';
+  import ArrowRight from '../utils/icons/ArrowRight.svelte';
+</script>
+
+<section class="overflow-hidden mx-auto max-w-8xl flex flex-col pt-6 sm:pt-8 lg:pt-16 pb-6 sm:pb-8 lg:pb-24 px-4 lg:px-20">
+  <div class="flex flex-col gap-20">
+    <div class="flex items-center gap-10">
+      <div class="flex flex-col justify-start gap-10">
+        <div class="flex flex-col gap-4 lg:gap-6 text-left">
+          <h1 class="text-4xl lg:text-6xl leading-none font-extrabold text-gray-900 dark:text-white max-w-xl">
+            <span class="block1 xl:inline">Speed up your web development with</span>
+            <span class="block1 text-primary-700 dark:text-primary-700 xl:inline">Flowbite Svelte</span>
+          </h1>
+          <p class="text-lg lg:text-xl leading-normal text-gray-500 dark:text-gray-400 max-w-xl">Flowbite Svelte is an official Flowbite component library for Svelte. All interactivities are handled by Svelte.</p>
+          <div class="mt-4 md:mt-5 sm:flex justify-center sm:justify-start">
+            <div class="flex flex-row mx-0 gap-4 sm:gap-6 items-center max-w-2xl">
+              <CopyCliboardInput />
+              <Button size="lg" class="gap-2 max-w-sm md:w-fit whitespace-nowrap hover:bg-primary-800" href="/docs/pages/quickstart" color="primary">
+                Get started <ArrowRight />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="p-0 hidden xl:block">
+        <div class="relative dark:hidden">
+          <img class="max-w-2xl" src="/images/gallery.png" alt="Header" />
+        </div>
+        <div class="hidden relative dark:block">
+          <img class="max-w-2xl" src="/images/gallery-dark.png" alt="Header" />
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

package/src/routes/landing/SocialProof.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import Avatar from '$lib/avatar/Avatar.svelte';
+  import Discord from '../utils/icons/Discord.svelte';
+  import Figma from '../utils/icons/Figma.svelte';
+  import GitHub from '../utils/icons/GitHub.svelte';
+  import Npm from '../utils/icons/Npm.svelte';
+  import Quote from '../utils/icons/Quote.svelte';
+  import Section from './utils/Section.svelte';
+  import { page } from '$app/stores';
+  import type { PageData } from '../$types';
+
+  let data: PageData = $page.data;
+
+  let github = data.github?.['stargazers_count'] ?? 0;
+  let npm = data.npm?.['downloads'] ?? 0;
+  let figma = 5400;
+  let discord = data.discord?.['approximate_presence_count'] ?? 0;
+
+  function format(x: number) {
+    return x.toLocaleString('en', { notation: 'standard' });
+  }
+</script>
+
+<Section>
+  <div class="flex flex-col lg:flex-row gap-4 lg:gap-20">
+    <div class="flex flex-col items-start justify-center gap-3 md:gap-5 w-full lg:mb-0 mb-4">
+      <div class="flex flex-col items-start justify-center gap-6 w-full">
+        <div class="flex flex-col items-start py-2">
+          <Quote />
+        </div>
+        <div class="flex flex-col items-start justify-center gap-5 max-w-2xl pr-8 self-stretch">
+          <p class="leading-relaxed text-lg font-medium text-gray-900 dark:text-white">Flowbite provides a robust set of design tokens and components based on the popular Tailwind CSS framework. From the most used UI components like forms and navigation bars to the whole app screens designed both for desktop and mobile, this UI kit provides a solid foundation for any project.</p>
+          <p class="leading-relaxed text-lg font-medium text-gray-900 dark:text-white">Designing with Figma components that can be easily translated to the utility classes of Tailwind CSS is a huge timesaver!</p>
+        </div>
+        <div class="flex flex-row items-center gap-3.5 self-stretch">
+          <Avatar src="/images/eugene.jpg" size="xs" />
+          <div class="flex items-center gap-3">
+            <span class="leading-tight font-semibold text-gray-900 dark:text-white">Eugene Fedorenko</span>
+            <span class="leading-tight font-semibold text-gray-900 dark:text-white">/</span>
+            <span class="leading-tight font-normal text-sm">Lead designer at Wildbit</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-col items-start gap-6 md:gap-3 w-full">
+      <div class="flex flex-row items-start md:justify-between md:pr-16 lg:pr-0 lg:justify-end gap-2 md:gap-2 lg:gap-2 self-stretch">
+        <a href="https://github.com/themesberg/flowbite-svelte" class="flex flex-col items-start gap-4 text-gray-400 w-full max-w-[272px] lg:py-6 lg:px-8 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg">
+          <GitHub />
+          <div class="flex flex-col items-start gap-2">
+            <p class="leading-tight text-2xl font-bold text-gray-900 dark:text-white">{format(github)}</p>
+            <p class="text-sm md:text-base text-gray-500 dark:text-gray-400">Stars on Github</p>
+          </div>
+        </a>
+        <a href="https://npmjs.com/package/flowbite-svelte" class="flex flex-col items-start gap-4 text-gray-400 w-full max-w-[272px] lg:py-6 lg:px-8 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg">
+          <Npm />
+          <div class="flex flex-col mt-1 items-start gap-2">
+            <p class="leading-tight text-2xl font-bold text-gray-900 dark:text-white">{format(npm)}</p>
+            <p class="text-sm md:text-base text-gray-500 dark:text-gray-400">Downloads on NPM</p>
+          </div>
+        </a>
+      </div>
+      <div class="flex flex-row items-start md:justify-between md:pr-16 lg:pr-0 lg:justify-end gap-2 md:gap-12 lg:gap-2 self-stretch">
+        <a href="https://www.figma.com/community/file/1179442320711977498" class="flex flex-col items-start gap-4 text-gray-400 w-full max-w-[272px] lg:py-6 lg:px-8 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg">
+          <Figma />
+          <div class="flex flex-col items-start gap-2">
+            <p class="leading-tight text-2xl font-bold text-gray-900 dark:text-white">{format(figma)}</p>
+            <p class="text-sm md:text-base text-gray-500 dark:text-gray-400">Figma duplicates</p>
+          </div>
+        </a>
+        <a href="https://discord.gg/4eeurUVvTy" rel="nofollow" class="flex flex-col items-start gap-4 text-gray-400 w-full max-w-[272px] lg:py-6 lg:px-8 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg">
+          <Discord />
+          <div class="flex flex-col items-start gap-2">
+            <p class="leading-tight text-2xl font-bold text-gray-900 dark:text-white">{format(discord)}</p>
+            <p class="text-sm md:text-base text-gray-500 dark:text-gray-400">Discord members online</p>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</Section>

package/src/routes/landing/utils/A.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  export let href: string;
+</script>
+
+<a {href} class="underline text-lg font-medium hover:no-underline text-gray-900 dark:text-white"><slot /></a>

package/src/routes/landing/utils/H2.svelte

@@ -0,0 +1 @@
+<h2 class="leading-tight text-3xl lg:text-4xl font-extrabold text-gray-900 dark:text-white"><slot /></h2>

package/src/routes/landing/utils/Row.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let image: string;
+  export let reversed: boolean = false;
+  export let divide: boolean = false;
+  export let contain: boolean = false;
+  export let h_full: boolean = false;
+</script>
+
+<div class="flex py-6 lg:py-10 lg:gap-16 self-stretch {reversed ? 'flex-row-reverse' : 'flex-row'}">
+  <div class="hidden lg:flex w-1/2 items-center">
+    <div class:min-h-full={h_full} class:h-96={!h_full} class="flex-grow bg-no-repeat {contain ? 'bg-contain' : 'bg-cover'} rounded-lg {image}" />
+  </div>
+  <div class:divide-y={divide} class="flex flex-col items-start gap-4 lg:gap-8 flex-grow w-1/2 dark:divide-gray-700">
+    <slot />
+  </div>
+</div>

package/src/routes/landing/utils/Section.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  export let tinted: boolean = false;
+</script>
+
+<section class={tinted ? 'bg-gray-50 dark:bg-gray-800' : ''}>
+  <div class="mx-auto max-w-8xl px-4 lg:px-20 py-8 {$$props.class ?? ''}">
+    <slot />
+  </div>
+</section>

package/src/routes/layouts/component/+page.svelte

@@ -0,0 +1,44 @@
+<script context="module">
+  import code from './code.svelte';
+  import h2 from './h2.svelte';
+  import h3 from './h3.svelte';
+  export { h2, h3, code };
+</script>
+
+<script>
+  import Footer from '../../utils/Footer.svelte';
+  import MetaTag from '../../utils/MetaTag.svelte';
+  import Newsletter from '../../utils/Newsletter.svelte';
+  import PageHeadSection from '../../utils/PageHeadSection.svelte';
+  import Paging from '../../utils/Paging.svelte';
+  import Toc from '../../utils/Toc.svelte';
+  import { extract } from './Anchor.svelte';
+
+  export let /** @type {string} */ title;
+  export let /** @type {string} */ breadcrumb_title;
+  export let /** @type {string} */ component_title = '';
+  export let /** @type {string} */ dir;
+  export let /** @type {string} */ description;
+  export let /** @type {string} */ layout = '';
+
+  // calm down `unused export property` warrning
+  layout;
+  component_title;
+</script>
+
+<MetaTag {breadcrumb_title} {title} {dir} {description} />
+
+<div class="flex w-full">
+  <div class="flex flex-col max-w-4xl mx-auto px-4 min-w-0 pt-6 lg:px-8 lg:pt-8 pb:12 xl:pb-24 lg:pb-16 divide-y divide-gray-200 dark:divide-gray-800">
+    <PageHeadSection {dir} {breadcrumb_title} {title} {description} />
+    <div id="mainContent" class="py-8">
+      <slot />
+      <Paging />
+    </div>
+    <Newsletter />
+    <Footer />
+  </div>
+  <Toc {extract} headingSelector="#mainContent > :where(h2, h3)" />
+</div>
+
+

package/src/routes/layouts/component/Anchor.svelte

@@ -0,0 +1,29 @@
+<script lang="ts" context="module">
+  import type { LinkType } from '$lib/types';
+
+  export function extract(x: HTMLElement): LinkType {
+    if (x.firstElementChild) return { rel: x.tagName, href: '#' + x.firstElementChild?.id, name: x?.firstChild?.nodeValue ?? '' };
+    return { name: '' };
+  }
+</script>
+
+<script lang="ts">
+  import { twMerge } from 'tailwind-merge';
+
+  export let tag: string;
+
+  let content: string, slug: string;
+
+  function init(node: HTMLElement) {
+    content = node.firstChild?.nodeValue ?? '';
+    slug = content.replace(/\s/g, '_');
+  }
+
+  $: elemClass = twMerge('relative group', $$props.class);
+</script>
+
+<svelte:element this={tag} {...$$restProps} class={elemClass} use:init>
+  <slot />
+  <span id={slug} class="absolute -top-[140px]" />
+  <a class="ml-2 text-primary-700 opacity-0 transition-opacity dark:text-primary-700 group-hover:opacity-100" href="#{slug}" aria-label="Link to this section: {content}"> # </a>
+</svelte:element>

package/src/routes/layouts/component/code.svelte

@@ -0,0 +1 @@
+<code class="text-primary-700 dark:text-primary-700"><slot /></code>

package/src/routes/layouts/component/h2.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Anchor from './Anchor.svelte';
+</script>
+
+<Anchor tag="h2" class="text-gray-900 dark:text-white leading-tight text-2xl font-bold"><slot /></Anchor>

package/src/routes/layouts/component/h3.svelte

@@ -0,0 +1,5 @@
+<script>
+  import Anchor from './Anchor.svelte';
+</script>
+
+<Anchor tag="h3" class="text-gray-900 dark:text-white leading-tight text-xl font-bold"><slot /></Anchor>

package/src/routes/layouts/testLayout/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+  // import 'prism-themes/themes/prism-holi-theme.css';
+</script>
+
+<slot />

package/src/routes/utils/AlgoliaSearch.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { browser } from '$app/environment';
+  import { onMount } from 'svelte';
+  import docsearch from '@docsearch/js';
+
+  let searchContainer: HTMLElement;
+
+  onMount(() => {
+    if (browser) {
+      // Algolia docsearch
+      docsearch({
+        container: searchContainer,
+        appId: 'JWUQIZ9PGE',
+        indexName: 'flowbite-svelte',
+        apiKey: 'db6396bd138ab613540d2a2bc07f958d',
+        placeholder: 'Search documentation'
+      });
+    }
+  });
+</script>
+
+<div bind:this={searchContainer} id="docsearch" class="ml-3 xl:pl-4" />