Add blog pagination component

A new component, BlogPagination, has been added to the blog section of the website. This component includes buttons for navigating to the next and previous pages of blog posts. The BlogPagination component has been integrated into the main blog page, resulting in a more user-friendly browsing experience.

apps/web/app/(marketing)/blog/_components/blog-pagination.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { usePathname, useRouter } from 'next/navigation';
+
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+export function BlogPagination(props: {
+  currentPage: number;
+  canGoToNextPage: boolean;
+  canGoToPreviousPage: boolean;
+}) {
+  const navigate = useGoToPage();
+
+  return (
+    <div className={'flex items-center space-x-2'}>
+      <If condition={props.canGoToPreviousPage}>
+        <Button
+          variant={'outline'}
+          onClick={() => {
+            navigate(props.currentPage - 1);
+          }}
+        >
+          <ArrowLeft className={'mr-2 h-4'} />
+          <Trans i18nKey={'marketing:blogPaginationPrevious'} />
+        </Button>
+      </If>
+
+      <If condition={props.canGoToNextPage}>
+        <Button
+          variant={'outline'}
+          onClick={() => {
+            navigate(props.currentPage + 1);
+          }}
+        >
+          <Trans i18nKey={'marketing:blogPaginationNext'} />
+          <ArrowRight className={'ml-2 h-4'} />
+        </Button>
+      </If>
+    </div>
+  );
+}
+
+function useGoToPage() {
+  const router = useRouter();
+  const path = usePathname();
+
+  return (page: number) => {
+    const searchParams = new URLSearchParams({
+      page: page.toString(),
+    });
+
+    router.push(path + '?' + searchParams.toString());
+  };
+}

apps/web/app/(marketing)/blog/page.tsx

@@ -6,6 +6,7 @@ import { SitePageHeader } from '~/(marketing)/_components/site-page-header';
 import { createI18nServerInstance } from '~/lib/i18n/i18n.server';
 import { withI18n } from '~/lib/i18n/with-i18n';
 
