feat: enhance homepage with new integration and features sections

- Introduced Integration2Section and Features5Section components to showcase integrations and additional product features, improving user engagement and workflow.
- Updated English and Chinese JSON files to include new titles, descriptions, and buttons for the integration and features sections.
- Refactored the homepage layout to integrate the new sections, enhancing overall user experience.
- Adjusted existing FeaturesSection and Features2Section components for consistency and clarity in feature presentation.

messages/en.json

@@ -40,7 +40,7 @@
       "primary": "Get Started",
       "secondary": "See Demo"
     },
-    "LogoCloud": {
+    "logocloud": {
       "title": "Your favorite companies are our partners"
     },
     "integration": {
@@ -74,37 +74,13 @@
         }
       }
     },
-    "features": {
-      "title": "The features of your product",
-      "description": "Write the description of your product here",
-      "items": {
-        "item-1": {
-          "title": "Product Feature One",
-          "description": "Please write the detailed description of feature one here"
-        },
-        "item-2": {
-          "title": "Product Feature Two",
-          "description": "Please write the detailed description of feature two here"
-        },
-        "item-3": {
-          "title": "Product Feature Three",
-          "description": "Please write the detailed description of feature three here"
-        },
-        "item-4": {
-          "title": "Product Feature Four",
-          "description": "Please write the detailed description of feature four here"
-        },
-        "item-5": {
-          "title": "Product Feature Five",
-          "description": "Please write the detailed description of feature five here"
-        },
-        "item-6": {
-          "title": "Product Feature Six",
-          "description": "Please write the detailed description of feature six here"
-        }
-      }
+    "integration2": {
+      "title": "Integrate with your favorite tools",
+      "description": "Connect seamlessly with popular platforms and services to enhance your workflow.",
+      "primaryButton": "Get Started",
+      "secondaryButton": "See Demo"
     },
-    "features2": {
+    "features": {
       "title": "The features of your product",
       "description": "Write the description of your product here",
       "items": {
@@ -134,6 +110,36 @@
       "feature-3": "Product Feature Three",
       "feature-4": "Product Feature Four"
     },
+    "features5": {
+      "title": "The features of your product",
+      "description": "Write the description of your product here",
+      "items": {
+        "item-1": {
+          "title": "Product Feature One",
+          "description": "Please write the detailed description of feature one here"
+        },
+        "item-2": {
+          "title": "Product Feature Two",
+          "description": "Please write the detailed description of feature two here"
+        },
+        "item-3": {
+          "title": "Product Feature Three",
+          "description": "Please write the detailed description of feature three here"
+        },
+        "item-4": {
+          "title": "Product Feature Four",
+          "description": "Please write the detailed description of feature four here"
+        },
+        "item-5": {
+          "title": "Product Feature Five",
+          "description": "Please write the detailed description of feature five here"
+        },
+        "item-6": {
+          "title": "Product Feature Six",
+          "description": "Please write the detailed description of feature six here"
+        }
+      }
+    },
     "faqs": {
       "title": "Frequently Asked Questions",
       "description": "Please feel free to contact us if you have any questions",

messages/zh.json

@@ -40,7 +40,7 @@
       "primary": "开始使用",
       "secondary": "查看演示"
     },
-    "LogoCloud": {
+    "logocloud": {
       "title": "您最爱公司都是我们的合作伙伴"
     },
     "integration": {
@@ -74,7 +74,35 @@
         }
       }
     },
+    "integration2": {
+      "title": "与您最喜欢的工具集成",
+      "description": "无缝连接流行的平台和服务，以增强您的工作流程。",
+      "primaryButton": "开始使用",
+      "secondaryButton": "查看演示"
+    },
     "features": {
+      "title": "您的 SaaS 产品功能",
+      "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
+      "items": {
+        "item-1": {
+          "title": "产品特色功能一",
+          "description": "请在这里详细描述您的产品特色功能一，尽可能详细，使其更吸引用户，提高落地页的转化率"
+        },
+        "item-2": {
+          "title": "产品特色功能二",
+          "description": "请在这里详细描述您的产品特色功能二，尽可能详细，使其更吸引用户，提高落地页的转化率"
+        },
+        "item-3": {
+          "title": "产品特色功能三",
+          "description": "请在这里详细描述您的产品特色功能三，尽可能详细，使其更吸引用户，提高落地页的转化率"
+        },
+        "item-4": {
+          "title": "产品特色功能四",
+          "description": "请在这里详细描述您的产品特色功能四，尽可能详细，使其更吸引用户，提高落地页的转化率"
+        }
+      }
+    },
+    "features5": {
       "title": "您的 SaaS 产品功能",
       "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
       "items": {
@@ -104,28 +132,6 @@
         }
       }
     },
-    "features2": {
-      "title": "您的 SaaS 产品功能",
-      "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
-      "items": {
-        "item-1": {
-          "title": "产品特色功能一",
-          "description": "请在这里详细描述您的产品特色功能一，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        },
-        "item-2": {
-          "title": "产品特色功能二",
-          "description": "请在这里详细描述您的产品特色功能二，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        },
-        "item-3": {
-          "title": "产品特色功能三",
-          "description": "请在这里详细描述您的产品特色功能三，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        },
-        "item-4": {
-          "title": "产品特色功能四",
-          "description": "请在这里详细描述您的产品特色功能四，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        }
-      }
-    },
     "features3": {
       "title": "产品特色功能",
       "description": "请在详细介绍您的 SaaS 产品的特色功能的信息，尽可能详细，使其更吸引用户，提高落地页的转化率",

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

@@ -15,6 +15,8 @@ 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 Integration2Section from '@/components/blocks/integration/integration2';
+import Features5Section from '@/components/blocks/features/features5';
 
 /**
  * https://next-intl.dev/docs/environments/actions-metadata-route-handlers#metadata-api
@@ -62,14 +64,14 @@ export default async function HomePage(props: HomePageProps) {
           <IntegrationSection />
         </div>
 
-        <div id="features2">
-          <Features2Section />
-        </div>
-
         <div id="features">
           <FeaturesSection />
         </div>
 
+        <div id="features2">
+          <Features2Section />
+        </div>
+
         <div id="features3">
           <Features3Section />
         </div>
@@ -78,6 +80,14 @@ export default async function HomePage(props: HomePageProps) {
           <Features4Section />
         </div>
 
+        <div id="features5">
+          <Features5Section />
+        </div>
+
+        <div id="integration2">
+          <Integration2Section />
+        </div>
+
         <div id="pricing">
           <Pricing />
         </div>

src/components/blocks/features/features.tsx

@@ -1,86 +1,148 @@
-import { CpuIcon, FingerprintIcon, PencilIcon, Settings2Icon, SparklesIcon, ZapIcon } from 'lucide-react';
+'use client';
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/components/ui/accordion';
+import {
+  ChartBarIncreasingIcon,
+  Database,
+  Fingerprint,
+  IdCard,
+} from 'lucide-react';
+import Image from 'next/image';
+import { useState } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { BorderBeam } from '@/components/magicui/border-beam';
 import { useTranslations } from 'next-intl';
 
 /**
  * https://nsui.irung.me/features
- * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-4.json
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-12.json
  */
-export default function FeaturesSection() {
+export default function Features2Section() {
   const t = useTranslations('HomePage.features');
+  type ImageKey = 'item-1' | 'item-2' | 'item-3' | 'item-4';
+  const [activeItem, setActiveItem] = useState<ImageKey>('item-1');
+
+  const images = {
+    'item-1': {
+      image: '/blocks/charts.png',
+      alt: 'Product Feature One',
+    },
+    'item-2': {
+      image: '/blocks/music.png',
+      alt: 'Product Feature Two',
+    },
+    'item-3': {
+      image: '/blocks/mail2.png',
+      alt: 'Product Feature Three',
+    },
+    'item-4': {
+      image: '/blocks/payments.png',
+      alt: 'Product Feature Four',
+    },
+  };
 
   return (
     <section className="py-16">
-      <div className="mx-auto max-w-6xl px-6 space-y-16">
-        <div className="text-center">
+      <div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]"></div>
+      <div className="mx-auto max-w-6xl space-y-8 px-6 md:space-y-16 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]">
+        <div className="relative z-10 mx-auto max-w-2xl space-y-6 text-center">
           <h2 className="text-balance text-4xl lg:text-5xl font-semibold">
             {t('title')}
           </h2>
-          <p className="mt-4">
+          <p>
             {t('description')}
           </p>
         </div>
 
-        <div className="relative mx-auto grid divide-x divide-y border *:p-8 sm:grid-cols-2 lg:grid-cols-3">
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <ZapIcon className="size-4" />
-              <h3 className="text-base font-medium">{t('items.item-1.title')}</h3>
-            </div>
-            <p className="text-sm text-muted-foreground mt-4">
-              {t('items.item-1.description')}
-            </p>
+        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:grid-cols-12 lg:gap-8 lg:px-0">
+          <div className="lg:col-span-5 flex flex-col items-center justify-center">
+            <Accordion
+              type="single"
+              value={activeItem}
+              onValueChange={(value) => setActiveItem(value as ImageKey)}
+              className="w-full"
+            >
+              <AccordionItem value="item-1">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-2 text-base">
+                    <Database className="size-4" />
+                    {t('items.item-1.title')}
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  {t('items.item-1.description')}
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="item-2">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-2 text-base">
+                    <Fingerprint className="size-4" />
+                    {t('items.item-2.title')}
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  {t('items.item-2.description')}
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="item-3">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-2 text-base">
+                    <IdCard className="size-4" />
+                    {t('items.item-3.title')}
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  {t('items.item-3.description')}
+                </AccordionContent>
+              </AccordionItem>
+              <AccordionItem value="item-4">
+                <AccordionTrigger>
+                  <div className="flex items-center gap-2 text-base">
+                    <ChartBarIncreasingIcon className="size-4" />
+                    {t('items.item-4.title')}
+                  </div>
+                </AccordionTrigger>
+                <AccordionContent>
+                  {t('items.item-4.description')}
+                </AccordionContent>
+              </AccordionItem>
+            </Accordion>
           </div>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <CpuIcon className="size-4" />
-              <h3 className="text-base font-medium">{t('items.item-2.title')}</h3>
-            </div>
-            <p className="text-sm text-muted-foreground mt-4">
-              {t('items.item-2.description')}
-            </p>
-          </div>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <FingerprintIcon className="size-4" />
 
-              <h3 className="text-base font-medium">{t('items.item-3.title')}</h3>
+          <div className="bg-background w-full relative flex overflow-hidden rounded-2xl border p-2 md:h-auto lg:col-span-7">
+            <div className="aspect-76/59 bg-background relative w-full rounded-2xl">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${activeItem}-id`}
+                  initial={{ opacity: 0, y: 6, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 6, scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                  className="size-full overflow-hidden rounded-2xl border bg-zinc-900 shadow-md"
+                >
+                  <Image
+                    src={images[activeItem].image}
+                    className="size-full object-cover object-left-top dark:mix-blend-lighten"
+                    alt={images[activeItem].alt}
+                    width={1207}
+                    height={929}
+                  />
+                </motion.div>
+              </AnimatePresence>
             </div>
-            <p className="text-sm text-muted-foreground mt-4">
-              {t('items.item-3.description')}
-            </p>
-          </div>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <PencilIcon className="size-4" />
-
-              <h3 className="text-base font-medium">{t('items.item-4.title')}</h3>
-            </div>
-            <p className="text-sm text-muted-foreground mt-4">
-              {t('items.item-4.description')}
-            </p>
-          </div>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <Settings2Icon className="size-4" />
-
-              <h3 className="text-base font-medium">{t('items.item-5.title')}</h3>
-            </div>
-            <p className="text-sm text-muted-foreground mt-4">
-              {t('items.item-5.description')}
-            </p>
-          </div>
-          <div className="space-y-2">
-            <div className="flex items-center gap-2">
-              <SparklesIcon className="size-4" />
-
-              <h3 className="text-base font-medium">{t('items.item-6.title')}</h3>
-            </div>
-            <p className="text-sm text-muted-foreground mt-4">
-              {t('items.item-6.description')}
-            </p>
+            <BorderBeam
+              duration={6}
+              size={200}
+              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
+            />
           </div>
         </div>
       </div>
     </section>
   );
-}
+}

src/components/blocks/features/features2.tsx

@@ -23,21 +23,21 @@ import { useTranslations } from 'next-intl';
  * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-12.json
  */
 export default function Features2Section() {
-  const t = useTranslations('HomePage.features2');
+  const t = useTranslations('HomePage.features');
   type ImageKey = 'item-1' | 'item-2' | 'item-3' | 'item-4';
   const [activeItem, setActiveItem] = useState<ImageKey>('item-1');
 
   const images = {
     'item-1': {
-      image: '/blocks/charts.png',
+      image: '/blocks/music.png',
       alt: 'Product Feature One',
     },
     'item-2': {
-      image: '/blocks/music.png',
+      image: '/blocks/mail2.png',
       alt: 'Product Feature Two',
     },
     'item-3': {
-      image: '/blocks/mail2.png',
+      image: '/blocks/charts.png',
       alt: 'Product Feature Three',
     },
     'item-4': {
@@ -60,6 +60,35 @@ export default function Features2Section() {
         </div>
 
         <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:grid-cols-12 lg:gap-8 lg:px-0">
+
+          <div className="bg-background w-full relative flex overflow-hidden rounded-2xl border p-2 md:h-auto lg:col-span-7">
+            <div className="aspect-76/59 bg-background relative w-full rounded-2xl">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${activeItem}-id`}
+                  initial={{ opacity: 0, y: 6, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 6, scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                  className="size-full overflow-hidden rounded-2xl border bg-zinc-900 shadow-md"
+                >
+                  <Image
+                    src={images[activeItem].image}
+                    className="size-full object-cover object-left-top dark:mix-blend-lighten"
+                    alt={images[activeItem].alt}
+                    width={1207}
+                    height={929}
+                  />
+                </motion.div>
+              </AnimatePresence>
+            </div>
+            <BorderBeam
+              duration={6}
+              size={200}
+              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
+            />
+          </div>
+
           <div className="lg:col-span-5 flex flex-col items-center justify-center">
             <Accordion
               type="single"
@@ -113,34 +142,6 @@ export default function Features2Section() {
               </AccordionItem>
             </Accordion>
           </div>
-
-          <div className="bg-background w-full relative flex overflow-hidden rounded-2xl border p-2 md:h-auto lg:col-span-7">
-            <div className="aspect-76/59 bg-background relative w-full rounded-2xl">
-              <AnimatePresence mode="wait">
-                <motion.div
-                  key={`${activeItem}-id`}
-                  initial={{ opacity: 0, y: 6, scale: 0.98 }}
-                  animate={{ opacity: 1, y: 0, scale: 1 }}
-                  exit={{ opacity: 0, y: 6, scale: 0.98 }}
-                  transition={{ duration: 0.2 }}
-                  className="size-full overflow-hidden rounded-2xl border bg-zinc-900 shadow-md"
-                >
-                  <Image
-                    src={images[activeItem].image}
-                    className="size-full object-cover object-left-top dark:mix-blend-lighten"
-                    alt={images[activeItem].alt}
-                    width={1207}
-                    height={929}
-                  />
-                </motion.div>
-              </AnimatePresence>
-            </div>
-            <BorderBeam
-              duration={6}
-              size={200}
-              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
-            />
-          </div>
         </div>
       </div>
     </section>

src/components/blocks/features/features5.tsx

@@ -0,0 +1,86 @@
+import { CpuIcon, FingerprintIcon, PencilIcon, Settings2Icon, SparklesIcon, ZapIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+
+/**
+ * https://nsui.irung.me/features
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-4.json
+ */
+export default function Features5Section() {
+  const t = useTranslations('HomePage.features5');
+
+  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>
+
+        <div className="relative mx-auto grid divide-x divide-y border *:p-8 sm:grid-cols-2 lg:grid-cols-3">
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <ZapIcon className="size-4" />
+              <h3 className="text-base font-medium">{t('items.item-1.title')}</h3>
+            </div>
+            <p className="text-sm text-muted-foreground mt-4">
+              {t('items.item-1.description')}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <CpuIcon className="size-4" />
+              <h3 className="text-base font-medium">{t('items.item-2.title')}</h3>
+            </div>
+            <p className="text-sm text-muted-foreground mt-4">
+              {t('items.item-2.description')}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <FingerprintIcon className="size-4" />
+
+              <h3 className="text-base font-medium">{t('items.item-3.title')}</h3>
+            </div>
+            <p className="text-sm text-muted-foreground mt-4">
+              {t('items.item-3.description')}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <PencilIcon className="size-4" />
+
+              <h3 className="text-base font-medium">{t('items.item-4.title')}</h3>
+            </div>
+            <p className="text-sm text-muted-foreground mt-4">
+              {t('items.item-4.description')}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Settings2Icon className="size-4" />
+
+              <h3 className="text-base font-medium">{t('items.item-5.title')}</h3>
+            </div>
+            <p className="text-sm text-muted-foreground mt-4">
+              {t('items.item-5.description')}
+            </p>
+          </div>
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <SparklesIcon className="size-4" />
+
+              <h3 className="text-base font-medium">{t('items.item-6.title')}</h3>
+            </div>
+            <p className="text-sm text-muted-foreground mt-4">
+              {t('items.item-6.description')}
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

src/components/blocks/hero/hero.tsx

@@ -47,7 +47,7 @@ export default function HeroSection() {
         <section>
           <div className="relative pt-12">
             {/* background image */}
-            <AnimatedGroup
+            {/* <AnimatedGroup
               variants={{
                 container: {
                   visible: {
@@ -81,9 +81,9 @@ export default function HeroSection() {
                 width="3276"
                 height="4095"
               />
-            </AnimatedGroup>
+            </AnimatedGroup> */}
 
-            <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div>
+            {/* <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div> */}
             <div className="mx-auto max-w-7xl px-6">
               <div className="text-center sm:mx-auto lg:mr-auto lg:mt-0">
                 {/* introduction */}

src/components/blocks/integration/integration2.tsx

@@ -0,0 +1,113 @@
+import { Logo } from '@/components/layout/logo';
+import {
+  Gemini,
+  GooglePaLM,
+  MagicUI,
+  MediaWiki,
+  Replit,
+  VSCodium,
+} from '@/components/nsui/logos';
+import { Button } from '@/components/ui/button';
+import { LocaleLink } from '@/i18n/navigation';
+import { cn } from '@/lib/utils';
+import { useTranslations } from 'next-intl';
+
+export default function Integration2Section() {
+  const t = useTranslations('HomePage.integration2');
+
+  return (
+    <section>
+      <div className="bg-muted dark: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">
+              <div className="bg-radial to-muted dark:to-background absolute inset-0 z-10 from-transparent to-75%"></div>
+              <div className="mx-auto mb-2 flex w-fit justify-center gap-2">
+                <IntegrationCard>
+                  <Gemini />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <Replit />
+                </IntegrationCard>
+              </div>
+              <div className="mx-auto my-2 flex w-fit justify-center gap-2">
+                <IntegrationCard>
+                  <MagicUI />
+                </IntegrationCard>
+                <IntegrationCard
+                  borderClassName="shadow-black-950/10 shadow-xl border-black/25 dark:border-white/25"
+                  className="dark:bg-white/10"
+                >
+                  <Logo />
+                </IntegrationCard>
+                <IntegrationCard>
+                  <VSCodium />
+                </IntegrationCard>
+              </div>
+
+              <div className="mx-auto flex w-fit justify-center gap-2">
+                <IntegrationCard>
+                  <MediaWiki />
+                </IntegrationCard>
+
+                <IntegrationCard>
+                  <GooglePaLM />
+                </IntegrationCard>
+              </div>
+            </div>
+            <div className="mx-auto mt-6 max-w-lg space-y-6 text-center sm:mt-0 sm:text-left">
+              <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+                {t('title')}
+              </h2>
+              <p className="text-muted-foreground">
+                {t('description')}
+              </p>
+
+              <div className="mt-12 flex flex-wrap justify-start 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>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  children,
+  className,
+  borderClassName,
+}: {
+  children: React.ReactNode;
+  className?: string;
+  borderClassName?: string;
+}) => {
+  return (
+    <div
+      className={cn(
+        'bg-background relative flex size-20 rounded-xl dark:bg-transparent',
+        className
+      )}
+    >
+      <div
+        role="presentation"
+        className={cn(
+          'absolute inset-0 rounded-xl border border-black/20 dark:border-white/25',
+          borderClassName
+        )}
+      />
+      <div className="relative z-20 m-auto size-fit *:size-8">{children}</div>
+    </div>
+  );
+};

src/components/blocks/logo-cloud/logo-cloud.tsx

@@ -1,12 +1,12 @@
 import { useTranslations } from "next-intl";
 
 export default function LogoCloudSection() {
-    const t = useTranslations('HomePage.LogoCloud');
+    const t = useTranslations('HomePage.logocloud');
     
     return (
       <section className="py-16">
         <div className="mx-auto max-w-5xl px-6">
-          <h2 className="text-center text-xl font-semibold">
+          <h2 className="text-center text-xl font-medium">
             {t('title')}
           </h2>
           <div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">

src/components/blocks/stats/stats.tsx

@@ -4,7 +4,7 @@ export default function StatsSection() {
   const t = useTranslations('HomePage.stats');
 
   return (
-    <section className="py-12 md:py-20 w-full bg-muted">
+    <section className="py-12 md:py-20 w-full bg-muted dark:bg-background">
       <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
         <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
           <h2 className="text-4xl font-medium lg:text-5xl">