201 lines
9.1 KiB
TypeScript
201 lines
9.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Terminal, Gamepad2, Sparkles, Orbit, CheckCircle2, Compass } from "lucide-react";
|
|
|
|
export default function StudioCreed() {
|
|
const softwareFocus = [
|
|
{
|
|
title: "Local-First & High Performance",
|
|
desc: "We build native, low-latency tools compiled in Rust and WebGPU that respect cognitive flow and user data sovereignty.",
|
|
},
|
|
{
|
|
title: "Tactile Spatial Interfaces",
|
|
desc: "Re-imagining workstations and creative pipelines with fluid, cockpit-inspired spatial ergonomics.",
|
|
},
|
|
{
|
|
title: "Zero-Bloat Engineering",
|
|
desc: "Every binary is optimized for minimal memory footprint, instant boot times, and decades-long utility.",
|
|
},
|
|
{
|
|
title: "Tools for Deep Thinkers & Creators",
|
|
desc: "Software designed from the ground up for technical artists, developers, and focused thinkers.",
|
|
},
|
|
];
|
|
|
|
const gamesFocus = [
|
|
{
|
|
title: "Atmospheric & Narrative Immersion",
|
|
desc: "Evocative interstellar worlds driven by rich speculative fiction, tactile acoustics, and memorable art direction.",
|
|
},
|
|
{
|
|
title: "Kinetic & Physics-First Mechanics",
|
|
desc: "Crafting gameplay rooted in Newtonian motion, orbital dynamics, and tactile interactive feedback.",
|
|
},
|
|
{
|
|
title: "Standalone, Complete Experiences",
|
|
desc: "Crafting finished artistic works that respect player time—no predatory loops, just pure interactive craft.",
|
|
},
|
|
{
|
|
title: "Original Audiovisual Synthesis",
|
|
desc: "Bespoke procedural audio engines and dynamic synthesizer soundtracks that react in real-time.",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="creed" className="relative py-28 overflow-hidden">
|
|
{/* Background radial glow */}
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[700px] h-[500px] bg-indigo-600/10 rounded-full blur-[180px] pointer-events-none" />
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
|
|
{/* Section Header */}
|
|
<div className="flex flex-col items-center text-center max-w-3xl mx-auto mb-20 space-y-4">
|
|
<div className="inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full glass-panel border border-cyan-500/30 text-xs font-mono text-cyan-300">
|
|
<Compass className="w-3.5 h-3.5 text-cyan-400" />
|
|
<span>STUDIO CREED & CRAFT PHILOSOPHY</span>
|
|
</div>
|
|
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-white">
|
|
Where Our Energy Goes: <br />
|
|
<span className="text-gradient-cyan">The Pursuit of Pure Craft.</span>
|
|
</h2>
|
|
|
|
<p className="text-base sm:text-lg text-slate-400 leading-relaxed pt-2">
|
|
Aghatis Studio exists to invent, polish, and publish original software products and immersive interactive worlds.
|
|
Our roadmap is driven entirely by craftsmanship, curiosity, and product excellence.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Side-by-side Dual Focus Arena */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 items-stretch">
|
|
|
|
{/* Column 1: Software & Tools Focus */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="glass-panel-glow p-8 sm:p-10 rounded-3xl relative overflow-hidden flex flex-col justify-between border-cyan-500/30 bg-gradient-to-b from-cyan-950/20 via-slate-950/60 to-black/80"
|
|
>
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between pb-4 border-b border-white/10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-cyan-400/10 border border-cyan-400/30 flex items-center justify-center text-cyan-400">
|
|
<Terminal className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold font-mono text-white">
|
|
SOFTWARE & CREATIVE TOOLS
|
|
</h3>
|
|
<span className="text-[11px] font-mono text-cyan-300">
|
|
SYSTEMS, WORKSTATIONS & PIPELINES
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span className="w-2.5 h-2.5 rounded-full bg-cyan-400 shadow-[0_0_10px_#38bdf8]" />
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{softwareFocus.map((item, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="p-4 rounded-2xl bg-white/5 border border-white/5 flex items-start gap-3.5 hover:border-cyan-400/20 transition-colors"
|
|
>
|
|
<CheckCircle2 className="w-4 h-4 text-cyan-400 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="text-sm font-bold text-white font-mono">
|
|
{item.title}
|
|
</h4>
|
|
<p className="text-xs text-slate-300 leading-relaxed mt-1">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t border-white/10 text-xs font-mono text-cyan-300 flex items-center gap-2">
|
|
<Sparkles className="w-4 h-4 text-cyan-400" />
|
|
<span>Engineered to empower creators with speed, clarity, and precision.</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Column 2: Games & Interactive Media Focus */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="glass-card p-8 sm:p-10 rounded-3xl relative overflow-hidden flex flex-col justify-between border-purple-500/30 bg-gradient-to-b from-purple-950/20 via-slate-950/60 to-black/80"
|
|
>
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between pb-4 border-b border-white/10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 rounded-xl bg-purple-500/10 border border-purple-500/30 flex items-center justify-center text-purple-400">
|
|
<Gamepad2 className="w-5 h-5" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-lg font-bold font-mono text-white">
|
|
ATMOSPHERIC GAMES
|
|
</h3>
|
|
<span className="text-[11px] font-mono text-purple-300">
|
|
WORLDS, PHYSICS & NARRATIVE
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<span className="w-2.5 h-2.5 rounded-full bg-purple-400 shadow-[0_0_10px_#a855f7]" />
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
{gamesFocus.map((item, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="p-4 rounded-2xl bg-white/5 border border-white/5 flex items-start gap-3.5 hover:border-purple-400/20 transition-colors"
|
|
>
|
|
<CheckCircle2 className="w-4 h-4 text-purple-400 shrink-0 mt-0.5" />
|
|
<div>
|
|
<h4 className="text-sm font-bold text-white font-mono">
|
|
{item.title}
|
|
</h4>
|
|
<p className="text-xs text-slate-300 leading-relaxed mt-1">
|
|
{item.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t border-white/10 text-xs font-mono text-purple-300 flex items-center gap-2">
|
|
<Orbit className="w-4 h-4 text-purple-400" />
|
|
<span>Handcrafted interactive universes built with artistic depth and soul.</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
|
|
{/* Central Creed Statement */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 15 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="mt-12 p-8 rounded-2xl glass-panel text-center max-w-4xl mx-auto border border-white/10 relative overflow-hidden"
|
|
>
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-cyan-500/5 to-transparent pointer-events-none" />
|
|
<p className="text-sm sm:text-base font-mono text-slate-200 tracking-wide leading-relaxed">
|
|
“Our commitment is simple: build products of enduring depth, craft experiences we are fiercely proud of, and explore the outer boundaries of software and interactive art.”
|
|
</p>
|
|
<div className="mt-4 text-xs font-mono text-cyan-400 uppercase tracking-widest">
|
|
— AGHATIS STUDIO CORE TENET
|
|
</div>
|
|
</motion.div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|