Consistent spacing between sections (#22)

The spacing was not consistent between sections previously. Fixed that
cncgnd · Apr 19, 2024 · f3e9d64 · f3e9d64
2 parents bd049de + fee756f
commit f3e9d64
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 42 deletions.
diff --git a/src/Sections/AboutUs.tsx b/src/Sections/AboutUs.tsx
@@ -1,34 +1,15 @@
 export const AboutUs = () => {
   return (
-    <div
-      id="aboutus"
-      className="flex flex-col items-center justify-center bg-black w-screen min-h-screen"
-    >
-      <div className="mt-20 md:mt-0">
-        <h2 className="text-white text-3xl font-bold md:mb-8 ">About Us</h2>
+    <div id="aboutus" className="bg-black flex items-center justify-center w-screen">
+      <div className="max-w-4xl mt-20 px-4 lg:px-8 md:mt-30">
+        <h2 className="text-white text-3xl font-bold mb-8 text-center lg:mb-4">About Us</h2> {/* Adjusted margin for larger screens */}
         <div className="p-1 rounded-lg shadow-lg"></div>
-      </div>
-      <div className="flex flex-col items-center mt-8 px-4 lg:px-8">
-        <div className="flex flex-wrap items-center justify-between gap-x-12 gap-y-8 w-full lg:flex-nowrap">
-          <div className="flex-1">
-            <h2 className="text-2xl mb-4 text-center text-neutral-200">
-              Welcome to the Cloud Native Community Group - New Delhi. We are
-              the New Delhi chapter of the Cloud Native Community Groups (CNCG),
-              operating under the{" "}
-              <span className="text-[#0086FF]">
-                Cloud Native Computing Foundation
-              </span>{" "}
-              (CNCF). Our focus is on knowledge sharing and exploring the
-              potential of cloud native technologies. Through our meetups,
-              educational sessions, and practical activities, we aim to empower
-              individuals in navigating the cloud native ecosystem. We are
-              dedicated to hosting at least one meetup every month and take
-              pride in being recognized as the leading CNCG community worldwide.
-              We prioritize creating an inclusive learning environment, adhering
-              to the CNCF Code of Conduct to ensure everyone feels welcome and
-              respected.
-            </h2>
-          </div>
+        <div className="mt-8">
+          <h2 className="text-2xl mb-4 text-neutral-200">
+            Welcome to the Cloud Native Community Group - New Delhi. We are the New Delhi chapter of the Cloud Native Community Groups (CNCG), operating under the{" "}
+            <span className="text-[#0086FF]">Cloud Native Computing Foundation</span>{" "}
+            (CNCF). Our focus is on knowledge sharing and exploring the potential of cloud native technologies. Through our meetups, educational sessions, and practical activities, we aim to empower individuals in navigating the cloud native ecosystem. We are dedicated to hosting at least one meetup every month and take pride in being recognized as the leading CNCG community worldwide. We prioritize creating an inclusive learning environment, adhering to the CNCF Code of Conduct to ensure everyone feels welcome and respected.
+          </h2>
         </div>
       </div>
     </div>

diff --git a/src/Sections/Developers.tsx b/src/Sections/Developers.tsx
@@ -53,8 +53,8 @@ export const Developers = () => {
     },
   ];
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-screen">
-      <div>
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 lg:mt-20">
         <h2 className="text-white text-3xl font-bold text-center mb-20">
           Developers
         </h2>
@@ -68,7 +68,7 @@ export const Developers = () => {
             image="/"
           ></InfiniteMovingCards>
         </div>
-        <div className="flex items-center justify-center mt-10 md:mt-20">
+        <div className="flex items-center justify-center mt-10 mb-10 md:mt-20">
           <Link to="https://github.com/cncgnd">
             <button className="bg-pink rounded-xl p-4 text-white font-bold transition duration-300 ease-in-out hover:bg-opacity-80 hover:text-opacity-80">
               Want to Contribute ?

diff --git a/src/Sections/Events.tsx b/src/Sections/Events.tsx
@@ -2,8 +2,8 @@ import { HoverEffect } from "@/components/ui/card-hover-effect";
 
 export const Events = () => {
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
-      <div>
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 md:mt-30">
         <h2
           className="text-white text-3xl font-bold mb-4 text-center mt-2"
           id="events"

diff --git a/src/Sections/Home.tsx b/src/Sections/Home.tsx
@@ -16,7 +16,7 @@ import { Link } from "react-router-dom";
 
 export const Home = () => {
   return (
-    <div className="h-full w-screen flex flex-col">
+    <div className="h-full w-screen flex flex-col bg-black">
       <Header></Header>
 
       <div

diff --git a/src/Sections/Sponsors.tsx b/src/Sections/Sponsors.tsx
@@ -5,7 +5,7 @@ import tata from "../images/tata 1 mg.png";
 import epam from "../images/epam.png";
 export const Sponsors = () => {
   return (
-    <div className="flex flex-col items-center justify-center bg-black w-screen h-full">
+    <div className="flex flex-col items-center justify-center bg-black w-screen">
       <div className="">
         <h2
           className="text-white text-3xl font-bold mb-20 text-center mt-[150px]"

diff --git a/src/Sections/Stats.tsx b/src/Sections/Stats.tsx
@@ -43,10 +43,10 @@ export const Stats = () => {
 
   return (
     <div
-      className="flex flex-col items-center justify-center bg-black w-screen h-full"
+      className="flex flex-col items-center justify-center bg-black w-screen"
       ref={ref}
     >
-      <h2 className="text-white text-3xl font-bold mb-16 mr-5 mt-[150px]">
+      <h2 className="text-white text-3xl font-bold mb-16 mr-5 mt-20 lg:mt-30">
         Stats
       </h2>
       <div className="flex flex-row justify-between w-full max-w-[1200px] px-5 md:px-20 py-5">

diff --git a/src/Sections/Talks.tsx b/src/Sections/Talks.tsx
@@ -52,13 +52,14 @@ const Talks = () => {
   return (
     <div
       id="talks"
-      className="flex flex-col items-center justify-center bg-black overflow-hidden"
+      className="flex flex-col items-center justify-center bg-black w-screen"
     >
-      <div className="mt-20 mb-20">
-        <h2 className="text-white text-3xl font-bold gap-2">
+      <div>
+        <h2 className="text-white text-3xl font-bold pt-30 pb-10 lg:mt-40 lg:mb-10">
           Previous Talks
         </h2>
       </div>
+
       <div className="relative w-full max-w-5xl overflow-hidden">
         <div className="absolute top-1/2 transform -translate-y-1/2 left-0 z-10">
           <button

diff --git a/src/Sections/Team.tsx b/src/Sections/Team.tsx
@@ -39,8 +39,8 @@ export const Team = () => {
     },
   ];
   return (
-    <div id="team" className="flex flex-col items-center justify-center bg-black w-screen h-screen">
-      <div>
+    <div id="team" className="flex flex-col items-center justify-center bg-black w-screen">
+      <div className="mt-20 lg:mt-20">
         <h2 className="text-white text-3xl font-bold text-center mb-20">
           Our Team
         </h2>