Refine image page, add about page

2025-07-03 18:03:16 +02:00
parent f5edeb67d4
commit 6026416c5c
16 changed files with 301 additions and 167 deletions
--- a/src/app/(normal)/about/page.tsx
+++ b/src/app/(normal)/about/page.tsx
@ -0,0 +1,58 @@
+import { MailIcon, MessageCircleIcon, RadioIcon, WavesIcon } from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function AboutPage() {
+  return (
+    <div className="max-w-3xl mx-auto px-4 py-12 flex flex-col gap-10">
+      <section className="text-center space-y-4">
+        <h1 className="text-4xl font-bold tracking-tight">About</h1>
+        <p className="text-muted-foreground text-lg">
+          Fellies is a network of services for a small group of fluffy furry and furry-friendly folks.<br />
+          We are here to support the furry and queer communities and provide a safe space for them to express themselves.<br />
+          This place is my own space to present all the nice artworks my (currently) three OCs including my main fursona Citali I've got from all the great and talented artists.
+        </p>
+        <p className="text-muted-foreground py-4">
+          This place is free of any AI or tracking functionality and is not intended to be used for any commercial purposes.<br />
+          The usage of any content on this page for AI training is strictly prohibited.
+        </p>
+      </section>
+
+      <section className="border rounded-lg p-6 shadow bg-muted/20 space-y-4">
+        <h2 className="text-xl font-semibold text-center">Connect with me</h2>
+        <div className="flex flex-wrap gap-4 justify-between">
+          <SocialLink icon={<MailIcon className="w-5 h-5" />} href="mailto:core@fellies.email" label="Email" />
+          <SocialLink icon={<MessageCircleIcon className="w-5 h-5" />} href="https://signal.me/#eu/ax5Sf75Na5g6c_Cir3Q9c0zv6TnoaQCKAo3dcUo15990aLTlbIBO1qbKqoB7WPuQ" label="Signal" />
+          <SocialLink icon={<WavesIcon className="w-5 h-5" />} href="https://matrix.to/#/@citali:steffo.dev" label="Matrix" />
+          <SocialLink icon={<RadioIcon className="w-5 h-5" />} href="https://fellies.social/@Citali" label="Fediverse" />
+        </div>
+      </section>
+
+      <section className="border rounded-lg p-6 shadow bg-muted/20 space-y-4">
+        <div className="py-6 flex justify-center">
+          <Image
+            src="/images/Intersex-inclusive_pride_flag.png"
+            alt="Inclusive Pride Flag"
+            width={500}
+            height={500}
+            className="rounded shadow"
+          />
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function SocialLink({ icon, href, label }: { icon: React.ReactNode, href: string, label: string }) {
+  return (
+    <Link
+      href={href}
+      className="flex items-center gap-2 px-3 py-2 rounded-md bg-muted/30 hover:bg-muted/50 transition text-sm"
+      target="_blank"
+      rel="noopener noreferrer"
+    >
+      {icon}
+      {label}
+    </Link>
+  )
+}