impact.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="description" content="Intelligence to Prevent. Power to Protect.">

    <title>Soteria Security</title>
    <link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">

    <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=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Manrope:wght@200..800&display=swap" rel="stylesheet">
  
    <link rel="stylesheet" href="assets/style/global.css">
    <link rel="stylesheet" href="assets/style/impact.css">
  </head>
  <body>
    <main>
      <div id="navbar">
        <div id="hamburger" onclick="hamburgerClick()">
          <div></div>
          <div></div>
          <div></div>
        </div>
        <img id="navbar_logo" src="assets/images/logo.svg" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">
        <a class="navbar_link" href="index.html">Home</a>
        <a class="navbar_link" href="features.html">Features</a>
        <a class="navbar_link active" onclick="window.scrollTo({ top: 0, behavior: 'smooth' });">Impact</a>
        <a class="navbar_link" href="about.html">About</a>
        <a class="navbar_link" href="pricing.html">Pricing</a>
        <a class="navbar_link" href="/PWA">PWA</a>
        <button id="navbar_contact" onclick="window.open('https:\/\/idp7al2lb7x.typeform.com/to/CzxPzDxT', '_blank')">Reserve a Demo</button>
      </div>

      <div id="header">
        <div id="header_text">
          <p id="header_title">Our Impact</p>
          <p id="header_subtitle">How Soteria works to save lives around the clock</p>
        </div>

        <img id="header_img" src="assets/images/impact.png" style="position: absolute; top: 0px; right: 0px !important;">
      </div>

      <div id="story">
        <p id="story_title">In 2024, there were...</p>
        <div id="story_stats">
          <p class="story_stat">
            <span class="story_stat_value">83</span>
            <br>
            School Shootings
          </p>

          <p class="story_stat">
            <span class="story_stat_value">648+</span>
            <br>
            Deaths in Mass Shootings
            <br>
          </p>

          <p class="story_stat">
            <span class="story_stat_value">80%</span>
            <br>
            Mass Shootings in Locations with Cameras
          </p>
        </div>

        <p id="story_impactful_point">It doesnt' have to<br> be like this.</p>
        <hr id="story_impactful_point_underline">

        <p id="story_desc">
          Security should be a priority, not an afterthought. Unlike traditional systems,
          which often require intensive human labor and large investments, <span class="accent">Soteria</span> combines 
          <span class="accent">already-existing camera technology</span> with <span class="accent">advanced machine-learning
          algorithms</span> to offer faster, cheaper, and more accurate responses.
          <br>
          <br>
          In a crisis, <span class="accent">every second counts</span>. Soteria constantly monitors <span class="accent">every</span>
          connected camera for threats, 24/7, and will instantly send an alert if a threat is found. It might be a difference of 20
          seconds between Soteria's detection and manual intervention, but in a life-or-death scenario, those <span class="accent">20 seconds</span> could mean
          <span class="accent">20 lives</span>.
          <br>
          <br>
        </p>
        <p id="story_finalimpact">
          Soteria saves <span class="accent">time</span> and saves <span class="accent">lives</span>,
          <br>
           and <span class="accent underline">you can't put a price on living</span>. 
        </p>
      </div>

      <div id="footer">
        <img id="footer_img" src="assets/images/logo.svg">
        <div id="footer_text">
          <p id="footer_name">Soteria<br>Security</p>
          <p id="footer_slogan">Intelligence to Prevent.<br>Power to Protect.</p>
        </div>

        <p id="footer_copyright">© 2025 Copyright Soteria. All rights reserved.</p>

        <div id="footer_buttons">
          <button onclick="window.open('https:\/\/idp7al2lb7x.typeform.com/to/RPdMPne5', '_blank')">Contact Us</button>
          <button onclick="window.open('https:\/\/idp7al2lb7x.typeform.com/to/CzxPzDxT', '_blank')">Request a Demo</button>
        </div>
      </div>
    </main>
    

    <script src="assets/script/global.js"></script>
    <script src="assets/script/impact.js"></script>
  </body>
</html>