feat(app): add footer (#375)

* feat(app): add footer

* fix(app): fix centering footer links on mobile devices

* feat(app): add container to footer

* refactor(app): change footer background color to primary

Author: xStrixU

apps/app/src/app/layout.tsx

@@ -1,4 +1,5 @@
 import { AnalyticsWrapper } from "../components/analytics";
+import { Footer } from "../components/Footer";
 import { Header } from "../components/Header";
 
 import "../styles/globals.css";
@@ -10,6 +11,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 				<Header />
 				{children}
 				<AnalyticsWrapper />
+				<Footer />
 			</body>
 		</html>
 	);

apps/app/src/components/Footer.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+import { Container } from "./Container";
+
+export const Footer = () => (
+	<footer className="bg-primary">
+		<Container className="flex h-14 items-center justify-center sm:justify-end">
+			<nav className="flex flex-wrap justify-center gap-x-7 text-sm text-white">
+				<Link href="/about">Jak korzystać?</Link>
+				<Link href="/regulations">Regulamin</Link>
+				<Link href="/authors">Autorzy</Link>
+				<a href="https://www.facebook.com/DevFAQ" target="_blank" rel="noreferrer">
+					Facebook
+				</a>
+				<a href="https://typeofweb.com" target="_blank" rel="noreferrer">
+					Type of Web
+				</a>
+			</nav>
+		</Container>
+	</footer>
+);