sc

components/home/Blogs.tsx

@@ -9,14 +9,14 @@ export default function RenderPosts() {
 
   // Render each post as a 'PostCard' component separated by a 'Divider'
   return (
-    <section className="flex w-full flex-col gap-4">
+    <section className="flex w-full flex-col gap-4" id="blog-posts">
       <Heading as="h2" size="4" className="mb-4">
         Read more about GPV
       </Heading>
       {posts.map((post: BlogPost, index: number) => (
         <React.Fragment key={index}>
           <PostCard post={post} key={`${index}-post-card`} />
-          <Separator className="w-full" size="4" key={`${index}-separator`} />
+          <Separator size="4" key={`${index}-separator`} />
         </React.Fragment>
       ))}
     </section>

components/home/Features.tsx

@@ -3,7 +3,7 @@ import FeatureBox from "./FeatureBox";
 
 export default function Features() {
   return (
-    <Section className="flex flex-col items-center gap-4">
+    <Section className="flex flex-col items-center gap-4" id="features">
       <Heading size="8" className="text-3xl font-bold">
         Features
       </Heading>

components/home/Hero.tsx

@@ -3,7 +3,10 @@ import ChromeStore from "./ChromeStore";
 
 export default function Hero() {
   return (
-    <Section className="flex flex-col items-center justify-center gap-4 text-center ">
+    <Section
+      className="flex flex-col items-center justify-center gap-4 text-center"
+      id="hero"
+    >
       <Heading
         size="9"
         className="bg-gradient-to-r from-blue-600 via-green-600 to-purple-600 bg-clip-text text-transparent"