chore(org): Homepage and susi tweaks
This commit is contained in:
Joost De Cock
parent
c37469dbf7
commit
00695fffe1
4 changed files with 92 additions and 83 deletions
|
|
@ -19,7 +19,6 @@ import {
|
|||
HelpIcon,
|
||||
ChatIcon,
|
||||
} from 'shared/components/icons.mjs'
|
||||
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
|
||||
import { HowDoesItWorkAnimation } from 'shared/components/animations/how-does-it-work.mjs'
|
||||
import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'
|
||||
import { PleaseSubscribe, ns as subNs } from 'shared/components/patrons/please-subscribe.mjs'
|
||||
|
|
@ -49,7 +48,7 @@ const CardLink = ({
|
|||
<Link
|
||||
href={href}
|
||||
className={`px-8 ${bg} py-10 rounded-lg block ${textColor}
|
||||
hover:bg-secondary hover:text-secondary-content shadow-lg
|
||||
hover:bg-secondary hover:bg-opacity-10 shadow-lg
|
||||
transition-color duration-300 grow`}
|
||||
>
|
||||
<h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium">
|
||||
|
|
@ -71,9 +70,6 @@ const HomePage = ({ page }) => {
|
|||
const { account } = useAccount()
|
||||
const [user, setUser] = useState(false)
|
||||
|
||||
// Duration of the FreeSewing animation
|
||||
const duration = 6.66
|
||||
|
||||
useEffect(() => {
|
||||
// Do this here to avoid hydration issues
|
||||
if (account.username) setUser(account.username)
|
||||
|
|
@ -85,31 +81,10 @@ const HomePage = ({ page }) => {
|
|||
<Head>
|
||||
<title>FreeSewing.org</title>
|
||||
</Head>
|
||||
<div className={`m-0 p-0 w-64 m-auto mt-8 mb-20 md:mt-20 ${user ? 'hidden' : ''}`}>
|
||||
<FreeSewingAnimation duration={duration} />
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">
|
||||
<div className="p-1 bg-primary bg-opacity-10 mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow-lg md:mx-4 p-8 lg:px-12 md:py-0">
|
||||
<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">
|
||||
<SignUp />
|
||||
</div>
|
||||
<div className="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">{t('homepage:whyBother')}</h2>
|
||||
<ul>
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<li className="flex flex-row gap-2 my-2" key={i}>
|
||||
<OkIcon stroke={4} /> {t(`homepage:why${i}`)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Popout warning>
|
||||
<h5 className="text-inherit mb-4 hidden md:block">{t('homepage:alphaTitle')}</h5>
|
||||
<p className="text-inherit mb-4 hidden md:block">{t('homepage:alphaWarning')}</p>
|
||||
</Popout>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center mt-20 md:mt-20">
|
||||
<HowDoesItWorkAnimation t={t} />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:mt-20 md:px-4">
|
||||
|
|
@ -129,16 +104,25 @@ const HomePage = ({ page }) => {
|
|||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="text-center mt-20 md:mt-20">
|
||||
<h2 className="text-5xl">{t('howDoesItWork')}</h2>
|
||||
<HowDoesItWorkAnimation t={t} />
|
||||
<div className="p-1 bg-primary bg-opacity-10 mt-12 rounded-none md:rounded-lg lg:rounded-xl md:shadow-lg md:mx-4 p-8 lg:px-12 md:py-0">
|
||||
<div className="flex flex-col md:gap-8 lg:gap-12 md:flex md:flex-row m-auto">
|
||||
<div className="-mx-4 md:mx-0 md:pt-8 pb-8 lg:py-12 grow m-auto max-w-prose">
|
||||
<SignUp />
|
||||
</div>
|
||||
<div className="-mx-4 md:mx-0 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">{t('homepage:whyBother')}</h2>
|
||||
<ul>
|
||||
{[1, 2, 3, 4].map((i) => (
|
||||
<li className="flex flex-row gap-2 my-2" key={i}>
|
||||
<OkIcon stroke={4} /> {t(`homepage:why${i}`)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="lg:px-4 max-w-7xl mx-auto">
|
||||
<PleaseSubscribe />
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:grid md:grid-cols-2 gap-4 max-w-7xl m-auto mb-24 px-4">
|
||||
<CardLink
|
||||
href="/designs"
|
||||
|
|
@ -166,6 +150,10 @@ const HomePage = ({ page }) => {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<div className="lg:px-4 max-w-7xl mx-auto">
|
||||
<PleaseSubscribe />
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl m-auto mb-24 px-4">
|
||||
<div className="w-full lg:w-1/2 m-auto">
|
||||
<CardLink
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { nsMerge } from 'shared/utils.mjs'
|
|||
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
||||
import { BareLayout } from 'site/components/layouts/bare.mjs'
|
||||
import { SignIn, ns as susiNs } from 'shared/components/susi/sign-in.mjs'
|
||||
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
|
||||
|
||||
const ns = nsMerge(susiNs, pageNs)
|
||||
|
||||
|
|
@ -22,7 +21,6 @@ const SignInPage = ({ page }) => {
|
|||
<div className="max-w-lg w-full">
|
||||
<SignIn />
|
||||
</div>
|
||||
<FreeSewingAnimation className="w-64 mt-8" />
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -5,7 +5,6 @@ import { nsMerge } from 'shared/utils.mjs'
|
|||
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
|
||||
import { BareLayout } from 'site/components/layouts/bare.mjs'
|
||||
import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'
|
||||
import { FreeSewingAnimation } from 'shared/components/animations/freesewing.mjs'
|
||||
|
||||
// Translation namespaces used on this page
|
||||
const ns = nsMerge(susiNs, pageNs)
|
||||
|
|
@ -17,7 +16,6 @@ const SignUpPage = ({ page }) => {
|
|||
<div className="max-w-2xl">
|
||||
<SignUp />
|
||||
</div>
|
||||
<FreeSewingAnimation className="w-64 mt-8" />
|
||||
</div>
|
||||
</PageWrapper>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
import { useState, useContext } from 'react'
|
||||
import { useBackend } from 'shared/hooks/use-backend.mjs'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import { useLoadingStatus } from 'shared/hooks/use-loading-status.mjs'
|
||||
// Context
|
||||
import { ModalContext } from 'shared/context/modal-context.mjs'
|
||||
// Dependencies
|
||||
|
|
@ -17,6 +18,7 @@ import {
|
|||
KeyIcon,
|
||||
SettingsIcon,
|
||||
EmailIcon,
|
||||
DownIcon,
|
||||
} from 'shared/components/icons.mjs'
|
||||
import { ModalWrapper } from 'shared/components/wrappers/modal.mjs'
|
||||
import { EmailInput } from 'shared/components/inputs.mjs'
|
||||
|
|
@ -30,11 +32,12 @@ export const SignUp = () => {
|
|||
|
||||
const backend = useBackend()
|
||||
const { t, i18n } = useTranslation(ns)
|
||||
const { setLoadingStatus, LoadingStatus } = useLoadingStatus()
|
||||
|
||||
const [email, setEmail] = useState('')
|
||||
const [emailValid, setEmailValid] = useState(false)
|
||||
const [result, setResult] = useState(false)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [showAll, setShowAll] = useState(false)
|
||||
|
||||
const updateEmail = (value) => {
|
||||
setEmail(value)
|
||||
|
|
@ -44,8 +47,10 @@ export const SignUp = () => {
|
|||
|
||||
const signupHandler = async (evt) => {
|
||||
evt.preventDefault()
|
||||
setLoading(true)
|
||||
if (!emailValid) return
|
||||
if (!emailValid) {
|
||||
setLoadingStatus([true, t('susi:pleaseProvideValidEmail'), true, false])
|
||||
return
|
||||
}
|
||||
let res
|
||||
try {
|
||||
res = await backend.signUp({
|
||||
|
|
@ -80,14 +85,12 @@ export const SignUp = () => {
|
|||
</ModalWrapper>
|
||||
)
|
||||
}
|
||||
setLoading(false)
|
||||
}
|
||||
|
||||
const loadingClasses = loading ? 'opacity-50' : ''
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h2 className={`text-inherit ${loadingClasses}`}>
|
||||
<LoadingStatus />
|
||||
<h2 className="text-inherit">
|
||||
{result ? (
|
||||
result === 'success' ? (
|
||||
<span>{t('susi:emailSent')}!</span>
|
||||
|
|
@ -132,58 +135,80 @@ export const SignUp = () => {
|
|||
)
|
||||
) : (
|
||||
<>
|
||||
<p className={`text-inherit ${loadingClasses}`}>{t('toReceiveSignupLink')}:</p>
|
||||
<p className="text-inherit">{t('toReceiveSignupLink')}:</p>
|
||||
<form onSubmit={signupHandler}>
|
||||
<EmailInput
|
||||
id="signup-email"
|
||||
label={t('susi:emailAddress')}
|
||||
current={email}
|
||||
original={''}
|
||||
valid={(val) => emailValid}
|
||||
placeholder={t('susi:emailAddress')}
|
||||
update={updateEmail}
|
||||
/>
|
||||
<button
|
||||
className={`btn btn-primary btn-lg mt-2 w-full ${horFlexClasses} disabled:bg-neutral disabled:text-neutral-content disabled:opacity-50`}
|
||||
type="submit"
|
||||
disabled={!emailValid}
|
||||
>
|
||||
<span className="hidden md:block">
|
||||
<EmailIcon />
|
||||
</span>
|
||||
{emailValid ? t('susi:emailSignupLink') : t('susi:pleaseProvideValidEmail')}
|
||||
<span className="hidden md:block">
|
||||
<EmailIcon />
|
||||
</span>
|
||||
<EmailIcon />
|
||||
{t('susi:emailSignupLink')}
|
||||
</button>
|
||||
</form>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-4">
|
||||
{['Google', 'Github'].map((provider) => (
|
||||
<button
|
||||
key={provider}
|
||||
id={provider}
|
||||
className={`${horFlexClasses} btn btn-secondary`}
|
||||
{showAll ? (
|
||||
<>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 items-center mt-4">
|
||||
{['Google', 'Github'].map((provider) => (
|
||||
<button
|
||||
key={provider}
|
||||
id={provider}
|
||||
className={`${horFlexClasses} btn btn-secondary`}
|
||||
>
|
||||
{provider === 'Google' ? <GoogleIcon stroke={0} /> : <GitHubIcon />}
|
||||
<span>{t('susi:signUpWithProvider', { provider })}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Link
|
||||
className={`${horFlexClassesNoSm} w-full btn btn-lg btn-neutral mt-2`}
|
||||
href="/signup"
|
||||
>
|
||||
{provider === 'Google' ? <GoogleIcon stroke={0} /> : <GitHubIcon />}
|
||||
<span>{t('susi:signUpWithProvider', { provider })}</span>
|
||||
<span className="hidden md:block">
|
||||
<KeyIcon className="h-10 w-10" />
|
||||
</span>
|
||||
{t('susi:signInHere')}
|
||||
</Link>
|
||||
<Link
|
||||
className={`${horFlexClassesNoSm} w-full btn btn-neutral btn-outline mt-2`}
|
||||
href="/migrate"
|
||||
>
|
||||
<span className="hidden md:block">
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
{t('susi:migrateV2Account')}
|
||||
</Link>
|
||||
<div className="flex flex-row justify-center mt-2">
|
||||
<button
|
||||
onClick={() => setShowAll(false)}
|
||||
className={`btn btn-ghost ${horFlexClasses}`}
|
||||
>
|
||||
<DownIcon className="w-6 h-6 rotate-180" />
|
||||
{t('susi:fewerOptions')}
|
||||
<DownIcon className="w-6 h-6 rotate-180" />
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-row justify-center mt-2">
|
||||
<button
|
||||
onClick={() => setShowAll(true)}
|
||||
className={`btn btn-ghost ${horFlexClasses}`}
|
||||
>
|
||||
<DownIcon />
|
||||
{t('susi:moreOptions')}
|
||||
<DownIcon />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<Link
|
||||
className={`${horFlexClassesNoSm} w-full btn btn-lg btn-neutral mt-2`}
|
||||
href="/signup"
|
||||
>
|
||||
<span className="hidden md:block">
|
||||
<KeyIcon className="h-10 w-10" />
|
||||
</span>
|
||||
{t('susi:signInHere')}
|
||||
</Link>
|
||||
<Link
|
||||
className={`${horFlexClassesNoSm} w-full btn btn-neutral btn-outline mt-2`}
|
||||
href="/migrate"
|
||||
>
|
||||
<span className="hidden md:block">
|
||||
<SettingsIcon />
|
||||
</span>
|
||||
{t('susi:migrateV2Account')}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue