> ## Documentation Index
> Fetch the complete documentation index at: https://docs.startmyvpn.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Theme & Design

> Customize colors, fonts, and the visual identity of your StartMyVPN site.

The front-end uses **Tailwind CSS v4** with a custom theme defined in `resources/css/landing.css`. Colors are configured as CSS custom properties in the `@theme` block, and the Tailwind config at `tailwind.config.js` extends these with additional color scales, shadows, and animations.

***

## Brand colors

### Primary color palette

The primary color palette controls navigation links, buttons, highlights, and the hero gradient. It is defined in `resources/css/landing.css`:

```css theme={null}
/* resources/css/landing.css */
@theme {
    --color-primary-50:  #f0f5fa;
    --color-primary-100: #e1ecf4;
    --color-primary-200: #c5dbe9;
    --color-primary-300: #9bc0d9;
    --color-primary-400: #6a9fc3;
    --color-primary-500: #4882ab;
    --color-primary-600: #34688f;   /* active nav links, CTA outlines */
    --color-primary-700: #2a5373;
    --color-primary-800: #254660;
    --color-primary-900: #102B3F;   /* main dark brand color */
    --color-primary-950: #162838;   /* hero background dark end */
}
```

To change the brand color, replace these hex values with your palette. Use a tool like [uicolors.app](https://uicolors.app) to generate a full 50–950 scale from a single base color.

### Secondary / accent colors

The secondary palette is used for gradient accents and CTA buttons. Defined in `tailwind.config.js`:

```js theme={null}
// tailwind.config.js → theme.extend.colors
secondary: {
    400: '#c084fc',   // gradient accent text
    500: '#a855f7',
    600: '#9333ea',   // secondary CTA buttons
    700: '#7e22ce',
    ...
},
```

Change these values to match your brand's accent color.

### Applying changes

After editing colors, rebuild the front-end assets:

```bash theme={null}
npm run build
# or in watch mode during development:
npm run dev
```

***

## Fonts

The application uses **Inter** loaded from Google Fonts. The `<link>` tag is in `resources/views/components/layouts/public.blade.php`:

```html theme={null}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

To change the font:

1. Replace the Google Fonts URL with your chosen font
2. Update `tailwind.config.js`:

```js theme={null}
fontFamily: {
    sans: ['YourFont', ...defaultTheme.fontFamily.sans],
},
```

3. Run `npm run build`

***

## Logo

The site logo in the navigation bar is rendered in `resources/views/components/layouts/public.blade.php`. By default it shows a styled letter "V" with the app name:

```html theme={null}
<div class="h-10 w-10 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold text-xl">
    V
</div>
<span class="text-xl font-bold tracking-tight text-gray-900">{{ __('VPN App') }}</span>
```

**To use an image logo**, replace the `<div>` and `<span>` block with:

```html theme={null}
<img src="{{ asset('images/logo.png') }}" alt="{{ config('app.name') }}" class="h-10 w-auto">
```

Place your logo file in `public/images/logo.png`.

**App name** in the nav is hardcoded as `'VPN App'` — update the string directly, or use a translation key pointing to your app name.

***

## Public page templates

All customer-facing pages are Blade templates in `resources/views/`. The layout wrapper is `resources/views/components/layouts/public.blade.php`.

### Pages you can edit

| File                                            | URL          | Description             |
| ----------------------------------------------- | ------------ | ----------------------- |
| `resources/views/landing.blade.php`             | `/`          | Homepage / landing page |
| `resources/views/features.blade.php`            | `/features`  | Features page           |
| `resources/views/pricing.blade.php`             | `/pricing`   | Pricing / plan listing  |
| `resources/views/support.blade.php`             | `/support`   | Support landing page    |
| `resources/views/auth/login.blade.php`          | `/login`     | Login page              |
| `resources/views/auth/register.blade.php`       | `/register`  | Registration page       |
| `resources/views/dashboard.blade.php`           | `/dashboard` | Customer dashboard      |
| `resources/views/pages/service/index.blade.php` | `/service`   | Active service page     |

### Layout components

| File                                                  | Purpose                       |
| ----------------------------------------------------- | ----------------------------- |
| `resources/views/components/layouts/public.blade.php` | Outer HTML shell, nav, footer |
| `resources/views/components/footer.blade.php`         | Site footer                   |
| `resources/views/components/sidebar.blade.php`        | Authenticated user sidebar    |
| `resources/views/components/mobile-menu.blade.php`    | Mobile nav menu               |

***

## Landing page sections

`resources/views/landing.blade.php` is divided into clear sections you can edit independently:

### Hero section

```blade theme={null}
<!-- resources/views/landing.blade.php — Hero section -->
<h1>
    <span class="block">{{ __('Your Privacy,') }}</span>
    <span class="block text-secondary-400">{{ __('Our Priority') }}</span>
</h1>
<p>{{ __('Secure, fast, and anonymous VPN...') }}</p>
```

Change the headline and subheading text by editing the strings directly, or update the translation file (`lang/en.json`) if you have localization enabled.

### Stats bar

The four stats (50+ Countries, 1000+ Servers, 10Gbps, 24/7 Support) are hardcoded HTML below the hero:

```html theme={null}
<div class="text-4xl font-bold text-primary-900">50+</div>
<div class="text-sm text-gray-600 mt-2 font-medium">{{ __('Countries') }}</div>
```

Update the numbers and labels to match your actual network.

### Feature cards

Six feature cards are in the **Features Section**. Each card follows this structure:

```html theme={null}
<div class="bg-white p-8 rounded-xl ...">
    <!-- Icon div -->
    <h3 class="text-lg font-semibold">{{ __('Military-Grade Encryption') }}</h3>
    <p class="mt-3 text-base text-gray-600">{{ __('AES-256 bit encryption...') }}</p>
</div>
```

Edit the `<h3>` and `<p>` text, or add/remove cards from the grid.

### App download buttons

The hero and download section contain placeholder `href="#"` links for App Store and Google Play:

```html theme={null}
<a href="#" ...>Download for Android</a>
<a href="#" ...>Download for iOS</a>
```

Replace `#` with your actual app store URLs.

### CTA section

The bottom call-to-action contains the trial and money-back guarantee copy:

```html theme={null}
<span class="block">{{ __('Ready to protect your privacy?') }}</span>
<span class="block mt-2 text-secondary-400">{{ __('Start your 7-day free trial today.') }}</span>
<p>{{ __('No credit card required. Cancel anytime. 30-day money-back guarantee.') }}</p>
```

***

## Email templates

Transactional email templates are in `resources/views/emails/`. Each email has an HTML and plain-text variant.

| File                                           | Email type                      |
| ---------------------------------------------- | ------------------------------- |
| `emails/service-activated.blade.php`           | Service activation confirmation |
| `emails/service-suspended.blade.php`           | Suspension notice               |
| `emails/service-reactivated.blade.php`         | Reactivation confirmation       |
| `emails/service-cancelled.blade.php`           | Cancellation confirmation       |
| `emails/service-expiration-reminder.blade.php` | Expiry reminder                 |
| `emails/payment/receipt.blade.php`             | Payment receipt                 |

The email layout (header/footer chrome) is in `resources/views/vendor/mail/html/layout.blade.php`. To customize the mail frame (colors, logo, footer text):

```bash theme={null}
# Publish the mail layout (if not already done)
php artisan vendor:publish --tag=laravel-mail
```

Then edit `resources/views/vendor/mail/html/layout.blade.php`.

***

## Admin panel styling

The admin panel uses Bootstrap 4 via the **Stisla** admin template (`resources/stisla`). To customize admin panel styles, edit:

```
resources/stisla/css/   — override or extend Stisla CSS
resources/stisla/js/    — override or extend Stisla JS
```

The admin layout shell is `resources/views/layouts/admin.blade.php`.

***

## Rebuild after changes

Any edit to a `.blade.php`, `.css`, or `tailwind.config.js` file that affects styling requires a rebuild:

```bash theme={null}
# One-time production build
npm run build

# Auto-rebuild on save (development)
npm run dev
```

After a production build, clear the Laravel view cache:

```bash theme={null}
php artisan view:clear
php artisan view:cache
```