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-27 21:03:49 +02:00
|
|
|
|
2023-07-28 20:28:27 +02:00
|
|
|
const ns = nsMerge(pageNs, 'common', 'homepage')
|
2023-07-27 21:03:49 +02:00
|
|
|
|
2023-07-28 20:34:53 +02:00
|
|
|
//const BoldLink = ({ href, children }) => (
|
|
|
|
|
// <a href={href} className="font-bold underline 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 [ready, setReady] = useState(false)
|
|
|
|
|
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 11:02:25 +02:00
|
|
|
setTimeout(() => setReady(true), duration * 1000)
|
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 ${
|
|
|
|
|
ready ? '-translate-y-full h-1 opacity-0' : 'h-screen'
|
|
|
|
|
} ${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
|
|
|
|
|
|
|
|
<div className="max-w-7xl m-auto px-0 my-24">
|
|
|
|
|
<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
|
|
|
}
|
|
|
|
|
}
|
