239 lines
5.8 KiB
Svelte
239 lines
5.8 KiB
Svelte
<script>
|
|
import { resolve } from '$app/paths';
|
|
import { PUBLIC_IMAGE_BASE_URL } from '$env/static/public';
|
|
import { t } from '$lib/translations';
|
|
import { isMobile } from '$lib/utils/isMobile';
|
|
|
|
import Head from '$lib/components/Head.svelte';
|
|
import DonateIcon from '$lib/components/icons/DonateIcon.svelte';
|
|
|
|
const backgroundImage = isMobile()
|
|
? `${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/route-wallpaper-mobile.webp`
|
|
: `${PUBLIC_IMAGE_BASE_URL}/t/f_webp,w_1920,h_1080/embroidery-viewer/route-wallpaper.webp`;
|
|
</script>
|
|
|
|
<Head
|
|
title="about.seo.title"
|
|
description="about.seo.description"
|
|
keywords="about.seo.keywords"
|
|
url="about.seo.url"
|
|
/>
|
|
|
|
<section aria-labelledby="about-heading">
|
|
<div
|
|
class="heading-container"
|
|
style={`background: url(${backgroundImage}) center/cover no-repeat`}
|
|
>
|
|
<div class="overlay">
|
|
<p>{$t('about.hero.tagline')}</p>
|
|
<h1 id="about-heading">{$t('about.hero.title')}</h1>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="about-content">
|
|
<div class="embroidery-bg"></div>
|
|
<h1>{$t('about.story.title')}</h1>
|
|
<div class="content-split">
|
|
<div class="split-left">
|
|
<p>{$t('about.story.p1')}</p>
|
|
<p>{$t('about.story.p2')}</p>
|
|
<p style="font-size: 1.7rem;">
|
|
{$t('about.story.quote1')}
|
|
</p>
|
|
<p>{$t('about.story.p3')}</p>
|
|
<p>{$t('about.story.p4')}</p>
|
|
<p style="font-size: 1.7rem;">
|
|
{$t('about.story.quote2')}
|
|
</p>
|
|
</div>
|
|
<div class="split-right">
|
|
<img
|
|
src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/woman-sad.webp`}
|
|
style="border: 3px solid white;"
|
|
width={isMobile() ? 300 : 400}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="content-split"
|
|
style={isMobile() ? 'flex-direction: column-reverse' : ''}
|
|
>
|
|
<div class="split-left" style={isMobile() ? 'align-items: center' : ''}>
|
|
<img
|
|
src={`${PUBLIC_IMAGE_BASE_URL}/t/f_webp/embroidery-viewer/viewer-screenshot.webp`}
|
|
style="border: 3px solid black;"
|
|
width={isMobile() ? 300 : 400}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="split-right" style="align-items: flex-start;">
|
|
<p>{$t('about.product.p1')}</p>
|
|
<p>{$t('about.product.p2')}</p>
|
|
<p>{$t('about.product.p3')}</p>
|
|
<p>{$t('about.product.p4')}</p>
|
|
|
|
<p style="font-size: 1.7rem;">
|
|
{$t('about.product.quote')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content-split">
|
|
<div class="split-left">
|
|
<h2>{$t('about.support.title')}</h2>
|
|
|
|
<p>{$t('about.support.p1')}</p>
|
|
<p>{$t('about.support.p2')}</p>
|
|
<p>{$t('about.support.p3')}</p>
|
|
</div>
|
|
|
|
<div
|
|
class="split-right"
|
|
style="align-items: center; justify-content: center;"
|
|
>
|
|
<DonateIcon color="#ffffff" size={360} />
|
|
</div>
|
|
</div>
|
|
<div class="button-container">
|
|
<a class="organic-btn-secondary" href={resolve('/support-us')}>
|
|
{$t('about.support.cta')}
|
|
</a>
|
|
</div>
|
|
</section>
|
|
|
|
<style>
|
|
.embroidery-bg {
|
|
position: absolute;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.15;
|
|
|
|
background-image: url("data:image/svg+xml,%3Csvg width='600' height='600' viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23ffffff' stroke-width='1.5' fill='none'%3E%3C!-- curved thread lines --%3E%3Cpath d='M50 100 Q150 50 250 120 T450 100' stroke-dasharray='6 6'/%3E%3Cpath d='M100 300 Q200 250 300 320 T500 300' stroke-dasharray='4 8'/%3E%3C!-- small crosses (stitches) --%3E%3Cg stroke-width='2'%3E%3Cpath d='M100 200 l10 10 M110 200 l-10 10'/%3E%3Cpath d='M300 400 l10 10 M310 400 l-10 10'/%3E%3Cpath d='M500 150 l10 10 M510 150 l-10 10'/%3E%3C/g%3E%3C!-- circular embroidery hoop hint --%3E%3Ccircle cx='500' cy='500' r='80' stroke-dasharray='5 10'/%3E%3C/g%3E%3C/svg%3E");
|
|
background-size: 600px 600px;
|
|
}
|
|
.button-container {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 70px;
|
|
}
|
|
|
|
.organic-btn-secondary {
|
|
font-size: 1.3rem;
|
|
padding: 20px 100px;
|
|
}
|
|
|
|
h2 {
|
|
color: white;
|
|
margin: 0;
|
|
text-align: center;
|
|
font-size: 2.3rem;
|
|
margin-top: 100px;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.content-split {
|
|
width: 85%;
|
|
display: flex;
|
|
margin: 0 auto;
|
|
padding-top: 150px;
|
|
}
|
|
|
|
.split-left {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.split-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.split-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex: 1;
|
|
}
|
|
|
|
.heading-container {
|
|
position: relative;
|
|
z-index: 0;
|
|
width: 100%;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.overlay {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 80%;
|
|
z-index: 1;
|
|
text-align: center;
|
|
margin-bottom: 100px;
|
|
}
|
|
|
|
.heading-container h1 {
|
|
font-size: clamp(3.5rem, 4vw, 3.5rem);
|
|
font-weight: 700;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.2;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#about-content {
|
|
position: relative; /* IMPORTANT */
|
|
margin: 0;
|
|
background-color: var(--color-primary);
|
|
color: white;
|
|
padding: 100px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#about-content > *:not(.embroidery-bg) {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
#about-content h1 {
|
|
color: white;
|
|
margin: 0;
|
|
text-align: center;
|
|
font-size: 2.3rem;
|
|
}
|
|
|
|
#about-content p {
|
|
font-size: 1.2rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.heading-container {
|
|
width: 100%;
|
|
}
|
|
.heading-container h1 {
|
|
font-size: clamp(2.8rem, 4vw, 3.5rem);
|
|
}
|
|
|
|
.content-split {
|
|
width: 100%;
|
|
flex-direction: column;
|
|
padding-top: 50px;
|
|
}
|
|
|
|
#about-content {
|
|
padding: 30px 20px;
|
|
line-height: 1.5;
|
|
}
|
|
}
|
|
</style>
|