diff --git a/frontend/bun.lock b/frontend/bun.lock index 2141549..2c00351 100644 --- a/frontend/bun.lock +++ b/frontend/bun.lock @@ -5,6 +5,11 @@ "": { "name": "frontend", "dependencies": { + "@fontsource-variable/jost": "^5.2.8", + "@fontsource-variable/playfair-display": "^5.2.8", + "@fontsource-variable/playwrite-hr-lijeva": "^5.2.7", + "@fontsource/cutive-mono": "^5.2.8", + "@fontsource/knewave": "^5.2.7", "@hookform/resolvers": "^5.2.2", "@phosphor-icons/react": "^2.1.10", "@tailwindcss/vite": "^4.2.2", @@ -53,6 +58,16 @@ "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="], + "@fontsource-variable/jost": ["@fontsource-variable/jost@5.2.8", "", {}, "sha512-+VDDHpbhgZ9A8KeHb7/LUMRR1LILVKIscNhVRSDzn3tFXoi1mFA/OhO8CZL/u2OujoGjZANjOdUZIgaxclxyjw=="], + + "@fontsource-variable/playfair-display": ["@fontsource-variable/playfair-display@5.2.8", "", {}, "sha512-ZzVIXPOrL85yyOvZYoBzUszIJM+xKkHqni4IYn2CVLaGQQdJR8sBeC8yFNgjxSJ7ludTwta8qpULeOFuk5X75A=="], + + "@fontsource-variable/playwrite-hr-lijeva": ["@fontsource-variable/playwrite-hr-lijeva@5.2.7", "", {}, "sha512-cQqbD8HHZDpiKdtgwUxgwAY76TC+GI9iZOxHSW0XkV/L8lA0X18z1wzR+J8yv9XZQYgLJ5WfzBGwzMSLnSLdPA=="], + + "@fontsource/cutive-mono": ["@fontsource/cutive-mono@5.2.8", "", {}, "sha512-Y8PKAYfbpl9Empbb1HZBoirlj4W7RtU+G4EhvX27pHzO6RE1sO0I1ElZQH5DMCTS+MSJkMmQT33sJ0+Ji9U8eQ=="], + + "@fontsource/knewave": ["@fontsource/knewave@5.2.7", "", {}, "sha512-uzx8jgcTiQgAwKvQ/hWdX7lOQPwS+K74Eij/WCVzYvAkCX7GRTnWnbxXXx0XsKR6UIN16kH/u40LW4K8aHJb1w=="], + "@hookform/resolvers": ["@hookform/resolvers@5.2.2", "", { "dependencies": { "@standard-schema/utils": "^0.3.0" }, "peerDependencies": { "react-hook-form": "^7.55.0" } }, "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA=="], "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="], diff --git a/frontend/package.json b/frontend/package.json index 823c92a..f7cf19c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -12,6 +12,11 @@ "preview": "vite preview" }, "dependencies": { + "@fontsource-variable/jost": "^5.2.8", + "@fontsource-variable/playfair-display": "^5.2.8", + "@fontsource-variable/playwrite-hr-lijeva": "^5.2.7", + "@fontsource/cutive-mono": "^5.2.8", + "@fontsource/knewave": "^5.2.7", "@hookform/resolvers": "^5.2.2", "@phosphor-icons/react": "^2.1.10", "@tailwindcss/vite": "^4.2.2", diff --git a/frontend/src/App.css b/frontend/src/App.css index f90339d..f460279 100644 --- a/frontend/src/App.css +++ b/frontend/src/App.css @@ -167,7 +167,7 @@ &::before, &::after { - content: ''; + content: ""; position: absolute; top: -4.5px; border: 5px solid transparent; diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 246c2b9..323f6cc 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,8 +1,8 @@ -import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'; -import Home from './pages/Home'; -import Register from './pages/Register'; -import VerifyEmail from './pages/VerifyEmail'; -import Activate from './pages/Activate'; +import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom"; +import Activate from "./pages/Activate"; +import Home from "./pages/Home"; +import Register from "./pages/Register"; +import VerifyEmail from "./pages/VerifyEmail"; export default function App() { return ( @@ -10,7 +10,7 @@ export default function App() {
} /> - } /> + } /> } /> } /> } /> diff --git a/frontend/src/components/Logo.tsx b/frontend/src/components/Logo.tsx new file mode 100644 index 0000000..3709643 --- /dev/null +++ b/frontend/src/components/Logo.tsx @@ -0,0 +1,14 @@ +import { DotIcon } from "@phosphor-icons/react" +import "@fontsource/knewave" + +export default function Logo() { + + return ( +
+  Pi + + Ku + +
+ ); +} diff --git a/frontend/src/index.css b/frontend/src/index.css index 5c91c3c..bd0e23f 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -14,8 +14,8 @@ --color-primary-content: #c8b890; --color-secondary: #2a1e13; --color-secondary-content: #e8d5b0; - --color-accent: #3d2e1e; - --color-accent-content: #c8903a; + --color-accent: #c8903a; + --color-accent-content: #3d2e1e; --color-neutral: #2e2820; --color-neutral-content: oklch(98% 0.016 73.684); --color-info: #2a3040; @@ -24,7 +24,7 @@ --color-success-content: #8aaa8a; --color-warning: #4a3010; --color-warning-content: #d4a050; - --color-error: #3d1e1a; + --color-error: #3d1e1f; --color-error-content: #c07060; --radius-selector: 1rem; --radius-field: 0rem; @@ -35,3 +35,17 @@ --depth: 0; --noise: 0; } + +@theme { + --font-logo: "Knewave", system-ui; + --font-display: "Playwrite HR Lijeva Variable", cursive; + --font-sans: "Jost Variable", sans-serif; + --font-serif: "Playfair Display Variable", serif; + --color-glass-bg: rgba(35, 30, 24, 0.4); + --shadow-warm: 0 20px 50px -12px rgba(42, 30, 19, 0.5); + --radius-xl: 1.5rem; +} + +.glass-card { + @apply bg-glass-bg backdrop-blur-xl border border-white/5 shadow-warm rounded-xl; +} diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx index bef5202..719ab8a 100644 --- a/frontend/src/main.tsx +++ b/frontend/src/main.tsx @@ -1,10 +1,16 @@ -import { StrictMode } from 'react' -import { createRoot } from 'react-dom/client' -import './index.css' -import App from './App.tsx' +import { StrictMode } from "react"; +import { createRoot } from "react-dom/client"; +import "./index.css"; +import "@fontsource-variable/playwrite-hr-lijeva/wght.css"; +import "@fontsource-variable/jost/wght.css"; +import "@fontsource-variable/playfair-display/wght.css"; +import App from "./App.tsx"; -createRoot(document.getElementById('root')!).render( - - - , -) +const root = document.getElementById("root"); +if (root) { + createRoot(root).render( + + + , + ); +} diff --git a/frontend/src/pages/Activate.tsx b/frontend/src/pages/Activate.tsx index 112c6de..5d10108 100644 --- a/frontend/src/pages/Activate.tsx +++ b/frontend/src/pages/Activate.tsx @@ -1,7 +1,7 @@ export default function Activate() { - return ( -
-

