hecha pagina de about

src/routes/+layout.svelte

@@ -4,6 +4,7 @@
 	import { ModeWatcher } from 'mode-watcher';
 	import Header from '@/head/Header.svelte';
 	import { TooltipProvider } from '@/components/ui/tooltip';
+	import { resolve } from '$app/paths';
 
 	let { children } = $props();
 </script>
@@ -17,3 +18,11 @@
 <TooltipProvider>
 	{@render children()}
 </TooltipProvider>
+<footer
+	class="fixed right-0 bottom-0 left-0 border-t bg-background p-2 text-center text-sm text-muted-foreground"
+>
+	<p>
+		&copy; {new Date().getFullYear()} Mini X. Todos los derechos reservados.
+		<a class="text-blue-500 underline" href={resolve('/about')}>Sobre Nosotros</a>
+	</p>
+</footer>

src/routes/about/+page.svelte

@@ -0,0 +1,66 @@
+<script>
+	import AvatarFallback from '@/components/ui/avatar/avatar-fallback.svelte';
+	import AvatarImage from '@/components/ui/avatar/avatar-image.svelte';
+	import Avatar from '@/components/ui/avatar/avatar.svelte';
+	import CardContent from '@/components/ui/card/card-content.svelte';
+	import CardDescription from '@/components/ui/card/card-description.svelte';
+	import CardHeader from '@/components/ui/card/card-header.svelte';
+	import CardTitle from '@/components/ui/card/card-title.svelte';
+	import Card from '@/components/ui/card/card.svelte';
+	import Separator from '@/components/ui/separator/separator.svelte';
+	import Github from '@lucide/svelte/icons/github';
+
+	let devs = [
+		{
+			name: 'Fede',
+			role: 'Desarrollador Full Stack',
+			pic: 'https://avatars.githubusercontent.com/u/61921832?s=64&v=4',
+			gh: 'https://github.com/fedpo2'
+		},
+		{
+			name: 'Luca',
+			role: 'Desarrollador Frontend',
+			pic: 'https://avatars.githubusercontent.com/u/141507149?s=64&v=4',
+			gh: 'https://github.com/TroianoLuca2am'
+		},
+		{
+			name: 'Fran',
+			role: 'Desarrollador Backend',
+			pic: 'https://avatars.githubusercontent.com/u/126514899?s=64&v=4',
+			gh: 'https://github.com/franciscorosecerna'
+		}
+	];
+</script>
+
+<div class="flex min-h-fit w-full items-center justify-center p-6 md:p-10">
+	<div class="w-full max-w-6xl">
+		<h1 class="mb-2 scroll-m-20 text-center text-4xl font-extrabold tracking-tight lg:text-5xl">
+			Sobre Nosotros
+		</h1>
+
+		<Separator class="my-2" />
+		<div class="grid grid-cols-1 gap-6 md:grid-cols-3">
+			{#each devs as dev}
+				<Card>
+					<CardHeader class="flex flex-col items-center justify-center gap-2">
+						<Avatar class="h-24 w-24">
+							<AvatarImage src={dev.pic} class="h-24 w-24" />
+							<AvatarFallback class="flex h-24 w-24 items-center justify-center text-3xl">
+								{dev.name.toLocaleUpperCase()[0]}
+							</AvatarFallback>
+						</Avatar>
+					</CardHeader>
+					<CardContent>
+						<div>
+							<CardTitle>{dev.name}</CardTitle>
+							<CardDescription>{dev.role}</CardDescription>
+						</div>
+						<div class="mt-2">
+							<a href={dev.gh}><Github /></a>
+						</div>
+					</CardContent>
+				</Card>
+			{/each}
+		</div>
+	</div>
+</div>