feat: footer

src/lib/api/index.ts

@@ -111,6 +111,8 @@ const mockTeamMembers: Models.BackendTeamMember[] = [
 ];
 
 const mockAbout: Models.BackendAbout = {
+	about:
+		"ReVanced was born out of Vanced's discontinuation and it is our goal to continue the legacy of what Vanced left behind. Thanks to ReVanced Patcher, it's possible to create long-lasting patches for nearly any Android app. ReVanced's patching system is designed to allow patches to work on new versions of the apps automatically with bare minimum maintenance.",
 	contact: {
 		email: 'contact@revanced.app'
 	},

src/lib/api/models.d.ts

@@ -97,6 +97,7 @@ type BackendAboutDonations = {
 	wallets: BackendAboutWallet[];
 };
 export type BackendAbout = {
+	about: string;
 	contact: BackendAboutContact;
 	donations: BackendAboutDonations;
 	socials: BackendAboutUrl[];

src/lib/components/molecules/FooterSection.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	type Props = { title: string; children: Snippet };
+	let { title, children }: Props = $props();
+
+	let expanded: boolean = $state(false);
+</script>
+
+<div class="desktop-only">
+	<span>{title}</span>
+	<ul>
+		{@render children()}
+	</ul>
+</div>

src/lib/components/organisms/Footer.svelte

@@ -3,17 +3,52 @@
 
 	import DmcaBadge from '$components/atoms/DmcaBadge.svelte';
 	import SquigglyDivider from '$components/atoms/SquigglyDivider.svelte';
+	import FooterSection from '$components/molecules/FooterSection.svelte';
+	import Button from '$components/atoms/Button.svelte';
+
+	import api from '$api';
 </script>
 
+<SquigglyDivider />
 <footer>
-	<SquigglyDivider />
-
 	<div class="footer-top">
-		<section class="main-content"></section>
-		<section class="links-container"></section>
+		<section class="main-content">
+			<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
+			{#await api.general.getAbout() then data}
+				<div>
+					<p>{data.about}</p>
+				</div>
+			{/await}
+		</section>
+		<section class="links-container">
+			<FooterSection title="Pages">
+				<li><Button type="text" href="/">Home</Button></li>
+				<li><Button type="text" href="/download">Download</Button></li>
+				<li><Button type="text" href="/patches">Patches</Button></li>
+				<li><Button type="text" href="/contributors">Contributors</Button></li>
+				<li><Button type="text" href="/donate">Donate</Button></li>
+			</FooterSection>
+
+			{#await api.general.getAbout() then data}
+				<FooterSection title="Socials">
+					{#each data.socials as { name, url }}
+						<li>
+							<Button type="text" href={url} target="_blank">{name}</Button>
+						</li>
+					{/each}
+				</FooterSection>
+			{/await}
+		</section>
 	</div>
 
-	<div class="footer-bottom"></div>
+	<div class="footer-bottom">
+		<div id="logo-name"><span>Re</span>Vanced</div>
+		<a href="/donate"><div>Donate</div></a>
 
-	<DmcaBadge guid={RV_DMCA_GUID} />
+		{#await api.general.getAbout() then data}
+			<Button type="text" href="mailto:{data.contact.email}">Email</Button>
+		{/await}
+
+		<DmcaBadge guid={RV_DMCA_GUID} />
+	</div>
 </footer>