Merge pull request #23 from LombokDev/refactor/home

refactor: hero section layout and content

Author: ha-yi

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "tailwindCSS.experimental.configFile": "assets/css/style.css"
+}

Gemfile.lock

@@ -18,6 +18,7 @@ GEM
     ffi (1.17.2-arm-linux-gnu)
     ffi (1.17.2-arm-linux-musl)
     ffi (1.17.2-arm64-darwin)
+    ffi (1.17.2-x64-mingw-ucrt)
     ffi (1.17.2-x86-linux-gnu)
     ffi (1.17.2-x86-linux-musl)
     ffi (1.17.2-x86_64-darwin)
@@ -36,6 +37,9 @@ GEM
     google-protobuf (4.32.0-arm64-darwin)
       bigdecimal
       rake (>= 13)
+    google-protobuf (4.32.0-x64-mingw-ucrt)
+      bigdecimal
+      rake (>= 13)
     google-protobuf (4.32.0-x86-linux-gnu)
       bigdecimal
       rake (>= 13)
@@ -75,6 +79,7 @@ GEM
       webrick (~> 1.7)
     jekyll-feed (0.15.1)
       jekyll (>= 3.7, < 5.0)
+    jekyll-postcss-v2 (1.0.2)
     jekyll-sass-converter (3.1.0)
       sass-embedded (~> 1.75)
     jekyll-seo-tag (2.8.0)
@@ -130,6 +135,8 @@ GEM
       google-protobuf (~> 4.31)
     sass-embedded (1.91.0-riscv64-linux-musl)
       google-protobuf (~> 4.31)
+    sass-embedded (1.91.0-x64-mingw-ucrt)
+      google-protobuf (~> 4.31)
     sass-embedded (1.91.0-x86_64-darwin)
       google-protobuf (~> 4.31)
     sass-embedded (1.91.0-x86_64-linux-android)
@@ -140,7 +147,12 @@ GEM
       google-protobuf (~> 4.31)
     terminal-table (3.0.2)
       unicode-display_width (>= 1.1.1, < 3)
+    tzinfo (2.0.6)
+      concurrent-ruby (~> 1.0)
+    tzinfo-data (1.2025.2)
+      tzinfo (>= 1.0.0)
     unicode-display_width (2.6.0)
+    wdm (0.2.0)
     webrick (1.9.1)
 
 PLATFORMS
@@ -156,6 +168,7 @@ PLATFORMS
   riscv64-linux-android
   riscv64-linux-gnu
   riscv64-linux-musl
+  x64-mingw-ucrt
   x86-linux-gnu
   x86-linux-musl
   x86_64-darwin
@@ -167,6 +180,7 @@ DEPENDENCIES
   http_parser.rb (~> 0.6.0)
   jekyll (~> 4.4.1)
   jekyll-feed (~> 0.12)
+  jekyll-postcss-v2
   jekyll-sitemap
   minima (~> 2.5)
   tzinfo (>= 1, < 3)

Makefile

@@ -0,0 +1,2 @@
+run:
+	@bundle exec jekyll serve

_data/carousel_partners.yml

@@ -0,0 +1,26 @@
+# Carousel Configuration
+images:
+  - 'assets/lombokdev/partners/hayati-io.webp'
+  - 'assets/lombokdev/partners/linov.webp'
+  - 'assets/lombokdev/partners/lombok-ai.webp'
+  - 'assets/lombokdev/partners/lombok-android.webp'
+  - 'assets/lombokdev/partners/lombok-flutter.webp'
+  - 'assets/lombokdev/partners/lombok-js.webp'
+  - 'assets/lombokdev/partners/lombok-kotlin.webp'
+  - 'assets/lombokdev/partners/lombok-py.webp'
+  - 'assets/lombokdev/partners/loteng-dev.webp'
+  - 'assets/lombokdev/partners/lotim-dev.webp'
+  - 'assets/lombokdev/partners/petani-kode.webp'
+  - 'assets/lombokdev/partners/uxid-lombok.webp'
+
+# Optional captions for each image
+# captions:
+
+# Carousel settings
+settings:
+  autoplay: true
+  interval: 4000 # milliseconds
+  show_dots: true
+  show_arrows: true
+  show_counter: true
+  lazy_loading: true

_includes/carousel.html

