+
+
+
+
+
+ {/* Team Member Grid */}
+
+
+
+
+
+ );
+};
+
+const ProfileCard = React.memo(ProfileCardComponent);
+export default ProfileCard;
\ No newline at end of file
diff --git a/src/app/components/TextType/TextType.css b/src/app/components/TextType/TextType.css
new file mode 100644
index 0000000..ca73217
--- /dev/null
+++ b/src/app/components/TextType/TextType.css
@@ -0,0 +1,18 @@
+/*
+ Installed from https://reactbits.dev/default/
+*/
+
+.text-type {
+ display: inline-block;
+ white-space: pre-wrap;
+}
+
+.text-type__cursor {
+ margin-left: 0.25rem;
+ display: inline-block;
+ opacity: 1;
+}
+
+.text-type__cursor--hidden {
+ display: none;
+}
diff --git a/src/app/components/TextType/TextType.jsx b/src/app/components/TextType/TextType.jsx
new file mode 100644
index 0000000..1aa2d6d
--- /dev/null
+++ b/src/app/components/TextType/TextType.jsx
@@ -0,0 +1,177 @@
+/*
+ Installed from https://reactbits.dev/default/
+*/
+
+'use client';
+
+import { useEffect, useRef, useState, createElement, useMemo, useCallback } from 'react';
+import { gsap } from 'gsap';
+import './TextType.css';
+
+const TextType = ({
+ text,
+ as: Component = 'div',
+ typingSpeed = 50,
+ initialDelay = 0,
+ pauseDuration = 2000,
+ deletingSpeed = 30,
+ loop = true,
+ className = '',
+ showCursor = true,
+ hideCursorWhileTyping = false,
+ cursorCharacter = '|',
+ cursorClassName = '',
+ cursorBlinkDuration = 0.5,
+ textColors = [],
+ variableSpeed,
+ onSentenceComplete,
+ startOnVisible = false,
+ reverseMode = false,
+ ...props
+}) => {
+ const [displayedText, setDisplayedText] = useState('');
+ const [currentCharIndex, setCurrentCharIndex] = useState(0);
+ const [isDeleting, setIsDeleting] = useState(false);
+ const [currentTextIndex, setCurrentTextIndex] = useState(0);
+ const [isVisible, setIsVisible] = useState(!startOnVisible);
+ const cursorRef = useRef(null);
+ const containerRef = useRef(null);
+
+ const textArray = useMemo(() => (Array.isArray(text) ? text : [text]), [text]);
+
+ const getRandomSpeed = useCallback(() => {
+ if (!variableSpeed) return typingSpeed;
+ const { min, max } = variableSpeed;
+ return Math.random() * (max - min) + min;
+ }, [variableSpeed, typingSpeed]);
+
+ const getCurrentTextColor = () => {
+ if (textColors.length === 0) return '#ffffff';
+ return textColors[currentTextIndex % textColors.length];
+ };
+
+ useEffect(() => {
+ if (!startOnVisible || !containerRef.current) return;
+
+ const observer = new IntersectionObserver(
+ entries => {
+ entries.forEach(entry => {
+ if (entry.isIntersecting) {
+ setIsVisible(true);
+ }
+ });
+ },
+ { threshold: 0.1 }
+ );
+
+ observer.observe(containerRef.current);
+ return () => observer.disconnect();
+ }, [startOnVisible]);
+
+ useEffect(() => {
+ if (showCursor && cursorRef.current) {
+ gsap.set(cursorRef.current, { opacity: 1 });
+ gsap.to(cursorRef.current, {
+ opacity: 0,
+ duration: cursorBlinkDuration,
+ repeat: -1,
+ yoyo: true,
+ ease: 'power2.inOut'
+ });
+ }
+ }, [showCursor, cursorBlinkDuration]);
+
+ useEffect(() => {
+ if (!isVisible) return;
+
+ let timeout;
+ const currentText = textArray[currentTextIndex];
+ const processedText = reverseMode ? currentText.split('').reverse().join('') : currentText;
+
+ const executeTypingAnimation = () => {
+ if (isDeleting) {
+ if (displayedText === '') {
+ setIsDeleting(false);
+ if (currentTextIndex === textArray.length - 1 && !loop) {
+ return;
+ }
+
+ if (onSentenceComplete) {
+ onSentenceComplete(textArray[currentTextIndex], currentTextIndex);
+ }
+
+ setCurrentTextIndex(prev => (prev + 1) % textArray.length);
+ setCurrentCharIndex(0);
+ timeout = setTimeout(() => {}, pauseDuration);
+ } else {
+ timeout = setTimeout(() => {
+ setDisplayedText(prev => prev.slice(0, -1));
+ }, deletingSpeed);
+ }
+ } else {
+ if (currentCharIndex < processedText.length) {
+ timeout = setTimeout(
+ () => {
+ setDisplayedText(prev => prev + processedText[currentCharIndex]);
+ setCurrentCharIndex(prev => prev + 1);
+ },
+ variableSpeed ? getRandomSpeed() : typingSpeed
+ );
+ } else if (textArray.length > 1) {
+ timeout = setTimeout(() => {
+ setIsDeleting(true);
+ }, pauseDuration);
+ }
+ }
+ };
+
+ if (currentCharIndex === 0 && !isDeleting && displayedText === '') {
+ timeout = setTimeout(executeTypingAnimation, initialDelay);
+ } else {
+ executeTypingAnimation();
+ }
+
+ return () => clearTimeout(timeout);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [
+ currentCharIndex,
+ displayedText,
+ isDeleting,
+ typingSpeed,
+ deletingSpeed,
+ pauseDuration,
+ textArray,
+ currentTextIndex,
+ loop,
+ initialDelay,
+ isVisible,
+ reverseMode,
+ variableSpeed,
+ onSentenceComplete
+ ]);
+
+ const shouldHideCursor =
+ hideCursorWhileTyping && (currentCharIndex < textArray[currentTextIndex].length || isDeleting);
+
+ return createElement(
+ Component,
+ {
+ ref: containerRef,
+ className: `text-type ${className}`,
+ ...props
+ },
+
+ {displayedText}
+ ,
+ showCursor && (
+
+ {cursorCharacter}
+
+ )
+ );
+};
+
+export default TextType;
diff --git a/src/app/team/page.jsx b/src/app/team/page.jsx
new file mode 100644
index 0000000..46d5928
--- /dev/null
+++ b/src/app/team/page.jsx
@@ -0,0 +1,140 @@
+"use client";
+
+import React from "react";
+import { FaLinkedin, FaEnvelope } from "react-icons/fa";
+import ProfileCard from "@/app/components/ProfileCard/ProfileCard";
+import TextType from "@/app/components/TextType/TextType"; // ✅ Typing effect component
+
+const Glow = ({ className = "" }) => (
+
+);
+
+const members = [
+ {
+ name: "Kunal Kushwaha",
+ title: "President",
+ handle: "kunal",
+ avatarUrl: "/team/president.png",
+ linkedin: "https://linkedin.com/in/kunal",
+ gmail: "mailto:kunal@nitrkl.ac.in",
+ },
+ {
+ name: "Rishi Das",
+ title: "Vice President",
+ handle: "rishi",
+ avatarUrl: "/team/vp.png",
+ linkedin: "https://linkedin.com/in/rishi",
+ gmail: "mailto:rishi@nitrkl.ac.in",
+ },
+ {
+ name: "Bibhu",
+ title: "Secretary",
+ handle: "bibhu",
+ avatarUrl: "/team/secretary.png",
+ linkedin: "https://linkedin.com/in/bibhu",
+ gmail: "mailto:bibhu@nitrkl.ac.in",
+ },
+ {
+ name: "Arko Pravo Dey",
+ title: "Treasurer",
+ handle: "arko",
+ avatarUrl: "/team/treasurer.png",
+ linkedin: "https://linkedin.com/in/arko",
+ gmail: "mailto:arko@nitrkl.ac.in",
+ },
+ {
+ name: "Risabh Anand",
+ title: "ML Lead",
+ handle: "risabh",
+ avatarUrl: "/team/mllead.png",
+ linkedin: "https://linkedin.com/in/risabh",
+ gmail: "mailto:risabh@nitrkl.ac.in",
+ },
+];
+
+export default function TeamPage() {
+ return (
+
+
+
+
+ {/* Top image/content */}
+
+
+ 
{
+ const target = e.target;
+ target.style.display = "none";
+ }}
+ />
+
+ {/* Bottom glass bar with handle + icons */}
+ {showUserInfo && (
+
+
+ {/* Name / Title */}
+
+
+ )}
+
+
+
+ {/* 👉 Right side: social icons (prefer these over button) */}
+ {(linkedinUrl || emailHref) ? (
+
+ ) : (
+ // Fallback to button if no social links were provided
+
+ )}
+
+ 
{
+ const target = e.target;
+ target.style.opacity = "0.5";
+ target.src = avatarUrl;
+ }}
+ />
+
+
+
+
+ @{handle}
+ {status ? {status}
: null}
+
+
+
+
+ {name}
+{title}
+