diff --git a/apps/info/src/App.tsx b/apps/info/src/App.tsx
index f22e5c70..bb0a09e1 100644
--- a/apps/info/src/App.tsx
+++ b/apps/info/src/App.tsx
@@ -4,6 +4,7 @@ import { Home } from "./routes/Home";
 import { Archive } from "./routes/Archive";
 import { FAQ } from "./routes/FAQ";
 import { Navbar } from "./components/Navbar";
+import TeamPage from "./routes/Team";
 
 function App() {
   return (
@@ -13,6 +14,7 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/archive" element={<Archive />} />
         <Route path="/faq" element={<FAQ />} />
+        <Route path="/team" element={<TeamPage />} />
       </Routes>
     </Router>
   );
diff --git a/apps/info/src/components/Carousel.tsx b/apps/info/src/components/Carousel.tsx
deleted file mode 100644
index 7ae950ad..00000000
--- a/apps/info/src/components/Carousel.tsx
+++ /dev/null
@@ -1,202 +0,0 @@
-import React, { useState } from "react";
-import { Box, Heading, Flex, Image, Text, Button } from "@chakra-ui/react";
-
-interface CarouselItem {
-  title: string;
-  image: string;
-}
-
-interface CircularCarouselProps {
-  items: CarouselItem[];
-}
-
-const CircularCarousel: React.FC<CircularCarouselProps> = ({ items }) => {
-  const [activeIndex, setActiveIndex] = useState<number>(0);
-  const [isAnimating, setIsAnimating] = useState<boolean>(false);
-
-  const handleItemClick = (index: number) => {
-    if (isAnimating || index === activeIndex) return;
-
-    setIsAnimating(true);
-
-    // rotating shortest path
-    const totalItems = items.length;
-    const clockwiseSteps = (index - activeIndex + totalItems) % totalItems;
-    const counterClockwiseSteps =
-      (activeIndex - index + totalItems) % totalItems;
-
-    const shouldGoClockwise = clockwiseSteps <= counterClockwiseSteps;
-    const stepsToTake = shouldGoClockwise
-      ? clockwiseSteps
-      : counterClockwiseSteps;
-    const direction = shouldGoClockwise ? 1 : -1;
-
-    if (stepsToTake === 1) {
-      setActiveIndex(index);
-      setTimeout(() => setIsAnimating(false), 500);
-      return;
-    }
-
-    let currentStep = 0;
-
-    const animateStep = () => {
-      if (currentStep >= stepsToTake) {
-        setIsAnimating(false);
-        return;
-      }
-
-      setActiveIndex((prev) => (prev + direction + totalItems) % totalItems);
-      currentStep++;
-
-      setTimeout(animateStep, 300);
-    };
-
-    animateStep();
-  };
-
-  const handleNavClick = (direction: "prev" | "next") => {
-    if (isAnimating) return;
-
-    setIsAnimating(true);
-    const newIndex =
-      direction === "prev"
-        ? (activeIndex - 1 + items.length) % items.length
-        : (activeIndex + 1) % items.length;
-
-    setActiveIndex(newIndex);
-    setTimeout(() => setIsAnimating(false), 500);
-  };
-
-  const getItemStyle = (index: number) => {
-    const totalItems = items.length;
-    const angleDegree = 360 / totalItems;
-    const baseAngle = angleDegree * (index - activeIndex);
-    const radians = (baseAngle * Math.PI) / 180;
-
-    const horizontalRadius = 300;
-    const verticalRadius = 180;
-
-    const x = horizontalRadius * Math.sin(radians);
-    const y = verticalRadius * Math.cos(radians);
-    const zIndex = Math.round(50 - y / 10);
-
-    const scale = 0.8 + ((y + verticalRadius) / (verticalRadius * 2)) * 0.3;
-    const isFrontItem = index === activeIndex;
-
-    return {
-      transform: `translate(${x}px, ${y}px) scale(${scale})`,
-      zIndex,
-      opacity: 0.8 + ((y + verticalRadius) / (verticalRadius * 2)) * 0.4,
-      boxShadow: isFrontItem
-        ? "0 10px 30px rgba(0,0,0,0.4)"
-        : "0 5px 15px rgba(0,0,0,0.2)"
-    };
-  };
-
-  return (
-    <Flex
-      direction="column"
-      align="center"
-      position="relative"
-      w="100%"
-      h="700px"
-      pt={8}
-    >
-      <Heading fontSize="5xl" mb={10}>
-        Meet the Team
-      </Heading>
-      <Box position="relative" w="100%" h="500px" mx="auto">
-        <Box
-          position="absolute"
-          top="50%"
-          left="50%"
-          transform="translate(-50%, -50%)"
-          w="620px"
-          h="380px"
-          borderRadius="50%"
-          border="2px dashed"
-          borderColor="gray.200"
-          zIndex={0}
-        />
-
-        {items.map((item, index) => (
-          <Box
-            key={index}
-            position="absolute"
-            top="50%"
-            left="50%"
-            w="280px"
-            h="180px"
-            ml="-140px"
-            mt="-90px"
-            transition="all 0.5s ease-in-out"
-            cursor="pointer"
-            borderRadius="16px"
-            overflow="hidden"
-            boxShadow={getItemStyle(index).boxShadow}
-            transform={getItemStyle(index).transform}
-            zIndex={getItemStyle(index).zIndex}
-            opacity={getItemStyle(index).opacity}
-            _hover={{
-              transform: `${
-                getItemStyle(index).transform.split(")")[0]
-              }) scale(${
-                parseFloat(getItemStyle(index).transform.split("scale(")[1]) +
-                0.05
-              })`,
-              boxShadow: "0 15px 35px rgba(0,0,0,0.25)"
-            }}
-            onClick={() => handleItemClick(index)}
-          >
-            <Image
-              src={item.image}
-              alt={item.title}
-              w="100%"
-              h="100%"
-              objectFit="cover"
-            />
-            <Text
-              position="absolute"
-              bottom="16px"
-              left="16px"
-              color="white"
-              fontSize="22px"
-              fontWeight="bold"
-              textShadow="0 2px 4px rgba(0,0,0,0.5)"
-            >
-              {item.title}
-            </Text>
-          </Box>
-        ))}
-      </Box>
-
-      <Flex justifyContent="center" mt={12}>
-        <Button
-          onClick={() => handleNavClick("prev")}
-          colorScheme="blue"
-          size="lg"
-          mr={6}
-          px={8}
-          isDisabled={isAnimating}
-          _hover={{ transform: "translateY(-2px)" }}
-          transition="all 0.2s"
-        >
-          Previous
-        </Button>
-        <Button
-          onClick={() => handleNavClick("next")}
-          colorScheme="blue"
-          size="lg"
-          px={8}
-          isDisabled={isAnimating}
-          _hover={{ transform: "translateY(-2px)" }}
-          transition="all 0.2s"
-        >
-          Next
-        </Button>
-      </Flex>
-    </Flex>
-  );
-};
-
-export default CircularCarousel;
diff --git a/apps/info/src/components/Foldable.tsx b/apps/info/src/components/Foldable.tsx
index 85c70a23..d3c7d47e 100644
--- a/apps/info/src/components/Foldable.tsx
+++ b/apps/info/src/components/Foldable.tsx
@@ -1,169 +1,923 @@
-// credit to : https://www.frontend.fyi/tutorials/making-a-foldable-map-with-framer-motion
-
-import React, { useState } from "react";
-import { Box, Flex, Text, Button, useColorModeValue } from "@chakra-ui/react";
-import { motion, AnimatePresence } from "framer-motion";
-
-const PANEL_W = 250;
-const PANEL_H = 480;
-const PANELS = [-2, -1, 0, 1, 2];
-
-const FoldableFAQ: React.FC = () => {
-  const bg = useColorModeValue("white", "gray.800");
-  const altBg = useColorModeValue("gray.50", "gray.700");
-  const borderColor = useColorModeValue("gray.200", "gray.600");
-  const shadow = useColorModeValue("rgba(0,0,0,0.1)", "rgba(0,0,0,0.4)");
-  const [open, setOpen] = useState(false);
-
-  const deckVariants = {
-    closed: {
-      scale: 0.96,
-      x: "-50%",
-      transition: { type: "spring", stiffness: 80, damping: 20 }
-    },
-    open: {
-      scale: 0.82,
-      x: "-50%", // STILL CENTER IT ONCE WE OPEN
-      transition: {
-        type: "spring",
-        stiffness: 80,
-        damping: 20,
-        delayChildren: 0.1,
-        staggerChildren: 0.18
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Flex,
+  Text,
+  Heading,
+  VStack,
+  ChakraProvider,
+  extendTheme,
+  useColorModeValue
+} from "@chakra-ui/react";
+import {
+  motion,
+  useMotionValue,
+  useTransform,
+  useMotionValueEvent,
+  useSpring,
+  AnimatePresence
+} from "framer-motion";
+
+const theme = extendTheme({
+  styles: { global: { body: { bg: "gray.50" } } }
+});
+
+const MotionBox = motion(Box);
+const MotionFlex = motion(Flex);
+const MotionHeading = motion(Heading);
+const MotionText = motion(Text);
+
+interface FaqItem {
+  question: string;
+  answer: string;
+}
+
+interface FoldableFAQProps {
+  title?: string;
+}
+
+const faqItems: FaqItem[] = [
+  {
+    question: "Lorem ipsum dolor sit amet?",
+    answer:
+      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac felis eget justo cursus finibus in vel nibh."
+  },
+  {
+    question: "Nulla facilisi mauris vel?",
+    answer:
+      "Nulla facilisi. Mauris vel erat nec justo cursus auctor. Suspendisse potenti. Sed mattis neque ut ex volutpat."
+  },
+  {
+    question: "Fusce sagittis magna vel?",
+    answer:
+      "Fusce sagittis magna vel nunc porttitor, nec hendrerit magna posuere. Sed porttitor eros vitae diam finibus."
+  },
+  {
+    question: "Vestibulum ante ipsum primis?",
+    answer:
+      "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec lacinia sapien in elit."
+  },
+  {
+    question: "Cras at justo sit amet?",
+    answer:
+      "Cras at justo sit amet erat molestie varius. Integer hendrerit dolor sed eleifend sodales. Phasellus magna elit."
+  }
+];
+
+const FoldableFAQ: React.FC<FoldableFAQProps> = ({ title = "FAQ" }) => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    const update = () => {
+      const mobile = window.innerWidth < 768;
+      setIsMobile(mobile);
+
+      if (mobile) {
+        const width = Math.min(window.innerWidth * 0.9, 400);
+        const height = Math.min(window.innerHeight * 0.8, 700);
+        setSize({ width, height });
+      } else {
+        const width = Math.min(window.innerWidth * 0.92, 1200);
+        const height = width * 0.55;
+        setSize({ width, height });
       }
-    }
+    };
+    update();
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
+  }, []);
+
+  const bgColor = useColorModeValue("white", "gray.800");
+  const cardBg = useColorModeValue("gray.50", "gray.700");
+  const textColor = useColorModeValue("gray.700", "white");
+  const accent = useColorModeValue("blue.500", "blue.300");
+
+  if (isMobile) {
+    return (
+      <MobileFoldableFAQ
+        title={title}
+        size={size}
+        bgColor={bgColor}
+        cardBg={cardBg}
+        textColor={textColor}
+        accent={accent}
+      />
+    );
+  }
+
+  return (
+    <DesktopFoldableFAQ
+      title={title}
+      size={size}
+      bgColor={bgColor}
+      cardBg={cardBg}
+      textColor={textColor}
+      accent={accent}
+    />
+  );
+};
+
+const DesktopFoldableFAQ: React.FC<{
+  title: string;
+  size: { width: number; height: number };
+  bgColor: string;
+  cardBg: string;
+  textColor: string;
+  accent: string;
+}> = ({ title, size, bgColor, cardBg, textColor, accent }) => {
+  const maxDrag = 380;
+  const xDrag = useMotionValue(0);
+  const xSpring = useSpring(xDrag, { stiffness: 400, damping: 35 });
+  const componentX = useTransform(xSpring, [0, maxDrag], [0, -maxDrag]);
+  const [isFolded, setIsFolded] = useState(true);
+
+  const toggleFoldState = () => {
+    const targetValue = isFolded ? maxDrag : 0;
+    xDrag.set(targetValue);
   };
 
-  const panelVariants = (side: "left" | "right" | "center") => ({
-    initial: {
-      rotateY: side === "left" ? -90 : side === "right" ? 90 : 0,
-      opacity: side === "center" ? 1 : 0
-    },
-    open: {
-      rotateY: 0,
-      opacity: 1,
-      transition: { type: "spring", stiffness: 70, damping: 16, mass: 0.6 }
-    },
-    closed: {
-      rotateY: side === "left" ? -90 : side === "right" ? 90 : 0,
-      opacity: side === "center" ? 1 : 0,
-      transition: { duration: 0.4 }
-    }
+  useMotionValueEvent(xDrag, "change", (x) => {
+    if (x > maxDrag * 0.8 && isFolded) setIsFolded(false);
+    if (x < maxDrag * 0.2 && !isFolded) setIsFolded(true);
   });
 
-  const leftOf = (idx: number) => `${idx * PANEL_W}px`;
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        toggleFoldState();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, [isFolded]);
+
+  const windmillEffect = [
+    { rotateZ: -90, rotateY: -45, scale: 0.8, rotateX: 0, y: 0, skewY: 0 },
+    { rotateZ: -45, rotateY: -22, scale: 0.9, rotateX: 0, y: 0, skewY: 0 },
+    { rotateZ: 0, rotateY: 0, scale: 1, rotateX: 0, y: 0, skewY: 0 },
+    { rotateZ: 45, rotateY: 22, scale: 0.9, rotateX: 0, y: 0, skewY: 0 },
+    { rotateZ: 90, rotateY: 45, scale: 0.8, rotateX: 0, y: 0, skewY: 0 }
+  ];
+
+  const panelShift = [220, 110, 0, -110, -220];
+  const globalRotateY = useTransform(xSpring, [0, maxDrag], [0, 3]);
+  const globalZ = useTransform(xSpring, [0, maxDrag], [0, 50]);
+
+  const panel0Transforms = {
+    x: useTransform(xSpring, [0, maxDrag], [panelShift[0], 0]),
+    rotateY: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[0].rotateY, 0]
+    ),
+    rotateX: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[0].rotateX, 0]
+    ),
+    rotateZ: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[0].rotateZ, 0]
+    ),
+    scale: useTransform(xSpring, [0, maxDrag], [windmillEffect[0].scale, 1]),
+    y: useTransform(xSpring, [0, maxDrag], [windmillEffect[0].y, 0]),
+    skewY: useTransform(xSpring, [0, maxDrag], [windmillEffect[0].skewY, 0]),
+    z: useTransform(xSpring, [0, maxDrag], [0, 0 * 15]),
+    opacity: useTransform(xSpring, [0, maxDrag * 0.3, maxDrag], [0.4, 0.8, 1])
+  };
+
+  const panel1Transforms = {
+    x: useTransform(xSpring, [0, maxDrag], [panelShift[1], 0]),
+    rotateY: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[1].rotateY, 0]
+    ),
+    rotateX: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[1].rotateX, 0]
+    ),
+    rotateZ: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[1].rotateZ, 0]
+    ),
+    scale: useTransform(xSpring, [0, maxDrag], [windmillEffect[1].scale, 1]),
+    y: useTransform(xSpring, [0, maxDrag], [windmillEffect[1].y, 0]),
+    skewY: useTransform(xSpring, [0, maxDrag], [windmillEffect[1].skewY, 0]),
+    z: useTransform(xSpring, [0, maxDrag], [0, 1 * 15]),
+    opacity: useTransform(xSpring, [0, maxDrag * 0.3, maxDrag], [0.4, 0.8, 1])
+  };
+
+  const panel2Transforms = {
+    x: useTransform(xSpring, [0, maxDrag], [panelShift[2], 0]),
+    rotateY: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[2].rotateY, 0]
+    ),
+    rotateX: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[2].rotateX, 0]
+    ),
+    rotateZ: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[2].rotateZ, 0]
+    ),
+    scale: useTransform(xSpring, [0, maxDrag], [windmillEffect[2].scale, 1]),
+    y: useTransform(xSpring, [0, maxDrag], [windmillEffect[2].y, 0]),
+    skewY: useTransform(xSpring, [0, maxDrag], [windmillEffect[2].skewY, 0]),
+    z: useTransform(xSpring, [0, maxDrag], [0, 2 * 15]),
+    opacity: useTransform(xSpring, [0, maxDrag * 0.3, maxDrag], [0.4, 0.8, 1])
+  };
+
+  const panel3Transforms = {
+    x: useTransform(xSpring, [0, maxDrag], [panelShift[3], 0]),
+    rotateY: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[3].rotateY, 0]
+    ),
+    rotateX: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[3].rotateX, 0]
+    ),
+    rotateZ: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[3].rotateZ, 0]
+    ),
+    scale: useTransform(xSpring, [0, maxDrag], [windmillEffect[3].scale, 1]),
+    y: useTransform(xSpring, [0, maxDrag], [windmillEffect[3].y, 0]),
+    skewY: useTransform(xSpring, [0, maxDrag], [windmillEffect[3].skewY, 0]),
+    z: useTransform(xSpring, [0, maxDrag], [0, 3 * 15]),
+    opacity: useTransform(xSpring, [0, maxDrag * 0.3, maxDrag], [0.4, 0.8, 1])
+  };
+
+  const panel4Transforms = {
+    x: useTransform(xSpring, [0, maxDrag], [panelShift[4], 0]),
+    rotateY: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[4].rotateY, 0]
+    ),
+    rotateX: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[4].rotateX, 0]
+    ),
+    rotateZ: useTransform(
+      xSpring,
+      [0, maxDrag],
+      [windmillEffect[4].rotateZ, 0]
+    ),
+    scale: useTransform(xSpring, [0, maxDrag], [windmillEffect[4].scale, 1]),
+    y: useTransform(xSpring, [0, maxDrag], [windmillEffect[4].y, 0]),
+    skewY: useTransform(xSpring, [0, maxDrag], [windmillEffect[4].skewY, 0]),
+    z: useTransform(xSpring, [0, maxDrag], [0, 4 * 15]),
+    opacity: useTransform(xSpring, [0, maxDrag * 0.3, maxDrag], [0.4, 0.8, 1])
+  };
+
+  const panelTransforms = [
+    panel0Transforms,
+    panel1Transforms,
+    panel2Transforms,
+    panel3Transforms,
+    panel4Transforms
+  ];
+
   return (
-    <Box
-      w="100%"
-      display="flex"
-      justifyContent="center"
-      alignItems="center"
-      minH="100vh"
-      py={10}
-      overflow="hidden"
-      position="relative"
-    >
+    <ChakraProvider theme={theme} resetCSS>
       <Flex
+        w="100%"
+        h="100vh"
+        overflow="hidden"
+        align="center"
         justify="center"
+      >
+        <MotionFlex
+          style={{
+            x: componentX,
+            rotateY: globalRotateY,
+            z: globalZ
+          }}
+          animate={{ rotateX: isFolded ? 0 : 2 }}
+          transition={{ type: "spring", stiffness: 300, damping: 25 }}
+        >
+          <MotionBox
+            drag="x"
+            dragConstraints={{ left: 0, right: maxDrag }}
+            dragElastic={0.15}
+            dragTransition={{
+              power: 0.2,
+              timeConstant: 500,
+              modifyTarget: (t) => (t > maxDrag * 0.45 ? maxDrag : 0)
+            }}
+            style={{ x: xDrag, width: size.width, height: size.height }}
+            cursor="grab"
+            _active={{ cursor: "grabbing" }}
+            _hover={{
+              boxShadow: isFolded
+                ? "0 8px 20px -6px rgba(0, 0, 0, 0.12), 0 8px 8px -6px rgba(0, 0, 0, 0.05)"
+                : undefined
+            }}
+            position="relative"
+            borderRadius="lg"
+            boxShadow="2xl"
+            overflow="hidden"
+            bg={bgColor}
+            animate={{
+              boxShadow: isFolded
+                ? "0 6px 16px -4px rgba(0, 0, 0, 0.08), 0 6px 6px -4px rgba(0, 0, 0, 0.03)"
+                : "0 16px 32px -10px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.04)"
+            }}
+            transition={{ duration: 0.3 }}
+            onClick={toggleFoldState}
+            tabIndex={0}
+            role="button"
+            aria-label={isFolded ? "Open FAQ" : "Close FAQ"}
+          >
+            <Box
+              display="grid"
+              gridTemplateColumns={`repeat(${faqItems.length}, 1fr)`}
+              h="full"
+              w="full"
+            >
+              {faqItems.map((faq, i) => {
+                const transforms = panelTransforms[i];
+                return (
+                  <MotionBox
+                    key={i}
+                    style={{
+                      x: transforms.x,
+                      y: transforms.y,
+                      rotateY: transforms.rotateY,
+                      rotateX: transforms.rotateX,
+                      rotateZ: transforms.rotateZ,
+                      skewY: transforms.skewY,
+                      scale: transforms.scale,
+                      z: transforms.z,
+                      opacity: transforms.opacity,
+                      transformStyle: "preserve-3d",
+                      transformOrigin: "center center"
+                    }}
+                    borderRight={
+                      i < faqItems.length - 1 ? "1px solid" : undefined
+                    }
+                    borderLeft={i > 0 ? "1px solid" : undefined}
+                    borderColor="gray.100"
+                    bg={bgColor}
+                    boxShadow="xl"
+                    overflow="hidden"
+                  >
+                    <MotionBox
+                      p={6}
+                      h="full"
+                      display="flex"
+                      flexDirection="column"
+                      justifyContent="center"
+                      animate={{
+                        filter: isFolded ? "brightness(0.8)" : "brightness(1)"
+                      }}
+                      transition={{
+                        duration: 0.4,
+                        delay: i * 0.03,
+                        type: "spring",
+                        stiffness: 200
+                      }}
+                    >
+                      <VStack spacing={4} align="stretch">
+                        <AnimatePresence mode="wait">
+                          {!isFolded && (
+                            <MotionBox
+                              bg={cardBg}
+                              p={4}
+                              borderRadius="md"
+                              boxShadow="md"
+                              initial={{
+                                opacity: 0,
+                                y: 40,
+                                rotateX: -30,
+                                scale: 0.8,
+                                z: -100
+                              }}
+                              animate={{
+                                opacity: 1,
+                                y: 0,
+                                rotateX: 0,
+                                scale: 1,
+                                z: 0
+                              }}
+                              exit={{
+                                opacity: 0,
+                                y: -30,
+                                rotateX: 20,
+                                scale: 0.9,
+                                z: -50
+                              }}
+                              transition={{
+                                type: "spring",
+                                stiffness: 300,
+                                damping: 25,
+                                delay: 0.15 + i * 0.1
+                              }}
+                              whileHover={{
+                                scale: 1.03,
+                                y: -3,
+                                rotateY: 2,
+                                boxShadow: "lg",
+                                transition: { duration: 0.2 }
+                              }}
+                            >
+                              <MotionHeading
+                                fontSize="lg"
+                                mb={2}
+                                color={accent}
+                                initial={{ opacity: 0, x: -15, rotateY: -10 }}
+                                animate={{ opacity: 1, x: 0, rotateY: 0 }}
+                                transition={{
+                                  delay: 0.25 + i * 0.1,
+                                  duration: 0.4,
+                                  type: "spring"
+                                }}
+                              >
+                                {faq.question}
+                              </MotionHeading>
+                              <MotionText
+                                fontSize="sm"
+                                color={textColor}
+                                initial={{ opacity: 0, y: 10, scale: 0.95 }}
+                                animate={{ opacity: 1, y: 0, scale: 1 }}
+                                transition={{
+                                  delay: 0.35 + i * 0.1,
+                                  duration: 0.5,
+                                  type: "spring"
+                                }}
+                              >
+                                {faq.answer}
+                              </MotionText>
+                            </MotionBox>
+                          )}
+                        </AnimatePresence>
+                      </VStack>
+                    </MotionBox>
+                  </MotionBox>
+                );
+              })}
+            </Box>
+
+            <AnimatePresence>
+              {isFolded && (
+                <MotionBox
+                  position="absolute"
+                  inset={0}
+                  bg={bgColor}
+                  display="flex"
+                  flexDirection="column"
+                  alignItems="center"
+                  justifyContent="center"
+                  pointerEvents="none"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0, scale: 1.05, rotateY: 5 }}
+                  transition={{ duration: 0.4 }}
+                >
+                  <MotionHeading
+                    fontSize="7xl"
+                    fontWeight="black"
+                    color={accent}
+                    initial={{ scale: 0.8, opacity: 0, rotateY: -10 }}
+                    animate={{ scale: 1, opacity: 1, rotateY: 0 }}
+                    transition={{
+                      type: "spring",
+                      stiffness: 300,
+                      damping: 20,
+                      delay: 0.1
+                    }}
+                  >
+                    {title}
+                  </MotionHeading>
+                  <MotionText
+                    mt={4}
+                    color="gray.500"
+                    fontSize="md"
+                    textAlign="center"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{
+                      opacity: [0.7, 1, 0.7],
+                      y: 0,
+                      x: [0, 3, 0]
+                    }}
+                    transition={{
+                      opacity: {
+                        duration: 2,
+                        repeat: Infinity,
+                        ease: "easeInOut"
+                      },
+                      x: { duration: 2, repeat: Infinity, ease: "easeInOut" },
+                      y: { duration: 0.5, delay: 0.2 }
+                    }}
+                  >
+                    Click or drag to open →<br />
+                    <Text as="span" fontSize="sm" opacity={0.8}>
+                      Press Space or Enter
+                    </Text>
+                  </MotionText>
+                </MotionBox>
+              )}
+            </AnimatePresence>
+          </MotionBox>
+        </MotionFlex>
+      </Flex>
+    </ChakraProvider>
+  );
+};
+
+const MobileFoldableFAQ: React.FC<{
+  title: string;
+  size: { width: number; height: number };
+  bgColor: string;
+  cardBg: string;
+  textColor: string;
+  accent: string;
+}> = ({ title, size, bgColor, cardBg, textColor, accent }) => {
+  const maxDrag = 300;
+  const yDrag = useMotionValue(0);
+  const ySpring = useSpring(yDrag, { stiffness: 400, damping: 35 });
+  const componentY = useTransform(ySpring, [0, maxDrag], [0, -maxDrag]);
+
+  const [isFolded, setIsFolded] = useState(true);
+
+  const toggleFoldState = () => {
+    const targetValue = isFolded ? maxDrag : 0;
+    yDrag.set(targetValue);
+  };
+
+  useMotionValueEvent(yDrag, "change", (y) => {
+    if (y > maxDrag * 0.7 && isFolded) setIsFolded(false);
+    if (y < maxDrag * 0.3 && !isFolded) setIsFolded(true);
+  });
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.code === "Space" || event.code === "Enter") {
+        event.preventDefault();
+        toggleFoldState();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, [isFolded]);
+
+  const stackEffect = [
+    { y: -120, scale: 0.85, rotateX: 20, opacity: 0.6 },
+    { y: -60, scale: 0.9, rotateX: 15, opacity: 0.7 },
+    { y: 0, scale: 1, rotateX: 0, opacity: 1 },
+    { y: 60, scale: 0.9, rotateX: -15, opacity: 0.7 },
+    { y: 120, scale: 0.85, rotateX: -20, opacity: 0.6 }
+  ];
+
+  const panel0Transforms = {
+    y: useTransform(ySpring, [0, maxDrag], [stackEffect[0].y, 0]),
+    scale: useTransform(ySpring, [0, maxDrag], [stackEffect[0].scale, 1]),
+    rotateX: useTransform(ySpring, [0, maxDrag], [stackEffect[0].rotateX, 0]),
+    opacity: useTransform(
+      ySpring,
+      [0, maxDrag * 0.3, maxDrag],
+      [stackEffect[0].opacity, 0.8, 1]
+    ),
+    z: useTransform(ySpring, [0, maxDrag], [-(0 * 10), 0 * 5])
+  };
+
+  const panel1Transforms = {
+    y: useTransform(ySpring, [0, maxDrag], [stackEffect[1].y, 0]),
+    scale: useTransform(ySpring, [0, maxDrag], [stackEffect[1].scale, 1]),
+    rotateX: useTransform(ySpring, [0, maxDrag], [stackEffect[1].rotateX, 0]),
+    opacity: useTransform(
+      ySpring,
+      [0, maxDrag * 0.3, maxDrag],
+      [stackEffect[1].opacity, 0.8, 1]
+    ),
+    z: useTransform(ySpring, [0, maxDrag], [-(1 * 10), 1 * 5])
+  };
+
+  const panel2Transforms = {
+    y: useTransform(ySpring, [0, maxDrag], [stackEffect[2].y, 0]),
+    scale: useTransform(ySpring, [0, maxDrag], [stackEffect[2].scale, 1]),
+    rotateX: useTransform(ySpring, [0, maxDrag], [stackEffect[2].rotateX, 0]),
+    opacity: useTransform(
+      ySpring,
+      [0, maxDrag * 0.3, maxDrag],
+      [stackEffect[2].opacity, 0.8, 1]
+    ),
+    z: useTransform(ySpring, [0, maxDrag], [-(2 * 10), 2 * 5])
+  };
+
+  const panel3Transforms = {
+    y: useTransform(ySpring, [0, maxDrag], [stackEffect[3].y, 0]),
+    scale: useTransform(ySpring, [0, maxDrag], [stackEffect[3].scale, 1]),
+    rotateX: useTransform(ySpring, [0, maxDrag], [stackEffect[3].rotateX, 0]),
+    opacity: useTransform(
+      ySpring,
+      [0, maxDrag * 0.3, maxDrag],
+      [stackEffect[3].opacity, 0.8, 1]
+    ),
+    z: useTransform(ySpring, [0, maxDrag], [-(3 * 10), 3 * 5])
+  };
+
+  const panel4Transforms = {
+    y: useTransform(ySpring, [0, maxDrag], [stackEffect[4].y, 0]),
+    scale: useTransform(ySpring, [0, maxDrag], [stackEffect[4].scale, 1]),
+    rotateX: useTransform(ySpring, [0, maxDrag], [stackEffect[4].rotateX, 0]),
+    opacity: useTransform(
+      ySpring,
+      [0, maxDrag * 0.3, maxDrag],
+      [stackEffect[4].opacity, 0.8, 1]
+    ),
+    z: useTransform(ySpring, [0, maxDrag], [-(4 * 10), 4 * 5])
+  };
+
+  const panelTransforms = [
+    panel0Transforms,
+    panel1Transforms,
+    panel2Transforms,
+    panel3Transforms,
+    panel4Transforms
+  ];
+
+  const globalRotateX = useTransform(ySpring, [0, maxDrag], [0, -2]);
+  const globalZ = useTransform(ySpring, [0, maxDrag], [0, 30]);
+
+  return (
+    <ChakraProvider theme={theme} resetCSS>
+      <Flex
+        w="100%"
+        h="100vh"
+        overflow="hidden"
         align="center"
-        sx={{ perspective: "2400px" }}
-        width="100%"
-        height={`${PANEL_H}px`}
-        position="relative"
+        justify="center"
+        px={4}
       >
-        <motion.div
+        <MotionFlex
           style={{
-            position: "absolute",
-            left: "50%",
-            width: PANEL_W * PANELS.length,
-            height: PANEL_H,
-            transformStyle: "preserve-3d",
-            willChange: "transform"
+            y: componentY,
+            rotateX: globalRotateX,
+            z: globalZ
+          }}
+          animate={{
+            rotateY: isFolded ? 0 : 1
           }}
-          variants={deckVariants}
-          animate={open ? "open" : "closed"}
-          initial="closed"
+          transition={{ type: "spring", stiffness: 300, damping: 25 }}
         >
-          {PANELS.map((i) => {
-            const isCentre = i === 0;
-            const side: "left" | "right" | "center" =
-              i < 0 ? "left" : i > 0 ? "right" : "center";
-
-            return (
-              <AnimatePresence key={i}>
-                {(isCentre || open) && (
-                  <motion.div
-                    variants={panelVariants(side)}
-                    initial="initial"
-                    animate={open ? "open" : "closed"}
-                    exit="closed"
+          <MotionBox
+            as="button"
+            drag="y"
+            dragConstraints={{ top: 0, bottom: maxDrag }}
+            dragElastic={0.15}
+            dragTransition={{
+              power: 0.2,
+              timeConstant: 500,
+              modifyTarget: (t) => (t > maxDrag * 0.5 ? maxDrag : 0)
+            }}
+            style={{
+              y: yDrag,
+              width: size.width,
+              height: size.height
+            }}
+            cursor="grab"
+            _active={{ cursor: "grabbing" }}
+            _hover={{
+              boxShadow: isFolded
+                ? "0 12px 30px -6px rgba(0, 0, 0, 0.15), 0 12px 12px -6px rgba(0, 0, 0, 0.06)"
+                : undefined
+            }}
+            position="relative"
+            borderRadius="xl"
+            boxShadow="2xl"
+            overflow="hidden"
+            bg={bgColor}
+            animate={{
+              boxShadow: isFolded
+                ? "0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)"
+                : "0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05)"
+            }}
+            transition={{ duration: 0.3 }}
+            onClick={toggleFoldState}
+            aria-label={isFolded ? "Open FAQ" : "Close FAQ"}
+          >
+            <Box
+              display="grid"
+              gridTemplateRows={`repeat(${faqItems.length}, 1fr)`}
+              h="full"
+              w="full"
+            >
+              {faqItems.map((faq, i) => {
+                const transforms = panelTransforms[i];
+
+                return (
+                  <MotionBox
+                    key={i}
                     style={{
-                      width: PANEL_W,
-                      height: PANEL_H,
-                      position: "absolute",
-                      left: leftOf(i + 2),
-                      background: isCentre ? bg : altBg,
-                      borderRadius: 10,
-                      border: `1px solid ${borderColor}`,
-                      boxShadow: `0px 5px 15px ${shadow}`,
-                      display: "flex",
-                      flexDirection: "column",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      padding: 30,
-                      transformOrigin: i < 0 ? "right center" : "left center",
-                      zIndex: 10 - Math.abs(i)
+                      y: transforms.y,
+                      scale: transforms.scale,
+                      rotateX: transforms.rotateX,
+                      opacity: transforms.opacity,
+                      z: transforms.z,
+                      transformStyle: "preserve-3d",
+                      transformOrigin: "center center"
+                    }}
+                    borderBottom={
+                      i < faqItems.length - 1 ? "1px solid" : undefined
+                    }
+                    borderTop={i > 0 ? "1px solid" : undefined}
+                    borderColor="gray.100"
+                    bg={bgColor}
+                    boxShadow="lg"
+                    overflow="hidden"
+                  >
+                    <MotionBox
+                      p={3}
+                      h="full"
+                      display="flex"
+                      flexDirection="column"
+                      justifyContent="center"
+                      animate={{
+                        filter: isFolded ? "brightness(0.85)" : "brightness(1)"
+                      }}
+                      transition={{
+                        duration: 0.4,
+                        delay: i * 0.05,
+                        type: "spring",
+                        stiffness: 200
+                      }}
+                    >
+                      <VStack spacing={2} align="stretch">
+                        <AnimatePresence mode="wait">
+                          {!isFolded && (
+                            <MotionBox
+                              bg={cardBg}
+                              p={3}
+                              borderRadius="md"
+                              boxShadow="md"
+                              initial={{
+                                opacity: 0,
+                                y: 30,
+                                rotateX: -20,
+                                scale: 0.9,
+                                z: -50
+                              }}
+                              animate={{
+                                opacity: 1,
+                                y: 0,
+                                rotateX: 0,
+                                scale: 1,
+                                z: 0
+                              }}
+                              exit={{
+                                opacity: 0,
+                                y: -20,
+                                rotateX: 15,
+                                scale: 0.95,
+                                z: -30
+                              }}
+                              transition={{
+                                type: "spring",
+                                stiffness: 300,
+                                damping: 25,
+                                delay: 0.1 + i * 0.08
+                              }}
+                              whileHover={{
+                                scale: 1.02,
+                                y: -2,
+                                rotateX: 1,
+                                boxShadow: "lg",
+                                transition: { duration: 0.2 }
+                              }}
+                            >
+                              <MotionHeading
+                                fontSize="sm"
+                                mb={2}
+                                color={accent}
+                                fontWeight="bold"
+                                lineHeight="1.3"
+                                initial={{ opacity: 0, y: -10, rotateX: -5 }}
+                                animate={{ opacity: 1, y: 0, rotateX: 0 }}
+                                transition={{
+                                  delay: 0.2 + i * 0.08,
+                                  duration: 0.4,
+                                  type: "spring"
+                                }}
+                              >
+                                {faq.question}
+                              </MotionHeading>
+                              <MotionText
+                                fontSize="xs"
+                                color={textColor}
+                                lineHeight="1.4"
+                                initial={{ opacity: 0, y: 10, scale: 0.98 }}
+                                animate={{ opacity: 1, y: 0, scale: 1 }}
+                                transition={{
+                                  delay: 0.3 + i * 0.08,
+                                  duration: 0.5,
+                                  type: "spring"
+                                }}
+                              >
+                                {faq.answer}
+                              </MotionText>
+                            </MotionBox>
+                          )}
+                        </AnimatePresence>
+                      </VStack>
+                    </MotionBox>
+                  </MotionBox>
+                );
+              })}
+            </Box>
+
+            <AnimatePresence>
+              {isFolded && (
+                <MotionBox
+                  position="absolute"
+                  inset={0}
+                  bg={bgColor}
+                  display="flex"
+                  flexDirection="column"
+                  alignItems="center"
+                  justifyContent="center"
+                  pointerEvents="none"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  exit={{
+                    opacity: 0,
+                    scale: 1.05,
+                    rotateX: 3
+                  }}
+                  transition={{ duration: 0.4 }}
+                >
+                  <MotionHeading
+                    fontSize="4xl"
+                    fontWeight="black"
+                    color={accent}
+                    initial={{ scale: 0.8, opacity: 0, rotateX: -5 }}
+                    animate={{
+                      scale: 1,
+                      opacity: 1,
+                      rotateX: 0
+                    }}
+                    transition={{
+                      type: "spring",
+                      stiffness: 300,
+                      damping: 20,
+                      delay: 0.1
+                    }}
+                  >
+                    {title}
+                  </MotionHeading>
+                  <MotionText
+                    mt={4}
+                    color="gray.500"
+                    fontSize="sm"
+                    fontWeight="medium"
+                    textAlign="center"
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{
+                      opacity: [0.7, 1, 0.7],
+                      y: [0, -3, 0]
+                    }}
+                    transition={{
+                      opacity: {
+                        duration: 2,
+                        repeat: Infinity,
+                        ease: "easeInOut"
+                      },
+                      y: {
+                        duration: 2,
+                        repeat: Infinity,
+                        ease: "easeInOut"
+                      }
                     }}
                   >
-                    {isCentre ? (
-                      <>
-                        <Text fontSize="5xl" fontWeight="bold" mb={10}>
-                          FAQ
-                        </Text>
-                        <Box
-                          w="80%"
-                          h="180px"
-                          bg="gray.100"
-                          mb={12}
-                          borderRadius="md"
-                        />
-                        <Button
-                          size="lg"
-                          px={8}
-                          colorScheme="blue"
-                          onClick={() => setOpen((o) => !o)}
-                        >
-                          {open ? "Close" : "Open"}
-                        </Button>
-                      </>
-                    ) : (
-                      <>
-                        <Box
-                          w="90%"
-                          h="120px"
-                          bg="gray.100"
-                          mb={6}
-                          mt={8}
-                          mx="auto"
-                          borderRadius="md"
-                        />
-                        <Box
-                          w="90%"
-                          h="calc(100% - 160px)"
-                          bg="gray.100"
-                          mx="auto"
-                          borderRadius="md"
-                        />
-                      </>
-                    )}
-                  </motion.div>
-                )}
-              </AnimatePresence>
-            );
-          })}
-        </motion.div>
+                    Tap or swipe down to open ↓<br />
+                    <Text as="span" fontSize="xs" opacity={0.8}>
+                      Press Space or Enter
+                    </Text>
+                  </MotionText>
+                </MotionBox>
+              )}
+            </AnimatePresence>
+          </MotionBox>
+        </MotionFlex>
       </Flex>
