feat: improve footer section
This commit is contained in:
parent
dea16a682f
commit
51281abfa9
8 changed files with 212 additions and 74 deletions
BIN
src/lib/assets/logo-white.webp
Normal file
BIN
src/lib/assets/logo-white.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
src/lib/assets/logo.png
Normal file
BIN
src/lib/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
|
|
@ -2,97 +2,185 @@
|
|||
import { resolve } from '$app/paths';
|
||||
import { t } from '$lib/translations';
|
||||
import { appVersion } from '$lib/utils/env';
|
||||
|
||||
import MailIcon from '$lib/components/icons/MailIcon.svelte';
|
||||
import ArrowTopIcon from './icons/ArrowTopIcon.svelte';
|
||||
import logo from '$lib/assets/logo-white.webp';
|
||||
</script>
|
||||
|
||||
<!-- eslint-disable svelte/no-at-html-tags -->
|
||||
<footer>
|
||||
<div class="footer-content">
|
||||
<div class="footer-info">
|
||||
<p>
|
||||
{@html $t(
|
||||
'footer.copyright',
|
||||
/** @type {any} */ ({
|
||||
year: new Date().getFullYear(),
|
||||
website: 'https://leomurca.xyz',
|
||||
}),
|
||||
)}
|
||||
</p>
|
||||
<p>
|
||||
{@html $t(
|
||||
'footer.version',
|
||||
/** @type {any} */ ({ version: appVersion() }),
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div id="content-container">
|
||||
<section class="footer-block">
|
||||
<img
|
||||
src={logo}
|
||||
style="height: 80px; width: auto; margin-lft: -5px;"
|
||||
alt="Logotipo da Embroidery Viewer."
|
||||
/>
|
||||
<p>{$t('footer.slogan')}</p>
|
||||
</section>
|
||||
<section class="footer-block" aria-labelledby="contact-title">
|
||||
<h1 id="contact-title">{$t('footer.contact-title')}</h1>
|
||||
<p>{$t('footer.contact-description')}</p>
|
||||
|
||||
<nav class="footer-nav">
|
||||
<a href={resolve('/about')}>{$t('footer.about')}</a>
|
||||
<a href={resolve('/privacy-policy')}>{$t('footer.privacy.policy')}</a>
|
||||
<a href={resolve('/terms-of-service')}>{$t('footer.terms.of.service')}</a>
|
||||
</nav>
|
||||
<address class="contact-container">
|
||||
<div class="contact-item">
|
||||
<MailIcon size={30} />
|
||||
|
||||
<a href="mailto:leo@leomurca.xyz}" aria-label="leo@leomurca.xyz"
|
||||
>leo@leomurca.xyz</a
|
||||
>
|
||||
</div>
|
||||
</address>
|
||||
</section>
|
||||
<section class="footer-block">
|
||||
<h1>{$t('footer.resources')}</h1>
|
||||
<nav class="social-container" aria-label="Social media">
|
||||
<a href={resolve('/about')}>{$t('footer.about')}</a>
|
||||
<a href={resolve('/privacy-policy')}>{$t('footer.privacy.policy')}</a>
|
||||
<a href={resolve('/terms-of-service')}
|
||||
>{$t('footer.terms.of.service')}</a
|
||||
>
|
||||
</nav>
|
||||
<button
|
||||
class="back-to-top-button"
|
||||
aria-label={$t('footer.back-to-top.aria-label')}
|
||||
onclick={() => scrollTo({ top: 0, behavior: 'smooth' })}
|
||||
>
|
||||
<ArrowTopIcon size={30} /> {$t('footer.back-to-top.label')}</button
|
||||
>
|
||||
</section>
|
||||
</div>
|
||||
<section class="credits-container">
|
||||
Copyright {new Date().getFullYear()}
|
||||
|
||||
<a href="https://leomurca.xyz" target="_blank" rel="noreferrer"
|
||||
>Leonardo Murça</a
|
||||
>
|
||||
|
|
||||
{$t('footer.version')}:
|
||||
<span style="font-family: var(--font-bold);">{appVersion()}</span>
|
||||
</section>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
background-color: #f8f9fa;
|
||||
border-top: 1px solid #ddd;
|
||||
padding: 20px;
|
||||
background-color: var(--color-primary);
|
||||
width: 100%;
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
#content-container {
|
||||
width: 85%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
padding: 60px 0 60px 30px;
|
||||
scroll-margin-top: 100px;
|
||||
color: white;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-content {
|
||||
h1 {
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.contact-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
letter-spacing: 0.1rem;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.contact-container a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.contact-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 960px;
|
||||
margin: 0 auto;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.contact-item:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.social-container a {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container a:hover {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.back-to-top-button {
|
||||
text-align: center;
|
||||
background-color: transparent;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
padding: 13px;
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
width: 40%;
|
||||
margin-top: 30px;
|
||||
border: 1px solid white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
flex: 1 1 100%;
|
||||
margin-bottom: 10px;
|
||||
.back-to-top-button:hover {
|
||||
background-color: #ffffff;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.footer-info p {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
.credits-container {
|
||||
background-color: var(--color-secondary);
|
||||
color: white;
|
||||
margin: 0 auto;
|
||||
padding: 20px 30px;
|
||||
padding-left: 9%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer-info p:first-child {
|
||||
font-weight: bold;
|
||||
.credits-container a {
|
||||
color: white;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
flex: 1 1 100%;
|
||||
.credits-container a:hover {
|
||||
background-color: white;
|
||||
color: var(--color-secondary);
|
||||
}
|
||||
|
||||
.footer-nav a {
|
||||
margin: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.footer-content {
|
||||
flex-wrap: nowrap;
|
||||
text-align: left;
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
#content-container {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 60px 30px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.footer-info,
|
||||
.footer-nav {
|
||||
flex: 1 1 50%;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.footer-nav {
|
||||
text-align: right;
|
||||
.back-to-top-button {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
14
src/lib/components/icons/ArrowTopIcon.svelte
Normal file
14
src/lib/components/icons/ArrowTopIcon.svelte
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<script>
|
||||
export let size = 20;
|
||||
export let color = 'currentColor';
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
height={size}
|
||||
viewBox="0 -960 960 960"
|
||||
width={size}
|
||||
fill={color}
|
||||
>
|
||||
<path d="M480-528 296-344l-56-56 240-240 240 240-56 56-184-184Z" />
|
||||
</svg>
|
||||
19
src/lib/components/icons/MailIcon.svelte
Normal file
19
src/lib/components/icons/MailIcon.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<script>
|
||||
export let size = 20;
|
||||
export let strokeWidth = 2;
|
||||
</script>
|
||||
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width={size}
|
||||
height={size}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width={strokeWidth}
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect x="3" y="5" width="18" height="14" rx="2" ry="2" />
|
||||
<polyline points="3,7 12,13 21,7" />
|
||||
</svg>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
:root {
|
||||
--color-primary: #06345f;
|
||||
--color-secondary: #094275;
|
||||
|
||||
--font-base: 'Merienda';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
{
|
||||
"about": "ℹ About",
|
||||
"privacy.policy": "🔐 Privacy Policy",
|
||||
"terms.of.service": "📝 Terms of Service",
|
||||
"copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> All rights reserved.",
|
||||
"version": "🧵 Version: {{version}}"
|
||||
"slogan": "Preview your embroidery designs instantly — no software needed",
|
||||
"resources": "Resources",
|
||||
"contact-title": "Contact",
|
||||
"contact-description": "Do you want to help or have any questions? Contact us.",
|
||||
"back-to-top": {
|
||||
"label": "Back To Top",
|
||||
"aria-label": "Back to top of the page"
|
||||
},
|
||||
"about": "About",
|
||||
"privacy.policy": "Privacy Policy",
|
||||
"terms.of.service": "Terms of Service",
|
||||
"copyright": "Copyright © {{year}} <a href=\"{{website}}\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. All rights reserved.",
|
||||
"version": "Version {{version}}"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,15 @@
|
|||
{
|
||||
"about": "ℹ Sobre",
|
||||
"privacy.policy": "🔐 Política de Privacidade",
|
||||
"terms.of.service": "📝 Termos de Serviço",
|
||||
"copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. <br/> Todos os direitos reservados.",
|
||||
"version": "🧵 Versão: {{version}}"
|
||||
"slogan": "Visualize bordados instantaneamente — sem software",
|
||||
"resources": "Recursos",
|
||||
"contact-title": "Contato",
|
||||
"contact-description": "Quer ajudar ou tirar alguma dúvida? Contate-nos.",
|
||||
"back-to-top": {
|
||||
"label": "Voltar ao topo",
|
||||
"aria-label": "Voltar ao topo da página"
|
||||
},
|
||||
"about": "Sobre",
|
||||
"privacy.policy": "Política de Privacidade",
|
||||
"terms.of.service": "Termos de Serviço",
|
||||
"copyright": "Copyright © {{year}} <a href=\"{{website}}/pt-br\" target=\"_blank\" rel=\"noreferrer\">Leonardo Murça</a>. Todos os direitos reservados.",
|
||||
"version": "Versão {{version}}"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue