mirror of
https://github.com/Lissy93/web-check.git
synced 2025-02-19 20:00:48 +01:00
feat: Adds new feature components for new homepage
This commit is contained in:
Alicia Sykes
parent
e2d83b627a
commit
2f1bab569d
108
src/components/homepage/AboutSection.astro
Normal file
108
src/components/homepage/AboutSection.astro
Normal 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>
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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);
|
||||
|
||||
66
src/components/homepage/ButtonGroup.astro
Normal file
66
src/components/homepage/ButtonGroup.astro
Normal 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>
|
||||
40
src/components/homepage/Features.astro
Normal file
40
src/components/homepage/Features.astro
Normal 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>
|
||||
@ -21,7 +21,6 @@ import AnimatedInput from "./AnimatedInput.astro"
|
||||
<AnimatedButton />
|
||||
</form>
|
||||
</div>
|
||||
<div>X</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
62
src/components/homepage/SponsorSegment.astro
Normal file
62
src/components/homepage/SponsorSegment.astro
Normal 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>
|
||||
Loading…
Reference in New Issue
Block a user