Customizing the landing page

Updated on

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. You can find them in the demo/landing-page-sections.tsx file.

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:

app/page.tsx
+ 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:

Unlock Your Data Potential

Discover how DataHarbor Pro can transform your business and unlock the power of your data intelligence solutions.

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:

app/page.tsx
+ 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:

app/page.tsx
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:

app/page.tsx
...
<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:

app/page.tsx
...
<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:

app/page.tsx
...
- <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>
...

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: