Merge branch 'main' into main

7 files changed, 410 insertions, 345 deletions

diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
deleted file mode 100644
index ebf2eb3f..00000000
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { signIn } from "@/lib/auth-client";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Suspense, useState } from "react";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import Link from "next/link";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { ArrowLeft, Loader2 } from "lucide-react";
-import { GoogleIcon } from "@/components/icons";
-
-function LoginForm() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
-
-  const handleLogin = async () => {
-    setError(null);
-    setIsEmailLoading(true);
-
-    const { error } = await signIn.email({
-      email,
-      password,
-    });
-
-    if (error) {
-      setError(error.message || "An unexpected error occurred.");
-      setIsEmailLoading(false);
-      return;
-    }
-
-    router.push("/editor");
-  };
-
-  const handleGoogleLogin = async () => {
-    setError(null);
-    setIsGoogleLoading(true);
-
-    try {
-      await signIn.social({
-        provider: "google",
-      });
-      router.push("/editor");
-    } catch (error) {
-      setError("Failed to sign in with Google. Please try again.");
-      setIsGoogleLoading(false);
-    }
-  };
-
-  const isAnyLoading = isEmailLoading || isGoogleLoading;
-
-  return (
-    <div className="flex flex-col space-y-6">
-      {error && (
-        <Alert variant="destructive">
-          <AlertTitle>Error</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      <Button
-        onClick={handleGoogleLogin}
-        variant="outline"
-        size="lg"
-        disabled={isAnyLoading}
-      >
-        {isGoogleLoading ? <Loader2 className="animate-spin" /> : (<GoogleIcon />)} Continue with Google
-      </Button>
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <Separator className="w-full" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
-        </div>
-      </div>
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input
-            id="email"
-            type="email"
-            placeholder="m@example.com"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            disabled={isAnyLoading}
-            className="h-11"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <Input
-            id="password"
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={isAnyLoading}
-            className="h-11"
-          />
-        </div>
-        <Button
-          onClick={handleLogin}
-          disabled={isAnyLoading || !email || !password}
-          className="w-full h-11"
-          size="lg"
-        >
-          {isEmailLoading ? <Loader2 className="animate-spin" /> : "Sign in"}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default function LoginPage() {
-  const router = useRouter();
-
-  return (
-    <div className="flex h-screen items-center justify-center relative">
-      <Button
-        variant="ghost"
-        onClick={() => router.back()}
-        className="absolute top-6 left-6"
-      >
-        <ArrowLeft className="h-5 w-5" /> Back
-      </Button>
-      <Card className="w-[400px] shadow-lg border-0">
-        <CardHeader className="text-center pb-4">
-          <CardTitle className="text-2xl font-semibold">Welcome back</CardTitle>
-          <CardDescription className="text-base">
-            Sign in to your account to continue
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-0">
-          <Suspense fallback={<div className="text-center">
-            <Loader2 className="animate-spin" />
-          </div>}>
-            <LoginForm />
-          </Suspense>
-          <div className="mt-6 text-center text-sm">
-            Don't have an account?{" "}
-            <Link href="/auth/signup" className="font-medium text-primary underline-offset-4 hover:underline">
-              Sign up
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/(auth)/signup/page.tsx b/apps/web/src/app/(auth)/signup/page.tsx
deleted file mode 100644
index 3d125a07..00000000
--- a/apps/web/src/app/(auth)/signup/page.tsx
+++ /dev/null
@@ -1,181 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { signUp, signIn } from "@/lib/auth-client";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Suspense, useState } from "react";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import Link from "next/link";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Loader2, ArrowLeft } from "lucide-react";
-import { GoogleIcon } from "@/components/icons";
-
-function SignUpForm() {
-  const router = useRouter();
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
-
-  const handleSignUp = async () => {
-    setError(null);
-    setIsEmailLoading(true);
-
-    const { error } = await signUp.email({
-      name,
-      email,
-      password,
-    });
-
-    if (error) {
-      setError(error.message || "An unexpected error occurred.");
-      setIsEmailLoading(false);
-      return;
-    }
-
-    router.push("/auth/login");
-  };
-
-  const handleGoogleSignUp = async () => {
-    setError(null);
-    setIsGoogleLoading(true);
-
-    try {
-      await signIn.social({
-        provider: "google",
-      });
-
-      router.push("/editor");
-    } catch (error) {
-      setError("Failed to sign up with Google. Please try again.");
-      setIsGoogleLoading(false);
-    }
-  };
-
-  const isAnyLoading = isEmailLoading || isGoogleLoading;
-
-  return (
-    <div className="flex flex-col space-y-6">
-      {error && (
-        <Alert variant="destructive">
-          <AlertTitle>Error</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
-
-      <Button
-        onClick={handleGoogleSignUp}
-        variant="outline"
-        size="lg"
-        disabled={isAnyLoading}
-      >
-        {isGoogleLoading ? <Loader2 className="animate-spin" /> : (<GoogleIcon />)} Continue with Google
-      </Button>
-
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <Separator className="w-full" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase">
-          <span className="bg-background px-2 text-muted-foreground">Or continue with</span>
-        </div>
-      </div>
-
-      <div className="space-y-4">
-        <div className="space-y-2">
-          <Label htmlFor="name">Full Name</Label>
-          <Input
-            id="name"
-            type="text"
-            placeholder="John Doe"
-            value={name}
-            onChange={(e) => setName(e.target.value)}
-            disabled={isAnyLoading}
-            className="h-11"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="email">Email</Label>
-          <Input
-            id="email"
-            type="email"
-            placeholder="m@example.com"
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            disabled={isAnyLoading}
-            className="h-11"
-          />
-        </div>
-        <div className="space-y-2">
-          <Label htmlFor="password">Password</Label>
-          <Input
-            id="password"
-            type="password"
-            placeholder="Create a strong password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            disabled={isAnyLoading}
-            className="h-11"
-          />
-        </div>
-        <Button
-          onClick={handleSignUp}
-          disabled={isAnyLoading || !name || !email || !password}
-          className="w-full h-11"
-          size="lg"
-        >
-          {isEmailLoading ? <Loader2 className="animate-spin" /> : "Create account"}
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-export default function SignUpPage() {
-  const router = useRouter();
-
-  return (
-    <div className="flex h-screen items-center justify-center relative">
-      <Button
-        variant="ghost"
-        onClick={() => router.back()}
-        className="absolute top-6 left-6"
-      >
-        <ArrowLeft className="h-5 w-5" /> Back
-      </Button>
-
-      <Card className="w-[400px] shadow-lg border-0">
-        <CardHeader className="text-center pb-4">
-          <CardTitle className="text-2xl font-semibold">Create your account</CardTitle>
-          <CardDescription className="text-base">
-            Get started with your free account today
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="pt-0">
-          <Suspense fallback={<div className="text-center">
-            <Loader2 className="animate-spin" />
-          </div>}>
-            <SignUpForm />
-          </Suspense>
-          <div className="mt-6 text-center text-sm">
-            Already have an account?{" "}
-            <Link href="/auth/login" className="font-medium text-primary underline-offset-4 hover:underline">
-              Sign in
-            </Link>
-          </div>
-        </CardContent>
-      </Card>
-    </div>
-  );
-}
diff --git a/apps/web/src/app/auth/login/page.tsx b/apps/web/src/app/auth/login/page.tsx
new file mode 100644
index 00000000..18117f44
--- /dev/null
+++ b/apps/web/src/app/auth/login/page.tsx
@@ -0,0 +1,5 @@
+import { AuthForm } from "@/components/auth-form";
+
+export default function LoginPage() {
+  return <AuthForm mode="login" />;
+}
diff --git a/apps/web/src/app/auth/signup/page.tsx b/apps/web/src/app/auth/signup/page.tsx
new file mode 100644
index 00000000..109ae5cd
--- /dev/null
+++ b/apps/web/src/app/auth/signup/page.tsx
@@ -0,0 +1,5 @@
+import { AuthForm } from "@/components/auth-form";
+
+export default function SignUpPage() {
+  return <AuthForm mode="signup" />;
+}
diff --git a/apps/web/src/app/favicon.ico b/apps/web/src/app/favicon.ico
index 66b4ee0f..cb20127b 100644
--- a/apps/web/src/app/favicon.ico
+++ b/apps/web/src/app/favicon.ico
diff --git a/apps/web/src/components/auth-form.tsx b/apps/web/src/components/auth-form.tsx
new file mode 100644
index 00000000..182137ef
--- /dev/null
+++ b/apps/web/src/components/auth-form.tsx
@@ -0,0 +1,398 @@
+"use client";

+

+import { useRouter } from "next/navigation";

+import { signUp, signIn } from "@/lib/auth-client";

+import { Button } from "@/components/ui/button";

+import {

+  Card,

+  CardContent,

+  CardDescription,

+  CardHeader,

+  CardTitle,

+} from "@/components/ui/card";

+import { useState } from "react";

+import { Input } from "@/components/ui/input";

+import { Separator } from "@/components/ui/separator";

+import Link from "next/link";

+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

+import { ArrowLeft, Loader2 } from "lucide-react";

+import { GoogleIcon } from "@/components/icons";

+import { useForm } from "react-hook-form";

+import { zodResolver } from "@hookform/resolvers/zod";

+import { z } from "zod";

+import {

+  Form,

+  FormControl,

+  FormField,

+  FormItem,

+  FormLabel,

+  FormMessage,

+} from "@/components/ui/form";

+

+// Zod schemas

+const loginSchema = z.object({

+  email: z.string().email("Please enter a valid email address"),

+  password: z.string().min(1, "Password is required"),

+});

+

+const signupSchema = z.object({

+  name: z.string().min(2, "Name must be at least 2 characters"),

+  email: z.string().email("Please enter a valid email address"),

+  password: z.string().min(8, "Password must be at least 8 characters"),

+});

+

+type LoginFormData = z.infer<typeof loginSchema>;

+type SignupFormData = z.infer<typeof signupSchema>;

+

+interface AuthFormProps {

+  mode: "login" | "signup";

+}

+

+const authConfig = {

+  login: {

+    title: "Welcome back",

+    description: "Sign in to your account to continue",

+    buttonText: "Sign in",

+    linkText: "Don't have an account?",

+    linkHref: "/auth/signup",

+    linkLabel: "Sign up",

+    successRedirect: "/editor",

+  },

+  signup: {

+    title: "Create your account",

+    description: "Get started with your free account today",

+    buttonText: "Create account",

+    linkText: "Already have an account?",

+    linkHref: "/auth/login",

+    linkLabel: "Sign in",

+    successRedirect: "/auth/login",

+  },

+} as const;

+

+interface AuthFormContentProps {

+  error: string | null;

+  setError: (error: string | null) => void;

+  isGoogleLoading: boolean;

+  config: typeof authConfig.login | typeof authConfig.signup;

+  router: ReturnType<typeof useRouter>;

+}

+

+function LoginFormContent({

+  error,

+  setError,

+  isGoogleLoading,

+  config,

+  router,

+}: AuthFormContentProps) {

+  const form = useForm<LoginFormData>({

+    resolver: zodResolver(loginSchema),

+    defaultValues: { email: "", password: "" },

+  });

+

+  const { isSubmitting } = form.formState;

+  const isAnyLoading = isSubmitting || isGoogleLoading;

+

+  const onSubmit = async (data: LoginFormData) => {

+    setError(null);

+

+    try {

+      const { error } = await signIn.email({

+        email: data.email,

+        password: data.password,

+      });

+

+      if (error) {

+        setError(error.message || "An unexpected error occurred.");

+        return;

+      }

+

+      router.push(config.successRedirect);

+    } catch (error) {

+      setError("An unexpected error occurred. Please try again.");

+    }

+  };

+

+  return (

+    <Form {...form}>

+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

+        <FormField

+          control={form.control}

+          name="email"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Email</FormLabel>

+              <FormControl>

+                <Input

+                  type="email"

+                  placeholder="m@example.com"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <FormField

+          control={form.control}

+          name="password"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Password</FormLabel>

+              <FormControl>

+                <Input

+                  type="password"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <Button

+          type="submit"

+          disabled={isAnyLoading}

+          className="w-full h-11"

+          size="lg"

+        >

+          {isSubmitting ? (

+            <Loader2 className="animate-spin" />

+          ) : (

+            config.buttonText

+          )}

+        </Button>

+      </form>

+    </Form>

+  );

+}

+

+function SignupFormContent({

+  error,

+  setError,

+  isGoogleLoading,

+  config,

+  router,

+}: AuthFormContentProps) {

+  const form = useForm<SignupFormData>({

+    resolver: zodResolver(signupSchema),

+    defaultValues: { email: "", password: "", name: "" },

+  });

+

+  const { isSubmitting } = form.formState;

+  const isAnyLoading = isSubmitting || isGoogleLoading;

+

+  const onSubmit = async (data: SignupFormData) => {

+    setError(null);

+

+    try {

+      const { error } = await signUp.email({

+        name: data.name,

+        email: data.email,

+        password: data.password,

+      });

+

+      if (error) {

+        setError(error.message || "An unexpected error occurred.");

+        return;

+      }

+

+      router.push(config.successRedirect);

+    } catch (error) {

+      setError("An unexpected error occurred. Please try again.");

+    }

+  };

+

+  return (

+    <Form {...form}>

+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

+        <FormField

+          control={form.control}

+          name="name"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Full Name</FormLabel>

+              <FormControl>

+                <Input

+                  placeholder="John Doe"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <FormField

+          control={form.control}

+          name="email"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Email</FormLabel>

+              <FormControl>

+                <Input

+                  type="email"

+                  placeholder="m@example.com"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <FormField

+          control={form.control}

+          name="password"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Password</FormLabel>

+              <FormControl>

+                <Input

+                  type="password"

+                  placeholder="Create a strong password"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <Button

+          type="submit"

+          disabled={isAnyLoading}

+          className="w-full h-11"

+          size="lg"

+        >

+          {isSubmitting ? (

+            <Loader2 className="animate-spin" />

+          ) : (

+            config.buttonText

+          )}

+        </Button>

+      </form>

+    </Form>

+  );

+}

+

+export function AuthForm({ mode }: AuthFormProps) {

+  const router = useRouter();

+  const [error, setError] = useState<string | null>(null);

+  const [isGoogleLoading, setIsGoogleLoading] = useState(false);

+  const config = authConfig[mode];

+

+  const handleGoogleAuth = async () => {

+    setError(null);

+    setIsGoogleLoading(true);

+

+    try {

+      await signIn.social({

+        provider: "google",

+      });

+

+      router.push(config.successRedirect);

+    } catch (error) {

+      setError(

+        `Failed to ${mode === "login" ? "sign in" : "sign up"} with Google. Please try again.`

+      );

+      setIsGoogleLoading(false);

+    }

+  };

+

+  return (

+    <div className="flex h-screen items-center justify-center relative">

+      <Button

+        variant="ghost"

+        onClick={() => router.back()}

+        className="absolute top-6 left-6"

+      >

+        <ArrowLeft className="h-5 w-5" /> Back

+      </Button>

+

+      <Card className="w-[400px] shadow-lg border-0">

+        <CardHeader className="text-center pb-4">

+          <CardTitle className="text-2xl font-semibold">

+            {config.title}

+          </CardTitle>

+          <CardDescription className="text-base">

+            {config.description}

+          </CardDescription>

+        </CardHeader>

+        <CardContent className="pt-0">

+          <div className="flex flex-col space-y-6">

+            {error && (

+              <Alert variant="destructive">

+                <AlertTitle>Error</AlertTitle>

+                <AlertDescription>{error}</AlertDescription>

+              </Alert>

+            )}

+

+            <Button

+              onClick={handleGoogleAuth}

+              variant="outline"

+              size="lg"

+              disabled={isGoogleLoading}

+            >

+              {isGoogleLoading ? (

+                <Loader2 className="animate-spin" />

+              ) : (

+                <GoogleIcon />

+              )}

+              Continue with Google

+            </Button>

+

+            <div className="relative">

+              <div className="absolute inset-0 flex items-center">

+                <Separator className="w-full" />

+              </div>

+              <div className="relative flex justify-center text-xs uppercase">

+                <span className="bg-background px-2 text-muted-foreground">

+                  Or continue with

+                </span>

+              </div>

+            </div>

+

+            {mode === "login" ? (

+              <LoginFormContent

+                error={error}

+                setError={setError}

+                isGoogleLoading={isGoogleLoading}

+                config={config}

+                router={router}

+              />

+            ) : (

+              <SignupFormContent

+                error={error}

+                setError={setError}

+                isGoogleLoading={isGoogleLoading}

+                config={config}

+                router={router}

+              />

+            )}

+          </div>

+

+          <div className="mt-6 text-center text-sm">

+            {config.linkText}{" "}

+            <Link

+              href={config.linkHref}

+              className="font-medium text-primary underline-offset-4 hover:underline"

+            >

+              {config.linkLabel}

+            </Link>

+          </div>

+        </CardContent>

+      </Card>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index f2c70f5d..714d432b 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -84,12 +84,12 @@ export function Hero({ signupCount }: HeroProps) {
             The open source

           </h1>

           <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter mt-2">

-            CapCut alternative.

+            video editor

           </h1>

         </motion.div>

 

         <motion.p

-          className="mt-12 text-lg sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"

+          className="mt-10 text-lg sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"

           initial={{ opacity: 0 }}

           animate={{ opacity: 1 }}

           transition={{ delay: 0.4, duration: 0.8 }}