From 532de654e2a6b76bdda8e659330947d19ccbd22c Mon Sep 17 00:00:00 2001
From: javayhu <javayhu@gmail.com>
Date: Thu, 1 May 2025 15:46:53 +0800
Subject: [PATCH] chore: optimize homepage features sections

---
 messages/en.json                              |  12 +-
 messages/zh.json                              |  26 +--
 src/app/[locale]/(marketing)/(home)/page.tsx  |   6 +-
 src/components/blocks/features/features.tsx   |   2 +-
 src/components/blocks/features/features2.tsx  | 182 ++++++------------
 src/components/blocks/features/features3.tsx  | 132 ++++++++-----
 src/components/blocks/features/features4.tsx  |  71 -------
 src/components/blocks/features/features5.tsx  | 103 ----------
 .../blocks/integration/integration.tsx        |   2 +-
 9 files changed, 166 insertions(+), 370 deletions(-)
 delete mode 100644 src/components/blocks/features/features4.tsx
 delete mode 100644 src/components/blocks/features/features5.tsx

diff --git a/messages/en.json b/messages/en.json
index ada92b4..65feb68 100644
--- a/messages/en.json
+++ b/messages/en.json
@@ -666,16 +666,18 @@
         }
       }
     },
-    "features3": {
-      "title": "Product Features",
-      "description": "Write the description of your product here, make it as detailed as possible",
+    "features2": {
+      "title": "Features2",
+      "subtitle": "The features of your product",
+      "description": "Write the description of your product here",
       "feature-1": "Product Feature One",
       "feature-2": "Product Feature Two",
       "feature-3": "Product Feature Three",
       "feature-4": "Product Feature Four"
     },
-    "features5": {
-      "title": "The features of your product",
+    "features3": {
+      "title": "Features3",
+      "subtitle": "The features of your product",
       "description": "Write the description of your product here",
       "items": {
         "item-1": {
diff --git a/messages/zh.json b/messages/zh.json
index c574bcd..50fcc4c 100644
--- a/messages/zh.json
+++ b/messages/zh.json
@@ -647,7 +647,7 @@
     "features": {
       "title": "功能",
       "subtitle": "您的 SaaS 产品功能",
-      "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
+      "description": "请在这里介绍您的 SaaS 产品的特色功能的信息",
       "items": {
         "item-1": {
           "title": "产品特色功能一",
@@ -667,9 +667,19 @@
         }
       }
     },
-    "features5": {
-      "title": "您的 SaaS 产品功能",
-      "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
+    "features2": {
+      "title": "功能2",
+      "subtitle": "您的 SaaS 产品功能",
+      "description": "请在这里介绍您的 SaaS 产品的特色功能的信息",
+      "feature-1": "特色功能特点一",
+      "feature-2": "特色功能特点二",
+      "feature-3": "特色功能特点三",
+      "feature-4": "特色功能特点四"
+    },
+    "features3": {
+      "title": "功能3",
+      "subtitle": "您的 SaaS 产品功能",
+      "description": "请在这里介绍您的 SaaS 产品的特色功能的信息",
       "items": {
         "item-1": {
           "title": "产品特色功能一",
@@ -697,14 +707,6 @@
         }
       }
     },
-    "features3": {
-      "title": "产品特色功能",
-      "description": "请在详细介绍您的 SaaS 产品的特色功能的信息，尽可能详细，使其更吸引用户，提高落地页的转化率",
-      "feature-1": "特色功能特点一",
-      "feature-2": "特色功能特点二",
-      "feature-3": "特色功能特点三",
-      "feature-4": "特色功能特点四"
-    },
     "pricing": {
       "title": "价格",
       "description": "选择最适合您的付费计划"
diff --git a/src/app/[locale]/(marketing)/(home)/page.tsx b/src/app/[locale]/(marketing)/(home)/page.tsx
index 8db5013..f1986fb 100644
--- a/src/app/[locale]/(marketing)/(home)/page.tsx
+++ b/src/app/[locale]/(marketing)/(home)/page.tsx
@@ -3,8 +3,6 @@ import FaqSection from '@/components/blocks/faqs/faqs';
 import FeaturesSection from '@/components/blocks/features/features';
 import Features2Section from '@/components/blocks/features/features2';
 import Features3Section from '@/components/blocks/features/features3';
-import Features4Section from '@/components/blocks/features/features4';
-import Features5Section from '@/components/blocks/features/features5';
 import HeroSection from '@/components/blocks/hero/hero';
 import IntegrationSection from '@/components/blocks/integration/integration';
 import Integration2Section from '@/components/blocks/integration/integration2';
@@ -58,9 +56,9 @@ export default async function HomePage(props: HomePageProps) {
 
         <FeaturesSection />
 
-        <Features3Section />
+        <Features2Section />
 
-        <Features5Section />
+        <Features3Section />
 
         <Integration2Section />
 
diff --git a/src/components/blocks/features/features.tsx b/src/components/blocks/features/features.tsx
index 6e0867b..d2a8c60 100644
--- a/src/components/blocks/features/features.tsx
+++ b/src/components/blocks/features/features.tsx
@@ -23,7 +23,7 @@ import { useState } from 'react';
  * https://nsui.irung.me/features
  * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-12.json
  */
-export default function Features2Section() {
+export default function FeaturesSection() {
   const t = useTranslations('HomePage.features');
   type ImageKey = 'item-1' | 'item-2' | 'item-3' | 'item-4';
   const [activeItem, setActiveItem] = useState<ImageKey>('item-1');
diff --git a/src/components/blocks/features/features2.tsx b/src/components/blocks/features/features2.tsx
index 716118c..52fc9a2 100644
--- a/src/components/blocks/features/features2.tsx
+++ b/src/components/blocks/features/features2.tsx
@@ -1,143 +1,75 @@
-'use client';
-
-import { BorderBeam } from '@/components/magicui/border-beam';
+import { HeaderSection } from '@/components/layout/header-section';
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '@/components/ui/accordion';
-import {
-  ChartBarIncreasingIcon,
-  Database,
-  Fingerprint,
-  IdCard,
+  ActivityIcon,
+  DraftingCompassIcon,
+  MailIcon,
+  ZapIcon,
 } from 'lucide-react';
-import { AnimatePresence, motion } from 'motion/react';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
-import { useState } from 'react';
 
 /**
  * https://nsui.irung.me/features
- * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-12.json
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-5.json
  */
 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/music.png',
-      alt: 'Product Feature One',
-    },
-    'item-2': {
-      image: '/blocks/mail2.png',
-      alt: 'Product Feature Two',
-    },
-    'item-3': {
-      image: '/blocks/charts.png',
-      alt: 'Product Feature Three',
-    },
-    'item-4': {
-      image: '/blocks/payments.png',
-      alt: 'Product Feature Four',
-    },
-  };
+  const t = useTranslations('HomePage.features2');
 
   return (
-    <section className="py-16">
-      <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 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>{t('description')}</p>
-        </div>
+    <section id="features2" className="px-4 py-16">
+      <div className="mx-auto max-w-6xl space-y-8 lg:space-y-20">
+        <HeaderSection
+          title={t('title')}
+          subtitle={t('subtitle')}
+          subtitleAs="h2"
+          description={t('description')}
+          descriptionAs="p"
+        />
 
-        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:grid-cols-12 md:gap-12 lg:gap-24 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 className="grid items-center gap-12 lg:grid-cols-5 lg:gap-24">
+          <div className="lg:col-span-2">
+            <div className="lg:pr-0">
+              <h2 className="text-4xl font-semibold">{t('title')}</h2>
+              <p className="mt-6">{t('description')}</p>
             </div>
-            <BorderBeam
-              duration={6}
-              size={200}
-              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
-            />
+
+            <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 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 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>
       </div>
diff --git a/src/components/blocks/features/features3.tsx b/src/components/blocks/features/features3.tsx
index 050967f..bbca850 100644
--- a/src/components/blocks/features/features3.tsx
+++ b/src/components/blocks/features/features3.tsx
@@ -1,66 +1,102 @@
+import { HeaderSection } from '@/components/layout/header-section';
 import {
-  ActivityIcon,
-  DraftingCompassIcon,
-  MailIcon,
+  CpuIcon,
+  FingerprintIcon,
+  PencilIcon,
+  Settings2Icon,
+  SparklesIcon,
   ZapIcon,
 } from 'lucide-react';
 import { useTranslations } from 'next-intl';
-import Image from 'next/image';
 
 /**
  * https://nsui.irung.me/features
- * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-5.json
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-4.json
  */
 export default function Features3Section() {
   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="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>
+    <section id="features3" className="px-4 py-16">
+      <div className="mx-auto max-w-6xl space-y-8 lg:space-y-20">
+        <HeaderSection
+          title={t('title')}
+          subtitle={t('subtitle')}
+          subtitleAs="h2"
+          description={t('description')}
+          descriptionAs="p"
+        />
 
-            <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 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="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 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>
diff --git a/src/components/blocks/features/features4.tsx b/src/components/blocks/features/features4.tsx
deleted file mode 100644
index 543c30a..0000000
--- a/src/components/blocks/features/features4.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-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/payments.png"
-                className="hidden rounded-[15px] dark:block"
-                alt="payments illustration dark"
-                width={1207}
-                height={929}
-              />
-              <Image
-                src="/blocks/payments-light.png"
-                className="rounded-[15px] shadow dark:hidden"
-                alt="payments 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>
-  );
-}
diff --git a/src/components/blocks/features/features5.tsx b/src/components/blocks/features/features5.tsx
deleted file mode 100644
index 75e0170..0000000
--- a/src/components/blocks/features/features5.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-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>
-  );
-}
diff --git a/src/components/blocks/integration/integration.tsx b/src/components/blocks/integration/integration.tsx
index c81c104..276de6f 100644
--- a/src/components/blocks/integration/integration.tsx
+++ b/src/components/blocks/integration/integration.tsx
@@ -90,7 +90,7 @@ const IntegrationCard = ({
   const t = useTranslations('HomePage.integration');
 
   return (
-    <Card className="p-6">
+    <Card className="p-6 bg-background hover:bg-accent dark:hover:bg-accent">
       <div className="relative">
         <div className="*:size-10">{children}</div>