fix: pages dir in root

src/pages/HomePage/index.ts

@@ -0,0 +1,3 @@
+import HomePage from "./ui/HomePage"
+
+export { HomePage }

src/pages/HomePage/ui/HomePage.module.scss

@@ -0,0 +1,65 @@
+.homepage {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	justify-content: center;
+	gap: 1rem;
+
+	height: 100vh;
+
+	color: #c7d0cc;
+
+	background: #000;
+
+	font-family: Roboto, sans-serif;
+	font-size: 2vw;
+	font-weight: bold;
+}
+
+.path {
+	font-style: italic;
+}
+
+.font {
+	font-size: 5vw;
+}
+
+.hint {
+	padding: 0.5rem;
+
+	pointer-events: none;
+
+	border: rgb(199 208 204 / 5%) 1px solid;
+	border-radius: 15px;
+
+	font-size: 1vw;
+}
+
+.testHint {
+	margin: 0 30px;
+}
+
+.link {
+	transition: 0.3s;
+	animation: shine 4s linear infinite;
+
+	color: #000;
+	background: linear-gradient(
+		to right,
+		#020024 10%,
+		#5b0979 40%,
+		#5b0979 60%,
+		#020024 80%
+	);
+	background-clip: text;
+	background-size: 200% auto;
+
+	font-size: 5vw;
+	-webkit-text-fill-color: transparent;
+
+	@keyframes shine {
+		to {
+			background-position: 200% center;
+		}
+	}
+}

src/pages/HomePage/ui/HomePage.test.tsx

@@ -0,0 +1,19 @@
+import "@testing-library/jest-dom"
+
+import { render, screen } from "@testing-library/react"
+
+import HomePage from "./HomePage"
+
+describe("Page", () => {
+	test("renders a yunglocokid", () => {
+		render(<HomePage />)
+		const yunglocokid: HTMLElement = screen.getByText("yunglocokid")
+		expect(yunglocokid).toBeInTheDocument()
+	})
+	test("renders a hint", () => {
+		render(<HomePage />)
+		screen.debug()
+		const hint: HTMLElement = screen.getByTestId("hint-code")
+		expect(hint).toBeInTheDocument()
+	})
+})

src/pages/HomePage/ui/HomePage.tsx

@@ -0,0 +1,29 @@
+import Link from "next/link"
+
+import cls from "./HomePage.module.scss"
+
+const HomePage = () => {
+	return (
+		<div className={cls.homepage}>
+			<p className={cls.font}>
+				Hello from{" "}
+				<Link
+					href="https://github.com/yunglocokid"
+					target="_blank"
+					className={cls.link}
+				>
+					yunglocokid
+				</Link>
+			</p>
+			<pre className={cls.hint} data-testid="hint-code">
+				You can edit <span className={cls.path}>src/pages/HomePage</span> to
+				start {"<3"}!<br />
+				<small className={cls.testHint}>
+					You can also test your application using Jest :D. Try it!
+				</small>
+			</pre>
+		</div>
+	)
+}
+
+export default HomePage