Nuda Kit includes a complete, high-converting landing page with all the sections you need to launch your SaaS product. Every section is designed to be customizable and follows modern design best practices.
The landing page (frontend/app/pages/index.vue) is composed of modular sections:
┌─────────────────────────────────────┐
│ Navbar │
├─────────────────────────────────────┤
│ Hero │
├─────────────────────────────────────┤
│ Trusted │
├─────────────────────────────────────┤
│ Features │
├─────────────────────────────────────┤
│ Testimonials │
├─────────────────────────────────────┤
│ Pricing │
├─────────────────────────────────────┤
│ Video │
├─────────────────────────────────────┤
│ FAQ │
├─────────────────────────────────────┤
│ CTA │
├─────────────────────────────────────┤
│ Footer │
└─────────────────────────────────────┘
All landing components are located in frontend/app/components/landing/:
Sticky navigation bar with scroll-aware styling.
Features:
The main hero section that captures attention.
Features:
Social proof section showing company logos.
Features:
Showcase your product's key capabilities.
Features:
Customer reviews to build trust.
Features:
Dynamic pricing table connected to your backend.
Features:
Embedded video section for demos or explainers.
Features:
Frequently asked questions with expandable answers.
Features:
Final call-to-action to drive conversions.
Features:
Site footer with links and newsletter signup.
Features:
Nuda Kit uses @nuxtjs/seo for comprehensive SEO support. This module bundles multiple SEO tools into one easy-to-use package.
The @nuxtjs/seo module provides:
| Feature | Description |
|---|---|
| Site Config | Global site name, URL, and description |
| Meta Tags | Automatic Open Graph and Twitter cards |
| Sitemap | Auto-generated XML sitemap |
| Robots | Configurable robots.txt |
| Schema.org | Structured data support |
| Link Checker | Catch broken links during build |
Use the useHead composable to set page-specific metadata:
<script setup lang="ts">
useHead({
title: 'The ultimate solution for your business',
meta: [
{
name: 'description',
content: 'Nuda Kit is the ultimate solution for your business.'
},
],
})
</script>
The app uses a title template defined in app.vue:
<script setup lang="ts">
useHead({
titleTemplate: 'Nuda Kit - %s',
})
</script>
This means page titles will appear as: "Nuda Kit - Your Page Title"
Unique Titles
Meta Descriptions
Semantic HTML
Image Alt Text
You can configure global SEO settings in nuxt.config.ts:
export default defineNuxtConfig({
site: {
url: 'https://yourdomain.com',
name: 'Your SaaS Name',
description: 'Your default site description',
defaultLocale: 'en',
},
})
Set Open Graph tags for better social media sharing:
<script setup lang="ts">
useSeoMeta({
title: 'Page Title',
description: 'Page description',
ogTitle: 'Page Title',
ogDescription: 'Page description',
ogImage: '/og-image.png',
twitterCard: 'summary_large_image',
})
</script>
Edit pages/index.vue to reorder, add, or remove sections:
<template>
<Navbar />
<Hero />
<Features /> <!-- Moved up -->
<Trusted /> <!-- Moved down -->
<Pricing />
<Testimonials />
<FAQ />
<CTA />
<Footer />
</template>
Each component contains its own data. Edit the arrays inside each component:
features array in Features.vuetestimonials array in Testimonials.vuefaq array in Faq.vuemenu array in Navbar.vueassets/img/brand-logos/nuda-kit.svgpublic/img/landing/Create new sections following the existing pattern:
components/landing/py-15 lg:py-25max-w-7xl mx-auto px-4 lg:px-8pages/index.vue