redesign-home

Author: Weile-Zheng

components/hero.jsx

@@ -2,16 +2,20 @@ import Wave from "@/components/wave";
 
 export default function Hero({ children, title }) {
   return (
-    <div className="md:text-left text-center hero">
-      <div className="container mx-auto px-2">
-        {title ? (
-          <h1 className="mb-2 md:mb-5 lg:text-5xl text-4xl font-bold text-center">
-            {title}
-          </h1>
-        ) : null}
-        {children}
+    <div>
+      <div className="md:text-left text-center hero">
+        <div className="container mx-auto px-2">
+          {title ? (
+            <h1 className="mb-2 md:mb-5 lg:text-5xl text-4xl font-bold text-center">
+              {title}
+            </h1>
+          ) : null}
+          {children}
+        </div>
+        <div className="absolute bottom-0 w-full">
+          <Wave />
+        </div>
       </div>
-      <Wave></Wave>
     </div>
   );
 }

pages/index.jsx

@@ -6,8 +6,6 @@ import Layout from "@/components/layout";
 import SponsorSection from "@/components/sponsorSection";
 import CompanySection from "@/components/companySection";
 import Timeline from "@/components/timeline";
-import Wave from "@/components/wave";
-import Wave180 from "@/components/wave180";
 import CommunityImages from "@/components/communityImages";
 import loadStaticData from "@/shared/static";
 import Image from "next/image";

styles/globals.css

@@ -17,6 +17,10 @@
       #3e9644 303.75deg,
       #896ae4 387.03deg
     );
+  padding-top: 10%;
+  padding-bottom: 20%;
+  margin-bottom: 6%;
+  height: 90vh;
 }
 
 .gradient-text {