Theme & Design - StartMyVPN

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:

/* 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 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:

// 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:

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:

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

To change the font:

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

fontFamily: {
    sans: ['YourFont', ...defaultTheme.fontFamily.sans],
},

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:

<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:

<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

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

<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:

<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:

<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:

<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):

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

# One-time production build
npm run build

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

After a production build, clear the Laravel view cache:

php artisan view:clear
php artisan view:cache

​Brand colors

​Primary color palette

​Secondary / accent colors

​Applying changes

​Fonts

​Logo

​Public page templates

​Pages you can edit

​Layout components

​Landing page sections

​Hero section

​Stats bar

​Feature cards

​App download buttons

​CTA section

​Email templates

​Admin panel styling

​Rebuild after changes