feat(components): create home page section one

create the hero section and the how it works section of the home page

package.json

@@ -27,8 +27,10 @@
         "next-i18next": "^11.2.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^4.11.0",
         "react-router-dom": "^6.3.0",
-        "react-test-renderer": "^18.2.0"
+        "react-test-renderer": "^18.2.0",
+        "webpack": "^5.89.0"
     },
     "devDependencies": {
         "@commitlint/cli": "^16.3.0",

src/Components/homepage/HeroSection.jsx

@@ -0,0 +1,33 @@
+import React from "react";
+const Hero = () => {
+    return (
+        <div>
+            <div className='px-4 lg:px-14 max-w-screen-2xl mx-auto my-8'>
+                <div className='md:w-11/12 mx-auto flex flex-col md:flex-row justify-between items-center gap-12'>
+                    <div className='md:w-3/5 mx-auto '>
+                        <h2 className='text-4xl text-zinc-900 font-semibold mb-4 md:w-4/5'>
+                            Medium title placeholder text
+                        </h2>
+                        <p className='md:w-3/4 text-zinc-500 mb-8'>
+                            Body placeholder for text paragraph. A paragraph is
+                            a self-contained unit of text dealing with a
+                            particular point or idea.Body placeholder for text
+                            paragraph. A paragraph is a self-contained unit of
+                            text dealing with a particular point or idea.Body
+                            placeholder for text paragraph. A paragraph is a
+                            self-contained unit of text dealing with a
+                            particular point or idea.
+                        </p>
+                        <button className='w-[166px] h-[52px] px-4 py-[11px] bg-cyan-700 rounded-lg flex justify-center items-center text-white text-xl font-medium font-Rubik leading-[30px] tracking-tight'>
+                            Get Started
+                        </button>
+                    </div>
+                    <div>
+                        <img src='/images/square.png' alt='' className='' />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default Hero;

src/Components/homepage/HowitWorks.jsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { AiOutlineRight } from "react-icons/ai";
+
+const HowitWorks = () => {
+    const howitworks = [
+        {
+            image: "/images/ManTop.png",
+            id: 1,
+            title: "Register",
+            description: "Lorem ipsum",
+            link: "Sign up",
+        },
+        {
+            image: "/images/attend.png",
+            id: 2,
+            title: "Attend events",
+            description: "Lorem ipsum",
+            link: "View events",
+        },
+        {
+            image: "/images/Girl.png",
+            id: 3,
+            title: "Organize your own!",
+            description: "Lorem ipsum",
+            link: "Get started",
+        },
+    ];
+
+    return (
+        <div className='mt-20 mx-auto text-center max-w-[1440px] px-6'>
+            <h2 className='text-zinc-900 text-4xl font-medium mb-20'>
+                How it Works
+            </h2>
+            <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 justify-center items-center mb-10'>
+                {howitworks.map((service) => (
+                    <div
+                        key={service.id}
+                        className='flex flex-col items-center gap-6'
+                    >
+                        <img
+                            src={service.image}
+                            alt={service.title}
+                            className='w-50 h-56 object-cover'
+                        />
+                        <h4 className='text-zinc-900 text-2xl font-medium leading-10 tracking-tight'>
+                            {service.title}
+                        </h4>
+                        <p className='text-zinc-500 text-xl font-normal leading-8 tracking-tight'>
+                            {service.description}
+                        </p>
+                        <a
+                            href={service.link}
+                            className="flex items-center text-zinc-900 text-[18px] font-medium font-['Rubik']"
+                        >
+                            {service.link} <AiOutlineRight className='ml-2' />
+                        </a>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default HowitWorks;

src/pages/index.jsx

@@ -3,6 +3,8 @@ import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import * as React from "react";
 
+import HeroSection from "@/components/HomePage/HeroSection";
+import HowitWorks from "@/Components/homepage/HowitWorks";
 import Layout from "@/layout/Layout";
 
 export default function HomePage() {
@@ -19,6 +21,8 @@ export default function HomePage() {
                     العربية
                 </Link>
             </div>
+            <HeroSection />
+            <HowitWorks />
         </Layout>
     );
 }

src/styles/globals.css

@@ -0,0 +1,3 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";