From acf2f0dae56dab65fae2e5037840dc14c751ca8a Mon Sep 17 00:00:00 2001
From: Resi Respati <resir014@gmail.com>
Date: Thu, 25 Jul 2024 16:43:16 +0700
Subject: [PATCH] fix: make networking section header responsive (#11)

---
 src/components/home/networking-section.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/home/networking-section.tsx b/src/components/home/networking-section.tsx
index 79939fa..a3bdccc 100644
--- a/src/components/home/networking-section.tsx
+++ b/src/components/home/networking-section.tsx
@@ -12,8 +12,8 @@ export interface NetworkingSectionProps {
 export function NetworkingSection({ events }: NetworkingSectionProps) {
   return (
     <section className="flex flex-col gap-14 px-4 pt-24 pb-24 md:gap-16 lg:gap-20 lg:px-10">
-      <div className="container mx-auto flex flex-row items-center gap-4">
-        <div className="flex-grow space-y-4">
+      <div className="container relative mx-auto flex flex-row items-center gap-4 lg:h-[237px]">
+        <div className="w-full flex-grow space-y-4 lg:max-w-[50%]">
           <div className="flex flex-wrap items-end gap-2.5">
             <h2 className="font-bold font-white text-3xl text-white lg:text-4xl">Networking</h2>
             <p className="inline-flex flex-wrap items-end gap-2.5">
@@ -25,7 +25,13 @@ export function NetworkingSection({ events }: NetworkingSectionProps) {
             pengalaman.
           </p>
         </div>
-        <Image className="flex-shrink-0" alt="" width={692} height={237} src="/networking-header.png" />
+        <Image
+          className="-z-10 absolute top-0 right-0 hidden lg:block"
+          alt=""
+          width={692}
+          height={237}
+          src="/networking-header.png"
+        />
       </div>
       {events?.length && events.length > 0 ? (
         <div className="container mx-auto flex flex-col items-center gap-10 lg:gap-12">