feat: enhance homepage and footer with new hero section and tagline

- Introduced a new HeroSection component to the homepage, featuring an engaging introduction, title, and action buttons to improve user engagement.
- Updated the English and Chinese JSON files to include a hero section with descriptive content.
- Refactored the FAQ component to FaqSection for consistency and updated its usage in both the homepage and pricing page.
- Added a tagline to the footer for better branding visibility.

messages/en.json

@@ -2,7 +2,6 @@
   "Metadata": {
     "name": "MkSaaS",
     "title": "MkSaaS - The Best AI SaaS Boilerplate",
-    "tagline": "Make AI SaaS in days, simply and effortlessly",
     "description": "MkSaaS is the best AI SaaS boilerplate. Make AI SaaS in days, simply and effortlessly"
   },
   "Common": {
@@ -34,6 +33,13 @@
   "HomePage": {
     "title": "MkSaaS",
     "description": "Make AI SaaS in days, simply and effortlessly",
+    "hero": {
+      "title": "Make AI SaaS in days, simply and effortlessly",
+      "description": "The best AI SaaS boilerplate, packed with AI, Authentication, Payment, Blog, Documentation, Newsletter, SEO, Themes, Blocks, Dashboard and more.",
+      "introduction": "Introducing MkSaaS Boilerplate",
+      "primary": "Get Started",
+      "secondary": "See Demo"
+    },
     "faqs": {
       "title": "Frequently Asked Questions",
       "description": "Please feel free to contact us if you have any questions",
@@ -419,6 +425,7 @@
       }
     },
     "footer": {
+      "tagline": "Make AI SaaS in days, simply and effortlessly",
       "product": {
         "title": "Product",
         "items": {

messages/zh.json

@@ -2,7 +2,6 @@
   "Metadata": {
     "name": "MkSaaS",
     "title": "MkSaaS - 最好的 AI SaaS 模板",
-    "tagline": "使用 MkSaaS 在几天内轻松构建您的 AI SaaS",
     "description": "MkSaaS 是构建 AI SaaS 的最佳模板，使用 MkSaaS 可以在几天内轻松构建您的 AI SaaS，简单且毫不费力。"
   },
   "Common": {
@@ -34,6 +33,13 @@
   "HomePage": {
     "title": "MkSaaS",
     "description": "使用 MkSaaS 在几天内轻松构建您的 AI SaaS",
+    "hero": {
+      "title": "使用 MkSaaS 轻松构建您的 AI SaaS",
+      "description": "MkSaaS 是构建 AI SaaS 的最佳模板，内置 AI、身份验证、全球支付、博客、文档、邮件订阅、SEO、多彩主题、丰富组件等。",
+      "introduction": "介绍 MkSaaS 模板",
+      "primary": "开始使用",
+      "secondary": "查看演示"
+    },
     "faqs": {
       "title": "常见问题",
       "description": "如果您有任何问题，请随时联系我们",
@@ -420,6 +426,7 @@
       }
     },
     "footer": {
+      "tagline": "使用 MkSaaS 在几天内轻松构建您的 AI SaaS",
       "product": {
         "title": "产品",
         "items": {

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

@@ -1,4 +1,5 @@
-import FAQs from '@/components/blocks/faqs/faqs';
+import FaqSection from '@/components/blocks/faqs/faqs';
+import HeroSection from '@/components/blocks/hero/hero';
 import { constructMetadata } from '@/lib/metadata';
 import { getUrlWithLocale } from '@/lib/urls/urls';
 import { Metadata } from 'next';
@@ -7,7 +8,6 @@ import { getTranslations } from 'next-intl/server';
 import CallToAction from '../../preview/call-to-action/one/page';
 import ContentSection from '../../preview/content/one/page';
 import Features from '../../preview/features/one/page';
-import HeroSection from '../../preview/hero-section/one/page';
 import LogoCloud from '../../preview/logo-cloud/one/page';
 import Pricing from '../../preview/pricing/three/page';
 import StatsSection from '../../preview/stats/one/page';
@@ -42,7 +42,7 @@ export default async function HomePage(props: HomePageProps) {
 
   return (
     <>
-      <div className="mt-8 flex flex-col">
+      <div className="flex flex-col">
         <div id="hero" className="">
           <HeroSection />
         </div>
@@ -64,7 +64,7 @@ export default async function HomePage(props: HomePageProps) {
         </div>
 
         <div id="faqs" className="">
-          <FAQs />
+          <FaqSection />
         </div>
 
         <div id="testimonials" className="">

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

@@ -1,4 +1,4 @@
-import FAQs from '@/components/blocks/faqs/faqs';
+import FaqSection from '@/components/blocks/faqs/faqs';
 import Container from '@/components/layout/container';
 import { PricingTable } from '@/components/pricing/pricing-table';
 
@@ -7,7 +7,7 @@ export default async function PricingPage() {
     <Container className="mt-8 max-w-6xl px-4 flex flex-col gap-16">
       <PricingTable />
 
-      <FAQs />
+      <FaqSection />
     </Container>
   );
 }

src/components/blocks/faqs/faqs.tsx

@@ -16,7 +16,7 @@ type FAQItem = {
   answer: string;
 };
 
-export default function FAQs() {
+export default function FaqSection() {
   const locale = useLocale();
   const t = useTranslations('HomePage.faqs');
 

src/components/blocks/hero/hero.tsx

@@ -0,0 +1,225 @@
+import { AnimatedGroup } from '@/components/motion/animated-group';
+import { TextEffect } from '@/components/motion/text-effect';
+import { Button } from '@/components/ui/button';
+import { LocaleLink } from '@/i18n/navigation';
+import { ArrowRight } from 'lucide-react';
+import { useTranslations } from 'next-intl';
+import Image from 'next/image';
+
+const transitionVariants = {
+  item: {
+    hidden: {
+      opacity: 0,
+      filter: 'blur(12px)',
+      y: 12,
+    },
+    visible: {
+      opacity: 1,
+      filter: 'blur(0px)',
+      y: 0,
+      transition: {
+        type: 'spring',
+        bounce: 0.3,
+        duration: 1.5,
+      },
+    },
+  },
+};
+
+export default function HeroSection() {
+  const t = useTranslations('HomePage.hero');
+  const linkIntroduction = 'https://x.com/mksaascom';
+  const linkPrimary = '/#pricing';
+  const linkSecondary = 'https://demo.mksaas.com';
+
+  return (
+    <>
+      <main className="overflow-hidden">
+        <div
+          aria-hidden
+          className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
+        >
+          <div className="w-140 h-320 -translate-y-87.5 absolute left-0 top-0 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
+          <div className="h-320 absolute left-0 top-0 w-60 -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)] [translate:5%_-50%]" />
+          <div className="h-320 -translate-y-87.5 absolute left-0 top-0 w-60 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
+        </div>
+
+        <section>
+          <div className="relative pt-12">
+            {/* background image */}
+            <AnimatedGroup
+              variants={{
+                container: {
+                  visible: {
+                    transition: {
+                      delayChildren: 1,
+                    },
+                  },
+                },
+                item: {
+                  hidden: {
+                    opacity: 0,
+                    y: 20,
+                  },
+                  visible: {
+                    opacity: 1,
+                    y: 0,
+                    transition: {
+                      type: 'spring',
+                      bounce: 0.3,
+                      duration: 2,
+                    },
+                  },
+                },
+              }}
+              className="absolute inset-0 -z-20"
+            >
+              <Image
+                src="/blocks/night-background.webp"
+                alt="background"
+                className="absolute inset-x-0 top-56 -z-20 hidden lg:top-32 dark:block"
+                width="3276"
+                height="4095"
+              />
+            </AnimatedGroup>
+
+            <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]"></div>
+            <div className="mx-auto max-w-7xl px-6">
+              <div className="text-center sm:mx-auto lg:mr-auto lg:mt-0">
+                {/* introduction */}
+                <AnimatedGroup variants={transitionVariants}>
+                  <LocaleLink
+                    href={linkIntroduction}
+                    className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
+                  >
+                    <span className="text-foreground text-sm">
+                      {t('introduction')}
+                    </span>
+                    <span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700"></span>
+
+                    <div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
+                      <div className="flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
+                        <span className="flex size-6">
+                          <ArrowRight className="m-auto size-3" />
+                        </span>
+                        <span className="flex size-6">
+                          <ArrowRight className="m-auto size-3" />
+                        </span>
+                      </div>
+                    </div>
+                  </LocaleLink>
+                </AnimatedGroup>
+
+                {/* title */}
+                <TextEffect
+                  preset="fade-in-blur"
+                  speedSegment={0.3}
+                  as="h1"
+                  className="mt-8 text-balance text-5xl lg:mt-16 xl:text-[5rem]"
+                >
+                  {t('title')}
+                </TextEffect>
+
+                {/* description */}
+                <TextEffect
+                  per="line"
+                  preset="fade-in-blur"
+                  speedSegment={0.3}
+                  delay={0.5}
+                  as="p"
+                  className="mx-auto mt-8 max-w-2xl text-balance text-lg"
+                >
+                  {t('description')}
+                </TextEffect>
+
+                {/* action buttons */}
+                <AnimatedGroup
+                  variants={{
+                    container: {
+                      visible: {
+                        transition: {
+                          staggerChildren: 0.05,
+                          delayChildren: 0.75,
+                        },
+                      },
+                    },
+                    ...transitionVariants,
+                  }}
+                  className="mt-12 flex flex-row items-center justify-center gap-4"
+                >
+                  <div
+                    key={1}
+                    className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5"
+                  >
+                    <Button
+                      asChild
+                      size="lg"
+                      className="rounded-xl px-5 text-base"
+                    >
+                      <LocaleLink href={linkPrimary}>
+                        <span className="text-nowrap">
+                          {t('primary')}
+                        </span>
+                      </LocaleLink>
+                    </Button>
+                  </div>
+                  <Button
+                    key={2}
+                    asChild
+                    size="lg"
+                    variant="outline"
+                    className="h-10.5 rounded-xl px-5"
+                  >
+                    <LocaleLink href={linkSecondary}>
+                      <span className="text-nowrap">
+                        {t('secondary')}
+                      </span>
+                    </LocaleLink>
+                  </Button>
+                </AnimatedGroup>
+              </div>
+            </div>
+
+            {/* images */}
+            <AnimatedGroup
+              variants={{
+                container: {
+                  visible: {
+                    transition: {
+                      staggerChildren: 0.05,
+                      delayChildren: 0.75,
+                    },
+                  },
+                },
+                ...transitionVariants,
+              }}
+            >
+              <div className="relative -mr-56 mt-8 overflow-hidden px-2 sm:mr-0 sm:mt-12 md:mt-20">
+                <div
+                  aria-hidden
+                  className="bg-linear-to-b to-background absolute inset-0 z-10 from-transparent from-35%"
+                />
+                <div className="inset-shadow-2xs ring-background dark:inset-shadow-white/20 bg-background relative mx-auto max-w-6xl overflow-hidden rounded-2xl border p-4 shadow-lg shadow-zinc-950/15 ring-1">
+                  <Image
+                    className="bg-background relative hidden rounded-2xl dark:block"
+                    src="/blocks/music.png"
+                    alt="app screen"
+                    width={2796}
+                    height={2008}
+                  />
+                  <Image
+                    className="z-2 border-border/25 relative rounded-2xl border dark:hidden"
+                    src="/blocks/music-light.png"
+                    alt="app screen"
+                    width={2796}
+                    height={2008}
+                  />
+                </div>
+              </div>
+            </AnimatedGroup>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

src/components/layout/footer.tsx

@@ -33,7 +33,7 @@ export function Footer({ className }: React.HTMLAttributes<HTMLElement>) {
 
               {/* tagline */}
               <p className="text-muted-foreground text-base py-2 md:pr-12">
-                {t('Metadata.tagline')}
+                {t('Marketing.footer.tagline')}
               </p>
 
               {/* social links */}