Frontend kısmında iyileştirmeler yapıldı. Fixlendi

src/app/kategoriler / [categorySlug]/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/app/kategoriler /page.jsx

@@ -0,0 +1,42 @@
+import Container from "@/components/Container";
+import styles from "./page.module.css";
+import { COURSES } from "@/mockData";
+import { formatPrice } from "@/utils";
+import CourseGrid from "@/components/CourseGrid";
+
+export default function CategoryPage({ params }) {
+  // Seçilen kategoriye göre kursları filtrele
+  const filteredCourses = COURSES.filter(
+    (course) => course.category.slug === params.categorySlug
+  );
+
+  // Eğer filtrelenen kurslar boşsa, isteğe bağlı bir mesaj gösterebilirsiniz
+  if (filteredCourses.length === 0) {
+    return (
+      <main className={styles.root}>
+        <Container>
+          <section>
+            <div>
+              <h1 className={styles.sectionTitle}>Bu kategoriye ait kurs bulunamadı.</h1>
+            </div>
+          </section>
+        </Container>
+      </main>
+    );
+  }
+
+  // Filtrelenen kurslar varsa, her bir kurs için ayrı bir blok oluşturun
+  return (
+    <main className={styles.root}>
+      <Container>
+        <section>
+          <div>
+            <h1 className={styles.sectionTitle}>{params.categorySlug}</h1>
+            <h2 className={styles.sectionTitle}>Çok Satanlar</h2>
+            <CourseGrid courses={filteredCourses} />
+          </div>
+        </section>
+      </Container>
+    </main>
+  );
+}

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

@@ -21,6 +21,9 @@ export default function CourseDetailPage({ params }) {
 						<button className={cn(styles.buyButton, "btn btn-primary")}>
 							Satın Al: {formatPrice(course.price)}
 						</button>
+						<button className={cn(styles.buyButton, "btn btn-primary")}>
+							Eğitime Başla
+						</button>
 					</div>
 				</div>
 

src/app/page.jsx

@@ -1,17 +1,29 @@
+import Link from "next/link";
 import Container from "@/components/Container";
 import CourseGrid from "@/components/CourseGrid";
-import { COURSES } from "@/mockData";
+import { CATEGORIES, COURSES } from "@/mockData";
 import styles from "./page.module.css";
 
 export default function HomePage() {
-	return (
+  return (
-		<main className={styles.root}>
+    <main className={styles.root}>
-			<Container>
+      <Container>
-				<section>
+        {/* Kategorilerin buton gibi yan yana dizilmiş hali */}
-					<h1 className={styles.sectionTitle}>Çok Satanlar</h1>
+        <div className={styles.categories}>
-					<CourseGrid courses={COURSES} />
+          {CATEGORIES.map((category) => (
-				</section>
+            <Link key={category.slug} href={`/kategoriler/${category.slug}`}>
-			</Container>
+              <div className={styles.categoryButton}>
-		</main>
+                <span>{category.name}</span>
-	);
+              </div>
+            </Link>
+          ))}
+        </div>
+
+        <section>
+          <h1 className={styles.sectionTitle}>Çok Satanlar</h1>
+          <CourseGrid courses={COURSES} />
+        </section>
+      </Container>
+    </main>
+  );
 }

src/app/page.module.css

@@ -7,3 +7,17 @@
 	font-weight: 300;
 	margin-bottom: 1rem;
 }
+
+.categories {
+	display: flex;
+	gap: 8px;
+	margin-bottom: 16px;
+  }
+  
+  .categoryButton {
+	padding: 8px;
+	background-color: #f0f0f0;
+	border: 1px solid #ccc;
+	border-radius: 4px;
+	cursor: pointer;
+  }

src/components/Header.jsx

@@ -1,3 +1,4 @@
+// Header.js
 import { ConnectButton } from "@rainbow-me/rainbowkit";
 import Link from "next/link";
 import styles from "./Header.module.css";
@@ -11,6 +12,14 @@ export default function Header() {
 			</Link>
 
 			<div className={styles.nav}>
+				{/* Arama butonu ekleniyor */}
+				<div className={styles.search}>
+					<input className={styles["search-input"]} type="text" placeholder="Ara..." />
+					<button className={styles["search-button"]} type="button">
+						Ara
+					</button>
+				</div>
+
 				<Link href="/hesabim" className="btn btn-flat">
 					Hesabım
 				</Link>

src/components/Header.module.css

@@ -18,3 +18,23 @@
 	align-items: center;
 	gap: 2.5rem;
 }
+
+.search {
+	display: flex;
+	align-items: center;
+  
+	/* input yerine .search-input class'ını kullan */
+	.search-input {
+	  padding: 8px;
+	  margin-right: 8px;
+	}
+  
+	/* button yerine .search-button class'ını kullan */
+	.search-button {
+	  padding: 8px 16px;
+	  background-color: #ff0000;
+	  color: #fff;
+	  border: none;
+	  cursor: pointer;
+	}
+  }

src/mockData.js

@@ -1,35 +1,75 @@
-export const COURSES = [
+// categories
+export const CATEGORIES = [
+	{ slug: "blokzincir", name: "Blokzincir" },
+	{ slug: "ön-yüz", name: "Frontend" },
+	{ slug: "linux", name: "Linux" },
+	{ slug: "yapay-zeka", name: "Yapay Zeka" },
+  ];
+  
+  // courses
+  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",
+	  start: "",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
+	  instructor: {
+		name: "Baturalp Güvenç",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "blokzincir"),
+	},
 	{
 		id: "6a3753e8-5f4e-4f4d-a05e-44b84b8f7aed",
-		name: "Ethereum ve Solidity",
+		name: "Audit",
 		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!",
+		  "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",
+		start: "",
 		imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
 		instructor: {
-			name: "Baturalp Güvenç",
+		  name: "Mehmet Hayırlı",
 		},
+		category: CATEGORIES.find((category) => category.slug === "blokzincir"),
+	  },
+	{
+	  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",
+	  start: "",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/elmacik.webp",
+	  instructor: {
+		name: "Furkan Ayvaz",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "ön-yüz"),
 	},
 	{
-		id: "c7253736-5756-4a64-a072-917c66afa877",
+	  id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
-		name: "Next.js ile Önyüz Uygulamaları Geliştirme",
+	  name: "Pardus'a Giriş",
-		description:
+	  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!",
+		"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",
+	  price: "0.05",
-		imageUrl: "https://osmannyildiz.tk/cublearn/elmacik.webp",
+	  start: "",
-		instructor: {
+	  imageUrl: "https://osmannyildiz.tk/cublearn/masalik.webp",
-			name: "Furkan Ayvaz",
+	  instructor: {
-		},
+		name: "Berk Çiçek",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "linux"),
 	},
 	{
-		id: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
+	  id: "6a375fae8-5f4e-4244d-a05e-44b84b8adaf7aed",
-		name: "Pardus'a Giriş",
+	  name: "Yapay Zekaya Giriş",
-		description:
+	  description: "Hosta La Vista!",
-			"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",
-		price: "0.05",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
-		imageUrl: "https://osmannyildiz.tk/cublearn/masalik.webp",
+	  instructor: {
-		instructor: {
+		name: "Muhammed Akıncı",
-			name: "Berk Çiçek",
+	  },
-		},
+	  category: CATEGORIES.find((category) => category.slug === "yapay-zeka"),
 	},
-];
+  ];
+