Activate

-
- ); + return ( +
+

Activate

+
+ ); } diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 0af66a9..8e56b82 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -1,7 +1,9 @@ +import Logo from "../components/Logo"; + export default function Home() { - return ( -
-

Pi. Ku.

-
- ); + return ( +
+ +
+ ); } diff --git a/frontend/src/pages/Register.tsx b/frontend/src/pages/Register.tsx index c2744fe..80d1410 100644 --- a/frontend/src/pages/Register.tsx +++ b/frontend/src/pages/Register.tsx @@ -1,7 +1,112 @@ +import { zodResolver } from "@hookform/resolvers/zod"; +import { InfoIcon } from "@phosphor-icons/react"; +import { useForm } from "react-hook-form"; +import { z } from "zod"; +import Logo from "../components/Logo"; + +// validation logic +const registerSchema = z + .object({ + email: z.email("Please enter a valid email"), + password: z + .string() + .check(z.minLength(8, "Password must be at least 8 characters")), + confirm_password: z.string(), + }) + .refine((data) => data.password === data.confirm_password, { + message: "Passwords don't match", + path: ["confirm_password"], + }); + +type RegisterInputs = z.infer; + export default function Register() { - return ( -
-

Register

+ const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + resolver: zodResolver(registerSchema), + }); + + const onSubmit = (data: RegisterInputs) => { + console.log("Form Data:", data); + }; + + return ( +
+
+

+ Create a Account +

+ +
+ + + {errors.email && ( +

{errors.email.message}

+ )}
- ); + +
+ + + {errors.password && ( +

{errors.password.message}

+ )} +
+ + {/* Confirm Pass */} +
+ + + {errors.confirm_password && ( +

+ {errors.confirm_password.message} +

+ )} +
+ + {/* Warning */} +
+ +

+ Choose a password you won't forget.
+ There is no reset. If you lose it, your letters cannot be recovered. +

+
+ +
+ +
+
+
+ ); } diff --git a/frontend/src/pages/VerifyEmail.tsx b/frontend/src/pages/VerifyEmail.tsx index 097e58c..ee9fd16 100644 --- a/frontend/src/pages/VerifyEmail.tsx +++ b/frontend/src/pages/VerifyEmail.tsx @@ -1,7 +1,7 @@ export default function VerifyEmail() { - return ( -
-

Verify Email

-
- ); + return ( +
+

Verify Email

+
+ ); }