2022-05-13 21:11:39 +02:00
import Page from 'site/components/wrappers/page.js'
import useApp from 'site/hooks/useApp.js'
import Head from 'next/head'
2022-02-06 19:16:49 +01:00
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
2022-05-13 21:11:39 +02:00
import Layout from 'site/components/layouts/bare'
import { useTranslation } from 'next-i18next'
2022-07-12 20:31:53 +02:00
import { Icons } from 'shared/components/navigation/primary'
2022-01-22 17:55:03 +01:00
2022-05-13 21:11:39 +02:00
const HomePage = ( props ) => {
const app = useApp ( )
const { t } = useTranslation ( [ 'lab' ] )
return (
< Page app = { app } title = "Welcome to FreeSewing.dev" layout = { Layout } >
< Head >
< meta property = "og:title" content = "FreeSewing.dev" key = "title" / >
< 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' / >
< meta property = "og:image:type" content = "image/png" / >
< meta property = "og:image:width" content = "1200" / >
< meta property = "og:image:height" content = "630" / >
< 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' / >
< / H e a d >
< 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"
>
2022-05-14 19:48:04 +02:00
< 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" >
2022-05-13 21:11:39 +02:00
< div className = "flex flex-col items-end max-w-4xl" >
< h1
className = { `
text - 3 xl font - black text - right px - 4
sm : text - 6 xl
md : text - 7 xl px - 6
lg : px - 8
bg - accent
` }
style = { { textShadow : '1px 1px 3px #000' , color : 'white' } }
>
< span className = "font-light" > lab . < / s p a n >
FreeSewing
< span className = "font-light" > . dev < / s p a n >
< / h 1 >
< h2
className = { `
text - xl mr - 0 mt - 4 font - bold
sm : text - 3 xl
md : text - 4 xl
lg : max - w - 1 / 2 lg : text - 4 xl
xl : pr - 0 ` }
style = { { textShadow : '1px 1px 3px #000' , color : 'white' } }
> { t ( 'slogan' ) } : < / h 2 >
< ul
className = { `
text - xl mr - 8 font - bold list list - inside list - disc
sm : text - 3 xl
md : text - 4 xl
lg : max - w - 1 / 2 lg : text - 3 xl
xl : pr - 0 ` }
style = { { textShadow : '1px 1px 3px #000' , color : 'white' } }
>
< li > { t ( 'slogan1' ) } < / l i >
< li > { t ( 'slogan2' ) } < / l i >
< li > { t ( 'slogan3' ) } < / l i >
< li > { t ( 'slogan4' ) } < / l i >
< / u l >
< / d i v >
< Icons app = { app } active = '/'
ulClasses = "flex flex-row flex-wrap mt-8 justify-around w-full max-w-6xl"
2022-05-14 19:48:04 +02:00
liClasses = "text-neutral-content w-1/2 my-4 lg:mx-2 lg:w-24"
2022-05-13 21:11:39 +02:00
linkClasses = { `
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 ` }
/ >
< 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 >
< / d i v >
< / s e c t i o n >
< 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 < / h 2 >
< p className = "text-neutral-content p-4 font-bold max-w-md text-lg" >
FreeSewing is fuelled by a voluntary subscription model
< / p >
< 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 >
< / d i v >
< / d i v >
< 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 = { `
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 ` }
/ >
< / d i v >
< / d i v >
< / d i v >
< / P a g e >
)
}
export default HomePage
2022-02-06 19:16:49 +01:00
export async function getStaticProps ( { locale } ) {
return {
props : {
... ( await serverSideTranslations ( locale ) ) ,
}
}
}
2022-05-13 21:11:39 +02:00
