feat: Adds new feature components for new homepage

src/components/homepage/AboutSection.astro

@@ -0,0 +1,108 @@
+---
+
+import Icon from '@components/molecules/Icon.svelte';
+import ButtonGroup from '@components/homepage/ButtonGroup.astro';
+import Features from '@components/homepage/Features.astro';
+import SponsorSegment from '@components/homepage/SponsorSegment.astro';
+
+const supportedChecks = [
+  'Archive History',
+  'Block List Check',
+  'Carbon Footprint',
+  'Cookies',
+  'DNS Server',
+  'DNS Records',
+  'DNSSEC',
+  'Site Features',
+  'Firewall Types',
+  'Get IP Address',
+  'Headers',
+  'HSTS',
+  'HTTP Security',
+  'Linked Pages',
+  'Mail Config',
+  'Open Ports',
+  'Quality Check',
+  'Global Rank',
+  'Redirects',
+  'Robots.txt',
+  'Screenshot',
+  'Security.txt',
+  'Sitemap',
+  'Social Tags',
+  'SSL Certificate',
+  'Uptime Status',
+  'Tech Stack',
+  'Known Threats',
+  'TLS Version',
+  'Trace Route',
+  'TXT Records',
+  'Whois Lookup'
+];
+
+const links = [
+  {
+    title: 'View on GitHub',
+    url: 'https://github.com/lissy93/web-check',
+    icon: 'github',
+    isCta: true,
+  },
+  {
+    title: 'Deploy your Own',
+    url: 'https://github.com/lissy93/web-check',
+    icon: 'rocket',
+    isCta: false,
+  },
+  {
+    title: 'Use the API',
+    url: '#',
+    icon: 'code',
+    isCta: false,
+  },
+];
+
+---
+
+<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 />
+
+<style lang="scss">
+  .features-wrap {
+    width: 80vw;
+    max-width: 650px;
+    margin: 0 auto;
+  }
+  h4 {
+    text-transform: capitalize;
+    font-size: 1.8rem;
+    text-align: center;
+    background: linear-gradient(90deg, var(--text-color), var(--primary));
+    background-clip: text;
+    text-fill-color: transparent;
+    color: transparent;
+  }
+  .what {
+    text-align: center;
+    font-size: 1.2rem;
+    line-height: 1.5;
+    span {
+      color: var(--primary);
+      font-style: italic;
+    }
+  }
+  hr {
+    width: 3rem;
+    margin: 3rem auto;
+    color: var(--primary);
+  }
+</style>

src/components/homepage/AnimatedButton.astro

@@ -30,7 +30,7 @@ const buttonType = 'submit';
     font-size: 2rem;
     color: var(--text-color-secondary);
     border: 2px solid var(--text-color-thirdly);
-    border-radius: 2px;
+    border-radius: 3px;
     font-weight: bold;
     background: var(--background);   
     cursor: pointer;
@@ -43,7 +43,6 @@ const buttonType = 'submit';
     border-image: conic-gradient(from var(--angle), var(--c2), var(--c1) 0.5turn, var(--c1) 0.15turn, var(--c2) 0.25turn) 1;
     animation: borderRotate 3500ms linear infinite forwards;
     transition: border 0.3s ease-in-out;
-
     &:hover {
       border: 2px solid var(--primary);
     }

src/components/homepage/AnimatedInput.astro

