Landing Page

This guide covers how to create and customize landing pages in your MkSaaS website using the built-in marketing blocks from Tailark.

Core Features

MkSaaS comes with a comprehensive set of pre-built marketing blocks that allow you to quickly create beautiful, responsive landing pages. These blocks include:

• Hero sections
• Feature displays
• Pricing tables
• Testimonials
• Call-to-action sections
• And many more

All of these components are based on the Tailark open-source project, which provides high-quality UI blocks built with shadcn/UI and TailwindCSS.

Available Block Categories

The MkSaaS template includes all marketing blocks from Tailark, organized into the following categories:

Each category contains multiple block variants, giving you plenty of options to choose from.

How to Use Marketing Blocks

The blocks are located in the src/app/[locale]/preview directory, organized by category. Each category folder contains multiple block variants that you can use in your landing pages.

Browsing Available Blocks

To see all available blocks, you can explore the preview directory:

Each category folder contains numbered variants (e.g., one, two, three, etc.), and each variant has a page.tsx file that implements the block.

Adding a Block to Landing Page

To use a block in your landing page:

1. Browse the preview directory to find the block you want to use
2. Open the corresponding page.tsx file to view the implementation
3. Copy the component code from the file
4. Paste it into your landing page component
5. Customize the content and styling as needed

For example, to use the first hero section variant:

// Your landing page component
import { HeroSectionOne } from '@/components/landing/hero-section-one';
 
export default function LandingPage() {
  return (
    <main>
      <HeroSectionOne />
      {/* Add more blocks here */}
    </main>
  );
}

Using the Blocks Directory

For better organization and internationalization support, MkSaaS provides a dedicated src/components/blocks directory where you should place your customized components after copying them from the preview directory.

This directory structure mirrors the categories in the preview directory and already includes some pre-built, internationalized block components. When adding new blocks from the preview directory, we recommend the following workflow:

1. Find and select the desired block from the preview directory
2. Copy the component code from the page.tsx file
3. Create a new file in the corresponding category folder in src/components/blocks
4. Adapt the component to support internationalization (see the Internationalization section)

For example, if you've selected a hero section component from the preview directory, you should place your customized version in:

src/components/blocks/hero/your-hero-component.tsx

Using this organized approach provides several benefits:

• Keeps all your landing page components in one dedicated location
• Makes it easier to maintain and update components
• Ensures proper separation from the original preview components
• Allows you to adapt components for internationalization in a structured way
• Facilitates reuse across different parts of your application

Creating a Complete Landing Page

A typical landing page combines multiple blocks to create a cohesive user experience. Here's an example of how you might structure a landing page using components from the blocks directory:

import HeroSection from '@/components/blocks/hero/hero';
import Features from '@/components/blocks/features/features';
import Testimonials from '@/components/blocks/testimonials/testimonials';
import Pricing from '@/components/blocks/pricing/pricing';
import CallToAction from '@/components/blocks/calltoaction/cta';
import Footer from '@/components/blocks/footer/footer';
 
export default function LandingPage() {
  return (
    <main>
      <HeroSection />
      <Features />
      <Testimonials />
      <Pricing />
      <CallToAction />
    </main>
  );
}

This approach allows you to mix and match different blocks to create a unique landing page that suits your needs.

Internationalization

The blocks from Tailark do not support internationalization out of the box. To make your landing page multilingual, you'll need to extract the text content into language-specific resource files.

Extracting Text for Translation

When you've finalized your block selection and customization, follow these steps to make your landing page multilingual:

1. Identify all text content in the blocks you're using
2. Extract this text into language-specific resource files (e.g., using next-intl)
3. Replace the hardcoded text with translation function calls

Here's an example of how to internationalize a hero section:

// Before internationalization
<TextEffect as="h1" className="...">
  Your Custom Headline Here
</TextEffect>
 
// After internationalization
import { useTranslations } from 'next-intl';
 
function InternationalizedHeroSection() {
  const t = useTranslations('LandingPage.Hero');
  
  return (
    <TextEffect as="h1" className="...">
      {t('headline')}
    </TextEffect>
  );
}

Translation Resource Files

Create translation files for each supported language:

// messages/en.json
{
  "LandingPage": {
    "Hero": {
      "headline": "Your Custom Headline Here",
      "subheading": "Your custom subheading text goes here.",
      "ctaPrimary": "Get Started",
      "ctaSecondary": "Learn More"
    }
  }
}
 
// messages/es.json
{
  "LandingPage": {
    "Hero": {
      "headline": "Su Título Personalizado Aquí",
      "subheading": "Su texto de subtítulo personalizado va aquí.",
      "ctaPrimary": "Comenzar",
      "ctaSecondary": "Aprende Más"
    }
  }
}

Pre-built Internationalized Components

The src/components/blocks directory already includes several pre-internationalized components that you can use as a reference or starting point. These components:

1. Import useTranslations from next-intl
2. Use translation keys for all text content
3. Use LocaleLink instead of regular Next.js Link for proper localization of URLs
4. Maintain the same visual design and functionality as their preview counterparts

For example, here's a simplified version of an internationalized hero component:

import { useTranslations } from 'next-intl';
import { LocaleLink } from '@/i18n/navigation';
import { TextEffect } from '@/components/tailark/motion/text-effect';
import { Button } from '@/components/ui/button';
 
export default function HeroSection() {
  const t = useTranslations('HomePage.hero');
  
  return (
    <section>
      <h1>
        <TextEffect preset="fade-in-blur">
          {t('title')}
        </TextEffect>
      </h1>
      <p>{t('description')}</p>
      <Button asChild>
        <LocaleLink href="/get-started">
          {t('cta')}
        </LocaleLink>
      </Button>
    </section>
  );
}

By following this approach, you can create a fully multilingual landing page that adapts to the user's preferred language.

Keeping Components Updated

The marketing blocks in MkSaaS are regularly synchronized with the Tailark GitHub repository. This ensures that you always have access to the latest improvements and additions.

There are three approaches to managing your landing page components, each with different update implications:

1. Using Preview Components (Not Recommended)

   • Components in the preview directory are automatically synchronized with Tailark
   • Direct usage may cause conflicts during updates
   • Avoid using these components in production

2. Using Blocks Directory Components

   • Components in src/components/blocks are more stable
   • May still be affected by template updates
   • Good for minimal customization needs

3. Using Your Own Directory (Recommended)

   • Copy components to your own directory (e.g., components/home)
   • Immune to template updates
   • Complete control over component updates
   • Best for extensive customization needs

Best Practices

When creating your landing page, consider these best practices:

1. Start with a plan: Before implementing, sketch out the structure of your landing page
2. Focus on user flow: Arrange blocks to guide users through a logical journey
3. Maintain consistency: Use consistent colors, fonts, and styling throughout
4. Optimize for performance: Compress images and minimize unnecessary animations
5. Mobile first: Ensure your landing page looks great on all devices
6. Test loading times: Verify that your page loads quickly, especially the above-the-fold content
7. Clear call-to-action: Make your primary CTA prominent and compelling
8. Simplify navigation: Keep navigation minimal to focus attention on your content
9. A/B test: If possible, test different versions to see what resonates with your audience
10. Track metrics: Set up analytics to measure the effectiveness of your landing page

Next Steps

Now that you understand how to create and customize landing pages in MkSaaS, explore these related topics: