feat: add integration section and features4 component to homepage

- Introduced a new IntegrationSection component to showcase integrations with popular tools, enhancing user workflow. - Updated English and Chinese JSON files to include integration titles and descriptions. - Added a new Features4Section component with a different layout for product features, improving presentation and user engagement. - Refactored homepage layout to integrate the new sections, enhancing overall user experience.
2025-04-12 23:23:04 +08:00 · 2025-04-12 23:23:04 +08:00 · 5c48725110
commit 5c48725110
parent 19f6457d6d
8 changed files with 277 additions and 11 deletions
--- a/messages/en.json
+++ b/messages/en.json
@ -43,6 +43,37 @@
    "LogoCloud": {
      "title": "Your favorite companies are our partners"
    },
+    "integration": {
+      "title": "Integrate with your favorite tools",
+      "description": "Connect seamlessly with popular platforms and services to enhance your workflow.",
+      "learnMore": "Learn More",
+      "items": {
+        "item-1": {
+          "title": "Google Gemini",
+          "description": "Amet praesentium deserunt ex commodi tempore fuga voluptatem."
+        },
+        "item-2": {
+          "title": "Replit",
+          "description": "Amet praesentium deserunt ex commodi tempore fuga voluptatem."
+        },
+        "item-3": {
+          "title": "MagicUI",
+          "description": "Amet praesentium deserunt ex commodi tempore fuga voluptatem."
+        },
+        "item-4": {
+          "title": "VSCodium",
+          "description": "Amet praesentium deserunt ex commodi tempore fuga voluptatem."
+        },
+        "item-5": {
+          "title": "MediaWiki",
+          "description": "Amet praesentium deserunt ex commodi tempore fuga voluptatem."
+        },
+        "item-6": {
+          "title": "Google PaLM",
+          "description": "Amet praesentium deserunt ex commodi tempore fuga voluptatem."
+        }
+      }
+    },
    "features": {
      "title": "The features of your product",
      "description": "Write the description of your product here",
@ -96,7 +127,7 @@
      }
    },
    "features3": {
-      "title": "The features of your product",
+      "title": "Product Features",
      "description": "Write the description of your product here, make it as detailed as possible",
      "feature-1": "Product Feature One",
      "feature-2": "Product Feature Two",
--- a/messages/zh.json
+++ b/messages/zh.json
@ -43,7 +43,38 @@
    "LogoCloud": {
      "title": "您最爱公司都是我们的合作伙伴"
    },
-    "features1": {
+    "integration": {
+      "title": "与您最喜欢的工具集成",
+      "description": "无缝连接流行的平台和服务，以增强您的工作流程。",
+      "learnMore": "了解更多",
+      "items": {
+        "item-1": {
+          "title": "Google Gemini",
+          "description": "这里是Google Gemini的描述，详细介绍Google Gemini的功能和优势。"
+        },
+        "item-2": {
+          "title": "Replit",
+          "description": "这里是Replit的描述，详细介绍Replit的功能和优势。"
+        },
+        "item-3": {
+          "title": "MagicUI",
+          "description": "这里是MagicUI的描述，详细介绍MagicUI的功能和优势。"
+        },
+        "item-4": {
+          "title": "VSCodium",
+          "description": "这里是VSCodium的描述，详细介绍VSCodium的功能和优势。"
+        },
+        "item-5": {
+          "title": "MediaWiki",
+          "description": "这里是MediaWiki的描述，详细介绍MediaWiki的功能和优势。"
+        },
+        "item-6": {
+          "title": "Google PaLM",
+          "description": "这里是Google PaLM的描述，详细介绍Google PaLM的功能和优势。"
+        }
+      }
+    },
+    "features": {
      "title": "您的 SaaS 产品功能",
      "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
      "items": {
--- a/src/app/[locale]/(marketing)/(home)/page.tsx
+++ b/src/app/[locale]/(marketing)/(home)/page.tsx
@ -14,6 +14,8 @@ import Pricing from '../../preview/pricing/three/page';
 import StatsSection from '../../preview/stats/one/page';
 import Testimonials from '../../preview/testimonials/one/page';
 import Features3Section from '@/components/blocks/features/features3';
+import IntegrationSection from '@/components/blocks/integration/integration';
+import Features4Section from '@/components/blocks/features/features4';

 /**
 * https://next-intl.dev/docs/environments/actions-metadata-route-handlers#metadata-api
@ -53,11 +55,15 @@ export default async function HomePage(props: HomePageProps) {
          <LogoCloud />
        </div>

-        <div id="features2" className="">
-          <FeaturesSection />
+        <div id="integration" className="">
+          <IntegrationSection />
        </div>

        <div id="features" className="">
+          <FeaturesSection />
+        </div>
+
+        <div id="features2" className="">
          <Features2Section />
        </div>

@ -65,6 +71,10 @@ export default async function HomePage(props: HomePageProps) {
          <Features3Section />
        </div>

+        <div id="features4" className="">
+          <Features4Section />
+        </div>
+
        <div id="content" className="">
          <ContentSection />
        </div>
--- a/src/components/blocks/features/features.tsx
+++ b/src/components/blocks/features/features.tsx
@ -20,7 +20,7 @@ export default function FeaturesSection() {
          </p>
        </div>

-        <div className="relative mx-auto grid divide-x divide-y border *:p-12 sm:grid-cols-2 lg:grid-cols-3">
+        <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" />
--- a/src/components/blocks/features/features3.tsx
+++ b/src/components/blocks/features/features3.tsx
@ -15,13 +15,14 @@ export default function Features3Section() {
        <div className="grid items-center gap-12 md:grid-cols-2 md:gap-12 lg:grid-cols-5 lg:gap-24">
          <div className="lg:col-span-2">
            <div className="md:pr-6 lg:pr-0">
-              <h2 className="text-4xl font-semibold lg:text-5xl">
+              <h2 className="text-4xl font-semibold">
                {t('title')}
              </h2>
              <p className="mt-6">
                {t('description')}
              </p>
            </div>
+
            <ul className="mt-8 divide-y border-y *:flex *:items-center *:gap-3 *:py-3">
              <li>
                <MailIcon className="size-5" />
@ -41,19 +42,20 @@ export default function Features3Section() {
              </li>
            </ul>
          </div>
+
          <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.png"
+                src="/blocks/dark-card.webp"
                className="hidden rounded-[15px] dark:block"
-                alt="payments illustration dark"
+                alt="card illustration dark"
                width={1207}
                height={929}
              />
              <Image
-                src="/blocks/payments-light.png"
+                src="/blocks/card.png"
                className="rounded-[15px] shadow dark:hidden"
-                alt="payments illustration light"
+                alt="card illustration light"
                width={1207}
                height={929}
              />
--- a/src/components/blocks/features/features4.tsx
+++ b/src/components/blocks/features/features4.tsx
@ -0,0 +1,70 @@
+import { ActivityIcon, DraftingCompassIcon, MailIcon, ZapIcon } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+
+/**
+ * Features4Section is Features3Section with a different layout
+ * 
+ * https://nsui.irung.me/features
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-5.json
+ */
+export default function Features4Section() {
+  const t = useTranslations('HomePage.features3');
+
+  return (
+    <section className="py-16">
+      <div className="mx-auto max-w-6xl px-6">
+        <div className="grid items-center gap-12 md:grid-cols-2 md:gap-12 lg:grid-cols-5 lg:gap-24">
+          <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/dark-card.webp"
+                className="hidden rounded-[15px] dark:block"
+                alt="card illustration dark"
+                width={1207}
+                height={929}
+              />
+              <Image
+                src="/blocks/card.png"
+                className="rounded-[15px] shadow dark:hidden"
+                alt="card illustration light"
+                width={1207}
+                height={929}
+              />
+            </div>
+          </div>
+
+          <div className="lg:col-span-2">
+            <div className="md:pr-6 lg:pr-0">
+              <h2 className="text-4xl font-semibold">
+                {t('title')}
+              </h2>
+              <p className="mt-6">
+                {t('description')}
+              </p>
+            </div>
+
+            <ul className="mt-8 divide-y border-y *:flex *:items-center *:gap-3 *:py-3">
+              <li>
+                <MailIcon className="size-5" />
+                {t('feature-1')}
+              </li>
+              <li>
+                <ZapIcon className="size-5" />
+                {t('feature-2')}
+              </li>
+              <li>
+                <ActivityIcon className="size-5" />
+                {t('feature-3')}
+              </li>
+              <li>
+                <DraftingCompassIcon className="size-5" />
+                {t('feature-4')}
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
--- a/src/components/blocks/hero/hero.tsx
+++ b/src/components/blocks/hero/hero.tsx
@ -95,7 +95,7 @@ export default function HeroSection() {
                    <span className="text-foreground text-sm">
                      {t('introduction')}
                    </span>
-                    <span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700"></span>
+                    {/* <span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700"></span> */}

                    <div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
                      <div className="flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
--- a/src/components/blocks/integration/integration.tsx
+++ b/src/components/blocks/integration/integration.tsx
@ -0,0 +1,122 @@
+import {
+  Gemini,
+  GooglePaLM,
+  MagicUI,
+  MediaWiki,
+  Replit,
+  VSCodium,
+} from '@/components/nsui/logos';
+import { Button } from '@/components/ui/button';
+import { Card } from '@/components/ui/card';
+import { LocaleLink } from '@/i18n/navigation';
+import { ChevronRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import * as React from 'react';
+
+export default function IntegrationSection() {
+  const t = useTranslations('HomePage.integration');
+
+  return (
+    <section>
+      <div className="py-16">
+        <div className="mx-auto max-w-5xl px-6">
+          <div className="text-center">
+            <h2 className="text-balance text-3xl font-semibold md:text-4xl">
+              {t('title')}
+            </h2>
+            <p className="text-muted-foreground mt-6">
+              {t('description')}
+            </p>
+          </div>
+
+          <div className="mt-12 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+            <IntegrationCard
+              title={t('items.item-1.title')}
+              description={t('items.item-1.description')}
+            >
+              <Gemini />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title={t('items.item-2.title')}
+              description={t('items.item-2.description')}
+            >
+              <Replit />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title={t('items.item-3.title')}
+              description={t('items.item-3.description')}
+            >
+              <MagicUI />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title={t('items.item-4.title')}
+              description={t('items.item-4.description')}
+            >
+              <VSCodium />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title={t('items.item-5.title')}
+              description={t('items.item-5.description')}
+            >
+              <MediaWiki />
+            </IntegrationCard>
+
+            <IntegrationCard
+              title={t('items.item-6.title')}
+              description={t('items.item-6.description')}
+            >
+              <GooglePaLM />
+            </IntegrationCard>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+const IntegrationCard = ({
+  title,
+  description,
+  children,
+  link = '#',
+}: {
+  title: string;
+  description: string;
+  children: React.ReactNode;
+  link?: string;
+}) => {
+  const t = useTranslations('HomePage.integration');
+
+  return (
+    <Card className="p-6">
+      <div className="relative">
+        <div className="*:size-10">{children}</div>
+
+        <div className="space-y-2 py-6">
+          <h3 className="text-base font-medium">{title}</h3>
+          <p className="text-muted-foreground line-clamp-2 text-sm">
+            {description}
+          </p>
+        </div>
+
+        <div className="flex gap-3 border-t border-dashed pt-6">
+          <Button
+            asChild
+            variant="secondary"
+            size="sm"
+            className="gap-1 pr-2 shadow-none"
+          >
+            <LocaleLink href={link}>
+              {t('learnMore')}
+              <ChevronRight className="ml-0 !size-3.5 opacity-50" />
+            </LocaleLink>
+          </Button>
+        </div>
+      </div>
+    </Card>
+  );
+};