Merge pull request #100 from AJ-Kulundu/about-section

antosan · web-flow · commit 16107fbe0fe0 · 2022-10-22T14:56:19.000+03:00
diff --git a/src/components/about-us/about-us.tsx b/src/components/about-us/about-us.tsx
@@ -0,0 +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>
+  );
+}
diff --git a/src/pages/about/index.page.tsx b/src/pages/about/index.page.tsx
@@ -7,8 +7,8 @@ export default function AboutPage() {
       <Head>
         <title>Reactjs Developer Community in Kenya - About</title>
       </Head>
-      <main className="flex justify-center items-center min-h-screen">
-        <h1 className="text-white">About page will be here</h1>
+      <main className="flex justify-center items-center min-h-screen bg-white">
+        About Page here
       </main>
     </>
   );
diff --git a/src/pages/index.page.tsx b/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>
