feat: expand features sections on homepage

- Updated English and Chinese JSON files to include additional product features and descriptions, enhancing user engagement.
- Introduced a new Features3Section component to showcase more product features on the homepage.
- Refactored the homepage layout to integrate the new Features3Section, improving overall user experience.
- Adjusted existing FeaturesSection and Features2Section components for consistency and clarity in feature presentation.

messages/en.json

@@ -44,28 +44,6 @@
       "title": "Your favorite companies are our partners"
     },
     "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, make it as detailed as possible, make it more attractive to users"
-        },
-        "item-2": {
-          "title": "Product Feature Two",
-          "description": "Please write the detailed description of feature two here, make it as detailed as possible, make it more attractive to users"
-        },
-        "item-3": {
-          "title": "Product Feature Three",
-          "description": "Please write the detailed description of feature three here, make it as detailed as possible, make it more attractive to users"
-        },
-        "item-4": {
-          "title": "Product Feature Four",
-          "description": "Please write the detailed description of feature four here, make it as detailed as possible, make it more attractive to users"
-        }
-      }
-    },
-    "features2": {
       "title": "The features of your product",
       "description": "Write the description of your product here",
       "items": {
@@ -95,6 +73,36 @@
         }
       }
     },
+    "features2": {
+      "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, make it as detailed as possible, make it more attractive to users"
+        },
+        "item-2": {
+          "title": "Product Feature Two",
+          "description": "Please write the detailed description of feature two here, make it as detailed as possible, make it more attractive to users"
+        },
+        "item-3": {
+          "title": "Product Feature Three",
+          "description": "Please write the detailed description of feature three here, make it as detailed as possible, make it more attractive to users"
+        },
+        "item-4": {
+          "title": "Product Feature Four",
+          "description": "Please write the detailed description of feature four here, make it as detailed as possible, make it more attractive to users"
+        }
+      }
+    },
+    "features3": {
+      "title": "The features of your product",
+      "description": "Write the description of your product here, make it as detailed as possible",
+      "feature-1": "Product Feature One",
+      "feature-2": "Product Feature Two",
+      "feature-3": "Product Feature Three",
+      "feature-4": "Product Feature Four"
+    },
     "faqs": {
       "title": "Frequently Asked Questions",
       "description": "Please feel free to contact us if you have any questions",

messages/zh.json

@@ -43,29 +43,7 @@
     "LogoCloud": {
       "title": "您最爱公司都是我们的合作伙伴"
     },
-    "features": {
-      "title": "您的 SaaS 产品功能",
-      "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
-      "items": {
-        "item-1": {
-          "title": "产品特色功能一",
-          "description": "请在这里详细描述您的产品特色功能一，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        },
-        "item-2": {
-          "title": "产品特色功能二",
-          "description": "请在这里详细描述您的产品特色功能二，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        },
-        "item-3": {
-          "title": "产品特色功能三",
-          "description": "请在这里详细描述您的产品特色功能三，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        },
-        "item-4": {
-          "title": "产品特色功能四",
-          "description": "请在这里详细描述您的产品特色功能四，尽可能详细，使其更吸引用户，提高落地页的转化率"
-        }
-      }
-    },
-    "features2": {
+    "features1": {
       "title": "您的 SaaS 产品功能",
       "description": "请在详细介绍您的 SaaS 产品的特色功能的信息",
       "items": {
@@ -95,6 +73,36 @@
         }
       }
     },
+    "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 产品的特色功能的信息，尽可能详细，使其更吸引用户，提高落地页的转化率",
+      "feature-1": "特色功能特点一",
+      "feature-2": "特色功能特点二",
+      "feature-3": "特色功能特点三",
+      "feature-4": "特色功能特点四"
+    },
     "faqs": {
       "title": "常见问题",
       "description": "如果您有任何问题，请随时联系我们",

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

@@ -1,6 +1,6 @@
 import FaqSection from '@/components/blocks/faqs/faqs';
-import FeaturesSection from '@/components/blocks/features/features';
 import Features2Section from '@/components/blocks/features/features2';
+import FeaturesSection from '@/components/blocks/features/features';
 import HeroSection from '@/components/blocks/hero/hero';
 import LogoCloud from '@/components/blocks/logo-cloud/logo-cloud';
 import { constructMetadata } from '@/lib/metadata';
@@ -13,6 +13,7 @@ import ContentSection from '../../preview/content/one/page';
 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';
 
 /**
  * https://next-intl.dev/docs/environments/actions-metadata-route-handlers#metadata-api
@@ -52,14 +53,18 @@ export default async function HomePage(props: HomePageProps) {
           <LogoCloud />
         </div>
 
-        <div id="features" className="">
+        <div id="features2" className="">
           <FeaturesSection />
         </div>
 
-        <div id="features2" className="">
+        <div id="features" className="">
           <Features2Section />
         </div>
 
+        <div id="features3" className="">
+          <Features3Section />
+        </div>
+
         <div id="content" className="">
           <ContentSection />
         </div>

src/components/blocks/features/features.tsx

@@ -1,147 +1,86 @@
-'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 { 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-12.json
+ * pnpm dlx shadcn@canary add https://nsui.irung.me/r/features-4.json
  */
 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');
-
-  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="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-5xl 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">
+      <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>
+          <p className="mt-4">
             {t('description')}
           </p>
         </div>
 
-        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:gap-20 lg:px-0">
-          <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="bg-background relative flex overflow-hidden rounded-2xl border p-2">
-            {/* <div className="w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]"></div> */}
-            <div className="aspect-76/59 bg-background relative 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="relative mx-auto grid divide-x divide-y border *:p-12 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>
-            <BorderBeam
-              duration={6}
-              size={200}
-              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
-            />
+            <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/features/features2.tsx

@@ -1,86 +1,147 @@
-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 Features2Section() {
   const t = useTranslations('HomePage.features2');
+  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-5xl 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 max-w-5xl divide-x divide-y border *:p-12 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" />
+        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:gap-20 lg:px-0">
+          <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>
 
-              <h3 className="text-base font-medium">{t('items.item-3.title')}</h3>
+          <div className="bg-background relative flex overflow-hidden rounded-2xl border p-2">
+            {/* <div className="w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]"></div> */}
+            <div className="aspect-76/59 bg-background relative 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/features3.tsx

@@ -0,0 +1,66 @@
+import { ActivityIcon, DraftingCompassIcon, MailIcon, 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
+ */
+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 lg:text-5xl">
+                {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 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>
+      </div>
+    </section>
+  );
+}