✨ feat(ui): Update homepage data

apps/user/app/(main)/page.tsx

@@ -1,246 +1,15 @@
-'use client';
+import { GlobalMap } from '@/components/main/global-map';
+import { Hero } from '@/components/main/hero';
+import { ProductShowcase } from '@/components/main/product-showcase';
+import { Stats } from '@/components/main/stats';
 
-import useGlobalStore from '@/config/use-global';
-import {
-  GiftIcon,
-  GlobalMapIcon,
-  LocationsIcon,
-  NetworkSecurityIcon,
-  ServersIcon,
-  UsersIcon,
-} from '@repo/ui/lotties';
-import { Button, buttonVariants } from '@shadcn/ui/button';
-import { AnimationProps, motion, MotionProps } from 'framer-motion';
-import { useTranslations } from 'next-intl';
-import Link from 'next/link';
-import { useMemo } from 'react';
-
-function ScrollAnimationWrapper({
-  children,
-  className,
-  ...props
-}: AnimationProps &
-  MotionProps & {
-    className?: string;
-  }) {
-  return (
-    <motion.section
-      className={className}
-      initial='offscreen'
-      viewport={{ once: true, amount: 0.8 }}
-      whileInView='onscreen'
-      {...props}
-    >
-      {children}
-    </motion.section>
-  );
-}
-function getScrollAnimation() {
-  return {
-    offscreen: {
-      y: 150,
-      opacity: 0,
-    },
-    onscreen: ({ duration = 2 } = {}) => ({
-      y: 0,
-      opacity: 1,
-      transition: {
-        type: 'spring',
-        duration,
-      },
-    }),
-  };
-}
-
-const listUser = [
-  {
-    name: 'Users',
-    number: '390',
-    icon: <UsersIcon className='size-24' />,
-  },
-  {
-    name: 'Locations',
-    number: '20',
-    icon: <LocationsIcon className='size-24' />,
-  },
-  {
-    name: 'Server',
-    number: '50',
-    icon: <ServersIcon className='size-24' />,
-  },
-];
-
-export default function Page() {
-  const scrollAnimation = useMemo(() => getScrollAnimation(), []);
-  const { common, user } = useGlobalStore();
-  const { site } = common;
-  const t = useTranslations('index');
+export default function Home() {
   return (
     <main className='container space-y-16'>
-      <ScrollAnimationWrapper>
-        <motion.div
-          className='grid grid-flow-row grid-rows-2 gap-8 pt-16 sm:grid-flow-col sm:grid-cols-2 md:grid-rows-1'
-          variants={scrollAnimation}
-        >
-          <div className='row-start-2 flex flex-col items-start justify-center sm:row-start-1'>
-            <h1 className='my-6 text-pretty text-4xl font-bold lg:text-6xl'>
-              {t('welcome')} {site.site_name}
-            </h1>
-            <p className='text-muted-foreground mb-8 max-w-xl lg:text-xl'>{site.site_desc}</p>
-            <div className='flex w-full flex-col gap-2 sm:flex-row md:justify-start'>
-              <Link href={user ? '/dashboard' : '/auth'} className={buttonVariants()}>
-                {t('started')}
-              </Link>
-            </div>
-          </div>
-          <div className='flex w-full'>
-            <motion.div className='h-full w-full' variants={scrollAnimation}>
-              <NetworkSecurityIcon />
-            </motion.div>
-          </div>
-        </motion.div>
-      </ScrollAnimationWrapper>
-      <ScrollAnimationWrapper>
-        <div className='divide-muted z-10 grid w-full grid-flow-row grid-cols-1 divide-y-2 rounded-lg sm:grid-flow-row sm:grid-cols-3 sm:divide-x-2 sm:divide-y-0'>
-          {listUser.map((item, index) => (
-            <motion.div
-              className='mx-auto flex w-8/12 items-center justify-start px-4 py-4 sm:mx-0 sm:w-auto sm:justify-center sm:py-6'
-              key={index}
-              custom={{ duration: 2 + index }}
-              variants={scrollAnimation}
-            >
-              <div className='mx-auto flex w-40 items-center sm:w-auto'>
-                <div className='mr-6 flex h-24 w-24 items-center justify-center rounded-full'>
-                  {item.icon}
-                </div>
-                <div className='flex flex-col'>
-                  <p className='text-xl font-bold'>{item.number}+</p>
-                  <p className='text-muted-foreground text-lg'>{item.name}</p>
-                </div>
-              </div>
-            </motion.div>
-          ))}
-        </div>
-      </ScrollAnimationWrapper>
-      <div className='mx-auto flex w-full max-w-screen-xl flex-col justify-center px-6 text-center'>
-        <div className='flex w-full flex-col'>
-          <ScrollAnimationWrapper>
-            <motion.h3
-              variants={scrollAnimation}
-              className='text-2xl font-medium leading-relaxed sm:text-3xl lg:text-4xl'
-            >
-              {t('choose_plan')}
-            </motion.h3>
-            <motion.p
-              variants={scrollAnimation}
-              className='mx-auto my-2 w-10/12 text-center leading-normal sm:w-7/12 lg:w-6/12'
-            >
-              {t('choose_plan_desc')}
-            </motion.p>
-          </ScrollAnimationWrapper>
-          <div className='grid grid-flow-row grid-cols-1 gap-4 px-6 py-8 sm:grid-flow-col sm:grid-cols-3 sm:px-0 lg:gap-12 lg:px-6 lg:py-12'>
-            <ScrollAnimationWrapper className='flex justify-center'>
-              <motion.div
-                variants={scrollAnimation}
-                className='flex flex-col items-center justify-center rounded-xl border-2 border-gray-500 px-6 py-4 lg:px-12 xl:px-20'
-                whileHover={{
-                  scale: 1.1,
-                  transition: {
-                    duration: 0.2,
-                  },
-                }}
-              >
-                <GiftIcon className='size-48' />
-                <p className='my-2 text-lg font-medium capitalize sm:my-7'>Free Plan</p>
-                <ul className='text-muted-foreground flex flex-grow list-inside flex-col items-start justify-start pl-6 text-left xl:pl-0'>
-                  <li className='check custom-list relative my-2'>Unlimited Bandwitch</li>
-                  <li className='check custom-list relative my-2'>Encrypted Connection</li>
-                  <li className='check custom-list relative my-2'>No Traffic Logs</li>
-                  <li className='check custom-list relative my-2'>Works on All Devices</li>
-                </ul>
-                <div className='mb-8 mt-12 flex w-full flex-none flex-col justify-center'>
-                  <p className='mb-4 text-center text-2xl'>Free</p>
-                  <Button>Select</Button>
-                </div>
-              </motion.div>
-            </ScrollAnimationWrapper>
-            <ScrollAnimationWrapper className='flex justify-center'>
-              <motion.div
-                variants={scrollAnimation}
-                className='flex flex-col items-center justify-center rounded-xl border-2 border-gray-500 px-6 py-4 lg:px-12 xl:px-20'
-                whileHover={{
-                  scale: 1.1,
-                  transition: {
-                    duration: 0.2,
-                  },
-                }}
-              >
-                <GiftIcon className='size-48' />
-                <p className='my-2 text-lg font-medium capitalize sm:my-7'>Standard Plan </p>
-                <ul className='text-muted-foreground flex flex-grow list-inside flex-col items-start justify-start pl-6 text-left xl:pl-0'>
-                  <li className='check custom-list relative my-2'>Unlimited Bandwitch</li>
-                  <li className='check custom-list relative my-2'>Encrypted Connection</li>
-                  <li className='check custom-list relative my-2'>No Traffic Logs</li>
-                  <li className='check custom-list relative my-2'>Works on All Devices</li>
-                  <li className='check custom-list relative my-2'>Connect Anyware </li>
-                </ul>
-                <div className='mb-8 mt-12 flex w-full flex-none flex-col justify-center'>
-                  <p className='mb-4 text-center text-2xl'>
-                    $9 <span className='text-muted-foreground'>/ mo</span>
-                  </p>
-                  <Button>Select</Button>
-                </div>
-              </motion.div>
-            </ScrollAnimationWrapper>
-            <ScrollAnimationWrapper className='flex justify-center'>
-              <motion.div
-                variants={scrollAnimation}
-                className='flex flex-col items-center justify-center rounded-xl border-2 border-gray-500 px-6 py-4 lg:px-12 xl:px-20'
-                whileHover={{
-                  scale: 1.1,
-                  transition: {
-                    duration: 0.2,
-                  },
-                }}
-              >
-                <GiftIcon className='size-48' />
-                <p className='my-2 text-lg font-medium capitalize sm:my-7'>Premium Plan </p>
-                <ul className='text-muted-foreground flex flex-grow list-inside flex-col items-start justify-start pl-6 text-left xl:pl-0'>
-                  <li className='check custom-list relative my-2'>Unlimited Bandwitch</li>
-                  <li className='check custom-list relative my-2'>Encrypted Connection</li>
-                  <li className='check custom-list relative my-2'>No Traffic Logs</li>
-                  <li className='check custom-list relative my-2'>Works on All Devices</li>
-                  <li className='check custom-list relative my-2'>Connect Anyware </li>
-                  <li className='check custom-list relative my-2'>Get New Features </li>
-                </ul>
-                <div className='mb-8 mt-12 flex w-full flex-none flex-col justify-center'>
-                  <p className='mb-4 text-center text-2xl'>
-                    $12 <span className='text-muted-foreground'>/ mo</span>
-                  </p>
-
-                  <Button>Select</Button>
-                </div>
-              </motion.div>
-            </ScrollAnimationWrapper>
-          </div>
-        </div>
-      </div>
-      <ScrollAnimationWrapper>
-        <motion.h3
-          variants={scrollAnimation}
-          className='mx-auto text-center text-2xl font-medium leading-relaxed sm:text-3xl lg:text-4xl'
-        >
-          {t('huge_network')} {site.site_name}
-        </motion.h3>
-        <motion.p className='mx-auto my-2 text-center leading-normal' variants={scrollAnimation}>
-          {site.site_name} {t('global_network_desc')}
-        </motion.p>
-      </ScrollAnimationWrapper>
-      <ScrollAnimationWrapper>
-        <motion.div className='aspect-[2/1] w-full overflow-hidden' variants={scrollAnimation}>
-          <GlobalMapIcon className='-mt-[25%] w-full' />
-        </motion.div>
-      </ScrollAnimationWrapper>
+      <Hero />
+      <Stats />
+      <ProductShowcase />
+      <GlobalMap />
     </main>
   );
 }

apps/user/components/main/global-map.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { GlobalMapIcon } from '@repo/ui/lotties';
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+
+export function GlobalMap() {
+  const t = useTranslations('index');
+  return (
+    <motion.section
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5 }}
+    >
+      <motion.h2
+        initial={{ opacity: 0, y: -20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className='mb-2 text-center text-3xl font-bold'
+      >
+        {t('global_map_itle')}
+      </motion.h2>
+      <motion.p
+        initial={{ opacity: 0, y: -20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+        className='text-muted-foreground mb-8 text-center text-lg'
+      >
+        {t('global_map_description')}
+      </motion.p>
+      <motion.div
+        className='aspect-video w-full overflow-hidden'
+        initial={{ scale: 0.9, opacity: 0 }}
+        animate={{ scale: 1, opacity: 1 }}
+        transition={{
+          type: 'spring',
+          stiffness: 100,
+          damping: 15,
+          delay: 0.4,
+        }}
+      >
+        <GlobalMapIcon className='-mt-[25%] w-full' />
+      </motion.div>
+    </motion.section>
+  );
+}

apps/user/components/main/hero.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import useGlobalStore from '@/config/use-global';
+import { NetworkSecurityIcon } from '@repo/ui/lotties';
+import { HoverBorderGradient } from '@shadcn/ui/hover-border-gradient';
+import { TextGenerateEffect } from '@shadcn/ui/text-generate-effect';
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+import Link from 'next/link';
+
+export function Hero() {
+  const t = useTranslations('index');
+  const { common, user } = useGlobalStore();
+  const { site } = common;
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ type: 'spring', stiffness: 100, damping: 20 }}
+      viewport={{ once: true, amount: 0.2 }}
+      className='grid gap-8 pt-16 sm:grid-cols-2'
+    >
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ type: 'spring', stiffness: 80, damping: 15, delay: 0.3 }}
+        viewport={{ once: true, amount: 0.3 }}
+        className='flex flex-col items-start justify-center'
+      >
+        <h1 className='my-6 text-4xl font-bold lg:text-6xl'>
+          {t('welcome')} {site.site_name}
+        </h1>
+        {site.site_desc && (
+          <TextGenerateEffect
+            words={site.site_desc}
+            className='*:text-muted-foreground mb-8 max-w-xl'
+          />
+        )}
+        <Link href={user ? '/dashboard' : '/auth'}>
+          <HoverBorderGradient
+            containerClassName='rounded-full'
+            as='button'
+            className='bg-background text-foreground flex items-center space-x-2'
+          >
+            {t('started')}
+          </HoverBorderGradient>
+        </Link>
+      </motion.div>
+      <motion.div
+        initial={{ opacity: 0, y: 50 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ type: 'spring', stiffness: 80, damping: 15, delay: 0.5 }}
+        viewport={{ once: true, amount: 0.3 }}
+        className='flex w-full'
+      >
+        <NetworkSecurityIcon />
+      </motion.div>
+    </motion.div>
+  );
+}

