commit b1c3ddffe052cedb4bbfd3269c59163d978d9a14 Author: Kevin Satria D <130447401+kevinnsd1@users.noreply.github.com> Date: Wed May 20 10:31:54 2026 +0700 first commit diff --git a/README.md b/README.md new file mode 100644 index 0000000..d1d5bb8 --- /dev/null +++ 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! diff --git a/index.html b/index.html new file mode 100644 index 0000000..96bcdf2 --- /dev/null +++ b/index.html @@ -0,0 +1,19 @@ + + + + + + SmartTiket - Modern Ticket Platform + + + + + + + + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..3c9d91a --- /dev/null +++ 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" + } +} diff --git a/src/App.jsx b/src/App.jsx new file mode 100644 index 0000000..4b7f483 --- /dev/null +++ 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 ( +
+ {/* Background Glowing Effects */} +
+
+ + {/* Main Glassmorphic Container */} +
+ + {/* Status Badge */} +
+ + SETUP SUCCESSFUL +
+ + {/* Heading using Google Font 'Outfit' */} +

+ SmartTiket +

+ + {/* Body using Google Font 'Plus Jakarta Sans' */} +

+ Welcome to your new development environment. React 19, Tailwind CSS v4, and Google Fonts are successfully configured and ready. +

+ + {/* Feature Checkmarks */} +
+
+
+ +
+ React 19 & Vite 6 Setup +
+ +
+
+ +
+ Tailwind CSS v4 & Nesting Integration +
+ +
+
+ +
+ Outfit & Plus Jakarta Sans Google Fonts +
+
+ + {/* Interactive React Verification State */} +
+
+

Test React State

+

Clicked {count} times

+
+ +
+ + {/* Console / Start Instructions */} +
+ +
+

# Next steps to start coding:

+

1. Open workspace directory

+

2. Run npm install

+

3. Run npm run dev

+
+
+ +
+ + {/* Footer */} +
+ © {new Date().getFullYear()} SmartTiket Setup • Built with Google DeepMind Antigravity +
+
+ ) +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..59468d0 --- /dev/null +++ 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; +} diff --git a/src/main.jsx b/src/main.jsx new file mode 100644 index 0000000..7368cca --- /dev/null +++ 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( + + + , +) diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..3d15f68 --- /dev/null +++ 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(), + ], +})