feat: add pricing section and hero redesign to homepage

resources/views/components/auth-header.blade.php

@@ -4,6 +4,6 @@
 ])
 
 <div class="flex w-full flex-col text-center">
-    <flux:heading size="xl">{{ $title }}</flux:heading>
-    <flux:subheading>{{ $description }}</flux:subheading>
+    <flux:heading size="xl" class="text-primary!">{{ $title }}</flux:heading>
+    <flux:subheading class="text-zinc-500!">{{ $description }}</flux:subheading>
 </div>

resources/views/components/pricing-card.blade.php

@@ -0,0 +1,55 @@
+@props([
+    'name',
+    'price',
+    'buttonText',
+    'perks' => [],
+    'featured' => false,
+    'dark' => false,
+])
+
+@php
+    $cardClass = match(true) {
+        $dark     => 'bg-zinc-800 border border-zinc-800 text-white',
+        $featured => 'bg-white border-2 border-primary',
+        default   => 'bg-white border border-zinc-300',
+    };
+
+    $buttonClass = $dark
+        ? 'bg-white text-primary hover:bg-zinc-100'
+        : 'bg-primary text-white hover:bg-primary-dark';
+@endphp
+
+<div {{ $attributes->merge(['class' => "p-8 rounded-3xl flex flex-col relative $cardClass"]) }}>
+
+    @if ($featured)
+        <div class="absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-white px-4 py-1 rounded-full text-[10px] font-black uppercase tracking-widest whitespace-nowrap">
+            Most Popular
+        </div>
+    @endif
+
+    <div class="flex items-baseline justify-between mb-6">
+        <h4 class="text-xl font-bold">{{ $name }}</h4>
+        <div class="flex items-baseline gap-1">
+            <span @class(['text-3xl font-black', 'text-primary' => $featured])>{{ $price }}</span>
+            <span @class(['text-sm', 'text-zinc-500' => !$dark, 'text-zinc-400' => $dark])>/mo</span>
+        </div>
+    </div>
+
+    <ul class="space-y-2 mb-6 flex-1">
+        @foreach ($perks as $perk)
+            <li @class(['text-sm flex gap-2 items-center', 'text-zinc-500' => !$perk['included'] && !$dark])>
+                @if ($perk['included'])
+                    <iconify-icon icon="lucide:check" class="text-primary shrink-0"></iconify-icon>
+                @else
+                    <iconify-icon icon="lucide:x" class="text-zinc-300 shrink-0"></iconify-icon>
+                @endif
+                {{ $perk['text'] }}
+            </li>
+        @endforeach
+    </ul>
+
+    <a href="{{ route('register') }}" class="w-full py-2.5 px-6 {{ $buttonClass }} rounded-full text-sm text-center font-bold shadow-lg transition-all hover:scale-105 active:scale-95">
+        {{ $buttonText }}
+    </a>
+
+</div>