4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T2b2a,"use client"; import Image from "next/image"; import { motion } from "motion/react"; import { useState } from "react"; type TeamMember = { id: string; name: string; role: string; location: string; lat: number; lon: number; imageUrl: string; }; const teamMembers: TeamMember[] = [ { id: "1", name: "James", role: "Founder", location: "New York, USA", lat: 40.7128, lon: -74.006, imageUrl: "https://assets.solaceui.com/solaceui-member-four.png", }, { id: "2", name: "Charlotte", role: "Design Engineer", location: "London, UK", lat: 51.5072, lon: -0.1276, imageUrl: "https://assets.solaceui.com/solaceui-member-five.png", }, { id: "3", name: "Alexander", role: "Product Designer", location: "Berlin, Germany", lat: 52.52, lon: 13.405, imageUrl: "https://assets.solaceui.com/solaceui-member-one.png", }, { id: "4", name: "Olivia", role: "Product Manager", location: "Bengaluru, India", lat: 12.9716, lon: 77.5946, imageUrl: "https://assets.solaceui.com/solaceui-member-three.png", }, { id: "5", name: "Clark", role: "Visual Designer", location: "Singapore", lat: 1.3521, lon: 103.8198, imageUrl: "https://assets.solaceui.com/solaceui-member-two.png", }, { id: "6", name: "Pallavi", role: "Growth Engineer", location: "Sydney, Australia", lat: -33.8688, lon: 151.2093, imageUrl: "https://assets.solaceui.com/solaceui-member-six.png", }, { id: "7", name: "Maya", role: "Brand Designer", location: "Toronto, Canada", lat: 43.6532, lon: -79.3832, imageUrl: "https://assets.solaceui.com/solaceui-member-five.png", }, { id: "8", name: "Noah", role: "Frontend Engineer", location: "San Francisco, USA", lat: 37.7749, lon: -122.4194, imageUrl: "https://assets.solaceui.com/solaceui-member-two.png", }, { id: "9", name: "Sofia", role: "Product Strategist", location: "Sao Paulo, Brazil", lat: -23.5558, lon: -46.6396, imageUrl: "https://assets.solaceui.com/solaceui-member-three.png", }, { id: "10", name: "Amara", role: "Community Lead", location: "Lagos, Nigeria", lat: 6.5244, lon: 3.3792, imageUrl: "https://assets.solaceui.com/solaceui-member-six.png", }, { id: "11", name: "Kenji", role: "Motion Designer", location: "Tokyo, Japan", lat: 35.6762, lon: 139.6503, imageUrl: "https://assets.solaceui.com/solaceui-member-one.png", }, { id: "12", name: "Elena", role: "UX Researcher", location: "Madrid, Spain", lat: 40.4168, lon: -3.7038, imageUrl: "https://assets.solaceui.com/solaceui-member-four.png", }, { id: "13", name: "Ivy", role: "Systems Designer", location: "Hong Kong", lat: 22.3193, lon: 114.1694, imageUrl: "https://assets.solaceui.com/solaceui-member-five.png", }, { id: "14", name: "Ethan", role: "Backend Engineer", location: "Cape Town, South Africa", lat: -33.9249, lon: 18.4241, imageUrl: "https://assets.solaceui.com/solaceui-member-two.png", }, ]; const continentPaths = [ "M161 98 198 76 247 79 284 104 316 140 305 174 276 185 257 221 228 231 206 204 178 197 145 167 128 132Z", "M265 228 303 246 325 285 315 329 333 363 314 423 283 471 257 436 253 381 230 346 237 299Z", "M463 112 501 95 548 111 557 139 532 160 494 158 454 144Z", "M493 174 548 164 597 190 616 233 592 277 605 324 572 390 534 383 511 333 482 297 468 238Z", "M575 126 646 94 735 91 819 120 885 170 870 218 806 214 760 243 711 221 650 240 594 211Z", "M661 247 718 255 770 297 793 353 753 382 706 361 674 313Z", "M777 364 827 352 872 377 893 420 851 444 801 431Z", "M414 409 443 399 461 419 434 436Z", "M333 94 374 77 410 91 397 117 353 119Z", ]; const connectionPairs = [ [0, 1], [1, 2], [2, 3], [3, 4], [4, 5], [0, 3], [6, 7], [9, 13], [10, 12], [11, 2], ]; function projectLocation(lat: number, lon: number) { return { x: ((lon + 180) / 360) * 100, y: ((90 - lat) / 180) * 100, }; } export default function Team7() { const [activeMemberId, setActiveMemberId] = useState(teamMembers[1].id); const [hoveredMemberId, setHoveredMemberId] = useState(null); return (

{/*

Remote-first collaboration

*/}

One team, working across time zones

A distributed group of designers, engineers, and operators building from the places where they do their best work.

{teamMembers.map((member, index) => { const position = projectLocation(member.lat, member.lon); const isActive = activeMemberId === member.id; const isHovered = hoveredMemberId === member.id; return ( setActiveMemberId(member.id)} onMouseEnter={() => setHoveredMemberId(member.id)} onMouseLeave={() => setHoveredMemberId(null)} onFocus={() => setHoveredMemberId(member.id)} onBlur={() => setHoveredMemberId(null)} style={{ left: `${position.x}%`, top: `${position.y}%`, zIndex: isHovered ? 60 : isActive ? 40 : 10 + index, }} >

{member.name}

{member.role}

{member.location}

); })}

); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4f",null,{"namespace":"@solaceui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/blocks/team-section/seven/index.tsx","content":"$51","type":"registry:component","target":"components/team-section-7.tsx"}],"className":"h-[70svh] min-h-80"}]]}]