From 144eb7a39cb9d15cb222c0e947e5a266eb59fa84 Mon Sep 17 00:00:00 2001 From: javayhu Date: Sat, 12 Apr 2025 20:49:43 +0800 Subject: [PATCH] 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 | 9 +- messages/zh.json | 9 +- src/app/[locale]/(marketing)/(home)/page.tsx | 8 +- src/app/[locale]/(marketing)/pricing/page.tsx | 4 +- src/components/blocks/faqs/faqs.tsx | 2 +- src/components/blocks/hero/hero.tsx | 225 ++++++++++++++++++ src/components/blocks/pricing/pricing.tsx | 0 src/components/layout/footer.tsx | 2 +- 8 files changed, 249 insertions(+), 10 deletions(-) create mode 100644 src/components/blocks/hero/hero.tsx create mode 100644 src/components/blocks/pricing/pricing.tsx diff --git a/messages/en.json b/messages/en.json index 154a80c..9ed89c9 100644 --- a/messages/en.json +++ b/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": { diff --git a/messages/zh.json b/messages/zh.json index cdd6518..7b7a5e6 100644 --- a/messages/zh.json +++ b/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": { diff --git a/src/app/[locale]/(marketing)/(home)/page.tsx b/src/app/[locale]/(marketing)/(home)/page.tsx index bfb1fc9..9460214 100644 --- a/src/app/[locale]/(marketing)/(home)/page.tsx +++ b/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 ( <> -
+
@@ -64,7 +64,7 @@ export default async function HomePage(props: HomePageProps) {
- +
diff --git a/src/app/[locale]/(marketing)/pricing/page.tsx b/src/app/[locale]/(marketing)/pricing/page.tsx index ef32a10..e48f771 100644 --- a/src/app/[locale]/(marketing)/pricing/page.tsx +++ b/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() { - + ); } diff --git a/src/components/blocks/faqs/faqs.tsx b/src/components/blocks/faqs/faqs.tsx index 3fe0cea..0e182eb 100644 --- a/src/components/blocks/faqs/faqs.tsx +++ b/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'); diff --git a/src/components/blocks/hero/hero.tsx b/src/components/blocks/hero/hero.tsx new file mode 100644 index 0000000..70e1ec4 --- /dev/null +++ b/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 ( + <> +
+
+
+
+
+
+ +
+
+ {/* background image */} + + background + + +
+
+
+ {/* introduction */} + + + + {t('introduction')} + + + +
+
+ + + + + + +
+
+ + + + {/* title */} + + {t('title')} + + + {/* description */} + + {t('description')} + + + {/* action buttons */} + +
+ +
+ + +
+
+ + {/* images */} + +
+
+
+ app screen + app screen +
+
+ +
+
+
+ + ); +} diff --git a/src/components/blocks/pricing/pricing.tsx b/src/components/blocks/pricing/pricing.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx index d1ac51d..1c1a20d 100644 --- a/src/components/layout/footer.tsx +++ b/src/components/layout/footer.tsx @@ -33,7 +33,7 @@ export function Footer({ className }: React.HTMLAttributes) { {/* tagline */}

- {t('Metadata.tagline')} + {t('Marketing.footer.tagline')}

{/* social links */}