first commit

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!