first commit

2026-05-20 10:31:54 +07:00
commit b1c3ddffe0
7 changed files with 237 additions and 0 deletions
--- a/README.md
+++ b/README.md
@@ -0,0 +1,66 @@
+# SmartTiket - React + Tailwind CSS v4 + Google Fonts
+
+This is a clean, modern, and highly-optimized setup for **SmartTiket** using React 19, Vite 6, Tailwind CSS v4, and Google Fonts.
+
+---
+
+## 🛠️ Tech Stack & Configuration
+
+*   **React 19 & Vite 6**: Fast hot module replacement (HMR) and ultra-fast builds.
+*   **Tailwind CSS v4**: Built using the new `@tailwindcss/vite` plugin. Configuration is handled entirely inside the CSS file utilizing the `@theme` directive.
+*   **Google Fonts**:
+    *   **Outfit** (Headers & Display)
+    *   **Plus Jakarta Sans** (Body text)
+*   **Lucide React**: Lightweight, beautiful icon set pre-installed.
+
+---
+
+## 🚀 How to Run
+
+Follow these simple steps in your terminal to start the development server:
+
+### 1. Install Dependencies
+```bash
+npm install
+```
+
+### 2. Run the Development Server
+```bash
+npm run dev
+```
+
+### 3. Open in Browser
+Visit the local URL shown in your terminal (usually `http://localhost:5173`) to view the successful setup screen.
+
+---
+
+## 📂 Project Structure
+
+```text
+smart_tiket/
+├── src/
+│   ├── App.jsx         # Main React Component & Welcome Screen
+│   ├── index.css       # Tailwind CSS v4 imports + custom @theme configuration
+│   └── main.jsx        # React 19 mounting entry point
+├── index.html          # HTML Shell importing custom Google Fonts
+├── package.json        # Dependencies (React, Vite, Tailwind v4, Lucide)
+├── vite.config.js      # Vite 6 config with official React & Tailwind plugins
+└── README.md           # Documentation
+```
+
+---
+
+## 🎨 Customizing the Design System
+
+To add more custom fonts, colors, or transitions, open **`src/index.css`** and declare them inside the `@theme` block:
+
+```css
+@theme {
+  /* Extending font family */
+  --font-custom: 'My Font', sans-serif;
+  
+  /* Custom Tailwind v4 colors */
+  --color-gold: #fbbf24;
+}
+```
+You can now immediately use `font-custom` and `bg-gold` / `text-gold` inside any React component!
--- a/index.html
+++ b/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SmartTiket - Modern Ticket Platform</title>
+    
+    <!-- Google Fonts Preconnect -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    
+    <!-- Google Fonts Imports: Outfit & Plus Jakarta Sans -->
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
+  </head>
+  <body class="bg-slate-950 text-slate-100 antialiased font-sans">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "smart-tiket",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.475.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "tailwindcss": "^4.0.0",
+    "vite": "^6.1.0"
+  }
+}
--- a/src/App.jsx
+++ b/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>
+  )
+}
--- a/src/index.css
+++ b/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;
+}
--- a/src/main.jsx
+++ b/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>,
+)
--- a/vite.config.js
+++ b/vite.config.js
@@ -0,0 +1,11 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
+})