About Page

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fff;
  color: #111;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 40px;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
}

.logo {
  font-size: 20px;
  font-weight: 800;
  text-decoration: none;
  color: #111;
}
nav {
  display: flex;
  gap: 24px;
  align-items: center;
}
nav a {
  font-size: 14px;
  color: #555;
  text-decoration: none;
}
nav a.nav-cta {
  color: #6366f1;
  font-weight: 600;
}

/* Hero */
.hero {
  max-width: 720px;
  margin: 80px auto;
  padding: 0 24px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(30px, 6vw, 52px);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 20px;
}
.hero p {
  font-size: 18px;
  color: #555;
  line-height: 1.7;
}

/* Story */
.story {
  max-width: 1080px;
  margin: 0 auto 80px;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
}

@media (max-width: 768px) {
  .story {
    grid-template-columns: 1fr;
  }
  .story-image {
    height: 240px;
    order: -1;
  }
}

.story-text h2 {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 20px;
}
.story-text p {
  font-size: 16px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 16px;
}

.story-image {
  height: 360px;
  border-radius: 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
}

/* Values */
.values {
  background: #f9fafb;
  padding: 80px 24px;
}

.values h2 {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 48px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

.value-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  border: 1px solid #e5e7eb;
}

.value-icon {
  width: 48px;
  height: 48px;
  background: #eef2ff;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.value-icon svg {
  width: 22px;
  height: 22px;
  color: #6366f1;
}

.value-card h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.value-card p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Team */
.team {
  padding: 80px 24px;
  max-width: 1080px;
  margin: 0 auto;
  text-align: center;
}

.team h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 8px;
}
.team > p {
  font-size: 16px;
  color: #888;
  margin-bottom: 48px;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 480px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* Flip card */
.team-card {
  height: 220px;
  perspective: 800px;
  cursor: pointer;
}

.card-front,
.card-back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  border: 1px solid #e5e7eb;
  padding: 20px;
  backface-visibility: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.team-card {
  position: relative;
}

.card-front {
  background: #fff;
  transform: rotateY(0deg);
}

.card-back {
  background: #0f0f13;
  color: #fff;
  transform: rotateY(180deg);
  text-align: left;
  align-items: flex-start;
}

.team-card:hover .card-front {
  transform: rotateY(-180deg);
}
.team-card:hover .card-back {
  transform: rotateY(0deg);
}

.member-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}

