Customize Landing Page

Landing Page is one of the core features of RavenSaaS. Through simple configuration, you can quickly customize the style and content of the Landing Page to create a professional homepage for your SaaS product.

Modify Landing Page Content

RavenSaaS has a built-in complete Landing Page, with all content on the page defined through JSON files.

Multi-language support is available by default. The English Landing Page file is located in the i18n/messages/en.json 文件中。

The Chinese Landing Page file is located in the i18n/messages/zh.json 文件中。

You can add Landing Page files for other languages in the i18n/messages directory.

The Landing Page file includes the following content sections, which you can modify according to your needs:

/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 }

Use AI Editor to Generate New Landing Page Content

You can input your new website theme in the AI editor Cursor, and generate new website Landing Page content through AI dialogue with reference materials.

Reference 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/

Modify Landing Page Layout

The default Landing Page layout file is located in the app/[locale]/page.tsx file:

/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}

The homepage content structure is located in the app/[locale]/page.tsx file:

/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}

You can modify it according to the needs of your new website. For example, delete some components or add some new components.

For the parameters that each component supports, please check the component documentation section.