Customizing the landing page

In this guide, we'll learn how to customize the landing page after you've generated & deployed a website with Shipixen.

Introduction

Depending on what settings you've chosen in the app, your landing page might look different. For example, you might have some sections generated already or a blog list.
Regardless of that, the guides below will help you customize the landing page to your liking.

Working from examples

Each generated website comes with a set of examples that you can use to learn how to customize the landing page. See more by exploring component examples.

Depending on what you prefer, that might be the easiest way to learn how to do by example. You should be able to copy-paste the code from the examples to your landing page.

Exploring landing page components

Shipixen comes with a set of components that you can use to customize the landing page. You can find them in the components/landing directory.

To see demos and code example for each of the components, you can go to the landing page components guide.

Adding a new section

To add a new section, you have to edit app/page.tsx.
Let's add a new CTA Sales section: a section with a title, description, and a CTA button.

Regardless of what's already on the page, you can add a new section like so:

+ import { LandingSaleCtaSection } from '@/components/landing/LandingSaleCta';

// ... other imports

export default function Home() {
  return (
    <div className="flex flex-col w-full items-center fancy-overlay">
      {/* ... other sections, cta etc. */}

+     <LandingSaleCtaSection
+       title="Unlock Your Data Potential"
+       description="Discover how DataHarbor Pro can transform your business and unlock the power of your data intelligence solutions."
+       ctaHref={'#'}
+       ctaLabel={'Pre-order now'}
+     />

      {/* ... other sections */}
    </div>
  );
}

That's it! You can keep adding more sections like this:

For a list of all available sections, check out the landing page components guide.

Adding the blog list to the landing page

The Shipixen app allows adding a blog list to the landing page. However, if you haven't chosen that option, you can still add it manually later.

It's easy!

You only need to edit app/page.tsx and add the LatestArticles component:

+ import LatestArticles from '@/components/blog/LatestArticles';

// ... other imports

export default function Home() {
  return (
    <div className="flex flex-col w-full items-center fancy-overlay">
      {/* ... other sections, cta etc. */}

+     <LatestArticles />

      {/* ... other sections */}
    </div>
  );
}

It's as simple as that!
If you want to control how many articles are shown, you can pass the numberOfPosts prop to the component:

import LatestArticles from '@/components/blog/LatestArticles';

// ... other imports

export default function Home() {
  return (
    <div className="flex flex-col w-full items-center fancy-overlay">
      {/* ... other sections, cta etc. */}

-     <LatestArticles />
+     <LatestArticles numberOfPosts={5} />

      {/* ... other sections */}
    </div>
  );
}

Other customizations

Modify CTA buttons

Depending on the settings you've chosen in the app, you might have a CTA button, two or none.

To modify the CTA buttons, you have to edit app/page.tsx.

Let's take an example where you have 1 CTA button:

...
<span className="flex flex-wrap gap-2 mt-6">
  <a href="/pricing" target="_blank" rel="noopener noreferrer">
    <Button size="xl">Get Started</Button>
  </a>
</span>
...

Adding a secondary CTA button

To add a secondary CTA button, you can add one more anchor (<a>) tag in the same container, like so:

...
<span className="flex flex-wrap gap-2 mt-6">
  <a href="/pricing" target="_blank" rel="noopener noreferrer">
    <Button size="xl">Get Started</Button>
  </a>
+ <a href="/pricing" target="_blank" rel="noopener noreferrer">
+   <Button size="xl" variant="outlinePrimary">Read more</Button>
+ </a>
</span>
...

Note the variant is set to outlinePrimary for the secondary button. This will make it look like a secondary button & make it distinct from the primary button.

Removing the CTA buttons

To remove the CTA buttons, you can simply remove the entire wrapper and its contents:

...
- <span className="flex flex-wrap gap-2 mt-6">
-   <a href="/pricing" target="_blank" rel="noopener noreferrer">
-     <Button size="xl">Get Started</Button>
-   </a>
- </span>
...

Configure links, footer, header, theme and more

Shipixen makes it easy to also customize other parts of the landing page. For example, header, footer or even updating the color theme.

For a complete list of settings, check out the configuration guide.

Next steps

Ready to dive deeper? Here's what to read next:

• Write blog posts
• Take a tour of the codebase