.av1 {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.av2 {
  background: linear-gradient(135deg, #f59e0b, #ef4444);
}
.av3 {
  background: linear-gradient(135deg, #10b981, #3b82f6);
}
.av4 {
  background: linear-gradient(135deg, #ec4899, #f43f5e);
}

.card-front strong {
  font-size: 15px;
  color: #111;
}
.card-front span {
  font-size: 12px;
  color: #888;
}

.card-back p {
  font-size: 13px;
  line-height: 1.6;
  color: #aaa;
  margin-bottom: 12px;
}
.member-links {
  display: flex;
  gap: 12px;
}
.member-links a {
  font-size: 12px;
  color: #6366f1;
  text-decoration: none;
}

/* Timeline */
.timeline-section {
  background: #f9fafb;
  padding: 80px 24px;
}

.timeline-section h2 {
  font-size: 32px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 48px;
}

.timeline {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.t-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding-bottom: 32px;
  position: relative;
}

.t-item::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}

.t-item:last-child::before {
  display: none;
}

.t-year {
  min-width: 56px;
  height: 24px;
  background: #6366f1;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  z-index: 1;
}

.t-body strong {
  font-size: 15px;
  color: #111;
  display: block;
  margin-bottom: 4px;
}
.t-body p {
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}

/* CTA */
.cta-section {
  text-align: center;
  padding: 80px 24px;
  background: #0f0f13;
  color: #fff;
}

.cta-section h2 {
  font-size: 32px;
  font-weight: 800;
  margin-bottom: 12px;
}
.cta-section p {
  font-size: 16px;
  color: #888;
  margin-bottom: 32px;
}

.cta-btn {
  display: inline-block;
  padding: 16px 40px;
  background: #6366f1;
  color: #fff;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

// No dynamic JS needed — flip cards use CSS :hover.
// Touch devices: tap to flip
document.querySelectorAll(".team-card").forEach((card) => {
  let flipped = false;
  card.addEventListener("click", () => {
    flipped = !flipped;
    card.style.transform = flipped ? "rotateY(180deg)" : "";
    const front = card.querySelector(".card-front");
    const back = card.querySelector(".card-back");
    if (flipped) {
      front.style.transform = "rotateY(-180deg)";
      back.style.transform = "rotateY(0deg)";
    } else {
      front.style.transform = "";
      back.style.transform = "";
    }
  });
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>About Us</title>
  </head>
  <body>
    <header class="site-header">
      <a href="#" class="logo">Brand</a>
      <nav><a href="#">Products</a><a href="#">Blog</a><a href="#" class="nav-cta">Get Started</a></nav>
    </header>

    <!-- Hero -->
    <section class="hero">
      <h1>Built by builders, for builders</h1>
      <p>We're a small team of designers and engineers passionate about making the web faster, more accessible, and more beautiful — one component at a time.</p>
    </section>

    <!-- Story -->
    <section class="story">
      <div class="story-text">
        <h2>Our Story</h2>
        <p>Brand started in 2022 as a personal side project — a collection of UI components that kept getting rebuilt from scratch on every new project. After sharing the first few components online and seeing thousands of developers use them, it became clear there was something worth building here.</p>
        <p>Today we're a team of six, fully remote across three continents, with a library of over 360 components used by developers at companies large and small.</p>
        <p>We believe great design should be accessible to everyone, not just teams with large budgets and dedicated designers.</p>
      </div>
      <div class="story-image"></div>
    </section>

    <!-- Values -->
    <section class="values">
      <h2>What we believe in</h2>
      <div class="values-grid">
        <div class="value-card">
          <div class="value-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          </div>
          <h3>Speed by default</h3>
          <p>Every component is built with performance in mind — minimal JavaScript, no unnecessary dependencies, instant interactions.</p>
        </div>
        <div class="value-card">
          <div class="value-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
          </div>
          <h3>Made for humans</h3>
          <p>Accessibility isn't a checkbox. We test with screen readers, keyboards, and real assistive technology before every release.</p>
        </div>
        <div class="value-card">
          <div class="value-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
          </div>
          <h3>Open source first</h3>
          <p>All our components are MIT licensed. We believe in building on the shoulders of giants and giving back to the community.</p>
        </div>
        <div class="value-card">
          <div class="value-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
          </div>
          <h3>Privacy by design</h3>
          <p>We don't track users, sell data, or embed third-party analytics. Our components don't phone home.</p>
        </div>
      </div>
    </section>

    <!-- Team -->
    <section class="team">
      <h2>Meet the team</h2>
      <p>Six people building the future of UI.</p>
      <div class="team-grid">
        <div class="team-card">
          <div class="card-front">
            <div class="member-avatar av1"></div>
            <strong>Alex Morgan</strong>
            <span>Co-founder & Design Lead</span>
          </div>
          <div class="card-back">
            <p>Alex has 10 years of UX experience across startups and Fortune 500 companies. Obsessed with animation and motion design.</p>
            <div class="member-links"><a href="#">Twitter</a><a href="#">GitHub</a></div>
          </div>
        </div>
        <div class="team-card">
          <div class="card-front">
            <div class="member-avatar av2"></div>
            <strong>Sam Rivera</strong>
            <span>Co-founder & Engineering</span>
          </div>
          <div class="card-back">
            <p>Sam built the schema layer and MCP server. Loves TypeScript, monorepos, and building things that last.</p>
            <div class="member-links"><a href="#">Twitter</a><a href="#">GitHub</a></div>
          </div>
        </div>
        <div class="team-card">
          <div class="card-front">
            <div class="member-avatar av3"></div>
            <strong>Jordan Lee</strong>
            <span>Senior Engineer</span>
          </div>
          <div class="card-back">
            <p>Jordan focuses on performance and accessibility. Author of our internal testing framework for WCAG compliance.</p>
            <div class="member-links"><a href="#">Twitter</a><a href="#">GitHub</a></div>
          </div>
        </div>
        <div class="team-card">
          <div class="card-front">
            <div class="member-avatar av4"></div>
            <strong>Taylor Kim</strong>
            <span>Designer</span>
          </div>
          <div class="card-back">
            <p>Taylor designs all new components and maintains the visual system. Previously at Linear and Vercel.</p>
            <div class="member-links"><a href="#">Twitter</a><a href="#">Dribbble</a></div>
          </div>
        </div>
      </div>
    </section>

    <!-- Timeline -->
    <section class="timeline-section">
      <h2>Our journey</h2>
      <div class="timeline">
        <div class="t-item"><div class="t-year">2022</div><div class="t-body"><strong>Founded</strong><p>Started as a weekend project with 12 components.</p></div></div>
        <div class="t-item"><div class="t-year">2023</div><div class="t-body"><strong>Open sourced</strong><p>Published to GitHub. 500 stars in the first week.</p></div></div>
        <div class="t-item"><div class="t-year">2024</div><div class="t-body"><strong>100 components</strong><p>Hit the milestone and launched the Lab preview tool.</p></div></div>
        <div class="t-item"><div class="t-year">2025</div><div class="t-body"><strong>MCP server</strong><p>Released the Model Context Protocol server for AI tooling.</p></div></div>
        <div class="t-item"><div class="t-year">2026</div><div class="t-body"><strong>360+ components</strong><p>Expanding into full page templates and boilerplates.</p></div></div>
      </div>
    </section>

    <!-- CTA -->
    <section class="cta-section">
      <h2>Want to work with us?</h2>
      <p>We're always looking for talented designers and engineers.</p>
      <a href="#" class="cta-btn">View Open Positions</a>
    </section>

    <script src="script.js"></script>
  </body>
</html>