@@ -1,40 +1,75 @@
-<section id="about" class="pt-24 pb-16 px-6">
-  <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8">
-    
-    <!-- Left content (3/4 width on desktop) -->
-    <div class="md:col-span-3">
-      <div class="mb-12">
-        <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-4 leading-tight">
-          Lombok Dev
-        </h1>
-        <p class="text-xl text-gray-600 mb-6">
-          Local Software Developer Community in Indonesia
-        </p>
-        <p class="text-lg text-gray-700 max-width-none leading-relaxed">
-          Welcome to Lombok Dev - your gateway to the vibrant world of software development in Lombok, Indonesia.
-        </p>
-      </div>
-
-      <div class="prose prose-lg max-width-none">
-        <p class="text-gray-700 leading-relaxed">
-          Lombok Dev is a community-driven, regular meetup in Lombok—specifically in cities like Mataram and Ampenan—that brings together anyone interested in IT, open source, software development, system/network administration, and related tech fields. It aims to provide information, inspiration, and hands-on knowledge while fostering a collaborative ecosystem among tech enthusiasts on the island.
-        </p>
-      </div>
+<section id="about" class="h-screen flex justify-center items-center px-6 mb-28 lg:mb-0">
+  <div class="max-w-3xl mt-28 lg:mt-0 mx-auto flex flex-col gap-6">
+
+    <div class="w-full flex justify-center">
+      <a href="/"
+        class="flex items-center font-semibold gap-3 p-1 px-3 rounded-2xl bg-white border border-slate-400/10 shadow-lg text-sm">
+        <div class="relative flex h-2 w-2"><span
+            class="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span><span
+            class="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span></div>
+
+        <span>Lombok Dev </span>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="lucide lucide-zap h-3 w-3 text-orange-500" aria-hidden="true">
+          <path
+            d="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z">
+          </path>
+        </svg>
+        <span>Meetup#13</span>
+
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+          stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+          class="lucide lucide-arrow-right h-3 w-3" aria-hidden="true">
+          <path d="M5 12h14"></path>
+          <path d="m12 5 7 7-7 7"></path>
+        </svg>
+      </a>
     </div>
 
-    <!-- Right card (1/4 width on desktop) -->
-    <div class="md:col-span-1 mt-16">
-      <div class="bg-black/70 text-white shadow-lg rounded-2xl p-6 border border-gray-700">
-        <h2 class="text-2xl font-semibold mb-4">External Links</h2>
-        <ul class="space-y-2">
-          <li><span class="font-medium">Telegram:</span> <a href="https://t.me/lombokdev" class="text-blue-400 hover:underline">Join here</a></li>
-          <li><span class="font-medium">Members:</span> 500+</li>
-          <li><span class="font-medium">Initiated:</span> 2017</li>
-
-          <li><span class="font-medium">LinkedIn:</span> <a href="https://www.linkedin.com/company/lombok-dev/" class="text-blue-400 hover:underline">Follow Us Here</a></li>
-        </ul>
-      </div>
+    <h1 class="text-4xl md:text-6xl text-center font-bold transition-colors duration-300 text-gray-900">
+      Lombok Dev</h1>
+
+    <h2 class="text-center text-xl font-bold tracking-tight mb-2"><span
+        class="bg-gradient-to-r bg-[200%_auto] bg-clip-text leading-tight text-transparent transition-all duration-300 from-neutral-900 via-slate-500 to-neutral-500">Local
+        Software Developer Community in Indonesia</span></h2>
+
+    <div class="prose prose-lg max-width-none">
+      <p
+        class="text-sm sm:text-lg mb-6 sm:mb-8 transition-colors duration-300 px-4 sm:px-0 text-gray-600 leading-relaxed text-center">
+        Lombok Dev is a community-driven, regular meetup in Lombok—specifically in cities like Mataram and Ampenan—that
+        brings together anyone interested in IT, open source, software development, system/network administration, and
+        related tech fields. It aims to provide information, inspiration, and hands-on knowledge while fostering a
+        collaborative ecosystem among tech enthusiasts on the island.
+      </p>
     </div>
 
