Creative Agency Team Showcase Page

Create a team page for a creative digital agency called "Mosaic Studio" that showcases team members, company culture, and hiring opportunities. The design should feel human, approachable, and creative — reflecting the collaborative energy of the studio.

1. HERO SECTION
- Full-width section with light warm background (#FFFBEB)
- Large headline: "The People Behind the Pixels"
- Subheadline: "32 creatives, engineers, and strategists building digital experiences that matter"
- Below text: a wide candid group photo of the team (landscape format, rounded 16px corners, subtle shadow)
- Floating stat badges overlaying the bottom edge of the photo:
  - "8 Countries" — globe icon
  - "32 Team Members" — people icon
  - "6 Years Average Tenure" — clock icon
- Mobile: stats stack below the photo

2. LEADERSHIP TEAM (featured row)
- Section title: "Leadership"
- 4 large cards in a row (2 on tablet, 1 on mobile):
  - Card 1: Rachel Kim — CEO & Co-Founder
    - Professional headshot with warm color overlay on hover
    - "Former design lead at Spotify. Believes every pixel should have a purpose."
    - Social: LinkedIn, Twitter
  - Card 2: Marcus Chen — CTO & Co-Founder
    - "Full-stack architect with 15 years shipping products at scale. Open-source advocate."
    - Social: LinkedIn, GitHub
  - Card 3: Priya Sharma — Creative Director
    - "Award-winning designer. 3x Webby winner. Obsessed with motion and micro-interactions."
    - Social: LinkedIn, Dribbble
  - Card 4: David Okafor — Head of Strategy
    - "Ex-McKinsey. Turns business problems into design opportunities."
    - Social: LinkedIn, Twitter
- Cards: white background, 16px border-radius, centered layout
- Headshot: circular crop, 120px, subtle border in brand color
- On hover: photo scales slightly, background tints to #FFF7ED

3. FULL TEAM GRID
- Section title: "Meet the Crew"
- Filter pills: All (32) | Design (10) | Engineering (12) | Strategy (5) | Operations (5)
- 4-column responsive grid (3 on tablet, 2 on mobile):
  - Each card: square headshot (fills card top), name, title, one-line fun fact
  - Example members:
    - Sofia Reyes — Senior Designer — "Can identify any typeface in under 3 seconds"
    - James Wright — Frontend Engineer — "Built his first website at age 11"
    - Aiko Tanaka — Motion Designer — "Collects vintage synthesizers"
    - Liam O'Brien — Backend Engineer — "Former professional chess player"
    - Nina Petrova — UX Researcher — "Has interviewed 500+ users this year"
    - Carlos Mendez — Project Manager — "Fluent in 4 languages"
    - Zara Ahmed — Brand Strategist — "Published author on brand psychology"
    - Tom Fischer — DevOps Engineer — "Homebrews beer and deploys on Fridays"
- Card hover: lifts with shadow, reveals social links overlay at bottom
- "View all 32 team members" expand button if showing limited set

4. CULTURE & VALUES SECTION
- Section title: "How We Work"
- Background: #F8FAFC (light gray)
- 3-column layout with icon + title + description:
  - "Craft Over Speed" — paintbrush icon — "We'd rather ship something excellent in 6 weeks than something mediocre in 2. Quality is non-negotiable."
  - "Radical Transparency" — eye icon — "Open salaries, shared P&L, and honest client conversations. No surprises, ever."
  - "Remote-First, Human-Always" — home icon — "Work from anywhere, but we fly the whole team together quarterly for creative retreats."
- Below: 4-image photo collage of team retreats, office moments, whiteboard sessions, team dinners — masonry layout with rounded corners

5. PERKS & BENEFITS
- Section title: "Why People Stay"
- 2-row grid of 6 benefit cards (3 per row, 2 on mobile):
  - "4-Day Work Week" — calendar icon — "Fridays are yours. We've been doing this since 2022."
  - "Learning Budget" — book icon — "$2,500/year for conferences, courses, and books"
  - "Equity for All" — chart icon — "Every team member gets stock options after year one"
  - "Health & Wellness" — heart icon — "Full medical, dental, vision + $500 wellness stipend"
  - "Creative Sabbatical" — sun icon — "4 weeks paid sabbatical every 3 years to recharge and create"
  - "Gear Allowance" — laptop icon — "Top-of-line MacBook Pro, monitor, and $1,000 home office setup"
- Cards: white with left color border (alternating brand colors), 12px border-radius

6. HIRING / OPEN POSITIONS
- Section title: "Join the Studio"
- Subtitle: "We're always looking for talented people who care deeply about craft"
- Open roles list (3-4 items):
  - "Senior Product Designer" — Design — Remote (US/EU) — Full-time
  - "Full-Stack Engineer (Next.js)" — Engineering — Remote — Full-time
  - "Content Strategist" — Strategy — Remote (US) — Full-time
  - "Design Intern — Summer 2026" — Design — New York or Remote — Internship
- Each row: role title (linked), department badge, location, type
- Hover: row highlights with subtle background tint
- "Don't see your role?" section below: "We're always open to meeting exceptional people. Send us your portfolio and a note about what excites you."
- "Send Open Application" button

7. TEAM TESTIMONIAL
- Single large quote block with light purple background (#F5F3FF)
- Quote: "I've worked at agencies, startups, and big tech. Mosaic is the first place where I feel like my craft is genuinely valued and I have real ownership over the work."
- Attribution: Sofia Reyes, Senior Designer — 4 years at Mosaic
- Small circular headshot next to attribution

8. TEAM STATS INFOGRAPHIC
- Full-width section with light orange background (#FFF7ED)
- Section title: "Mosaic by the Numbers"
- 6 stat cards in a 3x2 grid (2 on mobile):
  - "120+" — "Projects Delivered" — rocket icon
  - "4.9/5" — "Average Client Rating" — star icon
  - "98%" — "Client Retention Rate" — refresh icon
  - "15" — "Industry Awards" — trophy icon
  - "8" — "Countries Represented" — globe icon
  - "6 yrs" — "Average Team Tenure" — clock icon
- Cards: white background, centered text, 12px border-radius, subtle shadow on hover
- Numbers in large bold font (48px) with brand color (#F97316), labels in smaller gray text

9. OUR TOOLS & STACK
- Section title: "What We Work With"
- Subtitle: "The tools and technologies our team uses every day"
- 3-column layout (1 on mobile) with category headers:
  - "Design" — Figma, Adobe Creative Suite, Framer, Spline, Rive
  - "Development" — Next.js, React, TypeScript, Tailwind CSS, Node.js
  - "Collaboration" — Linear, Notion, Slack, Loom, GitHub
- Each tool shown with its icon/logo in a rounded pill chip (#F8FAFC background, #374151 text)
- Category headers use bold text with colored underline accent

10. FOOTER CTA
- Dark background (#1C1917)
- "Let's Build Something Together"
- Two CTAs side by side: "View Our Work" (outline white) + "Start a Project" (solid #F97316 orange)

Design: Warm, human, creative. Primary: #F97316 (orange), secondary: #7C3AED (purple), neutral: #1C1917 (warm black). Backgrounds: white with alternating warm tints (#FFFBEB, #F5F3FF, #F8FAFC). Typography: Clash Display or General Sans for headings, Inter for body. Headshots with consistent treatment (same crop, same lighting feel). Cards with 12-16px border-radius. Generous whitespace.

Responsive: Mobile-first. Leadership cards stack to 1 column. Team grid becomes 2 columns. Benefits cards stack. Job listings become full-width cards. Photo collage becomes horizontal scroll. Filter pills horizontally scrollable on mobile.