Customize Landing Page

Goals:

  • Update the Header
  • Update the Hero
  • Update the Feature Images
  • Update the Testimonials
  • Update the Features
  • Update the Footer

Landing Page Structure

The landing page is defined at the app/routes/index.tsx route file.

<div className="relative overflow-hidden bg-white dark:bg-gray-900 text-gray-800 dark:text-slate-200 space-y-16">
  <Hero socialProof={data.socialProof} />
  <LogoClouds />
  <FeatureImages />
  <Testimonials
    items={data.testimonials}
    socialProof={data.socialProof}
  />
  <Features />
  <Footer />
</div>

Header

On every marketing/front page, you need to add the app/components/front/Header.tsx component to define your navigation structure.

💿 Open the Header component file and add a new navigation item:

const links: NavbarItemDto[] = [
    { path: "/", title: t("front.navbar.product") },
    { path: "/pricing", title: t("front.navbar.pricing") },
    { path: "/docs", title: "Docs", className: "" },
    { path: "/blog", title: "Blog", className: "hidden xl:block" },
+    {
+      title: "My navbar item",
+      items: [
+        { path: "/my-path-1", title: "Title 1", description: "Description 1" },
+        { path: "/my-path-2", title: "Title 2", description: "Description 2" },
+        { path: "/my-path-3", title: "Title 3", description: "Description 3" },
+      ],
+    },
  ];

This will create a Flyout navbar item:

Flyout item

Hero

The Hero component uses translations.

💿 Open the public/locales/en/translations.json file, and replace Easily Build Your Own SaaS to My new hero headline (which is the front.hero.headline1 i18n key).

Hero

Feature Images

The component FeatureImages lets you showcase your product.

💿 Open the app/components/front/FeatureImages.tsx file and add a new feature:

const featureImages = [
+  {
+    group: "My Feature Group",
+    title: "Feature title",
+    route: "/feature-route",
+    src: "https://via.placeholder.com/1000x500.png?text=My%20feature",
+  },
  ...
Feature images

Testimonials

There are 2 main objectives with this section:

  • Social proof
  • Quote current customers

For social proof, I actually use the GitHub API (at the app/utils/integrations/githubService.ts file) to get the current private repository members: used by X developers.

And quotes are hard-coded at the app/utils/services/marketingService.ts file, with the getTestimonials function.

Each testimonial has:

  • Company Name, URL, and Logo (light and dark mode)
  • Name, Avatar, Role, and their Twitter or personal website.
  • The Quote
Testimonials

Features

💿 Open the app/components/front/Features.tsx component and add a new section with 4 features.

...
const groups = [
+  {
+    headline: "New section",
+    subheadline: "Lorem",
+    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut...",
+    items: [
+      {
+        name: "My feature 1",
+        description: "Lorem ipsum dolor sit amet...",
+      },
+      {
+        name: "My feature 2",
+        description: "Lorem ipsum dolor sit amet...",
+      },
+      {
+        name: "My feature 3",
+        description: "Lorem ipsum dolor sit amet...",
+      },
+      {
+        name: "My feature 4",
+        description: "Lorem ipsum dolor sit amet...",
+      },
+    ],
+  },
   ...
Features

Footer

Finally, we'll add an item to the footer.

💿 Open the app/components/front/Footer.tsx component and add a link to the Blog.

...
const navigation = {
  features1: [
+    { name: "Blog", href: "/blog" },
    ...
Footer

I hope this quick guide was useful! Let me know if you have any question.

We respect your privacy.

This website uses cookies to help personalize your online experience. Learn more.