freesewing/sites/org/pages/index.mjs

// Dependencies
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
import { nsMerge } from 'shared/utils.mjs'
// Hooks
import { useTranslation } from 'next-i18next'
import { useAccount } from 'shared/hooks/use-account.mjs'
import { useEffect, useState } from 'react'
// Components
import Head from 'next/head'
import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'
import { BareLayout } from 'site/components/layouts/bare.mjs'
import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'
import {
  OkIcon,
  NoIcon,
  DesignIcon,
  ShowcaseIcon,
  DocsIcon,
  HelpIcon,
  ChatIcon,
} from 'shared/components/icons.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'
import Link from 'next/link'

const ns = nsMerge(pageNs, subNs, susiNs, 'homepage')

const Card = ({ bg = 'bg-base-200', textColor = 'text-base-content', title, children, icon }) => (
  <div className={`px-8 ${bg} py-10 rounded-lg block ${textColor} shadow-lg grow`}>
    <h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium">
      {title}
      {icon}
    </h2>
    {children}
  </div>
)

const CardLink = ({
  bg = 'bg-base-200',
  textColor = 'text-base-content',
  href,
  title,
  text,
  icon,
}) => (
  <Link
    href={href}
    className={`px-8 ${bg} py-10 rounded-lg block ${textColor}
    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">
      {title}
      {icon}
    </h2>
    <p className="font-medium text-inherit italic text-lg">{text}</p>
  </Link>
)

/*
 * 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.
 */
const HomePage = ({ page }) => {
  const { t } = useTranslation(ns)
  const { account } = useAccount()
  const [user, setUser] = useState(false)

  useEffect(() => {
    // Do this here to avoid hydration issues
    if (account.username) setUser(account.username)
  }, [account.username])

  return (
    <PageWrapper {...page} layout={BareLayout}>
      <ForceAccountCheck />
      <Head>
        <title>FreeSewing.org</title>
      </Head>

      <div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">
        <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">
          <Card
            title={t('whatIsFreeSewing')}
            icon={<OkIcon className="w-12 h-12 text-success" stroke={4} />}
          >
            <p className="font-medium text-lg">{t('homepage:what1')}</p>
            <p className="font-medium text-lg">{t('homepage:what3')}</p>
          </Card>
          <Card
            title={t('whatIsFreeSewingNot')}
            icon={<NoIcon className="w-12 h-12 text-error" stroke={3} />}
          >
            <p className="font-medium text-lg">{t('homepage:whatNot1')}</p>
            <p className="font-medium text-lg">{t('homepage:whatNot2')}</p>
          </Card>
        </div>

        <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="flex flex-col md:grid md:grid-cols-2 gap-4 max-w-7xl m-auto mb-24 px-4">
        <CardLink
          href="/designs"
          title="Designs"
          icon={<DesignIcon className="w-10 h-10 shrink-0" />}
          text="Browse our collection of designs, and turn them into sewing patterns that are made-to-measure just for you."
        />
        <CardLink
          href="/showcase"
          title="Showcase"
          icon={<ShowcaseIcon className="w-10 h-10 shrink-0" />}
          text="Get inspiration from the FreeSewing community, and see how others have applied their creativity to our designs."
        />
        <CardLink
          href="/docs/guide"
          title="Getting Started"
          icon={<DocsIcon className="w-10 h-10 shrink-0" />}
          text="FreeSewing.org is unlike any sewing pattern website you know. Read this short guide to get the most our of our platform."
        />
        <CardLink
          href="/docs/faq"
          title="Frequently Asked Questions"
          icon={<HelpIcon className="w-10 h-10 shrink-0" />}
          text="Some of the questions that come up often when people discover our platform are answered here."
        />
      </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
            href="/support"
            title="Need Help?"
            icon={<ChatIcon className="w-10 h-10 shrink-0" />}
            text="While we are all volunteers, we have a good track record of helping people. So don't be shy to reach out."
          />
        </div>
      </div>
    </PageWrapper>
  )
}

export default HomePage

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ns)),
      page: {
        locale,
        path: [],
      },
    },
  }
}
feat(org): Ported components to mjs and named exports 2023-01-29 16:44:02 +01:00			`// Dependencies`
wip(org): Work on new site 2022-05-25 18:35:20 +02:00			`import { serverSideTranslations } from 'next-i18next/serverSideTranslations'`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00			`import { nsMerge } from 'shared/utils.mjs'`
			`// Hooks`
			`import { useTranslation } from 'next-i18next'`
feat: Work on homepage 2023-07-28 20:28:27 +02:00			`import { useAccount } from 'shared/hooks/use-account.mjs'`
feat(shared): Added patron subscriptions 2023-08-01 13:02:14 +02:00			`import { useEffect, useState } from 'react'`
feat(org): Ported components to mjs and named exports 2023-01-29 16:44:02 +01:00			`// Components`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00			`import Head from 'next/head'`
			`import { PageWrapper, ns as pageNs } from 'shared/components/wrappers/page.mjs'`
wip(shared): Switched to webpack loader for MDX 2023-05-15 15:57:46 +02:00			`import { BareLayout } from 'site/components/layouts/bare.mjs'`
feat(shared): Component to reload the account 2023-07-25 19:38:22 +02:00			`import { ForceAccountCheck } from 'shared/components/account/force-account-check.mjs'`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`import {`
			`OkIcon,`
chore(org): Reduce colors on the homepage 2023-08-25 11:25:33 +02:00			`NoIcon,`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`DesignIcon,`
			`ShowcaseIcon,`
			`DocsIcon,`
			`HelpIcon,`
			`ChatIcon,`
			`} from 'shared/components/icons.mjs'`
feat: Work on homepage 2023-07-28 20:28:27 +02:00			`import { HowDoesItWorkAnimation } from 'shared/components/animations/how-does-it-work.mjs'`
fix(org): Homepage tweaks on mobile 2023-08-28 14:28:07 +02:00			`import { SignUp, ns as susiNs } from 'shared/components/susi/sign-up.mjs'`
			`import { PleaseSubscribe, ns as subNs } from 'shared/components/patrons/please-subscribe.mjs'`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`import Link from 'next/link'`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00
fix(org): Homepage tweaks on mobile 2023-08-28 14:28:07 +02:00			`const ns = nsMerge(pageNs, subNs, susiNs, 'homepage')`
feat(fs.org): Initial import of freesewing.dev code 2022-01-02 17:16:15 +01:00
chore(org): Reduce colors on the homepage 2023-08-25 11:25:33 +02:00			`const Card = ({ bg = 'bg-base-200', textColor = 'text-base-content', title, children, icon }) => (`
			<div className={`px-8 ${bg} py-10 rounded-lg block ${textColor} shadow-lg grow`}>
			`<h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium">`
			`{title}`
			`{icon}`
			`</h2>`
			`{children}`
			`</div>`
			`)`

			`const CardLink = ({`
			`bg = 'bg-base-200',`
			`textColor = 'text-base-content',`
			`href,`
			`title,`
			`text,`
			`icon,`
			`}) => (`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`<Link`
			`href={href}`
fix(org): Tweaks to home page card colors 2023-08-01 18:12:35 +02:00			className={`px-8 ${bg} py-10 rounded-lg block ${textColor}
chore(org): Homepage and susi tweaks 2023-08-29 12:19:47 +02:00			`hover:bg-secondary hover:bg-opacity-10 shadow-lg`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			transition-color duration-300 grow`}
			`>`
chore(org): Reduce colors on the homepage 2023-08-25 11:25:33 +02:00			`<h2 className="mb-4 text-inherit flex flex-row gap-4 justify-between items-center font-medium">`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`{title}`
chore(org): Reduce colors on the homepage 2023-08-25 11:25:33 +02:00			`{icon}`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`</h2>`
chore(org): Reduce colors on the homepage 2023-08-25 11:25:33 +02:00			`<p className="font-medium text-inherit italic text-lg">{text}</p>`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`</Link>`
			`)`

wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites. 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.`
			`*/`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00			`const HomePage = ({ page }) => {`
			`const { t } = useTranslation(ns)`
feat: Work on homepage 2023-07-28 20:28:27 +02:00			`const { account } = useAccount()`
feat(shared): Added patron subscriptions 2023-08-01 13:02:14 +02:00			`const [user, setUser] = useState(false)`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00
feat(shared): Added patron subscriptions 2023-08-01 13:02:14 +02:00			`useEffect(() => {`
			`// Do this here to avoid hydration issues`
			`if (account.username) setUser(account.username)`
			`}, [account.username])`

wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00			`return (`
			`<PageWrapper {...page} layout={BareLayout}>`
			`<ForceAccountCheck />`
			`<Head>`
feat: Work on homepage 2023-07-28 20:28:27 +02:00			`<title>FreeSewing.org</title>`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00			`</Head>`

fix(org): Mobile tweaks for homepage 2023-07-29 21:06:08 +02:00			`<div className="max-w-7xl m-auto px-0 -mt-12 mb-24 md:my-24">`
chore(org): Homepage and susi tweaks 2023-08-29 12:19:47 +02:00			`<div className="text-center mt-20 md:mt-20">`
			`<HowDoesItWorkAnimation t={t} />`
wip(org): Work on the homepage 2023-07-29 21:01:26 +02:00			`</div>`

chore(org): Padding tweaks on homepage 2023-07-30 15:55:11 +02:00			`<div className="flex flex-col gap-8 md:grid md:grid-cols-2 md:gap-4 mt-12 md:mt-20 md:px-4">`
chore(org): Reduce colors on the homepage 2023-08-25 11:25:33 +02:00			`<Card`
			`title={t('whatIsFreeSewing')}`
			`icon={<OkIcon className="w-12 h-12 text-success" stroke={4} />}`
			`>`
			`<p className="font-medium text-lg">{t('homepage:what1')}</p>`
			`<p className="font-medium text-lg">{t('homepage:what3')}</p>`
			`</Card>`
			`<Card`
			`title={t('whatIsFreeSewingNot')}`
			`icon={<NoIcon className="w-12 h-12 text-error" stroke={3} />}`
			`>`
			`<p className="font-medium text-lg">{t('homepage:whatNot1')}</p>`
			`<p className="font-medium text-lg">{t('homepage:whatNot2')}</p>`
			`</Card>`
feat: Work on homepage 2023-07-28 20:28:27 +02:00			`</div>`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00
chore(org): Homepage and susi tweaks 2023-08-29 12:19:47 +02:00			`<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>`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00			`</div>`
			`</div>`
wip(shared): Added subscription mockup 2023-07-30 14:21:39 +02:00
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`<div className="flex flex-col md:grid md:grid-cols-2 gap-4 max-w-7xl m-auto mb-24 px-4">`
			`<CardLink`
fix(org): Homepage links 2023-08-01 16:17:08 +02:00			`href="/designs"`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`title="Designs"`
fix(org): Prevent card icons from shrinking 2023-08-01 18:16:47 +02:00			`icon={<DesignIcon className="w-10 h-10 shrink-0" />}`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`text="Browse our collection of designs, and turn them into sewing patterns that are made-to-measure just for you."`
			`/>`
			`<CardLink`
fix(org): Homepage links 2023-08-01 16:17:08 +02:00			`href="/showcase"`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`title="Showcase"`
fix(org): Prevent card icons from shrinking 2023-08-01 18:16:47 +02:00			`icon={<ShowcaseIcon className="w-10 h-10 shrink-0" />}`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`text="Get inspiration from the FreeSewing community, and see how others have applied their creativity to our designs."`
			`/>`
			`<CardLink`
fix(org): Homepage links 2023-08-01 16:17:08 +02:00			`href="/docs/guide"`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`title="Getting Started"`
fix(org): Prevent card icons from shrinking 2023-08-01 18:16:47 +02:00			`icon={<DocsIcon className="w-10 h-10 shrink-0" />}`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`text="FreeSewing.org is unlike any sewing pattern website you know. Read this short guide to get the most our of our platform."`
			`/>`
			`<CardLink`
fix(org): Homepage links 2023-08-01 16:17:08 +02:00			`href="/docs/faq"`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`title="Frequently Asked Questions"`
fix(org): Prevent card icons from shrinking 2023-08-01 18:16:47 +02:00			`icon={<HelpIcon className="w-10 h-10 shrink-0" />}`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`text="Some of the questions that come up often when people discover our platform are answered here."`
			`/>`
			`</div>`

chore(org): Homepage and susi tweaks 2023-08-29 12:19:47 +02:00			`<div className="lg:px-4 max-w-7xl mx-auto">`
			`<PleaseSubscribe />`
			`</div>`

feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`<div className="max-w-7xl m-auto mb-24 px-4">`
			`<div className="w-full lg:w-1/2 m-auto">`
			`<CardLink`
fix(org): Homepage links 2023-08-01 16:17:08 +02:00			`href="/support"`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`title="Need Help?"`
fix(org): Prevent card icons from shrinking 2023-08-01 18:16:47 +02:00			`icon={<ChatIcon className="w-10 h-10 shrink-0" />}`
feat(org): more work on homepage 2023-08-01 16:15:11 +02:00			`text="While we are all volunteers, we have a good track record of helping people. So don't be shy to reach out."`
			`/>`
			`</div>`
			`</div>`
wip(org): Started reworking the home page 2023-07-27 21:03:49 +02:00			`</PageWrapper>`
			`)`
			`}`
feat(fs.org): Initial import of freesewing.dev code 2022-01-02 17:16:15 +01:00
			`export default HomePage`
wip(org): Work on new site 2022-05-25 18:35:20 +02:00
			`export async function getStaticProps({ locale }) {`
			`return {`
			`props: {`
feat: Work on homepage 2023-07-28 20:28:27 +02:00			`...(await serverSideTranslations(locale, ns)),`
chore(org): Work on navigation 2023-03-26 16:50:46 +02:00			`page: {`
wip(shared): Removed useApp hook in favor of contexts This removes the useApp hook from all org pages in favor of various context. This means there is no longer global state that gets passed around, instead each component that requires access to something shared (like account, or navigation) can just use the context instead. This is a first step, as a lot of shared components stil rely on app not to mention the dev and lab sites. 2023-04-28 21:23:06 +02:00			`locale,`
chore(org): Work on navigation 2023-03-26 16:50:46 +02:00			`path: [],`
			`},`
everything passes lint 2022-12-03 11:25:02 -06:00			`},`
wip(org): Work on new site 2022-05-25 18:35:20 +02:00			`}`
			`}`