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 { useState, useEffect } from 'react'
|
|
|
|
|
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-27 21:03:49 +02:00
|
|
|
import { DownIcon } 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-27 21:03:49 +02:00
|
|
|
|
2023-07-29 21:01:26 +02:00
|
|
|
const ns = nsMerge(pageNs, '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 }) => {
|
2023-07-29 21:01:26 +02:00
|
|
|
const [ready, setReady] = useState(0)
|
2023-07-27 21:03:49 +02:00
|
|
|
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
|
|
|
useEffect(() => {
|
2023-07-29 21:01:26 +02:00
|
|
|
setTimeout(() => setReady(1), duration * 1000)
|
|
|
|
|
setTimeout(() => setReady(2), duration * 1000 + 500)
|
2023-07-28 20:28:27 +02:00
|
|
|
}, [])
|
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
|
|
|
|
|
className={`m-0 p-0 w-full transition-all duration-300 ${
|
2023-07-29 21:01:26 +02:00
|
|
|
ready === 0
|
|
|
|
|
? 'h-screen'
|
|
|
|
|
: ready === 1
|
|
|
|
|
? '-translate-y-full h-0 opacity-0 overflow-hide -z-10'
|
|
|
|
|
: 'hidden'
|
2023-07-28 20:28:27 +02:00
|
|
|
} ${account.username ? 'hidden' : ''}`}
|
|
|
|
|
>
|
2023-07-27 21:03:49 +02:00
|
|
|
<div className="flex flex-col items-center justify-between h-screen mt-4 lg:mt-12 max-w-md m-auto pb-32">
|
2023-07-28 20:28:27 +02:00
|
|
|
<span />
|
2023-07-29 11:02:25 +02:00
|
|
|
<FreeSewingAnimation duration={duration} />
|
2023-07-28 20:28:27 +02:00
|
|
|
<DownIcon className="w-12 h-12 animate-bounce" />
|
2023-07-27 21:03:49 +02:00
|
|
|
</div>
|
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-29 21:01:26 +02:00
|
|
|
<div className="p-1 bg-gradient-to-tr from-neutral to-primary mt-12 rounded-none lg:rounded-xl lg:shadow text-neutral-content md:mx-4">
|
2023-07-29 21:06:08 +02:00
|
|
|
<div className="flex flex-col gap-8 md:grid md:grid-cols-2">
|
|
|
|
|
<div className="px-4 lg:px-12 pb-4 pt-12 lg:pb-4">
|
|
|
|
|
<h2 className="text-inherit mb-4">
|
|
|
|
|
Hi stranger <span role="img">👋</span>
|
|
|
|
|
</h2>
|
2023-07-29 21:01:26 +02:00
|
|
|
<p className="text-inherit font-medium">
|
2023-07-29 21:06:08 +02:00
|
|
|
My name is <b>Joost De Cock</b>. I am the founder and maintainer of{' '}
|
|
|
|
|
<b>FreeSewing</b>.
|
2023-07-29 21:01:26 +02:00
|
|
|
</p>
|
2023-07-29 21:06:08 +02:00
|
|
|
<p className="text-inherit font-medium">
|
2023-07-29 21:01:26 +02:00
|
|
|
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>
|
2023-07-29 21:06:08 +02:00
|
|
|
<div className="px-4 lg:px-12 pt-12 lg:py-12 pb-8">
|
2023-07-29 21:01:26 +02:00
|
|
|
<SignUp />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-07-27 21:03:49 +02:00
|
|
|
<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">
|
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:what2')}</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>
|
|
|
|
|
<p className="font-medium">{t('homepage:whatNot3')}</p>
|
2023-07-27 21:03:49 +02:00
|
|
|
<p className="font-medium">
|
2023-07-28 20:28:27 +02:00
|
|
|
{t('homepage:whatNot4')}
|
2023-07-27 21:03:49 +02:00
|
|
|
<br />
|
2023-07-28 20:28:27 +02:00
|
|
|
{t('homepage:whatNot5')}
|
2023-07-27 21:03:49 +02:00
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-28 20:28:27 +02:00
|
|
|
</div>
|
2023-07-27 21:03:49 +02:00
|
|
|
|
2023-07-28 20:28:27 +02:00
|
|
|
<div className="text-center mt-12">
|
|
|
|
|
<h2 className="text-5xl">{t('howDoesItWork')}</h2>
|
|
|
|
|
<HowDoesItWorkAnimation t={t} />
|
2023-07-27 21:03:49 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</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>
|
|
|
|
|
)
|
