# Projekt Vinyl — Website Source Files

## 📁 Folder Structure

```
projektvinyl/
├── index.html              ← Main HTML file (open this in a browser)
│
├── css/
│   ├── variables.css       ← CSS custom properties (colors, fonts, spacing)
│   ├── base.css            ← Reset, global styles, buttons
│   ├── navbar.css          ← Navigation bar styles + scroll behavior
│   ├── hero.css            ← Hero section, quote form, partners strip
│   ├── sections.css        ← Services, Packages, Why Us, CTA banner
│   ├── cards.css           ← Service card component styles
│   ├── compare.css         ← Before/After slider styles
│   ├── testimonials.css    ← Testimonials carousel styles
│   ├── footer.css          ← Footer layout and links
│   └── animations.css      ← Keyframes, scroll progress bar, utilities
│
├── js/
│   ├── main.js             ← AOS init, scroll progress, form handler, smooth scroll
│   ├── navbar.js           ← Navbar scroll class, active link tracking
│   ├── compare.js          ← Before/After image slider (drag + touch + auto-demo)
│   └── testimonials.js     ← Testimonials carousel (swipe + keyboard + auto-play)
│
└── vendor/
    └── bootstrap/          ← Place downloaded Bootstrap files here for offline use
        ├── bootstrap.min.css
        └── bootstrap.bundle.min.js

```

## 🚀 Getting Started

1. Open `index.html` in any modern browser — works offline.
2. All dependencies (Bootstrap 5, Font Awesome 6, AOS, Google Fonts) load from CDN.
   - For full offline use, download Bootstrap from https://getbootstrap.com/
     and place files in `vendor/bootstrap/`, then update the CDN links in `index.html`.

## 🎨 Color Palette

| Token             | Value     | Use                          |
|-------------------|-----------|------------------------------|
| `--pv-dark`       | `#1a1c22` | Page background              |
| `--pv-dark-2`     | `#22252e` | Alternate section background |
| `--pv-card-bg`    | `#252830` | Card backgrounds             |
| `--pv-blue`       | `#4A7CF6` | Primary accent / CTA buttons |
| `--pv-text`       | `#e8eaf0` | Body text                    |
| `--pv-text-muted` | `#8b919e` | Secondary text               |
| `--pv-gold`       | `#f5a623` | Star ratings                 |

## 🔧 Customization

- **Colors**: Edit `css/variables.css` — all values cascade automatically.
- **Content**: All text, service descriptions, and pricing are in `index.html`.
- **Logo**: Replace the inline SVG in `index.html` with your actual logo image tag.
- **Images**: Add real car photos to `assets/img/` and update `compare.css` background-image URLs.

## 📦 Dependencies (CDN)

| Library       | Version | Purpose                     |
|---------------|---------|-----------------------------|
| Bootstrap     | 5.3.3   | Grid system, navbar, modal  |
| Font Awesome  | 6.5.0   | Icons                       |
| AOS           | 2.3.4   | Scroll reveal animations    |
| Google Fonts  | —       | Rajdhani + Barlow typefaces |
