index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Anek+Telugu:wght@300;400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="index.css" />
    <title>Swipe</title>
  </head>
  <body>
    <!-- NAVBAR START -->
    <nav class="navbar section-container">
      <img src="assets/logo-white.svg" alt="Swipe logo" />
      <ul class="menu">
        <li><a href="#">Products</a></li>
        <li><a href="#">Solutions</a></li>
        <li><a href="#">Developers</a></li>
        <li><a href="#">Resources</a></li>
        <li><a href="#">Pricing</a></li>
      </ul>
      <button class="primary-btn navbar-btn">Sign in</button>
    </nav>
    <!-- NAVBAR END -->

    <main>
      <!-- HERO SECTION START -->
      <section class="hero">
        <div class="section-container two-column">
          <div class="col-left">
            <h1>Payment infrastructure for the world</h1>
            <p>
              Tons of companies across the globe use Swipe's seamless platform
              to manage their business's entire financial transaction
              infrastructure online.
            </p>
            <div class="btn-container">
              <button class="primary-btn with-icon">
                Get started
                <img
                  src="assets/arrow-right-light.svg"
                  alt="arrow-right-icon"
                />
              </button>
              <button class="secondary-btn with-icon">
                Contact sales
                <img
                  src="assets/arrow-right-purple.svg"
                  alt="arrow-right-icon"
                />
              </button>
            </div>
          </div>
          <div class="col-right hero-phone-container">
            <img
              class="hero-phone"
              src="assets/hero-phone.png"
              alt="hero-image"
            />
          </div>
        </div>
      </section>
      <!-- HERO SECTION END -->

      <!-- PARTNERS SECTION START -->
      <section class="partners-section">
        <div class="section-container">
          <div class="partners-grid">
            <img src="assets/instacart.png" alt="instacart" />
            <img src="assets/salesforce.png" alt="salesforce" />
            <img src="assets/amazon.png" alt="amazon" />
            <img src="assets/slack.png" alt="slack" />
            <img src="assets/shopify.png" alt="shopify" />
            <img src="assets/google.png" alt="google" />
            <img src="assets/lyft.png" alt="lyft" />
            <img src="assets/zoom.png" alt="zoom" />
          </div>
        </div>
      </section>
      <!-- PARTNERS SECTION END -->

      <!-- UNIFIED PLATFORM SECTION START -->
      <section class="unified-platform-section">
        <div class="section-container">
          <p class="subtitle">Unified platform</p>
          <h2>All the payment products you'll ever need</h2>
          <div class="two-column">
            <div class="col-left">
              <p>
                We've got everything you'll need and more to build websites and
                apps that handle payments, payouts, and much more. Swipe's
                products power payments for all kinds of retailers,
                <a href="#"> all kinds of businesses</a>,
                <a href="#"> software platforms & marketplaces</a>, and
                everything in between.
              </p>
            </div>
            <div class="col-right">
              <p>
                We also help companies <a href="#">tackle fraud</a>,
                <a href="#">issuse invoices</a>,
                <a href="#"> send virtual and physical cards </a>,
                <a href="#">manage financing</a>,
                <a href="#">wrangle business spend</a>, and much more.
              </p>
            </div>
          </div>
          <button class="primary-btn with-icon">
            Start now
            <img src="assets/arrow-right-light.svg" alt="arrow-right-icon" />
          </button>
        </div>
      </section>
      <!-- UNIFIED PLATFORM SECTION END -->

      <!-- GRAPHIC PHOTOS GRID SECTION START -->
      <section class="graphic-section">
        <div class="section-container">
          <div class="graphic-grid">
            <img
              src="assets/credit-card.png"
              alt="credit-card-image"
              id="credit-card"
            />
            <img
              src="assets/slack-invoice.png"
              alt="slack-invoice-image"
              id="slack-invoice"
            />
            <img src="assets/phone.png" alt="phone-image" id="phone" />
            <img src="assets/dash.png" alt="dash-image" id="dashboard" />
          </div>
        </div>
      </section>
      <!-- GRAPHIC PHOTOS GRID SECTION END -->

      <!-- INTEGRATIONS SECTION START -->
      <section class="integrations-section">
        <div class="section-container two-column">
          <div class="col-left">
            <p class="subtitle2">Desined for engineers</p>
            <h2>The world's best and most intuitive APIs</h2>
            <p>
              We abstract the hard stuff away so your team can focus on building
              good technology, instead of spending time and money re-inventing
              the wheel.
            </p>
            <button class="primary-btn with-icon">
              View API docs
              <img src="assets/arrow-right-dark.svg" alt="arrow-right-icon" />
            </button>

            <div class="card-container">
              <div class="card">
                <img
                  class="icon"
                  src="assets/tools-icon.png"
                  alt="tools-icon"
                />
                <h3>Tools for all stacks</h3>
                <p class="secondary-text">
                  We offer front end and back end libraries in some of the most
                  widely used technologies, old and new
                </p>
                <button class="secondary-btn with-icon">
                  See libraries
                  <img
                    src="assets/arrow-right-blue.svg"
                    alt="arrow-right-icon"
                  />
                </button>
              </div>
              <div class="card">
                <img class="icon" src="assets/cube-icon.png" alt="cube-icon" />
                <h3>Custom integrations</h3>
                <p class="secondary-text">
                  Use integrations for popular systems like Shopify, Walmart and
                  more or build your own.
                </p>
                <button class="secondary-btn with-icon">
                  Explore partners
                  <img
                    src="assets/arrow-right-blue.svg"
                    alt="arrow-right-icon"
                  />
                </button>
              </div>
            </div>
          </div>

          <div class="col-right">
            <img src="assets/api-code.png" alt="api-code-image" id="api-code" />
            <img
              src="assets/terminal-code.png"
              alt="terminal-code-image"
              id="terminal-code"
            />
          </div>
        </div>
      </section>
      <!-- INTEGRATIONS SECTION END -->

      <!-- WHY SWIPE SECTION START -->
      <section class="why-swipe-section">
        <div class="section-container">
          <p class="subtitle">Why Swipe?</p>
          <h2>A tech-first approach to finance</h2>
          <div class="card-container">
            <div class="card">
              <img class="icon" src="assets/cloud-icon.png" alt="cloud-icon" />
              <h3>Efficient always</h3>
              <p class="secondary-text">
                We've optimized every level of the finance stack, from
                integrations to prebuilt checkout flows, to ensure that your
                business is as efficient as possible.
              </p>
            </div>
            <div class="card">
              <img class="icon" src="assets/cycle-icon.png" alt="cycle-icon" />
              <h3>Fast-improving</h3>
              <p class="secondary-text">
                We make constant updates and improvements to help you stay on
                the cutting edge of your industry, deploying new features and
                integrations every week!
              </p>
            </div>
            <div class="card">
              <img
                class="icon"
                src="assets/shield-icon.png"
                alt="shield-icon"
              />
              <h3>Tried and trusted</h3>
              <p class="secondary-text">
                Our systems operate with 100% uptime, with scalability and speed
                as a top priority. Swipe is super duper certified so don't
                worry.
              </p>
            </div>
            <div class="card">
              <img class="icon" src="assets/bars-icon.png" alt="bars-icon" />
              <h3>Highly optimized</h3>
              <p class="secondary-text">
                We use machine learning and AI trained on billions of data
                points to help you optimize your business, from fraud detection
                to revenue optimization and more.
              </p>
            </div>
          </div>
        </div>
      </section>
      <!-- WHY SWIPE SECTION END -->

      <!-- GLOBAL SECTION -->
      <section class="global-section">
        <div class="section-container">
          <div class="two-column">
            <div class="col-left">
              <p class="subtitle2">Global scale</p>
              <h2>A structure for global businesses</h2>
              <p>
                Swipe's infrastructure was built from the ground up to support
                global businesses from day one. We support over 100 currencies
                and 30+ countries, and all of
                <a href="#">
                  our tools are built with internationalization in mind.</a
                >
              </p>
            </div>
            <div class="col-right">
              <img
                class="globe-img"
                src="assets/global-graphic.png"
                alt="global-graphic"
              />
            </div>
          </div>
          <div class="card-container">
            <div class="card">
              <h3>250M+</h3>
              <p class="secondary-text">
                API requests per day, with 99.99% uptime.
              </p>
            </div>
            <div class="card">
              <h3>168+</h3>
              <p class="secondary-text">
                customers around the world, from startups to Fortune 500s.
              </p>
            </div>
            <div class="card">
              <h3>125+</h3>
              <p class="secondary-text">
                of the world's top investors have bought from businesses using
                Swipe.
              </p>
            </div>
            <div class="card">
              <h3>46+</h3>
              <p class="secondary-text">
                currencies supported, with more being added every month.
              </p>
            </div>
          </div>
        </div>
      </section>
      <!-- GLOBAL SECTION END -->
    </main>
  </body>
</html>