style: add logo and headers to app footer

components/app-footer.tsx

@@ -11,21 +11,35 @@ export function AppFooter(): ReactNode {
 
 	const links = {
 		imprint: { href: createHref({ pathname: "/imprint" }), label: t("links.imprint") },
-		privacy: { href: createHref({ pathname: "/imprint" }), label: t("links.imprint") },
-		faq: { href: createHref({ pathname: "/imprint" }), label: t("links.imprint") },
-		about: { href: createHref({ pathname: "/imprint" }), label: t("links.imprint") },
+		privacy: { href: createHref({ pathname: "/privacy" }), label: t("links.privacy") },
+		faq: { href: createHref({ pathname: "/faq" }), label: t("links.faq") },
+		about: { href: createHref({ pathname: "/about" }), label: t("links.about") },
 	} satisfies Record<string, { href: LinkProps["href"]; label: string }>;
 
 	return (
-		<footer className="border-t">
-			<div className="container flex items-center justify-between gap-4 py-6">
-				<Image alt="" height={52} src="/assets/logo.svg" width={52} />
-				<div>imprint</div>
-				<div>FAQ</div>
-				<div>about</div>
-				<div>helpdesk</div>
+		<footer className="flex flex-col items-center border-t bg-primary text-white">
+			<div className="container flex flex-col justify-between gap-4 py-6 lg:flex-row">
+				<Image alt="" height={52} src="/assets/images/logo.svg" width={52} />
+				<div className="w-44">
+					<span>imprint</span>
+					<Image alt="" height={56} src="/assets/images/oeaw.svg" width={128} />
+				</div>
+				<div className="w-44">
+					<h2>FAQ</h2>
+				</div>
+				<div className="w-44">
+					<h2>about</h2>
+				</div>
+				<div className="w-64">
+					<h2>helpdesk</h2>
+					<input
+						className="mt-3 w-full rounded-full border border-solid border-gray-50 px-3 py-1"
+						placeholder="Search Website"
+						type="search"
+					/>
+				</div>
 			</div>
-			<div className="container flex items-center justify-between gap-4 py-6">
+			<div className="flex flex-row items-center justify-between gap-4 py-6">
 				<nav aria-label={t("navigation-secondary")}>
 					<ul className="flex items-center gap-4 text-sm" role="list">
 						{Object.entries(links).map(([id, link]) => {

messages/en.json

@@ -1,7 +1,10 @@
 {
 	"AppFooter": {
 		"links": {
-			"imprint": "Imprint"
+			"imprint": "Imprint",
+			"privacy": "privacy",
+			"faq": "faq",
+			"about": "about"
 		},
 		"navigation-secondary": "Secondary"
 	},