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(),
  ],
 })