+import { BlogPagination } from './_components/blog-pagination';
 import { PostPreview } from './_components/post-preview';
 
 export const generateMetadata = async () => {
@@ -25,7 +26,7 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
   const limit = 10;
   const offset = page * limit;
 
-  const { items: posts } = await cms.getContentItems({
+  const { items: posts, total } = await cms.getContentItems({
     collection: 'posts',
     limit,
     offset,
@@ -38,7 +39,7 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
         subtitle={t('marketing:blogSubtitle')}
       />
 
-      <div className={'container py-12'}>
+      <div className={'container flex flex-col space-y-6 py-12'}>
         <If
           condition={posts.length > 0}
           fallback={<Trans i18nKey="marketing:noPosts" />}
@@ -48,6 +49,14 @@ async function BlogPage({ searchParams }: { searchParams: { page: string } }) {
               return <PostPreview key={idx} post={post} />;
             })}
           </PostsGridList>
+
+          <div>
+            <BlogPagination
+              currentPage={page}
+              canGoToNextPage={offset + limit < total}
+              canGoToPreviousPage={page > 0}
+            />
+          </div>
         </If>
       </div>
     </>

apps/web/content/posts/brainstorming-ideas.mdoc

@@ -0,0 +1,32 @@
+---
+title: "Brainstorming ideas for your next Micro SaaS"
+description: "When it comes to choosing a SaaS starter kit for your business, it's essential to look for certain features that will ensure the smooth functioning and growth of your operations. Here are five must-have features that every SaaS starter kit should include."
+categories: ['blog']
+tags: []
+image: "/images/posts/brainstorming.webp"
+publishedAt: 2024-04-11
+---
+
+When it comes to choosing a SaaS starter kit for your business, it's essential to look for certain features that will ensure the smooth functioning and growth of your operations. Here are five must-have features that every SaaS starter kit should include:
+
+## 1. User Management
+
+User management is a crucial feature that allows you to control access to your SaaS platform and manage user permissions effectively. Look for a starter kit that offers robust user management capabilities, including the ability to create user accounts, assign roles and permissions, and revoke access when needed. This feature ensures that your data remains secure and that only authorized users can access sensitive information.
+
+## 2. Analytics and Reporting
+
+Insightful analytics and reporting tools are essential for monitoring the performance of your SaaS application and gaining valuable insights into user behavior and usage patterns. Choose a starter kit that provides comprehensive analytics dashboards and reporting features, allowing you to track key metrics, identify trends, and make data-driven decisions to optimize your product and services.
+
+## 3. Customizable Templates
+
+Flexibility and customization are crucial for tailoring your SaaS application to meet the unique needs and preferences of your business and users. Look for a starter kit that offers customizable templates and themes, allowing you to design a user interface that reflects your brand identity and provides an intuitive and engaging user experience. Customizable templates make it easy to create and deploy new pages, modules, and features without the need for extensive coding or design skills.
+
+## 4. API Access
+
+API access is essential for integrating your SaaS application with other software systems and third-party services, enabling seamless data exchange and workflow automation. Choose a starter kit that provides well-documented APIs and developer-friendly tools, making it easy for your team to build custom integrations and extend the functionality of your application. API access empowers you to connect your SaaS platform with CRM systems, payment gateways, marketing tools, and more, enhancing the value and versatility of your product.
+
+## 5. Security Measures
+
+Security is paramount when it comes to SaaS applications, as you need to protect sensitive data and ensure compliance with data privacy regulations. Look for a starter kit that prioritizes security and provides robust measures to safeguard your infrastructure, data, and user information. This includes features such as encryption, authentication mechanisms, secure access controls, and regular security audits and updates. Choosing a SaaS starter kit with strong security measures helps mitigate the risk of data breaches and instills trust and confidence in your users.
+
+In conclusion, when evaluating SaaS starter kits for your business, make sure to prioritize these five must-have features: user management, analytics and reporting, customizable templates, API access, and security measures. By selecting a starter kit that offers these essential features, you can build a powerful and scalable SaaS application that meets the needs of your business and users while driving growth and innovation.

apps/web/content/posts/must-have-features.mdoc

@@ -0,0 +1,44 @@
+---
+title: "5 Must-Have Features Every SaaS Starter Kit Should Include"
+description: "In this blog post, we will discuss the 5 must-have features that every SaaS starter kit should include. These features will help you build a successful SaaS product and get your business off the ground quickly."
+categories: []
+tags: []
+image: "/images/posts/indie-hacker.webp"
+publishedAt: 2024-04-12
+---
+
+# Brainstorming Ideas for Your Next Micro SaaS
+
+## Niche Service Solutions
+
+Consider identifying a specific niche or industry with underserved needs. Whether it's project management tools tailored for creative freelancers or appointment scheduling software for niche healthcare practitioners, targeting a specific market can lead to a loyal customer base hungry for tailored solutions.
+
+## Automation Tools
+
+In today's fast-paced world, businesses are constantly seeking ways to streamline their operations. Develop automation tools that help businesses save time and resources, whether it's automating repetitive tasks, simplifying data analysis, or optimizing workflow processes.
+
+## Integration Enhancements
+
+Many businesses use multiple software tools to manage various aspects of their operations. Create a micro SaaS solution that integrates seamlessly with popular platforms, offering enhanced functionality, smoother data transfer, and a unified user experience.
+
+## AI-Powered Solutions
+
+Leverage the power of artificial intelligence to develop innovative solutions that anticipate and adapt to user needs. Whether it's intelligent chatbots for customer support, predictive analytics for sales forecasting, or personalized recommendation engines, AI can add significant value to your micro SaaS offering.
+
+## Mobile-First Applications
+
+With the increasing prevalence of mobile devices, there's a growing demand for micro SaaS solutions that are optimized for smartphones and tablets. Consider developing mobile-first applications that offer convenience, accessibility, and intuitive user experiences on-the-go.
+
+## Subscription Box Services
+
+Tap into the growing trend of subscription-based business models by offering a micro SaaS solution in the form of a subscription box service. Whether it's curated content, digital assets, or software tools delivered regularly to subscribers, this model can provide recurring revenue and foster community engagement.
+
+## Green-Tech Solutions
+
+As sustainability becomes a top priority for businesses worldwide, there's a growing demand for eco-friendly solutions. Develop micro SaaS offerings that help businesses reduce their environmental footprint, whether it's energy management tools, carbon footprint calculators, or sustainable supply chain optimization platforms.
+
+## Hyper-Local Services
+
+Focus on serving the needs of local businesses and communities with hyper-local micro SaaS solutions. Whether it's neighborhood-focused marketplace platforms, local event management tools, or community engagement platforms, catering to the unique needs of local markets can lead to strong customer loyalty and word-of-mouth referrals.
+
+In conclusion, the possibilities for creating innovative micro SaaS solutions are endless. By identifying niche markets, leveraging emerging technologies, and focusing on delivering value to customers, you can develop a successful micro SaaS venture that meets the needs of today's dynamic business landscape. So roll up your sleeves, unleash your creativity, and get ready to build the next big thing in the world of micro SaaS!

apps/web/public/locales/en/marketing.json

@@ -9,6 +9,8 @@
   "pricingSubtitle": "Pricing plans and payment options",
   "backToBlog": "Back to blog",
   "noPosts": "No posts found",
+  "blogPaginationNext": "Next Page",
+  "blogPaginationPrevious": "Previous Page",
   "contactFaq": "If you have any questions, please contact us",
   "contact": "Contact",
   "about": "About",