Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-09-11 18:37:33 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat: add Footer component

Browse Source
This commit is contained in:
gitlimes
2023-08-30 11:46:49 +02:00
parent 2daf57690a
commit 7c1c2df468
3 changed files with 273 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.js
View File

@@ -1,4 +1,5 @@
import '../styles/globals.css';
import Footer from '@/components/Footer/Footer';
import { Poppins } from 'next/font/google';
const poppins = Poppins({
@@ -13,6 +14,7 @@ export default function RootLayout({ children }) {
<html className={`${poppins.variable}`}>
<body>
{children}
<Footer />
</body>
</html>
);

134
src/components/Footer/Footer.js Normal file
View File

@@ -0,0 +1,134 @@
import Logo from '@/components/Logo/Logo';
import Section from '@/components/Section/Section';
import Title from '@/components/Title/Title';
import { ArrowRight } from 'phosphor-react-sc';
import { getLocale } from '@/utils/locale';
import Link from 'next/link';
import styles from './Footer.module.css';
export default function Footer(ctx) {
const { locale } = getLocale('todo');
const year = new Date().getFullYear(); /* Can't have an outdated year this way :3 */
return (
<footer id="footer">
<Section compact className={styles.footerWrapper} contentClassName={styles.footer}>
<div>
<Logo text size={96} className={styles.logo} />
<div>
<p>
Copyright ©{' '}
<Link href={`https://wikipedia.org/wiki/${year}`} className={styles.link}>
{year}
</Link>
</p>
<p>
Site by{' '}
<Link href="https://limes.pink" target="_blank" className={styles.link}>
pinklimes
</Link>
,{' '}
<Link href="https://mrjvs.com/" target="_blank" className={styles.link}>
mrjvs
</Link>{' '}
&{' '}
<Link href="https://jipfr.nl/" target="_blank" className={styles.link}>
jipfr
</Link>
</p>
<p>
<Link
href="https://github.com/PretendoNetwork/website/"
target="_blank"
className={styles.link}
>
Source code
</Link>
</p>
</div>
</div>
<div>
<Title element="h3">{locale.footer.socials}</Title>
<div>
<p>
<Link
href="https://mastodon.pretendo.network/@pretendo"
target="_blank"
className={styles.link}
>
Mastodon
</Link>
</p>
<p>
<Link href="https://twitter.com/@PretendoNetwork" target="_blank" className={styles.link}>
Twitter
</Link>
</p>
<p>
<Link href="https://discord.gg/pretendo" target="_blank" className={styles.link}>
Discord
</Link>
</p>
<p>
<Link href="https://github.com/PretendoNetwork" target="_blank" className={styles.link}>
GitHub
</Link>
</p>
<p>
<Link href="/blog" className={styles.link}>
Blog
</Link>
</p>
</div>
</div>
<div>
<Title element="h3">{locale.footer.usefulLinks}</Title>
<div>
<p>
<Link href="/docs" className={styles.link}>
{locale.nav.docs}
</Link>
</p>
<p>
<Link href="/#faq" className={styles.link}>
{locale.nav.faq}
</Link>
</p>
<p>
<Link href="/progress" className={styles.link}>
{locale.nav.progress}
</Link>
</p>
<p>
<Link href="/account" className={styles.link}>
{locale.nav.account}
</Link>
</p>
<p>
<Link href="/account/upgrade" className={styles.link}>
{locale.nav.donate}
</Link>
</p>
</div>
</div>
<div className={styles.discordWidgetWrapper}>
<div className={styles.discordWidget}>
<Title element="h3">{locale.footer.widget.captions[0]}</Title>
<Title element="h3" className={styles.sub}>
{locale.footer.widget.captions[1]}
</Title>
<Link href="https://discord.gg/pretendo" target="_blank" className={styles.link}>
<ArrowRight size={24} className={styles.arrow} />
{locale.footer.widget.button}
</Link>
</div>
</div>
</Section>
</footer>
);
}

137
src/components/Footer/Footer.module.css Normal file
View File

@@ -0,0 +1,137 @@
.footerWrapper {
background: var(--bg-shade-0);
}
.footer {
display: flex;
flex-flow: row wrap;
row-gap: 4rem;
}
.footer > div {
min-width: max-content;
width: auto;
flex-grow: 1;
}
.footer > div:not(:last-child) {
display: flex;
flex-flow: column;
justify-content: space-between;
margin-right: 6rem;
}
.footer .logo {
position: relative;
left: -19px;
top: -28px;
margin-bottom: 1rem;
}
.footer h3 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
width: fit-content;
}
.footer p {
margin: 0.75rem 0;
width: fit-content;
}
.footer .link {
color: unset;
font-weight: unset;
}
.footer .link:hover {
color: var(--text-shade-3);
font-weight: unset;
text-decoration: underline;
}
.footer .discordWidget {
background: var(--bg-shade-2);
padding: 2rem;
padding-right: 4rem;
border-radius: 1rem;
}
.footer .discordWidget h3 {
margin-bottom: 0.5rem;
}
.footer .discordWidget .sub {
font-size: 1.3rem;
margin-bottom: 1.2rem;
}
.footer .discordWidget .link {
color: var(--accent-shade-3);
font-size: 1.25rem;
}
.footer .discordWidget .link .arrow {
position: relative;
top: 0.25rem;
margin-right: 0.5ch;
}
@media screen and (max-width: 1080px) {
.footer {
flex-flow: column;
gap: 2.5rem;
}
.footer > div:not(:last-child) {
margin: 0;
}
.footer .logo {
left: -19px;
top: 0;
margin-bottom: 2rem;
}
.footer h3 {
margin-bottom: 0.75rem;
}
.footer p {
margin-top: 0;
margin-bottom: 0.25rem;
}
.footer .discordWidgetWrapper {
margin-top: 1rem;
}
}
@media screen and (max-width: 420px) {
.footerWrapper {
padding: 3rem 0 !important;
}
.footer {
gap: 1rem;
}
.footer > div {
min-width: 0;
max-width: 100%;
}
.footer .logo {
transform-origin: 24px center;
transform: scale(0.8);
}
.footer h3 {
font-size: 1.25rem;
}
.footer .discordWidget .sub,
.footer .discordWidget .link {
font-size: 1.1rem;
}
}