Landing

This section provides guidance on laying out a landing page.

Overview

Landing layout is a type of web page design that is specifically created to promote a product, service, or event and encourage visitors to take a specific action, such as making a purchase, signing up for a newsletter, or registering for an event. The layout is designed to be visually appealing and persuasive, with a clear call-to-action (CTA) that guides visitors towards the desired goal.

How to use

Here we use landing layout. The installation method is as follows below.

Landing layout use mode Per-Page Layouts

Landing layout component is split into several sections:

  • Header: Component which represents the main navigation bar of the layout.

  • Main: Contains the content of each page and all prop passed from the page component.

  • Footer: Component which represents the footer of the layout.

Step 1: Create the layout split component

First, create a few new files in src/layouts/LandingLayout directory. This will be the parent folder component that wraps around each component layout.

layouts/LandingLayout
├── Header
│   ├── <another split code>
│   └── index.tsx
├── Main
│   ├── <another split code>
│   └── index.tsx
├── Footer
│   ├── <another split code>
│   └── index.tsx
└── index.tsx
Header/index.tsx
import React from "react";

interface Props {
  children?: React.ReactNode;
}

const Header: React.FC<Props> = ({ children = <p>Header</p> }) => {
  return <header>{children}</header>;
};

export default Header;
Main/index.tsx
import React from "react";

interface Props {
  children: React.ReactNode;
}

const Main: React.FC<Props> = ({ children }) => {
  return <main>{children}</main>;
};

export default Main;
Footer/index.tsx
import React from "react";

interface Props {
  children?: React.ReactNode;
}

const Footer: React.FC<Props> = ({ children = <p>Footer</p> }) => {
  return <footer>{children}</footer>;
};

export default Footer;

In each split it can be chunked again into smaller code sections.

Step 2: Create the parent layout component

Next, create a new file for parent layout component, such as index.tsx, also in your src/layouts/LandingLayout directory.

// Vendors
import React from "react";

// Components
import Header from "./Header";
import Main from "./Main";
import Footer from "./Footer";

interface LandingLayoutProps extends React.PropsWithChildren<{}> {
  // Add any other props your component needs
}

const LandingLayout = (props: LandingLayoutProps) => {
  return (
    <>
      <Header />
      <Main>{props.children}</Main>
      <Footer />
    </>
  );
};

export default LandingLayout;

Step 3: Create the Page Component

Next, create a new file for your page component, such as index.tsx, also in your src/components/page/Homepage directory. This component will be wrapped by the LandingLayout component.

// Vendors
import React from 'react';

const Homepage = () => {
  return (
    <>
      Homepage
    </>
  );
}

export default Homepage;

Step 4: Add the Page to Your App

Finally, create a new file for your page component, such as index.tsx, also in your src/pages directory.

// Vendors
import React from 'react';
import Head from "next/head";
import type { ReactElement } from "react";
import type { NextPageWithLayout } from "./_app";

// Layouts
import LandingLayout from "@/layouts/LandingLayout";

// Components
import Homepage from "@/components/page/Homepage";

const Home: NextPageWithLayout = () => {
  return (
    <>
      <Head>
        <title>Create Tokenomy App</title>
        <meta name="description" content="Generated by create tokenomy app" />
      </Head>
      <Homepage />
    </>
  );
}

Home.getLayout = function getLayout(page: ReactElement) {
  return <LandingLayout>{page}</LandingLayout>;
};

export default Home;
PreviousMobile / WebviewNextDashboard

Last updated