add rotating platform-agnostic placeholder examples

Created useRotatingPlaceholder hook:
- Rotates through 4 platform examples every 3 seconds
- .bsky.social, .blacksky.app, .tgnl.sh, .com
- Demonstrates platform flexibility without overwhelming users

src/hooks/useRotatingPlaceholder.ts

···
+import { useState, useEffect } from "react";
+
+const PLATFORM_EXAMPLES = [
+  "username.bsky.social",
+  "username.blacksky.app",
+  "username.tgnl.sh",
+  "username.com",
+];
+
+const ROTATION_INTERVAL = 3000; // 3 seconds
+
+export function useRotatingPlaceholder(): string {
+  const [index, setIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex((prev) => (prev + 1) % PLATFORM_EXAMPLES.length);
+    }, ROTATION_INTERVAL);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return PLATFORM_EXAMPLES[index];
+}

src/pages/Login.tsx

···
 import { ArrowRight, AlertCircle, Info } from "lucide-react";
 import { useFormValidation } from "../hooks/useFormValidation";
 import { validateHandle } from "../lib/validation";
+import { useRotatingPlaceholder } from "../hooks/useRotatingPlaceholder";
 import HeroSection from "../components/login/HeroSection";
 import ValuePropsSection from "../components/login/ValuePropsSection";
 import HowItWorksSection from "../components/login/HowItWorksSection";
···
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [strippedAtMessage, setStrippedAtMessage] = useState(false);
   const [selectedAvatar, setSelectedAvatar] = useState<string | null>(null);
+  const placeholder = useRotatingPlaceholder();
 
   const { fields, setValue, validate, getFieldProps } = useFormValidation({
     handle: "",
···
                         ref={inputRef}
                         id="atproto-handle"
                         {...getFieldProps("handle")}
-                        placeholder="username.bsky.social"
+                        placeholder={placeholder}
                         error={fields.handle.touched && !!fields.handle.error}
                         selectedAvatar={selectedAvatar}
                         aria-required="true"