flotilla/src/routes/home/+page.svelte

<script lang="ts">
  import {onMount} from "svelte"
  import {goto} from "$app/navigation"
  import AddCircle from "@assets/icons/add-circle.svg?dataurl"
  import ChatRound from "@assets/icons/chat-round.svg?dataurl"
  import Icon from "@lib/components/Icon.svelte"
  import Link from "@lib/components/Link.svelte"
  import Button from "@lib/components/Button.svelte"
  import CardButton from "@lib/components/CardButton.svelte"
  import {goToSpace} from "@app/routes"
  import {PLATFORM_NAME, PLATFORM_RELAYS, PLATFORM_LOGO} from "@app/env"

  const openChat = () => goto("/chat")

  onMount(async () => {
    if (PLATFORM_RELAYS.length > 0) {
      goToSpace(PLATFORM_RELAYS[0])
    }
  })
</script>

<div class="hero relative min-h-screen overflow-auto pb-8">
  <!-- Soft brand-color blobs for a warm, playful backdrop -->
  <div class="pointer-events-none absolute inset-0 overflow-hidden">
    <div class="bg-primary/10 absolute top-10 -left-20 size-72 rounded-full blur-3xl"></div>
    <div class="bg-secondary/10 absolute right-[-4rem] bottom-10 size-72 rounded-full blur-3xl">
    </div>
  </div>
  <div class="hero-content relative">
    <div class="column content gap-4">
      <div class="mb-2 flex flex-col items-center gap-3">
        <img
          src={PLATFORM_LOGO}
          alt={PLATFORM_NAME}
          class="shadow-soft ring-primary/20 size-20 rounded-3xl object-cover ring-4 motion-safe:animate-float" />
        <h1 class="font-display text-2xl font-semibold opacity-60">Welcome to</h1>
        <h1 class="brand text-6xl">{PLATFORM_NAME}</h1>
      </div>
      <div class="col-3">
        <Link href="/spaces">
          <CardButton class="btn-neutral">
            {#snippet icon()}
              <Icon icon={AddCircle} size={7} class="text-primary" />
            {/snippet}
            {#snippet title()}
              <div>Add a space</div>
            {/snippet}
            {#snippet info()}
              <div>Use an invite link, or create your own space.</div>
            {/snippet}
          </CardButton>
        </Link>
        <Button onclick={openChat}>
          <CardButton class="btn-neutral">
            {#snippet icon()}
              <Icon icon={ChatRound} size={7} class="text-secondary" />
            {/snippet}
            {#snippet title()}
              <div>Start a conversation</div>
            {/snippet}
            {#snippet info()}
              <div>Use nostr's encrypted group chats to stay in touch.</div>
            {/snippet}
          </CardButton>
        </Button>
      </div>
    </div>
  </div>
</div>