homepage header

components/HomePageNewTopSection.js

@@ -0,0 +1,32 @@
+import React from "react";
+
+const HomepageNewTopSection = () => {
+  return (
+    <>
+      <section className="tw-flex tw-flex-row  homepage__hero tw-w-full tw-h-full lg:tw-flex-col-reverse">
+          <div className="tw-flex tw-flex-col tw-px-10 tw-pt-64 lg:tw-pt-2">
+            {/* content sections */}
+            <div className="tw-w-1/3 tw-mt-4">
+                <p className="tw-text-4xl tw-font-bold">Minority Programmers Associations</p>
+            </div>
+            <div className="tw-mt-4 tw-font-medium">
+                <p className="tw-text-xl lg:tw-text-sm">We are an International network of developers unifying together to build socially impactful projects and spread STEM education to marginalized communities.</p>
+            </div>
+            <div className="tw-mt-4">
+            <a href="/join">
+            <button class="tw-bg-blue-600 hover:tw-bg-blue-700 tw-text-white tw-font-bold tw-py-2 tw-px-4 tw-rounded">
+                JOIN NOW
+            </button>
+            </a>
+            </div>
+          </div>
+          <div className="tw-w-11/12 tw-p-10 lg:tw-p-2 lg:tw-pt-10">
+              {/* image sections */}
+              <img src="/assets/images/meta.png" alt="" className="tw-w-full tw-h-full" />
+          </div>
+      </section>
+    </>
+  );
+};
+
+export default HomepageNewTopSection;

pages/index.js

@@ -2,7 +2,7 @@ import React, { useState, useRef, useEffect } from "react";
 import Layout from "../components/Layout";
 import HomepageNav from "../components/HomepageNav";
 import Footer from "../components/Footer";
-import HomepageHeader from "../components/HomepageHeader";
+import HomePageNewTopSection from "../components/HomePageNewTopSection";
 import HomepageAbout from "../components/HomepageAbout";
 import HomepageApp from "../components/HomepageApp";
 import HomepageCore from "../components/HomepageCore";
@@ -63,7 +63,7 @@ const HomepageFour = () => {
                 handleClick={handleClick}
               />
               {hide == false && <ComingSoon closeClick={handleClick} />}
-              <HomepageHeader />
+              <HomePageNewTopSection />
               <HomepageAbout />
               {/* <HomepageBuyMinority />*/}
               <HomepageApp />

public/assets/css/style.css

@@ -7614,7 +7614,7 @@ html {
 /* Hero */
 .homepage__hero {
   position: relative;
-  padding: 120px 0;
+  padding-top: 60px;
   font-family: 'Red Hat Display', sans-serif;
   color: #fff;
   background: linear-gradient(90deg, #ff00b8 0%, #ff655b 50.8%, #ffc700 100%);
@@ -8359,6 +8359,9 @@ html {
 }
 
 @media screen and (max-width: 768px) {
+  .homepage__hero{
+    padding-top: 5px;
+  }
   .popup_bg-core {
     max-width: 36em;
   }
@@ -8369,6 +8372,9 @@ html {
 }
 
 @media screen and (max-width: 480px) {
+  .homepage__hero{
+    padding-top: 5px;
+  }
   .popup_bg-core {
     padding: 1em;
     padding-top: 3em;
@@ -8518,6 +8524,9 @@ html {
 }
 
 @media only screen and (max-width: 375px) {
+  .homepage__hero{
+    padding-top: 5px;
+  }
   .card-body-custom p,
   .card-body-app p {
     font-size: 1rem;