diff --git a/src/components/homepage/AboutSection.astro b/src/components/homepage/AboutSection.astro
new file mode 100644
index 0000000..65cef2f
--- /dev/null
+++ b/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,
+ },
+];
+
+---
+
+
+
Ready to get started?
+
+ With over 30 supported checks
+ you can view and analyse key website information in an instant
+
+
+
+
+
+
+
+
+
diff --git a/src/components/homepage/AnimatedButton.astro b/src/components/homepage/AnimatedButton.astro
index 34fcbab..6b2a5c0 100644
--- a/src/components/homepage/AnimatedButton.astro
+++ b/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);
}
diff --git a/src/components/homepage/AnimatedInput.astro b/src/components/homepage/AnimatedInput.astro
index d4488d6..d74202f 100644
--- a/src/components/homepage/AnimatedInput.astro
+++ b/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);
diff --git a/src/components/homepage/ButtonGroup.astro b/src/components/homepage/ButtonGroup.astro
new file mode 100644
index 0000000..a99aa61
--- /dev/null
+++ b/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;
+
+---
+
+
+
+
diff --git a/src/components/homepage/Features.astro b/src/components/homepage/Features.astro
new file mode 100644
index 0000000..5e7037a
--- /dev/null
+++ b/src/components/homepage/Features.astro
@@ -0,0 +1,40 @@
+---
+
+import Icon from '@components/molecules/Icon.svelte';
+
+interface Props {
+ supportedChecks: string[];
+}
+
+const { supportedChecks } = Astro.props;
+
+---
+
+
+ {supportedChecks.map((check) => (
+ -
+
+ {check}
+
+ ))}
+ - More
+
+
+
diff --git a/src/components/homepage/HeroForm.astro b/src/components/homepage/HeroForm.astro
index f5d2e38..10b95e9 100644
--- a/src/components/homepage/HeroForm.astro
+++ b/src/components/homepage/HeroForm.astro
@@ -21,7 +21,6 @@ import AnimatedInput from "./AnimatedInput.astro"
- X