apps/user/components/main/product-showcase.tsx

@@ -0,0 +1,133 @@
+'use client';
+
+import { SubscribeDetail } from '@/app/(main)/(user)/subscribe/detail';
+import { Display } from '@/components/display';
+import { getSubscription } from '@/services/common/common';
+import { Icon } from '@iconify/react';
+import { Button } from '@shadcn/ui/button';
+import { Card, CardContent, CardFooter, CardHeader } from '@shadcn/ui/card';
+import { cn } from '@shadcn/ui/lib/utils';
+import { Separator } from '@shadcn/ui/separator';
+import { useQuery } from '@tanstack/react-query';
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+
+export function ProductShowcase() {
+  const t = useTranslations('index');
+
+  const { data } = useQuery({
+    queryKey: ['getSubscription'],
+    queryFn: async () => {
+      const { data } = await getSubscription({
+        skipErrorHandler: true,
+      });
+      return data.data?.list || [];
+    },
+  });
+  if (data?.length === 0) return null;
+  return (
+    <motion.section
+      initial={{ opacity: 0 }}
+      whileInView={{ opacity: 1 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.5 }}
+    >
+      <motion.h2
+        initial={{ opacity: 0, y: -20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className='mb-2 text-center text-3xl font-bold'
+      >
+        {t('product_showcase_title')}
+      </motion.h2>
+      <motion.p
+        initial={{ opacity: 0, y: -20 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5, delay: 0.1 }}
+        className='text-muted-foreground mb-8 text-center text-lg'
+      >
+        {t('product_showcase_description')}
+      </motion.p>
+      <div className='mx-auto flex flex-wrap justify-center gap-8 overflow-x-auto overflow-y-hidden'>
+        {data?.map((item, index) => (
+          <motion.div
+            key={item.id}
+            initial={{ opacity: 0, y: 50 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.5 }}
+            transition={{ duration: 0.5, delay: index * 0.1 }}
+            className='w-1/2 lg:w-1/4'
+          >
+            <Card className='flex flex-col overflow-hidden rounded-lg shadow-lg transition-shadow duration-300 hover:shadow-2xl'>
+              <CardHeader className='bg-muted/50 p-4 text-xl font-medium'>{item.name}</CardHeader>
+              <CardContent className='flex flex-grow flex-col gap-4 p-6 text-sm'>
+                <ul className='flex flex-grow flex-col gap-3'>
+                  {(() => {
+                    let parsedDescription;
+                    try {
+                      parsedDescription = JSON.parse(item.description);
+                    } catch {
+                      parsedDescription = { description: '', features: [] };
+                    }
+
+                    const { description, features } = parsedDescription;
+                    return (
+                      <>
+                        {description && <li className='text-muted-foreground'>{description}</li>}
+                        {features.map((feature, index) => (
+                          <li
+                            className={cn('flex items-center gap-2', {
+                              'text-muted-foreground line-through': feature.type === 'destructive',
+                            })}
+                            key={index}
+                          >
+                            {feature.icon && (
+                              <Icon
+                                icon={feature.icon}
+                                className={cn('text-primary size-5', {
+                                  'text-green-500': feature.type === 'success',
+                                  'text-destructive': feature.type === 'destructive',
+                                })}
+                              />
+                            )}
+                            {feature.label}
+                          </li>
+                        ))}
+                      </>
+                    );
+                  })()}
+                </ul>
+                <SubscribeDetail
+                  subscribe={{
+                    ...item,
+                    name: null,
+                  }}
+                />
+              </CardContent>
+              <Separator />
+              <CardFooter className='relative flex flex-col gap-4 p-4'>
+                <motion.h2
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ duration: 0.5, delay: 0.2 }}
+                  className='pb-4 text-2xl font-semibold sm:text-3xl'
+                >
+                  <Display type='currency' value={item.unit_price} />
+                  <span className='text-base font-medium'>/{t('per_month')}</span>
+                </motion.h2>
+                <motion.div>
+                  <Button
+                    className='absolute bottom-0 left-0 w-full rounded-b-xl rounded-t-none'
+                    onClick={() => {}}
+                  >
+                    {t('subscribe')}
+                  </Button>
+                </motion.div>
+              </CardFooter>
+            </Card>
+          </motion.div>
+        ))}
+      </div>
+    </motion.section>
+  );
+}

