// About page: founder story and the participation problem Synchronize solves.

function AboutPage() {
  useReveal();
  return (
    <main className="about-page about-study about-final">
      <PracticeDirection/>
    </main>
  );
}

function PracticeDirection() {
  return (
    <>
      <section className="about-d5-hero">
        <div className="page about-d5-hero-grid">
          <div className="about-d5-copy reveal">
            <div className="about-direction-kicker">About Synchronize · Built from experience</div>
            <h1 className="display-1">We built the thing our community <em>needed.</em></h1>
            <p>Synchronize is a founder-led software company helping professional communities participate across Slack, email, and the web as one connected experience.</p>
          </div>
        </div>
      </section>

      <section className="about-d5-bridge-statement">
        <div className="page">
          <div className="about-d5-bridge-copy reveal">
            <div className="about-bridge-kicker">The conviction behind the company</div>
            <h2>
              <span className="about-bridge-premise">The world didn’t need another community platform.</span>{' '}
              <strong>It needed a bridge between the places people already trusted.</strong>
            </h2>
          </div>
          <SynchronizeBridgeIllustration/>
        </div>
      </section>

      <section className="about-d5-story">
        <div className="page about-d5-story-grid">
          <div className="about-d5-story-heading reveal">
            <span>The story behind Synchronize</span>
            <h2>Built by a community leader, for community leaders.</h2>
            <div className="about-d5-founder-signoff">
              <img
                className="about-founder-avatar"
                src="assets/about/cory-bolotsky-avatar.png"
                alt="Illustrated portrait of Cory Bolotsky"
                loading="lazy"
                decoding="async"
              />
              <span className="about-founder-identity">
                <strong>Cory Bolotsky</strong>
                <small>Founder, Synchronize</small>
              </span>
            </div>
          </div>
          <div className="about-d5-story-copy reveal">
            <p className="large">I launched Synchronize because I had lived the problem. I was not looking to found a software company.</p>
            <p>I was helping to run one of the fastest-growing communities for venture capital professionals. It began with 20 people on a Google Group: simple, intimate, and exactly enough. As it grew toward 400 members, that setup started to break the community.</p>
            <p>I desperately began the hunt for a better community platform to run on, but every available option came with a tradeoff. A dedicated platform could create a wonderful experience once members logged in. First, they had to remember to go there. Slack felt natural to some, while others could not use it, did not enjoy it, or simply did not want another workspace. Email was effortless for email-first members and exhausting for people whose inboxes were already overflowing.</p>
            <p>I knew clearly what the problem was, and I had a vision of the ideal solution: <strong>a community platform that met members where they were and allowed them to engage seamlessly however they wanted.</strong> Unfortunately, I couldn’t find anything built that way. So I resorted to building it myself.</p>
            <p>The early versions were cobbled together, fragile, and broke often, but the principle at the center of what we built felt magical. Members could participate in the way that worked for them without leaving the shared community behind. <strong>The technology adapted to people, rather than asking every person to adapt to the technology.</strong></p>
            <p>Other community leaders started asking what we had built and whether they could use it too. They could see that something special was happening. The demand made it clear that this was not only our problem; it was a structural challenge facing communities everywhere. In 2023, I launched Synchronize as a company so other leaders could build the kind of community experience I had needed myself.</p>
            <p><strong>Today, the current version of Synchronize still powers that original venture capital community.</strong> It has grown from roughly 400 members to well over 2,000, expanded into a truly global membership, and become a nonprofit organization with more than $1 million in revenue. Synchronize now powers communities with <strong>tens of thousands of members around the world</strong>, including many that have grown into million-dollar-plus businesses of their own.</p>
            <p>Along the way, Synchronize has built a strong, distributed team of people around the world who are passionate about helping communities operate more seamlessly. Across engineering, operations, finance, sales, and customer support, <strong>we work tirelessly on this problem and are deeply committed to the communities that trust us.</strong></p>
          </div>
        </div>
      </section>
    </>
  );
}

