feat: add LogoCloud section to homepage

- Introduced a new LogoCloudSection component to showcase partner logos on the homepage, enhancing brand visibility.
- Updated English and Chinese JSON files to include a title for the LogoCloud section.
- Refactored the homepage to integrate the new LogoCloudSection, improving overall layout and user engagement.
- Added multiple SVG logos to the public/svg directory for use in the LogoCloud section.

messages/en.json

@@ -40,6 +40,9 @@
       "primary": "Get Started",
       "secondary": "See Demo"
     },
+    "LogoCloud": {
+      "title": "Your favorite companies are our partners"
+    },
     "faqs": {
       "title": "Frequently Asked Questions",
       "description": "Please feel free to contact us if you have any questions",

messages/zh.json

@@ -40,6 +40,9 @@
       "primary": "开始使用",
       "secondary": "查看演示"
     },
+    "LogoCloud": {
+      "title": "您最爱公司都是我们的合作伙伴"
+    },
     "faqs": {
       "title": "常见问题",
       "description": "如果您有任何问题，请随时联系我们",

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

@@ -8,10 +8,10 @@ import { getTranslations } from 'next-intl/server';
 import CallToAction from '../../preview/call-to-action/one/page';
 import ContentSection from '../../preview/content/one/page';
 import Features from '../../preview/features/one/page';
-import LogoCloud from '../../preview/logo-cloud/one/page';
 import Pricing from '../../preview/pricing/three/page';
 import StatsSection from '../../preview/stats/one/page';
 import Testimonials from '../../preview/testimonials/one/page';
+import LogoCloud from '@/components/blocks/logo-cloud/logo-cloud';
 
 /**
  * https://next-intl.dev/docs/environments/actions-metadata-route-handlers#metadata-api

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

@@ -0,0 +1,88 @@
+import { useTranslations } from "next-intl";
+
+export default function LogoCloudSection() {
+    const t = useTranslations('HomePage.LogoCloud');
+    
+    return (
+      <section className="py-16">
+        <div className="mx-auto max-w-5xl px-6">
+          <h2 className="text-center text-lg 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">
+            <img
+              className="h-5 w-fit dark:invert"
+              src="/svg/nextjs_logo_light.svg"
+              alt="Nextjs Logo"
+              height="20"
+              width="auto"
+            />
+            <img
+              className="h-4 w-fit dark:invert"
+              src="/svg/tailwindcss.svg"
+              alt="Tailwind CSS Logo"
+              height="16"
+              width="auto"
+            />
+            <img
+              className="h-7 w-fit dark:invert"
+              src="/svg/resend-wordmark-black.svg"
+              alt="Resend Logo"
+              height="28"
+              width="auto"
+            />
+            <img
+              className="h-5 w-fit dark:invert"
+              src="/svg/vercel.svg"
+              alt="Vercel Logo"
+              height="20"
+              width="auto"
+            />
+            <img
+              className="h-4 w-fit dark:invert"
+              src="/svg/github.svg"
+              alt="GitHub Logo"
+              height="16"
+              width="auto"
+            />
+            <img
+              className="h-4 w-fit dark:invert"
+              src="/svg/lemonsqueezy.svg"
+              alt="Lemon Squeezy Logo"
+              height="16"
+              width="auto"
+            />
+            <img
+              className="h-6 w-fit dark:invert"
+              src="/svg/openai.svg"
+              alt="OpenAI Logo"
+              height="24"
+              width="auto"
+            />
+            <img
+              className="h-4 w-fit dark:invert"
+              src="/svg/zapier.svg"
+              alt="Zapier Logo"
+              height="20"
+              width="auto"
+            />
+            <img
+              className="h-4 w-fit dark:invert"
+              src="/svg/nvidia.svg"
+              alt="NVIDIA Logo"
+              height="20"
+              width="auto"
+            />
+            <img
+              className="h-5 w-fit dark:invert"
+              src="/svg/cursor_wordmark_light.svg"
+              alt="Cursor Logo"
+              height="20"
+              width="auto"
+            />
+          </div>
+        </div>
+      </section>
+    );
+  }
+