apps/user/components/main/stats.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import { getStat } from '@/services/common/common';
+import { LocationsIcon, ServersIcon, UsersIcon } from '@repo/ui/lotties';
+import { useQuery } from '@tanstack/react-query';
+import { motion } from 'framer-motion';
+import { useTranslations } from 'next-intl';
+import { useEffect, useState } from 'react';
+
+export function Stats() {
+  const t = useTranslations('index');
+
+  const { data } = useQuery({
+    queryKey: ['getStat'],
+    queryFn: async () => {
+      const { data } = await getStat({
+        skipErrorHandler: true,
+      });
+      return data.data;
+    },
+    refetchOnWindowFocus: false,
+  });
+
+  const list = [
+    {
+      name: t('users'),
+      number: data?.user || 999,
+      icon: <UsersIcon className='size-24' />,
+    },
+    {
+      name: t('servers'),
+      number: data?.server || 30,
+      icon: <ServersIcon className='size-24' />,
+    },
+    {
+      name: t('locations'),
+      number: data?.country || 10,
+      icon: <LocationsIcon className='size-24' />,
+    },
+  ];
+  return (
+    <motion.section
+      className='divide-muted z-10 grid w-full grid-cols-1 divide-y-2 rounded-lg sm:grid-cols-3 sm:divide-x-2 sm:divide-y-0'
+      initial={{ opacity: 0, y: 50 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 1, ease: 'easeOut' }}
+      viewport={{ once: true, amount: 0.8 }}
+      whileInView={{ opacity: 1, y: 0 }}
+    >
+      {list.map((item, index) => (
+        <motion.div
+          className='mx-auto flex w-10/12 items-center justify-start px-4 py-4 sm:w-full sm:justify-center sm:py-6'
+          key={item.name}
+          initial={{ opacity: 0, scale: 0.8 }}
+          whileInView={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 0.8, delay: index * 0.3, ease: 'easeOut' }}
+          viewport={{ once: true, amount: 0.8 }}
+        >
+          <div className='flex w-full items-center sm:w-auto'>
+            <div className='mr-4 flex h-20 w-20 items-center justify-center rounded-full'>
+              {item.icon}
+            </div>
+            <div className='flex flex-col'>
+              <p className='text-xl font-bold'>
+                <CountUp end={item.number} duration={2000 + index * 500} />+
+              </p>
+              <p className='text-muted-foreground text-lg'>{item.name}</p>
+            </div>
+          </div>
+        </motion.div>
+      ))}
+    </motion.section>
+  );
+}
+
+function CountUp({ end, duration = 2000 }: { end: number; duration?: number }) {
+  const [count, setCount] = useState(0);
+
+  useEffect(() => {
+    let startTime;
+    let animationFrame;
+
+    const easeOutQuad = (t) => t * (2 - t);
+
+    const updateCount = (timestamp) => {
+      if (!startTime) startTime = timestamp;
+      const progress = timestamp - startTime;
+      const easedProgress = easeOutQuad(Math.min(progress / duration, 1));
+      const nextCount = Math.round(easedProgress * end);
+
+      setCount(nextCount);
+
+      if (progress < duration) {
+        animationFrame = requestAnimationFrame(updateCount);
+      }
+    };
+
+    animationFrame = requestAnimationFrame(updateCount);
+
+    return () => cancelAnimationFrame(animationFrame);
+  }, [end, duration]);
+
+  return <>{count.toLocaleString()}</>;
+}

