Create a Landing Page

Let's create a landing page using various components provided by the CloudNua Mobile. 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 '@cloudnua-mobile/components/primitives/scroll-view';
import Header from '@cloudnua-mobile/components/custom/landing-page/Header';
import Hero from '@cloudnua-mobile/components/custom/landing-page/Hero';
import { FourCardPricingLayout } from '@cloudnua-mobile/components/custom/pricing/FourCardPricingLayout';
import { TwoColumnTestimonial } from '@cloudnua-mobile/components/custom/testimonials/TwoColumnTestimonial';
import testimonials from '@cloudnua-mobile/utils/constants/ratingTestimonials';
import { ThreeColumnBlog } from '@cloudnua-mobile/components/custom/blogs/ThreeColumnBlog';
import { blogPosts } from '@cloudnua-mobile/utils/constants/blogData';
import BasicFaq from '@cloudnua-mobile/components/custom/faq/BasicFaq';
import BasicNewsletter from '@cloudnua-mobile/components/custom/newsletter/BasicNewsletter';
import BasicFooter from '@cloudnua-mobile/components/custom/footer/BasicFooter';
import { VStack } from '@cloudnua-mobile/components/primitives/vstack';
import { Box } from '@cloudnua-mobile/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;

CloudNua Mobile Starter

This component is included with CloudNua Mobile. All packages and source code are available with your purchase. View plans →