fix: make networking section header responsive (#11)

reactjs-id · Jul 25, 2024 · acf2f0d · acf2f0d
1 parent 1cb6b7a
commit acf2f0d
Showing 1 changed file with 9 additions and 3 deletions.
diff --git 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">