function SynchronizeBridgeIllustration() {
  const bridgeMessages = [
    { name: 'Avery Sloan', action: 'Avery posted a new question', platform: 'slack', source: 'from Slack', direction: 'east', delay: 0 },
    { name: 'Devon Bell', action: 'Devon read the question', platform: 'email', source: 'in email', direction: 'west', delay: 5.2 },
    { name: 'Casey Monroe', action: 'Casey replied', platform: 'email', source: 'from email', direction: 'east', delay: 11.5 },
    { name: 'Taylor Finch', action: 'Taylor read the reply', platform: 'slack', source: 'in Slack', direction: 'west', delay: 16.2 },
    { name: 'Marlowe Hale', action: 'Marlowe liked the reply', platform: 'slack', source: 'in Slack', direction: 'east', delay: 22.8 },
    { name: 'Riley Quinn', action: 'Riley replied', platform: 'slack', source: 'from Slack', direction: 'west', delay: 27.6 },
    { name: 'Jamie Rhodes', action: 'Jamie read the thread', platform: 'email', source: 'in email', direction: 'east', delay: 34.1 },
    { name: 'Ellis Rowan', action: 'Ellis posted a new question', platform: 'email', source: 'from email', direction: 'west', delay: 39 },
    { name: 'Drew Palmer', action: 'Drew replied', platform: 'slack', source: 'from Slack', direction: 'east', delay: 45.8 },
    { name: 'Reese Sutton', action: 'Reese liked the reply', platform: 'slack', source: 'in Slack', direction: 'west', delay: 52.2 },
  ];

  return (
    <div className="about-golden-bridge about-winning-bridge reveal" role="img" aria-label="A purple suspension bridge connects a Slack-first phone and an email-first laptop through Synchronize">
      <div className="bridge-cloud cloud-one"></div>
      <div className="bridge-cloud cloud-two"></div>
      <div className="bridge-cloud cloud-three"></div>
      <div className="bridge-sun" aria-hidden="true"></div>

      <div className="golden-bridge-structure" aria-hidden="true">
        <div className="golden-cable cable-outer-left"></div>
        <div className="golden-cable cable-inner-left"></div>
        <div className="golden-cable cable-inner-right"></div>
        <div className="golden-cable cable-outer-right"></div>
        <div className="golden-tower tower-left"><i></i><i></i><b></b><b></b></div>
        <div className="golden-tower tower-right"><i></i><i></i><b></b><b></b></div>
        <div className="golden-suspenders">
          <i className="sus-1"></i><i className="sus-2"></i><i className="sus-3"></i><i className="sus-4"></i><i className="sus-5"></i>
          <i className="sus-6"></i><i className="sus-7"></i><i className="sus-8"></i><i className="sus-9"></i><i className="sus-10"></i>
        </div>
        <div className="golden-deck"></div>
        {bridgeMessages.map(message => (
          <span
            className={`about-bridge-message message-${message.direction}`}
            key={message.name}
            style={{ '--message-delay': `${message.delay}s` }}
          >
            <PortraitAvatar name={message.name} size={30}/>
            <span className="about-bridge-message-copy">
              <b>{message.action}</b>
              <small className={`about-message-source source-${message.platform}`}>
                {message.platform === 'slack'
                  ? <img src="assets/slack.png" alt=""/>
                  : <i className="platform-email-icon"><em></em></i>}
                {message.source}
              </small>
            </span>
          </span>
        ))}
      </div>

      <div className="about-winning-banner">
        <i className="about-banner-tie tie-left"></i><i className="about-banner-tie tie-right"></i>
        <img src="assets/logo.svg" alt="Synchronize"/>
        <span>Meet your members <em>where they already are.</em></span>
      </div>

      <div className="about-winning-phone" aria-label="A phone for members who prefer Slack">
        <div className="about-phone-shell">
          <span className="about-phone-camera"></span>
          <span className="about-phone-slack"><img src="assets/slack.png" alt="Slack"/></span>
          <span className="about-device-sticker about-phone-run"><b>⚡</b><span>Runs on<br/>Slack</span></span>
          <span className="about-device-sticker about-phone-async"><span>Async by<br/>default</span><i></i></span>
        </div>
      </div>

      <div className="about-winning-laptop" aria-label="A laptop for members who prefer email">
        <div className="about-laptop-lid">
          <span className="platform-email-icon about-email-badge" role="img" aria-label="Email"><i></i></span>
          <span className="about-device-sticker about-mailbox-love"><span>I <b>♥</b> my</span><strong>Mailbox</strong></span>
          <span className="about-device-sticker about-inbox-zero"><b>☀</b><span>Inbox<br/>zero</span><i>→</i></span>
          <span className="about-device-sticker about-email-me"><span>Email</span><strong>Me</strong><b>✈</b></span>
        </div>
        <div className="about-laptop-base"></div>
      </div>
    </div>
  );
}

Object.assign(window, { AboutPage });