Skip to main content
All frontend views in Tripfy Africa use Laravel Blade. The Adventra theme organizes them into layouts, partials, and page-specific views under resources/views/themes/adventra/.

​
Directory structure

resources/views/themes/adventra/
├── layouts/
│   ├── app.blade.php              # Main public layout
│   └── user.blade.php             # Authenticated user dashboard layout
├── partials/
│   ├── header.blade.php           # Navigation header
│   ├── footer.blade.php           # Footer
│   ├── pwa.blade.php              # PWA install prompt
│   ├── cookie.blade.php           # Cookie consent banner
│   ├── preloader.blade.php        # Page loading spinner
│   ├── fixed_area.blade.php       # Floating UI (back-to-top, chat button)
│   ├── pagination.blade.php       # Shared pagination partial
│   └── user_dashboard_header.blade.php  # Dashboard top bar
├── frontend/
│   ├── package/
│   │   ├── list.blade.php         # Package listing grid
│   │   ├── listTwo.blade.php      # Alternate package list layout
│   │   ├── listThree.blade.php    # Third package list variant
│   │   ├── details.blade.php      # Package detail page
│   │   └── author.blade.php      # Guide profile page
│   ├── checkout/
│   │   ├── userInfo.blade.php     # Step 1 — traveler details
│   │   ├── travelerInfo.blade.php # Step 2 — traveler information
│   │   ├── plan_payment.blade.php # Step 3 — payment selection
│   │   └── checkout_form.blade.php # Checkout wrapper
│   ├── destinations/              # Destination listing and detail
│   └── blogs/                     # Blog listing and detail
├── auth/                          # Login, register, forgot password
├── user/                          # User dashboard pages
└── sections/                      # Reusable homepage sections
Admin views are separate, under resources/views/admin/.

​
Key layout files

​
app.blade.php — public layout

All public-facing pages extend this layout. It loads the dynamic color CSS, tripfy.css, and tripfy.js. It sets data-theme on <html> from the authenticated user’s preference, or defaults to light: 
@extends('themes.adventra.layouts.app')

@section('content')
  <!-- your page content here -->
@endsection

@push('scripts')
  <script>/* page-specific JS */</script>
@endpush
The layout exposes two extension points:
PointUsage
@yield('content')Main page content
@stack('scripts')Page-specific JavaScript

​
user.blade.php — user dashboard

Authenticated dashboard pages extend this layout instead. It includes the sidebar, the dashboard header partial (user_dashboard_header.blade.php), and also loads tripfy.css and tripfy.js with Tripfy branding. 
@extends('themes.adventra.layouts.user')

@section('content')
  <!-- dashboard content -->
@endsection

​
Admin layout

Admin pages use resources/views/admin/layouts/app.blade.php, which is a separate layout that loads admin/css/tripfy-admin.css for the admin-specific branding. It uses the same dynamic-colors.css so admin brand colors stay consistent with the frontend.

​
Partials

​
Header (partials/header.blade.php)

The header includes the navigation bar, the user dropdown (when authenticated), and the theme toggle button. It reads the active menu items from getHeaderMenuData() and renders them dynamically: 
<nav class="navbar navbar-expand-lg">
  <div class="container">
    <a class="navbar-brand" href="{{ url('/') }}">
      <img src="{{ asset('images/logo.png') }}" alt="{{ basicControl('site_title') }}">
    </a>

    <ul class="navbar-nav me-auto">
      @foreach(getHeaderMenuData() as $menu)
        <li class="nav-item">
          <a class="nav-link" href="{{ $menu['url'] }}">{{ $menu['name'] }}</a>
        </li>
      @endforeach
    </ul>

    @auth
      <button class="tf-theme-toggle btn btn-outline-light" type="button"
              aria-label="Toggle theme">
        <i class="fas fa-{{ auth()->user()->theme_mode === 'dark' ? 'sun' : 'moon' }}"></i>
      </button>
    @endauth
  </div>
</nav>
The .tf-theme-toggle class is automatically detected by tripfy.js and wired to the theme toggle function. Renders footer navigation links, social icons, and the copyright line. Content is managed through Admin → Manage Content → Footer.

​
PWA popup (partials/pwa.blade.php)

Renders the “Add to Home Screen” install prompt and registers the service worker. The popup is branded as Tripfy Africa and appears after a configurable delay.

​
Frontend page components

​
Package listing (frontend/package/list.blade.php)

The primary package listing page renders a card grid. Controllers pass an $packages paginated collection that the view iterates: 
@foreach($packages as $package)
  <div class="package-card tf-reveal">
    <div class="package-image">
      <img src="{{ getFile($package->thumbnail) }}" alt="{{ $package->title }}" loading="lazy">
      @if($package->is_featured)
        <span class="featured-badge"><i class="fas fa-star"></i> Featured</span>
      @endif
    </div>
    <div class="package-content">
      <h3 class="package-title">
        <a href="{{ route('package.show', $package->slug) }}">{{ $package->title }}</a>
      </h3>
      <div class="package-meta">
        <span class="price">
          @if($package->discount_price)
            <s>${{ number_format($package->price, 2) }}</s>
            ${{ number_format($package->discount_price, 2) }}
          @else
            ${{ number_format($package->price, 2) }}
          @endif
        </span>
        <span class="duration"><i class="fas fa-clock"></i> {{ $package->duration }}h</span>
      </div>
    </div>
  </div>
@endforeach

{{ $packages->links('themes.adventra.partials.pagination') }}
The .tf-reveal class enables scroll-reveal animation via tripfy.js.

​
Checkout flow (frontend/checkout/)

The checkout is a multi-step form managed by tripfy.js’s goToStep(n) function. The steps are:
1

Traveler details

userInfo.blade.php — collects the lead traveler’s contact information.
2

Traveler information

travelerInfo.blade.php — collects details for each traveler in the booking.
3

Payment selection

plan_payment.blade.php — displays configured payment gateways. Each gateway option is a .gateway-option element wired by tripfy.js to select the underlying radio input.

​
Package detail (frontend/package/details.blade.php)

Shows the full package description, photo gallery, itinerary, reviews, and a booking sidebar. The photo gallery uses tripfy.js’s image zoom: clicking any .open-modal[data-image] element opens a full-screen overlay.

​
Passing data from controllers to views

Controllers pass data to views using a $data array or compact. The view receives these as named variables: 
// Example controller method
public function show($slug)
{
    $data['package']          = Package::where('slug', $slug)->firstOrFail();
    $data['relatedPackages']  = Package::related($slug)->take(4)->get();
    $data['reviews']          = $data['package']->reviews()->paginate(10);

    return view('themes.adventra.frontend.package.details', $data);
}
In the view, use variables directly: 
<h1>{{ $package->title }}</h1>
<p>{{ $package->short_description }}</p>

@foreach($relatedPackages as $related)
  <!-- render related package card -->
@endforeach

{{ $reviews->links() }}

​
Reusable component pattern

The theme uses @component / @endcomponent for shared UI pieces. Components live under resources/views/themes/adventra/partials/components/. 
@component('themes.adventra.partials.components.cards.package-card', [
    'package'    => $package,
    'showPrice'  => true,
    'showRating' => true,
    'compact'    => false,
])
@endcomponent
The package-card component accepts compact mode for use in sidebars and related-package lists, and shows discount badges, featured badges, ratings, and a wishlist toggle automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us