# 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!