138 lines
2.8 KiB
Svelte
138 lines
2.8 KiB
Svelte
<script>
|
|
import { locale, t } from '$lib/translations';
|
|
import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
|
|
</script>
|
|
|
|
<section class="app">
|
|
<div class="container">
|
|
<!-- LEFT: TEXT -->
|
|
<div class="content">
|
|
<h2>
|
|
{$t('mobile.title.prefix')}
|
|
<span>{$t('mobile.title.highlight')}</span>
|
|
</h2>
|
|
|
|
<p class="description">
|
|
{$t('mobile.description')}
|
|
</p>
|
|
|
|
<!-- FEATURES -->
|
|
<div class="features">
|
|
<div>✅ {$t('mobile.features.formats')}</div>
|
|
<div>🎨 {$t('mobile.features.customization')}</div>
|
|
<div>🎯 {$t('mobile.features.highlight')}</div>
|
|
<div>📏 {$t('mobile.features.metadata')}</div>
|
|
<div>🚀 {$t('mobile.features.performance')}</div>
|
|
<div>♿ {$t('mobile.features.accessibility')}</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<a
|
|
class="cta-link"
|
|
href="https://play.google.com/store/apps/details?id=xyz.embroideryviewer.android"
|
|
target="_blank"
|
|
>
|
|
<img
|
|
src={`${PUBLIC_IMAGE_BASE_URL}/t/w_240,h_76,f_webp/embroidery-viewer/${$locale}/android-download.webp`}
|
|
alt={$t('mobile.cta_alt')}
|
|
width="240"
|
|
height="76"
|
|
/>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- RIGHT: IMAGE -->
|
|
<div class="visual">
|
|
<img
|
|
src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/${$locale}/app-with-frame.webp`}
|
|
alt={$t('mobile.image_alt')}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="blob"></div>
|
|
</section>
|
|
|
|
<style>
|
|
.cta-link {
|
|
padding: 0;
|
|
margin-top: 50px;
|
|
width: fit-content;
|
|
height: fit-content;
|
|
border: none;
|
|
}
|
|
|
|
.cta-link:hover {
|
|
border: none;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.app {
|
|
position: relative;
|
|
padding: 6rem 1.5rem;
|
|
background: #ffffff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
display: grid;
|
|
grid-template-columns: 1.1fr 1fr;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.2rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: clamp(2rem, 4vw, 2.6rem);
|
|
color: #06345f;
|
|
margin: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
h2 span {
|
|
font-weight: 900;
|
|
background: linear-gradient(120deg, #06345f, #194795);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.description {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.features {
|
|
margin-top: 0.5rem;
|
|
display: grid;
|
|
gap: 0.4rem;
|
|
font-size: 0.95rem;
|
|
color: #06345f;
|
|
}
|
|
|
|
.visual {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
.visual img {
|
|
width: 100%;
|
|
max-width: 380px;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.container {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
}
|
|
|
|
.content {
|
|
align-items: center;
|
|
}
|
|
}
|
|
</style>
|