add course detail page

src/app/globals.css

@@ -25,6 +25,24 @@ a {
 	text-decoration: none;
 }
 
+.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;
+	cursor: pointer;
+	transition: transform 0.125s;
+}
+.btn:hover {
+	transform: scale(1.025);
+}
+.btn:active {
+	transform: scale(0.95);
+}
+
 .fg-accent {
 	color: var(--color-accent);
 }

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

@@ -0,0 +1,31 @@
+import Container from "@/components/Container";
+import { COURSES } from "@/mockData";
+import { cn, formatPrice } from "@/utils";
+import styles from "./page.module.css";
+
+export default function CourseDetailPage({ params }) {
+	const course = COURSES.find((c) => c.id === params.courseId);
+
+	return (
+		<main className={styles.root}>
+			<Container>
+				<div className={styles.columns}>
+					<img
+						className={styles.image}
+						src={course.imageUrl}
+						alt="Kurs resmi"
+					/>
+					<div>
+						<h1>{course.name}</h1>
+						<div>{course.instructor.name}</div>
+						<button className={cn(styles.buyButton, "btn")}>
+							Satın Al: {formatPrice(course.price)}
+						</button>
+					</div>
+				</div>
+
+				<p className={styles.description}>{course.description}</p>
+			</Container>
+		</main>
+	);
+}

src/app/kurslar/[courseId]/page.module.css

@@ -0,0 +1,33 @@
+@media screen and (max-width: 900px) {
+	.root {
+		text-align: center;
+	}
+}
+
+.columns {
+	display: flex;
+	gap: 1.5rem;
+	align-items: flex-start;
+}
+@media screen and (max-width: 900px) {
+	.columns {
+		flex-direction: column;
+		align-items: center;
+	}
+}
+
+.image {
+	width: 50%;
+	max-width: 1280px;
+	aspect-ratio: 16 / 9;
+	object-fit: cover;
+	border-radius: var(--border-radius);
+}
+
+.buyButton {
+	margin-top: 1.5rem;
+}
+
+.description {
+	margin-top: 1.5rem;
+}

src/components/Container.module.css

@@ -2,4 +2,6 @@
 	max-width: var(--max-width);
 	margin-left: auto;
 	margin-right: auto;
+	padding-left: 1rem;
+	padding-right: 1rem;
 }

src/components/CourseGridItem.jsx

@@ -1,14 +1,15 @@
 import { formatPrice } from "@/utils";
+import Link from "next/link";
 import styles from "./CourseGridItem.module.css";
 
 export default function CourseGridItem({ course }) {
 	return (
-		<div className={styles.root}>
+		<Link href={`/kurslar/${course.id}`} className={styles.root}>
 			<img className={styles.image} src={course.imageUrl} alt="Kurs resmi" />
 			<div className={styles.body}>
 				<span className={styles.name}>{course.name}</span>
 				<span>{formatPrice(course.price)}</span>
 			</div>
-		</div>
+		</Link>
 	);
 }

src/components/CourseGridItem.module.css

@@ -2,7 +2,6 @@
 	background-color: var(--color-bg1);
 	border-radius: var(--border-radius);
 	overflow: hidden;
-	cursor: pointer;
 }
 
 .image {

src/mockData.js

@@ -2,6 +2,8 @@ export const COURSES = [
 	{
 		id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
 		name: "Ethereum ve Solidity",
+		description:
+			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
 		price: "0.05",
 		imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
 		instructor: {
@@ -11,6 +13,8 @@ export const COURSES = [
 	{
 		id: "c7253736-5756-4a64-a072-917c66afa877",
 		name: "Next.js ile Önyüz Uygulamaları Geliştirme",
+		description:
+			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
 		price: "0.05",
 		imageUrl: "https://osmannyildiz.tk/cublearn/elmacik.webp",
 		instructor: {
@@ -20,6 +24,8 @@ export const COURSES = [
 	{
 		id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
 		name: "Pardus'a Giriş",
+		description:
+			"Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem vitae veritatis deserunt quidem hic ea repellendus fugiat ducimus tenetur. Fugit cumque quo saepe possimus rem qui odit vitae dignissimos reprehenderit!",
 		price: "0.05",
 		imageUrl: "https://osmannyildiz.tk/cublearn/masalik.webp",
 		instructor: {