feat: collaboration section, gradient light header, hide horizontal scroll-bar

src/app/globals.css

@@ -11,3 +11,14 @@ body {
   color: var(--foreground-hex);
   background: var(--background-hex);
 }
+
+/* Hide scrollbar for Chrome, Safari and Opera */
+.scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.scrollbar-hidden {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}

src/app/page.tsx

@@ -4,6 +4,7 @@ import { ReactIDLogo } from '@/components/icons/reactjs-id';
 import { NetworkingSection } from '@/components/home/networking-section';
 import { heroPhotos } from './_data/hero-photos';
 import { fakerEvents } from './_data/faker-events';
+import { CollaborationSection } from '@/components/home/collaboration-section';
 
 export default function Home() {
   return (
@@ -22,6 +23,7 @@ export default function Home() {
       </HeroSection>
       <CarouselSection heroPhotos={heroPhotos} />
       <NetworkingSection events={fakerEvents} />
+      <CollaborationSection />
     </>
   );
 }

src/components/home/carousel-section.tsx

@@ -6,7 +6,7 @@ export interface CarouselSectionProps {
 
 export function CarouselSection({ heroPhotos }: CarouselSectionProps) {
   return (
-    <section className="w-full overflow-y-hidden overflow-x-scroll">
+    <section className="w-full overflow-y-hidden overflow-x-scroll scrollbar-hidden">
       <ul className="-mx-20 flex justify-between xs:gap-2 lg:gap-8">
         {heroPhotos.map((photo, index) => (
           <li key={photo.slug} className={`h-auto py-3 ${index % 2 === 0 ? '-rotate-3' : 'rotate-3'}`}>

src/components/home/collaboration-section.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image";
+
+export function CollaborationSection() {
+  return (
+    <section className="flex flex-col items-center justify-center gap-5 px-4 py-24 lg:px-10">
+      <div className="flex items-end gap-2">
+        <h2 className="text-center text-4xl font-bold text-white">
+          Kolaborasi
+        </h2>{" "}
+        <div className="flex items-end gap-1">
+          <span>dengan</span>
+          <Image
+            src="/logo.png"
+            alt="ReactJS Indonesia"
+            className="mb-1"
+            width={40}
+            height={40}
+          />
+        </div>
+      </div>
+      <p className="w-full text-center text-lg text-[#C7CBD1] sm:w-[1000px]">
+        Kami di reactjs.id menyelenggarakan event untuk developer React JS
+        indonesia berbagi wawasan dan pengetahuan mengenai ekosistem Reactjs.
+      </p>
+      <Image
+        src="/collaboration-map.png"
+        alt="Collaboration Section"
+        width={1000}
+        height={500}
+      />
+      <h3 className="text-[24px] font-medium text-[#B1C8E791]">
+        Member Telegram
+      </h3>
+      <h2 className="text-[40px] font-medium text-[#C7CBD1]">50.000</h2>
+    </section>
+  );
+}

src/components/home/hero-section.tsx

@@ -1,5 +1,10 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren } from "react";
 
 export function HeroSection({ children }: PropsWithChildren) {
-  return <section className="px-4 pt-24 pb-24 lg:px-10">{children}</section>;
+  return (
+    <section className="px-4 pb-24 pt-24 lg:px-10">
+      <div className="absolute -top-[130px] right-[180px] h-[500px] w-[500px] rounded-full bg-gradient-to-br from-[#1f1f24] to-[#2a2d35] opacity-40 blur-3xl"></div>
+      {children}
+    </section>
+  );
 }

src/components/layout/header.tsx

@@ -1,41 +1,25 @@
-import Link from 'next/link';
+import { headerUrls } from "@/lib/constants";
+import Link from "next/link";
 
 export function Header() {
   return (
-    <header className="flex h-[86px] items-center">
-      <div className="container mx-auto flex flex-row items-center gap-4">
+    <header className="flex h-[86px] items-center justify-center">
+      <div className="container mx-7 flex w-full flex-row items-center justify-between gap-4">
         <div className="flex-grow">
-          <h1 className="font-bold text-[32px] text-white leading-[40px]">
+          <h1 className="text-[32px] font-bold leading-[40px] text-white">
             <Link href="/">reactjs.id</Link>
           </h1>
         </div>
-        <nav>
-          <ul className="flex flex-row items-center gap-4">
-            <li>
-              <Link className="hover:text-white" href="/tentang-kami">
-                tentang kami
-              </Link>
-            </li>
-            <li>
-              <Link className="hover:text-white" href="/blog">
-                blog
-              </Link>
-            </li>
-            <li>
-              <Link className="hover:text-white" href="/acara">
-                acara
-              </Link>
-            </li>
-            <li>
-              <Link className="hover:text-white" href="/materi">
-                materi
-              </Link>
-            </li>
-            <li>
-              <Link className="hover:text-white" href="/merchandise">
-                merchandise
-              </Link>
-            </li>
+
+        <nav className="flex w-full justify-end">
+          <ul className="flex flex-row items-center gap-24">
+            {headerUrls.map(({ label, url }) => (
+              <li key={url}>
+                <Link className="font-medium hover:text-white" href={url}>
+                  {label}
+                </Link>
+              </li>
+            ))}
           </ul>
         </nav>
       </div>

src/lib/constants.ts

@@ -0,0 +1,24 @@
+const headerUrls = [
+  {
+    label: "tentang kami",
+    url: "/about",
+  },
+  {
+    label: "blog",
+    url: "/blog",
+  },
+  {
+    label: "acara",
+    url: "/acara",
+  },
+  {
+    label: "materi",
+    url: "/materi",
+  },
+  {
+    label: "merchandise",
+    url: "/merchandise",
+  },
+] as const;
+
+export {headerUrls};