1"use client";
2
3import { Eye, EyeOff } from "lucide-react";
4import { FormEvent, useState } from "react";
5
6const imageFrame =
7  "https://www.figma.com/api/mcp/asset/39877a3d-d44e-4354-b3d7-31fbeddf7d8e.png";
8const googleMask =
9  "https://www.figma.com/api/mcp/asset/f0542e5d-83ab-4fb1-9746-220be1dcfda3.svg";
10const googleMark =
11  "https://www.figma.com/api/mcp/asset/e5a26287-f46e-462e-96e3-5159205c2918.svg";
12const divider =
13  "https://www.figma.com/api/mcp/asset/6050dc53-df04-4dc7-94c3-1c57ac41346e.svg";
14const toggleImage1 =
15  "https://www.figma.com/api/mcp/asset/700fbc94-784d-4e5c-a627-858ac1d76466.svg";
16const toggleImage2 =
17  "https://www.figma.com/api/mcp/asset/3434fb2d-ac6d-41b3-8214-a90a5edabce1.svg";
18const toggleImage3 =
19  "https://www.figma.com/api/mcp/asset/c5f3f781-43a2-4bbe-b967-c1c8bede6ee5.svg";
20const toggleImage4 =
21  "https://www.figma.com/api/mcp/asset/9a7a10ee-44db-4669-b651-19b4a8f070ea.svg";
22
23export function LoginForm() {
24  const [showPassword, setShowPassword] = useState(false);
25  const [activeToggle, setActiveToggle] = useState(0);
26
27  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
28    event.preventDefault();
29  };
30
31  return (
32    <main
33      className="flex min-h-screen w-full items-center justify-center bg-background"
34      data-node-id="280:2"
35    >
36      <section className="flex w-full min-h-screen items-center justify-center px-5 py-10 sm:px-10 lg:w-1/2 lg:min-h-0 lg:py-0">
37        <div className="flex w-full max-w-[363px] flex-col items-center justify-center gap-12">
38          <div className="flex w-full flex-col items-center justify-center gap-[37px]">
39            <h1 className="text-center text-[24px] font-semibold leading-9 text-foreground">
40              Log in Here
41            </h1>
42
43            <form
44              onSubmit={handleSubmit}
45              className="flex w-full flex-col items-center gap-6"
46            >
47              <button
48                type="button"
49                className="flex w-full items-center justify-center gap-3 rounded-xl border-2 border-border bg-background/90 px-3 py-2.5 text-[15px] font-semibold leading-normal text-foreground opacity-90  transition-all hover:bg-muted/50 "
50              >
51                <span
52                  aria-hidden="true"
53                  className="grid h-4 w-[15px] place-items-center overflow-hidden"
54                  style={{
55                    maskImage: `url(${googleMask})`,
56                    WebkitMaskImage: `url(${googleMask})`,
57                  }}
58                >
59                  <svg
60                    xmlns="http://www.w3.org/2000/svg"
61                    xmlnsXlink="http://www.w3.org/1999/xlink"
62                    xmlSpace="preserve"
63                    overflow="hidden"
64                    viewBox="0 0 268.152 273.883"
65                  >
66                    <defs>
67                      <linearGradient id="a">
68                        <stop offset="0" stopColor="#0fbc5c" />
69                        <stop offset="1" stopColor="#0cba65" />
70                      </linearGradient>
71                      <linearGradient id="g">
72                        <stop offset=".231" stopColor="#0fbc5f" />
73                        <stop offset=".312" stopColor="#0fbc5f" />
74                        <stop offset=".366" stopColor="#0fbc5e" />
75                        <stop offset=".458" stopColor="#0fbc5d" />
76                        <stop offset=".54" stopColor="#12bc58" />
77                        <stop offset=".699" stopColor="#28bf3c" />
78                        <stop offset=".771" stopColor="#38c02b" />
79                        <stop offset=".861" stopColor="#52c218" />
80                        <stop offset=".915" stopColor="#67c30f" />
81                        <stop offset="1" stopColor="#86c504" />
82                      </linearGradient>
83                      <linearGradient id="h">
84                        <stop offset=".142" stopColor="#1abd4d" />
85                        <stop offset=".248" stopColor="#6ec30d" />
86                        <stop offset=".312" stopColor="#8ac502" />
87                        <stop offset=".366" stopColor="#a2c600" />
88                        <stop offset=".446" stopColor="#c8c903" />
89                        <stop offset=".54" stopColor="#ebcb03" />
90                        <stop offset=".616" stopColor="#f7cd07" />
91                        <stop offset=".699" stopColor="#fdcd04" />
92                        <stop offset=".771" stopColor="#fdce05" />
93                        <stop offset=".861" stopColor="#ffce0a" />
94                      </linearGradient>
95                      <linearGradient id="f">
96                        <stop offset=".316" stopColor="#ff4c3c" />
97                        <stop offset=".604" stopColor="#ff692c" />
98                        <stop offset=".727" stopColor="#ff7825" />
99                        <stop offset=".885" stopColor="#ff8d1b" />
100                        <stop offset="1" stopColor="#ff9f13" />
101                      </linearGradient>
102                      <linearGradient id="b">
103                        <stop offset=".231" stopColor="#ff4541" />
104                        <stop offset=".312" stopColor="#ff4540" />
105                        <stop offset=".458" stopColor="#ff4640" />
106                        <stop offset=".54" stopColor="#ff473f" />
107                        <stop offset=".699" stopColor="#ff5138" />
108                        <stop offset=".771" stopColor="#ff5b33" />
109                        <stop offset=".861" stopColor="#ff6c29" />
110                        <stop offset="1" stopColor="#ff8c18" />
111                      </linearGradient>
112                      <linearGradient id="d">
113                        <stop offset=".408" stopColor="#fb4e5a" />
114                        <stop offset="1" stopColor="#ff4540" />
115                      </linearGradient>
116                      <linearGradient id="c">
117                        <stop offset=".132" stopColor="#0cba65" />
118                        <stop offset=".21" stopColor="#0bb86d" />
119                        <stop offset=".297" stopColor="#09b479" />
120                        <stop offset=".396" stopColor="#08ad93" />
121                        <stop offset=".477" stopColor="#0aa6a9" />
122                        <stop offset=".568" stopColor="#0d9cc6" />
123                        <stop offset=".667" stopColor="#1893dd" />
124                        <stop offset=".769" stopColor="#258bf1" />
125                        <stop offset=".859" stopColor="#3086ff" />
126                      </linearGradient>
127                      <linearGradient id="e">
128                        <stop offset=".366" stopColor="#ff4e3a" />
129                        <stop offset=".458" stopColor="#ff8a1b" />
130                        <stop offset=".54" stopColor="#ffa312" />
131                        <stop offset=".616" stopColor="#ffb60c" />
132                        <stop offset=".771" stopColor="#ffcd0a" />
133                        <stop offset=".861" stopColor="#fecf0a" />
134                        <stop offset=".915" stopColor="#fecf08" />
135                        <stop offset="1" stopColor="#fdcd01" />
136                      </linearGradient>
137                      <linearGradient
138                        xlinkHref="#a"
139                        id="s"
140                        x1="219.7"
141                        x2="254.467"
142                        y1="329.535"
143                        y2="329.535"
144                        gradientUnits="userSpaceOnUse"
145                      />
146                      <radialGradient
147                        xlinkHref="#b"
148                        id="m"
149                        cx="109.627"
150                        cy="135.862"
151                        r="71.46"
152                        fx="109.627"
153                        fy="135.862"
154                        gradientTransform="matrix(-1.93688 1.043 1.45573 2.55542 290.525 -400.634)"
155                        gradientUnits="userSpaceOnUse"
156                      />
157                      <radialGradient
158                        xlinkHref="#c"
159                        id="n"
160                        cx="45.259"
161                        cy="279.274"
162                        r="71.46"
163                        fx="45.259"
164                        fy="279.274"
165                        gradientTransform="matrix(-3.5126 -4.45809 -1.69255 1.26062 870.8 191.554)"
166                        gradientUnits="userSpaceOnUse"
167                      />
168                      <radialGradient
169                        xlinkHref="#d"
170                        id="l"
171                        cx="304.017"
172                        cy="118.009"
173                        r="47.854"
174                        fx="304.017"
175                        fy="118.009"
176                        gradientTransform="matrix(2.06435 0 0 2.59204 -297.679 -151.747)"
177                        gradientUnits="userSpaceOnUse"
178                      />
179                      <radialGradient
180                        xlinkHref="#e"
181                        id="o"
182                        cx="181.001"
183                        cy="177.201"
184                        r="71.46"
185                        fx="181.001"
186                        fy="177.201"
187                        gradientTransform="matrix(-.24858 2.08314 2.96249 .33417 -255.146 -331.164)"
188                        gradientUnits="userSpaceOnUse"
189                      />
190                      <radialGradient
191                        xlinkHref="#f"
192                        id="p"
193                        cx="207.673"
194                        cy="108.097"
195                        r="41.102"
196                        fx="207.673"
197                        fy="108.097"
198                        gradientTransform="matrix(-1.2492 1.34326 -3.89684 -3.4257 880.501 194.905)"
199                        gradientUnits="userSpaceOnUse"
200                      />
201                      <radialGradient
202                        xlinkHref="#g"
203                        id="r"
204                        cx="109.627"
205                        cy="135.862"
206                        r="71.46"
207                        fx="109.627"
208                        fy="135.862"
209                        gradientTransform="matrix(-1.93688 -1.043 1.45573 -2.55542 290.525 838.683)"
210                        gradientUnits="userSpaceOnUse"
211                      />
212                      <radialGradient
213                        xlinkHref="#h"
214                        id="j"
215                        cx="154.87"
216                        cy="145.969"
217                        r="71.46"
218                        fx="154.87"
219                        fy="145.969"
220                        gradientTransform="matrix(-.0814 -1.93722 2.92674 -.11625 -215.135 632.86)"
221                        gradientUnits="userSpaceOnUse"
222                      />
223                      <filter
224                        id="q"
225                        width="1.097"
226                        height="1.116"
227                        x="-.048"
228                        y="-.058"
229                        colorInterpolationFilters="sRGB"
230                      >
231                        <feGaussianBlur stdDeviation="1.701" />
232                      </filter>
233                      <filter
234                        id="k"
235                        width="1.033"
236                        height="1.02"
237                        x="-.017"
238                        y="-.01"
239                        colorInterpolationFilters="sRGB"
240                      >
241                        <feGaussianBlur stdDeviation=".242" />
242                      </filter>
243                      <clipPath id="i" clipPathUnits="userSpaceOnUse">
244                        <path d="M371.378 193.24H237.083v53.438h77.167c-1.241 7.563-4.026 15.003-8.105 21.786-4.674 7.773-10.451 13.69-16.373 18.196-17.74 13.498-38.42 16.258-52.783 16.258-36.283 0-67.283-23.286-79.285-54.928-.484-1.149-.805-2.335-1.197-3.507a81.115 81.115 0 0 1-4.101-25.448c0-9.226 1.569-18.057 4.43-26.398 11.285-32.897 42.985-57.467 80.179-57.467 7.481 0 14.685.884 21.517 2.648a77.668 77.668 0 0 1 33.425 18.25l40.834-39.712c-24.839-22.616-57.219-36.32-95.844-36.32-30.878 0-59.386 9.553-82.748 25.7-18.945 13.093-34.483 30.625-44.97 50.985-9.753 18.879-15.094 39.8-15.094 62.294 0 22.495 5.35 43.633 15.103 62.337v.126c10.302 19.857 25.368 36.954 43.678 49.988 15.997 11.386 44.68 26.551 84.031 26.551 22.63 0 42.687-4.051 60.375-11.644 12.76-5.478 24.065-12.622 34.301-21.804 13.525-12.132 24.117-27.139 31.347-44.404 7.23-17.265 11.097-36.79 11.097-57.957 0-9.858-.998-19.87-2.689-28.968Z" />
245                      </clipPath>
246                    </defs>
247                    <g
248                      clipPath="url(#i)"
249                      transform="matrix(.95792 0 0 .98525 -90.174 -78.856)"
250                    >
251                      <path
252                        fill="url(#j)"
253                        d="M92.076 219.958c.148 22.14 6.501 44.983 16.117 63.424v.127c6.949 13.392 16.445 23.97 27.26 34.452l65.327-23.67c-12.36-6.235-14.246-10.055-23.105-17.026-9.054-9.066-15.802-19.473-20.004-31.677h-.17l.17-.127c-2.765-8.058-3.037-16.613-3.14-25.503Z"
254                        filter="url(#k)"
255                      />
256                      <path
257                        fill="url(#l)"
258                        d="M237.083 79.025c-6.456 22.526-3.988 44.421 0 57.161 7.457.006 14.64.888 21.45 2.647a77.662 77.662 0 0 1 33.424 18.25l41.88-40.726c-24.81-22.59-54.667-37.297-96.754-37.332Z"
259                        filter="url(#k)"
260                      />
261                      <path
262                        fill="url(#m)"
263                        d="M236.943 78.847c-31.67 0-60.91 9.798-84.871 26.359a145.533 145.533 0 0 0-24.332 21.15c-1.904 17.744 14.257 39.551 46.262 39.37 15.528-17.936 38.495-29.542 64.056-29.542l.07.002-1.044-57.335c-.048 0-.093-.004-.14-.004Z"
264                        filter="url(#k)"
265                      />
266                      <path
267                        fill="url(#n)"
268                        d="m341.475 226.379-28.268 19.285c-1.24 7.562-4.028 15.002-8.107 21.786-4.674 7.772-10.45 13.69-16.373 18.196-17.702 13.47-38.328 16.244-52.687 16.255-14.842 25.102-17.444 37.675 1.043 57.934 22.877-.016 43.157-4.117 61.046-11.796 12.931-5.551 24.388-12.792 34.761-22.097 13.706-12.295 24.442-27.503 31.769-45 7.327-17.497 11.245-37.282 11.245-58.734Z"
269                        filter="url(#k)"
270                      />
271                      <path
272                        fill="#3086ff"
273                        d="M234.996 191.21v57.498h136.006c1.196-7.874 5.152-18.064 5.152-26.5 0-9.858-.996-21.899-2.687-30.998Z"
274                        filter="url(#k)"
275                      />
276                      <path
277                        fill="url(#o)"
278                        d="M128.39 124.327c-8.394 9.119-15.564 19.326-21.249 30.364-9.753 18.879-15.094 41.83-15.094 64.324 0 .317.026.627.029.944 4.32 8.224 59.666 6.649 62.456 0-.004-.31-.039-.613-.039-.924 0-9.226 1.57-16.026 4.43-24.367 3.53-10.289 9.056-19.763 16.123-27.926 1.602-2.031 5.875-6.397 7.121-9.016.475-.997-.862-1.557-.937-1.908-.083-.393-1.876-.077-2.277-.37-1.275-.929-3.8-1.414-5.334-1.845-3.277-.921-8.708-2.953-11.725-5.06-9.536-6.658-24.417-14.612-33.505-24.216Z"
279                        filter="url(#k)"
280                      />
281                      <path
282                        fill="url(#p)"
283                        d="M162.099 155.857c22.112 13.301 28.471-6.714 43.173-12.977l-25.574-52.664a144.74 144.74 0 0 0-26.543 14.504c-12.316 8.512-23.192 18.9-32.176 30.72Z"
284                        filter="url(#q)"
285                      />
286                      <path
287                        fill="url(#r)"
288                        d="M171.099 290.222c-29.683 10.641-34.33 11.023-37.062 29.29a144.806 144.806 0 0 0 16.792 13.984c15.996 11.386 46.766 26.551 86.118 26.551.046 0 .09-.004.137-.004v-59.157l-.094.002c-14.736 0-26.512-3.843-38.585-10.527-2.977-1.648-8.378 2.777-11.123.799-3.786-2.729-12.9 2.35-16.183-.938Z"
289                        filter="url(#k)"
290                      />
291                      <path
292                        fill="url(#s)"
293                        d="M219.7 299.023v59.996c5.506.64 11.236 1.028 17.247 1.028 6.026 0 11.855-.307 17.52-.872v-59.748a105.119 105.119 0 0 1-17.477 1.461c-5.932 0-11.7-.686-17.29-1.865Z"
294                        filter="url(#k)"
295                        opacity=".5"
296                      />
297                    </g>
298                  </svg>
299                </span>
300                Continue with Google
301              </button>
302
303              <div className="flex w-full items-center justify-center gap-3">
304                <div className="h-px min-w-0 flex-1 bg-border" />
305                <span className="text-[12px] leading-normal text-muted-foreground font-medium">
306                  OR
307                </span>
308                <div className="h-px min-w-0 flex-1 bg-border" />
309              </div>
310
311              <div className="flex w-full flex-col gap-4.5">
312                <div className="flex w-full flex-col gap-6">
313                  <div className="flex flex-col gap-1.5">
314                    <label className="text-sm font-medium text-foreground">
315                      Email
316                    </label>
317                    <input
318                      type="email"
319                      aria-label="Email address"
320                      placeholder="email@example.com"
321                      className="h-10.5 w-full rounded-xl border border-border bg-background px-4 text-[16px]  outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-primary/20 transition-all shadow-sm"
322                    />
323                  </div>
324
325                  <div className="flex w-full flex-col gap-1.5">
326                    <label className="text-sm font-medium text-foreground">
327                      Password
328                    </label>
329                    <div className="relative flex items-center">
330                      <input
331                        type={showPassword ? "text" : "password"}
332                        aria-label="Password"
333                        placeholder="password"
334                        className="h-10.5 w-full rounded-xl border border-border bg-background px-4 pr-12 text-[16px] text-foreground outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-primary/20 transition-all shadow-sm"
335                      />
336                      <button
337                        type="button"
338                        aria-label={
339                          showPassword ? "Hide password" : "Show password"
340                        }
341                        onClick={() => setShowPassword((visible) => !visible)}
342                        className="absolute right-2 grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition"
343                      >
344                        {showPassword ? (
345                          <EyeOff aria-hidden="true" className="size-4" />
346                        ) : (
347                          <Eye aria-hidden="true" className="size-4" />
348                        )}
349                      </button>
350                    </div>
351                    <a
352                      href="#forgot-password"
353                      className="px-1 text-[12px] font-medium leading-normal text-muted-foreground hover:text-foreground underline transition-colors"
354                    >
355                      Forgot password
356                    </a>
357                  </div>
358                </div>
359
360                <button
361                  type="submit"
362                  className="w-full mt-2 rounded-xl bg-blue-600/90 px-1.5 py-3 text-[15px] font-semibold leading-normal text-neutral-50 shadow-sm transition-all hover:bg-blue-600 hover:shadow-md hover:translate-y-px"
363                >
364                  Login
365                </button>
366              </div>
367
368              <p className="text-center text-[13px] leading-normal text-muted-foreground">
369                Don&apos;t have an account?{" "}
370                <a
371                  href="#sign-up"
372                  className="font-medium text-primary hover:text-blue-600/80 underline transition-colors"
373                >
374                  Sign up
375                </a>
376              </p>
377            </form>
378          </div>
379        </div>
380      </section>
381
382      <aside className="relative hidden h-screen w-1/2 shrink-0 overflow-hidden rounded-bl-[30px] rounded-tl-[30px] p-[10px] lg:block">
383        <img
384          src={imageFrame}
385          alt=""
386          className="absolute left-0 top-0 h-full w-[188.9%] max-w-none"
387        />
388      </aside>
389    </main>
390  );
391}
392
393export default LoginForm;