261 lines
12 KiB
TypeScript
261 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import {
|
|
Sparkles,
|
|
ArrowRight,
|
|
Check,
|
|
Radio,
|
|
Globe,
|
|
Shield,
|
|
} from "lucide-react";
|
|
|
|
export default function Footer() {
|
|
const [email, setEmail] = useState("");
|
|
const [subscribed, setSubscribed] = useState(false);
|
|
|
|
const handleSubscribe = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (email.trim().length > 3) {
|
|
setSubscribed(true);
|
|
setEmail("");
|
|
}
|
|
};
|
|
|
|
const socialLinks = [
|
|
{
|
|
name: "GitHub",
|
|
href: "https://github.com",
|
|
svg: (
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "X (Twitter)",
|
|
href: "https://x.com",
|
|
svg: (
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Discord",
|
|
href: "https://discord.com",
|
|
svg: (
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.929 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.894.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "Steam",
|
|
href: "https://store.steampowered.com",
|
|
svg: (
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
<path d="M12 2a10 10 0 0 0-10 10c0 4.767 3.339 8.75 7.828 9.742l3.418-4.992a3.02 3.02 0 0 1-.246-.145l-4.524 1.86a2.022 2.022 0 0 1-2.476-2.476l1.86-4.524a3 3 0 0 1 4.14-4.14l4.524-1.86a2.02 2.02 0 0 1 2.476 2.476l-1.86 4.524c.063.078.113.162.15.251l4.992-3.418A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z" />
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
name: "itch.io",
|
|
href: "https://itch.io",
|
|
svg: (
|
|
<svg className="w-4 h-4 fill-current" viewBox="0 0 24 24">
|
|
<path d="M2.5 5.5v2.2c0 .9.7 1.8 1.6 1.8.9 0 1.6-.9 1.6-1.8V5.5H2.5zm4.8 0v2.2c0 .9.7 1.8 1.6 1.8.9 0 1.6-.9 1.6-1.8V5.5H7.3zm4.8 0v2.2c0 .9.7 1.8 1.6 1.8.9 0 1.6-.9 1.6-1.8V5.5h-3.2zm4.8 0v2.2c0 .9.7 1.8 1.6 1.8.9 0 1.6-.9 1.6-1.8V5.5h-3.2zm4.8 0v2.2c0 .9.7 1.8 1.6 1.8.9 0 1.6-.9 1.6-1.8V5.5h-3.2zM2 11.5c0 1.7 1.1 3.2 2.7 3.5v5.5c0 .8.7 1.5 1.5 1.5h11.6c.8 0 1.5-.7 1.5-1.5V15c1.6-.3 2.7-1.8 2.7-3.5H2zm7 3h6v2H9v-2z" />
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<footer className="relative border-t border-white/10 bg-[#08080f] pt-20 pb-12 overflow-hidden">
|
|
{/* Background ambient lighting */}
|
|
<div className="absolute bottom-0 left-1/2 -translate-x-1/2 w-[600px] h-[300px] bg-indigo-500/10 rounded-full blur-[140px] pointer-events-none" />
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
|
|
{/* Top Section: Newsletter Transmissions */}
|
|
<div className="glass-panel p-8 sm:p-12 rounded-3xl border border-white/10 mb-16 relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 w-80 h-80 bg-cyan-500/10 rounded-full blur-[100px] pointer-events-none" />
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-center">
|
|
<div className="lg:col-span-7 space-y-3">
|
|
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-cyan-500/10 border border-cyan-400/20 text-[11px] font-mono text-cyan-300">
|
|
<Radio className="w-3 h-3 text-cyan-400 animate-pulse" />
|
|
<span>FREQUENCY DISPATCH // DIRECT FEED</span>
|
|
</div>
|
|
<h3 className="text-2xl sm:text-3xl font-extrabold text-white font-mono">
|
|
Join the Aghatis Orbital Transmissions
|
|
</h3>
|
|
<p className="text-sm text-slate-400 max-w-xl">
|
|
Receive confidential dispatches on original software alpha testing, closed game playtests, and deep-dive engineering devlogs. Zero marketing spam.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="lg:col-span-5">
|
|
{subscribed ? (
|
|
<div className="p-4 rounded-2xl bg-cyan-950/40 border border-cyan-400/30 flex items-center gap-3 text-xs font-mono text-cyan-300">
|
|
<Check className="w-5 h-5 text-cyan-400" />
|
|
<span>SIGNAL LOCKED. You are registered for upcoming playtests.</span>
|
|
</div>
|
|
) : (
|
|
<form onSubmit={handleSubscribe} className="flex flex-col sm:flex-row gap-3">
|
|
<input
|
|
type="email"
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="[email protected]"
|
|
required
|
|
className="flex-1 px-4 py-3 rounded-xl bg-white/5 border border-white/15 text-white placeholder-slate-500 text-xs font-mono focus:outline-none focus:border-cyan-400 transition-colors"
|
|
/>
|
|
<button
|
|
type="submit"
|
|
className="px-6 py-3 rounded-xl bg-gradient-to-r from-cyan-400 to-indigo-400 text-slate-950 font-mono text-xs uppercase tracking-wider font-bold hover:opacity-90 transition-opacity flex items-center justify-center gap-2 shrink-0 cursor-pointer shadow-lg"
|
|
>
|
|
<span>Tune In</span>
|
|
<ArrowRight className="w-3.5 h-3.5 text-slate-950" />
|
|
</button>
|
|
</form>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Middle Section: Studio Details & Links */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-10 pb-16 border-b border-white/10">
|
|
|
|
{/* Col 1: Studio Brand */}
|
|
<div className="lg:col-span-5 space-y-4">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-cyan-400 to-indigo-500 flex items-center justify-center text-slate-950 font-black text-xs">
|
|
AS
|
|
</div>
|
|
<span className="font-mono font-bold tracking-widest text-lg text-white">
|
|
AGHATIS STUDIO
|
|
</span>
|
|
</div>
|
|
<p className="text-xs text-slate-400 leading-relaxed max-w-sm">
|
|
An independent product laboratory crafting original software, atmospheric games,
|
|
and experimental systems. Dedicated exclusively to our own in-house creative universe.
|
|
</p>
|
|
<div className="flex items-center gap-2 text-xs font-mono text-cyan-400 pt-2">
|
|
<span className="w-2 h-2 rounded-full bg-cyan-400 animate-ping" />
|
|
<span>ORBITAL BEACON: ACTIVE // SECTOR 01</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Col 2: Navigation */}
|
|
<div className="lg:col-span-2 space-y-3">
|
|
<h4 className="text-xs font-mono uppercase tracking-wider text-white font-bold">
|
|
NAVIGATION
|
|
</h4>
|
|
<ul className="space-y-2 text-xs font-mono text-slate-400">
|
|
<li>
|
|
<a href="#about" className="hover:text-cyan-300 transition-colors">
|
|
Studio Narrative
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#focus" className="hover:text-cyan-300 transition-colors">
|
|
Core Tracks
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#portfolio" className="hover:text-cyan-300 transition-colors">
|
|
Product Fleet
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#creed" className="hover:text-cyan-300 transition-colors">
|
|
Sovereign Creed
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="/admin" className="text-cyan-400 hover:text-cyan-300 transition-colors flex items-center gap-1">
|
|
<span>Admin Cockpit</span>
|
|
<span className="text-[9px] px-1 rounded bg-cyan-500/20">DB</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Col 3: Product Tracks */}
|
|
<div className="lg:col-span-2 space-y-3">
|
|
<h4 className="text-xs font-mono uppercase tracking-wider text-white font-bold">
|
|
PORTFOLIO
|
|
</h4>
|
|
<ul className="space-y-2 text-xs font-mono text-slate-400">
|
|
<li>
|
|
<a href="#portfolio" className="hover:text-cyan-300 transition-colors">
|
|
Aetheria: Chrono Drift
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#portfolio" className="hover:text-cyan-300 transition-colors">
|
|
NebulaFlow
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#portfolio" className="hover:text-cyan-300 transition-colors">
|
|
Voidwalker OS
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="#portfolio" className="hover:text-cyan-300 transition-colors">
|
|
ChromaSynth Lab
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Col 4: Transmissions & Socials */}
|
|
<div className="lg:col-span-3 space-y-3">
|
|
<h4 className="text-xs font-mono uppercase tracking-wider text-white font-bold">
|
|
CHANNELS
|
|
</h4>
|
|
<div className="flex flex-wrap gap-2 pt-1">
|
|
{socialLinks.map((link) => (
|
|
<a
|
|
key={link.name}
|
|
href={link.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="p-2.5 rounded-xl glass-card text-slate-400 hover:text-white hover:border-cyan-400/50 hover:bg-white/5 transition-all"
|
|
aria-label={link.name}
|
|
>
|
|
{link.svg}
|
|
</a>
|
|
))}
|
|
</div>
|
|
<p className="text-[11px] font-mono text-slate-400 pt-2">
|
|
PGP Encrypted Public Key: 0x8F4E...91A
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* Bottom Bar & Implicit In-House Studio Disclaimer */}
|
|
<div className="pt-8 flex flex-col md:flex-row items-center justify-between gap-6">
|
|
|
|
{/* Studio Focus Charter */}
|
|
<div className="flex items-start sm:items-center gap-3 text-xs font-mono text-slate-400 max-w-2xl">
|
|
<Shield className="w-4 h-4 text-cyan-400 shrink-0 mt-0.5 sm:mt-0" />
|
|
<p>
|
|
<strong className="text-slate-300">STUDIO CHARTER:</strong> An independent product laboratory dedicated to engineering high-performance creative software and publishing atmospheric, narrative-driven games.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="text-xs font-mono text-slate-400 shrink-0">
|
|
© 2026 Aghatis Studio. All rights reserved.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|