This project uses Tailwind CSS  and NuxtUI for styling.

​
Project Structure

Components are organized by category, each located in its corresponding folder under components. For example:

  • Hero Section: app/components/Hero
  • Testimonial Section: app/components/Testimonial
  • Pricing Section: app/components/Pricing

​
Theming

With NuxtUI, it’s easy to customize your theme.

export default defineAppConfig({
	ui: {
		primary: "blue",
		gray: "slate",
  }
});

Visit the NuxtUI Docs to learn more about customizing your components’ look and feel.

​
Landing Page

The Headerand Footercomponents are in app/layouts/default.vue, ensuring they appear by default on all pages.

<template>
	<main id="default" class="relative flex flex-col w-full min-h-screen">
		<Navbar />
		<slot />
		<Footer />
	</main>
</template>

<style>
// You can customize the background color of the landing page here
#default {
	@apply bg-white dark:bg-[#08090a];
}
</style>

If you don’t want your page to have <Navbar /> or <Footer />, you can change your page layout with the following code.

<script setup>
definePageMeta({
	layout: "dashboard",
});
</script>

​
Other Components

With a simple copy and paste, you can create a beautiful, high-converting landing page. 🥳

<template>
	<div class="z-10">
		<Hero
			title="Jumpstart Your SaaS with Ease Designed for Beginners"
			description="Ease is a SaaS Starter Kit, simplifying the process of building a functional SaaS without worrying about landing pages, payments, SEO, or complex features."
		/>
		<LogoCloud />
		<Feature />
		<HowItWorks />
		<Pricing />
		<TestimonialGrid />
		<FAQ />
		<CTA />
	</div>
	<!-- <UIBackgroundRisingStars /> -->
	<UIBackgroundShadowGrid />
</template>

Don’t forget to Edit the copy to fit your business logic.

🎉 Congrats you now have a beautiful landing page!