feat(Components): Add pagination component

This component accept a Page<T> type from [astro](https://docs.astro.build/en/guides/routing/#complete-api-reference)

src/pages/projects/[page].astro

@@ -0,0 +1,69 @@
+---
+import type { InferGetStaticPropsType, GetStaticPaths } from 'astro';
+import { changeLanguage } from 'i18next';
+import { getCollection } from 'astro:content';
+import Layout from '@layouts/Layout.astro';
+import Card from '@components/Card.astro';
+import Pagination from '@components/Pagination.astro';
+
+changeLanguage('en');
+
+export const getStaticPaths = (async ({ paginate }) => {
+  const rawEntries = await getCollection('portafolio', ({ data }) => {
+    return import.meta.env.PROD ? data.draft !== true : true;
+  });
+
+  const entries = rawEntries.map((item, idx) => ({
+    ...item.data,
+    id: idx + 1,
+    slug: item.slug,
+  }));
+
+  return paginate(entries, { pageSize: 6 });
+}) satisfies GetStaticPaths;
+
+type Props = InferGetStaticPropsType<typeof getStaticPaths>;
+
+const { page } = Astro.props;
+---
+
+<Layout title="List of blog entries">
+  <h1 class="text-center">Projects</h1>
+
+  <section class="clean">
+    <div class="grid grid-cols-1 grid-lg-cols-3 gap-4">
+      {
+        page.data.map((item) => (
+          <div>
+            <Card className="anim-hover-zoom">
+              <a class="clean" href={`/projects/${item.slug}`}>
+                <img
+                  src="https://placehold.co/600x400"
+                  alt="project img"
+                  class="border-radius respect-width"
+                  slot="img-header"
+                />
+                <h3 class="fs-4 text-center my-1">Project N°1</h3>
+                <p class="text-justify">
+                  cillum sint consectetur cupidatat. Lorem ipsum dolor sit amet,
+                  qui minim labore adipisicing minim sint
+                </p>
+
+                <div class="text-end">
+                  <a href={`/projects/${item.slug}`}>See more...</a>
+                </div>
+              </a>
+            </Card>
+          </div>
+        ))
+      }
+    </div>
+    <Pagination page={page} urlPattern="/projects/{}" />
+  </section>
+</Layout>
+
+<style lang="scss">
+  a.clean:hover {
+    text-decoration: none;
+  }
+</style>