Coming Soon

<script setup lang="ts">
import { ref } from 'vue'
import CountdownTimer from './components/CountdownTimer.vue'
import WaitlistForm from './components/WaitlistForm.vue'
import SocialLinks from './components/SocialLinks.vue'

// Set your real launch date here, e.g. new Date('2026-11-03T09:00:00Z').
// The demo counts down to a date 23 days and 7 hours from when the page loads.
const launch = new Date(Date.now() + (23 * 24 + 7) * 3600 * 1000 + 42 * 60 * 1000)
const launched = ref(false)

const teasers = ['Offline-first notes', 'End-to-end encrypted', 'Handwriting search', 'Shared notebooks']
</script>

<template>
  <div class="relative isolate flex min-h-screen flex-col overflow-hidden bg-gradient-to-b from-sky-50 via-white to-white text-gray-900 dark:from-slate-950 dark:via-gray-950 dark:to-gray-950 dark:text-white">
    <!-- drawn sky: clouds in light mode, stars in dark mode -->
    <div aria-hidden="true" class="pointer-events-none absolute inset-0 -z-10">
      <div class="absolute -top-40 left-1/2 size-[44rem] -translate-x-1/2 rounded-full bg-sky-300/30 blur-3xl dark:bg-sky-500/15" />
      <div class="hidden sm:block dark:!hidden">
      <svg class="absolute left-[6%] top-28 w-56 text-white drop-shadow-sm" viewBox="0 0 200 80" fill="currentColor"><path d="M40 70a30 30 0 0 1 4-59 36 36 0 0 1 66-2 26 26 0 0 1 44 12 24 24 0 0 1 6 49z" /></svg>
      <svg class="absolute right-[4%] top-64 w-72 text-white/90 drop-shadow-sm" viewBox="0 0 200 80" fill="currentColor"><path d="M40 70a30 30 0 0 1 4-59 36 36 0 0 1 66-2 26 26 0 0 1 44 12 24 24 0 0 1 6 49z" /></svg>
      </div>
      <svg class="absolute inset-0 hidden size-full dark:block" preserveAspectRatio="none">
        <circle v-for="n in 60" :key="n" :cx="`${(n * 37) % 100}%`" :cy="`${(n * 53) % 70}%`" :r="n % 7 === 0 ? 1.6 : 0.9" class="fill-white" :opacity="0.2 + ((n * 13) % 10) / 16" />
      </svg>
    </div>

    <header class="mx-auto flex w-full max-w-5xl items-center justify-between px-5 py-6">
      <span class="flex items-center gap-2.5 text-lg font-semibold">
        <span class="grid size-9 place-items-center rounded-xl bg-sky-600 text-white shadow-md shadow-sky-600/30" aria-hidden="true">
          <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18a4 4 0 0 1-.5-8A6 6 0 0 1 18 9a4.5 4.5 0 0 1-.5 9z" /></svg>
        </span>
        Cirrus
      </span>
      <SocialLinks class="hidden sm:flex" />
    </header>

    <main class="mx-auto flex w-full max-w-2xl flex-1 flex-col items-center justify-center px-5 pb-16 pt-6 text-center sm:pt-10">
      <p class="inline-flex items-center gap-2 rounded-full border border-sky-200 bg-white/70 px-3 py-1 text-xs font-semibold text-sky-700 dark:border-sky-400/30 dark:bg-sky-400/10 dark:text-sky-300">
        <span class="relative flex size-2"><span class="absolute inline-flex size-full animate-ping rounded-full bg-sky-400 opacity-75 motion-reduce:hidden" /><span class="relative inline-flex size-2 rounded-full bg-sky-500" /></span>
        Private beta · opening soon
      </p>
      <h1 class="mt-6 text-4xl font-bold tracking-tight text-balance sm:text-6xl">
        Notes that feel as light as <span class="text-sky-600 dark:text-sky-400">thinking</span>
      </h1>
      <p class="mt-5 max-w-lg text-lg text-pretty text-gray-600 dark:text-gray-300">
        Cirrus is a fast, private notebook that works offline and syncs everywhere. Join the waitlist to get early access and founder pricing.
      </p>

      <div class="mt-10 w-full">
        <p v-if="launched" class="text-2xl font-bold text-sky-600 dark:text-sky-400" role="status">We're live! Check your inbox.</p>
        <CountdownTimer v-else :target="launch" @done="launched = true" />
      </div>

      <div class="mt-10 w-full max-w-lg">
        <WaitlistForm />
      </div>

      <ul class="mt-10 flex flex-wrap justify-center gap-2" aria-label="Coming at launch">
        <li v-for="t in teasers" :key="t" class="rounded-full bg-white/70 px-3 py-1.5 text-xs font-medium text-gray-700 ring-1 ring-gray-200 dark:bg-white/5 dark:text-gray-300 dark:ring-white/10">{{ t }}</li>
      </ul>
    </main>

    <footer class="mx-auto flex w-full max-w-5xl flex-col items-center gap-4 border-t border-gray-200/70 px-5 py-6 sm:flex-row sm:justify-between dark:border-white/10">
      <p class="text-sm text-gray-500 dark:text-gray-400">© {{ new Date().getFullYear() }} Cirrus Labs · a fictional company</p>
      <SocialLinks class="sm:hidden" />
      <a href="#" class="text-sm text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">Press &amp; partnerships</a>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'

