chore: update homepage pricing section

messages/en.json

@@ -708,6 +708,7 @@
     },
     "pricing": {
       "title": "Pricing",
+      "subtitle": "Pricing",
       "description": "Choose the plan that works best for you"
     },
     "faqs": {

messages/zh.json

@@ -709,6 +709,7 @@
     },
     "pricing": {
       "title": "价格",
+      "subtitle": "价格",
       "description": "选择最适合您的付费计划"
     },
     "faqs": {

src/components/blocks/integration/integration2.tsx

@@ -17,7 +17,7 @@ export default function Integration2Section() {
 
   return (
     <section>
-      <div className="bg-muted dark:bg-background py-24">
+      <div className="bg-background py-24">
         <div className="mx-auto max-w-5xl px-6">
           <div className="grid items-center sm:grid-cols-2">
             <div className="dark:bg-muted/50 relative mx-auto w-fit">

src/components/blocks/pricing/pricing.tsx

@@ -1,3 +1,4 @@
+import { HeaderSection } from '@/components/layout/header-section';
 import { PricingTable } from '@/components/pricing/pricing-table';
 import { useTranslations } from 'next-intl';
 
@@ -5,14 +6,15 @@ export default function PricingSection() {
   const t = useTranslations('HomePage.pricing');
 
   return (
-    <section className="py-16">
+    <section id="pricing" className="px-4 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>
+        <HeaderSection
+          subtitle={t('subtitle')}
+          subtitleAs="h2"
+          subtitleClassName="text-4xl font-bold"
+          description={t('description')}
+          descriptionAs="p"
+        />
 
         <PricingTable />
       </div>