Skip to main content
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:
  1. Replace the Google Fonts URL with your chosen font
  2. Update tailwind.config.js:
fontFamily: {
    sans: ['YourFont', ...defaultTheme.fontFamily.sans],
},
  1. Run npm run build
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

FileURLDescription
resources/views/landing.blade.php/Homepage / landing page
resources/views/features.blade.php/featuresFeatures page
resources/views/pricing.blade.php/pricingPricing / plan listing
resources/views/support.blade.php/supportSupport landing page
resources/views/auth/login.blade.php/loginLogin page
resources/views/auth/register.blade.php/registerRegistration page
resources/views/dashboard.blade.php/dashboardCustomer dashboard
resources/views/pages/service/index.blade.php/serviceActive service page

​
Layout components

FilePurpose
resources/views/components/layouts/public.blade.phpOuter HTML shell, nav, footer
resources/views/components/footer.blade.phpSite footer
resources/views/components/sidebar.blade.phpAuthenticated user sidebar
resources/views/components/mobile-menu.blade.phpMobile 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.
FileEmail type
emails/service-activated.blade.phpService activation confirmation
emails/service-suspended.blade.phpSuspension notice
emails/service-reactivated.blade.phpReactivation confirmation
emails/service-cancelled.blade.phpCancellation confirmation
emails/service-expiration-reminder.blade.phpExpiry reminder
emails/payment/receipt.blade.phpPayment 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