# Filling up your page

Now you are going yo actually create yout landing page! 🚀

First install GitLanding and it's peer dependencies.

```
yarn add gitlanding @mui/material @emotion/react @emotion/styled onyxia-ui
```

If you wish to import files sush as `webm` or `mp4` files in you project you must declare theme as modules. Copy and paste the following code in `src/react-app-env.d.ts`.

```typescript
//Replace <mp4> with the extension name of your choice
declare module "*.mp4" {
	const _default: string;
	export default _default;
}
```

Then copy and paste the the following skeletton in `src/index.tsx`, run `yarn start` and start hacking around!

```typescript
import { render } from "react-dom";
import { GlTemplate } from "gitlanding/GlTemplate";
import { GlHeader } from "gitlanding/GlHeader";
import { GlHero } from "gitlanding/GlHero";
import { GlArticle } from "gitlanding/GlArticle";
import { GlFooter } from "gitlanding/GlFooter";
import { GlSectionDivider } from "gitlanding/GlSectionDivider";
import { GlCards } from "gitlanding/GlCards";
import { GlLogoCard } from "gitlanding/GlCards/GlLogoCard";
import { GlProjectCard } from "gitlanding/GlCards/GlProjectCard";
import { GlCheckList } from "gitlanding/GlCheckList";
import { GlSlider } from "gitlanding/GlSlider";
import { GlReviewSlide } from "gitlanding/GlReviewSlide";

function App() {
    return (
        <GlTemplate
            header={
                <GlHeader
                    title="Header title"
                    links={[
                        {
                            "label": "link 1",
                            "href": "https://example.com",
                        },
                        {
                            "label": "link 2",
                            "href": "https://example.com",
                        },
                        {
                            "label": "link 3",
                            "href": "https://example.com",
                        },
                    ]}
                    enableDarkModeSwitch={true}
                    githubRepoUrl="https://github.com/torvalds/linux"
                    githubButtonSize="large"
                />
            }
            headerOptions={{
                "position": "sticky",
                "isRetracted": "smart",
            }}
            footer={
                <GlFooter
                    bottomDivContent="Licence M I T"
                    email="email@email.com"
                    phoneNumber="+33545345676"
                    links={[
                        {
                            "href": "https://example.com",
                            "label": "link 1",
                        },
                        {
                            "href": "https://example.com",
                            "label": "link 2",
                        },
                        {
                            "href": "https://example.com",
                            "label": "link 3",
                        },
                    ]}
                />
            }
        >
            <GlHero
                title="Hero title"
                subTitle="Hero subtitle"
                illustration={{
                    "type": "image",
                    "src": "https://user-images.githubusercontent.com/39378411/135731749-4a723d4e-52ea-49b7-83c1-7da4db8f3f59.png",
                    "hasShadow": false
                }}
                hasLinkToSectionBellow={true}
            />

            <GlArticle
                id="firstSection"
                title="Article title"
                body={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                    nisl nec hendrerit rutrum, 
                    mi enim **semper arcu**, ut imperdiet urna libero non metus. 
                    Donec imperdiet ac nulla sit amet lacinia. 
                    Suspendisse volutpat lectus vitae libero luctus, a egestas magna egestas. 
                    Suspendisse potenti. In semper erat scelerisque sapien convallis porttitor.`}
                buttonLabel="Article Button label"
                buttonLink={{
                    "href": "https://example.com",
                }}
                illustration={{
                    "type": "image",
                    "src": "https://user-images.githubusercontent.com/39378411/135731808-6cf3e4dd-1047-4a0a-95be-65fdd6947315.png",
                    "hasShadow": false
                }}
                hasAnimation={true}
                illustrationPosition="left"
            />

            <GlCards>
                {
                    <>
                        <GlLogoCard
                            title="Card title"
                            paragraph={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus.`}
                            buttonLabel="Button Label"
                            iconUrls={[
                                "https://user-images.githubusercontent.com/39378411/135731999-a2d8f901-3d7d-40a9-b59f-102ee1facc45.png",
                                "https://user-images.githubusercontent.com/39378411/135731995-136d4baf-58a6-4cb3-a72c-b8ddce835b3c.png",
                            ]}
                        />
                        <GlLogoCard
                            title="Card title"
                            paragraph={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus.`}
                            buttonLabel="Button Label"
                            iconUrls={[
                                "https://user-images.githubusercontent.com/39378411/135731998-e01a7970-a7c4-4041-b07c-341e075207d2.png",
                            ]}
                        />

                        <GlLogoCard
                            title="Card title"
                            paragraph={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus.`}
                            buttonLabel="Button Label"
                            iconUrls={[
                                "https://user-images.githubusercontent.com/39378411/135731991-3da13e97-c2f7-42b2-88ab-055aff0d6ae9.png",
                                "https://user-images.githubusercontent.com/39378411/135731994-29a3c46a-0d92-4ec8-954e-39bfeeb06534.png",
                                "https://user-images.githubusercontent.com/39378411/135731998-e01a7970-a7c4-4041-b07c-341e075207d2.png",
                                "https://user-images.githubusercontent.com/39378411/135731990-8f64ce8e-d655-4ded-9561-3d7f6893d06e.png",
                            ]}
                            overlapIcons={true}
                        />
                    </>
                }
            </GlCards>

            <GlSectionDivider />

            <GlArticle
                title="Article title"
                body={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                    nisl nec **hendrerit** rutrum, 
                    mi enim semper arcu, ut imperdiet urna libero non metus. 
                    Donec imperdiet ac nulla sit amet lacinia. 
                    Suspendisse volutpat lectus vitae libero luctus, a egestas magna egestas. 
                    Suspendisse potenti. In semper erat scelerisque sapien convallis porttitor.`}
                buttonLabel="Article Button label"
                buttonLink={{
                    "href": "https://example.com",
                }}
                illustration={{
                    "type": "image",
                    "src": "https://user-images.githubusercontent.com/39378411/135731816-5ba39459-d95e-413d-b515-92a7b0dc5acf.png",
                    "hasShadow": false
                }}
                hasAnimation={true}
            />

            <GlCards>
                <>
                    <GlProjectCard
                        title="Project Card Title"
                        subtitle="Project Card Subtitle"
                        projectImageUrl="https://user-images.githubusercontent.com/39378411/135731821-0f1c7165-fada-418f-896a-c36a0e55171b.png"
                    />
                    <GlProjectCard
                        title="Project Card Title"
                        subtitle="Project Card Subtitle"
                        projectImageUrl="https://user-images.githubusercontent.com/39378411/135731810-93193eba-ada5-460a-96ad-948215278850.png"
                    />
                    <GlProjectCard
                        title="Project Card Title"
                        subtitle="Project Card Subtitle"
                        projectImageUrl="https://user-images.githubusercontent.com/39378411/135731819-1cf18697-e946-449f-ad6e-be414e341c40.png"
                    />
                    <GlProjectCard
                        title="Project Card Title"
                        subtitle="Project Card Subtitle"
                        projectImageUrl="https://user-images.githubusercontent.com/39378411/135731914-0265b77e-3338-4747-b014-e845f16332a7.png"
                    />
                </>
            </GlCards>

            <GlSectionDivider />

            <GlCheckList
                heading="Check List Heading"
                hasAnimation={true}
                elements={[
                    {
                        "title": "List element title",
                        "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut **imperdiet** urna libero non metus. 
                                Donec imperdiet ac nulla sit amet lacinia.`,
                    },
                    {
                        "title": "List element title",
                        "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus. 
                                Donec imperdiet ac nulla sit amet lacinia.`,
                    },
                    {
                        "title": "List element title",
                        "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus. 
                                Donec imperdiet ac nulla sit amet lacinia.`,
                    },
                    {
                        "title": "List element title",
                        "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus. 
                                Donec imperdiet ac nulla sit amet lacinia.`,
                    },
                    {
                        "title": "List element title",
                        "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus. 
                                Donec imperdiet ac nulla sit amet lacinia.`,
                    },
                    {
                        "title": "List element title",
                        "description": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                                nisl nec hendrerit rutrum, 
                                mi enim semper arcu, ut imperdiet urna libero non metus. 
                                Donec imperdiet ac nulla sit amet lacinia.`,
                    },
                ]}
            />

            <GlSectionDivider />

            <GlSlider
                title="Review slider title"
                autoPlayTimeInterval={4}
                slides={[
                    <GlReviewSlide
                        logoUrl="https://user-images.githubusercontent.com/39378411/135731994-29a3c46a-0d92-4ec8-954e-39bfeeb06534.png"
                        descriptionMd={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                            nisl nec hendrerit rutrum, 
                            mi enim semper arcu, ut imperdiet urna libero non metus. 
                            Donec imperdiet ac nulla sit amet lacinia. 
                            Suspendisse volutpat lectus vitae libero luctus, a egestas magna egestas. 
                            Suspendisse potenti. In semper erat scelerisque sapien convallis porttitor.`}
                        signature="Signature"
                    />,
                    <GlReviewSlide
                        logoUrl="https://user-images.githubusercontent.com/39378411/135731995-136d4baf-58a6-4cb3-a72c-b8ddce835b3c.png"
                        descriptionMd={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                            nisl nec hendrerit rutrum, 
                            mi enim semper arcu, ut imperdiet urna libero non metus. 
                            Donec imperdiet ac nulla sit amet lacinia. 
                            Suspendisse volutpat lectus vitae libero luctus, a egestas magna egestas. 
                            Suspendisse potenti. In semper erat scelerisque sapien convallis porttitor.`}
                        signature="Signature"
                    />,
                    <GlReviewSlide
                        logoUrl="https://user-images.githubusercontent.com/39378411/135731999-a2d8f901-3d7d-40a9-b59f-102ee1facc45.png"
                        descriptionMd={`Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus, 
                            nisl nec hendrerit rutrum, 
                            mi enim semper arcu, ut imperdiet urna libero non metus. 
                            Donec imperdiet ac nulla sit amet lacinia. 
                            Suspendisse volutpat lectus vitae libero luctus, a egestas magna egestas. 
                            Suspendisse potenti. In semper erat scelerisque sapien convallis porttitor.`}
                        signature="Signature"
                    />,
                ]}
            />
        </GlTemplate>
    );
}

render(<App />, document.getElementById("root"));
```

{% hint style="success" %}
Host your assets by placing them [in a dedicated directory in your `src` folder](https://github.com/thieryw/gitlanding/tree/006bc0507cabe327e4b0d7df5613877caa146142/src/assets/img). An then [importing them as URLs directly in your code](https://github.com/thieryw/gitlanding/blob/006bc0507cabe327e4b0d7df5613877caa146142/src/index.tsx#L10).
{% endhint %}

{% hint style="info" %}
You can preview the components in [Storybook](https://www.gitlanding.dev/storybook)
{% endhint %}

{% hint style="info" %}
If you have bootstraped your page using `create-react-app` there is a[ lot of things](https://github.com/thieryw/crispy-octo-bassoon/commit/431679969c454772605d2d16ad69290559a43cba) you can delete.
{% endhint %}

####


---

# 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://docs.gitlanding.dev/v0/creating-a-page.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.