Create Tokenomy App

> For the complete documentation index, see [llms.txt](https://tokenomy.gitbook.io/boilerplate-code/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tokenomy.gitbook.io/boilerplate-code/features/layouts/landing.md).

# Landing

## 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.

{% hint style="info" %}
Landing layout use mode [Per-Page Layouts](https://nextjs.org/docs/basic-features/layouts#per-page-layouts)
{% endhint %}

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
```

{% code title="Header/index.tsx" %}

```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;
```

{% endcode %}

{% code title="Main/index.tsx" %}

```tsx
import React from "react";

interface Props {
  children: React.ReactNode;
}

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

export default Main;
```

{% endcode %}

{% code title="Footer/index.tsx" %}

```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;
```

{% endcode %}

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.

```tsx
// 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.

```tsx
// 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.

```tsx
// 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;
```