feat: Work on homepage
This commit is contained in:
Joost De Cock
parent
78e8987951
commit
4f3820b3be
18 changed files with 746 additions and 181 deletions
|
|
@ -4,6 +4,7 @@ import { nsMerge } from 'shared/utils.mjs'
|
|||
// Hooks
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useAccount } from 'shared/hooks/use-account.mjs'
|
||||
// Components
|
||||
import Head from 'next/head'
|
||||
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
||||
|
|
@ -12,123 +13,10 @@ import { PageLink } from 'shared/components/page-link.mjs'
|
|||
import { BareLayout } from 'site/components/layouts/bare.mjs'
|
||||
import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'
|
||||
import { DownIcon } from 'shared/components/icons.mjs'
|
||||
import { logoPath } from 'shared/components/logos/freesewing.mjs'
|
||||
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
|
||||
import { HowDoesItWorkAnimation } from 'shared/components/animations/how-does-it-work.mjs'
|
||||
|
||||
const ns = nsMerge(pageNs, 'common')
|
||||
|
||||
const Animation = ({
|
||||
className = 'w-6 h-6',
|
||||
stroke = 2,
|
||||
slogan1, slogan2
|
||||
}) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill='none'
|
||||
viewBox="0 0 25 25"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className + ' icon'}
|
||||
stroke="currentColor"
|
||||
>
|
||||
<animate
|
||||
attributeName="viewBox"
|
||||
from="0 0 25 25"
|
||||
to="0 10 25 7"
|
||||
begin="1.8s"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<clipPath id="logo">
|
||||
<path d={logoPath} stroke="none" fill="none" transform="translate(-0.5,0)" />
|
||||
</clipPath>
|
||||
<g>
|
||||
<g>
|
||||
<path d='M 20 0 l -10,1 l 10 1 l -11 1 l 13 1 l -15 1 l 16 1 l -16 1 l 15 1 l -15 1 l 16 1 l -16 1 l 17 1 l-16 1 l15 1 l -18 1.3 l 19 0.2 l -15 1 l 6 0.5 l -5 0.5 l 5 0 l 9 -0.5 l -3 1.2 l 2 1 l -3 0 l 2 2 l -3 -0.5 l 1 2 l -3 -1 l1 2 l-3 -1 l -1.5 1.5 l-2 -1.5 l-3 1 l-5 -7 l 2 -2 l-3 -1 l 2 -2'
|
||||
clipPath="url(#logo)" strokeOpacity="1" strokeDasharray="330 400">
|
||||
<animate
|
||||
attributeName="stroke-dashoffset"
|
||||
from="330"
|
||||
to="0"
|
||||
dur="0.8s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animate
|
||||
attributeName="stroke-width"
|
||||
begin="0.8s"
|
||||
from="0.3"
|
||||
to="3"
|
||||
dur="0.6s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XLM"
|
||||
type="scale"
|
||||
begin="1.3s"
|
||||
from="1"
|
||||
to="0.3"
|
||||
dur="0.2s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</path>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XLM"
|
||||
type="translate"
|
||||
begin="1.3s"
|
||||
from="0,0"
|
||||
to="8,2"
|
||||
dur="0.2s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</g>
|
||||
<text x="12.5" y="14" stroke="none" fill="currentColor" textAnchor='middle' opacity="0" style={{
|
||||
fontSize: 4.2,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '-0.007rem',
|
||||
}}>FreeSewing
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
begin="1.4s"
|
||||
from="0"
|
||||
to="1"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</text>
|
||||
<text x="12.5" y="15.25" stroke="none" fill="currentColor" textAnchor='middle' opacity="0" style={{
|
||||
fontSize: 1.4,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '-0.005rem',
|
||||
}}>{slogan1}
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
begin="2.4s"
|
||||
from="0"
|
||||
to="1"
|
||||
dur="0.2s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</text>
|
||||
<text x="12.5" y="16.5" stroke="none" fill="currentColor" textAnchor='middle' opacity="0" style={{
|
||||
fontSize: 1.4,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '-0.005rem',
|
||||
}}>{slogan2}
|
||||
<animate
|
||||
attributeName="opacity"
|
||||
begin="3s"
|
||||
from="0"
|
||||
to="1"
|
||||
dur="0.2s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
const ns = nsMerge(pageNs, 'common', 'homepage')
|
||||
|
||||
const BoldLink = ({ href, children }) => (
|
||||
<a href={href} className="font-bold underline hover:decoration-4">
|
||||
|
|
@ -145,22 +33,27 @@ const BoldLink = ({ href, children }) => (
|
|||
const HomePage = ({ page }) => {
|
||||
const [ready, setReady] = useState(false)
|
||||
const { t } = useTranslation(ns)
|
||||
const { account } = useAccount()
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => setReady(true), 4000)
|
||||
},[])
|
||||
setTimeout(() => setReady(true), 1800)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<PageWrapper {...page} layout={BareLayout}>
|
||||
<ForceAccountCheck />
|
||||
<Head>
|
||||
<title>Welcome to FreeSewing.org</title>
|
||||
<title>FreeSewing.org</title>
|
||||
</Head>
|
||||
<div className={`m-0 p-0 w-full transition-all duration-300 ${ready ? '-translate-y-full h-1 opacity-0' : 'h-screen'}`}>
|
||||
<div
|
||||
className={`m-0 p-0 w-full transition-all duration-300 ${
|
||||
ready ? '-translate-y-full h-1 opacity-0' : 'h-screen'
|
||||
} ${account.username ? 'hidden' : ''}`}
|
||||
>
|
||||
<div className="flex flex-col items-center justify-between h-screen mt-4 lg:mt-12 max-w-md m-auto pb-32">
|
||||
<span/>
|
||||
<Animation className='w-full' stroke={0.3} slogan1={t('common:slogan1')} slogan2={t('common:slogan2')}/>
|
||||
<DownIcon className="w-12 h-12 animate-bounce"/>
|
||||
<span />
|
||||
<FreeSewingAnimation />
|
||||
<DownIcon className="w-12 h-12 animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -168,49 +61,33 @@ const HomePage = ({ page }) => {
|
|||
<div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:px-4">
|
||||
<div className="p-1 bg-gradient-to-tr from-accent to-primary rounded-none md:rounded-xl md:shadow -mx-2 px-2 md:mx-auto md:px-1 flex flex-col">
|
||||
<div className="bg-base-100 px-4 md:px-8 py-10 rounded-none md:rounded-lg grow">
|
||||
<h2 className="mb-4">What is FreeSewing?</h2>
|
||||
<p className="font-medium">
|
||||
FreeSewing is open source software to generate made-to-measure sewing patterns, loved by home sewers and fashion entrepreneurs alike.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
FreeSewing.org makes this software available to you as an online tool with unmatched custimization and flexibility.
|
||||
We have over 50 designs, and regularly add new ones.
|
||||
You can pick any design and generate a pattern to your exact measurements.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
Because made-to-measure lies at the heart of what we do, we strongly suggest you take accurate measurements.
|
||||
Industry sizing is a bunch of lies. Join the slow fashion revolution and enjoy clothes that fit you.
|
||||
</p>
|
||||
<h2 className="mb-4">{t('whatIsFreeSewing')}</h2>
|
||||
<p className="font-medium">{t('homepage:what1')}</p>
|
||||
<p className="font-medium">{t('homepage:what2')}</p>
|
||||
<p className="font-medium">{t('homepage:what3')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-1 bg-gradient-to-tr from-info to-neutral rounded-none md:rounded-xl md:shadow -mx-2 px-2 md:mx-auto md:px-1 flex flex-col">
|
||||
<div className="bg-base-100 px-4 md:px-8 py-10 rounded-none md:rounded-lg grow">
|
||||
<h2 className="mb-4">What is FreeSewing not?</h2>
|
||||
<h2 className="mb-4">{t('whatIsFreeSewingNot')}</h2>
|
||||
<p className="font-medium">{t('homepage:whatNot1')}</p>
|
||||
<p className="font-medium">{t('homepage:whatNot2')}</p>
|
||||
<p className="font-medium">{t('homepage:whatNot3')}</p>
|
||||
<p className="font-medium">
|
||||
FreeSewing is not a company. We do not sell anything. We do not have staff or employees. We do not have an office. We do not get paid.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
Our websites do not contain any advertising.
|
||||
We do not track you or sell your personal data. We do not violate your privacy.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
FreeSewing is not gendered. We do not exclude or discriminate. Nor do we tolerate discrimination in our community.
|
||||
</p>
|
||||
<p className="font-medium">
|
||||
FreeSewing is not perfect. But we try our best.
|
||||
When we come up short, we will not be upset when you point it out.
|
||||
{t('homepage:whatNot4')}
|
||||
<br />
|
||||
In fact, that is how we got to where we are today.
|
||||
|
||||
{t('homepage:whatNot5')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-12">
|
||||
<h2 className="text-5xl">{t('howDoesItWork')}</h2>
|
||||
<HowDoesItWorkAnimation t={t} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</PageWrapper>
|
||||
)
|
||||
}
|
||||
|
|
@ -220,7 +97,7 @@ export default HomePage
|
|||
export async function getStaticProps({ locale }) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(locale)),
|
||||
...(await serverSideTranslations(locale, ns)),
|
||||
page: {
|
||||
locale,
|
||||
path: [],
|
||||
|
|
|
|||
BIN
sites/org/public/img/models/model-0.png
Normal file
BIN
sites/org/public/img/models/model-0.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 267 KiB |
BIN
sites/org/public/img/models/model-1.png
Normal file
BIN
sites/org/public/img/models/model-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
sites/org/public/img/models/model-2.png
Normal file
BIN
sites/org/public/img/models/model-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 271 KiB |
BIN
sites/org/public/img/models/model-3.png
Normal file
BIN
sites/org/public/img/models/model-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 188 KiB |
BIN
sites/org/public/img/models/model-4.png
Normal file
BIN
sites/org/public/img/models/model-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
BIN
sites/org/public/img/models/model-5.png
Normal file
BIN
sites/org/public/img/models/model-5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
BIN
sites/org/public/img/models/model-6.png
Normal file
BIN
sites/org/public/img/models/model-6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 288 KiB |
BIN
sites/org/public/img/models/model-7.png
Normal file
BIN
sites/org/public/img/models/model-7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
122
sites/shared/components/animations/freesewing.mjs
Normal file
122
sites/shared/components/animations/freesewing.mjs
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
import { logoPath } from 'shared/components/logos/freesewing.mjs'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
|
||||
export const ns = ['commom']
|
||||
|
||||
export const FreeSewingAnimation = ({ className = 'w-full', stroke = 0.3 }) => {
|
||||
const { t } = useTranslation(ns)
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 25 25"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className + ' icon'}
|
||||
stroke="currentColor"
|
||||
>
|
||||
<animat
|
||||
attributeName="viewBox"
|
||||
from="0 0 25 25"
|
||||
to="0 10 25 7"
|
||||
begin="1.8s"
|
||||
dur="0.3s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<clipPath id="logo">
|
||||
<path d={logoPath} stroke="none" fill="none" transform="translate(-0.5,0)" />
|
||||
</clipPath>
|
||||
<g>
|
||||
<g>
|
||||
<path
|
||||
d="M 20 0 l -10,1 l 10 1 l -11 1 l 13 1 l -15 1 l 16 1 l -16 1 l 15 1 l -15 1 l 16 1 l -16 1 l 17 1 l-16 1 l15 1 l -18 1.3 l 19 0.2 l -15 1 l 6 0.5 l -5 0.5 l 5 0 l 9 -0.5 l -3 1.2 l 2 1 l -3 0 l 2 2 l -3 -0.5 l 1 2 l -3 -1 l1 2 l-3 -1 l -1.5 1.5 l-2 -1.5 l-3 1 l-5 -7 l 2 -2 l-3 -1 l 2 -2"
|
||||
clipPath="url(#logo)"
|
||||
strokeOpacity="1"
|
||||
strokeDasharray="330 400"
|
||||
>
|
||||
<animate attributeName="stroke-dashoffset" from="330" to="0" dur="0.6s" fill="freeze" />
|
||||
<animate
|
||||
attributeName="stroke-width"
|
||||
begin="0.5s"
|
||||
from="0.3"
|
||||
to="3"
|
||||
dur="0.4s"
|
||||
fill="freeze"
|
||||
/>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XLM"
|
||||
type="scale"
|
||||
begin="0.5s"
|
||||
from="1"
|
||||
to="0.3"
|
||||
dur="0.2s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</path>
|
||||
<animateTransform
|
||||
attributeName="transform"
|
||||
attributeType="XLM"
|
||||
type="translate"
|
||||
begin="0.5s"
|
||||
from="0,0"
|
||||
to="8.5,2"
|
||||
dur="0.2s"
|
||||
fill="freeze"
|
||||
/>
|
||||
</g>
|
||||
<text
|
||||
x="12.5"
|
||||
y="14"
|
||||
stroke="none"
|
||||
fill="currentColor"
|
||||
textAnchor="middle"
|
||||
opacity="0"
|
||||
style={{
|
||||
fontSize: 4.2,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '-0.007rem',
|
||||
}}
|
||||
>
|
||||
FreeSewing
|
||||
<animate attributeName="opacity" begin="0.7s" from="0" to="1" dur="0.3s" fill="freeze" />
|
||||
</text>
|
||||
<text
|
||||
x="10.5"
|
||||
y="15.25"
|
||||
stroke="none"
|
||||
fill="currentColor"
|
||||
textAnchor="middle"
|
||||
opacity="0"
|
||||
style={{
|
||||
fontSize: 1.4,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '-0.005rem',
|
||||
}}
|
||||
>
|
||||
{t('common:slogan1')}
|
||||
<animate attributeName="opacity" begin="0.9s" from="0" to="1" dur="0.3s" fill="freeze" />
|
||||
</text>
|
||||
<text
|
||||
x="14.5"
|
||||
y="16.5"
|
||||
stroke="none"
|
||||
fill="currentColor"
|
||||
textAnchor="middle"
|
||||
opacity="0"
|
||||
style={{
|
||||
fontSize: 1.4,
|
||||
fontWeight: 'bold',
|
||||
letterSpacing: '-0.005rem',
|
||||
}}
|
||||
>
|
||||
{t('common:slogan2')}
|
||||
<animate attributeName="opacity" begin="1.2s" from="0" to="1" dur="0.2s" fill="freeze" />
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
155
sites/shared/components/animations/how-does-it-work.mjs
Normal file
155
sites/shared/components/animations/how-does-it-work.mjs
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { AaronFront, AaronBack } from 'shared/components/designs/linedrawings/aaron.mjs'
|
||||
import { BruceFront, BruceBack } from 'shared/components/designs/linedrawings/bruce.mjs'
|
||||
import { SimonFront, SimonBack } from 'shared/components/designs/linedrawings/simon.mjs'
|
||||
import { WahidFront, WahidBack } from 'shared/components/designs/linedrawings/wahid.mjs'
|
||||
|
||||
export const ns = ['homepage']
|
||||
|
||||
const lineDrawings = [
|
||||
<AaronFront className="h-72 md:h-96" />,
|
||||
<BruceBack className="h-72 md:h-96" />,
|
||||
<SimonBack className="h-72 md:h-96" />,
|
||||
<WahidFront className="h-72 md:h-96" />,
|
||||
<AaronBack className="h-72 md:h-96" />,
|
||||
<BruceFront className="h-72 md:h-96" />,
|
||||
<SimonFront className="h-72 md:h-96" />,
|
||||
<WahidBack className="h-72 md:h-96" />,
|
||||
]
|
||||
|
||||
const patternTweaks = [
|
||||
<path d="M 0,121.4 L 0,705.1 L 253.46,705.1 C 253.46,474.02 281.12,307.05 281.12,307.05 C 187.15,307.05 128.12,163.24 163.07,19.43 L 119.46,8.83 C 92.11,121.4 92.11,121.4 0,121.4 z" />,
|
||||
<path d="M 0,121.4 L 0,705.1 L 253.46,705.1 C 253.46,481 279.96,321 279.96,321 C 184.87,321 126.42,170.22 163.07,19.43 L 119.46,8.83 C 92.11,121.4 92.11,121.4 0,121.4 z" />,
|
||||
<path d="M 0,121.4 L 0,705.1 L 253.46,705.1 C 253.46,481 273.47,321 273.47,321 C 181.62,321 126.42,170.22 163.07,19.43 L 119.46,8.83 C 92.11,121.4 92.11,121.4 0,121.4 z" />,
|
||||
<path d="M 0,121.4 L 0,742.92 L 253.46,742.92 C 253.46,481 273.47,321 273.47,321 C 181.62,321 126.42,170.22 163.07,19.43 L 119.46,8.83 C 92.11,121.4 92.11,121.4 0,121.4 z" />,
|
||||
<path d="M 0,121.4 L 0,742.92 L 253.46,742.92 C 253.46,481 273.47,321 273.47,321 C 181.62,321 126.42,170.22 163.07,19.43 L 119.46,8.83 C 95.69,106.65 80.04,121.4 0,121.4 z" />,
|
||||
<path d="M 0,152.02 L 0,742.92 L 253.46,742.92 C 253.46,481 273.47,321 273.47,321 C 181.62,321 126.42,170.22 163.07,19.43 L 119.46,8.83 C 89.22,133.26 73.57,152.02 0,152.02 z" />,
|
||||
<path d="M 0,152.02 L 0,742.92 L 253.46,742.92 C 253.46,481 273.47,321 273.47,321 C 183.55,321 130.16,170.66 166.7,20.31 L 123.1,9.71 C 93.04,133.38 76.92,152.02 0,152.02 z" />,
|
||||
<path d="M 0,152.02 L 0,742.92 L 253.46,742.92 C 253.46,481 273.47,321 273.47,321 C 181.55,321 126.27,170.2 162.92,19.39 L 126.88,10.63 C 97.02,133.5 80.4,152.02 0,152.02 z" />,
|
||||
]
|
||||
|
||||
const Pattern = ({ i }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="-300 -20 850 850"
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="fill-primary h-72 md:h-96"
|
||||
strokeWidth="4"
|
||||
stroke="currentColor"
|
||||
fillOpacity="0.25"
|
||||
>
|
||||
{patternTweaks[i]}
|
||||
</svg>
|
||||
)
|
||||
|
||||
const Nr = ({ nr }) => (
|
||||
<div className="absolute top-8 w-full -ml-20">
|
||||
<span className="bg-primary text-primary-content font-bold rounded-full w-12 h-12 flex items-center justify-center align-center m-auto text-3xl">
|
||||
{nr}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
|
||||
const Title = ({ txt }) => (
|
||||
<div className="absolute top-28 left-0 w-full">
|
||||
<h3
|
||||
className="text-3xl -rotate-12 w-48 text-center m-auto"
|
||||
style={{
|
||||
textShadow:
|
||||
'1px 1px 1px hsl(var(--b1)), -1px -1px 1px hsl(var(--b1)), -1px 1px 1px hsl(var(--b1)), 1px -1px 1px hsl(var(--b1))',
|
||||
}}
|
||||
>
|
||||
{txt}
|
||||
</h3>
|
||||
</div>
|
||||
)
|
||||
|
||||
const slides = [0, 1, 2, 3, 4, 5, 6, 7]
|
||||
|
||||
export const HowDoesItWorkAnimation = ({ className = 'w-full', stroke = 0.3 }) => {
|
||||
const { t } = useTranslation(ns)
|
||||
const [step, setStep] = useState(0)
|
||||
const [halfStep, setHalfStep] = useState(0)
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
if (step > 6) setStep(0)
|
||||
else setStep(step + 1)
|
||||
if (halfStep > 7) setHalfStep(0)
|
||||
else setHalfStep(halfStep + 0.5)
|
||||
}, 800)
|
||||
}, [step])
|
||||
|
||||
return (
|
||||
<div className="flex flex-col md:grid md:grid-cols-3">
|
||||
<div className="relative w-full">
|
||||
<div className="relative h-72 md:h-96 overflow-hidden">
|
||||
{slides.map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`duration-700 ease-in-out transition-all ${
|
||||
step === i ? 'opacity-1' : 'opacity-0'
|
||||
} absolute top-0 text-center w-full`}
|
||||
>
|
||||
<div className="w-full flex flex-row items-center h-72 md:h-96 w-full justify-center">
|
||||
{lineDrawings[i]}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<Nr nr={1} />
|
||||
<Title txt={t('pickAnyDesign')} />
|
||||
</div>
|
||||
<div className="relative w-full">
|
||||
<div className="relative h-72 md:h-96 overflow-hidden">
|
||||
{slides.map((i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={`duration-700 ease-in-out transition-all ${
|
||||
Math.floor(halfStep) === i ? 'opacity-1' : 'opacity-0'
|
||||
} absolute top-0 text-center w-full`}
|
||||
>
|
||||
<div className="w-full flex flex-row items-center h-72 md:h-96 w-full justify-center">
|
||||
<img src={`/img/models/model-${i}.png`} className="h-72 md:h-96 shrink-0 px-8" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<Nr nr={2} />
|
||||
<Title txt={t('addASet')} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative w-full">
|
||||
<div className="relative h-96 overflow-hidden">
|
||||
<div className="w-full flex flex-row items-center h-72 md:h-96 w-full justify-center">
|
||||
<Pattern key={step} i={step} />
|
||||
</div>
|
||||
<Nr nr={3} />
|
||||
<Title txt={t('customizeYourPattern')} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 100 60"
|
||||
strokeWidth={stroke}
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className={className + ' icon'}
|
||||
stroke="currentColor"
|
||||
style={{ backgroundColor: '#00000011' }}
|
||||
>
|
||||
<g transform="scale(0.15), translate(20,10)">
|
||||
<AaronFront />
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
16
sites/shared/components/animations/loading-bar.mjs
Normal file
16
sites/shared/components/animations/loading-bar.mjs
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export const LoadingBar = ({ duration = 1000, color = 'primary' }) => {
|
||||
const [started, setStarted] = useState(false)
|
||||
useEffect(() => {
|
||||
setTimeout(() => setStarted(true), 100)
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className={`w-full bg-base-200 rounded-full h-2.5 mb-4 bg-${color} bg-opacity-30`}>
|
||||
<div
|
||||
className={`bg-${color} h-2.5 rounded-full transition-all ${
|
||||
started ? 'w-full' : 'w-0'
|
||||
} duration-[${duration}ms]`}
|
||||
></div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,37 +1,60 @@
|
|||
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
||||
|
||||
const strokeScale = 0.5
|
||||
|
||||
export const Aaron = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => (
|
||||
<LineDrawingWrapper viewBox="0 0 148 119" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
export const AaronFront = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => (
|
||||
<LineDrawingWrapper viewBox="0 0 74 119" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
|
||||
export const AaronBack = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => (
|
||||
<LineDrawingWrapper viewBox="74 0 74 119" {...{ className, stroke }}>
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="0 0 148 119" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* React component for the front
|
||||
*/
|
||||
const Front = ({ stroke }) => (
|
||||
export const AaronFront = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="0 0 74 119" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* React component for the back
|
||||
*/
|
||||
export const AaronBack = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="74 0 74 119" {...{ className, stroke }}>
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* SVG elements for the front
|
||||
*/
|
||||
export const Front = ({ stroke }) => (
|
||||
<>
|
||||
<path
|
||||
key="stitches"
|
||||
|
|
@ -42,19 +65,17 @@ const Front = ({ stroke }) => (
|
|||
<path
|
||||
key="folds"
|
||||
opacity={0.3}
|
||||
{...thin(stroke)}
|
||||
d="m4.3282 54.821c0.10055 1.487 0.17728 2.9792 0.19844 4.4688 0.0185 1.4896-8e-3 2.9818-0.0926 4.4741-0.0953 1.4922-0.24342 2.9792-0.47361 4.4556-0.22489 1.4764-0.52916 2.9395-0.91281 4.3815 0.18256-1.4817 0.34925-2.958 0.50271-4.4344 0.14552-1.4764 0.27252-2.9554 0.35719-4.4344 0.0953-1.479 0.14552-2.9633 0.20902-4.4503l0.082-2.2304c0.045-0.74083 0.0714-1.487 0.12964-2.2304zm1.8494 50.21c4.7837-0.42069 9.652-0.26194 14.38 0.73025 2.3627 0.46831 4.6964 1.0345 7.0458 1.5134 2.3495 0.48948 4.7069 0.93398 7.0697 1.3652 2.3574 0.44714 4.7202 0.84402 7.1014 1.1139 2.3866 0.28046 4.7678 0.54769 7.1596 0.67469 2.3892 0.12965 4.789 0.0714 7.1755-0.15081 2.3892-0.20638 4.7598-0.59531 7.1067-1.1218-2.3151 0.64293-4.6884 1.0848-7.0776 1.3811-2.3918 0.27517-4.8075 0.381-7.2205 0.29898-2.413-0.0635-4.8075-0.34925-7.1967-0.60325-2.3945-0.25665-4.7784-0.64029-7.1438-1.0742-2.3627-0.44714-4.7228-0.90752-7.075-1.4155-2.3522-0.50535-4.6937-1.0583-7.03-1.5875-1.1695-0.25665-2.3442-0.48683-3.5295-0.65881-1.1827-0.17463-2.376-0.28575-3.5719-0.37571-2.3892-0.17992-4.7943-0.19579-7.194-0.09zm6.1172-19.913c1.7648-0.69585 3.5745-1.2859 5.4001-1.8098 1.8309-0.51329 3.6909-0.92604 5.5668-1.2515 1.8732-0.33602 3.7624-0.55827 5.6409-0.80433l5.6436-0.73554c3.7624-0.48684 7.538-0.87578 11.202-1.8045 1.8388-0.43921 3.6592-0.96573 5.4557-1.5663 0.89959-0.29633 1.7939-0.60854 2.6802-0.94191 0.88636-0.33602 1.7674-0.68527 2.6458-1.0451-1.7066 0.8308-3.4634 1.561-5.2414 2.2304-1.7859 0.65088-3.601 1.225-5.4398 1.7145-0.92075 0.24606-1.8442 0.47096-2.7808 0.65881-0.93663 0.18786-1.8759 0.34396-2.8152 0.48684-1.8785 0.28575-3.7597 0.5371-5.6409 0.78581l-5.6515 0.68792c-1.8838 0.22225-3.765 0.45772-5.6356 0.7276-1.8706 0.27517-3.728 0.64029-5.5642 1.1007-1.8415 0.4445-3.6618 0.9816-5.4663 1.5663zm-1.0663-12.306c0.62177 0.18521 1.2435 0.37306 1.86 0.56621 0.61912 0.1905 1.233 0.39158 1.86 0.55033 0.62442 0.17198 1.2435 0.3519 1.8732 0.50006 0.62706 0.15611 1.2515 0.3228 1.8838 0.45509 2.5188 0.5715 5.0615 1.0292 7.6226 1.3494 2.5612 0.32809 5.1356 0.52917 7.7179 0.61119 2.5823 0.0794 5.17 0.0582 7.7629-0.0503-2.5744 0.31221-5.17 0.47096-7.7682 0.46302-2.5982 3e-3 -5.1991-0.17727-7.7788-0.50006-2.5797-0.33338-5.1408-0.81492-7.6544-1.4737-0.62971-0.15611-1.2541-0.33602-1.8785-0.52123-0.62442-0.17727-1.2409-0.38365-1.8574-0.58473-0.61912-0.19579-1.2224-0.43656-1.8309-0.6641-0.60589-0.22755-1.2118-0.46303-1.8124-0.70115z"
|
||||
/>
|
||||
<path
|
||||
key="outline"
|
||||
{...thin(stroke)}
|
||||
d="m54.356 1.8383c-6.0877 5.9635-28.882 6.1419-34.769 0m18.224 114.83c9.6255 0.0635 19.719-0.50536 30.207-1.9182 1.1271-0.15081 2.2463-0.31221 3.3576-0.4789v-74.798c-0.50007-0.20903-1.1668-0.51859-1.9182-0.9578-2.9051-1.7066-4.482-3.8761-4.7942-4.3154-1.4896-2.1008-1.9844-4.0587-2.3971-5.7547-0.635-2.6167-0.59266-4.8154-0.47889-9.1096 0.0185-0.68527 0.0767-2.6644 0.47889-7.6729 0.26459-3.2835 0.52652-6.0034 0.71967-7.911l-8.6307-1.9182s-2.5453 13.29-2.7173 13.912c-0.09 0.32279-0.11642 0.56621-0.28046 0.83873-0.22754 0.381-0.53181 0.59002-0.6985 0.6985-6.8987 4.0814-21.715 3.6852-27.376 0-0.16668-0.11112-0.47095-0.3175-0.6985-0.6985-0.16139-0.27252-0.1905-0.51858-0.28045-0.83873-0.17198-0.62177-2.7173-13.912-2.7173-13.912l-8.6307 1.9182c0.19314 1.9076 0.45508 4.6276 0.71966 7.911 0.40217 5.0059 0.46038 6.985 0.4789 7.6729 0.11377 4.2942 0.1561 6.4929-0.4789 9.1096-0.41275 1.696-0.90752 3.6512-2.3971 5.7547-0.31221 0.43921-1.8891 2.6088-4.7942 4.3154-0.75142 0.44186-1.4182 0.74877-1.9182 0.9578v74.798c1.1112 0.16669 2.2304 0.32809 3.3576 0.4789 10.485 1.4129 20.582 1.9817 30.207 1.9182z"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
/*
|
||||
* React component for the back
|
||||
* SVG elements for the front
|
||||
*/
|
||||
const Back = ({ stroke }) => (
|
||||
<>
|
||||
|
|
|
|||
98
sites/shared/components/designs/linedrawings/bruce.mjs
Normal file
98
sites/shared/components/designs/linedrawings/bruce.mjs
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
||||
|
||||
const strokeScale = 0.6
|
||||
|
||||
export const Bruce = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="0 0 202 78" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* React component for the front
|
||||
*/
|
||||
export const BruceFront = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="0 0 101 78" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* React component for the back
|
||||
*/
|
||||
export const BruceBack = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="101 0 101 78" {...{ className, stroke }}>
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* SVG elements for the front
|
||||
*/
|
||||
export const Front = ({ stroke }) => (
|
||||
<>
|
||||
<path
|
||||
key="stitches"
|
||||
{...dashed(stroke)}
|
||||
{...thin(stroke)}
|
||||
d="m 58.695139,70.692687 c 8.628062,-3.307291 21.476229,-6.974416 37.26127,-7.056437 1.169459,-0.0053 2.320396,0.0079 3.450167,0.03969 m -40.584437,8.244414 c 8.628062,-3.307292 21.476229,-6.974417 37.26127,-7.056437 1.169459,-0.0053 2.320396,0.0079 3.450167,0.03969 M 85.841343,10.706355 H 51.244426 50.979843 16.385573 M 85.841343,9.4390006 H 51.244426 50.979843 16.385573 M 43.531868,70.692687 C 34.903806,67.385396 22.055636,63.718271 6.2705959,63.63625 c -1.16946,-0.0053 -2.32039,0.0079 -3.45016,0.03969 M 43.404868,71.920354 C 34.776806,68.613062 21.928636,64.945937 6.1435959,64.863917 c -1.16946,-0.0053 -2.32039,0.0079 -3.45016,0.03969"
|
||||
/>
|
||||
<path
|
||||
key="seams"
|
||||
{...thin(stroke)}
|
||||
d="M 51.112206,59.5247 V 12.315022 m 15.566736,11.307707 c -0.195792,0.433917 -0.832116,1.537813 -1.14697,2.318334 -0.404812,1.000125 -1.317625,3.341688 -2.38125,7.408333 -0.619125,2.370667 -0.978958,4.135438 -1.322917,5.820833 -0.664104,3.264959 -1.124479,6.122459 -1.322916,7.408334 -0.431271,2.78077 -0.425979,3.214687 -0.79375,5.027083 -0.381,1.867958 -0.669396,3.288771 -1.322917,5.027083 -0.478896,1.275292 -1.096908,2.84136 -2.462158,4.815151 m 8.812158,-49.000567 c 1.156229,6.52198 2.301875,13.04925 3.439583,19.579166 2.151063,12.345459 4.796896,26.013833 6.879167,38.364583 M 35.517161,23.693373 c 0.195792,0.433917 0.860374,1.467169 1.175228,2.24769 0.404813,1.000125 1.317625,3.341688 2.38125,7.408333 0.619125,2.370667 0.978958,4.135438 1.322917,5.820833 0.664104,3.264959 1.124479,6.122459 1.322916,7.408334 0.431271,2.78077 0.42598,3.214687 0.79375,5.027083 0.381,1.867958 0.669396,3.288771 1.322917,5.027083 0.478896,1.275292 1.125166,2.84136 2.490416,4.815151 M 37.486139,12.447313 c -1.156229,6.52198 -2.301875,13.04925 -3.439583,19.579166 -2.151063,12.345459 -4.796896,26.013833 -6.879167,38.364583 m 34.517541,4.228042 c -0.66675,-2.368021 -1.54252,-5.275792 -2.500312,-7.929562 -0.230187,-0.635 -0.85725,-2.44475 -2.38125,-4.233334 -0.743479,-0.873125 -1.524,-1.785937 -2.910417,-2.38125 -1.055687,-0.452437 -2.021416,-0.529166 -2.645833,-0.529166 h -0.264583 c -0.624417,0 -1.590146,0.07673 -2.645834,0.529166 -1.386416,0.595313 -2.166937,1.508125 -2.910416,2.38125 -1.524,1.788584 -2.151063,3.598334 -2.38125,4.233334 -0.957792,2.65377 -1.833563,5.561541 -2.500313,7.929562"
|
||||
/>
|
||||
<path
|
||||
key="outline"
|
||||
d="m 100.19239,68.274396 c -1.07421,-0.01587 -2.159002,-0.01587 -3.251731,0 -13.446125,0.203729 -25.918583,2.905125 -37.26127,7.056437 M 86.169426,12.18273 h -34.925 -0.264583 -34.925 M 51.405868,2.2608555 h 33.572979 l 1.190625,9.9218745 c 0.357187,1.050396 0.709083,2.108729 1.058333,3.175 0,0 2.431521,7.440083 4.7625,16.139583 1.775354,6.627812 4.892146,19.647958 8.202085,36.777083 l -1.322918,0.79375 c -0.497417,0.20902 -1.222375,0.497416 -2.116667,0.79375 -1.987021,0.658812 -10.00125,2.344208 -15.345833,3.175 -9.136062,1.418166 -19.039417,2.182812 -21.695833,2.38125 -0.568854,-2.084917 -1.121833,-3.868209 -1.5875,-5.291667 0,0 -0.375708,-1.145646 -2.116667,-5.027083 C 55.829701,64.702521 55.469868,63.922 54.684056,63.247312 54.128431,62.768417 53.588681,62.540875 53.361139,62.453562 52.45891,62.109604 51.662514,62.141354 51.244472,62.188979 h -0.264583 c -0.418042,-0.04762 -1.214438,-0.07937 -2.116667,0.264583 -0.227541,0.08731 -0.767291,0.314855 -1.322916,0.79375 -0.785813,0.674688 -1.145646,1.455209 -1.322917,1.852084 -1.740958,3.881437 -2.116667,5.027083 -2.116667,5.027083 -0.465666,1.423458 -1.018645,3.20675 -1.5875,5.291667 -2.656416,-0.198438 -12.55977,-0.963084 -21.695836,-2.38125 -5.34458,-0.830792 -13.3588101,-2.516188 -15.3458301,-3.175 -0.89429,-0.296334 -1.61925,-0.58473 -2.11667,-0.79375 l -1.32291,-0.79375 c 3.30993,-17.129125 6.42673,-30.149271 8.2020801,-36.777083 2.33098,-8.6995 4.7625,-16.139583 4.7625,-16.139583 0.34925,-1.066271 0.70115,-2.124604 1.05833,-3.175 l 1.19063,-9.9218745 H 50.821139 Z M 2.0319759,68.274396 c 1.07421,-0.01587 2.159,-0.01587 3.25173,0 13.4461201,0.203729 25.9185791,2.905125 37.2612661,7.056437"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
/*
|
||||
* SVG elements for the back
|
||||
*/
|
||||
const Back = ({ stroke }) => (
|
||||
<>
|
||||
<path
|
||||
key="outline"
|
||||
d="m 102.30903,68.274396 c 1.07421,-0.01587 2.159,-0.01587 3.25173,0 13.44613,0.203729 25.91858,2.905125 37.26127,7.056437 M 116.3319,12.18273 h 34.925 0.26458 34.925 M 151.0982,2.2608555 h -33.57563 l -1.19062,9.9218745 c -0.35719,1.050396 -0.70909,2.108729 -1.05834,3.175 0,0 -2.43152,7.440083 -4.7625,16.139583 -1.77535,6.627812 -4.89214,19.647958 -8.20208,36.777083 l 1.32292,0.79375 c 0.49741,0.20902 1.22237,0.497416 2.11666,0.79375 1.98703,0.658812 10.00125,2.344208 15.34584,3.175 9.13606,1.418166 19.03941,2.182812 21.69583,2.38125 0.56885,-2.084917 1.12183,-3.868209 1.5875,-5.291667 0,0 0.37571,-1.145646 2.11667,-5.027083 0.17727,-0.396875 0.5371,-1.177396 1.32291,-1.852084 0.55563,-0.478895 1.09538,-0.706437 1.32292,-0.79375 0.90223,-0.343958 1.69863,-0.312208 2.11667,-0.264583 h 0.26458 c 0.41804,-0.04762 1.21444,-0.07937 2.11667,0.264583 0.22754,0.08731 0.76729,0.314855 1.32291,0.79375 0.78582,0.674688 1.14565,1.455209 1.32292,1.852084 1.74096,3.881437 2.11667,5.027083 2.11667,5.027083 0.46566,1.423458 1.01864,3.20675 1.5875,5.291667 2.65641,-0.198438 12.55977,-0.963084 21.69583,-2.38125 5.34458,-0.830792 13.35881,-2.516188 15.34583,-3.175 0.89429,-0.296334 1.61925,-0.58473 2.11667,-0.79375 l 1.32292,-0.79375 c -3.30994,-17.129125 -6.42673,-30.149271 -8.20209,-36.777083 -2.33098,-8.6995 -4.7625,-16.139583 -4.7625,-16.139583 -0.34925,-1.066271 -0.70114,-2.124604 -1.05833,-3.175 l -1.19062,-9.9218745 h -33.57298 z m 49.37125,66.0135405 c -1.07421,-0.01587 -2.159,-0.01587 -3.25173,0 -13.44613,0.203729 -25.91859,2.905125 -37.26127,7.056437"
|
||||
/>
|
||||
<path
|
||||
key="seams"
|
||||
{...thin(stroke)}
|
||||
d="m 179.0382,12.447313 c 1.11125,6.328834 2.21456,12.662959 3.30729,18.997083 2.06639,11.977687 4.61169,25.24125 6.61458,37.226875 m -48.14094,5.947833 c 0.66675,-2.368021 1.54253,-5.275792 2.50032,-7.929562 0.23018,-0.635 0.85725,-2.44475 2.38125,-4.233334 0.74348,-0.873125 1.524,-1.785937 2.91041,-2.38125 1.05569,-0.452437 2.02142,-0.529166 2.64584,-0.529166 h 0.26458 c 0.62442,0 1.59015,0.07673 2.64583,0.529166 1.38642,0.595313 2.16694,1.508125 2.91042,2.38125 1.524,1.788584 2.15106,3.598334 2.38125,4.233334 0.95779,2.65377 1.83356,5.561541 2.50031,7.929562 M 123.74028,12.447313 c -1.11125,6.328834 -2.21456,12.662959 -3.30729,18.997083 -2.0664,11.977687 -4.61169,25.24125 -6.61458,37.226875"
|
||||
/>
|
||||
<path
|
||||
key="stitches"
|
||||
{...dashed(stroke)}
|
||||
{...thin(stroke)}
|
||||
d="m 177.58299,12.050438 c 1.11125,6.402917 2.21456,12.811125 3.30994,19.221979 2.06904,12.117916 4.61433,25.540229 6.61723,37.663437 M 125.19549,12.050438 c -1.11125,6.402917 -2.21456,12.811125 -3.30994,19.221979 -2.06904,12.117916 -4.61433,25.540229 -6.61723,37.663437 m 28.54061,1.756833 c -8.62807,-3.307291 -21.47623,-6.974416 -37.26127,-7.056437 -1.16946,-0.0053 -2.3204,0.0079 -3.45017,0.03969 m 40.58444,8.244414 c -8.62807,-3.307292 -21.47623,-6.974417 -37.26127,-7.056437 -1.16946,-0.0053 -2.3204,0.0079 -3.45017,0.03969 m 56.00171,5.78908 c 8.62806,-3.307291 21.47623,-6.974416 37.26127,-7.056437 1.16946,-0.0053 2.32039,0.0079 3.45016,0.03969 m -40.58443,8.244414 c 8.62806,-3.307292 21.47623,-6.974417 37.26127,-7.056437 1.16946,-0.0053 2.32039,0.0079 3.45016,0.03969 M 116.66242,10.706355 h 34.59427 0.26458 34.59692 M 116.66242,9.4390006 h 34.59427 0.26458 34.59692"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
|
@ -31,6 +31,11 @@ export const LineDrawingWrapper = ({
|
|||
*/
|
||||
export const thin = (stroke = 1) => ({ strokeWidth: stroke / 2 })
|
||||
|
||||
/*
|
||||
* Think stroke-width helper to ensure consistency across linedrawings
|
||||
*/
|
||||
export const veryThin = (stroke = 1) => ({ strokeWidth: stroke / 3 })
|
||||
|
||||
/*
|
||||
* Dashed stroke-dasharray helper to ensure consistency across linedrawings
|
||||
*/
|
||||
|
|
|
|||
139
sites/shared/components/designs/linedrawings/simon.mjs
Normal file
139
sites/shared/components/designs/linedrawings/simon.mjs
Normal file
File diff suppressed because one or more lines are too long
116
sites/shared/components/designs/linedrawings/wahid.mjs
Normal file
116
sites/shared/components/designs/linedrawings/wahid.mjs
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
|
||||
|
||||
const strokeScale = 0.4
|
||||
|
||||
export const Wahid = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="0 0 162 126" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export const WahidFront = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="0 0 81 126" {...{ className, stroke }}>
|
||||
<Front stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
export const WahidBack = ({
|
||||
className = 'w-64', // CSS classes to apply
|
||||
stroke = 1, // Stroke width to use
|
||||
}) => {
|
||||
// Normalize stroke across designs
|
||||
stroke = stroke * strokeScale
|
||||
|
||||
return (
|
||||
<LineDrawingWrapper viewBox="82 0 81 126" {...{ className, stroke }}>
|
||||
<Back stroke={stroke} />
|
||||
</LineDrawingWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
/*
|
||||
* Always use an id for defs that is unique to the design because if we have
|
||||
* multiple linedrawings on the page, they share the same namespace and thus
|
||||
* IDs will collide
|
||||
*/
|
||||
const defs = (
|
||||
<defs>
|
||||
<g id="wahid-button">
|
||||
<circle cx="0" cy="0" r="1.8" strokeWidth="0.45" />
|
||||
<circle cx="-0.55" cy="-0.55" r="0.35" strokeWidth="0.25" />
|
||||
<circle cx="0.55" cy="-0.55" r="0.35" strokeWidth="0.25" />
|
||||
<circle cx="0.55" cy="0.55" r="0.35" strokeWidth="0.25" />
|
||||
<circle cx="-0.55" cy="0.55" r="0.35" strokeWidth="0.25" />
|
||||
</g>
|
||||
</defs>
|
||||
)
|
||||
|
||||
/*
|
||||
* React component for the front
|
||||
*/
|
||||
export const Front = ({ stroke }) => (
|
||||
<>
|
||||
{defs}
|
||||
<path
|
||||
key="darts"
|
||||
{...thin(stroke)}
|
||||
d="m 59.254131,58.572266 c -0.282849,14.103167 -0.248304,26.460675 0.06123,37.305715 m 0.08331,2.68639 c 0.146442,4.367849 0.339027,18.032999 0.574783,21.909619 M 30.210956,97.193711 H 6.6510187 m 44.2643213,0 H 74.364837 M 22.237874,58.572266 c 0.282849,14.103167 0.248304,26.460675 -0.06123,37.305715 m -0.08331,2.68639 c -0.146442,4.367849 -0.339027,18.032999 -0.574783,21.909619 M 30.245567,98.518921 H 6.6976497 v -2.64584 H 30.245567 Z M 50.8819,95.870781 h 23.547916 v 2.64583 H 50.8819 Z"
|
||||
/>
|
||||
<path
|
||||
key="stitches"
|
||||
{...dashed(stroke)}
|
||||
{...thin(stroke)}
|
||||
d="m 25.217291,3.134339 c 3.595687,1.275291 7.688791,2.174875 12.197291,2.248958 0.410104,0.0079 0.814917,0.0079 1.217084,0 h 1.801812 0.529167 1.801812 c 0.399521,0.0079 0.806979,0.0079 1.217083,0 4.5085,-0.07408 8.601605,-0.973667 12.197292,-2.248958"
|
||||
/>
|
||||
<path
|
||||
key="outline"
|
||||
d="m 41.970707,66.390917 c 0.0979,-0.0053 0.235479,-0.01587 0.399521,-0.0344 0.320146,-0.03175 0.484188,-0.05027 0.484188,-0.07673 0.0026,-0.02646 -0.150813,-0.07144 -0.862542,-0.150813 m 0.243417,20.476117 c 0.0979,-0.005 0.235479,-0.0159 0.39952,-0.0344 0.320146,-0.0317 0.484188,-0.0503 0.484188,-0.0767 0.0026,-0.0265 -0.150813,-0.0714 -0.862542,-0.15081 m -0.02117,-9.84518 c 0.0979,-0.005 0.235479,-0.01587 0.39952,-0.0344 0.320146,-0.03175 0.484188,-0.05027 0.484188,-0.07673 0.0026,-0.02646 -0.150813,-0.07144 -0.862542,-0.150813 m -0.28575,20.476113 c 0.0979,-0.005 0.235479,-0.0159 0.399521,-0.0344 0.320146,-0.0318 0.484188,-0.0503 0.484188,-0.0767 0.0026,-0.0264 -0.150813,-0.0714 -0.862542,-0.15081 m 0.243417,10.368989 c 0.0979,-0.005 0.235479,-0.0159 0.39952,-0.0344 0.320146,-0.0317 0.484188,-0.0503 0.484188,-0.0767 0.0026,-0.0265 -0.150813,-0.0714 -0.862542,-0.15081 m -0.28575,-50.273502 c 0.0979,-0.0053 0.235479,-0.01587 0.399521,-0.0344 0.320146,-0.03175 0.484188,-0.05027 0.484188,-0.07673 0.0026,-0.02646 -0.150813,-0.07144 -0.862542,-0.150812 m -1.280601,58.380324 -0.01583,3.18029 m -2.248956,-0.0159 h 4.529632 M 5.1089577,52.47913 v 9.887479 c 0.0053,0.844021 0.01323,2.450041 0,4.458229 -0.08202,12.453933 -0.8255,20.367623 -2.38125,43.333452 -0.06085,0.89694 -0.145521,2.15636 -0.248709,3.70417 M 25.217291,1.943714 9.6068737,8.02913 10.400624,11.733297 c 0.187854,1.063625 0.473604,2.725208 0.79375,4.7625 1.516063,9.681104 1.778,15.187083 1.852084,17.197916 0.22225,5.953125 -0.201084,7.839604 -0.529167,8.995834 -1.158875,4.071937 -3.2332083,6.373812 -3.7041673,6.879166 -1.336146,1.436688 -2.714625,2.352146 -3.704166,2.910417 1.09802,-0.833438 2.725208,-2.278063 3.96875,-4.497917 C 10.940374,44.660692 10.945666,41.39838 10.929791,39.77913 10.890101,35.707192 10.239228,20.768818 9.6068737,8.02913 M 40.695416,49.579296 c -1.764771,-2.989791 -3.6195,-6.439958 -5.423959,-10.326687 -2.137833,-4.606396 -3.341687,-7.985125 -5.027083,-12.7 0,0 -3.913187,-10.959041 -4.7625,-18.25625 -0.206375,-1.772708 -0.264583,-3.481916 -0.264583,-3.481916 -0.03969,-1.156229 -0.02646,-2.135188 0,-2.868083 3.595687,1.275291 7.688791,2.174875 12.197291,2.248958 0.410104,0.0079 0.814917,0.0079 1.217084,0 h 1.801812 0.529167 1.801812 c 0.399521,0.0079 0.806979,0.0079 1.217083,0 4.5085,-0.07408 8.601605,-0.973667 12.197292,-2.248958 0.02646,0.732895 0.03969,1.711854 0,2.868083 0,0 -0.05821,1.709208 -0.264583,3.481916 -0.849313,7.297209 -4.7625,18.25625 -4.7625,18.25625 -1.685396,4.714875 -2.88925,8.093604 -5.027084,12.7 -2.984499,6.434667 -6.11452,11.665479 -8.731249,15.610417 v 53.982934 l 9.405937,14.86165 c 1.695979,-0.33867 3.413125,-0.70909 5.146146,-1.11125 9.895416,-2.30188 18.896541,-5.34459 26.987499,-8.73125 m -38.237582,0.20637 -6.098646,9.63613 c -1.695979,-0.33867 -3.413125,-0.70909 -5.146146,-1.11125 -9.895417,-2.30188 -18.896541,-5.34459 -26.9875003,-8.73125 M 76.281873,52.47913 v 9.887479 c -0.0053,0.844021 -0.01323,2.450041 0,4.458229 0.08202,12.453933 0.8255,20.367623 2.38125,43.333452 0.06085,0.89694 0.145521,2.15636 0.248709,3.70417 M 56.17354,1.943714 71.783957,8.02913 l -0.79375,3.704167 c -0.187854,1.063625 -0.473604,2.725208 -0.79375,4.7625 -1.516063,9.681104 -1.778,15.187083 -1.852083,17.197916 -0.22225,5.953125 0.201083,7.839604 0.529166,8.995834 1.158875,4.071937 3.233208,6.373812 3.704167,6.879166 1.336146,1.436688 2.714625,2.352146 3.704166,2.910417 -1.09802,-0.833438 -2.725208,-2.278063 -3.96875,-4.497917 -1.862666,-3.320521 -1.867958,-6.582833 -1.852083,-8.202083 0.03969,-4.071938 0.690563,-19.010312 1.322917,-31.75"
|
||||
/>
|
||||
<use xlinkHref="#wahid-button" x="40" y="56.1" color="currentColor"></use>
|
||||
<use xlinkHref="#wahid-button" x="40" y="66.2" color="currentColor"></use>
|
||||
<use xlinkHref="#wahid-button" x="40.15" y="76.3" color="currentColor"></use>
|
||||
<use xlinkHref="#wahid-button" x="40.15" y="86.4" color="currentColor"></use>
|
||||
<use xlinkHref="#wahid-button" x="40.2" y="96.5" color="currentColor"></use>
|
||||
<use xlinkHref="#wahid-button" x="40.3" y="106.6" color="currentColor"></use>
|
||||
</>
|
||||
)
|
||||
|
||||
/*
|
||||
* React component for the back
|
||||
*/
|
||||
const Back = ({ stroke }) => (
|
||||
<>
|
||||
<path
|
||||
key="outline"
|
||||
d="m 157.23121,52.47913 v 9.887479 c -0.005,0.844021 -0.0132,2.450041 0,4.458229 0.082,12.453933 0.8255,20.367623 2.38125,43.333452 0.0608,0.89694 0.14552,2.15636 0.24871,3.70417 M 137.1229,1.943707 152.73331,8.029122 m 4.4979,44.450008 c -1.09802,-0.833438 -2.72521,-2.278063 -3.96875,-4.497917 -1.86267,-3.320521 -1.86796,-6.582833 -1.85208,-8.202083 0.0397,-4.071938 0.69056,-19.010312 1.32291,-31.75 M 137.12288,1.943714 c -3.59569,1.275291 -7.6888,2.174875 -12.1973,2.248958 -0.4101,0.0079 -0.81491,0.0079 -1.21708,0 h -1.80181 -0.52917 -1.80181 c -0.39952,0.0079 -0.80698,0.0079 -1.21708,0 -4.5085,-0.07408 -8.60161,-0.973667 -12.1973,-2.248958 m 18.05517,115.943056 3.683,5.81819 c 1.69598,-0.33867 3.41313,-0.70908 5.14615,-1.11125 9.89541,-2.30187 18.89654,-5.34458 26.9875,-8.73125 -7.9719,1.69333 -17.11325,3.09033 -27.24944,3.70417 -3.81529,0.23019 -7.48771,0.33602 -11.00667,0.33866 m -2.54793,-0.0185 -3.683,5.81819 c -1.69598,-0.33867 -3.41313,-0.70908 -5.14615,-1.11125 -9.89542,-2.30187 -18.896536,-5.34458 -26.987496,-8.73125 7.9719,1.69333 17.113246,3.09033 27.249436,3.70417 3.81529,0.23019 7.48771,0.33602 11.00666,0.33866 M 86.058294,52.47913 v 9.887479 c 0.005,0.844021 0.0132,2.450041 0,4.458229 -0.082,12.453933 -0.8255,20.367623 -2.38125,43.333452 -0.0609,0.89694 -0.14552,2.15636 -0.24871,3.70417 M 106.16665,1.943707 90.556244,8.029122 m -4.49795,44.450008 c 1.09802,-0.833438 2.72521,-2.278063 3.96875,-4.497917 1.86267,-3.320521 1.86796,-6.582833 1.85209,-8.202083 -0.0397,-4.071938 -0.69057,-19.010312 -1.32292,-31.75"
|
||||
/>
|
||||
<path
|
||||
key="stitches"
|
||||
{...thin(stroke)}
|
||||
{...dashed(stroke)}
|
||||
d="m 138.40611,2.446422 c -0.41011,0.248708 -0.83609,0.481542 -1.28059,0.690563 -4.36827,2.055812 -10.93787,2.227791 -12.19729,2.248958 -0.4101,0.0079 -0.81492,0.0079 -1.21708,0 h -1.80182 -0.52916 -1.80181 c -0.39953,0.0079 -0.80698,0.0079 -1.21709,0 -4.5085,-0.07408 -8.6016,-0.973667 -12.19729,-2.248958 -0.51065,-0.198438 -1.02129,-0.39423 -1.53458,-0.592667"
|
||||
/>
|
||||
<path
|
||||
key="darts"
|
||||
{...thin(stroke)}
|
||||
d="m 143.92015,47.170466 c 0.43464,22.690304 0.78099,45.327635 2.67748,68.895054 M 99.011784,47.170466 c -0.43464,22.690304 -0.78099,45.327635 -2.67748,68.895054 M 121.77706,4.192663 V 117.9635 m 19.12934,-1.0689 v 3.66977 m -38.36459,-3.66977 v 3.66977"
|
||||
/>
|
||||
</>
|
||||
)
|
||||
16
sites/shared/i18n/homepage/en.yaml
Normal file
16
sites/shared/i18n/homepage/en.yaml
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
welcome: Welcome to FreeSewing.org
|
||||
howDoesItWork: How does it work?
|
||||
whatIsFreeSewing: What is FreeSewing?
|
||||
whatIsFreeSewingNot: What is FreeSewing not?
|
||||
what1: FreeSewing is open source software to generate made-to-measure sewing patterns, loved by home sewers and fashion entrepreneurs alike.
|
||||
what2: FreeSewing.org makes this software available to you as an online tool with unmatched custimization and flexibility. We have over 50 designs, and regularly add new ones. You can pick any design and generate a pattern to your exact measurements.
|
||||
what3: Because made-to-measure lies at the heart of what we do, we strongly suggest you take accurate measurements. Industry sizing is a bunch of lies. Join the slow fashion revolution and enjoy clothes that fit you.
|
||||
whatNot1: FreeSewing is not a company. We do not sell anything. We do not have staff or employees. We do not have an office. We do not get paid.
|
||||
whatNot2: Our websites do not contain any advertising. We do not track you or sell your personal data. We do not violate your privacy.
|
||||
whatNot3: FreeSewing is not gendered. We do not exclude or discriminate. Nor do we tolerate discrimination in our community.
|
||||
whatNot4: FreeSewing is not perfect. But we try our best. When we come up short, we will not be upset when you point it out.
|
||||
whatNot5: In fact, that is how we got to where we are today.
|
||||
pickAnyDesign: Pick any design
|
||||
addASet: Add a set of measurements
|
||||
customizeYourPattern: Customize your pattern
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue