(Feat) Init WebSite

2026-06-22 23:03:02 +02:00
commit ea71039071
51 changed files with 11995 additions and 0 deletions
@@ -0,0 +1,102 @@
+import Link from "next/link";
+import Image from "next/image";
+import { SocialLinks } from "./SocialLinks";
+
+export function Footer() {
+  return (
+    <footer className="border-t border-border mt-24">
+      <div className="max-w-7xl mx-auto px-6 lg:px-10 py-12 grid grid-cols-1 md:grid-cols-4 gap-10">
+        <div className="md:col-span-2">
+          <Link href="/" className="group inline-flex items-center gap-3">
+            <Image
+              src="/image/Studio/Logo Flat.png"
+              alt="Highland Games Studio"
+              width={32}
+              height={32}
+              className="transition-transform duration-300 group-hover:scale-110 group-hover:-translate-y-0.5"
+            />
+            <span className="font-display text-lg tracking-wider transition-colors duration-300 group-hover:text-accent">
+              Highland Games Studio
+            </span>
+          </Link>
+          <p className="mt-4 text-sm text-foreground-muted max-w-sm">
+            Where summits become worlds. An indie studio crafting survival
+            adventures.
+          </p>
+        </div>
+
+        <div>
+          <h4 className="font-display text-sm tracking-widest text-foreground-muted mb-4">
+            Explore
+          </h4>
+          <ul className="space-y-2 text-sm">
+            <li>
+              <Link
+                href="/studio"
+                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
+              >
+                Studio
+                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="/games"
+                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
+              >
+                Games
+                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="/devblog"
+                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
+              >
+                Devblog
+                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
+              </Link>
+            </li>
+            <li>
+              <Link
+                href="/contact"
+                className="group relative inline-block text-foreground-muted hover:text-foreground transition-colors"
+              >
+                Contact
+                <span className="absolute left-0 -bottom-0.5 h-px w-0 bg-accent transition-all duration-300 group-hover:w-full" />
+              </Link>
+            </li>
+          </ul>
+        </div>
+
+        <div>
+          <h4 className="font-display text-sm tracking-widest text-foreground-muted mb-4">
+            Follow
+          </h4>
+          <SocialLinks />
+        </div>
+      </div>
+
+      <div className="border-t border-border">
+        <div className="max-w-7xl mx-auto px-6 lg:px-10 py-6 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-foreground-muted">
+          <p>© {new Date().getFullYear()} Highland Games Studio. All rights reserved.</p>
+          <div className="flex items-center gap-5">
+            <Link
+              href="/legal/notice"
+              className="hover:text-accent transition-colors"
+            >
+              Legal Notice
+            </Link>
+            <Link
+              href="/legal/privacy"
+              className="hover:text-accent transition-colors"
+            >
+              Privacy
+            </Link>
+          </div>
+          <p className="font-display tracking-widest hidden lg:block">WHERE SUMMITS BECOME WORLDS</p>
+        </div>
+      </div>
+    </footer>
+  );
+}