Initial Commit
Commit pertama, memindahkan repository dari github ke gitea.
This commit is contained in:
dicky arya pratama committed
commit
13a47fbebf
41 files changed
+12327
No files matched your search
@@ -0,0 +1,252 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { Layers, Terminal, Gamepad2, FlaskConical, ArrowUpRight, CheckCircle2 } from "lucide-react";
|
||||
|
||||
export default function CoreFocus() {
|
||||
const [activeTrack, setActiveTrack] = useState<number>(0);
|
||||
|
||||
const tracks = [
|
||||
{
|
||||
id: "software",
|
||||
number: "01",
|
||||
title: "Software Products",
|
||||
category: "CREATIVE & DEVELOPER TOOLS",
|
||||
icon: Terminal,
|
||||
tagline: "High-performance utilities engineered for creators, coders, and deep-focus thinkers.",
|
||||
description:
|
||||
"We build standalone software tools that respect user attention and privacy. Our software stack emphasizes local-first execution, instantaneous boot times, minimal memory footprints, and fluid spatial aesthetics.",
|
||||
stack: ["Rust", "TypeScript", "WebGPU", "Local-First SQLite", "Tauri", "Custom GLSL"],
|
||||
principles: [
|
||||
"Zero telemetry bloat or intrusive subscription traps",
|
||||
"Deterministic local-first file system workflows",
|
||||
"Sub-16ms latency interface responsiveness",
|
||||
"Minimalist spatial design inspired by cockpit HUDs",
|
||||
],
|
||||
currentInitiatives: [
|
||||
{ name: "NebulaFlow", stage: "Public Alpha", note: "Real-time visual node graph for generative coders" },
|
||||
{ name: "Voidwalker OS", stage: "Prototype", note: "Ultra-distraction-free spatial terminal" },
|
||||
],
|
||||
accentColor: "from-cyan-500 to-blue-600",
|
||||
pillBorder: "border-cyan-500/30 text-cyan-400 bg-cyan-500/10",
|
||||
glowColor: "rgba(56, 189, 248, 0.15)",
|
||||
},
|
||||
{
|
||||
id: "games",
|
||||
number: "02",
|
||||
title: "Original Games",
|
||||
category: "ATMOSPHERIC & INDIE TITLES",
|
||||
icon: Gamepad2,
|
||||
tagline: "Evocative, mechanics-first game experiences set in interstellar and surreal realities.",
|
||||
description:
|
||||
"Our games emphasize tactile physics, memorable soundscapes, and evocative storytelling. We reject predatory monetization and live-service treadmills—focusing exclusively on handcrafted, complete experiences that respect the player's time.",
|
||||
stack: ["Godot Engine", "Custom C++ GDExtension", "Bespoke Shaders", "FMOD / WebAudio", "Procreate / Blender"],
|
||||
principles: [
|
||||
"Uncompromising, single-purchase complete artistic vision",
|
||||
"Kinetic, physics-grounded flight and orbital mechanics",
|
||||
"Original dynamic synthesizer soundtracks and reactive foley",
|
||||
"Rich speculative sci-fi lore and evocative environmental narrative",
|
||||
],
|
||||
currentInitiatives: [
|
||||
{ name: "Aetheria: Chrono Drift", stage: "In Active Dev", note: "Tactical sci-fi flight RPG with time-dilation" },
|
||||
{ name: "Singularity Pulse", stage: "Playable Slice", note: "Hypnotic orbital defense rhythm-strategy" },
|
||||
],
|
||||
accentColor: "from-purple-500 to-pink-600",
|
||||
pillBorder: "border-purple-500/30 text-purple-400 bg-purple-500/10",
|
||||
glowColor: "rgba(168, 85, 247, 0.15)",
|
||||
},
|
||||
{
|
||||
id: "lab",
|
||||
number: "03",
|
||||
title: "Experimental Lab",
|
||||
category: "CREATIVE COMPUTING & R&D",
|
||||
icon: FlaskConical,
|
||||
tagline: "Unconstrained research in procedural systems, audio synthesis, and algorithmic art.",
|
||||
description:
|
||||
"The Aghatis Lab is our continuous skunkworks playground. Here we prototype procedural cosmos generators, WebAudio modular synths, chaotic attractor simulations, and emergent artificial life models that inform our core products.",
|
||||
stack: ["Three.js / R3F", "GLSL Compute", "Web Audio API", "WebAssembly", "Generative Math"],
|
||||
principles: [
|
||||
"Rapid computational sketches without commercial pressure",
|
||||
"Algorithmic exploration of celestial mathematics & fractals",
|
||||
"Open prototypes released to the creative technology community",
|
||||
"Direct R&D incubator for upcoming software & game mechanics",
|
||||
],
|
||||
currentInitiatives: [
|
||||
{ name: "ChromaSynth", stage: "Lab Sandbox", note: "Audio-reactive procedural geometry synthesizer" },
|
||||
{ name: "Project Event Horizon", stage: "R&D Prototype", note: "Planetary terrain generation via compute shaders" },
|
||||
],
|
||||
accentColor: "from-emerald-500 to-cyan-500",
|
||||
pillBorder: "border-emerald-500/30 text-emerald-400 bg-emerald-500/10",
|
||||
glowColor: "rgba(16, 185, 129, 0.15)",
|
||||
},
|
||||
];
|
||||
|
||||
const current = tracks[activeTrack];
|
||||
|
||||
return (
|
||||
<section id="focus" className="relative py-28 overflow-hidden">
|
||||
{/* Background ambient lighting */}
|
||||
<div className="absolute top-1/3 right-0 w-[500px] h-[500px] bg-purple-600/10 rounded-full blur-[160px] 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-16 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">
|
||||
<Layers className="w-3.5 h-3.5 text-cyan-400" />
|
||||
<span>OPERATIONAL TRACKS</span>
|
||||
</div>
|
||||
|
||||
<h2 className="text-3xl sm:text-4xl lg:text-5xl font-black tracking-tight text-white">
|
||||
Three Dedicated Arenas of <br />
|
||||
<span className="text-gradient-cyan">In-House Creation.</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-base sm:text-lg text-slate-400 leading-relaxed pt-2">
|
||||
Every project inside Aghatis Studio originates from one of three symbiotic disciplines,
|
||||
channeling our entire focus into original software, atmospheric games, and computational experiments.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Track Selector Tabs */}
|
||||
<div className="flex flex-wrap items-center justify-center gap-3 mb-12">
|
||||
{tracks.map((track, idx) => {
|
||||
const Icon = track.icon;
|
||||
const isSelected = activeTrack === idx;
|
||||
return (
|
||||
<button
|
||||
key={track.id}
|
||||
onClick={() => setActiveTrack(idx)}
|
||||
className={`flex items-center gap-3 px-5 py-3 rounded-2xl font-mono text-xs uppercase tracking-wider transition-all duration-300 cursor-pointer ${
|
||||
isSelected
|
||||
? "glass-panel-glow border-cyan-400/50 text-white shadow-[0_0_25px_rgba(56,189,248,0.25)] scale-[1.02]"
|
||||
: "glass-card text-slate-400 hover:text-slate-200 hover:border-white/20"
|
||||
}`}
|
||||
>
|
||||
<span className="text-slate-400 font-bold">{track.number}</span>
|
||||
<Icon className={`w-4 h-4 ${isSelected ? "text-cyan-400" : "text-slate-400"}`} />
|
||||
<span className="font-semibold">{track.title}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Active Track Deep Dive Display */}
|
||||
<AnimatePresence mode="wait">
|
||||
<motion.div
|
||||
key={current.id}
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -15 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="glass-panel-glow p-8 sm:p-12 rounded-3xl relative overflow-hidden border border-white/10"
|
||||
style={{
|
||||
boxShadow: `0 0 60px -15px ${current.glowColor}`,
|
||||
}}
|
||||
>
|
||||
{/* Ambient accent top bar */}
|
||||
<div className={`absolute top-0 left-0 right-0 h-1.5 bg-gradient-to-r ${current.accentColor}`} />
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-10">
|
||||
|
||||
{/* Left Column: Track Philosophy & Overview */}
|
||||
<div className="lg:col-span-7 space-y-6">
|
||||
<div className="flex items-center gap-3">
|
||||
<span className={`px-2.5 py-1 rounded-md text-[11px] font-mono tracking-widest uppercase border ${current.pillBorder}`}>
|
||||
TRACK {current.number} // {current.category}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 className="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-white leading-tight">
|
||||
{current.tagline}
|
||||
</h3>
|
||||
|
||||
<p className="text-slate-300 text-sm sm:text-base leading-relaxed">
|
||||
{current.description}
|
||||
</p>
|
||||
|
||||
{/* Principles checklist */}
|
||||
<div className="space-y-3 pt-4">
|
||||
<div className="text-xs font-mono uppercase tracking-wider text-slate-400">
|
||||
// CORE ARCHITECTURAL COMMITMENTS
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{current.principles.map((principle, i) => (
|
||||
<div key={i} className="flex items-start gap-2.5 text-xs text-slate-300">
|
||||
<CheckCircle2 className="w-4 h-4 text-cyan-400 shrink-0 mt-0.5" />
|
||||
<span>{principle}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stack Badges */}
|
||||
<div className="pt-4">
|
||||
<div className="text-xs font-mono uppercase tracking-wider text-slate-400 mb-2.5">
|
||||
// TECHNICAL ENGINE & TOOLCHAIN
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{current.stack.map((tech) => (
|
||||
<span
|
||||
key={tech}
|
||||
className="px-3 py-1 rounded-lg text-xs font-mono bg-white/5 border border-white/10 text-slate-300 hover:border-cyan-400/40 hover:text-white transition-colors"
|
||||
>
|
||||
{tech}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Active In-Forge Projects in this track */}
|
||||
<div className="lg:col-span-5 flex flex-col justify-between space-y-6 bg-black/40 p-6 sm:p-8 rounded-2xl border border-white/5">
|
||||
<div>
|
||||
<div className="flex items-center justify-between pb-4 border-b border-white/10">
|
||||
<span className="text-xs font-mono uppercase tracking-wider text-slate-300 font-semibold">
|
||||
IN THE FORGE (CURRENT IP)
|
||||
</span>
|
||||
<span className="w-2 h-2 rounded-full bg-cyan-400 animate-ping" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-4 mt-6">
|
||||
{current.currentInitiatives.map((item, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="glass-card p-4 rounded-xl border-white/5 hover:border-cyan-500/30 group"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<h4 className="text-sm font-bold text-white font-mono group-hover:text-cyan-300 transition-colors">
|
||||
{item.name}
|
||||
</h4>
|
||||
<span className="text-[10px] font-mono uppercase px-2 py-0.5 rounded bg-indigo-500/20 text-indigo-300 border border-indigo-400/30">
|
||||
{item.stage}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-400">
|
||||
{item.note}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Direct quick jump CTA */}
|
||||
<a
|
||||
href="#portfolio"
|
||||
className="w-full flex items-center justify-center gap-2 py-3 px-4 rounded-xl font-mono text-xs uppercase tracking-wider font-semibold text-white glass-panel hover:border-cyan-400/50 hover:bg-white/10 transition-all duration-200 group"
|
||||
>
|
||||
<span>View All Works in Showcase</span>
|
||||
<ArrowUpRight className="w-4 h-4 text-cyan-400 group-hover:translate-x-0.5 group-hover:-translate-y-0.5 transition-transform" />
|
||||
</a>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user