📝Filling up your page
Create your landing page with Gitlanding
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-uiIf 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.
//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!
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"));Host your assets by placing them in a dedicated directory in your src folder. An then importing them as URLs directly in your code.
You can preview the components in Storybook
If you have bootstraped your page using create-react-app there is a lot of things you can delete.
Last updated