feat: add call-to-action section to homepage

- Introduced a new CallToAction component to encourage user engagement with clear action prompts.
- Updated English and Chinese JSON files to include titles, descriptions, and buttons for the call-to-action section.
- Refactored the homepage layout to integrate the new CallToAction section, enhancing overall user experience.

messages/en.json

@@ -180,19 +180,19 @@
           "name": "Yucel Faruksahan",
           "role": "Tailkits Creator",
           "image": "https://randomuser.me/api/portraits/men/7.jpg",
-          "quote": "Great work on tailfolio template. This is one of the best personal website that I have seen so far :)"
+          "quote": "Great work on MkSaaS template. This is one of the best personal website that I have seen so far :)"
         },
         "item-4": {
           "name": "Anonymous author",
           "role": "Product Manager",
           "image": "https://randomuser.me/api/portraits/men/8.jpg",
-          "quote": "I am really new to Tailwind and I want to give a go to make some page on my own. I searched a lot of hero pages and blocks online. However, most of them are not giving me a clear view or needed some HTML/CSS coding background to make some changes from the original or too expensive to have. I downloaded the one of MkSaaS template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page."
+          "quote": "I downloaded the one of MkSaaS template which is very clear to understand at the start and you could modify the codes/blocks to fit perfectly on your purpose of the page."
         },
         "item-5": {
           "name": "Shekinah Tshiokufila",
           "role": "Senior Software Engineer",
           "image": "https://randomuser.me/api/portraits/men/4.jpg",
-          "quote": "MkSaaS is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it. I can only recommend this incredible wonder."
+          "quote": "MkSaaS is redefining the standard of web design, with these blocks it provides an easy and efficient way for those who love beauty but may lack the time to implement it."
         },
         "item-6": {
           "name": "Oketa Fred",
@@ -204,13 +204,13 @@
           "name": "Zeki",
           "role": "Founder of ChatExtend",
           "image": "https://randomuser.me/api/portraits/men/5.jpg",
-          "quote": "Using TailsUI has been like unlocking a secret design superpower. It's the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly."
+          "quote": "MkSaaS is the perfect fusion of simplicity and versatility, enabling us to create UIs that are as stunning as they are user-friendly."
         },
         "item-8": {
           "name": "Joseph Kitheka",
           "role": "Fullstack Developer",
           "image": "https://randomuser.me/api/portraits/men/9.jpg",
-          "quote": "MkSaaS has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow. The flexibility to customize every aspect allows me to create unique user experiences. MkSaaS is a game-changer for modern web development!"
+          "quote": "MkSaaS has transformed the way I develop web applications. Their extensive collection of UI components, blocks, and templates has significantly accelerated my workflow."
         },
         "item-9": {
           "name": "Khatab Wedaa",
@@ -228,7 +228,7 @@
           "name": "Eric Ampire",
           "role": "@GoogleDevExpert for Android",
           "image": "https://randomuser.me/api/portraits/men/12.jpg",
-          "quote": "MkSaaS templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience. The templates are easy to use, customizable, and responsive, and the support team is always available to help. I highly recommend MkSaaS templates to anyone who is looking to create a website."
+          "quote": "MkSaaS templates are the perfect solution for anyone who wants to create a beautiful and functional website without any web design experience."
         },
         "item-12": {
           "name": "Roland Tubonge",
@@ -252,6 +252,12 @@
           "title": "Powered Apps"
         }
       }
