feat: add dedicated login/signup page and link landing buttons to it

frontend/app/components/landing/CTA.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useEffect, useRef } from "react";
-import { signInWithGoogle } from "@/app/auth/actions";
 import { ArrowRight, Sparkles } from "lucide-react";
+import Link from "next/link";
 
 export default function CTA() {
   const sectionRef = useRef<HTMLDivElement>(null);
@@ -44,12 +44,13 @@ export default function CTA() {
             <p className="text-lg text-white/70 mb-10 max-w-xl mx-auto leading-relaxed">
               Join hundreds of educators creating engaging educational content with AI.
             </p>
-            <form action={signInWithGoogle} className="inline-block">
-              <button type="submit" className="group inline-flex items-center gap-3 rounded-full bg-white px-8 py-4 text-base font-semibold text-[#e8609a] hover:bg-white/90 transition-all duration-300 shadow-2xl shadow-black/20 hover:shadow-lg hover:scale-105 cursor-pointer">
-                Get Started Free
-                <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform duration-200" />
-              </button>
-            </form>
+            <Link
+              href="/login"
+              className="group inline-flex items-center gap-3 rounded-full bg-white px-8 py-4 text-base font-semibold text-[#e8609a] hover:bg-white/90 transition-all duration-300 shadow-2xl shadow-black/20 hover:shadow-lg hover:scale-105 cursor-pointer"
+            >
+              Get Started Free
+              <ArrowRight size={18} className="group-hover:translate-x-1 transition-transform duration-200" />
+            </Link>
             <p className="mt-6 text-sm text-white/40">No credit card required · Free to try</p>
           </div>
         </div>

frontend/app/components/landing/Hero.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { signInWithGoogle } from "@/app/auth/actions";
 import { Sparkles } from "lucide-react";
+import Link from "next/link";
 
 export default function Hero() {
   return (
@@ -64,14 +64,12 @@ export default function Hero() {
                 <TypingPlaceholder />
               </div>
             </div>
-            <form action={signInWithGoogle}>
-              <button
-                type="submit"
-                className="glow-button whitespace-nowrap rounded-xl bg-gradient-to-r from-[#F875AA] to-[#e8609a] px-8 py-4 text-sm font-semibold text-white hover:from-[#f56da0] hover:to-[#d4558a] transition-all duration-300 cursor-pointer sm:w-auto w-full"
-              >
-                Generate Video →
-              </button>
-            </form>
+            <Link
+              href="/login"
+              className="glow-button text-center whitespace-nowrap rounded-xl bg-gradient-to-r from-[#F875AA] to-[#e8609a] px-8 py-4 text-sm font-semibold text-white hover:from-[#f56da0] hover:to-[#d4558a] transition-all duration-300 cursor-pointer sm:w-auto w-full"
+            >
+              Generate Video →
+            </Link>
           </div>
         </div>
 

frontend/app/components/landing/Navbar.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { useState } from "react";
-import { signInWithGoogle } from "@/app/auth/actions";
 import { Menu, X } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
 
 export default function Navbar() {
   const [mobileOpen, setMobileOpen] = useState(false);
@@ -41,14 +41,12 @@ export default function Navbar() {
                 {link.label}
               </a>
             ))}
-            <form action={signInWithGoogle}>
-              <button
-                type="submit"
-                className="rounded-full bg-gradient-to-r from-[#F875AA] to-[#e8609a] px-5 py-2 text-sm font-medium text-white hover:from-[#f56da0] hover:to-[#d4558a] transition-all duration-200 shadow-lg shadow-[#F875AA]/20"
-              >
-                Get Started
-              </button>
-            </form>
+            <Link
+              href="/login"
+              className="rounded-full bg-gradient-to-r from-[#F875AA] to-[#e8609a] px-5 py-2 text-sm font-medium text-white hover:from-[#f56da0] hover:to-[#d4558a] transition-all duration-200 shadow-lg shadow-[#F875AA]/20"
+            >
+              Get Started
+            </Link>
           </div>
 
           {/* Mobile hamburger */}
@@ -75,14 +73,13 @@ export default function Navbar() {
                   {link.label}
                 </a>
               ))}
-              <form action={signInWithGoogle}>
-                <button
-                  type="submit"
-                  className="w-full rounded-full bg-gradient-to-r from-[#F875AA] to-[#e8609a] px-5 py-2.5 text-sm font-medium text-white hover:from-[#f56da0] hover:to-[#d4558a] transition-all duration-200"
-                >
-                  Get Started
-                </button>
-              </form>
+              <Link
+                href="/login"
+                className="w-full text-center rounded-full bg-gradient-to-r from-[#F875AA] to-[#e8609a] px-5 py-2.5 text-sm font-medium text-white hover:from-[#f56da0] hover:to-[#d4558a] transition-all duration-200"
+                onClick={() => setMobileOpen(false)}
+              >
+                Get Started
+              </Link>
             </div>
           </div>
         )}

