feat: Adds new feature components for new homepage

This commit is contained in:
Alicia Sykes 2024-06-08 15:22:45 +01:00
parent e2d83b627a
commit 2f1bab569d
7 changed files with 278 additions and 4 deletions

View File

@ -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>

View File

@ -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);
}

View File

@ -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);

View File

@ -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>

View File

@ -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>

View File

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

View File

@ -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>