+    },
+    "calltoaction": {
+      "title": "Start Building",
+      "description": "MkSaaS lets you make AI SaaS in days, simply and effortlessly",
+      "primaryButton": "Get Started",
+      "secondaryButton": "Book Demo"
     }
   },
   "PricingPage": {

messages/zh.json

@@ -186,7 +186,7 @@
           "name": "Anonymous author",
           "role": "产品经理",
           "image": "https://randomuser.me/api/portraits/men/8.jpg",
-          "quote": "我真的很新到 Tailwind 和我想自己做一些页面，我在网上搜索了很多英雄页面和区块。然而，大多数都没有给我一个清晰的想法，或者需要一些 HTML/CSS 编码背景来从原始文件中做一些更改，或者太贵了。我下载了其中一个 Tailus 模板，它非常容易理解，你可以在开始时修改代码/区块以完美地适应你的页面目的。"
+          "quote": "我不熟悉 Tailwind，我想自己做一些页面，我在网上搜索了很多英雄页面和区块。然而，大多数都没有给我一个清晰的想法，或者需要一些 HTML/CSS 编码背景来从原始文件中做一些更改，或者太贵了。我下载了其中一个 MkSaaS 模板，它非常容易理解，你可以在开始时修改代码/区块以完美地适应你的页面目的。"
         },
         "item-5": {
           "name": "Shekinah Tshiokufila",
@@ -228,7 +228,7 @@
           "name": "Eric Ampire",
           "role": "Google 开发者专家",
           "image": "https://randomuser.me/api/portraits/men/12.jpg",
-          "quote": "MkSaaS 模板是任何想要创建一个美丽且功能齐全的网站但没有网页设计经验的人的完美解决方案。这些模板易于使用，可定制，并且响应迅速，我们的支持团队随时为您提供帮助。我强烈推荐 MkSaaS 模板给任何想要创建网站的人。"
+          "quote": "MkSaaS 模板是任何想要创建一个美丽且功能齐全的网站但没有网页设计经验的人的完美解决方案。这些模板易于使用，可定制，并且响应迅速。我强烈推荐 MkSaaS 模板给任何想要创建网站的人。"
         },
         "item-12": {
           "name": "Roland Tubonge",
@@ -252,6 +252,12 @@
           "title": "使用 MkSaaS 启动的应用"
         }
       }
+    },
+    "calltoaction": {
+      "title": "开始构建",
+      "description": "MkSaaS 可让您在几天内轻松构建您的 AI SaaS",
+      "primaryButton": "开始使用",
+      "secondaryButton": "查看演示"
     }
   },
   "PricingPage": {

src/app/[locale]/(marketing)/(home)/page.tsx

@@ -11,10 +11,10 @@ import { getUrlWithLocale } from '@/lib/urls/urls';
 import { Metadata } from 'next';
 import { Locale } from 'next-intl';
 import { getTranslations } from 'next-intl/server';
-import CallToAction from '../../preview/call-to-action/one/page';
 import FeaturesSection from '@/components/blocks/features/features';
 import Pricing from '../../preview/pricing/three/page';
 import StatsSection from '@/components/blocks/stats/stats';
+import CallToAction from '@/components/blocks/calltoaction/calltoaction';
 
 /**
  * https://next-intl.dev/docs/environments/actions-metadata-route-handlers#metadata-api

src/components/blocks/calltoaction/calltoaction.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@/components/ui/button';
+import { LocaleLink } from '@/i18n/navigation';
+import { useTranslations } from 'next-intl';
+
+export default function CallToAction() {
+  const t = useTranslations('HomePage.calltoaction');
+
+  return (
+    <section className="py-24 w-full bg-muted">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl font-semibold lg:text-5xl">
+            {t('title')}
+          </h2>
+          <p className="mt-4">
+            {t('description')}
+          </p>
+
+          <div className="mt-12 flex flex-wrap justify-center gap-4">
+            <Button asChild size="lg">
+              <LocaleLink href="/">
+                <span>{t('primaryButton')}</span>
+              </LocaleLink>
+            </Button>
+
+            <Button asChild size="lg" variant="outline">
+              <LocaleLink href="/">
+                <span>{t('secondaryButton')}</span>
+              </LocaleLink>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/blocks/faqs/faqs.tsx

@@ -55,7 +55,7 @@ export default function FaqSection() {
 
   return (
     <section className="py-16">
-      <div className="mx-auto max-w-5xl px-4 md:px-6">
+      <div className="mx-auto max-w-4xl px-4 md:px-6">
         <div className="mx-auto max-w-xl text-center">
           <h2 className="text-balance text-3xl font-bold tracking-tight">
             {t('title')}
@@ -65,7 +65,7 @@ export default function FaqSection() {
           </p>
         </div>
 
-        <div className="mx-auto max-w-5xl mt-12">
+        <div className="mx-auto max-w-4xl mt-12">
           <Accordion
             type="single"
             collapsible