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;
Copy and paste the code below in apps/expo/apps/index.tsx
import React from 'react';
import { SafeAreaView } from "@app-launch-kit/components/primitives/safe-area-view";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";const Home = () => {return (<SafeAreaView className="flex-1 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></SafeAreaView>);};
export default Home;