@@ -120,7 +120,7 @@ document.addEventListener('DOMContentLoaded', () => {
     font-size: 2rem;
     color: var(--text-color-secondary);
     border: 2px solid var(--text-color);
-    border-radius: 2px;
+    border-radius: 3px;
     transition: all 0.3s ease-in-out;
     &:focus {
       border-color: var(--primary);

src/components/homepage/ButtonGroup.astro

@@ -0,0 +1,66 @@
+---
+import Icon from '@components/molecules/Icon.svelte';
+
+interface Props {
+  links: {
+    title: string;
+    url: string;
+    icon: string;
+    isCta: boolean;
+  }[];
+}
+
+const { links } = Astro.props;
+
+---
+
+<div class="button-wrap">
+  {links.map(link => (
+    <a href={link.url} class={link.isCta ? 'cta' : ''}><Icon name={link.icon} size={2} />{link.title}</a>
+  ))}
+</div>
+
+<style lang="scss">
+@import '@styles/global.scss';
+.button-wrap {
+  margin: 3rem auto;
+  display: flex;
+  gap: 2rem;
+  justify-content: center;
+  a {
+    width: 20rem;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    font-weight: bold;
+    box-sizing: border-box;
+    padding: 0.75rem;
+    background: var(--background-50);
+    font-size: 1.2rem;
+    color: var(--text-color);
+    border: 2px solid var(--text-color);
+    border-radius: 3px;
+    transition: all 0.25s ease-in-out;
+    &:hover {
+      cursor: pointer;
+      text-decoration: none;
+      background: var(--text-color);
+      color: var(--background);
+    }
+    &.cta {
+      color: var(--primary);
+      border-color: var(--primary);
+      &:hover {
+        background: var(--primary);
+        color: var(--background);
+      }
+    }
+  }
+  @include for-mobile-only {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>

src/components/homepage/Features.astro

@@ -0,0 +1,40 @@
+---
+
+import Icon from '@components/molecules/Icon.svelte';
+
+interface Props {
+  supportedChecks: string[];
+}
+
+const { supportedChecks } = Astro.props;
+
+---
+
+<ul class="features">
+  {supportedChecks.map((check) => (
+    <li>
+      <Icon name="check" />
+      {check}
+    </li>
+  ))}
+  <li><Icon name="plus" /><a href="/about#features">More</a></li>
+</ul>
+
+<style lang="scss">
+.features {
+  columns: 5;
+  column-width: 150px;
+  list-style: none;
+  padding: 0;
+  li {
+    font-size: 1.2rem;
+    line-height: 1.25;
+    margin: 0.5rem 0;
+    display: flex;
+    gap: 0.5rem;
+    :global(svg) {
+      color: var(--primary);
+    }
+  }
+}
+</style>

src/components/homepage/HeroForm.astro

@@ -21,7 +21,6 @@ import AnimatedInput from "./AnimatedInput.astro"
       <AnimatedButton />
     </form>
   </div>
-  <div>X</div>
 </div>
 
 <script>

src/components/homepage/SponsorSegment.astro

@@ -0,0 +1,62 @@
+---
+const sponsorName = 'Terminal Trove';
+const sponsorTagline = 'The $HOME of all things terminal.';
+const sponsorLink = 'https://terminaltrove.com/?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh';
+
+const ctaPreText = 'Get updates on the latest CLI/TUI tools via the';
+const ctaLinkHref = 'https://terminaltrove.com/newsletter?utm_campaign=github&utm_medium=referral&utm_content=web-check&utm_source=wcgh';
+const ctaLinkText = 'Terminal Trove Newsletter';
+const ctaImageSrc = 'https://i.ibb.co/5jJ4bzZ/terminal-trove-cta.png';
+---
+
+<div class="sponsor-block">
+  <div>
+    <h5>Sponsored by <a href={sponsorLink}>{sponsorName}</a></h5>
+    <p>
+      {sponsorTagline}<br>
+      {ctaPreText} <a href={ctaLinkHref}>{ctaLinkText}</a>
+    </p>
+  </div>
+  <a href={sponsorLink}>
+    <img width="256" src={ctaImageSrc} alt={`Check out ${sponsorName}`} />
+  </a>
+</div>
+
+<style lang="scss">
+  @import '@styles/global.scss';
+  .sponsor-block {
+    background: var(--text-color);
+    color: var(--background);
+    padding: 2rem;
+    border-radius: 3px;
+    gap: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    @include tablet-portrait-down {
+      flex-wrap: wrap;
+    }
+    @include for-mobile-only {
+      flex-direction: column;
+      align-items: center;
+    }
+    h5, p, a {
+      color: var(--background);
+    }
+    h5 {
+      font-size: 1.5rem;
+    }
+    p {
+      font-size: 1.2rem;
+      line-height: 1.5;
+    }
+    a {
+      text-decoration: underline;
+    }
+    img {
+      width: 20rem;
+      border-radius: 3px;
+    }
+  }
+</style>