Moving AboutUs component to main page and formatting files

Author: AJ-Kulundu

src/components/about-us/about-us.tsx

@@ -1,12 +1,23 @@
-import React from 'react';
-
-
-export default function AboutUs (){
-    return(
-        <section id="about-us" className='flex flex-col max-w-2xl justify-center items-center self-center space-y-4 px-4'>
-            <p className='text-3xl md:text-6xl tracking-wide md:font-light '>ABOUT US</p>
-            <p className='hidden md:inline-block text-4xl font-bold '>Empowering great talent</p>
-            <p className='sm:text-sm md:text-xl tracking-wide text-center space-y-4'>We bring together people who are passionate about React JS and <br className='hidden md:display'/>it&apos;s ecosystem. We are a community of full-stack developers, frontend developers and so much more</p>
-        </section>
-    )
-}
+import React from 'react';
+
+export default function AboutUs() {
+  return (
+    <section
+      id="about-us"
+      className="flex flex-col max-w-2xl justify-center items-center self-center space-y-4 px-4"
+    >
+      <p className="text-3xl md:text-6xl tracking-wide md:font-light ">
+        ABOUT US
+      </p>
+      <p className="hidden md:inline-block text-4xl font-bold ">
+        Empowering great talent
+      </p>
+      <p className="sm:text-sm md:text-xl tracking-wide text-center space-y-4">
+        We bring together people who are passionate about React JS and{' '}
+        <br className="hidden md:display" />
+        it&apos;s ecosystem. We are a community of full-stack developers,
+        frontend developers and so much more
+      </p>
+    </section>
+  );
+}

src/pages/about/index.page.tsx

@@ -1,6 +1,5 @@
 import Head from 'next/head';
 import React from 'react';
-import AboutUs from "../../components/about-us/about-us";
 
 export default function AboutPage() {
   return (
@@ -9,7 +8,7 @@ export default function AboutPage() {
         <title>Reactjs Developer Community in Kenya - About</title>
       </Head>
       <main className="flex justify-center items-center min-h-screen bg-white">
-        <AboutUs/>
+        About Page here
       </main>
     </>
   );

src/pages/index.page.tsx

@@ -2,6 +2,7 @@ import Head from 'next/head';
 import Image from 'next/image';
 import logo from '../../public/reactdevske.svg';
 import Events from '../components/Events/Events';
+import AboutUs from '../components/about-us/about-us';
 
 export default function Home() {
   return (
@@ -49,6 +50,9 @@ export default function Home() {
             </button>
           </a>
         </div>
+        <div className="flex flex-col py-12 bg-white">
+          <AboutUs />
+        </div>
         <Events />
       </main>
     </div>