Create Tokenomy App

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://tokenomy.gitbook.io/boilerplate-code/features/layouts/landing.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.