Spaces:
Sleeping
Sleeping
| import React from 'react'; | |
| import { Github, Linkedin } from 'lucide-react'; | |
| const TEAM_MEMBERS = [ | |
| // --- COORDINATION TEAM --- | |
| { | |
| name: "Duniya Vasa", | |
| role: "Group Lead", | |
| team: "Coordination", | |
| image: "/team/duniya_vasa.jpg", | |
| linkedin: "https://www.linkedin.com/in/duniyavasa/", | |
| github: "https://github.com/Duniya-24" | |
| }, | |
| { | |
| name: "Sowjanya N", | |
| role: "Member", | |
| team: "Coordination", | |
| image: "/team/sowjanya_n.jpg", | |
| linkedin: "https://www.linkedin.com/in/sowjanya-n-962319354", | |
| github: "https://github.com/Sowji0118/" | |
| }, | |
| // --- MODEL TEAM --- | |
| { | |
| name: "Pragati Tiwari", | |
| role: "Lead", | |
| team: "Model", | |
| image: "/team/pragati_tiwari.jpg", | |
| linkedin: "https://linkedin.com/in/pragati-tiwari-608b043b5", | |
| github: "https://github.com/pTIWARI-20" | |
| }, | |
| { | |
| name: "Shaik Eshak", | |
| role: "Member", | |
| team: "Model", | |
| image: "/team/shaik_eshak.jpg", | |
| linkedin: "https://www.linkedin.com/in/eshak-s-16738626a/", | |
| github: "https://github.com/Eshakshai" | |
| }, | |
| { | |
| name: "Ippili Raju", | |
| role: "Member", | |
| team: "Model", | |
| image: "/team/ippili_raju.jpg", | |
| linkedin: "https://www.linkedin.com/in/raju-ippili-419051308/", | |
| github: "https://github.com/raju-ippili" | |
| }, | |
| { | |
| name: "Vinitha Giri", | |
| role: "Member", | |
| team: "Model", | |
| image: "/team/vinitha_giri.jpg", | |
| linkedin: "https://www.linkedin.com/in/vinitha-giri/", | |
| github: "https://github.com/vinitha-giri" | |
| }, | |
| { | |
| name: "Asna Abdul Kareem", | |
| role: "Member", | |
| team: "Model", | |
| image: "/team/asna_abdul_kareem.jpg", | |
| linkedin: "https://in.linkedin.com/in/asna-abdul-kareem-6774a6292", | |
| github: "https://github.com/Asnaabdul" | |
| }, | |
| { | |
| name: "Ritesh Bonthalakoti", | |
| role: "Member", | |
| team: "Model", | |
| image: "/team/ritesh_bonthalakoti.jpg", | |
| linkedin: "https://www.linkedin.com/in/ritesh1908", | |
| github: "https://github.com/ritesh-1918" | |
| }, | |
| // --- BACKEND TEAM --- | |
| { | |
| name: "Asmeet Kaur Makkad", | |
| role: "Lead", | |
| team: "Backend", | |
| image: "/team/asmeet_kaur_makkad.jpg", | |
| linkedin: "https://www.linkedin.com/in/asmeet-kaur-makkad-911bb3304", | |
| github: "https://github.com/AsmeetKaurMakkad" | |
| }, | |
| { | |
| name: "Vijayalakshmi S R", | |
| role: "Member", | |
| team: "Backend", | |
| image: "/team/vijayalakshmi_s_r.jpg", | |
| linkedin: "https://www.linkedin.com/in/vijayalakshmi-s-r-6a260228a/", | |
| github: "https://github.com/Vijayalakshmi1412" | |
| }, | |
| { | |
| name: "Dinesh Reddy Vasampelli", | |
| role: "Member", | |
| team: "Backend", | |
| image: "/team/dinesh_reddy_vasampelli.jpg", | |
| linkedin: "https://www.linkedin.com/in/dineshreddy-vasampelli-b11046296/", | |
| github: "https://github.com/vasampellidineshreddy18-bot" | |
| }, | |
| { | |
| name: "Manya Sahasra", | |
| role: "Member", | |
| team: "Backend", | |
| image: "/team/manya_sahasra.jpg", | |
| linkedin: "www.linkedin.com/in/manya2929", | |
| github: "https://github.com/ManyaSaaha9" | |
| }, | |
| // --- FRONTEND TEAM --- | |
| { | |
| name: "Satla Prayukthika", | |
| role: "Lead", | |
| team: "Frontend", | |
| image: "/team/satla_prayukthika.jpg", | |
| linkedin: "https://www.linkedin.com/in/satla-prayukthika-328114291/", | |
| github: "https://github.com/prayukthika03" | |
| }, | |
| { | |
| name: "Bandi Keerthi Krishna", | |
| role: "Member", | |
| team: "Frontend", | |
| image: "/team/bandi_keerthi_krishna.jpg", | |
| linkedin: "https://www.linkedin.com/in/bandikeerthikrishna", | |
| github: "https://github.com/bKeerthi-1205" | |
| }, | |
| { | |
| name: "Shubha G D", | |
| role: "Member", | |
| team: "Frontend", | |
| image: "/team/shubha_g_d.jpg", | |
| linkedin: "https://www.linkedin.com/in/shubha-g-d-a879003b5", | |
| github: "https://github.com/gdshubha148" | |
| }, | |
| { | |
| name: "Phani Kotha", | |
| role: "Member", | |
| team: "Frontend", | |
| image: "/team/kpvvssmphara.jpg", | |
| linkedin: "https://www.linkedin.com/in/phani-kotha-26073439b", | |
| github: "https://github.com/phanikotha18-sudo" | |
| }, | |
| // --- DATA TEAM --- | |
| { | |
| name: "Praneetha Baru", | |
| role: "Lead", | |
| team: "Data", | |
| image: "/team/praneetha_baru.jpg", | |
| linkedin: "https://www.linkedin.com/in/praneetha-baru-0846b0295", | |
| github: "https://github.com/Praneetha7305" | |
| }, | |
| { | |
| name: "Kavin Sarvesh", | |
| role: "Member", | |
| team: "Data", | |
| image: "/team/kavin_sarvesh.jpg", | |
| linkedin: "https://www.linkedin.com/in/kavin-sarvesh-813437360", | |
| github: "https://github.com/Kavinsarvesh2006" | |
| }, | |
| { | |
| name: "Utukuri Naga Sri Hari Chandana", | |
| role: "Member", | |
| team: "Data", | |
| image: "/team/utukuri_naga_sri_hari_chandana.jpg", | |
| linkedin: "https://www.linkedin.com/in/naga-sri-hari-chandana-utukuri-541b072a3", | |
| github: "https://github.com/2300031149-chandana" | |
| }, | |
| { | |
| name: "Akash Kumar Paswan", | |
| role: "Member", | |
| team: "Data", | |
| image: "/team/akash_kumar_paswan.jpg", | |
| linkedin: "https://www.linkedin.com/in/akash-kumar-paswan-951a13361", | |
| github: "https://github.com/Akashpaswan302" | |
| }, | |
| { | |
| name: "Ganesh Goud Tekmul", | |
| role: "Member", | |
| team: "Data", | |
| image: "/team/ganesh_goud_tekmul.jpg", | |
| linkedin: "https://www.linkedin.com/in/ganesh-goud-a55a8b373/", | |
| github: "https://github.com/ganeshgoud96" | |
| } | |
| ]; | |
| // Helper to group members by team | |
| const TEAM_GROUPS = [ | |
| { id: 'Coordination', label: 'Leadership & Coordination' }, | |
| { id: 'Model', label: 'AI & Modeling' }, | |
| { id: 'Backend', label: 'Backend Engineering' }, | |
| { id: 'Frontend', label: 'Frontend Engineering' }, | |
| { id: 'Data', label: 'Data Engineering' } | |
| ]; | |
| export default function TeamSection() { | |
| return ( | |
| <section className="py-24 bg-gray-50/50 border-t border-gray-100"> | |
| <div className="max-w-[1100px] mx-auto px-6"> | |
| {/* Section Header */} | |
| <div className="text-center mb-16"> | |
| <h2 className="text-3xl md:text-4xl font-black text-slate-900 tracking-tight mb-4"> | |
| Meet the Team Behind helpdesk.ai | |
| </h2> | |
| <p className="text-slate-500 font-medium text-lg max-w-2xl mx-auto"> | |
| Built by engineers focused on intelligent support automation. | |
| </p> | |
| </div> | |
| {/* Grouped by Team */} | |
| <div className="space-y-20"> | |
| {TEAM_GROUPS.map((group) => { | |
| const groupMembers = TEAM_MEMBERS.filter(m => m.team === group.id); | |
| if (groupMembers.length === 0) return null; | |
| return ( | |
| <div key={group.id}> | |
| <h3 className="text-xl font-black text-slate-800 uppercase tracking-widest border-b border-gray-200 pb-2 mb-8 inline-block"> | |
| {group.label} | |
| </h3> | |
| {/* Responsive Grid Layout */} | |
| <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-x-8 gap-y-12"> | |
| {groupMembers.map((member, index) => ( | |
| <div | |
| key={index} | |
| className="group relative bg-white border border-slate-100 rounded-2xl p-6 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-out flex flex-col items-center text-center" | |
| > | |
| {/* Image Container with Hover Overlay */} | |
| <div className="relative w-32 h-32 mb-5 rounded-full overflow-hidden border-4 border-white shadow-md bg-gray-100/50"> | |
| {member.image ? ( | |
| <img | |
| src={member.image} | |
| alt={member.name} | |
| className="w-full h-full object-cover" | |
| loading="lazy" | |
| onError={(e) => { | |
| // If image fails to load, fallback to a placeholder | |
| e.target.onerror = null; | |
| e.target.src = `https://ui-avatars.com/api/?name=${encodeURIComponent(member.name)}&background=10b981&color=fff&size=128`; | |
| }} | |
| /> | |
| ) : ( | |
| <div className="w-full h-full bg-emerald-100 text-emerald-800 flex items-center justify-center font-bold text-3xl"> | |
| {member.name.charAt(0)} | |
| </div> | |
| )} | |
| {/* Emerald Overlay on Hover */} | |
| <div className="absolute inset-0 bg-emerald-900/60 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center gap-4 backdrop-blur-sm"> | |
| {member.github && ( | |
| <a | |
| href={member.github.startsWith('http') ? member.github : `https://${member.github}`} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="w-10 h-10 rounded-full bg-white text-emerald-900 flex items-center justify-center hover:scale-110 transition-transform shadow-lg" | |
| aria-label={`${member.name}'s GitHub`} | |
| > | |
| <Github size={20} className="fill-current" /> | |
| </a> | |
| )} | |
| {member.linkedin && ( | |
| <a | |
| href={member.linkedin.startsWith('http') ? member.linkedin : `https://${member.linkedin}`} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="w-10 h-10 rounded-full bg-white text-emerald-900 flex items-center justify-center hover:scale-110 transition-transform shadow-lg" | |
| aria-label={`${member.name}'s LinkedIn`} | |
| > | |
| <Linkedin size={20} className="fill-current" /> | |
| </a> | |
| )} | |
| </div> | |
| </div> | |
| {/* Text Content */} | |
| <div> | |
| <h3 className="text-lg font-bold text-slate-900 mb-1 leading-tight">{member.name}</h3> | |
| <p className={`text-[11px] font-black uppercase tracking-widest ${member.role.includes('Lead') ? 'text-indigo-600' : 'text-emerald-600'}`}> | |
| {member.role} | |
| </p> | |
| </div> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ); | |
| })} | |
| </div> | |
| </div> | |
| </section> | |
| ); | |
| } | |