From 429685c4e5b87d4a578ed4d40ea3919853c0775d Mon Sep 17 00:00:00 2001
From: Nico Prananta <311343+nicnocquee@users.noreply.github.com>
Date: Wed, 6 May 2026 17:53:35 +0700
Subject: [PATCH] chore(team): link to more members on LinkedIn
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the footer “And more” button with a compact grid card that points to Hyperjump’s LinkedIn page.
---
 .../(hyperjump)/team/linkedin-more-card.tsx   | 65 +++++++++++++++++++
 app/[lang]/(hyperjump)/team/page.tsx          | 27 +++-----
 2 files changed, 73 insertions(+), 19 deletions(-)
 create mode 100644 app/[lang]/(hyperjump)/team/linkedin-more-card.tsx

diff --git a/app/[lang]/(hyperjump)/team/linkedin-more-card.tsx b/app/[lang]/(hyperjump)/team/linkedin-more-card.tsx
new file mode 100644
index 000000000..2a4048d98
--- /dev/null
+++ b/app/[lang]/(hyperjump)/team/linkedin-more-card.tsx
@@ -0,0 +1,65 @@
+import Image from "next/image";
+
+import type { SupportedLanguage } from "@/locales/.generated/types";
+
+type TeamLinkedInMoreCardProps = {
+  /** Match layout of existing team cards. */
+  variant: "compact";
+  lang: SupportedLanguage;
+};
+
+const HYPERJUMP_LINKEDIN_URL = "https://www.linkedin.com/company/hyperjump";
+
+/**
+ * A compact “more on LinkedIn” card that matches the team grid styling.
+ */
+export function TeamLinkedInMoreCard({ variant }: TeamLinkedInMoreCardProps) {
+  const isCompact = variant === "compact";
+
+  return (
+    <div>
+      <a
+        href={HYPERJUMP_LINKEDIN_URL}
+        target="_blank"
+        rel="noreferrer noopener"
+        className={`team-card flex h-auto flex-col rounded-xl bg-white shadow-sm transition-shadow duration-300 hover:shadow-lg ${
+          isCompact ? "md:h-160" : ""
+        }`}
+        aria-label="Find more members of Hyperjump on LinkedIn">
+        <div className="team-card-image relative h-100 w-full overflow-hidden rounded-t-xl bg-gray-100 md:h-80">
+          <div className="flex h-full w-full items-center justify-center">
+            <div className="flex h-20 w-20 items-center justify-center rounded-2xl bg-[#0A66C2]/10">
+              <Image
+                src="/images/linkedIn.svg"
+                alt="LinkedIn"
+                width={36}
+                height={36}
+              />
+            </div>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col justify-between p-4">
+          <div>
+            <h3 className="text-base font-semibold text-[#020F15]">
+              Find more members
+            </h3>
+            <p className="text-sm text-[#73767E]">of Hyperjump on LinkedIn</p>
+            <p className="mt-2 text-sm leading-relaxed text-[#73767E]">
+              Explore the full team and connect with us.
+            </p>
+          </div>
+
+          <span 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="Hyperjump LinkedIn page"
+              width={16}
+              height={16}
+            />
+          </span>
+        </div>
+      </a>
+    </div>
+  );
+}
diff --git a/app/[lang]/(hyperjump)/team/page.tsx b/app/[lang]/(hyperjump)/team/page.tsx
index 6e34827fd..f7f2316d4 100644
--- a/app/[lang]/(hyperjump)/team/page.tsx
+++ b/app/[lang]/(hyperjump)/team/page.tsx
@@ -1,8 +1,5 @@
-import { ArrowUpRightIcon } from "lucide-react";
-import Link from "next/link";
 import { BreadcrumbJsonLd, ProfilePageJsonLd } from "next-seo";
 
-import { Button } from "@/components/ui/button";
 import data from "@/data.json";
 import { dynamicOpengraph } from "@/lib/default-metadata";
 import {
@@ -13,7 +10,6 @@ import {
   mainTeamDesc,
   mainOurTeam,
   mainExpertIn,
-  mainAndMore,
   mainHome,
   mainTeamLabel
 } from "@/locales/.generated/strings";
@@ -22,6 +18,7 @@ import { AnimatedLines } from "../components/animated-lines";
 
 import { TeamCard } from "./card";
 import { team } from "./data";
+import { TeamLinkedInMoreCard } from "./linkedin-more-card";
 import { Typewriter } from "./typewriter";
 
 export async function generateMetadata(props: { params: Promise<LangProps> }) {
@@ -43,6 +40,9 @@ type TeamsProps = {
   params: Promise<LangProps>;
 };
 
+/**
+ * Team listing page.
+ */
 export default async function TeamSection({ params }: TeamsProps) {
   const { lang } = await params;
   const founders = team.slice(0, 2);
@@ -92,21 +92,7 @@ export default async function TeamSection({ params }: TeamsProps) {
               .map((member) => (
                 <TeamCard key={member.name} variant="compact" {...member} />
               ))}
-          </div>
-
-          <div className="mt-12 flex w-full items-center justify-center">
-            <Button
-              variant="outline"
-              className="text-hyperjump-blue border-hyperjump-blue/20 hover:bg-hyperjump-blue h-11 rounded-full px-8 font-semibold transition-all duration-200 hover:scale-[1.02] hover:text-white"
-              asChild>
-              <Link
-                href="https://www.linkedin.com/company/hyperjump"
-                target="_blank"
-                rel="noreferrer noopener">
-                {mainAndMore(lang)}
-                <ArrowUpRightIcon className="ml-2 h-4 w-4" />
-              </Link>
-            </Button>
+            <TeamLinkedInMoreCard variant="compact" lang={lang} />
           </div>
         </div>
       </section>
@@ -115,6 +101,9 @@ export default async function TeamSection({ params }: TeamsProps) {
   );
 }
 
+/**
+ * JSON-LD metadata for team profiles and breadcrumbs.
+ */
 function JsonLd({ lang }: LangProps) {
   const { url } = data;