Tutorials > Ship in 5 mins
🌟 Ready to shine in just 5 minutes? Let's showcase your startup to your audience in no time! ⚡️
We're crafting a stunning landing page and even throwing in some sleek forms to gather emails for your waitlist (totally optional, but why miss out on the hype?).
Complete this breezy tutorial, and guess what? You'll be front and center on our homepage, shining like the star you are! ⭐️ Let's do this! 🚀
1. 👋 Ready to dive in? Clone the repo, run the server locally, and follow our Get Started link for a quick setup.
2. Remove everything in /app/page.tsx and paste this!
1
2 import AppComponentsShowcase from "@/components/LandingPage/AppComponentsShowcase/AppComponentsShowcase";
3 import FeaturesShowcase from "@/components/LandingPage/FeaturesShowcase/FeaturesShowcase";
4 import {
5 CTA,
6 FAQ,
7 Footer,
8 Header,
9 Hero2,
10 Testimonials1,
11 } from "@/components/landing-components";
12 import PainExplanation from "@/components/LandingPage/PainExplanation/PainExplanation";
13 import Marketing from "@/components/LandingPage/Marketing/Marketing";
14 import Pricing2 from "@/components/LandingPage/Pricing2";
15 import SampleAppShowcase from "@/components/LandingPage/SampleAppShowcase/SampleAppShowcase";
16
17 import "aos/dist/aos.css"; // Import AOS styles (you can customize the styles if needed)
18 import { defaultTestimonials } from "@/components/landing-components/Testimonials1/testimonials";
19
20 export default function Home() {
21 return (
22 <>
23 <Header />
24 <main>
25 <Hero2 />
26 <PainExplanation />
27 <FeaturesShowcase />
28 <AppComponentsShowcase topIndicatorText="App Components" />
29 <SampleAppShowcase />
30 <Pricing2 />
31 <Marketing />
32
33 <FAQ />
34 <Testimonials1 testimonials={defaultTestimonials} />
35 <CTA />
36 </main>
37 <Footer />
38 </>
39 );
40 }3. Customize the copy to match your business magic. Each component comes with handy tips in the components section to make your copy sparkle and sell. Drumroll, please... Congrats! Your beautiful landing page is ready to make its debut! 🌟
4. 🌟 Collect waitlist emails? Set up a database (optional). 📬✨
5. ✨ Go ahead and switch up the main buttons to get users to the waitlist in Hero, Pricing, and CTA (optional). 🌟
1
2 import { ButtonLead } from "@/components/landing-components";
3
4 ...
5 </div>
6 <ButtonLead />
7 <div>
8 ...
9 6. 🚀 Time to spread your wings and deploy! If you could use a hand, we've got a super simple tutorial to guide you through. Happy launching! 🌟