auth-2

1"use client";
2 
3import { AtSignIcon } from "lucide-react";
4import type React from "react";
5import { LogoIcon } from "@/components/logo";
6import { Button } from "@/components/ui/button";
7import {
8  InputGroup,
9  InputGroupAddon,
10  InputGroupInput,
11} from "@/components/ui/input-group";
12import { FloatingPaths } from "./floating-paths";
13 
14export function AuthPage() {
15  return (
16    <main className="relative md:h-screen md:overflow-hidden lg:grid lg:grid-cols-2">
17      {/* Left panel — testimonial sidebar */}
18      <div className="relative hidden h-full flex-col border-r bg-secondary p-10 lg:flex dark:bg-secondary/20">
19        <div className="absolute inset-0 bg-linear-to-b from-transparent via-transparent to-background" />
20        <div className="absolute inset-0">
21          <FloatingPaths position={1} />
22          <FloatingPaths position={-1} />
23        </div>
24        <LogoIcon className="relative z-10 mr-auto size-7" />
25        <div className="relative z-10 mt-auto">
26          <blockquote className="space-y-3">
27            <p className="text-foreground/90 text-xl leading-relaxed">
28              &ldquo;This tool cut my workflow time in half. Can&apos;t imagine
29              working without it.&rdquo;
30            </p>
31            <footer className="font-mono font-semibold text-muted-foreground text-sm">
32              — Vartik Anand
33            </footer>
34          </blockquote>
35        </div>
36      </div>
37 
38      {/* Right panel — auth form */}
39      <div className="relative flex min-h-screen flex-col justify-center p-4">
40        {/* Decorative radial glows */}
41        <div
42          aria-hidden
43          className="-z-10 absolute inset-0 isolate opacity-60 contain-strict"
44        >
45          <div className="-translate-y-87.5 absolute top-0 right-0 h-320 w-140 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,theme(colors.foreground/6%)_0,hsla(0,0%,55%,.02)_50%,theme(colors.foreground/1%)_80%)]" />
46          <div className="absolute top-0 right-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.foreground/4%)_0,theme(colors.foreground/1%)_80%,transparent_100%)] [translate:5%_-50%]" />
47          <div className="-translate-y-87.5 absolute top-0 right-0 h-320 w-60 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,theme(colors.foreground/4%)_0,theme(colors.foreground/1%)_80%,transparent_100%)]" />
48        </div>
49 
50        <div className="mx-auto w-full max-w-sm space-y-6">
51          {/* Logo + heading */}
52// … truncated