Tutorials > Ship in 5 mins
🌟 Want to impress your audience in just 5 minutes? Let's Let's show off your startup fast! ⚡️
We're creating a beautiful landing page and adding some stylish forms to collect emails for your waitlist (totally up to you, but why miss out on the hype?).
Follow this easy tutorial, and you'll find yourself featured on our homepage, standing out like the star you are! ⭐️ Let's get started! 🚀
1. 👋 Ready to start? Clone the repo from Nuxt Starter AI Github repositoru link, run the server locally, and follow our Get Started tutorial for a quick setup.
2. Delete everything in /pages/index.vue and paste this!
1
2
3<template>
4 <Header />
5 <main>
6 <Hero2 />
7 <PainExplanation />
8 <FeaturesShowcase />
9 <AppComponentsShowcase topIndicatorText="App Components" />
10 <SampleAppShowcase />
11 <Pricing2 />
12 <Marketing />
13 <FAQ />
14 <Testimonials1 testimonials={defaultTestimonials} />
15 <CTA />
16 </main>
17 <Footer />
18</template>
19
20<script lang="ts" setup>
21import Header from "@/components/landing-components/Header.vue"
22import Hero2 from "@/components/landing-components/Hero2.vue";
23import PainExplanation from "@/components/landing-components/PainExplanation.vue";
24import FAQ from "@/components/landing-components/FAQ.vue";
25import CTA from "@/components/landing-components/CTA.vue";
26import Footer from "@/components/landing-components/Footer.vue";
27import Testimonials1 from "@/componnets/landing-components/Testimonials1.vue";
28import Marketing from "@/components/landing-components/Marketing.vue";
29import Pricing2 from "@/components/landing-components/Pricing2.vue";
30import SampleAppShowcase from "@/components/landing-components/SampleAppShowcase.vue";
31
32import { defaultTestimonials } from "@/components/landing-components/testimonials";
33</script>
34
35<style></style>3. Customize the copy to your needs in seconds! Every component includes useful tips in the components section to enhance your copy and boost sales. And the big reveal... Congratulations! Your stunning landing page is all set for its grand entrance! 🌟
4. 🌟 Collect waitlist emails? Set up a database (optional). 📬✨
5. ✨ Feel free to change the primary buttons to direct users to the waitlist in the Hero, Pricing, and CTA sections (optional). 🌟
1<template>
2 ...
3 </div>
4 <ButtonLead />
5 <div>
6 ...
7</template>
8
9<script lang="ts" setup>
10import ButtonLead from "@/components/landing-components/ButtonLead.vue";
11
12</script>
13<style></style>
14 6. 🚀 Time to spread your wings and deploy! If you need any assistance, we've got a ultra simple tutorial to guide you through. Happy launching your startup real fast with Nuxt Starter AI! 🌟