feat: sign in sign up with all views

kittyurl-frontend/src/components/Generator.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { PawPrint, Heart, Sparkles, Cat } from 'lucide-react';
+
+interface GeneratorProps {
+    url: string;
+    setUrl: (val: string) => void;
+    onGenerate: () => void;
+}
+
+export const Generator: React.FC<GeneratorProps> = ({ url, setUrl, onGenerate }) => (
+    <div className="max-w-[800px] mx-auto pt-16 px-4 flex flex-col items-center">
+        <header className="text-center mb-12">
+            <h1 className="text-7xl font-black text-pink-500 mb-2 tracking-tighter flex items-center gap-4">
+                KittyURL <PawPrint size={50} fill="currentColor" />
+            </h1>
+            <p className="text-pink-300 text-xl font-medium">Shorten your links with a purr!</p>
+        </header>
+
+        <div className="w-full bg-white rounded-[3rem] shadow-2xl shadow-pink-200/50 p-10 border-4 border-white relative overflow-hidden">
+            <div className="mb-6">
+                <label className="block text-xs font-black uppercase tracking-widest text-pink-300 mb-3 ml-2">Long URL to shorten</label>
+                <div className="relative">
+                    <input
+                        type="url"
+                        placeholder="https://example.com/very-long-url"
+                        className="w-full p-5 bg-pink-50/30 border-2 border-pink-100 rounded-2xl outline-none focus:border-pink-400 focus:bg-white transition-all text-lg shadow-inner"
+                        value={url}
+                        onChange={(e) => setUrl(e.target.value)}
+                    />
+                    <Heart className="absolute right-5 top-1/2 -translate-y-1/2 text-pink-200" size={24} />
+                </div>
+            </div>
+
+            <button
+                onClick={onGenerate}
+                className="w-full bg-pink-500 hover:bg-pink-600 text-white font-black py-5 rounded-[1.5rem] transition-all shadow-xl shadow-pink-100 active:scale-[0.98] text-xl flex items-center justify-center gap-3 cursor-pointer"
+            >
+                Generate Kitty Link <Sparkles size={24} />
+            </button>
+        </div>
+
+        <div className="w-full mt-16 text-center">
+            <div className="bg-pink-100/50 rounded-[2.5rem] border-4 border-dashed border-pink-200 p-12">
+                <Cat size={60} className="mx-auto text-pink-200 mb-4" />
+                <p className="text-pink-300 font-bold">No links generated yet. Feed me a URL! 🐾</p>
+            </div>
+        </div>
+    </div>
+);