191 lines
9.0 KiB
TypeScript
191 lines
9.0 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion } from "framer-motion";
|
|
import { Shield, Sparkles, Cpu, Eye, Code, Compass } from "lucide-react";
|
|
|
|
export default function About() {
|
|
const pillars = [
|
|
{
|
|
icon: Shield,
|
|
title: "Radical Autonomy",
|
|
description:
|
|
"We are 100% self-directed. Every hour in our studio is dedicated to original research, bespoke engineering, and crafting immersive experiences.",
|
|
badge: "Sovereign IP",
|
|
accent: "from-cyan-500/20 to-blue-500/10",
|
|
border: "border-cyan-500/30",
|
|
},
|
|
{
|
|
icon: Cpu,
|
|
title: "Relentless Engineering",
|
|
description:
|
|
"From low-latency native algorithms to custom GLSL shaders and responsive spatial architectures, our software is engineered for speed, stability, and longevity.",
|
|
badge: "Deep Tech",
|
|
accent: "from-purple-500/20 to-indigo-500/10",
|
|
border: "border-purple-500/30",
|
|
},
|
|
{
|
|
icon: Sparkles,
|
|
title: "Artistic Depth",
|
|
description:
|
|
"Games and software shouldn't just be functional—they should carry soul. We handcraft atmospheric aesthetics, celestial soundscapes, and intuitive interaction rituals.",
|
|
badge: "Bespoke Art",
|
|
accent: "from-pink-500/20 to-rose-500/10",
|
|
border: "border-pink-500/30",
|
|
},
|
|
{
|
|
icon: Eye,
|
|
title: "Long-Horizon Vision",
|
|
description:
|
|
"We build digital artifacts that endure. Rather than following transient hype cycles or rushed deliverables, we invest in foundational systems and timeless experiences.",
|
|
badge: "Decade Mindset",
|
|
accent: "from-indigo-500/20 to-cyan-500/10",
|
|
border: "border-indigo-500/30",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="about" className="relative py-28 overflow-hidden">
|
|
{/* Background radial accent */}
|
|
<div className="absolute top-1/2 left-0 w-96 h-96 bg-indigo-600/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">
|
|
|
|
{/* 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-indigo-500/30 text-xs font-mono text-indigo-300">
|
|
<Compass className="w-3.5 h-3.5 text-indigo-400" />
|
|
<span>ORIGIN & MISSION</span>
|
|
</div>
|
|
|
|
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-white">
|
|
Forged in the Pursuit of <br />
|
|
<span className="text-gradient-nebula">Creative Sovereignty.</span>
|
|
</h2>
|
|
|
|
<p className="text-base sm:text-lg text-slate-400 leading-relaxed pt-2">
|
|
Aghatis Studio was established with a singular conviction: the most resonant
|
|
software and interactive worlds are crafted with unwavering focus, deep curiosity,
|
|
and total creative sovereignty.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Narrative Feature Row: Manifesto statement */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch mb-16">
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.7 }}
|
|
className="lg:col-span-7 glass-panel-glow p-8 sm:p-10 rounded-3xl relative overflow-hidden flex flex-col justify-between"
|
|
>
|
|
<div className="absolute top-0 right-0 p-8 opacity-10 pointer-events-none">
|
|
<Code className="w-48 h-48 text-cyan-400" />
|
|
</div>
|
|
|
|
<div className="space-y-6 relative z-10">
|
|
<div className="text-xs font-mono tracking-widest text-cyan-400 uppercase">
|
|
// THE STUDIO NARRATIVE
|
|
</div>
|
|
<h3 className="text-2xl sm:text-3xl font-bold text-white leading-snug">
|
|
The Craft of an Independent Product Lab.
|
|
</h3>
|
|
<p className="text-slate-300 leading-relaxed text-sm sm:text-base">
|
|
At <span className="text-cyan-300 font-semibold">Aghatis Studio</span>, our mission is purposeful:
|
|
we design, build, and publish our own digital products. By channeling our entire team's energy
|
|
into in-house intellectual property, we maintain complete creative control over every mechanic, interface, and artistic decision.
|
|
</p>
|
|
<p className="text-slate-400 leading-relaxed text-sm sm:text-base">
|
|
Every line of code, geometric asset, and algorithmic pipeline we author belongs to a cohesive creative ecosystem.
|
|
This focused environment grants us the freedom to polish mechanics until they shine, engineer tools with
|
|
uncompromising standards, and publish digital experiences that leave a lasting impression.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t border-white/10 flex items-center justify-between text-xs font-mono text-slate-400">
|
|
<span>FOUNDED IN INDEPENDENCE</span>
|
|
<span className="text-cyan-400">PURE IN-HOUSE IP</span>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Right Quote / Philosophy card */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.7, delay: 0.1 }}
|
|
className="lg:col-span-5 glass-card p-8 sm:p-10 rounded-3xl flex flex-col justify-between border-indigo-500/20 bg-gradient-to-b from-indigo-950/30 to-purple-950/10"
|
|
>
|
|
<div className="space-y-4">
|
|
<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">
|
|
<Sparkles className="w-5 h-5" />
|
|
</div>
|
|
<blockquote className="text-lg sm:text-xl font-medium text-slate-200 italic leading-relaxed">
|
|
“We measure our success by the elegance of our architecture, the atmosphere of our worlds, and the enduring quality of the software and games we release into the universe.”
|
|
</blockquote>
|
|
</div>
|
|
|
|
<div className="mt-8 pt-6 border-t border-white/10 flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-gradient-to-tr from-cyan-400 to-indigo-500 flex items-center justify-center text-slate-950 font-bold text-xs">
|
|
AS
|
|
</div>
|
|
<div>
|
|
<div className="text-xs font-mono font-bold text-white tracking-wider">
|
|
AGHATIS CORE LAB
|
|
</div>
|
|
<div className="text-[11px] font-mono text-slate-400">
|
|
CREATIVE ARCHITECTURE COUNCIL
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
|
|
{/* Pillars Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{pillars.map((pillar, i) => {
|
|
const Icon = pillar.icon;
|
|
return (
|
|
<motion.div
|
|
key={pillar.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.5, delay: i * 0.1 }}
|
|
className="glass-card p-6 sm:p-7 rounded-2xl flex flex-col justify-between group hover:border-cyan-400/40 relative overflow-hidden"
|
|
>
|
|
<div className={`absolute top-0 right-0 w-28 h-28 bg-gradient-to-bl ${pillar.accent} rounded-bl-full pointer-events-none opacity-40 group-hover:opacity-100 transition-opacity`} />
|
|
|
|
<div className="space-y-4 relative z-10">
|
|
<div className="flex items-center justify-between">
|
|
<div className="w-10 h-10 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center text-cyan-400 group-hover:scale-110 transition-transform">
|
|
<Icon className="w-5 h-5" />
|
|
</div>
|
|
<span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded-full bg-white/5 border border-white/10 text-slate-400">
|
|
{pillar.badge}
|
|
</span>
|
|
</div>
|
|
|
|
<h4 className="text-lg font-bold text-white group-hover:text-cyan-300 transition-colors">
|
|
{pillar.title}
|
|
</h4>
|
|
|
|
<p className="text-xs sm:text-sm text-slate-400 leading-relaxed">
|
|
{pillar.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mt-6 pt-4 border-t border-white/5 flex items-center justify-between text-[11px] font-mono text-slate-400">
|
|
<span>PILLAR 0{i + 1}</span>
|
|
<span className="text-cyan-400 font-mono">NOMINAL</span>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|