hero_banner.blade.php 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154
  1. {{--
  2. Blade-шаблон блока «Главный баннер».
  3. $data:
  4. eyebrow — надпись мелким шрифтом над заголовком
  5. line1/2/3 — три строки заголовка (line3 выделяется красным)
  6. subtext — подзаголовок
  7. btn1_text, btn1_url — основная кнопка
  8. btn2_text, btn2_url — вторичная кнопка
  9. image — путь к фоновому изображению (в storage)
  10. stats[] — массив {value, label} для блока статистики внизу
  11. show_quick_search — показывать карточку быстрого подбора (правая колонка grid)
  12. --}}
  13. @php
  14. $toUrl = fn (?string $p): string => $p ? (str_starts_with($p, 'http') ? $p : asset('storage/' . $p)) : '';
  15. $imgUrl = $toUrl($data['image'] ?? '');
  16. $stats = $data['stats'] ?? [];
  17. $showSearch = (bool) ($data['show_quick_search'] ?? false);
  18. // Данные для карточки быстрого подбора — марки из справочника и типы кузова
  19. $qsMakesSection = \App\Models\DictSection::where('code', 'makes')->first();
  20. $qsMakes = $qsMakesSection
  21. ? \App\Models\DictValue::where('section_id', $qsMakesSection->id)
  22. ->whereNull('parent_id')->orderBy('sort_order')->pluck('value')
  23. : collect();
  24. $qsBodyTypesSection = \App\Models\DictSection::where('code', 'body_types')->first();
  25. $qsBodyTypes = $qsBodyTypesSection
  26. ? \App\Models\DictValue::where('section_id', $qsBodyTypesSection->id)
  27. ->orderBy('sort_order')->pluck('value')
  28. : \App\Models\Car::where('status', 'active')
  29. ->whereNotNull('body_type')->where('body_type', '!=', '')
  30. ->select('body_type')->distinct()->orderBy('body_type')->pluck('body_type');
  31. @endphp
  32. <section class="hero">
  33. {{-- Фоновое изображение + оверлей --}}
  34. @if ($imgUrl)
  35. <div class="hero-media">
  36. <img src="{{ $imgUrl }}" alt="Баннер" loading="eager" fetchpriority="high">
  37. </div>
  38. <div class="hero-overlay"></div>
  39. @else
  40. <div style="position:absolute;inset:0;background:linear-gradient(100deg,rgba(20,20,20,.95) 0%,rgba(20,20,20,.7) 100%)"></div>
  41. @endif
  42. <div class="container">
  43. {{-- Grid: левая колонка — контент, правая — карточка подбора (скрывается <1024px) --}}
  44. <div class="hero-layout">
  45. {{-- Левая колонка: текст + кнопки + статистика (без класса — строго как в дизайне) --}}
  46. <div>
  47. @if ($data['eyebrow'] ?? '')
  48. <div class="hero-eyebrow">{{ $data['eyebrow'] }}</div>
  49. @endif
  50. <h1 class="hero-title">
  51. @if ($data['line1'] ?? '')
  52. <span class="ln"><span>{{ $data['line1'] }}</span></span>
  53. @endif
  54. @if ($data['line2'] ?? '')
  55. <span class="ln"><span><em>{{ $data['line2'] }}</em></span></span>
  56. @endif
  57. @if ($data['line3'] ?? '')
  58. <span class="ln"><span>{{ $data['line3'] }}</span></span>
  59. @endif
  60. </h1>
  61. @if ($data['subtext'] ?? '')
  62. <p class="hero-sub">{{ $data['subtext'] }}</p>
  63. @endif
  64. @if (($data['btn1_text'] ?? '') || ($data['btn2_text'] ?? ''))
  65. <div class="hero-btns">
  66. @if (($data['btn1_text'] ?? '') && ($data['btn1_url'] ?? ''))
  67. <a href="{{ $data['btn1_url'] }}" class="btn btn-primary btn-lg">{{ $data['btn1_text'] }}</a>
  68. @endif
  69. @if (($data['btn2_text'] ?? '') && ($data['btn2_url'] ?? ''))
  70. <a href="{{ $data['btn2_url'] }}" class="btn btn-outline-w btn-lg">{{ $data['btn2_text'] }}</a>
  71. @endif
  72. </div>
  73. @endif
  74. {{-- Статистика под кнопками (левая колонка) --}}
  75. @if (!empty($stats))
  76. <div class="hero-stats">
  77. @foreach ($stats as $stat)
  78. <div class="hstat">
  79. <div class="hstat-n">{{ $stat['value'] ?? '' }}@if(!empty($stat['suffix']))<em>{{ $stat['suffix'] }}</em>@endif</div>
  80. <div class="hstat-l">{{ $stat['label'] ?? '' }}</div>
  81. </div>
  82. @endforeach
  83. </div>
  84. @endif
  85. </div>
  86. {{-- Правая колонка: вертикальная карточка быстрого подбора --}}
  87. @if ($showSearch)
  88. <form action="{{ route('catalog') }}" method="GET" class="hero-search reveal">
  89. <div class="hs-title">Быстрый подбор</div>
  90. <div class="hs-field">
  91. <label>Марка</label>
  92. <select name="make">
  93. <option value="">Любая</option>
  94. @foreach ($qsMakes as $m)
  95. <option value="{{ $m }}">{{ $m }}</option>
  96. @endforeach
  97. </select>
  98. </div>
  99. <div class="hs-field">
  100. <label>Тип кузова</label>
  101. <select name="body_type">
  102. <option value="">Любой</option>
  103. @foreach ($qsBodyTypes as $bt)
  104. <option value="{{ $bt }}">{{ $bt }}</option>
  105. @endforeach
  106. </select>
  107. </div>
  108. <div class="hs-field">
  109. <label>Бюджет</label>
  110. <select name="price_range">
  111. <option value="">Любой</option>
  112. <option value="1500000">До 1 500 000 ₽</option>
  113. <option value="1500000-3000000">1.5 — 3 млн ₽</option>
  114. <option value="3000000-5000000">3 — 5 млн ₽</option>
  115. <option value="5000000-">Свыше 5 млн ₽</option>
  116. </select>
  117. </div>
  118. <div class="hs-field">
  119. <label>Состояние</label>
  120. <select name="condition">
  121. <option value="">Любое</option>
  122. <option value="new">Новый</option>
  123. <option value="used">С пробегом</option>
  124. </select>
  125. </div>
  126. <button type="submit" class="btn btn-red hs-btn-full">
  127. Найти автомобиль &rarr;
  128. </button>
  129. </form>
  130. @endif
  131. </div>{{-- /hero-layout --}}
  132. </div>
  133. </section>