diff --git a/src/app/layout.js b/src/app/layout.js
index 88c5acb..a241792 100644
--- a/src/app/layout.js
+++ b/src/app/layout.js
@@ -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 }) {
{children}
+
);
diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js
new file mode 100644
index 0000000..69df453
--- /dev/null
+++ b/src/components/Footer/Footer.js
@@ -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 (
+
+ );
+}
diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css
new file mode 100644
index 0000000..40db10e
--- /dev/null
+++ b/src/components/Footer/Footer.module.css
@@ -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;
+ }
+}