360 lines
12 KiB
Text
360 lines
12 KiB
Text
---
|
|
import MainLayout from '../layouts/MainLayout.astro';
|
|
|
|
const teamMembers = [
|
|
{
|
|
name: 'Dr. Evelyn Reed',
|
|
role: 'Lead AI Ethicist',
|
|
department: 'Foundation',
|
|
bio: 'Pioneering ethical AI frameworks for decentralized systems. 15+ years in AI research.',
|
|
image: 'https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', twitter: '#', github: '#' },
|
|
},
|
|
{
|
|
name: 'Jaxon "Glitch" Hayes',
|
|
role: 'Principal Security Engineer',
|
|
department: 'Foundation',
|
|
bio: 'Architect of next-gen cyber defense protocols. Previously at Cyberia and DARPA.',
|
|
image: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', github: '#' },
|
|
},
|
|
{
|
|
name: 'Kenji Tanaka',
|
|
role: 'Head of Robotics',
|
|
department: 'Labs',
|
|
bio: 'Leading human-robot collaboration research. Expert in autonomous systems.',
|
|
image: 'https://images.unsplash.com/photo-1548142813-c348350df52b?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', twitter: '#' },
|
|
},
|
|
{
|
|
name: 'Lena Petrova',
|
|
role: 'Quantum Computing Pioneer',
|
|
department: 'Labs',
|
|
bio: 'Driving the quantum revolution at AeThex. PhD from MIT in Quantum Physics.',
|
|
image: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', twitter: '#', github: '#' },
|
|
},
|
|
{
|
|
name: 'Marco Diaz',
|
|
role: 'Senior AR/VR Architect',
|
|
department: 'Corporation',
|
|
bio: 'Building the metaverse infrastructure. 10+ years in immersive technologies.',
|
|
image: 'https://images.unsplash.com/photo-1583195764338-23e08c6954b3?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', github: '#' },
|
|
},
|
|
{
|
|
name: 'Elena Rodriguez',
|
|
role: 'Lead Developer',
|
|
department: 'Corporation',
|
|
bio: 'Full-stack architect driving core platform development. Open source advocate.',
|
|
image: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', twitter: '#', github: '#' },
|
|
},
|
|
{
|
|
name: 'Ben Carter',
|
|
role: 'UX/UI Design Lead',
|
|
department: 'Corporation',
|
|
bio: 'Crafting the visual identity of AeThex products. Human-centered design expert.',
|
|
image: 'https://images.unsplash.com/photo-1544723795-3fb6469f5b39?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', twitter: '#' },
|
|
},
|
|
{
|
|
name: 'Aisha Khan',
|
|
role: 'Data Science Lead',
|
|
department: 'Labs',
|
|
bio: 'Leading analytics and ML initiatives. Specializes in distributed data systems.',
|
|
image: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop',
|
|
socials: { linkedin: '#', github: '#' },
|
|
},
|
|
];
|
|
|
|
const getDeptColor = (dept: string) => {
|
|
switch(dept) {
|
|
case 'Foundation': return '#ef4444';
|
|
case 'Corporation': return '#3b82f6';
|
|
case 'Labs': return '#eab308';
|
|
default: return '#6b7280';
|
|
}
|
|
};
|
|
---
|
|
<MainLayout>
|
|
<!-- Hero Section -->
|
|
<section class="team-hero">
|
|
<div class="hero-bg"></div>
|
|
<div class="hero-content">
|
|
<h1 class="hero-title">Our <span class="gradient-accent">Collective</span></h1>
|
|
<p class="hero-desc">We are a distributed team of researchers, engineers, and strategists united by a shared vision for a decentralized future.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Grid -->
|
|
<section class="team-grid-section">
|
|
<div class="team-grid">
|
|
{teamMembers.map(member => (
|
|
<div class="team-card">
|
|
<div class="card-image-wrapper">
|
|
<img src={member.image} alt={`${member.name}, ${member.role}`} class="team-avatar" />
|
|
<span class="dept-badge" style={`background: ${getDeptColor(member.department)}20; color: ${getDeptColor(member.department)}; border-color: ${getDeptColor(member.department)}40`}>
|
|
{member.department}
|
|
</span>
|
|
</div>
|
|
<div class="card-content">
|
|
<h3 class="team-name">{member.name}</h3>
|
|
<p class="team-role">{member.role}</p>
|
|
<p class="team-bio">{member.bio}</p>
|
|
<div class="team-socials">
|
|
{member.socials.linkedin && (
|
|
<a href={member.socials.linkedin} class="social-link" aria-label="LinkedIn">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect x="2" y="9" width="4" height="12"></rect><circle cx="4" cy="4" r="2"></circle></svg>
|
|
</a>
|
|
)}
|
|
{member.socials.twitter && (
|
|
<a href={member.socials.twitter} class="social-link" aria-label="Twitter">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path></svg>
|
|
</a>
|
|
)}
|
|
{member.socials.github && (
|
|
<a href={member.socials.github} class="social-link" aria-label="GitHub">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Join CTA -->
|
|
<section class="join-cta">
|
|
<div class="cta-content">
|
|
<h2>Join Our Team</h2>
|
|
<p>We're always looking for passionate individuals to join our mission. Check out our open positions or reach out directly.</p>
|
|
<div class="cta-buttons">
|
|
<a href="/contribute" class="cta-button primary">Get Involved →</a>
|
|
<a href="/contact" class="cta-button secondary">Contact Us</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
/* ========== TEAM PAGE STYLES ========== */
|
|
|
|
/* Hero */
|
|
.team-hero {
|
|
position: relative;
|
|
text-align: center;
|
|
padding: 100px 20px 80px 20px;
|
|
overflow: hidden;
|
|
}
|
|
.hero-bg {
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: linear-gradient(135deg, #10131a 0%, #1a1d2e 100%);
|
|
z-index: -1;
|
|
}
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.team-hero .hero-title {
|
|
font-size: 3.5em;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
margin-bottom: 0.5em;
|
|
font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
|
|
letter-spacing: -2px;
|
|
}
|
|
.gradient-accent {
|
|
background: linear-gradient(135deg, #3b82f6, #a855f7);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.team-hero .hero-desc {
|
|
font-size: 1.25em;
|
|
color: #9ca3af;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
/* Team Grid */
|
|
.team-grid-section {
|
|
padding: 60px 20px 80px 20px;
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
}
|
|
.team-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 30px;
|
|
}
|
|
.team-card {
|
|
background: rgba(17, 24, 39, 0.6);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
border-radius: 20px;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.team-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);
|
|
border-color: rgba(59, 130, 246, 0.3);
|
|
}
|
|
.card-image-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
.team-avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
object-position: top;
|
|
}
|
|
.dept-badge {
|
|
position: absolute;
|
|
top: 12px;
|
|
right: 12px;
|
|
padding: 4px 12px;
|
|
font-size: 0.75em;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
border-radius: 20px;
|
|
border: 1px solid;
|
|
}
|
|
.card-content {
|
|
padding: 24px;
|
|
text-align: center;
|
|
}
|
|
.team-name {
|
|
font-size: 1.35em;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-bottom: 4px;
|
|
}
|
|
.team-role {
|
|
font-size: 1em;
|
|
color: #3b82f6;
|
|
font-weight: 600;
|
|
margin-bottom: 12px;
|
|
}
|
|
.team-bio {
|
|
color: #9ca3af;
|
|
font-size: 0.95em;
|
|
line-height: 1.6;
|
|
margin-bottom: 16px;
|
|
}
|
|
.team-socials {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
.social-link {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: rgba(59, 130, 246, 0.1);
|
|
color: #6b7280;
|
|
transition: all 0.2s ease;
|
|
}
|
|
.social-link:hover {
|
|
background: rgba(59, 130, 246, 0.2);
|
|
color: #3b82f6;
|
|
}
|
|
|
|
/* Join CTA */
|
|
.join-cta {
|
|
padding: 80px 20px;
|
|
text-align: center;
|
|
background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%);
|
|
}
|
|
.cta-content {
|
|
max-width: 600px;
|
|
margin: 0 auto;
|
|
}
|
|
.join-cta h2 {
|
|
font-size: 2.5em;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
margin-bottom: 16px;
|
|
font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
|
|
}
|
|
.join-cta p {
|
|
color: #9ca3af;
|
|
font-size: 1.15em;
|
|
line-height: 1.7;
|
|
margin-bottom: 28px;
|
|
}
|
|
.cta-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
.cta-button {
|
|
padding: 14px 28px;
|
|
font-size: 1em;
|
|
font-weight: 600;
|
|
border-radius: 10px;
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.cta-button.primary {
|
|
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
|
color: #fff;
|
|
}
|
|
.cta-button.primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 30px rgba(59, 130, 246, 0.3);
|
|
}
|
|
.cta-button.secondary {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: #fff;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
.cta-button.secondary:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.team-grid { grid-template-columns: repeat(2, 1fr); }
|
|
.leadership-grid { grid-template-columns: repeat(2, 1fr); }
|
|
}
|
|
@media (max-width: 768px) {
|
|
.team-hero { padding: 40px 12px 32px 12px; }
|
|
.team-hero .hero-title { font-size: 2em; letter-spacing: 2px; }
|
|
.team-hero .hero-description { font-size: 0.95em; }
|
|
.team-grid, .leadership-grid { grid-template-columns: 1fr; max-width: 100%; margin: 0 auto; }
|
|
.section-header h2 { font-size: 1.6em; letter-spacing: 2px; }
|
|
.section-header p { font-size: 0.9em; }
|
|
.member-card, .leader-card { padding: 24px 16px; }
|
|
.member-name, .leader-name { font-size: 1.2em; }
|
|
.member-role, .leader-role { font-size: 0.85em; }
|
|
.join-cta { padding: 40px 12px; }
|
|
.join-cta h2 { font-size: 1.6em; }
|
|
.join-cta p { font-size: 0.95em; }
|
|
.cta-buttons { flex-direction: column; gap: 12px; }
|
|
.cta-button { padding: 14px 28px; font-size: 0.85em; }
|
|
}
|
|
@media (max-width: 480px) {
|
|
.team-hero { padding: 24px 10px 20px 10px; }
|
|
.team-hero .hero-title { font-size: 1.6em; letter-spacing: 1px; }
|
|
.team-hero .hero-description { font-size: 0.85em; }
|
|
.section-header h2 { font-size: 1.3em; letter-spacing: 1px; }
|
|
.member-card, .leader-card { padding: 20px 12px; }
|
|
.member-name, .leader-name { font-size: 1.1em; }
|
|
.join-cta { padding: 24px 10px; }
|
|
.join-cta h2 { font-size: 1.3em; }
|
|
.cta-button { width: 100%; max-width: 260px; padding: 12px 20px; }
|
|
}
|
|
</style>
|
|
</MainLayout>
|