const props = defineProps<{ target: Date }>()
const emit = defineEmits<{ done: [] }>()

const now = ref(Date.now())
let timer: ReturnType<typeof setInterval> | undefined

onMounted(() => {
  timer = setInterval(() => {
    now.value = Date.now()
    if (remaining.value <= 0 && timer) {
      clearInterval(timer)
      emit('done')
    }
  }, 1000)
})
onBeforeUnmount(() => timer && clearInterval(timer))

const remaining = computed(() => Math.max(0, props.target.getTime() - now.value))
const parts = computed(() => {
  const s = Math.floor(remaining.value / 1000)
  return [
    { label: 'Days', value: Math.floor(s / 86400) },
    { label: 'Hours', value: Math.floor((s % 86400) / 3600) },
    { label: 'Minutes', value: Math.floor((s % 3600) / 60) },
    { label: 'Seconds', value: s % 60 },
  ]
})
// Announced to screen readers only once, not every second.
const summary = computed(() => {
  const [d, h] = parts.value
  return `Launching in ${d!.value} days and ${h!.value} hours, on ${props.target.toLocaleDateString(undefined, { dateStyle: 'long' })}.`
})
const pad = (n: number) => String(n).padStart(2, '0')
</script>

<template>
  <div>
    <p class="sr-only">{{ summary }}</p>
    <ol class="grid grid-cols-4 gap-2 sm:gap-4" aria-hidden="true">
      <li
        v-for="p in parts"
        :key="p.label"
        class="rounded-2xl border border-sky-200/70 bg-white/70 px-2 py-4 text-center shadow-sm backdrop-blur sm:px-4 sm:py-5 dark:border-white/10 dark:bg-white/5"
      >
        <span class="block font-mono text-3xl font-bold tabular-nums tracking-tight text-gray-900 sm:text-5xl dark:text-white">{{ pad(p.value) }}</span>
        <span class="mt-1 block text-[11px] font-medium uppercase tracking-wider text-gray-500 sm:text-xs dark:text-gray-400">{{ p.label }}</span>
      </li>
    </ol>
  </div>
</template>

<script setup lang="ts">
// Generic icons so the template carries no third-party logos. Swap in your networks' official marks.
export interface SocialLink {
  label: string
  href: string
  icon: string
}

withDefaults(defineProps<{ links?: SocialLink[] }>(), {
  links: () => [
    { label: 'Follow us for updates', href: '#', icon: 'M16 12a4 4 0 1 1-8 0 4 4 0 0 1 8 0zM16 12v1.5a2.5 2.5 0 0 0 5 0V12a9 9 0 1 0-3.5 7.1' },
    { label: 'Join the community chat', href: '#', icon: 'M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z' },
    { label: 'Watch the preview video', href: '#', icon: 'M3 6h18v12H3zM10 9.5v5l4.5-2.5-4.5-2.5z' },
    { label: 'Read the build log', href: '#', icon: 'M5 5a14 14 0 0 1 14 14M5 11a8 8 0 0 1 8 8M6 19a1 1 0 1 0 0-.01' },
  ],
})
</script>

