관리-도구
편집 파일: indexxx.blade.php
@extends('layouts.apps') @section('content') <!-- hero-start --> <section class="bs-hero-5-area wa-bg-default wa-p-relative wa-fix wa-bg-parallax" style="height: 600px;" data-background="assets/gallery/bnnerdown.png"> <div class="container bs-container-2"> <div class="bs-hero-5-wrap"> <!-- left-img --> <div class="bs-hero-5-right"> <h1 class="bs-hero-5-title-1 bs-h-4 wa-split-right" style="font-family: 'Playfair Display', serif;" data-split-delay=".8s"> Flying Eye </h1> <div class="inner-div-1"> <h3 class="bs-hero-5-title-1 bs-h-4 wa-split-right desktop-only" style="font-family: 'Playfair Display', serif; font-size: 20px; word-spacing: 9px;" data-split-delay="1s"> Protection you can see, confidence you can feel. </h3> </div> <h2 class="bs-hero-5-title-2 bs-h-4 wa-split-right cd-headline clip custom-view" data-split-delay="2s" style="font-family: 'Playfair Display', serif;"> <span class="cd-words-wrapper single-headline"> <b class="is-visible">Secure</b> <b>Smart</b> <b>Seamless</b> </span> </h2> </div> <style> /* Mobile styles */ @media (max-width: 768px) { .bs-hero-5-right { margin-top: 160px; /* move content down */ } .bs-hero-5-right h1, .bs-hero-5-right h2, .bs-hero-5-right h3 { text-align: center !important; padding-left: 10px; /* left padding */ /* left align on mobile */ } .desktop-only { font-size: 16px !important; word-spacing: 4px !important; } } </style> </div> </div> </section> <!-- hero-end --> <!-- about-start --> <section class="bs-about-4-area pt-45 pb-125 wa-fix"> <div class="container bs-container-2"> <h4 class="bs-subtitle-4 "> <span class="text">about us</span> <span class="icon"> <img src="assets/gallery/icon.jpg" alt="CCTV Icon" style="width: 38px; height: 38px;"> </span> </h4> <div class="bs-about-4-wrap"> <!-- left-content --> <div class="bs-about-4-content"> <h2 class="bs-sec-title-4 title wa-split-right wa-capitalize" data-cursor="-opaque">{{$about->title}}</h2> <div class="inner-div"> <p class="bs-p-4 disc wa-fadeInUp " style="text-align: justify;">{{ Str::words(strip_tags($about->description), 60, '...') }} </p> <div class="btn-wrap wa-fadeInUp"> <a href="/about" aria-label="name" class="bs-pr-btn-2"> <span class="text" data-back="know about us" data-front="know about us"></span> <span class="line-1"></span> <span class="line-2"></span> <span class="box box-1"></span> <span class="box box-2"></span> <span class="box box-3"></span> <span class="box box-4"></span> </a> </div> </div> </div> <div class="bs-about-4-right"> <div class="bs-about-4-img wa-fix wa-img-cover image-rotate auto-rotate"> <div class="image-inner"> <img src="{{ asset('storage/' . $about->image) }}" alt="Front Image" class="front-image"> <img src="{{ asset('storage/' . $about->image2) }}" alt="Back Image" class="back-image"> </div> </div> </div> <style> @media (max-width: 768px) { .bs-about-4-right, .image-rotate, .image-inner { height: auto !important; min-height: 350px !important; /* adjust as needed */ overflow: visible !important; margin-top: -40px; } .front-image, .back-image { height: auto !important; } } .image-rotate { perspective: 1000px; width: 100%; height: 90% !important; position: relative; } .image-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: flipAnimation 6s infinite linear; /* auto rotation */ } .front-image, .back-image { position: absolute; width: 100%; height: 100%; object-fit: cover; backface-visibility: hidden; border-radius: 10px; } .back-image { transform: rotateY(180deg); } /* Flip animation keyframes */ @keyframes flipAnimation { 0%, 25% { transform: rotateY(0deg); } 50%, 75% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } } </style> </div> </div> </section> <!-- about-end --> <!-- services-start --> <style> /* Desktop view (≥992px) */ @media (min-width: 992px) { .bs-services-4-area { margin-top: -105px; /* existing setting */ } } /* Mobile view (<992px) */ @media (max-width: 991px) { .bs-services-4-area { margin-top: -130px; /* your desired value for mobile */ } } </style> <section class="bs-services-4-area pt-100 wa-fix " data-background="assets/img/services/s4-bg.png"> <div class="bs-services-4-img wa-fix wa-img-cover wa-slideInLeft"> <img src="assets/img/services/s4-img-1.png" alt=""> </div> <div class="container bs-container-2"> <style> @media (max-width: 768px) { .custom-mobile-margin { margin-top: -60px !important; /* adjust the value as you need */ } } </style> <h4 class="bs-subtitle-4 custom-mobile-margin"> <span class="text" style="color: white;">Services</span> <span class="icon"> <img src="assets/gallery/blackicon.png" alt="CCTV Icon" style="width: 38px; height: 38px;"> </span> </h4> <div class="bs-services-4-wrap"> <!-- left-content --> <div class="bs-services-4-content"> <style> @media (max-width: 768px) { .bs-sec-title-4 { margin-top: -25px !important; /* adjust value as needed */ } } </style> <h2 class="bs-sec-title-4 title wa-split-right wa-capitalize" data-cursor="-opaque">Securing What Matters Most</h2> <p class="bs-p-4 disc wa-fadeInUp" style="text-align: justify;">At Flying Eye Security, we specialize in providing reliable security solutions that safeguard your property and peace of mind. With years of experience in this industry, our expert team deliver systems that are both effective and easy to use. </p> <div class="btn-wrap wa-fadeInUp"> <a href="/services" aria-label="name" class="bs-pr-btn-2"> <span class="text" data-back="view all services" data-front="view More"></span> <span class="line-1"></span> <span class="line-2"></span> <span class="box box-1"></span> <span class="box box-2"></span> <span class="box box-3"></span> <span class="box box-4"></span> </a> </div> </div> <style> @media (max-width: 768px) { .bs-services-4-item { margin-top: -40px !important; /* adjust the value as you like */ } } </style> <!-- right-item --> <div class="bs-services-4-item"> @foreach($service as $item) <div class="bs-services-4-item-single wa-bg-default {{ $loop->first ? 'active' : '' }}" data-background="assets/img/services/s4-card-bg.png"> <!-- Active View --> <div class="active-content"> <h4 class="bs-h-1 title"> <a href="{{ route('servicedetails', $item->id) }}" aria-label="name" class="wa-line-limit has-line-2"> {{ $item->service_title }} </a> </h4> <div class="main-img wa-fix wa-img-cover"> <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->title }}"> </div> <p class="bs-p-4 disc wa-line-limit has-line-3"> {{ Str::limit(strip_tags($item->description), 150) }} </p> </div> <!-- Default View --> <div class="default-content"> <div class="img-2 wa-fix wa-img-cover"> <img src="{{ asset('storage/' . $item->image) }}" alt="{{ $item->title }}"> </div> <h4 class="bs-h-1 title-2 wa-line-limit has-line-1"> {{ $item->service_title }} </h4> </div> </div> @endforeach </div> </div> </div> </section> <!-- services-end --> <!-- brand-start --> <div class="bs-brand-4-area wa-fix mb-10 mt-10"> <div class="bs-brand-4-marquee-active"> <div class="bs-brand-4-wrap wa-fix"> <!-- Your custom images --> <div class="bs-brand-4-item"> <img src="assets/gallery/lastimage1.jpg" alt="CCTV 1"> </div> <div class="bs-brand-4-item"> <img src="assets/gallery/B1.jpg" alt="CCTV 2"> </div> <div class="bs-brand-4-item"> <img src="assets/gallery/B2.jpg" alt="CCTV 3"> </div> <div class="bs-brand-4-item"> <img src="assets/gallery/B3.avif" alt="CCTV 4"> </div> <div class="bs-brand-4-item"> <img src="assets/gallery/B4.jpg" alt="CCTV 5"> </div> <style> .bs-brand-4-wrap { display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: nowrap; overflow: hidden; } /* Make all items uniform */ .bs-brand-4-item { width: 200px; /* adjust as needed */ height: 150px; /* adjust as needed */ overflow: hidden; border-radius: 10px; /* optional rounded corners */ flex-shrink: 0; } /* Make images fully fill their boxes */ .bs-brand-4-item img { width: 100%; height: 100%; object-fit: cover; /* ensures full coverage */ display: block; border-radius: 10px; transition: transform 0.3s ease, filter 0.3s ease; } /* Optional: hover zoom effect */ .bs-brand-4-item img:hover { transform: scale(1.05); filter: brightness(1.1); } </style> </div> </div> </div> <!-- brand-end --> @endsection