96 lines
4.2 KiB
PHP
96 lines
4.2 KiB
PHP
<?php
|
|
|
|
use Livewire\Component;
|
|
|
|
new class extends Component
|
|
{
|
|
//
|
|
};
|
|
?>
|
|
|
|
<div class="px-6 pt-16 pb-10 text-center">
|
|
<div>
|
|
<div class="mx-auto flex items-center justify-center gap-2">
|
|
<div class="grid h-12 w-12 place-items-center rounded-xl bg-primary text-primary-foreground shadow-sm">
|
|
<svg class="h-7 w-7" viewBox="0 0 24 24" fill="none" aria-hidden="true">
|
|
<path d="M12 2l7 4v6c0 5-3 9-7 10-4-1-7-5-7-10V6l7-4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
|
|
</svg>
|
|
</div>
|
|
<span class="text-2xl font-bold tracking-tight">PatchBook</span>
|
|
</div>
|
|
|
|
<h1 class="mt-6 text-3xl font-bold leading-tight tracking-tight text-balance">
|
|
Earn patches. <span class="text-primary">Challenge friends.</span> Build your sash.
|
|
</h1>
|
|
|
|
<p class="mx-auto mt-4 max-w-[320px] text-sm leading-relaxed text-muted-foreground">
|
|
Create fun challenges with your crew, earn badges, track progress, and see who tops the leaderboard.
|
|
</p>
|
|
|
|
<div class="mx-auto mt-8 flex w-full max-w-[360px] flex-col gap-3">
|
|
<a href="{{ route('register') }}" wire:navigate class="btn-primary w-full text-base">
|
|
Get Started
|
|
</a>
|
|
|
|
<a href="{{ route('login') }}" wire:navigate class="btn-outline w-full text-base">
|
|
I already have an account
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="mt-5 mb-5 border-t border-muted-foreground opacity-20">
|
|
|
|
<div class="text-left">
|
|
<h2><b>How it works</b></h2>
|
|
<div>
|
|
<div class="flex items-start gap-4">
|
|
<div class="relative w-10 flex justify-center self-stretch">
|
|
<div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
|
|
<x-bi-people class="h-6 w-6" />
|
|
</div>
|
|
<div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
|
|
</div>
|
|
<div>
|
|
<p class="text-primary text-sm">STEP 1</p>
|
|
<h3 class="font-semibold">Start or join a group</h3>
|
|
<p class="text-muted-foreground text-sm">Create a crew with friends, family, or coworkers. Share an invite code to get everyone on board.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-start gap-4 mt-5">
|
|
<div class="relative w-10 flex justify-center self-stretch">
|
|
<div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
|
|
<x-solar-medal-ribbon-linear class="h-6 w-6" />
|
|
</div>
|
|
<div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
|
|
</div>
|
|
<div>
|
|
<p class="text-primary text-sm">STEP 2</p>
|
|
<h3 class="font-semibold">Design your patches</h3>
|
|
<p class="text-muted-foreground text-sm">Dream up custom challenges with icons, colors, and step-by-step requirements to complete.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="flex items-start gap-4 mt-5">
|
|
<div class="relative w-10 flex justify-center self-stretch">
|
|
<div class="h-10 w-10 rounded-full bg-primary text-primary-foreground grid place-items-center shrink-0">
|
|
<x-solar-shield-minimalistic-linear class="h-6 w-6" />
|
|
</div>
|
|
<div class="absolute top-12 bottom-0 w-px bg-muted-foreground/20"></div>
|
|
</div>
|
|
<div>
|
|
<p class="text-primary text-sm">STEP 3</p>
|
|
<h3 class="font-semibold">Earn and collect</h3>
|
|
<p class="text-muted-foreground text-sm">Complete challenges, get verified by your crew, and watch your sash fill up with patches.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="mt-8 text-xs text-muted-foreground">
|
|
Made for fun, inspired by scouting.
|
|
</p>
|
|
</div>
|