add my account page

src/app/globals.css

@@ -26,13 +26,10 @@ a {
 }
 
 .btn {
-	color: white;
-	background-color: var(--color-accent);
-	border: none;
 	border-radius: var(--border-radius);
 	padding: 0.75rem 1rem;
 	font-size: 1rem;
-	font-weight: 700;
+	font-weight: 600;
 	cursor: pointer;
 	transition: transform 0.125s;
 }
@@ -42,6 +39,33 @@ a {
 .btn:active {
 	transform: scale(0.95);
 }
+.btn-primary {
+	color: white;
+	background-color: var(--color-accent);
+	border: none;
+}
+.btn-flat {
+	color: white;
+	background-color: transparent;
+	border: none;
+}
+
+.input {
+	padding: 0.75rem;
+	border: none;
+	border-radius: var(--border-radius);
+}
+
+.input-group {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.page-title {
+	font-size: 2.5rem;
+	font-weight: 300;
+}
 
 .fg-accent {
 	color: var(--color-accent);

src/app/hesabim/page.jsx

@@ -0,0 +1,33 @@
+import Container from "@/components/Container";
+import styles from "./page.module.css";
+
+export default function MyAccountPage() {
+	return (
+		<main className={styles.root}>
+			<Container>
+				<h1 className="page-title">Hesabım</h1>
+
+				<form className={styles.form}>
+					<div className="input-group">
+						<label htmlFor="first-name">Ad</label>
+						<input className="input" type="text" id="first-name" />
+					</div>
+
+					<div className="input-group">
+						<label htmlFor="last-name">Soyad</label>
+						<input className="input" type="text" id="last-name" />
+					</div>
+
+					<div className="input-group">
+						<label htmlFor="email">E-posta adresi</label>
+						<input className="input" type="email" id="email" />
+					</div>
+
+					<button className="btn btn-primary" type="submit">
+						Kaydet
+					</button>
+				</form>
+			</Container>
+		</main>
+	);
+}

src/app/hesabim/page.module.css

@@ -0,0 +1,9 @@
+.root {
+	margin-top: 3rem;
+}
+
+.form {
+	display: flex;
+	flex-direction: column;
+	gap: 1.5rem;
+}

src/app/kurslar/[courseId]/page.jsx

@@ -18,7 +18,7 @@ export default function CourseDetailPage({ params }) {
 					<div>
 						<h1>{course.name}</h1>
 						<div>{course.instructor.name}</div>
-						<button className={cn(styles.buyButton, "btn")}>
+						<button className={cn(styles.buyButton, "btn btn-primary")}>
 							Satın Al: {formatPrice(course.price)}
 						</button>
 					</div>

src/components/Header.jsx

@@ -1,14 +1,22 @@
 import { ConnectButton } from "@rainbow-me/rainbowkit";
+import Link from "next/link";
 import styles from "./Header.module.css";
 
 export default function Header() {
 	return (
 		<header className={styles.root}>
-			<div className={styles.brand}>
+			<Link className={styles.brand} href="/">
 				<span>Cub</span>
 				<span className="fg-accent">Learn</span>
+			</Link>
+
+			<div className={styles.nav}>
+				<Link href="/hesabim" className="btn btn-flat">
+					Hesabım
+				</Link>
+
+				<ConnectButton />
 			</div>
-			<ConnectButton />
 		</header>
 	);
 }

src/components/Header.module.css

@@ -12,3 +12,9 @@
 	font-size: 2rem;
 	font-weight: 300;
 }
+
+.nav {
+	display: flex;
+	align-items: center;
+	gap: 2.5rem;
+}