From c9a4a9c9aef76afe0ffcc39ecdb2ae2a063e84d1 Mon Sep 17 00:00:00 2001
From: Artem Magei <artemmagej@gmail.com>
Date: Thu, 23 May 2024 04:46:14 +0300
Subject: [PATCH] feat: add tutorial component

---
 frontend/src/app/page.tsx                     | 593 +-----------------
 frontend/src/app/tutorialCards.ts             |  65 ++
 .../components/TutorialCard/TutorialCard.tsx  |  44 ++
 3 files changed, 114 insertions(+), 588 deletions(-)
 create mode 100644 frontend/src/app/tutorialCards.ts
 create mode 100644 frontend/src/components/TutorialCard/TutorialCard.tsx

diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 524ef8f5..2f665bf0 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,8 +1,10 @@
 import React from "react";
 
+import { tutorialCards } from "@/app/tutorialCards";
 import { Header } from "@/components/Header/Header";
 import { HomeContainer } from "@/components/HomeContainer/HomeContainer";
 import { HomePageParallax } from "@/components/HomePageParallax/HomePageParallax";
+import { TutorialCard } from "@/components/TutorialCard/TutorialCard";
 
 export default function Home() {
   return (
@@ -10,594 +12,9 @@ export default function Home() {
       <Header />
       <HomePageParallax />
       <HomeContainer>
-        <h2 className="text-6xl font-bold">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>{" "}
-        <h2 className="text-6xl">Lorem ipsum</h2>
-        <p className="mt-10 w-1/2 text-2xl">
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit laborum ipsam corrupti asperiores magnam quos
-          cumque animi tempore vero repellendus, harum odio neque quis, non temporibus. Inventore asperiores repudiandae
-          praesentium ut, fugit quo esse, placeat ullam quibusdam perspiciatis delectus ducimus nihil. Dolorum nam
-          veniam aperiam sapiente corporis! Quisquam, veritatis repellendus?
-        </p>
+        {tutorialCards.map((card, index) => (
+          <TutorialCard key={card.text} index={index} {...card} />
+        ))}
       </HomeContainer>
     </>
   );
diff --git a/frontend/src/app/tutorialCards.ts b/frontend/src/app/tutorialCards.ts
new file mode 100644
index 00000000..9123e565
--- /dev/null
+++ b/frontend/src/app/tutorialCards.ts
@@ -0,0 +1,65 @@
+export const tutorialCards = [
+  {
+    title: "Theme and authorization",
+    text: "On the main page, in the upper right corner, you can change the theme and go to the authorization page.",
+    imageSrc: "/images/tutorial/tutorial1.png",
+    width: 500,
+    height: 500,
+  },
+  {
+    title: "Sign Up",
+    text: "To register, you only need to provide your name, username, and password. The application is completely anonymous, so you can use any name you want. It's all up to you!",
+    imageSrc: "/images/tutorial/tutorial2.png",
+    width: 500,
+    height: 500,
+  },
+  {
+    title: "Sign In",
+    text: "User authorization is no worse than registration. All you need to remember is your username and password, and you can easily access the application!",
+    imageSrc: "/images/tutorial/tutorial3.png",
+    width: 500,
+    height: 500,
+  },
+  {
+    title: "Chat",
+    text: "It's a place where you can communicate with your friends or meet other people, but you can remain anonymous. And our minimalist design will make your communication even more enjoyable!",
+    imageSrc: "/images/tutorial/tutorial4.png",
+    width: 700,
+    height: 700,
+  },
+  {
+    title: "Sidebar",
+    text: "A great way to navigate, thanks to it you will never get lost in our application, because everything is simple, just click on one of the elements, and it will open the page you need.",
+    imageSrc: "/images/tutorial/tutorial5.png",
+    width: 400,
+    height: 400,
+  },
+  {
+    title: "User Search",
+    text: "You can find the people you need quickly and securely by simply entering their name or username",
+    imageSrc: "/images/tutorial/tutorial6.png",
+    width: 500,
+    height: 500,
+  },
+  {
+    title: "Messaging",
+    text: "Our chat is secure, messages are encrypted in a unique way, because we use our own technology for this, so no one can access your messages.",
+    imageSrc: "/images/tutorial/tutorial7.png",
+    width: 500,
+    height: 500,
+  },
+  {
+    title: "Group Creation",
+    text: "Creating groups? It's easy! With our app, you can quickly gather a group of friends for more effective communication. It's more fun together!",
+    imageSrc: "/images/tutorial/tutorial8.png",
+    width: 500,
+    height: 500,
+  },
+  {
+    title: "Group Management",
+    text: "Of course, we did not forget to make it possible to manage the group. Of course, there will be a leader in the group, but he or she will be able to give rights to someone else.  In addition, the leader will be able to edit the created group and clean it up if necessary. Or everyone can do it for themselves. As you like!",
+    imageSrc: "/images/tutorial/tutorial9.png",
+    width: 500,
+    height: 500,
+  },
+];
diff --git a/frontend/src/components/TutorialCard/TutorialCard.tsx b/frontend/src/components/TutorialCard/TutorialCard.tsx
new file mode 100644
index 00000000..5f14b488
--- /dev/null
+++ b/frontend/src/components/TutorialCard/TutorialCard.tsx
@@ -0,0 +1,44 @@
+import Image from "next/image";
+import React from "react";
+
+export type PresentCardProps = {
+  text: string;
+  title: string;
+  imageSrc: string;
+  index: number;
+  width: number;
+  height: number;
+};
+export function TutorialCard({ width, height, text, imageSrc, title, index }: PresentCardProps) {
+  const isIndexEven = index % 2 === 0;
+  return (
+    <div className={`flex items-center ${isIndexEven && "justify-end"}`}>
+      {!isIndexEven && (
+        <Image
+          width={width}
+          height={height}
+          src={imageSrc}
+          style={{ height: "auto", width: "auto" }}
+          quality={100}
+          alt="Tutorial image"
+          className="mr-10 rounded-2xl self-end"
+        />
+      )}
+      <span className="w-[41%] text-start">
+        <div className="text-6xl font-bold text-center">{title}</div>
+        <p className="mt-10 text-2xl">{text}</p>
+      </span>
+      {isIndexEven && (
+        <Image
+          width={width}
+          height={height}
+          style={{ height: "auto", width: "auto" }}
+          src={imageSrc}
+          quality={100}
+          alt="Tutorial image"
+          className="ml-10 rounded-2xl self-start"
+        />
+      )}
+    </div>
+  );
+}