70 lines
2.6 KiB
Svelte
70 lines
2.6 KiB
Svelte
|
<script lang="ts">
|
||
|
|
import { DEMO_BOOKING_URL } from "$lib/site";
|
||
|
|
import { i18n } from "$lib/i18n";
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<section
|
||
|
|
class="relative flex min-h-[70vh] flex-col justify-center overflow-hidden bg-background pb-8"
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
class="pointer-events-none absolute inset-0 bg-gradient-to-b from-accent/50 via-background to-muted"
|
||
|
|
aria-hidden="true"
|
||
|
|
></div>
|
||
|
|
<div
|
||
|
|
class="bg-tiled-pattern dark:bg-tiled-pattern-dark pointer-events-none absolute inset-x-0 bottom-0 bg-repeat opacity-90"
|
||
|
|
style="top: 4rem; mask-image: linear-gradient(to bottom, black 0%, transparent 55%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 55%, transparent 100%);"
|
||
|
|
aria-hidden="true"
|
||
|
|
></div>
|
||
|
|
<div class="relative container mx-auto px-4 pt-28 sm:px-6 lg:px-8">
|
||
|
|
<div class="mx-auto max-w-3xl text-center">
|
||
|
|
<p
|
||
|
|
class="mb-5 inline-flex items-center gap-2 text-2xl font-bold tracking-tight text-text sm:text-3xl"
|
||
|
|
>
|
||
|
|
<img
|
||
|
|
src="/descrybe_logo.png"
|
||
|
|
alt=""
|
||
|
|
width="40"
|
||
|
|
height="40"
|
||
|
|
class="h-9 w-9 sm:h-10 sm:w-10"
|
||
|
|
/>
|
||
|
|
<span>{i18n.t("app.name")}</span>
|
||
|
|
</p>
|
||
|
|
<p class="body-responsive mb-4 font-medium text-text-muted">
|
||
|
|
{i18n.t("home.hero.tagline")}
|
||
|
|
</p>
|
||
|
|
<h1 class="h1-responsive font-extrabold tracking-tight text-text">
|
||
|
|
{i18n.t("home.hero.title")}
|
||
|
|
</h1>
|
||
|
|
<p class="h3-responsive mt-6 text-text-muted">
|
||
|
|
{i18n.t("home.hero.lead")}
|
||
|
|
</p>
|
||
|
|
<div class="mt-10 flex flex-wrap items-center justify-center gap-3 sm:gap-x-4">
|
||
|
|
<a
|
||
|
|
href="#how-it-works"
|
||
|
|
class="rounded-md bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground shadow-sm transition hover:opacity-90 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
|
||
|
|
>
|
||
|
|
{i18n.t("home.hero.learnMore")}
|
||
|
|
</a>
|
||
|
|
<a
|
||
|
|
href={DEMO_BOOKING_URL}
|
||
|
|
target="_blank"
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
class="rounded-md border border-border bg-surface/70 px-4 py-2.5 text-sm leading-6 font-semibold text-text backdrop-blur-sm transition hover:bg-accent focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
|
||
|
|
>
|
||
|
|
{i18n.t("home.hero.apply")} <span aria-hidden="true">→</span>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<div class="mt-10 flex flex-col items-center justify-center">
|
||
|
|
<p class="body-responsive mb-3 font-medium text-text-muted">{i18n.t("home.hero.supportedBy")}</p>
|
||
|
|
<img
|
||
|
|
src="/MS_Startups_Badge_Dark.png"
|
||
|
|
alt={i18n.t("home.hero.msAlt")}
|
||
|
|
width="180"
|
||
|
|
height="90"
|
||
|
|
class="block opacity-90 dark:opacity-100"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|