-    </Box>
+    </ChakraProvider>
   );
 };
 
diff --git a/apps/info/src/components/Navbar.tsx b/apps/info/src/components/Navbar.tsx
index 0f4b3970..1f097c71 100644
--- a/apps/info/src/components/Navbar.tsx
+++ b/apps/info/src/components/Navbar.tsx
@@ -17,6 +17,9 @@ export const Navbar = () => {
           <Link as={NavLink} to="/faq">
             FAQ
           </Link>
+          <Link as={NavLink} to="/team">
+            Team
+          </Link>
         </HStack>
       </Flex>
     </Box>
diff --git a/apps/info/src/pages/Home/Carousel.tsx b/apps/info/src/pages/Home/Carousel.tsx
new file mode 100644
index 00000000..23ae2d5e
--- /dev/null
+++ b/apps/info/src/pages/Home/Carousel.tsx
@@ -0,0 +1,337 @@
+// interface CarouselItem {
+//   title: string;
+//   image: string;
+// }
+
+// interface CircularCarouselProps {
+//   items: CarouselItem[];
+// }
+
+import { useState } from "react";
+import {
+  Box,
+  Heading,
+  Flex,
+  Image,
+  Text,
+  Button,
+  useBreakpointValue
+} from "@chakra-ui/react";
+
+const CircularCarousel = () => {
+  const items = [
+    { title: "RP 2025 Site", image: "/images/rp2025site.png" },
+    { title: "RP 2025 Site 2", image: "/images/rp2025site.png" },
+    { title: "RP 2025 Site 3", image: "/images/rp2025site.png" }
+  ];
+
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const isMobile = useBreakpointValue({ base: true, md: false }) ?? true;
+
+  const defaultConfig = {
+    containerHeight: "500px",
+    headingSize: "3xl",
+    headingMb: 6,
+    horizontalRadius: 120,
+    verticalRadius: 80,
+    itemWidth: "250px",
+    itemHeight: "180px",
+    itemMarginLeft: "-90px",
+    itemMarginTop: "-60px",
+    ellipseWidth: "260px",
+    ellipseHeight: "180px",
+    buttonSpacing: 4,
+    buttonSize: "md",
+    buttonPx: 6,
+    navMt: 8,
+    fontSize: "16px"
+  };
+
+  const desktopConfig = {
+    containerHeight: "700px",
+    headingSize: "5xl",
+    headingMb: 10,
+    horizontalRadius: 300,
+    verticalRadius: 180,
+    itemWidth: "300px",
+    itemHeight: "200px",
+    itemMarginLeft: "-140px",
+    itemMarginTop: "-90px",
+    ellipseWidth: "620px",
+    ellipseHeight: "380px",
+    buttonSpacing: 6,
+    buttonSize: "lg",
+    buttonPx: 8,
+    navMt: 40,
+    fontSize: "22px"
+  };
+
+  const config =
+    useBreakpointValue({
+      base: defaultConfig,
+      md: desktopConfig
+    }) ?? defaultConfig;
+
+  const handleItemClick = (index: number) => {
+    if (isAnimating || index === activeIndex) return;
+
+    setIsAnimating(true);
+
+    const totalItems = items.length;
+    const clockwiseSteps = (index - activeIndex + totalItems) % totalItems;
+    const counterClockwiseSteps =
+      (activeIndex - index + totalItems) % totalItems;
+
+    const shouldGoClockwise = clockwiseSteps <= counterClockwiseSteps;
+    const stepsToTake = shouldGoClockwise
+      ? clockwiseSteps
+      : counterClockwiseSteps;
+    const direction = shouldGoClockwise ? 1 : -1;
+
+    if (stepsToTake === 1) {
+      setActiveIndex(index);
+      setTimeout(() => setIsAnimating(false), 500);
+      return;
+    }
+
+    let currentStep = 0;
+
+    const animateStep = () => {
+      if (currentStep >= stepsToTake) {
+        setIsAnimating(false);
+        return;
+      }
+
+      setActiveIndex((prev) => (prev + direction + totalItems) % totalItems);
+      currentStep++;
+
+      setTimeout(animateStep, 300);
+    };
+
+    animateStep();
+  };
+
+  const handleNavClick = (direction: string) => {
+    if (isAnimating) return;
+
+    setIsAnimating(true);
+    const newIndex =
+      direction === "prev"
+        ? (activeIndex - 1 + items.length) % items.length
+        : (activeIndex + 1) % items.length;
+
+    setActiveIndex(newIndex);
+    setTimeout(() => setIsAnimating(false), 500);
+  };
+
+  const getItemStyle = (index: number) => {
+    const totalItems = items.length;
+    const angleDegree = 360 / totalItems;
+    const baseAngle = angleDegree * (index - activeIndex);
+    const radians = (baseAngle * Math.PI) / 180;
+
+    const x = config.horizontalRadius * Math.sin(radians);
+    const y = config.verticalRadius * Math.cos(radians);
+    const zIndex = Math.round(50 - y / 10);
+
+    const scale =
+      0.8 + ((y + config.verticalRadius) / (config.verticalRadius * 2)) * 0.3;
+    const isFrontItem = index === activeIndex;
+
+    return {
+      transform: `translate(${x}px, ${y}px) scale(${scale})`,
+      zIndex,
+      opacity:
+        0.8 + ((y + config.verticalRadius) / (config.verticalRadius * 2)) * 0.4,
+      boxShadow: isFrontItem
+        ? "0 10px 30px rgba(0,0,0,0.4)"
+        : "0 5px 15px rgba(0,0,0,0.2)"
+    };
+  };
+
+  if (isMobile) {
+    return (
+      <Flex direction="column" align="center" w="100%" px={4} py={6}>
+        <Heading
+          fontSize={config.headingSize}
+          mb={config.headingMb}
+          textAlign="center"
+        >
+          Meet the Team
+        </Heading>
+
+        <Box position="relative" w="100%" maxW="400px" mb={6}>
+          <Image
+            src={items[activeIndex].image}
+            alt={items[activeIndex].title}
+            w="100%"
+            h="250px"
+            objectFit="cover"
+            borderRadius="16px"
+            boxShadow="0 10px 30px rgba(0,0,0,0.4)"
+          />
+          <Text
+            position="absolute"
+            bottom="16px"
+            left="16px"
+            color="white"
+            fontSize={config.fontSize}
+            fontWeight="bold"
+            textShadow="0 2px 4px rgba(0,0,0,0.5)"
+          >
+            {items[activeIndex].title}
+          </Text>
+        </Box>
+
+        <Flex justifyContent="center" gap={2} mb={6}>
+          {items.map((_, index) => (
+            <Box
+              key={index}
+              w="12px"
+              h="12px"
+              borderRadius="50%"
+              bg={index === activeIndex ? "blue.500" : "gray.300"}
+              cursor="pointer"
+              onClick={() => handleItemClick(index)}
+              transition="all 0.3s"
+            />
+          ))}
+        </Flex>
+
+        <Flex justifyContent="center" gap={config.buttonSpacing}>
+          <Button
+            onClick={() => handleNavClick("prev")}
+            colorScheme="blue"
+            size={config.buttonSize}
+            px={config.buttonPx}
+            isDisabled={isAnimating}
+            _hover={{ transform: "translateY(-2px)" }}
+            transition="all 0.2s"
+          >
+            Previous
+          </Button>
+          <Button
+            onClick={() => handleNavClick("next")}
+            colorScheme="blue"
+            size={config.buttonSize}
+            px={config.buttonPx}
+            isDisabled={isAnimating}
+            _hover={{ transform: "translateY(-2px)" }}
+            transition="all 0.2s"
+          >
+            Next
+          </Button>
+        </Flex>
+      </Flex>
+    );
+  }
+
+  return (
+    <Flex
+      direction="column"
+      align="center"
+      position="relative"
+      w="100%"
+      h={config.containerHeight}
+      pt={8}
+    >
+      <Heading fontSize={config.headingSize} mb={config.headingMb}>
+        Meet the Team
+      </Heading>
+      <Box position="relative" w="100%" h="500px" mx="auto">
+        <Box
+          position="absolute"
+          top="50%"
+          left="50%"
+          transform="translate(-50%, -50%)"
+          w={config.ellipseWidth}
+          h={config.ellipseHeight}
+          borderRadius="50%"
+          border="2px dashed"
+          borderColor="gray.200"
+          zIndex={0}
+        />
+
+        {items.map((item, index) => (
+          <Box
+            key={index}
+            position="absolute"
+            top="50%"
+            left="50%"
+            w={config.itemWidth}
+            h={config.itemHeight}
+            ml={config.itemMarginLeft}
+            mt={config.itemMarginTop}
+            transition="all 0.5s ease-in-out"
+            cursor="pointer"
+            borderRadius="16px"
+            overflow="hidden"
+            boxShadow={getItemStyle(index).boxShadow}
+            transform={getItemStyle(index).transform}
+            zIndex={getItemStyle(index).zIndex}
+            opacity={getItemStyle(index).opacity}
+            _hover={{
+              transform: `${
+                getItemStyle(index).transform.split(")")[0]
+              }) scale(${
+                parseFloat(getItemStyle(index).transform.split("scale(")[1]) +
+                0.05
+              })`,
+              boxShadow: "0 15px 35px rgba(0,0,0,0.25)"
+            }}
+            onClick={() => handleItemClick(index)}
+          >
+            <Image
+              src={item.image}
+              alt={item.title}
+              w="100%"
+              h="100%"
+              objectFit="cover"
+            />
+            <Text
+              position="absolute"
+              bottom="16px"
+              left="16px"
+              color="white"
+              fontSize={config.fontSize}
+              fontWeight="bold"
+              textShadow="0 2px 4px rgba(0,0,0,0.5)"
+            >
+              {item.title}
+            </Text>
+          </Box>
+        ))}
+      </Box>
+
+      <Flex justifyContent="center" mt={config.navMt} mb={10}>
+        <Button
+          onClick={() => handleNavClick("prev")}
+          colorScheme="blue"
+          size={config.buttonSize}
+          mr={config.buttonSpacing}
+          px={config.buttonPx}
+          isDisabled={isAnimating}
+          _hover={{ transform: "translateY(-2px)" }}
+          transition="all 0.2s"
+        >
+          Previous
+        </Button>
+        <Button
+          onClick={() => handleNavClick("next")}
+          colorScheme="blue"
+          size={config.buttonSize}
+          px={config.buttonPx}
+          isDisabled={isAnimating}
+          _hover={{ transform: "translateY(-2px)" }}
+          transition="all 0.2s"
+        >
+          Next
+        </Button>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default CircularCarousel;
diff --git a/apps/info/src/routes/Home.tsx b/apps/info/src/routes/Home.tsx
index 5e08c035..fa9c50ba 100644
--- a/apps/info/src/routes/Home.tsx
+++ b/apps/info/src/routes/Home.tsx
@@ -1,4 +1,5 @@
 // src/routes/Home.tsx
+import CircularCarousel from "@/pages/Home/Carousel";
 import { ExhibitSection } from "../pages/Home/ExhibitSection";
 import { Header } from "../pages/Home/Header";
 import Stats from "../pages/Home/Stats";
@@ -9,6 +10,7 @@ export const Home = () => {
       <Header />
       <Stats />
       <ExhibitSection />
+      <CircularCarousel />
     </>
   );
 };
diff --git a/apps/info/src/routes/Team.tsx b/apps/info/src/routes/Team.tsx
new file mode 100644
index 00000000..7faf4d05
--- /dev/null
+++ b/apps/info/src/routes/Team.tsx
@@ -0,0 +1,468 @@
+import React from "react";
+import {
+  Box,
+  Container,
+  Heading,
+  Text,
+  VStack,
+  Image,
+  useBreakpointValue,
+  Divider,
+  Flex
+} from "@chakra-ui/react";
+
+const TeamPage: React.FC = () => {
+  const sidebarWidth = useBreakpointValue({
+    base: "60px",
+    md: "80px",
+    lg: "120px"
+  });
+  const headingSize = useBreakpointValue({
+    base: "lg",
+    md: "xl",
+    lg: "2xl",
+    xl: "3xl"
+  });
+  const spacing = useBreakpointValue({ base: 3, md: 4, lg: 6, xl: 8 });
+
+  const blankImage =
+    "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
+
+  const TeamSection: React.FC<{
+    title: string;
+    children: React.ReactNode;
+    sectionBg?: string;
+  }> = ({ title, children, sectionBg = "white" }) => (
+    <Box bg={sectionBg}>
+      <Flex direction={{ base: "column", md: "row" }} align="flex-start">
+        <Box
+          bg="black"
+          color="white"
+          width={{ base: "100%", md: sidebarWidth }}
+          height={{ base: "50px", md: "auto" }}
+          minHeight={{ base: "auto", md: "500px" }}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          position={{ base: "static", md: "sticky" }}
+          top={{ base: "auto", md: 0 }}
+          zIndex={1}
+          mb={{ base: spacing, md: 0 }}
+        >
+          <Text
+            transform={{ base: "none", md: "rotate(-90deg)" }}
+            whiteSpace="nowrap"
+            fontSize={{ base: "md", md: "sm", lg: "md" }}
+            fontWeight="medium"
+            letterSpacing="wider"
+            textAlign="center"
+          >
+            {title}
+          </Text>
+        </Box>
+
+        <Box
+          flex={1}
+          px={{ base: 3, md: spacing }}
+          display="flex"
+          justifyContent="center"
+          alignItems="flex-start"
+          width="100%"
+        >
+          {children}
+        </Box>
+      </Flex>
+    </Box>
+  );
+
+  const ImageBox: React.FC<{
+    width: string;
+    height: string;
+    isHighlighted?: boolean;
+    mobileWidth?: string;
+    mobileHeight?: string;
+  }> = ({
+    width,
+    height,
+    isHighlighted = false,
+    mobileWidth,
+    mobileHeight
+  }) => (
+    <Box
+      bg="gray.200"
+      width={{
+        base: mobileWidth || `${Math.round(parseInt(width) * 0.6)}px`,
+        md: width
+      }}
+      height={{
+        base: mobileHeight || `${Math.round(parseInt(height) * 0.6)}px`,
+        md: height
+      }}
+      borderRadius="md"
+      overflow="hidden"
+      border={isHighlighted ? "4px solid blue.500" : "none"}
+      display="inline-block"
+      flexShrink={0}
+    >
+      <Image
+        src={blankImage}
+        alt="Team member"
+        width="100%"
+        height="100%"
+        objectFit="cover"
+        bg="gray.200"
+      />
+    </Box>
+  );
+
+  return (
+    <Box minHeight="100vh" bg="gray.50">
+      <Container maxW="container.xl" py={spacing} px={{ base: 4, md: 6 }}>
+        <VStack spacing={spacing} align="center">
+          <Heading
+            size={headingSize}
+            color="black"
+            fontWeight="bold"
+            textAlign="center"
+          >
+            2025
+          </Heading>
+          <Text
+            fontSize={{ base: "md", md: "lg", lg: "xl" }}
+            color="gray.700"
+            textAlign="center"
+          >
+            Meet the team
+          </Text>
+
+          <VStack spacing={spacing} py={spacing}>
+            <Heading
+              size={{ base: "sm", md: "md" }}
+              color="gray.600"
+              textDecoration="underline"
+              textAlign="center"
+            >
+              Co - Directors
+            </Heading>
+            <Flex
+              direction={{ base: "column", sm: "row" }}
+              gap={spacing}
+              justify="center"
+              align="center"
+            >
+              <VStack>
+                <Box
+                  width={{ base: "140px", md: "180px", lg: "225px" }}
+                  height={{ base: "140px", md: "180px", lg: "225px" }}
+                  bg="gray.200"
+                  borderRadius="md"
+                  overflow="hidden"
+                  border="2px solid gray.300"
+                >
+                  <Image
+                    src={blankImage}
+                    alt="Shreenija"
+                    width="100%"
+                    height="100%"
+                    objectFit="cover"
+                  />
+                </Box>
+                <Text fontSize={{ base: "xs", md: "sm" }} fontWeight="medium">
+                  Shreenija
+                </Text>
+              </VStack>
+              <VStack>
+                <Box
+                  width={{ base: "140px", md: "180px", lg: "225px" }}
+                  height={{ base: "140px", md: "180px", lg: "225px" }}
+                  bg="gray.200"
+                  borderRadius="md"
+                  overflow="hidden"
+                  border="2px solid gray.300"
+                >
+                  <Image
+                    src={blankImage}
+                    alt="Cole"
+                    width="100%"
+                    height="100%"
+                    objectFit="cover"
+                  />
+                </Box>
+                <Text fontSize={{ base: "xs", md: "sm" }} fontWeight="medium">
+                  Cole
+                </Text>
+              </VStack>
+            </Flex>
+          </VStack>
+        </VStack>
+      </Container>
+
+      <Divider borderColor="gray.300" />
+
+      <TeamSection title="Development Team">
+        <VStack spacing={{ base: 4, md: 6 }} align="center">
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="180px" height="120px" />
+            <ImageBox width="210px" height="150px" />
+            <ImageBox width="150px" height="165px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="165px" height="135px" />
+            <ImageBox width="180px" height="150px" />
+            <ImageBox width="135px" height="180px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="150px" height="180px" />
+            <ImageBox width="195px" height="142px" />
+            <ImageBox width="127px" height="172px" />
+          </Flex>
+        </VStack>
+      </TeamSection>
+
+      <Divider borderColor="gray.300" />
+
+      <TeamSection title="Design Team" sectionBg="blue.50">
+        <VStack spacing={{ base: 4, md: 6 }} align="center">
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="135px" height="135px" isHighlighted />
+            <ImageBox width="165px" height="105px" />
+            <ImageBox width="195px" height="150px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="180px" height="165px" />
+            <ImageBox width="150px" height="127px" />
+            <ImageBox width="120px" height="180px" />
+            <ImageBox width="165px" height="142px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="127px" height="150px" />
+            <ImageBox width="187px" height="112px" />
+            <ImageBox width="157px" height="172px" />
+            <ImageBox width="142px" height="135px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="210px" height="127px" />
+            <ImageBox width="135px" height="157px" />
+          </Flex>
+        </VStack>
+      </TeamSection>
+
+      <Divider borderColor="gray.300" />
+
+      <TeamSection title="Content Team">
+        <VStack spacing={{ base: 4, md: 6 }} align="center">
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="150px" height="142px" />
+            <ImageBox width="210px" height="165px" />
+            <ImageBox width="135px" height="150px" />
+            <ImageBox width="180px" height="112px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="127px" height="180px" />
+            <ImageBox width="187px" height="127px" />
+            <ImageBox width="142px" height="172px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="165px" height="157px" />
+            <ImageBox width="120px" height="195px" />
+            <ImageBox width="150px" height="165px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="202px" height="142px" />
+            <ImageBox width="157px" height="127px" />
+          </Flex>
+        </VStack>
+      </TeamSection>
+
+      <Divider borderColor="gray.300" />
+
+      <TeamSection title="Corporate Team">
+        <VStack spacing={{ base: 4, md: 6 }} align="center">
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="165px" height="165px" />
+            <ImageBox width="142px" height="127px" />
+            <ImageBox width="187px" height="180px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="150px" height="112px" />
+            <ImageBox width="135px" height="157px" />
+            <ImageBox width="210px" height="135px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="127px" height="172px" />
+            <ImageBox width="180px" height="142px" />
+            <ImageBox width="195px" height="165px" />
+          </Flex>
+        </VStack>
+      </TeamSection>
+
+      <Divider borderColor="gray.300" />
+
+      <TeamSection title="Marketing Team">
+        <VStack spacing={{ base: 4, md: 6 }} align="center">
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="195px" height="150px" />
+            <ImageBox width="135px" height="180px" />
+            <ImageBox width="172px" height="127px" />
+            <ImageBox width="157px" height="165px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="127px" height="142px" />
+            <ImageBox width="187px" height="172px" />
+            <ImageBox width="150px" height="120px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="165px" height="187px" />
+            <ImageBox width="142px" height="135px" />
+            <ImageBox width="180px" height="157px" />
+          </Flex>
+        </VStack>
+      </TeamSection>
+
+      <Divider borderColor="gray.300" />
+
+      <TeamSection title="Operations Team">
+        <VStack spacing={{ base: 4, md: 6 }} align="center">
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="180px" height="135px" />
+            <ImageBox width="150px" height="165px" />
+            <ImageBox width="210px" height="127px" />
+            <ImageBox width="127px" height="180px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="142px" height="157px" />
+            <ImageBox width="172px" height="142px" />
+            <ImageBox width="195px" height="172px" />
+          </Flex>
+          <Flex
+            direction={{ base: "column", sm: "row" }}
+            gap={{ base: 4, md: 6 }}
+            align="flex-start"
+            justify="center"
+            flexWrap="wrap"
+          >
+            <ImageBox width="157px" height="120px" />
+            <ImageBox width="165px" height="187px" />
+            <ImageBox width="135px" height="150px" />
+          </Flex>
+        </VStack>
+      </TeamSection>
+    </Box>
+  );
+};
+
+export default TeamPage;