Version 3.0.0 Redesign #34
11 changed files with 376 additions and 19 deletions
21
src/lib/components/icons/BoltIcon.svelte
Normal file
21
src/lib/components/icons/BoltIcon.svelte
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
<script>
|
||||||
|
export let size = 20;
|
||||||
|
export let color = 'currentColor';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 16 16"
|
||||||
|
fill={color}
|
||||||
|
aria-hidden="true"
|
||||||
|
id="Bolt--Streamline-Heroicons"
|
||||||
|
height={size}
|
||||||
|
width={size}
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
fill-rule="evenodd"
|
||||||
|
d="M9.743333333333332 1.0633333333333332a0.5 0.5 0 0 1 0.23933333333333331 0.568L8.654666666666666 6.5h4.845333333333333a0.5 0.5 0 0 1 0.36533333333333334 0.8413333333333333l-7 7.5a0.5 0.5 0 0 1 -0.848 -0.4733333333333333l1.3279999999999998 -4.867999999999999H2.5a0.5 0.5 0 0 1 -0.36533333333333334 -0.8413333333333333l7 -7.5a0.5 0.5 0 0 1 0.6086666666666667 -0.09533333333333333Z"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
stroke-width="0.6667"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
17
src/lib/components/icons/FilesIcon.svelte
Normal file
17
src/lib/components/icons/FilesIcon.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
export let size = 20;
|
||||||
|
export let color = 'currentColor';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
fill={color}
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
id="Flat"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M213.65723,66.34326l-40-40A8.00076,8.00076,0,0,0,168,24H88A16.01833,16.01833,0,0,0,72,40V56H56A16.01833,16.01833,0,0,0,40,72V216a16.01833,16.01833,0,0,0,16,16H168a16.01833,16.01833,0,0,0,16-16V200h16a16.01833,16.01833,0,0,0,16-16V72A8.00035,8.00035,0,0,0,213.65723,66.34326ZM136,192H88a8,8,0,0,1,0-16h48a8,8,0,0,1,0,16Zm0-32H88a8,8,0,0,1,0-16h48a8,8,0,0,1,0,16Zm64,24H184V104a8.00035,8.00035,0,0,0-2.34277-5.65674l-40-40A8.00076,8.00076,0,0,0,136,56H88V40h76.68652L200,75.314Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
18
src/lib/components/icons/FourSquaresIcon.svelte
Normal file
18
src/lib/components/icons/FourSquaresIcon.svelte
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script>
|
||||||
|
export let size = 20;
|
||||||
|
export let color = 'currentColor';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke={color}
|
||||||
|
stroke-width="1.5"
|
||||||
|
>
|
||||||
|
<rect x="3" y="3" width="7" height="7" rx="1.5" />
|
||||||
|
<rect x="14" y="3" width="7" height="7" rx="1.5" />
|
||||||
|
<rect x="3" y="14" width="7" height="7" rx="1.5" />
|
||||||
|
<rect x="14" y="14" width="7" height="7" rx="1.5" />
|
||||||
|
</svg>
|
||||||
17
src/lib/components/icons/PadlockIcon.svelte
Normal file
17
src/lib/components/icons/PadlockIcon.svelte
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<script>
|
||||||
|
export let size = 20;
|
||||||
|
export let color = 'currentColor';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svg
|
||||||
|
fill={color}
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
id="lock-check"
|
||||||
|
class="icon glyph"
|
||||||
|
><path
|
||||||
|
d="M18,8H17V7A5,5,0,0,0,7,7V8H6a2,2,0,0,0-2,2V20a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V10A2,2,0,0,0,18,8ZM9,7a3,3,0,0,1,6,0V8H9Zm6.71,6.71-4,4a1,1,0,0,1-1.42,0l-2-2a1,1,0,0,1,1.42-1.42L11,15.59l3.29-3.3a1,1,0,0,1,1.42,1.42Z"
|
||||||
|
></path></svg
|
||||||
|
>
|
||||||
202
src/lib/sections/Features.svelte
Normal file
202
src/lib/sections/Features.svelte
Normal file
|
|
@ -0,0 +1,202 @@
|
||||||
|
<script>
|
||||||
|
import { resolve } from '$app/paths';
|
||||||
|
import { t } from '$lib/translations';
|
||||||
|
|
||||||
|
import BoltIcon from '$lib/components/icons/BoltIcon.svelte';
|
||||||
|
import PadlockIcon from '$lib/components/icons/PadlockIcon.svelte';
|
||||||
|
import FourSquaresIcon from '$lib/components/icons/FourSquaresIcon.svelte';
|
||||||
|
import FilesIcon from '$lib/components/icons/FilesIcon.svelte';
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<section id="features">
|
||||||
|
<h1>{$t('features.title')}</h1>
|
||||||
|
|
||||||
|
<div class="cards-container">
|
||||||
|
<div class="blob">
|
||||||
|
<p class="adjective">{$t('features.cards.fast.adjective')}</p>
|
||||||
|
<h2>{$t('features.cards.fast.title')}</h2>
|
||||||
|
<BoltIcon color="#06345f" size={100} />
|
||||||
|
<p class="description">{$t('features.cards.fast.description')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="blob">
|
||||||
|
<p class="adjective">{$t('features.cards.private.adjective')}</p>
|
||||||
|
<h2>{$t('features.cards.private.title')}</h2>
|
||||||
|
<PadlockIcon color="#06345f" size={100} />
|
||||||
|
<p class="description">{$t('features.cards.private.description')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="blob">
|
||||||
|
<p class="adjective">{$t('features.cards.optimized.adjective')}</p>
|
||||||
|
<h2>{$t('features.cards.optimized.title')}</h2>
|
||||||
|
<FourSquaresIcon color="#06345f" size={100} />
|
||||||
|
<p class="description">{$t('features.cards.optimized.description')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="blob">
|
||||||
|
<p class="adjective">{$t('features.cards.compatibility.adjective')}</p>
|
||||||
|
<h2>{$t('features.cards.compatibility.title')}</h2>
|
||||||
|
<FilesIcon color="#06345f" size={100} />
|
||||||
|
<p class="description">
|
||||||
|
{$t('features.cards.compatibility.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="organic-btn-secondary" href={resolve('/viewer')}
|
||||||
|
>{$t('features.cta')}</a
|
||||||
|
>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
#features {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 100px 0;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
#features::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 150 C 60 20, 140 180, 190 50' stroke='white' stroke-width='1.5' stroke-dasharray='4 6' opacity='0.2'/%3E%3Ccircle cx='10' cy='150' r='3' fill='white' opacity='0.25'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 600px;
|
||||||
|
background-position: right -100px top -80px;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
#features::after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 200 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 40 C 80 180, 120 0, 180 140' stroke='white' stroke-width='1.2' stroke-dasharray='3 8' opacity='0.15'/%3E%3C/svg%3E");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 500px;
|
||||||
|
background-position: left -120px bottom -80px;
|
||||||
|
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
color: white;
|
||||||
|
font-size: 2.7rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-container {
|
||||||
|
display: grid;
|
||||||
|
gap: 20px;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
margin: 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
padding: 100px 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 380px;
|
||||||
|
height: 400px;
|
||||||
|
aspect-ratio: 1;
|
||||||
|
border-radius: 25% 50% 75% 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px 60px;
|
||||||
|
|
||||||
|
background: linear-gradient(
|
||||||
|
30deg in oklch shorter hue,
|
||||||
|
oklch(0.98 0.01 260) 10%,
|
||||||
|
oklch(0.92 0.02 260)
|
||||||
|
);
|
||||||
|
|
||||||
|
box-shadow: 1rem 1rem 50px #0001;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob h2 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.adjective {
|
||||||
|
color: var(--color-primary);
|
||||||
|
font-size: 0.8rem !important;
|
||||||
|
}
|
||||||
|
.organic-btn-secondary {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
padding: 30px 90px;
|
||||||
|
}
|
||||||
|
@media (max-width: 1639px) {
|
||||||
|
.blob {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 340px;
|
||||||
|
height: 380px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1480px) {
|
||||||
|
.cards-container {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@media (max-width: 1297px) {
|
||||||
|
.cards-container {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1210px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2.3rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1033px) {
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 880px) {
|
||||||
|
#features {
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-container {
|
||||||
|
padding: 0;
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
|
||||||
|
.blob {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
height: fit-content;
|
||||||
|
aspect-ratio: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 540px) {
|
||||||
|
.organic-btn-secondary {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1rem;
|
||||||
|
padding: 20px 50px;
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -50,25 +50,6 @@
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.organic-btn {
|
|
||||||
background: var(--color-primary);
|
|
||||||
width: fit-content;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
padding: 20px 60px;
|
|
||||||
font-size: 16px;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 58% 42% 65% 27% / 40% 60% 60% 70%;
|
|
||||||
border: 1px solid var(--color-primary);
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.organic-btn:hover {
|
|
||||||
color: var(--color-primary);
|
|
||||||
background-color: #ffffff;
|
|
||||||
border: 1px solid var(--color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1350px) {
|
@media (max-width: 1350px) {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: clamp(3.3rem, 4vw, 3.3rem);
|
font-size: clamp(3.3rem, 4vw, 3.3rem);
|
||||||
|
|
|
||||||
|
|
@ -78,3 +78,40 @@ strong {
|
||||||
ul li::marker {
|
ul li::marker {
|
||||||
color: #06345f;
|
color: #06345f;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.organic-btn {
|
||||||
|
background: var(--color-primary);
|
||||||
|
width: fit-content;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 20px 60px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 58% 42% 65% 27% / 40% 60% 60% 70%;
|
||||||
|
border: 1px solid var(--color-primary);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.organic-btn-secondary {
|
||||||
|
color: white;
|
||||||
|
width: fit-content;
|
||||||
|
padding: 20px 60px;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: 58% 42% 65% 27% / 40% 60% 60% 70%;
|
||||||
|
border: 1px solid white;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
background-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.organic-btn:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.organic-btn-secondary:hover {
|
||||||
|
color: var(--color-primary);
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
|
|
||||||
26
src/lib/translations/en-US/features.json
Normal file
26
src/lib/translations/en-US/features.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"title": "The Easiest Way to Preview Embroidery Files",
|
||||||
|
"cards": {
|
||||||
|
"fast": {
|
||||||
|
"adjective": "FAST",
|
||||||
|
"title": "Instant Preview",
|
||||||
|
"description": "Drop your file and see your design instantly—no installs, no waiting."
|
||||||
|
},
|
||||||
|
"private": {
|
||||||
|
"adjective": "PRIVATE",
|
||||||
|
"title": "Private by Design",
|
||||||
|
"description": "Your files stay on your device. Nothing is uploaded, ever."
|
||||||
|
},
|
||||||
|
"optimized": {
|
||||||
|
"adjective": "OPTIMIZED",
|
||||||
|
"title": "Multiple Files, One View",
|
||||||
|
"description": "Open and compare several designs at the same time in a clean layout."
|
||||||
|
},
|
||||||
|
"compatibility": {
|
||||||
|
"adjective": "COMPATIBILITY",
|
||||||
|
"title": "Supports Popular Formats",
|
||||||
|
"description": "Works with PES, DST, EXP and other common embroidery formats."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cta": "Try it now"
|
||||||
|
}
|
||||||
|
|
@ -137,6 +137,16 @@ const config = {
|
||||||
key: 'hero',
|
key: 'hero',
|
||||||
loader: async () => (await import('./en-US/hero.json')).default,
|
loader: async () => (await import('./en-US/hero.json')).default,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
locale: SUPPORTED_LOCALES.PT_BR,
|
||||||
|
key: 'features',
|
||||||
|
loader: async () => (await import('./pt-BR/features.json')).default,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
locale: SUPPORTED_LOCALES.EN_US,
|
||||||
|
key: 'features',
|
||||||
|
loader: async () => (await import('./en-US/features.json')).default,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
26
src/lib/translations/pt-BR/features.json
Normal file
26
src/lib/translations/pt-BR/features.json
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
{
|
||||||
|
"title": "A maneira mais fácil de visualizar arquivos de bordado",
|
||||||
|
"cards": {
|
||||||
|
"fast": {
|
||||||
|
"adjective": "RÁPIDO",
|
||||||
|
"title": "Visualização instantânea",
|
||||||
|
"description": "Arraste seu arquivo e veja o design na hora — sem instalar nada, sem esperar."
|
||||||
|
},
|
||||||
|
"private": {
|
||||||
|
"adjective": "PRIVADO",
|
||||||
|
"title": "Privacidade em primeiro lugar",
|
||||||
|
"description": "Seus arquivos ficam no seu dispositivo. Nada é enviado para a internet."
|
||||||
|
},
|
||||||
|
"optimized": {
|
||||||
|
"adjective": "OTIMIZADO",
|
||||||
|
"title": "Vários arquivos, uma visão",
|
||||||
|
"description": "Abra e compare vários designs ao mesmo tempo em um layout limpo."
|
||||||
|
},
|
||||||
|
"compatibility": {
|
||||||
|
"adjective": "COMPATÍVEL",
|
||||||
|
"title": "Suporta formatos populares",
|
||||||
|
"description": "Funciona com PES, DST, EXP e outros formatos comuns de bordado."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cta": "Experimente agora"
|
||||||
|
}
|
||||||
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
import Seo from '$lib/components/Seo.svelte';
|
import Seo from '$lib/components/Seo.svelte';
|
||||||
import Hero from '$lib/sections/Hero.svelte';
|
import Hero from '$lib/sections/Hero.svelte';
|
||||||
|
import Features from '$lib/sections/Features.svelte';
|
||||||
|
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
|
|
||||||
|
|
@ -17,6 +18,7 @@
|
||||||
|
|
||||||
<!-- eslint-disable svelte/no-at-html-tags -->
|
<!-- eslint-disable svelte/no-at-html-tags -->
|
||||||
<Hero />
|
<Hero />
|
||||||
|
<Features />
|
||||||
|
|
||||||
<div class="home-container">
|
<div class="home-container">
|
||||||
<section aria-labelledby="main-title">
|
<section aria-labelledby="main-title">
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue