From 81b88d934131af154b93c83bf21df8f977518ece Mon Sep 17 00:00:00 2001
From: multipleof4 <planetrenox@protonmail.com>
Date: Sun, 28 Sep 2025 10:19:30 -0700
Subject: [PATCH] Feat: Initial landing page with auth forms

---
 index.html | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 74 insertions(+)
diff --git a/index.html b/index.html
index 8b13789..bbcc2e4 100644
--- a/index.html
+++ b/index.html
@@ -1 +1,75 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>4ev.link - Custom Short URLs</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+</head>
+<body class="bg-slate-900 text-slate-200 min-h-screen flex items-center justify-center font-sans overflow-hidden">
 
+    <div class="absolute top-0 left-0 w-72 h-72 bg-gradient-to-tr from-violet-600 to-rose-600 rounded-full filter blur-3xl opacity-30 animate-blob"></div>
+    <div class="absolute bottom-0 right-0 w-72 h-72 bg-gradient-to-br from-blue-600 to-green-600 rounded-full filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
+
+    <main x-data="{ view: 'landing' }" class="relative z-10 w-full max-w-md mx-auto p-4 text-center">
+        
+        <!-- Landing View -->
+        <div x-show="view === 'landing'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90">
+            <h1 class="text-5xl font-bold mb-2 flex items-center justify-center gap-3">
+                <i data-lucide="link" class="w-10 h-10"></i> 4ev.link
+            </h1>
+            <p class="text-slate-400 mb-8 max-w-sm mx-auto">
+                If you want short custom urls, like url shortening to a custom slug, our platform is for you.
+            </p>
+            <div class="flex flex-col sm:flex-row gap-4 justify-center">
+                <button @click="view = 'login'" class="w-full sm:w-auto px-6 py-3 font-semibold rounded-lg bg-slate-800 hover:bg-slate-700 transition-colors duration-200">
+                    Login
+                </button>
+                <button @click="view = 'signup'" class="w-full sm:w-auto px-6 py-3 font-semibold rounded-lg text-white bg-gradient-to-r from-sky-500 to-indigo-500 hover:opacity-90 transition-opacity duration-200 flex items-center justify-center gap-2">
+                    Sign Up Now <i data-lucide="arrow-right" class="w-4 h-4"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- Auth Forms View -->
+        <div x-show="view !== 'landing'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90" class="bg-slate-800/50 backdrop-blur-sm p-8 rounded-xl border border-slate-700" style="display: none;">
+            <button @click="view = 'landing'" class="absolute top-4 left-4 text-slate-400 hover:text-white transition-colors">
+                <i data-lucide="arrow-left"></i>
+            </button>
+            
+            <!-- Login Form -->
+            <div x-show="view === 'login'">
+                <h2 class="text-3xl font-bold mb-6">Login</h2>
+                <form class="space-y-4">
+                    <input type="text" placeholder="Username" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-500">
+                    <input type="password" placeholder="Password" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-sky-500">
+                    <button type="submit" class="w-full py-3 font-semibold rounded-lg text-white bg-gradient-to-r from-sky-500 to-indigo-500 hover:opacity-90 transition-opacity">Login</button>
+                </form>
+            </div>
+
+            <!-- Signup Form -->
+            <div x-show="view === 'signup'">
+                <h2 class="text-3xl font-bold mb-6">Create Account</h2>
+                <form class="space-y-4">
+                    <input type="text" placeholder="Username" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <input type="password" placeholder="Password" required class="w-full p-3 bg-slate-700 border border-slate-600 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                    <button type="submit" class="w-full py-3 font-semibold rounded-lg text-white bg-gradient-to-r from-sky-500 to-indigo-500 hover:opacity-90 transition-opacity">Sign Up</button>
+                </form>
+            </div>
+        </div>
+    </main>
+
+    <style>
+      .animate-blob { animation: blob 7s infinite; }
+      .animation-delay-4000 { animation-delay: -4s; }
+      @keyframes blob {
+        0%, 100% { transform: translate(0, 0) scale(1); }
+        33% { transform: translate(30px, -50px) scale(1.1); }
+        66% { transform: translate(-20px, 20px) scale(0.9); }
+      }
+    </style>
+    <script>lucide.createIcons();</script>
+</body>
+</html>
