Robotics-PEC · BangKartavya · Aug 18, 2026 · Aug 14, 2026 · Aug 17, 2026 · Aug 18, 2026
diff --git a/src/components/TeamMemberCard.tsx b/src/components/TeamMemberCard.tsx
@@ -0,0 +1,172 @@
+"use client";
+
+import Image from "next/image";
+import { useState } from "react";
+
+import { Linkedin, Github } from "lucide-react";
+
+interface TeamMember {
+  name: string;
+  role: string;
+  description: string;
+  location?: string;
+  image: string;
+  socials?: {
+    twitter?: string;
+    linkedin?: string;
+    github?: string;
+  };
+}
+
+interface TeamMemberCardProps {
+  member: TeamMember;
+}
+
+export default function TeamMemberCard({
+  member,
+}: TeamMemberCardProps) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className={`
+        overflow-hidden
+        rounded-[24px]
+        bg-[#f0f1f3]
+        p-2.5
+        transition-all
+        duration-500
+        ${isHovered ? "-translate-y-1 shadow-xl" : ""}
+      `}
+    >
+      {/* IMAGE */}
+      <div className="relative aspect-[4/4.5] overflow-hidden rounded-[19px]">
+        <Image
+          src={member.image}
+          alt={member.name}
+          fill
+          className={`
+            object-cover
+            transition-all
+            duration-700
+            ease-in-out
+
+          `}
+          sizes="
+            (max-width: 640px) 100vw,
+            (max-width: 1024px) 50vw,
+            25vw
+          "
+        />
+
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent" />
+      </div>
+
+      {/* INFO */}
+      <div className="mt-2.5 rounded-[19px] bg-white p-5">
+
+        {/* ALWAYS VISIBLE */}
+        <h3 className="text-xl font-semibold tracking-tight text-[#202938]">
+          {member.name}
+        </h3>
+
+        <p className="mt-1 text-sm font-medium text-gray-500">
+          {member.role}
+        </p>
+
+        {/* HOVER CONTENT */}
+        <div
+          className={`
+            overflow-hidden
+            transition-all
+            duration-500
+            ease-in-out
+            ${
+              isHovered
+                ? "mt-5 max-h-[250px] opacity-100"
+                : "max-h-0 opacity-0"
+            }
+          `}
+        >
+          {/* DESCRIPTION */}
+          <p className="text-sm leading-relaxed text-gray-500">
+            {member.description}
+          </p>
+
+          {/* BOTTOM */}
+          <div className="mt-6 flex items-center justify-between border-t border-gray-100 pt-4">
+
+            {/* LOCATION */}
+            {member.location && (
+              <div className="flex items-center gap-1.5 text-xs text-gray-500">
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                >
+                  <path
+                    d="M12 21s7-6.1 7-12a7 7 0 1 0-14 0c0 5.9 7 12 7 12Z"
+                    stroke="currentColor"
+                    strokeWidth="1.8"
+                  />
+                  <circle
+                    cx="12"
+                    cy="9"
+                    r="2.2"
+                    stroke="currentColor"
+                    strokeWidth="1.8"
+                  />
+                </svg>
+
+                {member.location}
+              </div>
+            )}
+
+            {/* SOCIAL ICONS */}
+            <div className="flex items-center gap-3">
+              {member.socials?.github && (
+                <a
+                  href={member.socials.github}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`${member.name} GitHub`}
+                  className="
+                    text-gray-400
+                    transition-all
+                    duration-200
+                    hover:scale-110
+                    hover:text-[#181717]
+                  "
+                >
+                  <Github size={20} strokeWidth={2} />
+                </a>
+              )}
+
+              {member.socials?.linkedin && (
+                <a
+                  href={member.socials.linkedin}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  aria-label={`${member.name} LinkedIn`}
+                  className="
+                    text-gray-400
+                    transition-all
+                    duration-200
+                    hover:scale-110
+                    hover:text-[#0a66c2]
+                  "
+                >
+                  <Linkedin size={20} strokeWidth={2} />
+                </a>
+              )}
+            </div>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
@@ -58,6 +58,7 @@ const Header = ({ isAdmin = false }: { isAdmin?: boolean }) => {
 
     const navigation = [
         { name: "Home", path: "/" },
+        { name: "Team", path: "/team"},
         { name: "Projects", path: "/project" },
         { name: "Activities", path: "/activities" },
         { name: "Events", path: "/events" },

diff --git a/src/lib/supabase/actions/storage.actions.ts b/src/lib/supabase/actions/storage.actions.ts
@@ -1,8 +1,11 @@
 import { base64ToBlob, HTMLToMarkdown } from "@/lib/utils";
 import { client } from "../supabase";
 
+const STORAGE_BUCKET = "media";
+const SIGNED_URL_TTL_SECONDS = 60 * 60;
+
 export const getFileNames = async (folder: string) => {
-    const { data, error } = await client.storage.from("media").list(folder);
+    const { data, error } = await client.storage.from(STORAGE_BUCKET).list(folder);
 
     if (error) {
         console.log(error);
@@ -18,7 +21,7 @@ export const getImagesFromFolder = async (folder: string) => {
 
     for (let i = 0; i < files.length; i++) {
 
-        const { data } = client.storage.from("media").getPublicUrl(`${folder}/${files[i]}`);
+        const { data } = client.storage.from(STORAGE_BUCKET).getPublicUrl(`${folder}/${files[i]}`);
 
         publicUrls.push(data.publicUrl);
     }
@@ -33,15 +36,15 @@ export const uploadImage = async (folder: string, name: string, fileData: string
     const blob = base64ToBlob(base64String, contentType)
     const filePath = `${folder}/${name}`;
 
-    const { data, error } = await client.storage.from("media").upload(filePath, blob, { contentType, upsert: true });
+    const { data, error } = await client.storage.from(STORAGE_BUCKET).upload(filePath, blob, { contentType, upsert: true });
 
     if (error) console.log(error);
 
     return data;
 };
 
 export const deleteImage = async (paths: string[]) => {
-    const { data, error } = await client.storage.from("media").remove(paths);
+    const { data, error } = await client.storage.from(STORAGE_BUCKET).remove(paths);
 
     if (error) {
         console.log(error);
@@ -53,7 +56,7 @@ export const deleteImage = async (paths: string[]) => {
 };
 
 export const getMarkdownFile = async (fileName: string, type: string) => {
-    const { data, error } = await client.storage.from("media").download(`markdown/${type}/${fileName.split(".")[0]}/${fileName}`);
+    const { data, error } = await client.storage.from(STORAGE_BUCKET).download(`markdown/${type}/${fileName.split(".")[0]}/${fileName}`);
 
 
     if (error) {
@@ -72,23 +75,48 @@ export const uploadMarkdownFile = async (fileNameWithExtension: string, type: st
         type: contentType
     });
 
-    await client.storage.from("media").upload(`markdown/${type}/${fileNameWithExtension.split(".")[0]}/${fileNameWithExtension}`, file, {
+    await client.storage.from(STORAGE_BUCKET).upload(`markdown/${type}/${fileNameWithExtension.split(".")[0]}/${fileNameWithExtension}`, file, {
         contentType, upsert: true
     });
 };
 
 export const getMarkdownPublicURL = (fileName: string, folder: string) => {
-    const { data } = client.storage.from("media").getPublicUrl(`markdown/${folder}/${fileName.split(".")[0]}/${fileName}`);
+    const { data } = client.storage.from(STORAGE_BUCKET).getPublicUrl(`markdown/${folder}/${fileName.split(".")[0]}/${fileName}`);
 
     return data.publicUrl;
 };
 
+export const getStorageImageUrl = async (path: string) => {
+    const cleanPath = path.trim().replace(/^\/+/, "");
+
+    if (!cleanPath) {
+        return null;
+    }
+
+    // If DB already stores a complete public/signed URL, use it directly.
+    if (/^https?:\/\//i.test(path.trim())) {
+        return path.trim();
+    }
+
+    const { data: signedData, error: signedError } = await client
+        .storage
+        .from(STORAGE_BUCKET)
+        .createSignedUrl(cleanPath, SIGNED_URL_TTL_SECONDS);
+
+    if (!signedError && signedData?.signedUrl) {
+        return signedData.signedUrl;
+    }
+
+    const { data: publicData } = client.storage.from(STORAGE_BUCKET).getPublicUrl(cleanPath);
+    return publicData.publicUrl || null;
+};
+
 export const getAllFiles = async (path: string) => {
     let allFiles: string[] = [];
 
     const { data: list, error } = await client
         .storage
-        .from("media")
+        .from(STORAGE_BUCKET)
         .list(path, { limit: 1000 });
 
     if (error) {
@@ -116,7 +144,7 @@ export const deleteMarkdownFolder = async (folder: string, type: string) => {
     const filesToDelete = await getAllFiles(`markdown/${type}/${folder}`);
 
     if (filesToDelete.length > 0) {
-        const { data, error } = await client.storage.from("media").remove(filesToDelete);
+        const { data, error } = await client.storage.from(STORAGE_BUCKET).remove(filesToDelete);
 
         if (error) {
             console.log(error);
@@ -132,7 +160,7 @@ export const deleteMarkdownFolder = async (folder: string, type: string) => {
 };
 
 export const deleteMarkdownFile = async (fileNameWithExtension: string, type: string) => {
-    const { data, error } = await client.storage.from("media").remove([`markdown/${type}/${fileNameWithExtension.split(".")[0]}/${fileNameWithExtension}`]);
+    const { data, error } = await client.storage.from(STORAGE_BUCKET).remove([`markdown/${type}/${fileNameWithExtension.split(".")[0]}/${fileNameWithExtension}`]);
 
     if (error) {
         console.log(error);

diff --git a/src/lib/supabase/actions/team.actions.ts b/src/lib/supabase/actions/team.actions.ts
@@ -3,6 +3,20 @@ import { client } from "../supabase";
 import { deleteImage, uploadImage } from "./storage.actions";
 import { urlToBase64 } from "@/lib/utils";
 
+
+export const getTeamImages = async () => {
+  const { data, error } = await client
+    .from("team")
+    .select("name, image");
+
+  if (error) {
+    console.error("Failed to fetch team images:", error);
+    return [];
+  }
+
+  return data as { name: string; image: string }[];
+};
+
 export const getTeamMembers = async () => {
     const { data, error } = await client.from("team").select("*");
     if (error) console.log(error);