feat: Adds screenshots to homepage

src/components/homepage/AboutSection.astro

@@ -54,7 +54,7 @@ const links = [
   },
   {
     title: 'Use the API',
-    url: '#',
+    url: '/web-check-api',
     icon: 'code',
     isCta: false,
   },
@@ -62,20 +62,26 @@ const links = [
 
 ---
 
-<div class="features-wrap">
-  <h4>Ready to get started?</h4>
-  <p class="what">
-    With over <span>30 supported checks</span>
-    you can view and analyse key website information in an instant
-  </p>
+<div class="about-section">
+  <div class="features-wrap">
+    <h4>Ready to get started?</h4>
+    <p class="what">
+      With over <span>30 supported checks</span>
+      you can view and analyse key website information in an instant
+    </p>
+  </div>
+  <hr />
+  <Features supportedChecks={supportedChecks} />
+  <ButtonGroup links={links} />
+  <hr />
+  <SponsorSegment />
 </div>
-<hr />
-<Features supportedChecks={supportedChecks} />
-<ButtonGroup links={links} />
-<hr />
-<SponsorSegment />
 
 <style lang="scss">
+  .about-section {
+    width: 80vw;
+    margin: 0 auto;
+  }
   .features-wrap {
     width: 80vw;
     max-width: 650px;

src/components/homepage/HeroForm.astro

@@ -1,8 +1,10 @@
 ---
 import AnimatedButton from "./AnimatedButton.astro"
 import AnimatedInput from "./AnimatedInput.astro"
+import Screenshots from "./Screenshots.astro"
 ---
 
+<div class="hero">
 <div class="left">
   <h1>
     <img src="/favicon.svg" alt="Check Web" width="64" />
@@ -22,6 +24,8 @@ import AnimatedInput from "./AnimatedInput.astro"
     </form>
   </div>
 </div>
+<Screenshots />
+</div>
 
 <script>
   /**
@@ -60,6 +64,16 @@ import AnimatedInput from "./AnimatedInput.astro"
 
 <style lang="scss">
 @import '@styles/global.scss';
+.hero {
+  display: flex;
+  justify-content: space-around;
+  width: 100vw;
+  @include desktop-down {
+    display: block;
+    width: 80vw;
+    margin: 0 auto;
+  }
+}
 .left {
     min-height: 100vh;
     display: flex;

src/components/homepage/Screenshots.astro

@@ -0,0 +1,107 @@
+---
+const screenshots = [
+  "https://i.ibb.co/kB7LsV1/wc-ssl.png",
+  "https://i.ibb.co/7Q1kMwM/wc-dns.png",
+  "https://i.ibb.co/TTQ6DtP/wc-cookies.png",
+  "https://i.ibb.co/KwQCjPf/wc-robots.png",
+  "https://i.ibb.co/t3xcwP1/wc-headers.png",
+  "https://i.ibb.co/Kqg8rx7/wc-quality.png",
+  "https://i.ibb.co/cXH2hfR/wc-location.png",
+  "https://i.ibb.co/25j1sT7/wc-hosts.png",
+  "https://i.ibb.co/hVVrmwh/wc-redirects.png",
+  "https://i.ibb.co/wyt21QN/wc-txt-records.png",
+  "https://i.ibb.co/V9CNLBK/wc-status.png",
+  "https://i.ibb.co/F8D1hmf/wc-ports.png",
+  "https://i.ibb.co/M59qgxP/wc-trace-route.png",
+  "https://i.ibb.co/5v6fSyw/Screenshot-from-2023-07-29-19-07-50.png",
+  "https://i.ibb.co/Mk1jx32/wc-server.png",
+  "https://i.ibb.co/89WLp14/wc-domain.png",
+  "https://i.ibb.co/89WLp14/wc-domain.png",
+  "https://i.ibb.co/J54zVmQ/wc-dnssec.png",
+  "https://i.ibb.co/gP4P6kp/wc-features.png",
+  "https://i.ibb.co/k253fq4/Screenshot-from-2023-07-17-20-10-52.png",
+  "https://i.ibb.co/tKpL8F9/Screenshot-from-2023-08-12-15-43-12.png",
+  "https://i.ibb.co/bBQSQNz/Screenshot-from-2023-08-12-15-43-46.png",
+  "https://i.ibb.co/GtrCQYq/Screenshot-from-2023-07-21-12-28-38.png",
+  "https://i.ibb.co/tq1FT5r/Screenshot-from-2023-07-24-20-31-21.png",
+  "https://i.ibb.co/LtK14XR/Screenshot-from-2023-07-29-11-16-44.png",
+  "https://i.ibb.co/4srTT1w/Screenshot-from-2023-07-29-11-15-27.png",
+  "https://i.ibb.co/yqhwx5G/Screenshot-from-2023-07-29-18-22-20.png",
+  "https://i.ibb.co/MfcxQt2/Screenshot-from-2023-08-12-15-40-52.png",
+  "https://i.ibb.co/LP05HMV/Screenshot-from-2023-08-12-15-40-28.png",
+  "https://i.ibb.co/nB9szT1/Screenshot-from-2023-08-14-22-31-16.png",
+  "https://i.ibb.co/nkbczgb/Screenshot-from-2023-08-14-22-02-40.png",
+  "https://i.ibb.co/M5JSXbW/Screenshot-from-2023-08-26-12-12-43.png",
+  "https://i.ibb.co/hYgy621/Screenshot-from-2023-08-26-12-07-47.png",
+  "https://i.ibb.co/6ydtH5R/Screenshot-from-2023-08-26-12-09-58.png",
+  "https://i.ibb.co/FmksZJt/Screenshot-from-2023-08-26-12-12-09.png",
+  "https://i.ibb.co/F7qRZkh/Screenshot-from-2023-08-26-12-11-28.png",
+  "https://i.ibb.co/2F0x8kP/Screenshot-from-2023-07-29-18-34-48.png"
+];
+---
+
+<div class="container">
+  <div class="column">
+    {screenshots.slice(0, 20).map((src, idx) => (
+      <img src={src} class="screenshot" alt={`Screenshot ${idx}`} />
+    ))}
+  </div>
+  <div class="column">
+    {screenshots.slice(20).map((src, idx) => (
+      <img src={src} class="screenshot" alt={`Screenshot ${idx + 20}`} />
+    ))}
+  </div>
+</div>
+
+<style lang="scss">
+  @import '@styles/global.scss';
+
+  .container {
+    display: flex;
+    height: 95vh;
+    overflow: hidden;
+    width: 33vw;
+    justify-content: flex-end;
+    gap: 1.5rem;
+    z-index: 2;
+    @include desktop-down {
+      display: none;
+    }
+  }
+
+  .column {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    animation: scroll 24s linear infinite;
+    &:nth-child(2) {
+      animation: scroll 16s linear infinite;
+    }
+    &:hover {
+      animation-play-state: paused;
+    }
+  }
+
+  .screenshot {
+    width: 100%;
+    margin-bottom: 1.5rem;
+    border-radius: 4px;
+    filter: contrast(120%) grayscale(50%) hue-rotate(-20deg);
+    clip-path: inset(0.5rem);
+    transform: scale(1.1);
+    transition: transform 0.3s ease-in-out;
+  }
+
+  @keyframes scroll {
+    0% {
+      transform: translateY(0);
+    }
+    100% {
+      transform: translateY(-100%);
+    }
+  }
+</style>
+
+