frontend/app/dashboard/page.tsx

@@ -16,7 +16,7 @@ export default async function DashboardPage() {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return redirect("/");
+    return redirect("/login");
   }
 
   return (

frontend/app/library/page.tsx

@@ -13,7 +13,7 @@ export default async function LibraryPage() {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return redirect("/");
+    return redirect("/login");
   }
 
   return (

frontend/app/login/page.tsx

@@ -0,0 +1,92 @@
+import { createClient } from "@/utils/supabase/server";
+import { redirect } from "next/navigation";
+import { signInWithGoogle } from "@/app/auth/actions";
+import { Brain, ArrowLeft } from "lucide-react";
+import Link from "next/link";
+import Image from "next/image";
+
+export default async function LoginPage() {
+  const supabase = await createClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (user) {
+    redirect("/dashboard");
+  }
+
+  return (
+    <main className="min-h-screen bg-[#FFF6F6] text-gray-900 overflow-hidden flex items-center justify-center relative">
+      {/* Animated background blobs — soft pastels matching landing page */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 -left-32 w-96 h-96 rounded-full bg-[#F875AA]/20 blur-[120px] animate-blob-float" />
+        <div
+          className="absolute bottom-1/4 -right-32 w-[500px] h-[500px] rounded-full bg-[#AEDEFC]/30 blur-[120px] animate-blob-float"
+          style={{ animationDelay: "3s" }}
+        />
+      </div>
+
+      {/* Back to Home Link */}
+      <Link
+        href="/"
+        className="absolute top-8 left-8 flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-gray-900 transition-colors z-20 group"
+      >
+        <ArrowLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
+        Back to home
+      </Link>
+
+      {/* Login Card */}
+      <div className="relative z-10 w-full max-w-md px-6">
+        <div className="glass-card p-8 md:p-10 flex flex-col items-center text-center">
+          {/* Logo / Brand Header */}
+          <Link href="/" className="mb-8 flex items-center gap-2">
+            <Image
+              src="/animed-logo.png"
+              alt="AnimEd AI Logo"
+              width={160}
+              height={42}
+              className="h-10 w-auto"
+              priority
+            />
+          </Link>
+
+          <p className="text-gray-500 text-sm md:text-base leading-relaxed mb-8 max-w-xs">
+            Turn your ideas into educational animations in seconds. Sign in to start creating.
+          </p>
+
+          {/* OAuth Buttons */}
+          <div className="w-full space-y-4">
+            <form action={signInWithGoogle} className="w-full">
+              <button
+                type="submit"
+                className="w-full flex items-center justify-center gap-3 rounded-2xl bg-white border border-gray-200 hover:border-gray-300 px-6 py-4 text-base font-semibold text-gray-700 hover:text-gray-900 hover:bg-gray-50 transition-all duration-300 shadow-sm cursor-pointer focus:outline-none focus:ring-2 focus:ring-[#F875AA]/50 active:scale-[0.98]"
+              >
+                {/* SVG Google Logo */}
+                <svg className="h-5 w-5 shrink-0" viewBox="0 0 24 24">
+                  <path
+                    fill="#4285F4"
+                    d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  />
+                  <path
+                    fill="#34A853"
+                    d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  />
+                  <path
+                    fill="#FBBC05"
+                    d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"
+                  />
+                  <path
+                    fill="#EA4335"
+                    d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"
+                  />
+                </svg>
+                Continue with Google
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

frontend/app/pomodoro/page.tsx

@@ -13,7 +13,7 @@ export default async function PomodoroPage() {
   } = await supabase.auth.getUser();
 
   if (!user) {
-    return redirect("/");
+    return redirect("/login");
   }
 
   return (