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; + +--- + +
+ {links.map(link => ( + {link.title} + ))} +
+ + 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