freesewing/sites/shared/components/footer/index.mjs

import { useTranslation } from 'next-i18next'
import { Ribbon } from 'shared/components/ribbon.mjs'
import { WordMark, colors } from 'shared/components/wordmark.mjs'
import { SocialIcons } from 'shared/components/social/icons.mjs'
import { Sponsors, ns as sponsorsNs } from 'shared/components/sponsors/index.mjs'
import { FreeSewingIcon } from 'shared/components/icons.mjs'
export const ns = ['footer', ...sponsorsNs]

export const Footer = ({ app }) => {
  const { t } = useTranslation(ns)

  return (
    <footer className="bg-neutral">
      <Ribbon loading={app.loading} theme={app.theme} />

      <div className="w-full sm:w-auto flex flex-col gap-2 items-center justify-center pt-12">
        <FreeSewingIcon className="w-24 lg:w-40 m-auto m-auto text-neutral-content" />
        <div className="mt-4">
          <WordMark />
        </div>
        <p className="text-neutral-content text-normal leading-5 text-center -mt-2 opacity-70">
          Come for the sewing patterns
          <br />
          Stay for the community
        </p>
      </div>

      <div className="w-full sm:w-auto flex flex-row flex-wrap gap-6 lg:gap-8 items-center justify-center px-8 py-14">
        <SocialIcons />
      </div>

      <div className="mt-8 py-8 px-8 flex flex-row gap-8 flex-wrap 2xl:flex-nowrap justify-around text-neutral-content py-10 border border-solid border-l-0 border-r-0 border-b-0 border-base-300">
        <Sponsors />
      </div>
    </footer>
  )
}