Add: location section

app/(main)/page.tsx

@@ -2,6 +2,7 @@ import Faqs from "../components/faqs";
 import OpenSourceProducts from "../components/open-source-products";
 import CaseStudies from "../components/case-studies";
 import Services from "../components/services";
+import Location from "../components/location";
 
 export default function Home() {
   return (
@@ -10,6 +11,7 @@ export default function Home() {
       <CaseStudies />
       <OpenSourceProducts />
       <Faqs />
+      <Location />
     </>
   );
 }

app/components/case-studies.tsx

@@ -8,8 +8,9 @@ import GridItemsContainer, {
 export default function CaseStudies() {
   return (
     <>
-      <GridItemsContainer id="case-studies">
+      <GridItemsContainer className="bg-[#F6F8F9]" id="case-studies">
         <GridItemsTitle
+          className="bg-[#F6F8F9]"
           title="Case Studies"
           description="Discover how we successfully transform challenges into opportunities
         with real-world solutions that drive lasting impact and business

app/components/faqs.tsx

@@ -11,7 +11,7 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card";
 export default function Faqs() {
   return (
     <section id="faqs" className="bg-white scroll-mt-20">
-      <div className="mx-auto flex py-5 md:py-8 px-8 md:px-20 flex-wrap justify-center items-center">
+      <div className="mx-auto flex py-5 md:py-8 px-4 md:px-20 flex-wrap justify-center items-center">
         <div className="w-full">
           <GridItemsTitle
             title="Frequently asked questions"
@@ -28,7 +28,7 @@ export default function Faqs() {
               <AccordionItem key={i} value={`faq-${i}`} asChild>
                 <Card className="bg-white border border-gray-200 shadow-sm transition-all duration-300 w-full">
                   <CardHeader className="py-2 px-4">
-                    <AccordionTrigger className="text-left text-xl font-medium text-[#020F15] w-full no-underline hover:no-underline focus:no-underline">
+                    <AccordionTrigger className="flex items-center justify-between gap-2 text-left text-xl font-medium text-[#020F15] w-full no-underline hover:no-underline focus:no-underline">
                       {item.question}
                     </AccordionTrigger>
                   </CardHeader>

app/components/footer.tsx

@@ -7,7 +7,7 @@ export default function Footer() {
     <footer className="relative text-white px-4 py-10 md:py-14 md:px-20 overflow-hidden">
       <div className="absolute inset-0 z-0">
         <Image
-          src="/swatch.svg"
+          src="/images/swatch.svg"
           alt="Footer background"
           layout="fill"
           objectFit="cover"
@@ -24,7 +24,7 @@ export default function Footer() {
       </div>
 
       <div className="relative z-20 container mx-auto px-4">
-        <div className="flex flex-col items-center justify-center space-y-6">
+        <div className="flex flex-col md:items-center space-y-6">
           <div className="flex items-center">
             <a href="/">
               <Image
@@ -38,7 +38,7 @@ export default function Footer() {
             </a>
           </div>
 
-          <p className="text-left md:text-center text-[#C7CDCD] max-w-md text-sm">
+          <p className="text-[#C7CDCD] max-w-md text-sm">
             Accelerating Business Growth with Cutting-Edge Technology Solutions
           </p>
 

app/components/grid-items.tsx

@@ -13,8 +13,10 @@ import { cn } from "@/lib/utils";
 import Image from "next/image";
 import Link from "next/link";
 import { Children, isValidElement, useEffect, useRef, useState } from "react";
+import { GitFork, Star } from "lucide-react";
 
 type GridItemsTitleProps = {
+  className?: string;
   title: string;
   description?: string;
   layout?: "horizontal" | "vertical";
@@ -24,10 +26,13 @@ type GridItemsTitleProps = {
 export function GridItemsTitle({
   title,
   description,
+  className = "",
   layout = "horizontal",
   descriptionStyle,
 }: GridItemsTitleProps) {
   const isHorizontal = layout === "horizontal";
+  const hasBgClass = /\bbg-/.test(className);
+  const finalClass = cn("scroll-mt-20", !hasBgClass && "bg-white", className);
 
   if (!description) {
     return (
@@ -40,7 +45,8 @@ export function GridItemsTitle({
   return (
     <div
       className={cn(
-        "w-full pt-4 pb-7 bg-white",
+        finalClass,
+        "w-full pt-4 pb-7",
         isHorizontal
           ? "flex flex-wrap justify-between gap-4"
           : "flex flex-col md:items-center md:text-center"
@@ -191,7 +197,7 @@ export function GridItems({
               )}
             </CardHeader>
 
-            <CardContent className="flex-1 -mt-3 flex flex-col gap-4">
+            <CardContent className="flex flex-col justify-between flex-1 gap-4 -mt-3">
               <div>
                 <CardDescription
                   ref={(el) => {
@@ -217,32 +223,28 @@ export function GridItems({
                 )}
               </div>
               {url && (
-                <div className="flex justify-center gap-4 flex-wrap">
-                  <span className="mx-2">
-                    <a
-                      className="github-button"
-                      href={url}
-                      data-icon="octicon-star"
-                      data-size="large"
-                      data-show-count="true"
-                      aria-label="Star hyperjumptech/monika on GitHub"
-                    >
-                      Star
-                    </a>
-                  </span>
+                <div className="flex flex-row justify-between gap-4 space-x-4">
+                  {/* Star Button */}
+                  <a
+                    href={url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex w-full text-hyperjump-blue font-semibold items-center gap-2 rounded-md border border-[#D1D5DB] px-auto py-3 justify-center text-sm shadow-sm transition hover:bg-gray-50"
+                  >
+                    <Star className="h-4 w-4 " />
+                    <span>Star</span>
+                  </a>
 
-                  <span className="mx-2">
-                    <a
-                      className="github-button"
-                      href={`${url}/fork`}
-                      data-icon="octicon-repo-forked"
-                      data-size="large"
-                      data-show-count="true"
-                      aria-label="Fork hyperjumptech/monika on GitHub"
-                    >
-                      Fork
-                    </a>
-                  </span>
+                  {/* Fork Button */}
+                  <a
+                    href={`${url}/fork`}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex w-full text-hyperjump-blue font-semibold items-center gap-2 rounded-md border border-[#D1D5DB] px-auto py-3 justify-center text-sm shadow-sm transition hover:bg-gray-50"
+                  >
+                    <GitFork className="h-4 w-4 text-[#0056D2]" />
+                    <span>Fork</span>
+                  </a>
                 </div>
               )}
             </CardContent>
@@ -299,9 +301,11 @@ export const GridItemsMoreButton = ({
 
 export default function GridItemsContainer({
   children,
+  className = "",
   id,
 }: {
   children: React.ReactNode;
+  className?: string;
   id?: string;
 }) {
   const childrenArray = Children.toArray(children);
@@ -322,8 +326,11 @@ export default function GridItemsContainer({
     (child) => child !== title && child !== body && child !== more
   );
 
+  const hasBgClass = /\bbg-/.test(className);
+  const finalClass = cn("scroll-mt-20", !hasBgClass && "bg-white", className);
+
   return (
-    <section id={id} className="bg-white scroll-mt-20">
+    <section id={id} className={finalClass}>
       <div className="mx-auto flex py-5 md:py-8 px-4 md:px-20 flex-wrap justify-center items-center">
         {title}
         <div>{body || others}</div>

app/components/location.tsx

@@ -0,0 +1,63 @@
+import data from "@/data.json";
+import GridItemsContainer, {
+  GridItemsTitle,
+} from "@/app/components/grid-items";
+import Image from "next/image";
+
+export default function Location() {
+  const { location } = data;
+
+  return (
+    <GridItemsContainer>
+      <GridItemsTitle title="Our Location" layout="vertical" />
+      <div className="my-6 w-full grid grid-cols-1 lg:grid-cols-4 rounded-md overflow-hidden shadow-lg">
+        <div className="relative text-white p-6 col-span-1 overflow-hidden">
+          <Image
+            src="/images/swatch.svg"
+            alt="Footer background"
+            layout="fill"
+            objectFit="cover"
+            quality={100}
+            className="absolute inset-0 z-0 pointer-events-none select-none"
+          />
+          <div
+            className="absolute inset-0 z-10"
+            style={{
+              background:
+                "linear-gradient(134.7deg, #5954DA 3.43%, #0B0B0D 48.93%)",
+            }}
+          />
+          <div className="relative z-20">
+            <h2 className="text-lg font-bold mb-4">{location.title}</h2>
+            <div className="text-sm leading-relaxed mb-2">
+              {location.address.map((line, index) => (
+                <p key={index}>{line}</p>
+              ))}
+            </div>
+            <p className="text-sm mb-2 mt-4">Email: {location.email}</p>
+            <p className="text-sm mb-4">D&B D-U-N-S: {location.duns}</p>
+            <a
+              href={location.mapsUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-block bg-transparent text-white text-sm font-medium px-4 py-2 rounded-md border-white border hover:border-gray-500 transition"
+            >
+              Open in Google Maps
+            </a>
+          </div>
+        </div>
+
+        <div className="col-span-1 lg:col-span-3">
+          <Image
+            src={location.image}
+            alt={location.imageAlt}
+            width={1600}
+            height={500}
+            className="w-full h-[300px] lg:h-[500px] object-cover object-right lg:object-center"
+            priority
+          />
+        </div>
+      </div>
+    </GridItemsContainer>
+  );
+}

app/components/open-source-products.tsx

@@ -18,8 +18,13 @@ export default function OpenSourceProducts() {
         <GridItems
           items={data.openSourceProducts}
           columns={{ base: 1, md: 2, lg: 3 }}
+          classNameCard="rounded-md"
+        />
+        <GridItemsMoreButton
+          text="View More"
+          variant="outline"
+          href="https://github.com/hyperjumptech"
         />
-        <GridItemsMoreButton text="View More" variant="outline" href="#" />
       </GridItemsContainer>
     </>
   );

app/components/services.tsx

@@ -18,6 +18,7 @@ export default function Services() {
         <GridItems
           items={data.services}
           columns={{ base: 1, sm: 2, md: 3, lg: 4 }}
+          classNameCard="rounded-md"
         />
         <GridItemsMoreButton
           text="Schedule Consultation"

data.json

@@ -5,6 +5,19 @@
   "description": "Open source first. Cloud native. DevOps excellence.",
   "copyright": "Copyright © 2025 Hyperjump. All rights reserved.",
   "github": "https://github.com/hyperjumptech",
+  "location": {
+    "title": "D.Lab Building (6th floor)",
+    "address": [
+      "Jl. Riau No. 1, Gondangdia, Menteng,",
+      "Jakarta Pusat - 10350",
+      "Indonesia"
+    ],
+    "email": "[email protected]",
+    "duns": "65-975-4901",
+    "mapsUrl": "https://maps.google.com/?q=Jl. Riau No. 1, Menteng, Jakarta",
+    "image": "/images/location-2.webp",
+    "imageAlt": "D.Lab Location"
+  },
   "navLinks": [
     { "label": "Services", "href": "#services", "type": "link" },
     { "label": "Case Studies", "href": "#case-studies", "type": "link" },