Skip to content
AppLaunchKit - docs - v1

Create a landing page

Let’s create a landing page using various components provided by the AppLaunchKit. You just need to copy and paste the code below to create a new landing page in a flash.

Copy and paste the code below in apps/next/apps/page.tsx

'use client';
import { ScrollView } from '@app-launch-kit/components/primitives/scroll-view';
import Header from '@app-launch-kit/components/custom/landing-page/Header';
import Hero from '@app-launch-kit/components/custom/landing-page/Hero';
import { FourCardPricingLayout } from '@app-launch-kit/components/custom/pricing/FourCardPricingLayout';
import { TwoColumnTestimonial } from '@app-launch-kit/components/custom/testimonials/TwoColumnTestimonial';
import testimonials from '@app-launch-kit/utils/constants/ratingTestimonials';
import { ThreeColumnBlog } from '@app-launch-kit/components/custom/blogs/ThreeColumnBlog';
import { blogPosts } from '@app-launch-kit/utils/constants/blogData';
import BasicFaq from '@app-launch-kit/components/custom/faq/BasicFaq';
import BasicNewsletter from '@app-launch-kit/components/custom/newsletter/BasicNewsletter';
import BasicFooter from '@app-launch-kit/components/custom/footer/BasicFooter';
import { VStack } from '@app-launch-kit/components/primitives/vstack';
import { Box } from '@app-launch-kit/components/primitives/box';
const Home = () => {
return (
<Box className="bg-background-0">
<Header />
<ScrollView contentContainerClassName="md:gap-14 gap-8">
<Hero />
<VStack className="p-4 md:gap-20 gap-12">
<FourCardPricingLayout />
<TwoColumnTestimonial testimonials={testimonials} />
<ThreeColumnBlog blogPosts={blogPosts} />
<BasicFaq />
<BasicNewsletter />
<BasicFooter />
</VStack>
</ScrollView>
</Box>
);
};


export default Home;