+
@@ -168,49 +61,33 @@ const HomePage = ({ page }) => {
+
+
-
-
-
-
-
-
What is FreeSewing?
-- FreeSewing is open source software to generate made-to-measure sewing patterns, loved by home sewers and fashion entrepreneurs alike. -
-- 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. -
-- 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. -
+{t('whatIsFreeSewing')}
+{t('homepage:what1')}
+{t('homepage:what2')}
+{t('homepage:what3')}
-
What is FreeSewing not?
+{t('whatIsFreeSewingNot')}
+{t('homepage:whatNot1')}
+{t('homepage:whatNot2')}
+{t('homepage:whatNot3')}
- 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. -
-- Our websites do not contain any advertising. - We do not track you or sell your personal data. We do not violate your privacy. -
-- FreeSewing is not gendered. We do not exclude or discriminate. Nor do we tolerate discrimination in our community. -
-
- 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')}
- In fact, that is how we got to where we are today.
-
+ {t('homepage:whatNot5')}
+
{t('howDoesItWork')}
+
+
+ {nr}
+
+
+)
+
+const Title = ({ txt }) => (
+
+
+)
+
+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 (
+ + {txt} +
+
+
+ )
+
+ return (
+
+ )
+}
diff --git a/sites/shared/components/animations/loading-bar.mjs b/sites/shared/components/animations/loading-bar.mjs
new file mode 100644
index 00000000000..5c4db93e2b2
--- /dev/null
+++ b/sites/shared/components/animations/loading-bar.mjs
@@ -0,0 +1,16 @@
+export const LoadingBar = ({ duration = 1000, color = 'primary' }) => {
+ const [started, setStarted] = useState(false)
+ useEffect(() => {
+ setTimeout(() => setStarted(true), 100)
+ }, [])
+
+ return (
+
+
+
+ {slides.map((i) => (
+
+
+
+ ))}
+
+ {lineDrawings[i]}
+
+
+
+
+ {slides.map((i) => (
+
+
+
+ ))}
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+ )
+}
diff --git a/sites/shared/components/designs/linedrawings/aaron.mjs b/sites/shared/components/designs/linedrawings/aaron.mjs
index d90f7a8302f..f40a4f9c7b4 100644
--- a/sites/shared/components/designs/linedrawings/aaron.mjs
+++ b/sites/shared/components/designs/linedrawings/aaron.mjs
@@ -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
-}) => (
-