chore: optimize homepage hero and stats sections

messages/en.json

@@ -811,7 +811,8 @@
       }
     },
     "stats": {
-      "title": "MkSaaS in numbers",
+      "title": "Stats",
+      "subtitle": "MkSaaS in numbers",
       "description": "MkSaaS lets you make AI SaaS in days, simply and effortlessly",
       "items": {
         "item-1": {

messages/zh.json

@@ -812,7 +812,8 @@
       }
     },
     "stats": {
-      "title": "MkSaaS 相关的数字",
+      "title": "统计",
+      "subtitle": "MkSaaS 相关的数字",
       "description": "MkSaaS 可让您在几天内轻松构建您的 AI SaaS",
       "items": {
         "item-1": {

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

@@ -48,61 +48,33 @@ export default async function HomePage(props: HomePageProps) {
   return (
     <>
       <div className="flex flex-col">
-        <div id="hero">
-          <HeroSection />
-        </div>
+        <HeroSection />
 
-        <div id="logo-cloud">
-          <LogoCloud />
-        </div>
+        <LogoCloud />
 
-        <div id="stats">
-          <StatsSection />
-        </div>
+        <StatsSection />
 
-        <div id="integration">
-          <IntegrationSection />
-        </div>
+        <IntegrationSection />
 
-        <div id="features">
-          <FeaturesSection />
-        </div>
+        <FeaturesSection />
 
-        <div id="features2">
-          <Features2Section />
-        </div>
+        <Features2Section />
 
-        <div id="features3">
-          <Features3Section />
-        </div>
+        <Features3Section />
 
-        <div id="features4">
-          <Features4Section />
-        </div>
+        <Features4Section />
 
-        <div id="features5">
-          <Features5Section />
-        </div>
+        <Features5Section />
 
-        <div id="integration2">
-          <Integration2Section />
-        </div>
+        <Integration2Section />
 
-        <div id="pricing">
-          <PricingSection />
-        </div>
+        <PricingSection />
 
-        <div id="faqs">
-          <FaqSection />
-        </div>
+        <FaqSection />
 
-        <div id="testimonials">
-          <TestimonialsSection />
-        </div>
+        <TestimonialsSection />
 
-        <div id="call-to-action">
-          <CallToActionSection />
-        </div>
+        <CallToActionSection />
       </div>
     </>
   );

src/components/blocks/logo-cloud/logo-cloud.tsx

@@ -4,9 +4,10 @@ export default function LogoCloudSection() {
   const t = useTranslations('HomePage.logocloud');
 
   return (
-    <section className="py-16">
+    <section id="logo-cloud" className="bg-background px-4 py-16">
       <div className="mx-auto max-w-5xl px-6">
         <h2 className="text-center text-xl font-medium">{t('title')}</h2>
+
         <div className="mx-auto mt-20 flex max-w-4xl flex-wrap items-center justify-center gap-x-12 gap-y-8 sm:gap-x-16 sm:gap-y-12">
           <img
             className="h-4 w-fit dark:invert"

src/components/blocks/stats/stats.tsx

@@ -1,27 +1,31 @@
+import { HeaderSection } from '@/components/layout/header-section';
 import { useTranslations } from 'next-intl';
 
 export default function StatsSection() {
   const t = useTranslations('HomePage.stats');
 
   return (
-    <section className="py-12 md:py-20 w-full bg-muted dark:bg-background">
-      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16">
-        <div className="relative z-10 mx-auto max-w-xl space-y-6 text-center">
-          <h2 className="text-4xl font-medium lg:text-5xl">{t('title')}</h2>
-          <p>{t('description')}</p>
-        </div>
+    <section id="stats" className="px-4 py-16">
+      <div className="mx-auto max-w-5xl px-6 space-y-8 md:space-y-16">
+        <HeaderSection
+          title={t('title')}
+          subtitle={t('subtitle')}
+          subtitleAs="h2"
+          description={t('description')}
+          descriptionAs="p"
+        />
 
         <div className="grid gap-12 divide-y-0 *:text-center md:grid-cols-3 md:gap-2 md:divide-x">
           <div className="space-y-4">
-            <div className="text-5xl font-bold">+1200</div>
+            <div className="text-5xl font-bold text-primary">+1200</div>
             <p>{t('items.item-1.title')}</p>
           </div>
           <div className="space-y-4">
-            <div className="text-5xl font-bold">22 Million</div>
+            <div className="text-5xl font-bold text-primary">22 Million</div>
             <p>{t('items.item-2.title')}</p>
           </div>
           <div className="space-y-4">
-            <div className="text-5xl font-bold">+500</div>
+            <div className="text-5xl font-bold text-primary">+500</div>
             <p>{t('items.item-3.title')}</p>
           </div>
         </div>

src/components/layout/header-section.tsx

@@ -2,12 +2,15 @@ import { cn } from '@/lib/utils';
 
 interface HeaderSectionProps {
   id?: string;
-  label?: string;
-  labelAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
   title?: string;
   titleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+  titleClassName?: string;
   subtitle?: string;
   subtitleAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+  subtitleClassName?: string;
+  description?: string;
+  descriptionAs?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p';
+  descriptionClassName?: string;
   className?: string;
   children?: React.ReactNode;
 }
@@ -17,38 +20,56 @@ interface HeaderSectionProps {
  */
 export function HeaderSection({
   id,
-  label,
-  labelAs = 'p',
   title,
-  titleAs = 'p',
+  titleAs = 'h2',
+  titleClassName,
   subtitle,
   subtitleAs = 'p',
+  subtitleClassName,
+  description,
+  descriptionAs = 'p',
+  descriptionClassName,
   className,
   children,
 }: HeaderSectionProps) {
-  const LabelComponent = labelAs;
   const TitleComponent = titleAs;
   const SubtitleComponent = subtitleAs;
+  const DescriptionComponent = descriptionAs;
   return (
     <div
       id={id}
       className={cn('flex flex-col items-center text-center gap-4', className)}
     >
-      {label ? (
-        <LabelComponent className="uppercase tracking-wider text-gradient_indigo-purple font-semibold">
-          {label}
-        </LabelComponent>
-      ) : null}
       {title ? (
-        <TitleComponent className="text-2xl md:text-4xl">
+        <TitleComponent
+          className={cn(
+            'uppercase tracking-wider text-gradient_indigo-purple font-semibold font-mono',
+            titleClassName
+          )}
+        >
           {title}
         </TitleComponent>
       ) : null}
       {subtitle ? (
-        <SubtitleComponent className="text-balance text-lg text-muted-foreground">
+        <SubtitleComponent
+          className={cn(
+            'text-balance text-2xl text-foreground',
+            subtitleClassName
+          )}
+        >
           {subtitle}
         </SubtitleComponent>
       ) : null}
+      {description ? (
+        <DescriptionComponent
+          className={cn(
+            'text-balance text-lg text-muted-foreground',
+            descriptionClassName
+          )}
+        >
+          {description}
+        </DescriptionComponent>
+      ) : null}
 
       {children}
     </div>

src/styles/globals.css

@@ -321,6 +321,13 @@ body {
   @apply overscroll-none bg-transparent;
 }
 
+.text-gradient_indigo-purple {
+  background: linear-gradient(90deg, #6366f1 0%, rgb(168 85 247 / 0.8) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
 /*
  * 1. all the themes are copied from the shadcn-ui dashboard example
  * https://github.com/shadcn-ui/ui/blob/main/apps/v4/app/(examples)/dashboard/theme.css