2023-01-29 16:44:02 +01:00
|
|
|
// Dependencies
|
2022-05-25 18:35:20 +02:00
|
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
2023-07-27 21:03:49 +02:00
|
|
|
import { nsMerge } from 'shared/utils.mjs'
|
|
|
|
|
// Hooks
|
|
|
|
|
import { useTranslation } from 'next-i18next'
|
2023-07-28 20:28:27 +02:00
|
|
|
import { useAccount } from 'shared/hooks/use-account.mjs'
|
2023-01-29 16:44:02 +01:00
|
|
|
// Components
|
2023-07-27 21:03:49 +02:00
|
|
|
import Head from 'next/head'
|
|
|
|
|
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
2023-07-28 20:34:53 +02:00
|
|
|
//import { PageLink } from 'shared/components/page-link.mjs'
|
2023-05-15 15:57:46 +02:00
|
|
|
import { BareLayout } from 'site/components/layouts/bare.mjs'
|
2023-07-25 19:38:22 +02:00
|
|
|
import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'
|
2023-07-30 14:21:39 +02:00
|
|
|
import { OkIcon } from 'shared/components/icons.mjs'
|
2023-07-28 20:28:27 +02:00
|
|
|
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
|
|
|
|
|
import { HowDoesItWorkAnimation } from 'shared/components/animations/how-does-it-work.mjs'
|
2023-07-29 21:01:26 +02:00
|
|
|
import { SignUp } from 'shared/components/susi/sign-up.mjs'
|
2023-07-30 18:21:24 +02:00
|
|
|
import { Subscribe, ns as patronsNs } from 'shared/components/patrons/subscribe.mjs'
|
2023-07-27 21:03:49 +02:00
|
|
|
|
2023-07-30 14:21:39 +02:00
|
|
|
const ns = nsMerge(pageNs, patronsNs, 'common', 'homepage', 'signup', 'errors')
|
2023-07-27 21:03:49 +02:00
|
|
|
|
2023-07-29 21:01:26 +02:00
|
|
|
const BoldLink = ({ href, children }) => (
|
|
|
|
|
<a href={href} className="font-bold underline decoration-2 hover:decoration-4">
|
|
|
|
|
{children}
|
|
|
|
|
</a>
|
|
|
|
|
)
|
2022-01-02 17:16:15 +01:00
|
|
|
|
2023-04-28 21:23:06 +02:00
|
|
|
/*
|
|
|
|
|
* Each page MUST be wrapped in the PageWrapper component.
|
|
|
|
|
* You also MUST spread props.page into this wrapper component
|
|
|
|
|
* when path and locale come from static props (as here)
|
|
|
|
|
* or set them manually.
|
|
|
|
|
*/
|
2023-07-27 21:03:49 +02:00
|
|
|
const HomePage = ({ page }) => {
|
|
|
|
|
const { t } = useTranslation(ns)
|
2023-07-28 20:28:27 +02:00
|
|
|
const { account } = useAccount()
|
2023-07-27 21:03:49 +02:00
|
|
|
|
2023-07-29 11:02:25 +02:00
|
|
|
// Duration of the FreeSewing animation
|
|
|
|
|
const duration = 6.66
|
|
|
|
|
|
2023-07-27 21:03:49 +02:00
|
|
|
return (
|
|
|
|
|
<PageWrapper {...page} layout={BareLayout}>
|
|
|
|
|
<ForceAccountCheck />
|
|
|
|
|
<Head>
|
2023-07-28 20:28:27 +02:00
|
|
|
<title>FreeSewing.org</title>
|
2023-07-27 21:03:49 +02:00
|
|
|
</Head>
|
2023-07-28 20:28:27 +02:00
|
|
|
<div
|
2023-07-30 14:21:39 +02:00
|
|
|
className={`m-0 p-0 w-64 m-auto mt-8 mb-20 md:mt-20 ${account.username ? 'hidden' : ''}`}
|
2023-07-28 20:28:27 +02:00
|
|
|
>
|
2023-07-30 14:21:39 +02:00
|
|
|
<FreeSewingAnimation duration={duration} />
|
2022-05-25 18:35:20 +02:00
|
|
|
</div>
|
2023-07-27 21:03:49 +02:00
|
|
|
|
2023-07-29 21:06:08 +02:00
|
|
|
<div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">
|
2023-07-30 15:55:11 +02:00
|
|
|
<div className="p-1 bg-gradient-to-tr from-neutral to-accent mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow text-neutral-content md:mx-4 p-8 lg:px-12 md:py-0">
|
2023-07-30 14:21:39 +02:00
|
|
|
<div className="flex flex-col md:gap-8 lg:gap-12 md:flex md:flex-row m-auto">
|
|
|
|
|
<div className="md:pt-8 pb-8 lg:py-12 grow m-auto max-w-prose">
|
2023-07-29 21:01:26 +02:00
|
|
|
<SignUp />
|
|
|
|
|
</div>
|
2023-07-30 14:21:39 +02:00
|
|
|
<div className="-mt-8 md:mt-0 pt-0 md:pt-8 pb-8 lg:py-12 max-w-prose m-auto m-auto">
|
|
|
|
|
<h2 className="text-inherit mb-4 hidden md:block">Why bother?</h2>
|
|
|
|
|
<ul>
|
|
|
|
|
<li className="flex flex-row gap-2 my-2">
|
|
|
|
|
<OkIcon stroke={4} /> Free of charge.
|
|
|
|
|
</li>
|
|
|
|
|
<li className="flex flex-row gap-2 my-2">
|
|
|
|
|
<OkIcon stroke={4} /> No ads. No tracking. No nonsense.
|
|
|
|
|
</li>
|
|
|
|
|
<li className="flex flex-row gap-2 my-2">
|
|
|
|
|
<OkIcon stroke={4} /> Store your measurements sets and patterns.
|
|
|
|
|
</li>
|
|
|
|
|
<li className="flex flex-row gap-2 my-2">
|
|
|
|
|
<OkIcon stroke={4} /> Personalize your user experience.
|
|
|
|
|
</li>
|
|
|
|
|
<li className="flex flex-row gap-2 my-2">
|
|
|
|
|
<OkIcon stroke={4} /> One-click account removal.
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2023-07-29 21:01:26 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-07-30 15:55:11 +02:00
|
|
|
<div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:mt-20 md:px-4">
|
2023-07-27 21:03:49 +02:00
|
|
|
<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">
|
2023-07-28 20:28:27 +02:00
|
|
|
<h2 className="mb-4">{t('whatIsFreeSewing')}</h2>
|
|
|
|
|
<p className="font-medium">{t('homepage:what1')}</p>
|
|
|
|
|
<p className="font-medium">{t('homepage:what3')}</p>
|
2023-07-27 21:03:49 +02:00
|
|
|
</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">
|
2023-07-28 20:28:27 +02:00
|
|
|
<h2 className="mb-4">{t('whatIsFreeSewingNot')}</h2>
|
|
|
|
|
<p className="font-medium">{t('homepage:whatNot1')}</p>
|
|
|
|
|
<p className="font-medium">{t('homepage:whatNot2')}</p>
|
2023-07-27 21:03:49 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-28 20:28:27 +02:00
|
|
|
</div>
|
2023-07-27 21:03:49 +02:00
|
|
|
|
2023-07-30 15:55:11 +02:00
|
|
|
<div className="text-center mt-20 md:mt-20">
|
2023-07-28 20:28:27 +02:00
|
|
|
<h2 className="text-5xl">{t('howDoesItWork')}</h2>
|
|
|
|
|
<HowDoesItWorkAnimation t={t} />
|
2023-07-27 21:03:49 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-30 14:21:39 +02:00
|
|
|
|
|
|
|
|
<div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">
|
2023-07-30 15:55:11 +02:00
|
|
|
<div className="p-1 bg-gradient-to-tr from-neutral to-primary mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow text-neutral-content md:mx-4 p-8 lg:px-12 md:py-0">
|
2023-07-30 14:21:39 +02:00
|
|
|
<div className="flex flex-col md:gap-2 lg:gap-12 md:grid md:grid-cols-2">
|
|
|
|
|
<div className="md:pt-8 pb-8 lg:py-12 max-w-prose w-full m-auto">
|
|
|
|
|
<h2 className="text-inherit mb-4">
|
|
|
|
|
Hi stranger <span role="img">👋</span>
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="text-inherit font-medium">
|
|
|
|
|
My name is <b>Joost De Cock</b>. I am the founder and maintainer of{' '}
|
|
|
|
|
<b>FreeSewing</b>.
|
|
|
|
|
</p>
|
|
|
|
|
<p className="text-inherit font-medium">
|
|
|
|
|
I am here to ask your help. Or, more accurately, your support. Which we really need.
|
|
|
|
|
</p>
|
|
|
|
|
<p className="text-inherit font-medium">
|
|
|
|
|
If you think what we do is worthwhile, and if you can spare a few coins each month
|
|
|
|
|
without hardship, please <BoldLink href="/patrons/join">support our work</BoldLink>.
|
|
|
|
|
</p>
|
|
|
|
|
<p className="text-inherit font-medium">Thanks in advance for considering it.</p>
|
|
|
|
|
<p className="text-inherit font-medium">love</p>
|
|
|
|
|
<Joost className="ml-12 -mt-8 w-32" />
|
|
|
|
|
</div>
|
|
|
|
|
<div className="-mt-8 md:mt-0 pt-0 md:pt-8 pb-8 lg:py-12 max-w-prose m-auto w-full m-auto">
|
|
|
|
|
<h2 className="text-inherit">Support FreeSewing</h2>
|
2023-07-30 18:21:24 +02:00
|
|
|
<Subscribe color="secondary" />
|
2023-07-30 14:21:39 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-27 21:03:49 +02:00
|
|
|
</PageWrapper>
|
|
|
|
|
)
|
|
|
|
|
}
|
2022-01-02 17:16:15 +01:00
|
|
|
|
|
|
|
|
export default HomePage
|
2022-05-25 18:35:20 +02:00
|
|
|
|
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
2023-07-28 20:28:27 +02:00
|
|
|
...(await serverSideTranslations(locale, ns)),
|
2023-03-26 16:50:46 +02:00
|
|
|
page: {
|
2023-04-28 21:23:06 +02:00
|
|
|
locale,
|
2023-03-26 16:50:46 +02:00
|
|
|
path: [],
|
|
|
|
|
},
|
2022-12-03 11:25:02 -06:00
|
|
|
},
|
2022-05-25 18:35:20 +02:00
|
|
|
}
|
|
|
|
|
}
|
2023-07-29 21:01:26 +02:00
|
|
|
|
|
|
|
|
const Joost = ({ className = 'w-32' }) => (
|
|
|
|
|
<svg
|
|
|
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
|
|
|
fill="currentColor"
|
|
|
|
|
viewBox="2 3 82 53"
|
|
|
|
|
stroke="none"
|
|
|
|
|
className={className}
|
|
|
|
|
>
|
|
|
|
|
<path d="m 66.263452,24.338843 c -0.249707,-0.135259 -0.424208,0.135315 -0.58157,0.356293 -1.031714,1.450233 -1.593797,2.24449 -2.395918,3.330642 -0.578953,-0.345763 -1.665537,-0.850594 -2.254082,-1.210059 -0.414508,-0.253227 -1.04996,-0.196576 -0.904962,0.229373 0.712974,2.099939 0.955296,3.437405 0.527894,5.696519 0.02837,0.507153 0.563802,0.453788 0.770617,-0.02296 0.599331,-1.387695 1.30516,-2.457235 2.132335,-3.677809 1.72324,1.043054 2.524569,1.541887 4.892372,3.349448 0.221299,0.169213 0.531541,0.339094 0.726951,0.142524 0.195455,-0.196555 0.174485,-0.493084 -0.04684,-0.66228 -2.47745,-1.891267 -3.344594,-2.403043 -5.13223,-3.481687 0.802923,-1.074302 1.387355,-1.93031 2.434907,-3.402816 0.158122,-0.221963 0.08209,-0.512285 -0.169475,-0.647144 z m -4.913072,3.570174 c 0.294104,0.17613 1.199616,0.654531 1.492187,0.829376 -0.377011,0.584774 -0.865904,1.481805 -1.279211,1.938473 -0.02113,-0.603388 -0.07817,-2.102396 -0.212986,-2.76785 z M 10.945943,5.5629392 C 10.24524,5.3072666 9.4956492,5.2166095 8.7594788,5.3259125 7.8177952,5.4657237 6.9856199,6.0861899 6.2609085,6.9383222 6.1378134,6.9885384 6.0249223,6.9958728 5.9036536,7.0523472 5.1531423,7.4018675 4.444644,7.8693278 4.0046502,8.5295901 3.5646562,9.1898533 3.4496127,10.067426 3.8781553,10.984429 c 0.8138608,1.741505 2.2410262,2.505534 3.7001795,2.568868 1.4591541,0.06333 3.1042132,-0.692711 4.2700492,-1.483668 1.17077,-0.794302 1.703731,-1.569503 1.891119,-2.5581933 C 13.926892,8.5227451 13.588716,7.5353142 12.84526,6.7872041 12.299964,6.238483 11.646644,5.8186176 10.945943,5.5629441 Z m -0.281282,0.7834285 c 0.581666,0.2125524 1.131346,0.5620132 1.59198,1.0255421 0.58232,0.5859638 0.803414,1.2661838 0.666945,1.9862146 C 12.787117,10.078156 12.267505,10.865852 11.2286,11.570692 10.184764,12.278878 8.8281546,12.778514 7.6150047,12.725857 6.4018554,12.673204 5.3303197,12.136723 4.6283622,10.634668 4.2989999,9.9298935 4.3862518,9.4486435 4.692819,8.9886025 4.7872334,8.8469265 5.032207,8.754614 5.1734831,8.6234159 5.1088426,8.8269452 5.2094718,9.0462682 5.4059064,9.1300214 6.1043001,9.094751 6.3741929,8.1293862 6.7432825,7.6468372 7.6762072,6.9234363 9.2674621,7.362181 9.8262162,6.8471447 9.9239055,6.6396081 9.63782,6.4866779 9.4299705,6.3896581 9.120295,6.2682324 8.7909748,6.3019974 8.583978,6.2827993 9.2119019,5.9803926 10.105674,6.1475915 10.664665,6.3463389 Z M 57.562154,26.999459 c -0.20758,-0.181861 -0.413721,0.075 -0.59576,0.282432 -1.193759,1.361479 -1.870218,2.315578 -2.514825,3.414694 -0.475902,-0.455474 -1.004805,-0.697896 -1.487257,-1.169308 -0.339779,-0.332067 -0.935079,-0.373323 -0.872666,0.09766 0.306,2.321529 0.305657,3.766519 -0.466295,6.074529 -0.05866,0.537862 0.44386,0.566681 0.714286,0.09808 0.784674,-1.364296 1.621256,-2.497119 2.296332,-3.774647 1.414182,1.370327 2.843159,2.776027 4.723677,5.052603 0.175711,0.213068 0.433306,0.440947 0.646346,0.265199 0.213075,-0.175703 0.243347,-0.490872 0.06761,-0.703922 -1.9676,-2.382003 -3.496138,-3.911929 -4.963734,-5.329895 0.633811,-1.105599 1.288183,-2.217589 2.500265,-3.599972 0.182907,-0.208343 0.161381,-0.525725 -0.04798,-0.70746 z m -4.487112,3.728124 c 0.241674,0.231878 0.670643,0.533364 0.911118,0.763653 -0.25859,0.478067 -0.95067,1.720943 -1.177806,2.180972 0.0814,-0.637923 0.279641,-2.223406 0.266688,-2.944625 z m 23.382716,-9.315581 c -0.215102,-0.173015 -0.529716,-0.138981 -0.702835,0.07604 -1.167977,0.819038 -1.963427,2.087633 -2.899882,3.186067 -0.915769,-0.474507 -1.525598,-0.601701 -2.74738,-1.423601 -0.465939,-0.410757 -0.689319,0.01906 -0.714967,0.394234 l -0.106643,2.68198 -0.308605,3.017333 c -0.03138,0.486746 0.581416,0.72584 0.887964,0.346453 l 3.204677,-4.003507 3.097666,1.778172 c 0.235238,0.144349 0.54295,0.07082 0.687481,-0.164329 0.144355,-0.235239 -0.292248,-0.344641 -0.527381,-0.489169 l -2.729531,-1.708415 c 0.832653,-1.088021 1.557287,-2.335335 2.6773,-2.99959 0.173016,-0.215101 0.397151,-0.518551 0.182133,-0.691669 z m -6.376491,2.731077 2.222817,1.215685 -2.523597,3.137955 0.215973,-2.14071 z m 11.269816,2.765381 c 0,0 -1.896807,-0.07604 -2.535714,0.502088 -0.09511
|
|
|
|
|
</svg>
|
|
|
|
|
)
|
