自定义 Landing Page

Landing Page 是 RavenSaaS 的核心功能之一，通过简单的配置，你可以快速自定义 Landing Page 的样式和内容，为你的 SaaS 产品打造专业的首页。

修改 Landing Page 内容

RavenSaaS 内置了一个完整的 Landing Page 页面，通过 JSON 文件定义了页面上的全部内容。

默认支持多语言，英文 Landing Page 文件位于 i18n/messages/en.json 文件中。

中文 Landing Page 文件位于 i18n/messages/zh.json 文件中。

你可以在 i18n/messages 目录下，添加其他语言的 Landing Page 文件。

Landing Page 文件包括以下几部分内容，你可以根据自己的需求，修改成对应的内容：

/i18n/messages/en.json
1{
2  "hero": {},
3  "nav": {},
4  "branding": {},
5  "footer": {},
6  "faq": {},
7  "testimonial": {},
8  "cta": {},
9  "pricing": {},
10  "stats": {},
11  "showcase": {},
12  "introduce": {},
13  "benefit": {},
14  "usage": {},
15  "features": {},
16  "problems": {}
17 }

使用 AI 编辑器生成新的 Landing Page 内容

你可以在 AI 编辑器 Cursor 中，输入你的新网站主题，通过 AI 对话，指定参考资料，生成新网站的 Landing Page 内容。

参考 Prompt：

Prompt
1I want to build a landing page for my product named "Raven AI Assistant", 
2please update the landing page json file, content reference @Web @https://www.your-reference-site.com/

修改 Landing Page 页面结构

默认的 Landing Page 布局文件位于 app/[locale]/page.tsx 文件中：

/app/[locale]/(default)/layout.tsx
1import { NextIntlClientProvider, hasLocale } from "next-intl";
2import { notFound } from "next/navigation";
3import { routing } from "@/i18n/routing";
4import { getServerSession } from "next-auth";
5import { authOptions } from "@/lib/auth";
6import AuthProvider from "@/components/auth/AuthProvider";
7import GoogleOneTap from "@/components/auth/googleOneTap";
8import { Navbar } from "@/components/blocks/navbar";
9
10export default async function LocaleLayout({
11  children,
12  params,
13}: {
14  children: React.ReactNode;
15  params: Promise<{ locale: string }>;
16}) {
17  const { locale } = await params;
18  if (!hasLocale(routing.locales, locale)) {
19    notFound();
20  }
21
22  let messages;
23  try {
24    messages = (await import(`@/i18n/messages/${locale}.json`)).default;
25  } catch (error) {
26  console.error(error);
27notFound();
28  }
29
30// 获取服务端session
31const session = await getServerSession(authOptions);
32
33return (
34  <AuthProvider session={session}>
35    <NextIntlClientProvider locale={locale} messages={messages}>
36      <Navbar hideOnComponentPage={true} />
37      {children}
38      <GoogleOneTap />
39    </NextIntlClientProvider>
40  </AuthProvider>
41);
42}

首页的内容结构位于 app/[locale]/page.tsx 文件中：

/app/[locale]/page.tsx
1"use client";
2        
3import { Suspense } from "react";
4import { HeroSection } from "@/components/blocks/hero-section";
5import { CTASection } from "@/components/blocks/cta-section";
6import { Footer } from "@/components/blocks/footer";
7import { Usage } from "@/components/blocks/usage";
8import { Benefit } from "@/components/blocks/benefit";
9import { Pricing } from "@/components/blocks/pricing";
10import { BrandingSection } from "@/components/blocks/branding-section";
11import { Introduce } from "@/components/blocks/introduce";
12import { FAQSection } from "@/components/blocks/faq-section";
13import { FeaturesSection } from "@/components/blocks/features-section";
14import {
15  HomeSkeleton,
16} from "@/components/skeletons/home-skeleton";
17
18function HomeContent() {
19  return (
20    <>
21      <HeroSection />
22      <BrandingSection />
23      <Introduce />
24      <Usage />
25      <FeaturesSection />
26      <Benefit />
27      <Pricing />
28      <FAQSection />
29      <CTASection />
30      <Footer />
31    </>
32  );
33}
34
35export default function HomePage() {
36  return (
37    <main className="min-h-screen bg-white dark:bg-gray-950 pt-16">
38      <Suspense fallback={<HomeSkeleton />}>
39        <HomeContent />
40      </Suspense>
41    </main>
42  );
43}

你可以根据新网站的需求，自行修改。比如删除部分组件，或者添加一些新组件。

每个组件支持传递的参数，请在组件文档部分查看。