kevinsatriadarmawan/Frontend-Smart_Ticketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: initialize frontend application with landing page components and event listings

Browse Source
This commit is contained in:
Kevin Satria D
2026-05-20 11:16:45 +07:00
parent a1719a1871
commit a8dfc3d294
7 changed files with 472 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/App.tsx
View File

@@ -1,89 +1,21 @@
import { useState } from 'react'
import { CheckCircle2, Terminal, Layers, Sparkles } from 'lucide-react'
export default function App() {
const [count, setCount] = useState<number>(0)
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import EventSection from './components/EventSection';
import Footer from './components/Footer';
function App() {
return (
<div className="min-h-screen bg-slate-950 flex flex-col items-center justify-center relative overflow-hidden px-4 selection:bg-indigo-500 selection:text-white">
{/* Background Glowing Effects */}
<div className="absolute top-1/4 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-indigo-500/10 rounded-full blur-[120px] pointer-events-none" />
<div className="absolute bottom-1/4 left-1/3 w-[300px] h-[300px] bg-emerald-500/10 rounded-full blur-[100px] pointer-events-none" />
<div className="min-h-screen bg-[#0a0c10] text-slate-300 font-sans selection:bg-purple-500/30 selection:text-white flex flex-col">
<Navbar />
<main className="flex-1 flex flex-col">
<Hero />
<EventSection />
</main>
{/* Main Glassmorphic Container */}
<div className="relative max-w-lg w-full bg-slate-900/60 backdrop-blur-xl border border-slate-800/80 rounded-3xl p-8 sm:p-10 shadow-2xl transition-all duration-300 hover:border-slate-700/60">
{/* Status Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-xs font-semibold tracking-wide mb-8 animate-pulse">
<CheckCircle2 className="w-3.5 h-3.5" />
<span>SETUP SUCCESSFUL (TSX)</span>
</div>
{/* Heading using Google Font 'Outfit' */}
<h1 className="font-display text-4xl sm:text-5xl font-bold tracking-tight text-white leading-tight mb-4">
Smart<span className="bg-gradient-to-r from-indigo-400 via-purple-400 to-emerald-400 bg-clip-text text-transparent">Tiket</span>
</h1>
{/* Body using Google Font 'Plus Jakarta Sans' */}
<p className="font-sans text-slate-400 text-base sm:text-lg leading-relaxed mb-8">
Welcome to your new development environment. React 19, Tailwind CSS v4, TypeScript, and Google Fonts are successfully configured and ready.
</p>
{/* Feature Checkmarks */}
<div className="space-y-4 mb-8">
<div className="flex items-center gap-3 text-slate-300">
<div className="w-5 h-5 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
<Sparkles className="w-3.5 h-3.5 text-indigo-400" />
</div>
<span className="font-sans text-sm font-medium">React 19 &amp; Vite 6 Setup</span>
</div>
<div className="flex items-center gap-3 text-slate-300">
<div className="w-5 h-5 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
<Layers className="w-3.5 h-3.5 text-indigo-400" />
</div>
<span className="font-sans text-sm font-medium">Tailwind CSS v4 &amp; TypeScript</span>
</div>
<div className="flex items-center gap-3 text-slate-300">
<div className="w-5 h-5 rounded-md bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center">
<CheckCircle2 className="w-3.5 h-3.5 text-indigo-400" />
</div>
<span className="font-sans text-sm font-medium">Outfit &amp; Plus Jakarta Sans Google Fonts</span>
</div>
</div>
{/* Interactive React Verification State */}
<div className="p-4 rounded-2xl bg-slate-950/60 border border-slate-800/80 flex items-center justify-between gap-4 mb-8">
<div className="text-left">
<p className="font-sans text-xs text-slate-500 uppercase tracking-wider font-semibold">Test React State</p>
<p className="font-display text-lg font-bold text-white mt-0.5">Clicked {count} times</p>
</div>
<button
onClick={() => setCount(c => c + 1)}
className="px-4 py-2 bg-indigo-600 hover:bg-indigo-500 active:scale-95 text-white text-sm font-semibold rounded-xl transition-all duration-200 cursor-pointer shadow-lg shadow-indigo-600/20"
>
Increment
</button>
</div>
{/* Console / Start Instructions */}
<div className="bg-slate-950 border border-slate-900 rounded-2xl p-4 font-mono text-xs text-slate-400 flex items-start gap-3">
<Terminal className="w-4 h-4 text-emerald-400 shrink-0 mt-0.5" />
<div className="text-left space-y-1">
<p className="text-slate-500"># Next steps to start coding:</p>
<p>1. Open workspace directory</p>
<p>2. Run <span className="text-indigo-400">npm install</span></p>
<p>3. Run <span className="text-emerald-400">npm run dev</span></p>
</div>
</div>
</div>
{/* Footer */}
<footer className="mt-12 text-slate-600 font-sans text-xs tracking-wide">
&copy; {new Date().getFullYear()} SmartTiket Setup &bull; Built with Google DeepMind Antigravity
</footer>
<Footer />
</div>
)
);
}
export default App;