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,180 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { motion } from "framer-motion";
|
||||
import { ArrowRight, Terminal, Sparkles, Orbit } from "lucide-react";
|
||||
|
||||
// Dynamically import 3D Hero Solar System with sleek animated fallback
|
||||
const HeroSolarSystem = dynamic(
|
||||
() => import("../canvas/HeroSolarSystem"),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="relative w-full h-[400px] sm:h-[480px] lg:h-[540px] flex items-center justify-center">
|
||||
{/* Animated CSS Solar System Loading State */}
|
||||
<div className="relative w-72 h-72 sm:w-96 sm:h-96 flex items-center justify-center">
|
||||
{/* Central Sun Glow */}
|
||||
<div className="w-16 h-16 rounded-full bg-gradient-to-tr from-cyan-400 to-indigo-500 shadow-[0_0_50px_#38bdf8] animate-pulse" />
|
||||
|
||||
{/* Orbit Track 1 */}
|
||||
<div className="absolute w-36 h-36 rounded-full border border-cyan-500/30 animate-[spin_6s_linear_infinite]">
|
||||
<div className="w-3 h-3 rounded-full bg-amber-400 shadow-[0_0_10px_#fbbf24] -translate-x-1.5" />
|
||||
</div>
|
||||
|
||||
{/* Orbit Track 2 */}
|
||||
<div className="absolute w-56 h-56 rounded-full border border-indigo-500/30 animate-[spin_10s_linear_infinite]">
|
||||
<div className="w-4 h-4 rounded-full bg-cyan-400 shadow-[0_0_12px_#38bdf8] -translate-x-2" />
|
||||
</div>
|
||||
|
||||
{/* Orbit Track 3 */}
|
||||
<div className="absolute w-80 h-80 rounded-full border border-purple-500/25 animate-[spin_16s_linear_infinite]">
|
||||
<div className="w-5 h-5 rounded-full bg-purple-400 shadow-[0_0_15px_#c084fc] -translate-x-2.5" />
|
||||
</div>
|
||||
|
||||
<div className="absolute bottom-4 px-3 py-1 rounded-full glass-panel text-[11px] font-mono text-cyan-300">
|
||||
CONNECTING STELLAR TELEMETRY...
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
export default function Hero() {
|
||||
const telemetryStats = [
|
||||
{ label: "IP Ownership", value: "100%", subtext: "In-House Creations" },
|
||||
{ label: "Product Focus", value: "Pure IP", subtext: "Dedicated In-House Pipeline" },
|
||||
{ label: "Active Tracks", value: "3", subtext: "Software, Games, Lab" },
|
||||
{ label: "Studio State", value: "Autonomous", subtext: "Self-Sovereign Roadmap" },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="relative min-h-[92vh] pt-28 sm:pt-32 pb-20 flex flex-col justify-center overflow-hidden">
|
||||
{/* Decorative cosmic glow halos */}
|
||||
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-gradient-to-tr from-indigo-500/10 via-purple-500/10 to-cyan-500/10 blur-[130px] pointer-events-none" />
|
||||
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-8 items-start">
|
||||
|
||||
{/* Left Column: Brand Statement & Typography */}
|
||||
<div className="lg:col-span-6 space-y-6 text-center lg:text-left">
|
||||
|
||||
{/* Main Headline */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7 }}
|
||||
className="space-y-3"
|
||||
>
|
||||
<h1 className="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-black tracking-tight leading-[1.08]">
|
||||
Synthesizing <br />
|
||||
<span className="text-gradient-cyan">Original Software</span> <br />
|
||||
<span className="text-white">& Interactive Worlds.</span>
|
||||
</h1>
|
||||
<p className="text-base sm:text-lg lg:text-xl text-slate-400 font-normal max-w-2xl mx-auto lg:mx-0 leading-relaxed pt-2">
|
||||
Aghatis Studio operates exclusively as an autonomous product laboratory.
|
||||
We engineer bespoke software tools, forge atmospheric indie games,
|
||||
and explore experimental computational frontiers with relentless dedication to craft.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Core Capability Chips */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.15 }}
|
||||
className="flex flex-wrap items-center justify-center lg:justify-start gap-2 pt-1"
|
||||
>
|
||||
{[
|
||||
"GPU Shaders & WebGPU",
|
||||
"Kinetic Orbital Physics",
|
||||
"Local-First Architectures",
|
||||
"Procedural Audio Engines",
|
||||
].map((chip) => (
|
||||
<span
|
||||
key={chip}
|
||||
className="px-2.5 py-1 rounded-md text-[11px] font-mono bg-white/5 border border-white/10 text-slate-300 hover:border-cyan-400/40 hover:text-white transition-colors"
|
||||
>
|
||||
{chip}
|
||||
</span>
|
||||
))}
|
||||
</motion.div>
|
||||
|
||||
{/* Call to Actions */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.7, delay: 0.2 }}
|
||||
className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4 pt-2"
|
||||
>
|
||||
<a
|
||||
href="#portfolio"
|
||||
className="w-full sm:w-auto px-7 py-3.5 rounded-xl font-mono text-xs uppercase tracking-widest font-bold text-slate-950 bg-gradient-to-r from-cyan-400 via-sky-300 to-indigo-300 hover:opacity-95 shadow-[0_0_30px_rgba(56,189,248,0.4)] transition-all duration-300 flex items-center justify-center gap-2 group hover:scale-[1.02] active:scale-95"
|
||||
>
|
||||
<Sparkles className="w-4 h-4 text-slate-950" />
|
||||
<span>Explore Fleet</span>
|
||||
<ArrowRight className="w-4 h-4 text-slate-950 group-hover:translate-x-1 transition-transform" />
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#creed"
|
||||
className="w-full sm:w-auto px-6 py-3.5 rounded-xl font-mono text-xs uppercase tracking-widest font-semibold text-slate-300 hover:text-white glass-panel hover:border-indigo-500/50 transition-all duration-300 flex items-center justify-center gap-2 group"
|
||||
>
|
||||
<Terminal className="w-4 h-4 text-indigo-400" />
|
||||
<span>The Studio Creed</span>
|
||||
</a>
|
||||
</motion.div>
|
||||
|
||||
{/* Studio Focus Badge */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
transition={{ duration: 0.8, delay: 0.3 }}
|
||||
className="pt-2 text-xs font-mono text-slate-400 flex items-center justify-center lg:justify-start gap-2"
|
||||
>
|
||||
<Orbit className="w-3.5 h-3.5 text-indigo-400" />
|
||||
<span>Dedicated strictly to researching, building, and publishing our own product ecosystem.</span>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Right Column: 3D Solar System Visualization (Full Frustum Uncropped, Raised to Align with Headline) */}
|
||||
<div className="lg:col-span-6 relative flex items-center justify-center lg:-mt-10 xl:-mt-14">
|
||||
<HeroSolarSystem />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{/* Telemetry Stats Bar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.8, delay: 0.4 }}
|
||||
className="mt-16 sm:mt-20 pt-8 border-t border-white/10"
|
||||
>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 sm:gap-8">
|
||||
{telemetryStats.map((stat, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="glass-card p-5 rounded-2xl relative overflow-hidden group hover:border-cyan-500/30"
|
||||
>
|
||||
<div className="absolute top-0 left-0 w-12 h-1 bg-gradient-to-r from-cyan-400 to-indigo-500 group-hover:w-full transition-all duration-500" />
|
||||
<div className="text-2xl sm:text-3xl font-black font-mono tracking-tight text-white group-hover:text-cyan-300 transition-colors">
|
||||
{stat.value}
|
||||
</div>
|
||||
<div className="text-xs font-mono uppercase tracking-wider text-slate-300 mt-1">
|
||||
{stat.label}
|
||||
</div>
|
||||
<div className="text-[11px] font-mono text-slate-400 mt-1">
|
||||
{stat.subtext}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user