Feat: Implement team page

app/[lang]/(hyperjump)/components/nav.tsx

@@ -15,7 +15,8 @@ import {
   mainNavItems0Label,
   mainNavItems1Label,
   mainNavItems2Label,
-  mainNavItems3Label
+  mainNavItems3Label,
+  mainNavItems4Label
 } from "@/locales/.generated/server";
 import {
   type SupportedLanguage,
@@ -31,6 +32,7 @@ const SOLID_NAV_PATHS = [
   "/jobs",
   "/services",
   "/products",
+  "/team",
   ...data.jobs.map(({ id }) => `/jobs/${id}`)
 ];
 const SOLID_NAV_PATHS_WITH_LOCALE = supportedLanguages.reduce(
@@ -49,6 +51,7 @@ function menu(lang: SupportedLanguage) {
     },
     { label: mainNavItems2Label(lang), href: `/${lang}/products` },
     { label: mainNavItems1Label(lang), href: `/${lang}/case-studies` },
+    { label: mainNavItems4Label(lang), href: `/${lang}/team` },
     { label: mainNavItems3Label(lang), href: `/${lang}/#faqs` }
   ];
 }

app/[lang]/(hyperjump)/components/team-card.tsx

@@ -0,0 +1,79 @@
+import Image from "next/image";
+
+interface TeamCardProps {
+  variant?: "featured" | "compact";
+  name: string;
+  role: string;
+  image?: string;
+  description: string;
+  linkedIn?: string;
+}
+
+const FALLBACK_IMAGE = "/images/no-user-image.webp";
+
+const CARD_HEIGHT_FEATURED = 680;
+const CARD_HEIGHT_COMPACT = 640;
+
+export function TeamCard({
+  variant = "compact",
+  name,
+  role,
+  image,
+  description,
+  linkedIn
+}: TeamCardProps) {
+  const isFeatured = variant === "featured";
+  const imageSrc = image && image.trim() !== "" ? image : FALLBACK_IMAGE;
+
+  return (
+    <div>
+      <div
+        className={`flex flex-col rounded-xl bg-white shadow-sm transition-shadow duration-300 hover:shadow-lg ${isFeatured ? "h-auto md:h-[680px]" : "h-auto md:h-[640px]"} `}>
+        <div
+          className={`relative w-full overflow-hidden rounded-t-xl bg-gray-100 ${
+            isFeatured ? "h-[400px] md:h-[440px]" : "h-[400px] md:h-[320px]"
+          }`}>
+          <Image
+            src={`/images/teams/${imageSrc}`}
+            alt={name}
+            fill
+            sizes={
+              isFeatured
+                ? "(min-width: 768px) 50vw, 100vw"
+                : "(min-width: 1024px) 25vw, (min-width: 768px) 50vw, 100vw"
+            }
+            className="object-cover grayscale"
+          />
+        </div>
+
+        <div
+          className={`flex flex-1 flex-col justify-between ${
+            isFeatured ? "p-6" : "p-4"
+          }`}>
+          <div>
+            <h3 className="text-base font-semibold text-[#020F15]">{name}</h3>
+            <p className="text-sm text-[#73767E]">{role}</p>
+            <p className="mt-2 text-sm leading-relaxed text-[#73767E]">
+              {description}
+            </p>
+          </div>
+
+          {linkedIn && (
+            <a
+              href={linkedIn}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-4 inline-flex h-9 w-9 items-center justify-center rounded-full border border-[#73767E] text-[#73767E] transition-colors hover:border-[#a1cfff] hover:bg-[#a1cfff]">
+              <Image
+                src="/images/linkedIn.svg"
+                alt="LinkedIn"
+                width={16}
+                height={16}
+              />
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

app/[lang]/(hyperjump)/team/data.ts

@@ -0,0 +1,148 @@
+export function getTeams() {
+  return [
+    {
+      name: "Ari Awan",
+      role: "Co-founder & CEO",
+      image: "1763184214507.jpeg",
+      description:
+        "Jack-of-all-trade in technology startups. Experienced in software engineering (20+ years of hands-on web/mobile programming), product management, operation, fundraising, and marketing.",
+      linkedIn: "https://www.linkedin.com/in/ariawan/"
+    },
+    {
+      name: "Ariya Hidayat",
+      role: "Co-founder & CTO",
+      image: "1689492669383.jpeg",
+      description:
+        "Experienced technology leader operating at the intersection of enterprise products and open-source software, with deep hands-on experience across diverse technology stacks.",
+      linkedIn: "https://www.linkedin.com/in/ariyahidayat/"
+    },
+    {
+      name: "Satriyo Pranoto",
+      role: "Head of Product",
+      image: "1517052947097.jpeg",
+      description:
+        "Senior IT and project management professional with 20+ years of experience delivering enterprise and digital products across multiple industries.",
+      linkedIn: "https://www.linkedin.com/in/satriyo-pranoto-2b1935122/"
+    },
+    {
+      name: "Zulfahmi Andri",
+      role: "Principle Software Architect",
+      image: "1610507885667.jpeg",
+      description:
+        "Enterprise software professional with 20+ years of experience, specializing in API-driven systems, mobile applications, and modern cloud architectures.",
+      linkedIn: "https://www.linkedin.com/in/zulfahmi-andri/"
+    },
+    {
+      name: "Ferdi Ramdhon",
+      role: "Head Of Development",
+      image: "1517464706587.jpeg",
+      description:
+        "A full-stack specialist with 10,000+ hours of experience across Java, Python, Go, and React. Expertise spans Android development, SQL/NoSQL databases, and Agile SDLC, focused on delivering scalable software architectures and high-performance RESTful APIs.",
+      linkedIn: "https://id.linkedin.com/in/ferdirn"
+    },
+    {
+      name: "Nico Prananta",
+      role: "Principal Developer",
+      image: "1636610990869.jpeg",
+      description:
+        "Principal software developer with experience leading engineering teams and delivering modern web applications across multiple industries.",
+      linkedIn: "https://www.linkedin.com/in/nico-prananta-884750200/"
+    },
+    {
+      name: "Amri S. Pangestu",
+      role: "Product Manager",
+      image: "1607277533248.jpeg",
+      description:
+        "Product & IT Project Manager with experience in digital agencies, e-grocery, and consulting, driving product growth through strategy, execution, and technology.",
+      linkedIn: "https://www.linkedin.com/in/amripangestu/"
+    },
+    {
+      name: "Hari Cahya Nugraha",
+      role: "Software Engineer",
+      image: "1606819371215.jpeg",
+      description:
+        "Full-stack software engineer with 10+ years of experience building scalable web systems, specializing in backend, infrastructure, and cloud-native architectures.",
+      linkedIn: "https://www.linkedin.com/in/haricnugraha/"
+    },
+    {
+      name: "Muslim Ilmiawan",
+      role: "Software Engineer",
+      image: "1558886084532.jpeg",
+      description:
+        "Backend-focused programmer passionate about system architecture, working mainly with Java, Go, and Node.js.",
+      linkedIn: "https://www.linkedin.com/in/muslimilmiawan/"
+    },
+    {
+      name: "Denny Pradipta",
+      role: "Software Engineer",
+      image: "1758856751506.jpeg",
+      description:
+        "Experienced full-stack web developer with 8+ years of experience working across frontend, backend, and DevOps with modern JavaScript technologies.",
+      linkedIn: "https://www.linkedin.com/in/dennypradipta/"
+    },
+    {
+      name: "Raosan Lillahi",
+      role: "Software Engineer",
+      image: "1679995906768.jpeg",
+      description:
+        "Software engineer with extensive full-stack experience, startup founding background, and strong interest in technology and business.",
+      linkedIn: "https://www.linkedin.com/in/raosanfikri/"
+    },
+    {
+      name: "Suyono",
+      role: "Senior Software Engineer",
+      image: "1516414668719.jpeg",
+      description:
+        "Senior software engineer with 13+ years of experience, passionate about open-source, scalable architectures, and building high-quality products.",
+      linkedIn: "https://www.linkedin.com/in/suyono/"
+    },
+    {
+      name: "Kevin Hermawan",
+      role: "Software Engineer",
+      image: "1760315021833.jpeg",
+      description:
+        "Experienced software engineer focused on frontend, system reliability, and AI-driven solutions, with hands-on work in LLMs, RAG, and monitoring tools.",
+      linkedIn: "https://www.linkedin.com/in/khermawan/"
+    },
+    {
+      name: "Budhi Widagdo",
+      role: "Software Engineer",
+      image: "1602615800537.jpeg",
+      description:
+        "Experienced software engineer with a background in open-source development, digital banking platforms, and leading multi-project engineering teams.",
+      linkedIn: "https://www.linkedin.com/in/budhi-widagdo/"
+    },
+    {
+      name: "Sinta Herena",
+      role: "Software Engineer",
+      image: "1765007375648.jpeg",
+      description:
+        "Full-stack JavaScript developer experienced in React, Next.js, and TypeScript, focused on building reliable, user-centric web applications.",
+      linkedIn: "https://www.linkedin.com/in/sinta-herena/"
+    },
+    {
+      name: "Lukman Adisaputro",
+      role: "Software Engineer",
+      image: "1635918474641.jpeg",
+      description:
+        "Software developer with experience across startups and media companies, specializing in Go backend systems and modern web development with React.",
+      linkedIn: "https://www.linkedin.com/in/lukman-adisaputro-4a8969214/"
+    },
+    {
+      name: "M Noor Syam",
+      role: "Software Engineer",
+      image: "1750253962765.jpeg",
+      description:
+        "Software engineer with 10+ years of experience in Android and full-stack web development, delivering MVPs and scalable, production-ready systems.",
+      linkedIn: "https://www.linkedin.com/in/mochamad-noor-syamsu-832617a5/"
+    },
+    {
+      name: "Harianto",
+      role: "Head of Business Development",
+      image: "1699844064993.jpeg",
+      description:
+        "Business development executive driving long-term growth through strategy, partnerships, and commercial execution.",
+      linkedIn: "https://www.linkedin.com/in/h-harianto-7493799b/"
+    }
+  ];
+}

app/[lang]/(hyperjump)/team/page.tsx

@@ -0,0 +1,63 @@
+import type { Metadata } from "next";
+import data from "@/data.json";
+import { dynamicOpengraph } from "@/lib/default-metadata";
+import {
+  supportedLanguages,
+  type SupportedLanguage
+} from "@/locales/.generated/types";
+import { TeamCard } from "../components/team-card";
+import { getTeams } from "./data";
+import { mainTeamDesc, mainTeamHeading } from "@/locales/.generated/strings";
+
+export const generateStaticParams = async () => {
+  return supportedLanguages.map((lang) => ({ lang }));
+};
+type TeamsProps = {
+  params: Promise<{ lang: SupportedLanguage }>;
+};
+
+export async function generateMetadata() {
+  const { title, description } = data;
+
+  const meta: Metadata = {
+    title: `Meet Our Team – ${title}`,
+    description: description
+  };
+
+  return dynamicOpengraph(meta);
+}
+
+export default async function TeamSection({ params }: TeamsProps) {
+  const { lang } = await params;
+  const teams = getTeams();
+
+  const featuredTeams = teams.slice(0, 2);
+  const otherTeams = teams.slice(2);
+
+  return (
+    <section className="py-24 md:py-32">
+      <section className="mx-auto max-w-6xl px-4 md:-mt-5 md:px-20 xl:px-0">
+        <div className="mb-20 text-center">
+          <h2 className="mb-4 text-3xl font-medium text-[#020F15] md:text-4xl">
+            {mainTeamHeading(lang)}
+          </h2>
+          <p className="mx-auto max-w-2xl text-lg text-[#73767E]">
+            {mainTeamDesc(lang)}
+          </p>
+        </div>
+
+        <div className="mb-16 grid grid-cols-1 items-stretch gap-8 md:grid-cols-2">
+          {featuredTeams.map((member, i) => (
+            <TeamCard key={member.name ?? i} variant="featured" {...member} />
+          ))}
+        </div>
+
+        <div className="grid grid-cols-1 items-stretch gap-8 md:grid-cols-2 lg:grid-cols-4">
+          {otherTeams.map((member, i) => (
+            <TeamCard key={member.name ?? i} variant="compact" {...member} />
+          ))}
+        </div>
+      </section>
+    </section>
+  );
+}

locales/en/main.json

@@ -18,7 +18,8 @@
     "0_label": "Our Services",
     "1_label": "Case Studies",
     "2_label": "Our Products",
-    "3_label": "FAQ"
+    "3_label": "FAQ",
+    "4_label": "Team"
   },
   "services": {
     "heading": "Services",
@@ -58,5 +59,9 @@
     "3_answer": "We offer specialized expertise, flexibility, and cost-effective solutions without the overhead of full-time employees. Our team brings years of experience in enterprise IT, ensuring faster implementation and better ROI.",
     "learn_more": "Learn more",
     "learn_more_chatbot_message": "I want to learn more about"
+  },
+  "team": {
+    "heading": "Meet our team",
+    "desc": "Our team consists of highly skilled professionals dedicated to delivering exceptional results."
   }
 }

locales/id/main.json

@@ -18,7 +18,8 @@
     "0_label": "Layanan Kami",
     "1_label": "Studi Kasus",
     "2_label": "Produk Kami",
-    "3_label": "FAQ"
+    "3_label": "FAQ",
+    "4_label": "Tim"
   },
   "services": {
     "heading": "Layanan",
@@ -58,5 +59,9 @@
     "3_answer": "Kami menawarkan keahlian khusus, fleksibilitas, dan solusi yang hemat biaya tanpa beban karyawan tetap. Tim kami memiliki pengalaman bertahun-tahun dalam TI enterprise, memastikan implementasi lebih cepat dan ROI yang lebih tinggi.",
     "learn_more": "Pelajari lebih lanjut",
     "learn_more_chatbot_message": "Saya ingin mempelajari lebih lanjut tentang"
+  },
+  "team": {
+    "heading": "Kenalan dengan tim kami",
+    "desc": "Tim kami terdiri dari para profesional berpengalaman yang siap memberikan hasil terbaik."
   }
 }