<template>
  <ul class="flex items-center gap-2">
    <li v-for="l in links" :key="l.label">
      <a
        :href="l.href"
        :aria-label="l.label"
        :title="l.label"
        class="grid size-10 place-items-center rounded-full border border-gray-200 bg-white/70 text-gray-600 transition hover:border-sky-300 hover:text-sky-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 dark:border-white/10 dark:bg-white/5 dark:text-gray-300 dark:hover:border-sky-400/50 dark:hover:text-sky-300"
      >
        <svg viewBox="0 0 24 24" class="size-5" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path :d="l.icon" /></svg>
      </a>
    </li>
  </ul>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{ join: [email: string] }>()

const email = ref('')
const error = ref('')
const loading = ref(false)
const position = ref<number | null>(null)

async function submit() {
  const value = email.value.trim()
  if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    error.value = value ? 'Please check that email address.' : 'Enter your email to join the waitlist.'
    return
  }
  error.value = ''
  loading.value = true
  // Replace with a call to your email provider or backend.
  await new Promise((r) => setTimeout(r, 800))
  loading.value = false
  position.value = 1284 + Math.floor(Math.random() * 40)
  emit('join', value)
}
</script>

<template>
  <div>
    <form v-if="position === null" novalidate class="w-full" @submit.prevent="submit">
      <div class="flex flex-col gap-3 sm:flex-row sm:rounded-2xl sm:bg-white sm:p-1.5 sm:shadow-lg sm:shadow-sky-900/5 sm:ring-1 sm:ring-gray-200 sm:focus-within:ring-2 sm:focus-within:ring-sky-500 sm:dark:bg-white/5 sm:dark:ring-white/10 sm:dark:focus-within:ring-sky-400">
        <label for="waitlist-email" class="sr-only">Email address</label>
        <input
          id="waitlist-email"
          v-model="email"
          type="email"
          autocomplete="email"
          placeholder="you@example.com"
          :aria-invalid="!!error"
          aria-describedby="waitlist-msg"
          class="min-w-0 flex-1 rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 placeholder:text-gray-400 focus:border-sky-500 focus:outline-none focus:ring-4 focus:ring-sky-500/15 sm:border-transparent sm:bg-transparent sm:focus:border-transparent sm:focus:ring-0 dark:border-white/15 dark:bg-white/5 dark:text-white dark:placeholder:text-gray-500 sm:dark:border-transparent sm:dark:bg-transparent"
        >
        <button
          type="submit"
          :disabled="loading"
          class="rounded-xl bg-sky-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-sky-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 disabled:opacity-70"
        >{{ loading ? 'Joining…' : 'Join the waitlist' }}</button>
      </div>
      <p id="waitlist-msg" class="mt-3 text-sm" :class="error ? 'font-medium text-rose-600 dark:text-rose-400' : 'text-gray-500 dark:text-gray-400'" aria-live="polite">
        {{ error || 'One email when we launch. No spam, unsubscribe any time.' }}
      </p>
    </form>

    <div v-else role="status" class="flex items-start gap-4 rounded-2xl border border-sky-200 bg-sky-50 p-5 text-left dark:border-sky-500/30 dark:bg-sky-500/10">
      <span class="grid size-10 shrink-0 place-items-center rounded-full bg-sky-600 text-white" aria-hidden="true">
        <svg viewBox="0 0 20 20" class="size-5" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 10.5l3 3 7-7" /></svg>
      </span>
      <div>
        <p class="font-semibold text-gray-900 dark:text-white">You're on the list, number {{ position.toLocaleString() }}.</p>
        <p class="mt-1 text-sm text-gray-600 dark:text-gray-300">We'll email {{ email.trim() }} the moment doors open. Share your invite link to move up the queue.</p>
      </div>
    </div>
  </div>
</template>