apps/user/locales/en-US/index.json

@@ -1,9 +1,14 @@
 {
-  "choose_plan": "Choose Your Plan",
-  "choose_plan_desc": "Let's select the plan that best suits you and explore it happily.",
-  "global_network_desc": "Easily access our services while on the move.",
-  "huge_network": "Vast and Fast Global Network",
+  "global_map_description": "Explore seamless global connectivity. Choose network services that suit your needs and stay connected anytime, anywhere.",
+  "global_map_title": "Global Connectivity, Effortless Peace of Mind",
+  "locations": "Locations",
+  "per_month": "Per Month",
+  "product_showcase_description": "Let us help you select the package that best suits you and enjoy exploring it.",
+  "product_showcase_title": "Choose Your Package",
+  "servers": "Servers",
   "started": "Get Started",
+  "subscribe": "Subscribe",
   "tos": "Terms of Service",
+  "users": "Users",
   "welcome": "Welcome to"
 }

apps/user/locales/zh-CN/index.json

@@ -1,9 +1,14 @@
 {
-  "choose_plan": "选择您的套餐",
-  "choose_plan_desc": "让我们选择最适合您的套餐，快乐地探索它。",
-  "global_network_desc": "让您在移动地点时更轻松地看到我们的服务。",
-  "huge_network": "庞大的快速全球网络",
+  "global_map_description": "探索无缝的全球连接。选择符合您需求的网络服务，随时随地保持连接。",
+  "global_map_itle": "全球互联，轻松无忧",
+  "locations": "地区",
+  "per_month": "每月",
+  "product_showcase_description": "让我们选择最适合您的套餐，快乐地探索它。",
+  "product_showcase_title": "选择您的套餐",
+  "servers": "服务器",
   "started": "开始使用",
+  "subscribe": "订阅",
   "tos": "服务协议",
+  "users": "用户",
   "welcome": "欢迎来到"
 }

apps/user/utils/request.ts

@@ -28,6 +28,7 @@ requset.interceptors.request.use(
   async (
     config: InternalAxiosRequestConfig & {
       Authorization?: string;
+      skipErrorHandler?: boolean;
     },
   ) => {
     const Authorization = getAuthorization(config.Authorization);