diff --git a/src/lib/components/icons/BoltIcon.svelte b/src/lib/components/icons/BoltIcon.svelte new file mode 100644 index 0000000..ce24fda --- /dev/null +++ b/src/lib/components/icons/BoltIcon.svelte @@ -0,0 +1,21 @@ + + + diff --git a/src/lib/components/icons/FilesIcon.svelte b/src/lib/components/icons/FilesIcon.svelte new file mode 100644 index 0000000..27b0f67 --- /dev/null +++ b/src/lib/components/icons/FilesIcon.svelte @@ -0,0 +1,17 @@ + + + + + diff --git a/src/lib/components/icons/FourSquaresIcon.svelte b/src/lib/components/icons/FourSquaresIcon.svelte new file mode 100644 index 0000000..cf873cb --- /dev/null +++ b/src/lib/components/icons/FourSquaresIcon.svelte @@ -0,0 +1,18 @@ + + + + + + + + diff --git a/src/lib/components/icons/PadlockIcon.svelte b/src/lib/components/icons/PadlockIcon.svelte new file mode 100644 index 0000000..12bc80c --- /dev/null +++ b/src/lib/components/icons/PadlockIcon.svelte @@ -0,0 +1,17 @@ + + + diff --git a/src/lib/sections/Features.svelte b/src/lib/sections/Features.svelte new file mode 100644 index 0000000..5b8ba43 --- /dev/null +++ b/src/lib/sections/Features.svelte @@ -0,0 +1,202 @@ + + +
+

{$t('features.title')}

+ +
+
+

{$t('features.cards.fast.adjective')}

+

{$t('features.cards.fast.title')}

+ +

{$t('features.cards.fast.description')}

+
+ +
+

{$t('features.cards.private.adjective')}

+

{$t('features.cards.private.title')}

+ +

{$t('features.cards.private.description')}

+
+ +
+

{$t('features.cards.optimized.adjective')}

+

{$t('features.cards.optimized.title')}

+ +

{$t('features.cards.optimized.description')}

+
+ +
+

{$t('features.cards.compatibility.adjective')}

+

{$t('features.cards.compatibility.title')}

+ +

+ {$t('features.cards.compatibility.description')} +

+
+
+ {$t('features.cta')} +
+ + diff --git a/src/lib/sections/Hero.svelte b/src/lib/sections/Hero.svelte index c92d489..19f0651 100644 --- a/src/lib/sections/Hero.svelte +++ b/src/lib/sections/Hero.svelte @@ -50,25 +50,6 @@ 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) { h1 { font-size: clamp(3.3rem, 4vw, 3.3rem); diff --git a/src/lib/styles/global.css b/src/lib/styles/global.css index b88996e..19140a1 100644 --- a/src/lib/styles/global.css +++ b/src/lib/styles/global.css @@ -78,3 +78,40 @@ strong { ul li::marker { 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; +} diff --git a/src/lib/translations/en-US/features.json b/src/lib/translations/en-US/features.json new file mode 100644 index 0000000..d976842 --- /dev/null +++ b/src/lib/translations/en-US/features.json @@ -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" +} diff --git a/src/lib/translations/index.js b/src/lib/translations/index.js index 6f32815..c10fbd0 100644 --- a/src/lib/translations/index.js +++ b/src/lib/translations/index.js @@ -137,6 +137,16 @@ const config = { key: 'hero', 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, + }, ], }; diff --git a/src/lib/translations/pt-BR/features.json b/src/lib/translations/pt-BR/features.json new file mode 100644 index 0000000..68d3e67 --- /dev/null +++ b/src/lib/translations/pt-BR/features.json @@ -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" +} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 9d2bda3..36c02a6 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -6,6 +6,7 @@ import Seo from '$lib/components/Seo.svelte'; import Hero from '$lib/sections/Hero.svelte'; + import Features from '$lib/sections/Features.svelte'; let { data } = $props(); @@ -17,6 +18,7 @@ +