+    <div class="flex justify-center gap-4">
+      <a href="https://t.me/lombokdev"
+        class="rounded-xl border backdrop-blur-md border-blue-500 flex items-center justify-center p-2 bg-blue-500/10 hover:bg-blue-500/20">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#007aff"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" />
+        </svg>
+      </a>
+      <a href="https://t.me/lombokdev"
+        class="rounded-xl border backdrop-blur-md border-pink-500 flex items-center justify-center p-2 bg-pink-500/10 hover:bg-pink-500/20">
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ff5c7a"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path d="M4 4m0 4a4 4 0 0 1 4 -4h8a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-8a4 4 0 0 1 -4 -4z" />
+          <path d="M12 12m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
+          <path d="M16.5 7.5l0 .01" />
+        </svg>
+      </a>
+      <a href="https://t.me/lombokdev"
+        class="rounded-xl border backdrop-blur-md border-slate-500 flex items-center justify-center p-2 bg-slate-500/10 hover:bg-slate-500/20"><svg
+          xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#383b47"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
+          <path
+            d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
+        </svg>
+
+      </a>
+    </div>
   </div>
-</section>
+</section>

_includes/events.html

@@ -0,0 +1,83 @@
+<div class="overflow-hidden relative max-w-6xl mx-auto space-y-6 my-52">
+    <div class="absolute top-0 -left-10 pointer-events-none h-full w-20 bg-gradient-to-r from-white via-white to-transparent z-40"
+        aria-hidden="true"></div>
+    <div class="absolute top-0 -right-10 pointer-events-none h-full w-20 bg-gradient-to-l from-white via-white to-transparent z-40"
+        aria-hidden="true"></div>
+
+    <!-- Line 1 (arah kiri) -->
+    <div class="flex animate-marquee whitespace-nowrap">
+        {% assign carousel_images = include.images | default: site.data.carousel_partners.images %}
+        {% for image in carousel_images %}
+        <div class="flex-shrink-0 w-32 mx-4">
+            <div class="aspect-square border border-gray-100 flex items-center justify-center">
+                <img src="{{ '' | append: image | relative_url }}" alt="Carousel partner logo {{ forloop.index }}"
+                    class="w-full h-full object-contain" loading="lazy"
+                    onerror='this.parentElement.innerHTML=&apos;<div class="text-gray-400 text-center"><svg class="w-16 h-16 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"></path></svg><p>{{ image }}</p></div>&apos;' />
+            </div>
+        </div>
+        {% endfor %}
+
+        <!-- Duplicate biar looping mulus -->
+        {% for image in carousel_images %}
+        <div class="flex-shrink-0 w-32 mx-4">
+            <div class="aspect-square border border-gray-100 flex items-center justify-center">
+                <img src="{{ '' | append: image | relative_url }}"
+                    alt="Carousel partner logo duplicate {{ forloop.index }}" class="w-full h-full object-contain"
+                    loading="lazy" />
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+
+    <!-- Line 2 (arah kanan) -->
+    <div class="flex animate-marquee-reverse whitespace-nowrap">
+        {% for image in carousel_images %}
+        <div class="flex-shrink-0 w-32 mx-4">
+            <div class="aspect-square border border-gray-100 flex items-center justify-center">
+                <img src="{{ '' | append: image | relative_url }}" alt="Carousel partner logo {{ forloop.index }}"
+                    class="w-full h-full object-contain" loading="lazy" />
+            </div>
+        </div>
+        {% endfor %}
+
+        {% for image in carousel_images %}
+        <div class="flex-shrink-0 w-32 mx-4">
+            <div class="aspect-square border border-gray-100 flex items-center justify-center">
+                <img src="{{ '' | append: image | relative_url }}"
+                    alt="Carousel partner logo duplicate {{ forloop.index }}" class="w-full h-full object-contain"
+                    loading="lazy" />
+            </div>
+        </div>
+        {% endfor %}
+    </div>
+</div>
+
+<style>
+    @keyframes marquee {
+        0% {
+            transform: translateX(0);
+        }
+
+        100% {
+            transform: translateX(-100%);
+        }
+    }
+
+    @keyframes marquee-reverse {
+        0% {
+            transform: translateX(-100%);
+        }
+
+        100% {
+            transform: translateX(0);
+        }
+    }
+
+    .animate-marquee {
+        animation: marquee 20s linear infinite;
+    }
+
+    .animate-marquee-reverse {
+        animation: marquee-reverse 20s linear infinite;
+    }
+</style>