feat: enhance landing page with Lucide icons and proper SvelteKit navigation

- Add feature cards with Brain and Heart icons
- Improve CTA buttons with Sparkles icon and better contrast
- Use goto() instead of window.location.href for proper SvelteKit routing
- Fix CSS variable issue (petalytics-base → petalytics-bg)
- Add startup-style design elements and improved typography

Author: gitcoder89431

src/routes/+page.svelte

@@ -1,54 +1,104 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Brain, Heart, BarChart3, Sparkles } from 'lucide-svelte';
 	// Minimal welcome screen
-	const go = () => (window.location.href = '/dashboard');
+	const go = () => goto('/dashboard');
 </script>
 
 <div
 	class="min-h-screen flex items-center justify-center px-4"
 	style="background: var(--petalytics-bg);"
 >
-	<main class="w-full max-w-xl text-center">
-		<img
-			src="/favicon.svg"
-			alt="Petalytic logo"
-			width="72"
-			height="72"
-			class="mx-auto mb-4"
-			decoding="async"
-			loading="eager"
-		/>
-		<h1
-			class="mb-4 font-extrabold tracking-tight"
-			style="color: var(--petalytics-text); font-size: clamp(2.25rem, 6vw, 4rem);"
-		>
-			Petalytic
-		</h1>
-		<p
-			class="mx-auto mb-8"
-			style="color: var(--petalytics-subtle); font-size: clamp(1rem, 2.5vw, 1.125rem);"
-		>
-			A free, open pet journaling and insights app. No upsell—just a friendly welcome.
-		</p>
+	<main class="w-full max-w-4xl text-center">
+		<!-- Logo Section -->
+		<div class="mb-8">
+			<img
+				src="/favicon.svg"
+				alt="Petalytics logo"
+				width="120"
+				height="120"
+				class="mx-auto mb-6 drop-shadow-lg"
+				decoding="async"
+				loading="eager"
+			/>
+			<h1
+				class="mb-4 font-extrabold tracking-tight"
+				style="color: var(--petalytics-text); font-size: clamp(2.5rem, 8vw, 5rem);"
+			>
+				Petalytics
+			</h1>
+			<p
+				class="mx-auto mb-12 max-w-2xl"
+				style="color: var(--petalytics-subtle); font-size: clamp(1.125rem, 3vw, 1.25rem);"
+			>
+				AI-powered pet journaling that actually gets your furry friend. Track behaviors, get
+				insights, catch health trends early.
+			</p>
+		</div>
+
+		<!-- Feature Cards -->
+		<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12 max-w-3xl mx-auto">
+			<div
+				class="p-6 rounded-xl border backdrop-blur-sm"
+				style="background: color-mix(in oklab, var(--petalytics-surface) 80%, transparent); border-color: var(--petalytics-border);"
+			>
+				<Brain size={32} style="color: var(--petalytics-accent);" class="mx-auto mb-4" />
+				<h3 class="font-semibold mb-2" style="color: var(--petalytics-text);">Smart AI Insights</h3>
+				<p class="text-sm" style="color: var(--petalytics-subtle);">
+					Ruixen AI analyzes your pet's daily notes and spots patterns you might miss
+				</p>
+			</div>
 
-		<div class="flex items-center justify-center gap-3">
+			<div
+				class="p-6 rounded-xl border backdrop-blur-sm"
+				style="background: color-mix(in oklab, var(--petalytics-surface) 80%, transparent); border-color: var(--petalytics-border);"
+			>
+				<Heart size={32} style="color: var(--petalytics-love);" class="mx-auto mb-4" />
+				<h3 class="font-semibold mb-2" style="color: var(--petalytics-text);">Health Monitoring</h3>
+				<p class="text-sm" style="color: var(--petalytics-subtle);">
+					Early warning system for mood changes, appetite shifts, and behavior trends
+				</p>
+			</div>
+		</div>
+
+		<!-- CTA Section -->
+		<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
 			<button
-				class="px-6 py-3 rounded-md font-medium"
-				style="background: var(--petalytics-accent); color: var(--petalytics-base);"
+				class="px-8 py-4 rounded-lg font-semibold text-lg shadow-lg transition-all hover:scale-105 flex items-center gap-2"
+				style="background: var(--petalytics-accent); color: var(--petalytics-bg);"
 				onclick={go}
 			>
-				ENTER
+				<Sparkles size={20} />
+				Start Journaling
 			</button>
 			<a
-				class="px-5 py-3 rounded-md font-medium border"
-				style="border-color: var(--petalytics-border); color: var(--petalytics-text);"
+				class="px-6 py-4 rounded-lg font-medium border transition-all hover:scale-105"
+				style="border-color: var(--petalytics-border); color: var(--petalytics-text); background: color-mix(in oklab, var(--petalytics-surface) 50%, transparent);"
 				href="https://github.com/gitcoder89431/petalytics"
 				target="_blank"
 				rel="noreferrer noopener"
 			>
-				GitHub ↗
+				View on GitHub ↗
 			</a>
 		</div>
 
-		<div class="mt-10 text-xs" style="color: var(--petalytics-subtle);">:: Petalytic ::</div>
+		<!-- Stats Badge -->
+		<div
+			class="mt-16 flex items-center justify-center gap-8 text-sm"
+			style="color: var(--petalytics-subtle);"
+		>
+			<div class="flex items-center gap-2">
+				<BarChart3 size={16} />
+				<span>Open Source</span>
+			</div>
+			<div class="w-1 h-1 rounded-full" style="background: var(--petalytics-subtle);"></div>
+			<div>Privacy First</div>
+			<div class="w-1 h-1 rounded-full" style="background: var(--petalytics-subtle);"></div>
+			<div>No Upsells</div>
+		</div>
+
+		<div class="mt-8 text-xs" style="color: var(--petalytics-muted);">
+			Built with ❤️ for pet parents everywhere
+		</div>
 	</main>
 </div>