Commit 47ed3ea5 by Hussain Mohamed

products

parent b919c4db
......@@ -11,6 +11,9 @@
use App\Models\LanguageModel;
use App\Models\ManageRequestModel;
use App\Models\PagesModel;
use App\Models\ProductBrandModel;
use App\Models\ProductIndustryModel;
use App\Models\ProductTypeModel;
use App\Models\Service;
use App\Models\ServiceTypeModel;
use Illuminate\Http\Request;
......@@ -34,7 +37,13 @@ public function contact()
return view('contact');
}
public function products()
{
$productType = ProductTypeModel::Where('status',1)->get();
$brandData = ProductBrandModel::Where('status',1)->get();
$industryData = ProductIndustryModel::Where('status',1)->get();
return view('products',compact('productType','brandData','industryData'));
}
public function career()
{
......
......@@ -859,7 +859,7 @@ section,
}
#hero{
height: 350px !important;
height: 413px !important;
}
.hero .container {
position: relative;
......@@ -1891,20 +1891,28 @@ section,
border-radius: 50%;
background: var(--accent-color);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.testimonials .swiper-button-prev:after,
.testimonials .swiper-button-next:after {
font-size: 1.25rem;
color: var(--contrast-color);
/* Swiper default arrows */
.testimonials .swiper-button-prev::after,
.testimonials .swiper-button-next::after {
font-size: 18px;
font-weight: bold;
color: #fff;
}
/* Optional hover */
.testimonials .swiper-button-prev:hover,
.testimonials .swiper-button-next:hover {
transform: translateY(-2px);
background: #000;
}
@media (max-width: 991.98px) {
.testimonials .testimonial-slide {
padding: 2.5rem 2rem;
......@@ -5116,13 +5124,13 @@ section,
background: linear-gradient(120deg, #efe2c6, #f6ecd7);
overflow: hidden;
border-radius: 8px;
width: 92%;
width: 91%;
left: 7px;
}
.hero-slider,
.hero-slider .swiper-slide {
min-height: 420px;
min-height: 330px;
}
.hero-slide-bg {
......@@ -5209,3 +5217,61 @@ section,
.ft{
color:#b9a16b;
}
.filter-accordion .accordion-item {
border: 0;
border-bottom: 1px solid #eee;
}
.filter-accordion .accordion-button {
padding: 15px 10px;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background: none;
box-shadow: none;
}
.filter-accordion .accordion-button::after {
background-image: none;
content: '+';
font-size: 18px;
transform: none;
}
.filter-accordion .accordion-button:not(.collapsed)::after {
content: '−';
}
.filter-accordion .accordion-body {
padding: 10px;
font-size: 14px;
}
.filter-accordion .accordion-body div {
padding: 6px 0;
cursor: pointer;
}
.filter-accordion .accordion-body div {
padding: 6px 0;
cursor: pointer;
color: #333;
}
.filter-accordion .accordion-body div.active {
font-weight: 600;
color: #fff;
background: #024959;
text-align: center;
border-radius: 12px;
}
/* #brand .accordion-body {
max-height: 150px;
overflow-y: auto;
} */
......@@ -254,16 +254,26 @@
.swiper-button-next,
.swiper-button-prev {
position: absolute;
top: var(--swiper-navigation-top-offset, 50%);
width: calc(var(--swiper-navigation-size) / 44 * 27);
height: var(--swiper-navigation-size);
margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
top: 50%;
margin-top: 0;
transform: translateY(-50%);
/* your style */
width: 35px;
height: 35px;
border-radius: 50%;
background: #f8f8f8;
transition: all 0.3s ease;
color: #000000;
font-weight:bold;
z-index: 10;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--swiper-navigation-color, var(--swiper-theme-color));
opacity:0.36;
}
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
......@@ -308,7 +318,7 @@
.swiper-button-next:after,
.swiper-button-prev:after {
font-family: swiper-icons;
font-size: var(--swiper-navigation-size);
font-size: 13px;
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
......@@ -345,9 +355,9 @@
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
bottom: var(--swiper-pagination-bottom, 8px);
bottom: var(--swiper-pagination-bottom, 35px);
top: var(--swiper-pagination-top, auto);
left: -33rem;
left: -32rem;
width: 100%;
}
.swiper-pagination-bullets-dynamic {
......
......@@ -16,7 +16,7 @@
const selectBody = document.querySelector('body');
const selectHeader = document.querySelector('#header');
if (!selectHeader.classList.contains('scroll-up-sticky') && !selectHeader.classList.contains('sticky-top') && !selectHeader.classList.contains('fixed-top')) return;
window.scrollY > 150 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
window.scrollY > 180 ? selectBody.classList.add('scrolled') : selectBody.classList.remove('scrolled');
}
document.addEventListener('scroll', toggleScrolled);
......
......@@ -29,6 +29,7 @@
<!-- Main CSS File -->
<link href="<?= asset('assets') ?>/css/main.css" rel="stylesheet">
<script src="<?= asset('assets') ?>/js/jquery.min.js"></script>
</head>
......@@ -64,7 +65,7 @@
<ul>
<li><a href="<?= route('/') ?>" class="<?= (request()->is('/')) ? 'active':'' ?>">Home</a></li>
<li><a href="<?= route('about-us') ?>" class="<?= (request()->is('about-us')) ? 'active':'' ?>">About Us</a></li>
<li><a href="services.html">Products</a></li>
<li><a href="<?= route('product') ?>" class="<?= (request()->is('product')) ? 'active':'' ?>">Products</a></li>
<li><a href="<?= route('career') ?>" class="<?= (request()->is('career')) ? 'active':'' ?>">Career</a></li>
<li><a href="<?= route('contact') ?>" class="<?= (request()->is('contact')) ? 'active':'' ?>">Contact</a></li>
</ul>
......
......@@ -5,14 +5,14 @@
<!-- Page Title -->
<div class="page-title ">
<div class="container">
<div class="container mt-5">
<div class="row g-4">
<div class="col-lg-3">
<div class="col-lg-2 ">
</div>
<div class="col-lg-6">
<h1>Get in Touch</h1>
<h4 class="mt-5 ">We’d love to hear from you.</h4>
<div class="col-lg-6 ">
<h1 class="hfive">Get in Touch</h1>
<h4 class="mt-4 ">We’d love to hear from you.</h4>
</div>
</div>
......
......@@ -55,35 +55,35 @@
<div class="col-md-6">
<div class="display-card large">
<img src="assets/img/signage.jpg" class="img-fluid" alt="">
<img src="<?= asset('assets') ?>/img/signage-tv.png" class="img-fluid" alt="">
<div class="display-title">Signage Display</div>
</div>
</div>
<div class="col-md-6">
<div class="display-card large">
<img src="assets/img/projector.jpg" class="img-fluid" alt="">
<img src="<?= asset('assets') ?>/img/portable-projectors.png" class="img-fluid" alt="">
<div class="display-title">Projectors</div>
</div>
</div>
<div class="col-md-4">
<div class="display-card small">
<img src="assets/img/led-wall.jpg" class="img-fluid" alt="">
<img src="<?= asset('assets') ?>/img/led-wall.png" class="img-fluid" alt="">
<div class="display-title">LED Wall</div>
</div>
</div>
<div class="col-md-4">
<div class="display-card small">
<img src="assets/img/interactive.jpg" class="img-fluid" alt="">
<img src="<?= asset('assets') ?>/img/interactive-display.png" class="img-fluid" alt="">
<div class="display-title">Interactive Displays</div>
</div>
</div>
<div class="col-md-4">
<div class="display-card small">
<img src="assets/img/writing-pad.jpg" class="img-fluid" alt="">
<img src="<?= asset('assets') ?>/img/digital-writing-pad.png" class="img-fluid" alt="">
<div class="display-title">Digital Writing Pad</div>
</div>
</div>
......@@ -100,29 +100,29 @@
<div class="col-lg-3 col-sm-6">
<div class="achievement-item">
<i class="bi bi-award"></i>
<p>Industry Awards</p>
<h3>15+</h3>
<p>NUMBER OF <br>BRANDS </p>
<h3>20+</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="achievement-item">
<i class="bi bi-shield-check"></i>
<p>Safety Incidents</p>
<h3>Zero</h3>
<p>NUMBER OF <br>DEALERS</p>
<h3>350+</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="achievement-item">
<i class="bi bi-clock-history"></i>
<p>Years Experience</p>
<h3>18</h3>
<p>EXPERIENCE</p>
<h3>15+</h3>
</div>
</div>
<div class="col-lg-3 col-sm-6">
<div class="achievement-item">
<i class="bi bi-people"></i>
<p>Satisfied Clients</p>
<h3>350+</h3>
<p>SUCCESSFULL PROJECTS<br></p>
<h3>2000+</h3>
</div>
</div>
</div>
......@@ -142,7 +142,7 @@
<a href="#" class="btn btn-outline-dark">See All</a>
</div>
<div class="col-md-5 text-end">
<img src="assets/img/monitors.png" class="img-fluid" alt="Monitors">
<img src="<?= asset('assets') ?>/img/monitor-3.png" class="img-fluid" alt="Monitors">
</div>
</div>
</div>
......@@ -158,7 +158,7 @@
<a href="#" class="btn btn-outline-light">See All</a>
</div>
<div class="col-md-5 text-end">
<img src="assets/img/aircon.png" class="img-fluid" alt="Aircon">
<img src="<?= asset('assets') ?>/img/aircon.png" class="img-fluid" alt="Aircon">
</div>
</div>
</div>
......@@ -174,7 +174,7 @@
<a href="#" class="btn btn-outline-light">See All</a>
</div>
<div class="col-md-5 text-end">
<img src="assets/img/appliances.png" class="img-fluid" alt="Appliances">
<img src="<?= asset('assets') ?>/img/small-appliances.png" class="img-fluid" alt="Appliances">
</div>
</div>
</div>
......@@ -190,7 +190,7 @@
<a href="#" class="btn btn-outline-dark">See All</a>
</div>
<div class="col-md-5 text-end">
<img src="assets/img/accessories.png" class="img-fluid" alt="Accessories">
<img src="<?= asset('assets') ?>/img/accessories.png" class="img-fluid" alt="Accessories">
</div>
</div>
</div>
......
@extends('app_layout')
@section('title','Contact Us')
@section('content')
<main class="main">
<div class="page-title ">
<div class="container">
<div class="row g-4">
<h1 class="hfive text-center">Products</h1>
<div class="col-lg-4">
<div class="accordion filter-accordion" id="filterAccordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#type"
aria-expanded="true">
FILTER BY PRODUCT TYPE
</button>
</h2>
<div id="type" class="accordion-collapse collapse show">
<div class="accordion-body">
<?php if(isset($productType)){
foreach($productType as $row){ ?>
<div><?= $row->type ?></div>
<?php } } ?>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button"
data-bs-toggle="collapse"
data-bs-target="#industry"
aria-expanded="true">
FILTER BY INDUSTRY
</button>
</h2>
<div id="industry" class="accordion-collapse collapse show">
<div class="accordion-body">
<?php if(isset($industryData)){
foreach($industryData as $row){ ?>
<div><?= $row->industry ?></div>
<?php } } ?>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button"
data-bs-toggle="collapse"
data-bs-target="#brand"
aria-expanded="true">
FILTER BY BRAND
</button>
</h2>
<div id="brand" class="accordion-collapse collapse show">
<div class="accordion-body">
<?php if(isset($brandData)){
foreach($brandData as $row){ ?>
<div><?= $row->brand ?></div>
<?php } } ?>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-8"></div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.filter-accordion .accordion-body div').on('click', function () {
$(this)
.closest('.accordion-body')
.find('div')
.removeClass('active');
$(this).addClass('active');
});
});
</script>
@endsection
\ No newline at end of file
......@@ -27,6 +27,7 @@
Route::get('terms-conditions', [FrontendController::class, 'terms_condition'])->name('terms-conditions');
Route::get('about-us', [FrontendController::class, 'about'])->name('about-us');
Route::get('career', [FrontendController::class, 'career'])->name('career');
Route::get('product', [FrontendController::class, 'products'])->name('product');
Route::get('/request-waiting/{token}', [FrontendController::class, 'requestWaiting'])
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment