From 7a5e9cda8bee4e5031076e54290646085de9df5f Mon Sep 17 00:00:00 2001 From: Gaurav Karakoti Date: Wed, 5 Feb 2025 16:34:58 +0530 Subject: [PATCH 1/3] UI --- frontend/app/auth/login/page.tsx | 89 ++++++++++++++++++++++ frontend/app/auth/signup/page.tsx | 122 ++++++++++++++++++++++++++++++ frontend/app/globals.css | 4 + frontend/app/layout.tsx | 24 +++++- 4 files changed, 237 insertions(+), 2 deletions(-) create mode 100644 frontend/app/auth/login/page.tsx create mode 100644 frontend/app/auth/signup/page.tsx diff --git a/frontend/app/auth/login/page.tsx b/frontend/app/auth/login/page.tsx new file mode 100644 index 0000000..1df02ae --- /dev/null +++ b/frontend/app/auth/login/page.tsx @@ -0,0 +1,89 @@ +"use client"; +import Link from "next/link"; +import { useState } from "react"; + +export default function LoginPage() { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(""); + + if (!email || !password) { + setError("Please fill in all fields"); + return; + } + + try { + const response = await fetch("/api/auth/login", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ email, password }), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.message || "Login failed"); + } + + // Redirect or handle successful login + console.log("Login successful:", data); + } catch (err) { + setError(err.message || "Login failed"); + } + }; + + return ( +
+
+

Login

+ {error &&

{error}

} +
+
+ + setEmail(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+
+ + setPassword(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+ +
+

+ Don't have an account?{" "} + + Sign up + +

+
+
+ ); +} \ No newline at end of file diff --git a/frontend/app/auth/signup/page.tsx b/frontend/app/auth/signup/page.tsx new file mode 100644 index 0000000..8adc50b --- /dev/null +++ b/frontend/app/auth/signup/page.tsx @@ -0,0 +1,122 @@ +"use client"; +import Link from "next/link"; +import { useState } from "react"; + +export default function SignupPage() { + const [name, setName] = useState(""); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); + const [error, setError] = useState(""); + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + setError(""); + + if (!name || !email || !password || !confirmPassword) { + setError("Please fill in all fields"); + return; + } + + if (password !== confirmPassword) { + setError("Passwords do not match"); + return; + } + + try { + const response = await fetch("/api/auth/signup", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ name, email, password }), + }); + + const data = await response.json(); + + if (!response.ok) { + throw new Error(data.message || "Signup failed"); + } + + // Redirect or handle successful signup + console.log("Signup successful:", data); + } catch (err) { + setError(err.message || "Signup failed"); + } + }; + + return ( +
+
+

Sign Up

