wip(org): Changes to footer and icons
This commit is contained in:
Joost De Cock
parent
c6eb841528
commit
6e8e4da0db
13 changed files with 106 additions and 185 deletions
|
|
@ -7,6 +7,14 @@ import PageLink from 'shared/components/page-link'
|
|||
import DocsLink from 'shared/components/docs-link'
|
||||
import PinkedRibbon from 'shared/components/pinked-ribbon.js'
|
||||
import Worm from 'shared/components/worm.js'
|
||||
import Link from 'next/link'
|
||||
|
||||
import DiscordIcon from 'shared/components/icons/discord.js'
|
||||
import FacebookIcon from 'shared/components/icons/facebook.js'
|
||||
import GithubIcon from 'shared/components/icons/github.js'
|
||||
import InstagramIcon from 'shared/components/icons/instagram.js'
|
||||
import RedditIcon from 'shared/components/icons/reddit.js'
|
||||
import TwitterIcon from 'shared/components/icons/twitter.js'
|
||||
|
||||
// Classes
|
||||
const link = "text-secondary font-bold hover:pointer hover:underline px-1"
|
||||
|
|
@ -121,123 +129,98 @@ const translations = {
|
|||
},
|
||||
}
|
||||
|
||||
const icon = { className: "w-20 h-20" }
|
||||
const social = {
|
||||
Discord: 'https://discord.freesewing.org/',
|
||||
Instagram: 'https://instagram.com/freesewing_org',
|
||||
Facebook: 'https://www.facebook.com/groups/627769821272714/',
|
||||
Github: 'https://github.com/freesewing',
|
||||
Reddit: 'https://www.reddit.com/r/freesewing/',
|
||||
Twitter: 'https://twitter.com/freesewing_org',
|
||||
Discord: [ <DiscordIcon {...icon}/>, 'https://discord.freesewing.org/' ],
|
||||
Instagram: [ <InstagramIcon {...icon}/>, 'https://instagram.com/freesewing_org' ],
|
||||
Facebook: [ <FacebookIcon {...icon}/>, 'https://www.facebook.com/groups/627769821272714/' ],
|
||||
Github: [ <GithubIcon {...icon} />, 'https://github.com/freesewing' ],
|
||||
Reddit: [ <RedditIcon {...icon} />, 'https://www.reddit.com/r/freesewing/' ],
|
||||
Twitter: [ <TwitterIcon {...icon} />, 'https://twitter.com/freesewing_org' ],
|
||||
}
|
||||
|
||||
|
||||
const Footer = ({ app }) => {
|
||||
const Footer = ({ app, full=false }) => {
|
||||
const { t } = useTranslation(['common', 'patrons'])
|
||||
|
||||
return (
|
||||
<footer className="bg-neutral">
|
||||
<PinkedRibbon loading={app.loading} theme={app.theme} />
|
||||
<div className="p-4 py-16 flex flex-row bg-neutral -mt-1 z-0 gap-8 flex-wrap justify-around text-neutral-content">
|
||||
<div className="w-64 mt-2">
|
||||
<div className="px-4 mb-4"><CreativeCommonsLogo /></div>
|
||||
<div className="flex flex-row gap-2 justify-center items-center">
|
||||
<div className="basis-1/4">
|
||||
<CcByLogo />
|
||||
<div className="px-8 py-20 2xl:py-40 flex flex-row gap-8 flex-wrap 2xl:flex-nowrap justify-around text-neutral-content">
|
||||
|
||||
{/* First col - CC & MIT */}
|
||||
<div className="max-w-md mb-20 order-1 mt-20 2xl:mt-0">
|
||||
<div className="max-w-md m-auto">
|
||||
<div><CreativeCommonsLogo className="w-80 m-auto"/></div>
|
||||
<div className="flex flex-row gap-2 justify-center items-center mt-8">
|
||||
<CcByLogo className="w-16"/>
|
||||
<p className="text-neutral-content text-right basis-3/4">
|
||||
{translations.cc[app.locale]}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-content text-right basis-3/4">
|
||||
{translations.cc[app.locale]}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-row gap-2 justify-center items-center">
|
||||
<div className="basis-1/4">
|
||||
<OsiLogo />
|
||||
<div className="flex flex-row gap-2 justify-center items-center mt-4">
|
||||
<OsiLogo className="w-16"/>
|
||||
<p className="text-neutral-content text-right basis-3/4">
|
||||
{translations.mit[app.locale]}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-neutral-content text-right basis-3/4">
|
||||
{translations.mit[app.locale]}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:w-auto">
|
||||
<h5 className="text-neutral-content">FIXME</h5>
|
||||
<div className="theme-gradient h-1 mb-4"></div>
|
||||
<ul>
|
||||
<li>
|
||||
Footer content goes here
|
||||
</li>
|
||||
<li>
|
||||
<DocsLink slug="docs/guide/what" />
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:w-auto sm:max-w-xs">
|
||||
<h5 className="text-neutral-content">FIXME</h5>
|
||||
<div className="theme-gradient h-1 mb-2"></div>
|
||||
<ul>
|
||||
<li>
|
||||
Footer content goes here
|
||||
</li>
|
||||
<li>
|
||||
<DocsLink slug="docs/guide/what" />
|
||||
</li>
|
||||
</ul>
|
||||
<p className="text-sm text-neutral-content">
|
||||
<a className={link} href={social.discord}>Our Discord server</a> is
|
||||
the best place to ask questions and get help. It's where our community hangs out
|
||||
so you'll get the fastest response and might even make a few new friends along the way.
|
||||
</p>
|
||||
<p className="text-sm text-neutral-content">
|
||||
You can also <a href={social.twitter} className={link} >reach out on Twitter</a> or <a
|
||||
href="https://github.com/freesewing/freesewing/issues/new/choose"
|
||||
className={link}
|
||||
> create an issue on Github </a> if Discord is not your jam.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:w-auto">
|
||||
<h5 className="text-neutral-content">Social Media</h5>
|
||||
<div className="theme-gradient h-1 mb-4"></div>
|
||||
<ul>
|
||||
{Object.keys(social).map(item => <li key={item}><PageLink href={social[item]} txt={item}/></li>)}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Logo fill='currentColor' stroke='none' size={164} className="m-auto"/>
|
||||
<h5 className="text-neutral-content">FreeSewing</h5>
|
||||
<p className="bold text-neutral-content text-sm">
|
||||
{t('sloganCome')}
|
||||
{/* Second col - Social & Sponsors */}
|
||||
<div className="w-full 2xl:w-fit -order-2 2xl:order-2">
|
||||
{/* Social icons */}
|
||||
<div className="w-full sm:w-auto flex flex-row flex-wrap gap-8 items-center justify-center">
|
||||
{Object.keys(social).map(item => (
|
||||
<Link key={item} href={social[item][1]}>
|
||||
<a className="hover:text-secondary-focus hover:-mt-2 transition-all" title={item}>
|
||||
{social[item][0]}
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
{/* Sponsors */}
|
||||
<div className="border rounded-xl p-8 border-dashed border-base-100/25 mt-20">
|
||||
<p className="text-center text-neutral-content">
|
||||
{translations.sponsors[app.locale]}
|
||||
<br />
|
||||
{t('sloganStay')}
|
||||
</p>
|
||||
<div className="p-4 flex flex-row gap-4 xl:gap-8 flex-wrap justify-center items-center text-neutral-content shrink">
|
||||
<a title="Search powered by Algolia" href="https://www.algolia.com/">
|
||||
<img src="/brands/algolia.svg" className="w-64" alt="Search powered by Algolia"/>
|
||||
</a>
|
||||
<a title="Error handling by Bugsnag" href="https://www.bugsnag.com/">
|
||||
<img src="/brands/bugsnag.svg" className="h-32" alt="Error handling by bugsnag" />
|
||||
</a>
|
||||
<a title="Translation powered by Crowdin" href="https://www.crowdin.com/">
|
||||
<img src="/brands/crowdin.svg" className="w-64" alt="Translation powered by Crowdin" />
|
||||
</a>
|
||||
<a title="Builds & hosting by Vercel" href="https://www.vercel.com/?utm_source=freesewing&utm_campaign=oss">
|
||||
<img src="/brands/vercel.svg" className="w-64 shadow-lg shadow-white/20" alt="Builds & Hosting by Vercel" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-center text-neutral-content mt-4 border rounded-xl p-8 border-dashed border-base-100/25">
|
||||
{translations.msf[app.locale]}
|
||||
<br />
|
||||
[ <DocsLink slug="docs/various/pledge" /> ]
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-neutral-content text-sm px-2">
|
||||
{translations.sponsors[app.locale]}
|
||||
<br />
|
||||
</p>
|
||||
<div className="p-4 py-16 flex flex-row bg-neutral -mt-2 z-0 gap-8 flex-wrap justify-center items-center text-neutral-content">
|
||||
<a title="Search powered by Algolia" href="https://www.algolia.com/">
|
||||
<img src="/brands/algolia.svg" className="w-64 mx-12 sm:mx-4" alt="Search powered by Algolia"/>
|
||||
</a>
|
||||
<a title="Error handling by Bugsnag" href="https://www.bugsnag.com/">
|
||||
<img src="/brands/bugsnag.svg" className="h-32 mx-12 sm:mx-4" alt="Error handling by bugsnag" />
|
||||
</a>
|
||||
<a title="Translation powered by Crowdin" href="https://www.crowdin.com/">
|
||||
<img src="/brands/crowdin.svg" className="w-64 mx-12 sm:mx-4" alt="Translation powered by Crowdin" />
|
||||
</a>
|
||||
<a title="Builds & hosting by Vercel" href="https://www.vercel.com/?utm_source=freesewing&utm_campaign=oss">
|
||||
<img src="/brands/vercel.svg" className="w-64 mx-12 sm:mx-4" alt="Builds & Hosting by Vercel" />
|
||||
</a>
|
||||
</div>
|
||||
{/* Col 3 - Logo & Slogan */}
|
||||
<div className="w-full 4xl:w-auto xl:max-w-md mb-20 text-center order-3 mt-20 2xl:mt-0">
|
||||
<div className="max-w-md m-auto">
|
||||
<Logo stroke="none" size={164} className="w-40 lg:w-64 m-auto m-auto" />
|
||||
<h5 className="text-neutral-content lg:text-3xl mt-4">FreeSewing</h5>
|
||||
<p className="bold text-neutral-content text-normal lg:text-xl">
|
||||
{t('sloganCome')}
|
||||
<br />
|
||||
{t('sloganStay')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-center text-neutral-content text-sm px-2 my-20">
|
||||
{translations.msf[app.locale]}
|
||||
<br />
|
||||
[ <DocsLink slug="docs/various/pledge" /> ]
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue