first commit

src/App.jsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { CheckCircle2, Terminal, ArrowRight, Layers, Sparkles } from 'lucide-react'
+
+export default function App() {
+  const [count, setCount] = useState(0)
+
+  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" />
+
+      {/* 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</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, 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; Nesting Integration</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>
+    </div>
+  )
+}

src/index.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+@theme {
+  /* Set Up Custom Google Fonts */
+  --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-display: 'Outfit', ui-sans-serif, system-ui, -apple-system, sans-serif;
+
+  /* Custom Neon/Vibrant Gradients or Colors if needed later */
+  --color-brand-neon: #10B981;
+  --color-brand-electric: #6366F1;
+}
+
+/* Custom baseline styling if desired */
+html, body {
+  margin: 0;
+  padding: 0;
+  min-height: 100vh;
+}

src/main.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.jsx'
+import './index.css'
+
+createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+)