dream-num · jikkai · Jul 12, 2025 · Jul 11, 2025 · Jul 12, 2025 · Jul 12, 2025
diff --git a/app/[lang]/(home)/page.tsx b/app/[lang]/(home)/page.tsx
@@ -1,11 +1,15 @@
-import { BookTextIcon, FerrisWheelIcon } from 'lucide-react'
+import { BookTextIcon, BowArrowIcon, CircuitBoardIcon, Columns3CogIcon, FerrisWheelIcon, LayersIcon } from 'lucide-react'
 import Link from 'next/link'
 import BlurryBlob from '@/components/animata/blurry-blob'
 import { Customer } from '@/components/customer'
 import { AnimatedShinyText } from '@/components/magicui/animated-shiny-text'
 import { BlurFade } from '@/components/magicui/blur-fade'
 import { RainbowButton } from '@/components/magicui/rainbow-button'
 import Univer from '@/components/univer'
+import Combination from '@/components/widget/combination'
+import Customizability from '@/components/widget/customizability'
+import Integration from '@/components/widget/integration'
+import Performance from '@/components/widget/performance'
 import { customTranslations } from '@/lib/i18n'
 import pkg from '@/package.json'
 
@@ -81,8 +85,6 @@ export default async function Page({ params }: IProps) {
                   dark:bg-neutral-800 dark:hover:bg-neutral-900
                 `}
                 href="/blog/weekly-4"
-                target="_blank"
-                rel="noopener noreferrer"
               >
                 <span
                   className={`
@@ -167,20 +169,73 @@ export default async function Page({ params }: IProps) {
         </section>
 
         {/* Customer */}
-        <section className="text-center">
-          <h3
+        <section className="mb-12 text-center">
+          <h2
             className={`
               mb-4 text-sm font-semibold text-neutral-800
               dark:text-neutral-400
             `}
           >
             {customTranslations[lang]['home.customer.title']}
-          </h3>
+          </h2>
 
           <div className="flex justify-center overflow-hidden">
             <Customer />
           </div>
         </section>
+
+        {/* Features */}
+        <section className="container px-4">
+          <div
+            className={`
+              grid gap-4
+              lg:h-120 lg:grid-flow-col lg:grid-cols-3 lg:grid-rows-4
+              [&>div]:flex [&>div]:flex-col [&>div]:gap-8 [&>div]:rounded-2xl [&>div]:bg-white/30 [&>div]:p-6
+              [&>div]:shadow-xs [&>div]:ring-4 [&>div]:ring-neutral-100/20 [&>div]:backdrop-blur-sm [&>div]:ring-inset
+              dark:[&>div]:bg-neutral-900/50 dark:[&>div]:ring-neutral-600/20
+              [&>div>h3]:inline-flex [&>div>h3]:items-center [&>div>h3]:gap-2 [&>div>h3]:text-sm
+              [&>div>h3]:font-semibold [&>div>h3]:text-neutral-600
+              dark:[&>div>h3]:text-neutral-300
+              [&>div>h3>svg]:size-5
+            `}
+          >
+            {/* Combination */}
+            <div className="lg:col-span-1 lg:row-span-4">
+              <h3>
+                <CircuitBoardIcon />
+                {customTranslations[lang]['home.features.conbination.title']}
+              </h3>
+              <Combination className="flex-1" />
+            </div>
+
+            {/* Integration */}
+            <div className="lg:col-span-1 lg:row-span-2">
+              <h3>
+                <LayersIcon />
+                {customTranslations[lang]['home.features.integration.title']}
+              </h3>
+              <Integration className="flex-1" />
+            </div>
+
+            {/* Performance */}
+            <div className="lg:col-span-2 lg:row-span-2">
+              <h3>
+                <BowArrowIcon />
+                {customTranslations[lang]['home.features.performance.title']}
+              </h3>
+              <Performance />
+            </div>
+
+            {/* Customizability */}
+            <div className="lg:col-span-1 lg:row-span-2">
+              <h3>
+                <Columns3CogIcon />
+                {customTranslations[lang]['home.features.customizability.title']}
+              </h3>
+              <Customizability className="flex-1" />
+            </div>
+          </div>
+        </section>
       </div>
     </>
   )

diff --git a/components/animata/images-reveal.tsx b/components/animata/images-reveal.tsx
@@ -0,0 +1,76 @@
+'use client'
+
+import { motion } from 'motion/react'
+import Image from 'next/image'
+import React from 'react'
+import { clsx } from '@/lib/clsx'
+
+interface ICustomProps {
+  index: number
+  angle: string
+}
+
+const cardVariants = {
+  hidden: { opacity: 0, scale: 0.2 },
+  visible: (custom: ICustomProps) => ({
+    opacity: 1,
+    scale: 1,
+    rotate: custom.angle,
+    transition: {
+      delay: custom.index * 0.1,
+      duration: 0.3,
+      type: 'spring' as const,
+      stiffness: 150,
+      damping: 20,
+      mass: 0.5,
+    },
+  }),
+}
+
+interface IProps {
+  className?: string
+  images?: Array<{
+    src: string
+    angle: string
+  }>
+}
+
+export default function ImagesReveal(props: IProps) {
+  const { className, images = [] } = props
+
+  return (
+    <div className={clsx('relative flex size-full min-h-33 flex-row items-center justify-center', className)}>
+      {images.map((card, i) => (
+        <motion.div
+          key={i}
+          className={`
+            group relative -mr-3.5 -ml-3.5 flex size-18 shrink-0 items-center justify-center rounded-lg bg-white
+            object-cover shadow-md
+            xl:-mr-3 xl:-ml-3 xl:size-22
+            dark:bg-neutral-900
+          `}
+          custom={{ index: i, angle: card.angle }}
+          initial="hidden"
+          animate="visible"
+          variants={cardVariants}
+          whileHover={{
+            scale: 1,
+            rotate: '0deg',
+            transition: { duration: 0.3, type: 'spring', stiffness: 150, damping: 20 },
+          }}
+        >
+          <Image
+            className={`
+              size-20 rounded-lg object-cover mix-blend-luminosity brightness-80 transition-all select-none
+              group-hover:mix-blend-normal group-hover:brightness-100
+              dark:brightness-100
+            `}
+            src={card.src}
+            alt="Product"
+            draggable={false}
+          />
+        </motion.div>
+      ))}
+    </div>
+  )
+}
diff --git a/components/logo.tsx b/components/logo.tsx
@@ -35,3 +35,53 @@ export function Logo(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function BrandIcon(props: SVGProps<SVGSVGElement>) {
+  const id = useId()
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="96"
+      height="93"
+      viewBox="0 0 96 93"
+      fill="none"
+      {...props}
+    >
+      <g opacity="0.14" filter={`url(#${id}_0)`}>
+        <path d="M24.6936 60.8575C24.5706 60.7879 24.4565 60.6975 24.3587 60.5849C21.757 57.6393 21.3407 53.3912 23.3216 50.0159L37.2829 26.2256C37.6458 25.6078 38.4489 25.3959 39.0771 25.753C39.7053 26.1101 39.9201 26.8998 39.5586 27.5192L25.5974 51.3094C24.1765 53.7305 24.4758 56.7769 26.3426 58.8898C26.8182 59.4292 26.7604 60.2456 26.2122 60.7138C25.7781 61.0857 25.1647 61.1257 24.6936 60.8575ZM21.8607 48.1919L36.1746 23.8001C36.6754 22.9466 37.3377 22.2221 38.1422 21.6472C38.5333 21.3671 38.6207 20.8293 38.3363 20.444C38.0518 20.0588 37.5036 19.9743 37.1125 20.2529C36.1079 20.97 35.2812 21.8739 34.6574 22.9377L20.3435 47.3296C20.102 47.7415 20.2458 48.269 20.6636 48.506C21.0814 48.7431 21.6177 48.6024 21.8607 48.1904V48.1919ZM43.153 58.9135L48.3253 50.0989C48.9298 49.0691 48.5713 47.7504 47.5238 47.1562C46.4763 46.5606 45.1369 46.9147 44.5324 47.9445L39.3601 56.7591C38.3926 58.4068 36.2428 58.9743 34.5685 58.023C32.8928 57.0718 32.3165 54.9559 33.284 53.3082L44.6702 33.9068C45.2747 32.877 44.9161 31.5583 43.8686 30.9641C42.8211 30.3685 41.4817 30.7226 40.8772 31.7524L29.491 51.1538C27.316 54.8596 28.611 59.6144 32.3787 61.754C36.145 63.8936 40.9795 62.6193 43.153 58.9135ZM69.7999 31.9569C69.2517 32.4251 69.1939 33.2415 69.6695 33.7809C71.5363 35.8938 71.8356 38.9402 70.4147 41.3613L56.4535 65.1515C56.0905 65.7694 56.3053 66.5606 56.935 66.9177C57.5632 67.2748 58.3662 67.0629 58.7292 66.445L72.6905 42.6548C74.6714 39.278 74.2551 35.0314 71.6534 32.0858C71.5556 31.9747 71.4415 31.8843 71.3185 31.8131C70.8459 31.545 70.234 31.5864 69.7999 31.9569ZM74.1514 44.4788L59.8375 68.8706C59.3367 69.7241 58.6744 70.4486 57.8699 71.0235C57.4787 71.3036 57.3913 71.8414 57.6758 72.2267C57.9603 72.6119 58.5085 72.6964 58.8996 72.4178C59.9041 71.7007 60.7309 70.7968 61.3546 69.733L75.6685 45.3411C75.91 44.9292 75.7663 44.4017 75.3485 44.1646C74.9292 43.9261 74.3943 44.0683 74.1514 44.4802V44.4788ZM52.8591 33.7571L47.6867 42.5718C47.0823 43.6016 47.4408 44.9203 48.4883 45.5145C49.5358 46.1101 50.8752 45.756 51.4797 44.7262L56.652 35.9115C57.6195 34.2639 59.7693 33.6964 61.4435 34.6476C63.1193 35.5989 63.6956 37.7148 62.7281 39.3624L51.3419 58.7639C50.7374 59.7937 51.0959 61.1124 52.1434 61.7066C53.1909 62.3022 54.5303 61.9481 55.1348 60.9183L66.521 41.5168C68.696 37.8111 67.4011 33.0563 63.6334 30.9167C59.8671 28.7771 55.0326 30.0514 52.8591 33.7571Z" fill="url(#paint0_linear_364_61294)" />
+      </g>
+      <g filter={`url(#${id}_1)`}>
+        <path d="M24.6936 60.8575C24.5706 60.7879 24.4565 60.6975 24.3587 60.5849C21.757 57.6393 21.3407 53.3912 23.3216 50.0159L37.2829 26.2256C37.6458 25.6078 38.4489 25.3959 39.0771 25.753C39.7053 26.1101 39.9201 26.8998 39.5586 27.5192L25.5974 51.3094C24.1765 53.7305 24.4758 56.7769 26.3426 58.8898C26.8182 59.4292 26.7604 60.2456 26.2122 60.7138C25.7781 61.0857 25.1647 61.1257 24.6936 60.8575ZM21.8607 48.1919L36.1746 23.8001C36.6754 22.9466 37.3377 22.2221 38.1422 21.6472C38.5333 21.3671 38.6207 20.8293 38.3363 20.444C38.0518 20.0588 37.5036 19.9743 37.1125 20.2529C36.1079 20.97 35.2812 21.8739 34.6574 22.9377L20.3435 47.3296C20.102 47.7415 20.2458 48.269 20.6636 48.506C21.0814 48.7431 21.6177 48.6024 21.8607 48.1904V48.1919ZM43.153 58.9135L48.3253 50.0989C48.9298 49.0691 48.5713 47.7504 47.5238 47.1562C46.4763 46.5606 45.1369 46.9147 44.5324 47.9445L39.3601 56.7591C38.3926 58.4068 36.2428 58.9743 34.5685 58.023C32.8928 57.0718 32.3165 54.9559 33.284 53.3082L44.6702 33.9068C45.2747 32.877 44.9161 31.5583 43.8686 30.9641C42.8211 30.3685 41.4817 30.7226 40.8772 31.7524L29.491 51.1538C27.316 54.8596 28.611 59.6144 32.3787 61.754C36.145 63.8936 40.9795 62.6193 43.153 58.9135ZM69.7999 31.9569C69.2517 32.4251 69.1939 33.2415 69.6695 33.7809C71.5363 35.8938 71.8356 38.9402 70.4147 41.3613L56.4535 65.1515C56.0905 65.7694 56.3053 66.5606 56.935 66.9177C57.5632 67.2748 58.3662 67.0629 58.7292 66.445L72.6905 42.6548C74.6714 39.278 74.2551 35.0314 71.6534 32.0858C71.5556 31.9747 71.4415 31.8843 71.3185 31.8131C70.8459 31.545 70.234 31.5864 69.7999 31.9569ZM74.1514 44.4788L59.8375 68.8706C59.3367 69.7241 58.6744 70.4486 57.8699 71.0235C57.4787 71.3036 57.3913 71.8414 57.6758 72.2267C57.9603 72.6119 58.5085 72.6964 58.8996 72.4178C59.9041 71.7007 60.7309 70.7968 61.3546 69.733L75.6685 45.3411C75.91 44.9292 75.7663 44.4017 75.3485 44.1646C74.9292 43.9261 74.3943 44.0683 74.1514 44.4802V44.4788ZM52.8591 33.7571L47.6867 42.5718C47.0823 43.6016 47.4408 44.9203 48.4883 45.5145C49.5358 46.1101 50.8752 45.756 51.4797 44.7262L56.652 35.9115C57.6195 34.2639 59.7693 33.6964 61.4435 34.6476C63.1193 35.5989 63.6956 37.7148 62.7281 39.3624L51.3419 58.7639C50.7374 59.7937 51.0959 61.1124 52.1434 61.7066C53.1909 62.3022 54.5303 61.9481 55.1348 60.9183L66.521 41.5168C68.696 37.8111 67.4011 33.0563 63.6334 30.9167C59.8671 28.7771 55.0326 30.0514 52.8591 33.7571Z" fill="url(#paint1_linear_364_61294)" />
+      </g>
+      <defs>
+        <filter id={`${id}_0`} x="12.7263" y="12.5889" width="70.5594" height="67.4932" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
+          <feGaussianBlur stdDeviation="3.75" result="effect1_foregroundBlur_364_61294" />
+        </filter>
+        <filter id={`${id}_1`} x="0.226318" y="0.0888672" width="95.5594" height="92.4932" filterUnits="userSpaceOnUse" colorInterpolationFilters="sRGB">
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha" />
+          <feOffset />
+          <feGaussianBlur stdDeviation="10" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix type="matrix" values="0 0 0 0 0.34902 0 0 0 0 0.827451 0 0 0 0 0.980392 0 0 0 0.29 0" />
+          <feBlend mode="lighten" in2="BackgroundImageFix" result="effect1_dropShadow_364_61294" />
+          <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_364_61294" result="shape" />
+        </filter>
+        <linearGradient id="paint0_linear_364_61294" x1="28.3362" y1="33.733" x2="68.2017" y2="59.2723" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#0048FF" />
+          <stop offset="0.328125" stopColor="#0C81ED" />
+          <stop offset="0.65" stopColor="#029DCE" />
+          <stop offset="0.88" stopColor="#00BBB0" />
+          <stop offset="1" stopColor="#00C5A8" />
+        </linearGradient>
+        <linearGradient id="paint1_linear_364_61294" x1="-0.608471" y1="46.3353" x2="78.2369" y2="46.3353" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#4349FF" />
+          <stop offset="1" stopColor="#5FFFF7" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}