Update slug url with new function's slugified url

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import { SOCIALS } from "src/config";
 import Layout from "@layouts/Layout.astro";
 import Header from "@components/Header.astro";
 import Footer from "@components/Footer.astro";
@@ -6,8 +7,8 @@ import LinkButton from "@components/LinkButton.astro";
 import Hr from "@components/Hr.astro";
 import Card from "@components/Card";
 import getSortedPosts from "@utils/getSortedPosts";
-import { SOCIALS } from "src/config";
 import socialIcons from "@assets/socialIcons";
+import slugify from "@utils/slugify";
 import type { Frontmatter } from "src/types";
 
 const posts = await Astro.glob<Frontmatter>("../contents/*.md");
@@ -70,7 +71,7 @@ const sortedPosts = getSortedPosts(posts);
             ({ frontmatter }) =>
               frontmatter.featured && (
                 <Card
-                  href={`/posts/${frontmatter.slug}`}
+                  href={`/posts/${slugify(frontmatter)}`}
                   post={frontmatter}
                   secHeading={false}
                 />
@@ -90,7 +91,7 @@ const sortedPosts = getSortedPosts(posts);
             ({ frontmatter }, index) =>
               index < 4 && (
                 <Card
-                  href={`/posts/${frontmatter.slug}`}
+                  href={`/posts/${slugify(frontmatter)}`}
                   post={frontmatter}
                   secHeading={false}
                 />