+ {error &&

{error}

} +
+
+ + setName(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+
+ + setEmail(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+
+ + setPassword(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+
+ + setConfirmPassword(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+ +
+

+ Already have an account?{" "} + + Login + +

+
+
+ ); +} \ No newline at end of file diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 6b717ad..8311057 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -19,3 +19,7 @@ body { background: var(--background); font-family: Arial, Helvetica, sans-serif; } + +label, .mt-4, .text-2xl { + color: #0a0a0a; +} \ No newline at end of file diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index f7fa87e..58e5885 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; +import Link from "next/link"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -19,14 +20,33 @@ export const metadata: Metadata = { export default function RootLayout({ children, -}: Readonly<{ +}: { children: React.ReactNode; -}>) { +}) { return ( + {children} From e7b3666ebb549a6f249672fd9cc7f1e620bf5e2f Mon Sep 17 00:00:00 2001 From: Gaurav Karakoti Date: Thu, 6 Feb 2025 19:06:45 +0530 Subject: [PATCH 2/3] Updates --- frontend/app/auth/login/page.tsx | 97 +++++++------ frontend/app/auth/signup/page.tsx | 134 +++++++++-------- frontend/app/components/navbar.tsx | 26 ++++ frontend/app/globals.css | 224 ++++++++++++++++++++++++++++- frontend/app/layout.tsx | 23 +-- frontend/app/page.tsx | 2 + frontend/public/Google.webp | Bin 0 -> 2994 bytes 7 files changed, 373 insertions(+), 133 deletions(-) create mode 100644 frontend/app/components/navbar.tsx create mode 100644 frontend/public/Google.webp diff --git a/frontend/app/auth/login/page.tsx b/frontend/app/auth/login/page.tsx index 1df02ae..e467ad5 100644 --- a/frontend/app/auth/login/page.tsx +++ b/frontend/app/auth/login/page.tsx @@ -1,6 +1,7 @@ "use client"; import Link from "next/link"; import { useState } from "react"; +import Image from "next/image"; export default function LoginPage() { const [email, setEmail] = useState(""); @@ -40,49 +41,61 @@ export default function LoginPage() { return (
-
-

Login

- {error &&

{error}

} -
-
- - setEmail(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
-
- - setPassword(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
- -
-

- Don't have an account?{" "} - - Sign up - -

+
OR
+
+
+ + setEmail(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+
+ + setPassword(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+ +
+

+ Don't have an account?{" "} + + Sign up + +

+
+
+ IMG +
); diff --git a/frontend/app/auth/signup/page.tsx b/frontend/app/auth/signup/page.tsx index 8adc50b..4990fea 100644 --- a/frontend/app/auth/signup/page.tsx +++ b/frontend/app/auth/signup/page.tsx @@ -1,6 +1,7 @@ "use client"; import Link from "next/link"; import { useState } from "react"; +import Image from "next/image"; export default function SignupPage() { const [name, setName] = useState(""); @@ -47,75 +48,72 @@ export default function SignupPage() { return (
-
-

Sign Up

- {error &&

{error}

} -
-
- - setName(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
-
- - setEmail(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
-
- - setPassword(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
-
- - setConfirmPassword(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
- -
-

- Already have an account?{" "} - - Login - -

+
OR
+
+
+ + setName(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+
+ + setEmail(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+
+ + setPassword(e.target.value)} + className="w-full px-3 py-2 border rounded-lg" + required + /> +
+ +
+

+ Already have an account?{" "} + + Login + +

+
+
+ IMG +
); diff --git a/frontend/app/components/navbar.tsx b/frontend/app/components/navbar.tsx new file mode 100644 index 0000000..876bac5 --- /dev/null +++ b/frontend/app/components/navbar.tsx @@ -0,0 +1,26 @@ +import Link from "next/link"; + +export default function Navbar() { + return ( + + ); +} \ No newline at end of file diff --git a/frontend/app/globals.css b/frontend/app/globals.css index 8311057..a078957 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -16,10 +16,228 @@ body { color: var(--foreground); - background: var(--background); + background: #121212; font-family: Arial, Helvetica, sans-serif; + min-height: 100vh; } -label, .mt-4, .text-2xl { - color: #0a0a0a; +label, .text-2xl { + color: #6efa75; +} + +.bg-gray-100 { + background: radial-gradient(circle at center, #1e2d1e, #121212); + box-shadow: 0px 4px 30px rgba(0, 255, 128, 0.2); +} + +.min-h-screen { + min-height: 100vh; +} + +.bg-white { + background-color: #ffffff; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.shadow-md { + box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} + +.font-bold { + font-weight: 600; +} + +.text-center { + text-align: center; +} + +.w-full { + width: 100%; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + +.border { + border-width: 1px; + border-color: #e2e8f0; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.bg-blue-500 { + background-color: #63bb6a; +} + +.bg-blue-500:hover { + background-color: #4f9655; +} + +.text-white { + color: #ffffff; +} + +.text-blue-500 { + color: #6efa75; +} + +.text-blue-500:hover { + text-decoration: underline; + color: #057420; +} + +.continue-with-google { + display: flex; + align-items: center; + justify-content: center; + padding: 1.2rem; + border-radius: 4rem; + font-weight: 500; + margin-bottom: 1.5rem; + color: #6efa75; + background: transparent; + border: 2px solid rgba(255, 255, 255, 0.3); + width: 100%; + font-size: 16px; + outline: none; + transition: all 0.3s ease-in-out; +} + +.continue-with-google:hover { + background-color: #f8fafc; + color: #057420; +} + +.or-divider { + display: flex; + align-items: center; + color: #ffffff; + margin: 1.5rem 0; +} + +.or-divider::before, +.or-divider::after { + content: ""; + flex: 1; + border-bottom: 1px solid #e2e8f0; +} + +.or-divider::before { + margin-right: 1rem; +} + +.or-divider::after { + margin-left: 1rem; +} + +.text-red-500 { + color: #ef4444; +} + +.mb-4 { + margin-bottom: 1rem; +} + +.mb-6 { + margin-bottom: 1.5rem; +} + +.mt-4 { + margin-top: 1rem; + color: #ffffff; +} + +.p-8 { + padding: 2rem; +} + +button { + transition: all 0.15s ease; +} + +input:focus { + outline: none; + border-color: #6efa75; + box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.1); +} + +label { + color: #6efa75; +} + +.text-red-500 { + color: #6efa75; +} + +form, form * { + color: #6efa75; +} + +input { + color: black; + background: transparent; + border: 2px solid rgba(255, 255, 255, 0.3); + padding: 12px; + width: 100%; + color: white; + font-size: 16px; + border-radius: 8px; + outline: none; + transition: all 0.3s ease-in-out; +} + +.container { + display: flex; + justify-content: space-between; + align-items: center; + padding: 2rem; + max-width: 900px; + margin: 0 auto; + border-radius: 2rem; +} + +.google { + border-radius: 50px; +} + +@media (max-width: 594px) { + .container { + flex-direction: column; + align-items: center; + justify-content: center; + } + + .right-image { + display: none; + margin: 20px auto 0 auto; + } + + .bg-gray-100 { + background-color: #000; + background-image: + radial-gradient(circle at center, #2d2d2d 0%, #000 100%), + linear-gradient(135deg, #507d2a 0%, #507d2a 70%, transparent 70%), + linear-gradient(315deg, #507d2a 0%, #507d2a 70%, transparent 70%); + background-repeat: no-repeat, no-repeat, no-repeat; + background-position: center, top left, bottom right; + background-size: cover, 400px, 400px; + } } \ No newline at end of file diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 58e5885..a5e4840 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -1,7 +1,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; -import Link from "next/link"; +import Navbar from "./components/navbar"; const geistSans = Geist({ variable: "--font-geist-sans", @@ -28,27 +28,10 @@ export default function RootLayout({ - + {children} ); } + diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 9007252..7e7b262 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -11,6 +11,7 @@ export default function Home() { width={180} height={38} priority + />
  1. @@ -30,6 +31,7 @@ export default function Home() { target="_blank" rel="noopener noreferrer" > + 7Ki@)zM1*UX-8{nlRJ!>oB23wEkD-%209Wy zOfMX$#u83YY>PE&qPEaG(+&4X&7~6Mhvz2MnZ^T0UzE@o_Wr%j%LOh`dfwwL*Mb*n(Q#^6=_S6zY}1%Ebv9vWPJ%*5%_5>v zL{v($`?jmHo_`E{r;DmAzk2hHu#@Cp&>OW^L2H!;xPdPmyb9>7UD$@Kg0HoDkNF+j zw->~N^>naHb^`qQk1FFdy*7ppd{kRlMs<(@gl<%~;oyVBUh;H{&>t zPHmO}5#+&`41?WfhBkhpp;P(fU+yO2w$3Yf+jCzgsTYKfoxNGdOr4^~4Z^9Ce}j+? z;OO|F5cRcD%P~3+$5Bx&w{=u6J^yGgaZiAM2KmqX*>+o1-H700ck@q`1zDkp`hjFM zT#iy&n~O!z`Z>ugNjIrD<5#uB3q@eTmeZL&sPFC}ml*NOj#80F_{|JB%lLHEp~%81 z)VJE&PF-=#Rfl!3Hus`?$rHN(&5^Weu@OM{d=)F<@OFPg7dy|lWbVYUnp|tH-Z&@+ z7dY(5A4uJ3ytCTzO=y0efGHK8nZVK5MA}JwUd+!E=#&A6l5f zC>Iq`Ors0Pb0g#Bl~8AUO^(41mm4+O7g)lsE?r(0)9T{F!k#jxa}(E&8#rD_j6W^y z+fb9*HB?%Hm0JorNp`NO4<(WV8Vnb;M3OXm?yM>a{g{(C&k`9fV!K!;uja!jXXLfR z#n`EXtnuZ=Aigom$XBOc@C0&N7qhNk8m^+9?$K1zd&Hw2Xi!Ba_)idkDkzs7M2=7(r73k7aK zTnWQ5ARtm*HA?CNO#UYqcHOeSahI*Ak-y;035pu=p&+ttE}=5y)B!JjN+9ZJ@XWd(T`c%I9_jM!26oBhoAOh&e4;@vM;8QMrT#*6e?x|yaiDnjJ< zWh80s;f`;A?CzA7yd_v3HzOT7Wgie&8aK#-D}fqx>@}cG-W{McjF^iAmCHV=y5$Fv+aS~Q z_i#j>rD&~{`q{-mMHPv+R_wNYbLI)VK|a?%H&}@Hk^S5TZI(*;Zf04I_tpgM5nU3e zOME!Kk-5z=J0uOC7l^nMU{41=#$Keu$X>H`Yy8Q?#qOJTk`A7S+H#iL(k<>T?r0&u zj#foKulK?wq1wtqh4MXjB`|HWt5BwmE{L3OSVb9zv~3gSBmXvhK!h87w{+V%_uH`V z+;haI+Z)*{ljp}&I909pos<2xY08tyd&v#hJ&hW@G<&`=m$xpy@NN9nw~d9dOMP5+ z@YMi@8phAiOg|Ho4^1T64@#WoD-v+-*C9i6Pp&B{n^yGW)%a_KnmZ@J-y!nS&HwDA zZ5LG%^Ct4swJ49eed{Z#c~=)4hZOJ)ui0hqd1MVLWuri|iRTWrQcf+;@{_XZwJ^o+ z+v@rw#*PpSC96gTgQ6t&WJEkY_`cL-wNh8K+{%^q_mW0@HJQdH$TN86r}(=z3Ra?| zXINz2-BRBwVPkxn4(*o4{4;o0U{5hKfEHojg6hhJ;As&&rln%UK2P>SqIfg_UD z>SM|d8GZ3S$)lEgqW4`}25=IMf;MmOG#iO)gnmpLLT1VV{D@p#GDYZ&-Q|WWy1Y2u z2DX_C_P$Xofd-P-tjbrX7GEL@U9h4&HOm{t`dxnu1~{~C@DeldpoG<>hw1Ag-)qKo zZ=NljZxfed@xDNg;cq-=FHG7_F(VFdD$MUqpAR{ixm0QGITf@9?Awd+@9CY~@=6Mf zaBSyyz3~9VF_c&bNPS0{d-ws$Fs+B!W-=kROb|xH?v+YW_E2Ta{Nlz1^%2chaCN`I zqchuszT0nQ4j3oSNnly^cvEJ*;fixxFlpiA^J|TCAcs#<@K@RgQFn4J^%K?Ugg(5vEk{o0mz}V=LMGYIWL8HTrfpLO21qpI+5Efe%^8E1ofAOay?DUb%R7PN~djf#IzSytdEG|(T4*-cL06J Date: Fri, 7 Feb 2025 22:45:57 +0530 Subject: [PATCH 3/3] Updates --- frontend/app/auth/login/page.tsx | 111 +++++++++++++-------- frontend/app/auth/signup/page.tsx | 136 ++++++++++++++----------- frontend/app/components/navbar.tsx | 1 - frontend/app/globals.css | 107 +++++++++++--------- frontend/app/page.tsx | 1 - frontend/public/login.svg | 155 +++++++++++++++++++++++++++++ 6 files changed, 360 insertions(+), 151 deletions(-) create mode 100644 frontend/public/login.svg diff --git a/frontend/app/auth/login/page.tsx b/frontend/app/auth/login/page.tsx index e467ad5..c17bfff 100644 --- a/frontend/app/auth/login/page.tsx +++ b/frontend/app/auth/login/page.tsx @@ -40,61 +40,84 @@ export default function LoginPage() { }; return ( -
    - {/* Changed max width to allow two side-by-side items */} -
    -
    - -

    Login

    - {error &&

    {error}

    } - -
    OR
    -
    -
    - - setEmail(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
    -
    - - setPassword(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> + +
    OR
    + + +
    +
    + + setEmail(e.target.value)} + className="w-full px-4 py-3 bg-secondary/5 border border-border rounded-lg focus:ring-primary" + placeholder="Enter your email" + /> +
    + +
    + + setPassword(e.target.value)} + className="w-full px-4 py-3 bg-secondary/5 border border-border rounded-lg focus:ring-primary" + placeholder="••••••••" + /> +
    + + {error &&

    {error}

    } + -

    + +

    Don't have an account?{" "} - - Sign up + + Create account

    -
    - IMG + + {/* Right Section - Illustration */} +
    +
    + Authentication Illustration +
    diff --git a/frontend/app/auth/signup/page.tsx b/frontend/app/auth/signup/page.tsx index 4990fea..c989b65 100644 --- a/frontend/app/auth/signup/page.tsx +++ b/frontend/app/auth/signup/page.tsx @@ -41,80 +41,104 @@ export default function SignupPage() { // Redirect or handle successful signup console.log("Signup successful:", data); - } catch (err) { + } catch (err: any) { setError(err.message || "Signup failed"); } }; return ( -
    -
    -
    -

    Sign Up

    - {error &&

    {error}

    } - -
    OR
    -
    -
    - - setName(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
    -
    - - setEmail(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> -
    -
    - - setPassword(e.target.value)} - className="w-full px-3 py-2 border rounded-lg" - required - /> + +
    OR
    + + +
    +
    + + setName(e.target.value)} + className="w-full px-4 py-3 bg-secondary/5 border border-border rounded-lg focus:ring-primary" + placeholder="Enter your full name" + /> +
    +
    + + setEmail(e.target.value)} + className="w-full px-4 py-3 bg-secondary/5 border border-border rounded-lg focus:ring-primary" + placeholder="Enter your email" + /> +
    +
    + + setPassword(e.target.value)} + className="w-full px-4 py-3 bg-secondary/5 border border-border rounded-lg focus:ring-primary" + placeholder="••••••••" + /> +
    + + {error &&

    {error}

    } + -

    + +

    Already have an account?{" "} - - Login + + Sign in

    -
    - IMG + + {/* Right Section - Illustration */} +
    +
    + Registration Illustration +
    ); -} \ No newline at end of file +} diff --git a/frontend/app/components/navbar.tsx b/frontend/app/components/navbar.tsx index 876bac5..cfbb9a4 100644 --- a/frontend/app/components/navbar.tsx +++ b/frontend/app/components/navbar.tsx @@ -14,7 +14,6 @@ export default function Navbar() { Login - Sign Up diff --git a/frontend/app/globals.css b/frontend/app/globals.css index a078957..ffa86f8 100644 --- a/frontend/app/globals.css +++ b/frontend/app/globals.css @@ -21,15 +21,6 @@ body { min-height: 100vh; } -label, .text-2xl { - color: #6efa75; -} - -.bg-gray-100 { - background: radial-gradient(circle at center, #1e2d1e, #121212); - box-shadow: 0px 4px 30px rgba(0, 255, 128, 0.2); -} - .min-h-screen { min-height: 100vh; } @@ -47,15 +38,6 @@ label, .text-2xl { 0 2px 4px -1px rgba(0, 0, 0, 0.06); } -.text-2xl { - font-size: 1.5rem; - line-height: 2rem; -} - -.font-bold { - font-weight: 600; -} - .text-center { text-align: center; } @@ -64,16 +46,6 @@ label, .text-2xl { width: 100%; } -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - .border { border-width: 1px; border-color: #e2e8f0; @@ -84,7 +56,12 @@ label, .text-2xl { } .bg-blue-500 { + display: flex; background-color: #63bb6a; + width: auto; + padding: 10px 20px; + justify-self: center; + font-size: 18; } .bg-blue-500:hover { @@ -115,7 +92,8 @@ label, .text-2xl { color: #6efa75; background: transparent; border: 2px solid rgba(255, 255, 255, 0.3); - width: 100%; + width: auto; + justify-self: center; font-size: 16px; outline: none; transition: all 0.3s ease-in-out; @@ -152,19 +130,6 @@ label, .text-2xl { color: #ef4444; } -.mb-4 { - margin-bottom: 1rem; -} - -.mb-6 { - margin-bottom: 1.5rem; -} - -.mt-4 { - margin-top: 1rem; - color: #ffffff; -} - .p-8 { padding: 2rem; } @@ -183,10 +148,6 @@ label { color: #6efa75; } -.text-red-500 { - color: #6efa75; -} - form, form * { color: #6efa75; } @@ -209,7 +170,6 @@ input { justify-content: space-between; align-items: center; padding: 2rem; - max-width: 900px; margin: 0 auto; border-radius: 2rem; } @@ -218,7 +178,7 @@ input { border-radius: 50px; } -@media (max-width: 594px) { +@media (max-width: 534px) { .container { flex-direction: column; align-items: center; @@ -240,4 +200,53 @@ input { background-position: center, top left, bottom right; background-size: cover, 400px, 400px; } -} \ No newline at end of file +} + +@layer base { + :root { + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; + --primary: 142.1 76.2% 36.3%; + --primary-foreground: 355.7 100% 97.3%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --border: 240 5.9% 90%; + } + + .dark { + --background: 240 10% 3.9%; + --foreground: 0 0% 98%; + --primary: 142.1 70.6% 45.3%; + --primary-foreground: 144.9 80.4% 10%; + --secondary: 240 3.7% 15.9%; + --secondary-foreground: 0 0% 98%; + --accent: 240 3.7% 15.9%; + --accent-foreground: 0 0% 98%; + --border: 240 3.7% 15.9%; + } +} + +@layer utilities { + .bg-pattern { + @apply bg-neutral-100 dark:bg-neutral-900; + background-image: + radial-gradient(at 4% 8%, hsla(120,60%,90%,0.1) 0px, transparent 50%), + radial-gradient(at 80% 90%, hsla(120,60%,90%,0.1) 0px, transparent 50%); + } + + .bg-glass { + @apply bg-white/50 dark:bg-neutral-800/50; + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + } +} + +body { + @apply bg-background text-foreground font-sans; +} + +input, button { + @apply transition-all duration-200 ease-out; +} diff --git a/frontend/app/page.tsx b/frontend/app/page.tsx index 7e7b262..4966a3c 100644 --- a/frontend/app/page.tsx +++ b/frontend/app/page.tsx @@ -11,7 +11,6 @@ export default function Home() { width={180} height={38} priority - />
    1. diff --git a/frontend/public/login.svg b/frontend/public/login.svg new file mode 100644 index 0000000..8a7f99c --- /dev/null +++ b/frontend/public/login.svg @@ -0,0 +1,155 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +