auth-10

1"use client";
2 
3import { CheckIcon, EyeIcon } from "lucide-react";
4import type React from "react";
5import { useState } from "react";
6import { LogoIcon } from "@/components/logo";
7import { Button } from "@/components/ui/button";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10 
11export function SignupForm() {
12  const [showPassword, setShowPassword] = useState(false);
13 
14  return (
15    <div className="grid min-h-screen w-full lg:grid-cols-2">
16      {/* Left Side: Marketing/Benefits Panel */}
17      <div className="relative hidden flex-col justify-between border-white/5 border-r bg-zinc-950 p-12 text-white lg:flex">
18        <div className="absolute inset-0 z-0 overflow-hidden">
19          <div className="-top-1/4 -left-1/4 absolute h-full w-full animate-pulse rounded-full bg-blue-500/10 blur-[160px]" />
20          <div className="-bottom-1/4 -right-1/4 absolute h-full w-full animate-pulse rounded-full bg-purple-500/10 blur-[160px] [animation-delay:2s]" />
21          <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 brightness-100 contrast-150" />
22        </div>
23 
24        <div className="relative z-10">
25          <div className="flex items-center gap-2">
26            <LogoIcon className="size-6 invert dark:invert-0" />
27            <span className="font-bold text-lg tracking-tight">Freddy UI</span>
28          </div>
29 
30          <div className="mt-24 space-y-8">
31            <h1 className="font-bold text-5xl leading-[1.1] tracking-tightest xl:text-6xl">
32              Elevate your <br />
33              <span className="text-blue-400">development</span> <br />
34              workflow.
35            </h1>
36            <p className="max-w-md font-medium text-lg text-zinc-400">
37              Join 10,000+ developers building faster with our premium shadcn/ui
38              blocks.
39            </p>
40 
41            <ul className="space-y-5 pt-12">
42              {[
43                "Access to 100+ premium blocks",
44                "Weekly updates & new components",
45                "Advanced animation primitives",
46                "Component-level accessibility",
47              ].map((benefit) => (
48                <li
49                  className="flex items-center gap-4 font-medium text-sm text-zinc-300"
50                  key={benefit}
51                >
52                  <div className="flex size-5 shrink-0 items-center justify-center rounded-full bg-blue-500/10 text-blue-400 ring-1 ring-blue-500/20">
53// … truncated