Initial Laravel setup
This commit is contained in:
joeplikestocode
138
resources/views/pages/⚡landing.blade.php
Normal file
138
resources/views/pages/⚡landing.blade.php
Normal file
@@ -0,0 +1,138 @@
|
||||
<?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>
|
||||
<form method="POST" action="{{ route('logout') }}">
|
||||
@csrf
|
||||
<button type="submit" class="btn-primary w-full text-base">
|
||||
Logout
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<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 class="text-2xl mb-5"><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>
|
||||
|
||||
<hr class="mt-5 mb-5 border-t border-muted-foreground opacity-20">
|
||||
|
||||
<div class="text-left">
|
||||
<h2 class="text-2xl mb-5"><b>Built for your crew</b></h2>
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
|
||||
<div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
|
||||
<x-bi-people class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<b>Groups</b>
|
||||
<p class="text-muted-foreground">Private crews with invite codes</p>
|
||||
</div>
|
||||
<div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
|
||||
<div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
|
||||
<x-bi-people class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<b>Patches</b>
|
||||
<p class="text-muted-foreground">Private crews with invite codes</p>
|
||||
</div>
|
||||
<div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
|
||||
<div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
|
||||
<x-bi-people class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<b>Your sash</b>
|
||||
<p class="text-muted-foreground">Private crews with invite codes</p>
|
||||
</div>
|
||||
<div class="aspect-square rounded-2xl bg-card ring-1 ring-border p-4 text-sm">
|
||||
<div class="grid h-10 w-10 place-items-center rounded-xl bg-primary/15 text-primary-foreground shadow-sm mb-2">
|
||||
<x-feathericon-target class="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<b>Progress</b>
|
||||
<p class="text-muted-foreground">Private crews with invite codes</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="mt-8 text-xs text-muted-foreground">
|
||||
Made for fun, inspired by scouting.
|
||||
</p>
|
||||
</div>
|
||||
Reference in New Issue
Block a user