2023-01-29 18:57:24 +01:00
|
|
|
// Hooks
|
2023-02-05 19:09:46 +01:00
|
|
|
import { useApp } from 'site/hooks/useApp.mjs'
|
2022-05-13 21:11:39 +02:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2023-01-29 18:57:24 +01:00
|
|
|
// Dependencies
|
|
|
|
|
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
|
|
|
|
|
// Components
|
|
|
|
|
import Head from 'next/head'
|
|
|
|
|
import { PageWrapper } from 'site/components/wrappers/page.mjs'
|
|
|
|
|
import { BareLayout } from 'site/components/layouts/bare.mjs'
|
|
|
|
|
import { Icons } from 'shared/components/navigation/primary.mjs'
|
2022-01-22 17:55:03 +01:00
|
|
|
|
2023-01-08 22:21:35 -08:00
|
|
|
const title = 'Welcome to the FreeSewing Lab'
|
|
|
|
|
|
2022-09-25 00:12:24 -04:00
|
|
|
const HomePage = () => {
|
2022-05-13 21:11:39 +02:00
|
|
|
const app = useApp()
|
|
|
|
|
const { t } = useTranslation(['lab'])
|
|
|
|
|
return (
|
2023-01-29 18:57:24 +01:00
|
|
|
<PageWrapper app={app} title="{title}" layout={BareLayout}>
|
2022-05-13 21:11:39 +02:00
|
|
|
<Head>
|
|
|
|
|
<meta property="og:title" content="FreeSewing.dev" key="title" />
|
2022-09-25 00:12:24 -04:00
|
|
|
<meta property="og:type" content="article" key="type" />
|
|
|
|
|
<meta
|
|
|
|
|
property="og:description"
|
|
|
|
|
content="Documentation and tutorials for FreeSewing developers and contributors. Plus our Developers Blog"
|
|
|
|
|
key="description"
|
|
|
|
|
/>
|
|
|
|
|
<meta property="og:article:author" content="Joost De Cock" key="author" />
|
|
|
|
|
<meta
|
|
|
|
|
property="og:image"
|
|
|
|
|
content="https://canary.backend.freesewing.org/og-img/en/dev/"
|
|
|
|
|
key="image"
|
|
|
|
|
/>
|
2022-05-13 21:11:39 +02:00
|
|
|
<meta property="og:image:type" content="image/png" />
|
|
|
|
|
<meta property="og:image:width" content="1200" />
|
|
|
|
|
<meta property="og:image:height" content="630" />
|
2022-09-25 00:12:24 -04:00
|
|
|
<meta property="og:url" content="https://freesewing.dev/" key="url" />
|
|
|
|
|
<meta property="og:locale" content="en_US" key="locale" />
|
|
|
|
|
<meta property="og:site_name" content="freesewing.dev" key="site" />
|
2023-01-08 22:21:35 -08:00
|
|
|
<title>{title}</title>
|
2022-05-13 21:11:39 +02:00
|
|
|
</Head>
|
2022-09-25 00:12:24 -04:00
|
|
|
<section
|
|
|
|
|
style={{
|
|
|
|
|
backgroundImage: "url('/img/splash.jpg')",
|
|
|
|
|
backgroundSize: 'cover',
|
|
|
|
|
backgroundPosition: '40% 50%',
|
|
|
|
|
}}
|
|
|
|
|
className="m-0 p-0 shadow drop-shadow-lg w-full mb-8"
|
|
|
|
|
>
|
|
|
|
|
<div className="mx-auto px-8 flex flex-col items-center justify-center min-h-screen py-24 lg:min-h-0 lg:py-96">
|
|
|
|
|
<div className="flex flex-col items-end max-w-4xl">
|
|
|
|
|
<h1
|
|
|
|
|
className={`
|
2022-05-13 21:11:39 +02:00
|
|
|
text-3xl font-black text-right px-4
|
|
|
|
|
sm:text-6xl
|
|
|
|
|
md:text-7xl px-6
|
|
|
|
|
lg:px-8
|
|
|
|
|
bg-accent
|
|
|
|
|
`}
|
2022-09-25 00:12:24 -04:00
|
|
|
style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
|
|
|
|
|
>
|
|
|
|
|
<span className="font-light">lab.</span>
|
|
|
|
|
FreeSewing
|
|
|
|
|
<span className="font-light">.dev</span>
|
|
|
|
|
</h1>
|
2022-05-13 21:11:39 +02:00
|
|
|
|
2022-09-25 00:12:24 -04:00
|
|
|
<h2
|
|
|
|
|
className={`
|
2022-05-13 21:11:39 +02:00
|
|
|
text-xl mr-0 mt-4 font-bold
|
|
|
|
|
sm:text-3xl
|
|
|
|
|
md:text-4xl
|
|
|
|
|
lg:max-w-1/2 lg:text-4xl
|
|
|
|
|
xl:pr-0 `}
|
2022-09-25 00:12:24 -04:00
|
|
|
style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
|
|
|
|
|
>
|
|
|
|
|
{t('slogan')}:
|
|
|
|
|
</h2>
|
|
|
|
|
<ul
|
|
|
|
|
className={`
|
2022-05-13 21:11:39 +02:00
|
|
|
text-xl mr-8 font-bold list list-inside list-disc
|
|
|
|
|
sm:text-3xl
|
|
|
|
|
md:text-4xl
|
|
|
|
|
lg:max-w-1/2 lg:text-3xl
|
|
|
|
|
xl:pr-0 `}
|
2022-09-25 00:12:24 -04:00
|
|
|
style={{ textShadow: '1px 1px 3px #000', color: 'white' }}
|
|
|
|
|
>
|
|
|
|
|
<li>{t('slogan1')}</li>
|
|
|
|
|
<li>{t('slogan2')}</li>
|
|
|
|
|
<li>{t('slogan3')}</li>
|
|
|
|
|
<li>{t('slogan4')}</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<Icons
|
|
|
|
|
app={app}
|
|
|
|
|
active="/"
|
|
|
|
|
ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
|
|
|
|
|
liClasses="text-neutral-content w-1/2 my-4 lg:mx-2 lg:w-24"
|
|
|
|
|
linkClasses={`
|
2022-05-13 21:11:39 +02:00
|
|
|
text-lg lg:text-xl py-1 text-secondary text-center
|
|
|
|
|
hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
|
|
|
|
|
flex flex-col items-center capitalize`}
|
2022-09-25 00:12:24 -04:00
|
|
|
/>
|
|
|
|
|
<p className="text-neutral-content text-center mt-8">
|
|
|
|
|
To learn more about FreeSewing and try our platform go to{' '}
|
|
|
|
|
<a
|
|
|
|
|
href="https://freesewing.org/"
|
|
|
|
|
title="Go to FreeSewing.org"
|
|
|
|
|
className="text-secondary font-bold"
|
|
|
|
|
>
|
|
|
|
|
freesewing.org
|
|
|
|
|
</a>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<div>
|
|
|
|
|
<div className="max-w-7xl m-auto my-32">
|
|
|
|
|
<div
|
|
|
|
|
className="bg-cover bg-neutral w-full bg-center rounded-lg shadow p-4 "
|
|
|
|
|
style={{ backgroundImage: 'url(/support.jpg)' }}
|
|
|
|
|
>
|
|
|
|
|
<h2 className="text-neutral-content p-4 text-4xl font-bold sm:font-light sm:text-6xl drop-shadow">
|
|
|
|
|
Support FreeSewing
|
|
|
|
|
</h2>
|
|
|
|
|
<p className="text-neutral-content p-4 font-bold max-w-md text-lg">
|
|
|
|
|
FreeSewing is fuelled by a voluntary subscription model
|
2022-05-13 21:11:39 +02:00
|
|
|
</p>
|
2022-09-25 00:12:24 -04:00
|
|
|
<p className="text-neutral-content p-4 font-bold max-w-md text-lg">
|
|
|
|
|
If you think what we do is worthwhile, and if you can spare a few coins each month
|
|
|
|
|
without hardship, please support our work
|
|
|
|
|
</p>
|
|
|
|
|
<a
|
|
|
|
|
role="button"
|
|
|
|
|
className="btn btn-accent btn-wide ml-4 mb-8"
|
|
|
|
|
href="https://freesewing.org/patrons/join"
|
|
|
|
|
>
|
|
|
|
|
Become a Patron
|
|
|
|
|
</a>
|
2022-05-13 21:11:39 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2022-09-25 00:12:24 -04:00
|
|
|
<div className="max-w-7xl m-auto my-32">
|
|
|
|
|
<div className="px-8 text-base-content">
|
|
|
|
|
<Icons
|
|
|
|
|
app={app}
|
|
|
|
|
active="/"
|
|
|
|
|
ulClasses="flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
|
|
|
|
|
liClasses="w-1/3 my-4 lg:mx-2 lg:w-24"
|
|
|
|
|
linkClasses={`
|
2022-05-13 21:11:39 +02:00
|
|
|
text-lg lg:text-xl py-1 text-base-content text-center
|
|
|
|
|
hover:text-secondary sm:hover:text-secondary-focus hover:cursor-pointer
|
|
|
|
|
flex flex-col items-center capitalize`}
|
2022-09-25 00:12:24 -04:00
|
|
|
/>
|
|
|
|
|
</div>
|
2022-05-13 21:11:39 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-01-29 18:57:24 +01:00
|
|
|
</PageWrapper>
|
2022-05-13 21:11:39 +02:00
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default HomePage
|
2022-02-06 19:16:49 +01:00
|
|
|
|
|
|
|
|
export async function getStaticProps({ locale }) {
|
|
|
|
|
return {
|
|
|
|
|
props: {
|
|
|
|
|
...(await serverSideTranslations(locale)),
|
2022-09-25 00:12:24 -04:00
|
|
|
},
|
2022-02-06 19:16:49 +01:00
|
|
|
}
|
|
|
|
|
}
|
