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,12 +1,24 @@
+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 (
     <main className={styles.root}>
       <Container>
+        {/* Kategorilerin buton gibi yan yana dizilmiş hali */}
+        <div className={styles.categories}>
+          {CATEGORIES.map((category) => (
+            <Link key={category.slug} href={`/kategoriler/${category.slug}`}>
+              <div className={styles.categoryButton}>
+                <span>{category.name}</span>
+              </div>
+            </Link>
+          ))}
+        </div>
+
         <section>
           <h1 className={styles.sectionTitle}>Çok Satanlar</h1>
           <CourseGrid courses={COURSES} />

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,3 +1,12 @@
+// 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",
@@ -5,10 +14,25 @@ export const COURSES = [
 	  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: "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!",
+		price: "0.05",
+		start: "",
+		imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
+		instructor: {
+		  name: "Mehmet Hayırlı",
+		},
+		category: CATEGORIES.find((category) => category.slug === "blokzincir"),
 	  },
 	{
 	  id: "c7253736-5756-4a64-a072-917c66afa877",
@@ -16,10 +40,12 @@ export const COURSES = [
 	  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: "59a8f94b-7358-4ffe-bced-a54cccc93e64",
@@ -27,9 +53,23 @@ export const COURSES = [
 	  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/masalik.webp",
 	  instructor: {
 		name: "Berk Çiçek",
 	  },
+	  category: CATEGORIES.find((category) => category.slug === "linux"),
+	},
+	{
+	  id: "6a375fae8-5f4e-4244d-a05e-44b84b8adaf7aed",
+	  name: "Yapay Zekaya Giriş",
+	  description: "Hosta La Vista!",
+	  price: "0.05",
+	  imageUrl: "https://osmannyildiz.tk/cublearn/akinci.webp",
+	  instructor: {
+		name: "Muhammed Akıncı",
+	  },
+	  category: CATEGORIES.find((category) => category.slug === "yapay-zeka"),
 	},
   ];
+