feat: add pricing section to homepage

- Introduced a new PricingSection component to display pricing options, enhancing user engagement and decision-making.
- Updated English and Chinese JSON files to include titles and descriptions for the pricing section.
- Refactored the homepage layout to integrate the new PricingSection, improving overall user experience.
- Renamed CallToAction component to CallToActionSection for consistency in naming conventions.
- Adjusted image sources in Features4Section for improved asset management.

messages/en.json

@@ -140,6 +140,10 @@
         }
       }
     },
+    "pricing": {
+      "title": "Pricing",
+      "description": "Choose the plan that works best for you"
+    },
     "faqs": {
       "title": "Frequently Asked Questions",
       "description": "Please feel free to contact us if you have any questions",

messages/zh.json

@@ -140,6 +140,10 @@
       "feature-3": "特色功能特点三",
       "feature-4": "特色功能特点四"
     },
+    "pricing": {
+      "title": "价格",
+      "description": "选择最适合您的付费计划"
+    },
     "faqs": {
       "title": "常见问题",
       "description": "如果您有任何问题，请随时联系我们",

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

@@ -14,9 +14,10 @@ import { getTranslations } from 'next-intl/server';
 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';
+import CallToActionSection from '@/components/blocks/calltoaction/calltoaction';
 import Integration2Section from '@/components/blocks/integration/integration2';
 import Features5Section from '@/components/blocks/features/features5';
+import PricingSection from '@/components/blocks/pricing/pricing';
 
 /**
  * https://next-intl.dev/docs/environments/actions-metadata-route-handlers#metadata-api
@@ -89,7 +90,7 @@ export default async function HomePage(props: HomePageProps) {
         </div>
 
         <div id="pricing">
-          <Pricing />
+          <PricingSection />
         </div>
 
         <div id="faqs">
@@ -101,7 +102,7 @@ export default async function HomePage(props: HomePageProps) {
         </div>
 
         <div id="call-to-action">
-          <CallToAction />
+          <CallToActionSection />
         </div>
       </div>
     </>

src/components/blocks/calltoaction/calltoaction.tsx

@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { LocaleLink } from '@/i18n/navigation';
 import { useTranslations } from 'next-intl';
 
-export default function CallToAction() {
+export default function CallToActionSection() {
   const t = useTranslations('HomePage.calltoaction');
 
   return (

src/components/blocks/features/features4.tsx

@@ -18,14 +18,14 @@ export default function Features4Section() {
           <div className="border-border/50 relative rounded-3xl border p-3 lg:col-span-3">
             <div className="bg-linear-to-b aspect-76/59 relative rounded-2xl from-zinc-300 to-transparent p-px dark:from-zinc-700">
               <Image
-                src="/blocks/payments-light.png"
+                src="/blocks/payments.png"
                 className="hidden rounded-[15px] dark:block"
                 alt="payments illustration dark"
                 width={1207}
                 height={929}
               />
               <Image
-                src="/blocks/payments.png"
+                src="/blocks/payments-light.png"
                 className="rounded-[15px] shadow dark:hidden"
                 alt="payments illustration light"
                 width={1207}

src/components/blocks/pricing/pricing.tsx

@@ -0,0 +1,23 @@
+import { PricingTable } from "@/components/pricing/pricing-table";
+import { useTranslations } from "next-intl";
+
+export default function PricingSection() {
+  const t = useTranslations('HomePage.pricing');
+
+  return (
+    <section className="py-16">
+      <div className="mx-auto max-w-6xl px-6 space-y-16">
+        <div className="text-center">
+          <h2 className="text-balance text-4xl lg:text-5xl font-semibold">
+            {t('title')}
+          </h2>
+          <p className="mt-4">
+            {t('description')}
+          </p>
+        </div>
+        
+        <PricingTable />
+      </div>
+    </section>
+  );
+}

src/components/blocks/testimonials/testimonials.tsx

@@ -119,7 +119,7 @@ export default function TestimonialsSection() {
             {testimonialChunks.map((chunk, chunkIndex) => (
               <div key={chunkIndex} className="space-y-3">
                 {chunk.map(({ name, role, quote, image }, index) => (
-                  <Card key={index}>
+                  <Card key={index} className="shadow-none">
                     <CardContent className="grid grid-cols-[auto_1fr] gap-3 pt-4">
                       <Avatar className="size-9 border-2 border-gray-200">
                         <AvatarImage