Add login landing page
This commit is contained in:
Tom Trappmann
@@ -1,2 +1,7 @@
|
|||||||
@import "tailwindcss";
|
@import "tailwindcss";
|
||||||
@import "@nuxt/ui";
|
@import "@nuxt/ui";
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap");
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: "Sora", "Avenir Next", "Trebuchet MS", sans-serif;
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,15 +1,120 @@
|
|||||||
<template>
|
<template>
|
||||||
<UDashboardPanel id="home">
|
<div class="relative min-h-screen overflow-hidden bg-slate-950 text-white">
|
||||||
<template #header>
|
<div class="pointer-events-none absolute inset-0">
|
||||||
<UDashboardNavbar title="Home">
|
<div class="absolute -left-32 top-24 h-80 w-80 rounded-full bg-emerald-400/20 blur-3xl" />
|
||||||
<template #leading>
|
<div class="absolute -right-40 top-10 h-96 w-96 rounded-full bg-cyan-400/20 blur-3xl" />
|
||||||
<UDashboardSidebarCollapse />
|
<div class="absolute bottom-0 left-1/3 h-72 w-72 rounded-full bg-sky-500/10 blur-[110px]" />
|
||||||
</template>
|
<div class="absolute inset-0 bg-[radial-gradient(circle_at_top,_rgba(15,23,42,0.2),_rgba(2,6,23,0.9))]" />
|
||||||
</UDashboardNavbar>
|
</div>
|
||||||
</template>
|
|
||||||
<template #body>
|
<div class="relative mx-auto flex min-h-screen max-w-6xl flex-col justify-center gap-12 px-6 py-12 lg:flex-row lg:items-center">
|
||||||
<div class="p-4">
|
<section class="flex-1 space-y-6 animate-rise">
|
||||||
|
<div class="inline-flex items-center gap-3 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs uppercase tracking-[0.2em] text-white/70">
|
||||||
|
<span class="h-2 w-2 rounded-full bg-emerald-400 shadow-[0_0_16px_rgba(52,211,153,0.9)]" />
|
||||||
|
Shift-Ready
|
||||||
|
</div>
|
||||||
|
<h1 class="text-4xl font-semibold leading-tight sm:text-5xl">
|
||||||
|
Keep every shift aligned, effortless, and on time.
|
||||||
|
</h1>
|
||||||
|
<p class="max-w-xl text-base text-white/70">
|
||||||
|
Nautilus DeskTime is the calm command center for employee schedules. Secure access keeps the crew in sync while the app does the heavy lifting.
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap items-center gap-4 text-sm text-white/70">
|
||||||
|
<div class="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1">
|
||||||
|
<span class="h-1.5 w-1.5 rounded-full bg-emerald-300" />
|
||||||
|
Live shift views
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1">
|
||||||
|
<span class="h-1.5 w-1.5 rounded-full bg-sky-300" />
|
||||||
|
Rapid handoffs
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3 py-1">
|
||||||
|
<span class="h-1.5 w-1.5 rounded-full bg-cyan-300" />
|
||||||
|
Role clarity
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="flex w-full max-w-md flex-1 items-center justify-center">
|
||||||
|
<div class="w-full rounded-3xl border border-white/10 bg-white/10 p-8 shadow-[0_30px_60px_rgba(2,6,23,0.6)] backdrop-blur animate-rise-delayed">
|
||||||
|
<div class="space-y-2">
|
||||||
|
<p class="text-sm uppercase tracking-[0.3em] text-white/60">Welcome back</p>
|
||||||
|
<h2 class="text-2xl font-semibold">Log in to your shift hub</h2>
|
||||||
|
<p class="text-sm text-white/60">Use your company email and password to continue.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form class="mt-8 space-y-5">
|
||||||
|
<label class="block space-y-2 text-sm text-white/70">
|
||||||
|
<span>Email address</span>
|
||||||
|
<input
|
||||||
|
class="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-base text-white placeholder:text-white/40 focus:border-emerald-300 focus:outline-none focus:ring-2 focus:ring-emerald-300/40"
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="you@company.com"
|
||||||
|
autocomplete="email"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
<label class="block space-y-2 text-sm text-white/70">
|
||||||
|
<span>Password</span>
|
||||||
|
<input
|
||||||
|
class="w-full rounded-2xl border border-white/10 bg-white/5 px-4 py-3 text-base text-white placeholder:text-white/40 focus:border-cyan-300 focus:outline-none focus:ring-2 focus:ring-cyan-300/40"
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
placeholder="••••••••"
|
||||||
|
autocomplete="current-password"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="flex items-center justify-between text-sm text-white/60">
|
||||||
|
<label class="inline-flex items-center gap-2">
|
||||||
|
<input class="h-4 w-4 rounded border-white/20 bg-white/10 text-emerald-300 focus:ring-emerald-300/40" type="checkbox" />
|
||||||
|
Remember me
|
||||||
|
</label>
|
||||||
|
<button class="text-sm font-medium text-emerald-200 hover:text-emerald-100" type="button">
|
||||||
|
Forgot password?
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
class="group flex w-full items-center justify-center gap-3 rounded-2xl bg-emerald-300 px-4 py-3 text-sm font-semibold uppercase tracking-[0.25em] text-slate-900 transition hover:bg-emerald-200"
|
||||||
|
type="submit"
|
||||||
|
>
|
||||||
|
Log in
|
||||||
|
<span class="inline-flex h-7 w-7 items-center justify-center rounded-full bg-slate-900/10 text-slate-900 transition group-hover:translate-x-1">
|
||||||
|
→
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div class="mt-6 flex items-center justify-between text-xs text-white/50">
|
||||||
|
<span>Need access?</span>
|
||||||
|
<span class="text-white/70">Contact your manager</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</UDashboardPanel>
|
|
||||||
</template>
|
<style scoped>
|
||||||
|
@keyframes rise-in {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(18px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-rise {
|
||||||
|
animation: rise-in 0.8s ease-out both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.animate-rise-delayed {
|
||||||
|
animation: rise-in 0.9s ease-out 0.2s both;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user