ana sayfa stili değiştirildi ve sayfa numaraları eklendi.

commons/home.js

@@ -1,23 +1,51 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Searchbar from "../components/searchbar";
 import Link from "next/link";
 
 export default function Home({ rehberler }) {
   const [search, setSearch] = useState("");
-  const filteredPosts =
+  const [posts, setPosts] = useState([]);
-    search.length === 0
+  const [currentPage, setCurrentPage] = useState(1);
-      ? rehberler
+  const [postsPerPage] = useState(15);
-      : rehberler.filter((rehber) =>
+
-          rehber.fields.title.toLowerCase().includes(search.toLowerCase())
+  const indexOfLastPost = currentPage * postsPerPage;
-        );
+  const indexOfFirstPost = indexOfLastPost - postsPerPage;
+  const currentPosts = posts.slice(indexOfFirstPost, indexOfLastPost);
+
+  const pageNumbers = [];
+  for (let i = 1; i <= Math.ceil(rehberler.length / postsPerPage); i++) {
+    pageNumbers.push(i);
+  }
+
+  const paginate = (pageNumber) => setCurrentPage(pageNumber);
+
+  useEffect(() => {
+    const fetchPosts = async () => {
+      let filteredPosts =
+        search.length === 0
+          ? rehberler
+          : rehberler.filter((rehber) =>
+              rehber.fields.title.toLowerCase().includes(search.toLowerCase())
+            );
+
+      setCurrentPage(1);
+      setPosts(filteredPosts);
+    };
+
+    fetchPosts();
+  }, [search.length]);
 
   return (
     <div className="homepage">
-      <Searchbar search={search} setSearch={setSearch} />
-
       <h1>Rehberler</h1>
+      <Searchbar
+        className="homepage_searchbar"
+        search={search}
+        setSearch={setSearch}
+      />
+
       <div className="homepage_posts">
-        {filteredPosts.slice(0, 21).map((rehber) => (
+        {currentPosts.map((rehber) => (
           <li key={rehber.fields.title}>
             <Link href={`/rehber/${rehber.fields.slug}`}>
               {rehber.fields.title}
@@ -25,6 +53,14 @@ export default function Home({ rehberler }) {
           </li>
         ))}
       </div>
+
+      <ul className="homepage_pagination">
+        {pageNumbers.map((number) => (
+          <a onClick={() => paginate(number)} key={number}>
+            {number}
+          </a>
+        ))}
+      </ul>
     </div>
   );
 }

styles/abstracts/_include-media.scss

@@ -29,8 +29,8 @@
 ///  $breakpoints: ('phone': 320px);
 ///
 $breakpoints: (
-  "smallest": 25em,
+  "smallest": 22em,
-  // 400 px
+  // 352 px
   "smaller": 34.375em,
   // 550 px
   "small": 43.75em,

styles/base/_base.scss

@@ -24,3 +24,10 @@ body {
   background-color: hsl(10, 5%, 42%);
   color: #bdb7af;
 }
+
+.container {
+  min-height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  align-items: center;
+}

styles/base/_typography.scss

@@ -46,7 +46,7 @@ a {
 
 code {
   background-color: #383838;
-  line-height: 2;
+  line-height: 1.7;
   font-size: 1.6rem;
 }
 

styles/pages/homepage.scss

@@ -1,30 +1,57 @@
 .homepage {
   display: grid;
-  justify-content: center;
   justify-items: center;
+  grid-template-rows: auto auto 58rem;
 
   padding-top: 2rem;
-  list-style-type: none;
+
 
   &_heading-1 {
     padding-top: 1rem;
   }
 
-  &_posts {
+  h1 {
-    display: grid;
+    grid-row: 1;
-    justify-content: center;
+    margin-bottom: 1rem;
-    grid-template-columns: repeat(3, 1fr);
+  }
-    grid-template-rows: repeat(8, 12rem);
-    width: 55%;
 
+  &_posts {
     li {
-      margin-top: 2rem;
+      margin-top: 1rem;
-      margin-right: 2rem;
-      text-align: center;
     }
   }
 
-  @include media("<largest") {
+  &_pagination {
+    display: flex;
+    justify-content: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    align-items: flex-start;
+    margin-top: 5rem;
+
+    a {
+      background-color: #383838;
+      padding: 8px 16px;
+      border-radius: 1rem;
+      text-decoration: none;
+      font-size: 2rem;
+
+      &::after {
+        display: none;
+      }
+    }
+  }
+
+  @include media("<smallest") {
+    grid-template-rows: auto auto 48rem;
+
+    &_pagination {
+      a {
+        font-size: 1.6rem;
+        padding: 5px 10px;
+      }
+    }
+
     li {
       font-size: 1.6rem;
     }

styles/pages/rehber.scss

@@ -59,6 +59,7 @@
 
   li {
     font-family: "DroidSans";
+    line-height: 1.7;
   }
 
   ul,