twotalesanimation
279 lines
11 KiB
PHP
279 lines
11 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'Murals - Premium Custom Designs')
|
|
|
|
@section('styles')
|
|
<style>
|
|
.hero-slider {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 20px;
|
|
margin: 20px;
|
|
height: 600px;
|
|
}
|
|
|
|
.hero-slide {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
transition: opacity 0.8s ease-in-out;
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.hero-slide.active {
|
|
opacity: 1;
|
|
}
|
|
|
|
.hero-slide-content {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 3rem;
|
|
align-items: center;
|
|
padding: 6rem 5rem;
|
|
height: 100%;
|
|
}
|
|
|
|
.hero-dots {
|
|
position: absolute;
|
|
bottom: 30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
display: flex;
|
|
gap: 12px;
|
|
z-index: 10;
|
|
}
|
|
|
|
.hero-dot {
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.hero-dot.active {
|
|
background: white;
|
|
width: 32px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.hero-content {
|
|
color: white;
|
|
}
|
|
|
|
.hero-cta {
|
|
display: flex;
|
|
gap: 1rem;
|
|
margin-top: 1.5rem;
|
|
}
|
|
|
|
.hero-slider:hover .hero-dot {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
}
|
|
|
|
.hero-slider:hover .hero-dot.active {
|
|
background: white;
|
|
}
|
|
</style>
|
|
@endsection
|
|
|
|
@section('content')
|
|
<!-- HERO SECTION -->
|
|
<section class="section" id="hero">
|
|
<div class="hero-slider">
|
|
@forelse($heroImages as $index => $image)
|
|
<div class="hero-slide @if($index === 0) active @endif" style="background-image: url('{{ asset('storage/' . $image->image_path) }}');">
|
|
<div class="hero-slide-content">
|
|
<div>
|
|
<div class="hero-content">
|
|
<h1 style="color: white; font-size: 3rem;">{{ $image->title }}</h1>
|
|
@if($image->description)
|
|
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">{{ $image->description }}</p>
|
|
@endif
|
|
<div class="hero-cta">
|
|
@if($image->button_text && $image->button_link)
|
|
@if(str_starts_with($image->button_link, '#'))
|
|
<button class="btn" onclick="document.getElementById('{{ substr($image->button_link, 1) }}').scrollIntoView({behavior: 'smooth'})">{{ $image->button_text }}</button>
|
|
@else
|
|
<a href="{{ $image->button_link }}" class="btn">{{ $image->button_text }}</a>
|
|
@endif
|
|
@else
|
|
<button class="btn" onclick="document.getElementById('mural-filters').scrollIntoView({behavior: 'smooth'})">Browse Murals</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<!-- Fallback hero image if none are configured in admin -->
|
|
<div class="hero-slide active" style="background: linear-gradient(to right, rgba(45, 80, 71, 0.7), rgba(45, 80, 71, 0.5)), url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1200&q=80') center/cover no-repeat;">
|
|
<div class="hero-slide-content">
|
|
<div>
|
|
<div class="hero-content">
|
|
<h1 style="color: white; font-size: 3rem;">Stunning Custom Murals</h1>
|
|
<p style="color: rgba(255, 255, 255, 0.95); font-size: 1.1rem;">Make a statement with our collection of bold, eye-catching murals. Single-image designs perfect for accent walls in any room. Each mural is custom-printed to your exact dimensions.</p>
|
|
<div class="hero-cta">
|
|
<button class="btn" onclick="document.getElementById('mural-filters').scrollIntoView({behavior: 'smooth'})">Browse Murals</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div></div>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
|
|
<div class="hero-dots">
|
|
@forelse($heroImages as $index => $image)
|
|
<div class="hero-dot @if($index === 0) active @endif" data-slide="{{ $index }}"></div>
|
|
@empty
|
|
<div class="hero-dot active" data-slide="0"></div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const slides = document.querySelectorAll('.hero-slide');
|
|
const dots = document.querySelectorAll('.hero-dot');
|
|
const slider = document.querySelector('.hero-slider');
|
|
let currentSlide = 0;
|
|
let autoAdvanceInterval;
|
|
|
|
function showSlide(n) {
|
|
if (slides.length === 0) return;
|
|
slides.forEach(s => s.classList.remove('active'));
|
|
dots.forEach(d => d.classList.remove('active'));
|
|
currentSlide = (n + slides.length) % slides.length;
|
|
slides[currentSlide].classList.add('active');
|
|
dots[currentSlide].classList.add('active');
|
|
}
|
|
|
|
function startAutoAdvance() {
|
|
autoAdvanceInterval = setInterval(() => {
|
|
showSlide(currentSlide + 1);
|
|
}, 5000);
|
|
}
|
|
|
|
function resetAutoAdvance() {
|
|
clearInterval(autoAdvanceInterval);
|
|
startAutoAdvance();
|
|
}
|
|
|
|
dots.forEach(dot => {
|
|
dot.addEventListener('click', () => {
|
|
showSlide(parseInt(dot.getAttribute('data-slide')));
|
|
resetAutoAdvance();
|
|
});
|
|
});
|
|
|
|
slider.addEventListener('mouseenter', () => clearInterval(autoAdvanceInterval));
|
|
slider.addEventListener('mouseleave', startAutoAdvance);
|
|
|
|
startAutoAdvance();
|
|
});
|
|
</script>
|
|
|
|
<!-- FILTERS & SORTING -->
|
|
<section class="section" id="mural-filters" style="padding: 2rem 0;">
|
|
<div class="container">
|
|
<div style="display: flex; gap: 2rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 2rem;">
|
|
<div>
|
|
<h3>All Murals</h3>
|
|
<p style="color: var(--text-secondary);">Showing all designs</p>
|
|
</div>
|
|
<div style="display: flex; gap: 1rem;">
|
|
<select style="padding: 8px 12px; border: 1px solid var(--border-color); border-radius: 4px; font-size: 0.9rem;">
|
|
<option>Sort by: Featured</option>
|
|
<option>Newest</option>
|
|
<option>Price: Low to High</option>
|
|
<option>Price: High to Low</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem;">
|
|
<button class="filter-btn active" data-filter="all">All</button>
|
|
<button class="filter-btn" data-filter="landscape">Landscape</button>
|
|
<button class="filter-btn" data-filter="abstract">Abstract</button>
|
|
<button class="filter-btn" data-filter="urban">Urban</button>
|
|
<button class="filter-btn" data-filter="nature">Nature</button>
|
|
<button class="filter-btn" data-filter="artistic">Artistic</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MURAL GRID -->
|
|
<section class="section" id="mural-grid" style="padding: 2rem 0;">
|
|
<div class="container">
|
|
<div class="grid grid--3">
|
|
@forelse($products as $product)
|
|
@include('components.product-card', ['product' => $product])
|
|
@empty
|
|
<p>No murals available yet</p>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- MURAL INFO SECTION -->
|
|
<section class="section section--light">
|
|
<div class="container">
|
|
<h2>About Our Murals</h2>
|
|
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2rem;">
|
|
<div class="card">
|
|
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Custom Dimensions</h4>
|
|
<p>Order murals in any size. Simply provide your width and height measurements, and we'll print to exact specifications.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Non-Repeating Design</h4>
|
|
<p>Unlike wallpapers, murals are single cohesive images perfect for accent walls. One stunning focal point for your space.</p>
|
|
</div>
|
|
<div class="card">
|
|
<h4 style="color: var(--primary-color); margin-bottom: 1rem;">Premium Quality</h4>
|
|
<p>High-resolution printing with vibrant colors and excellent durability. Professional installation guides included.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA SECTION -->
|
|
<section class="section section--highlight">
|
|
<div class="container" style="text-align: center;">
|
|
<h2>Transform Your Space</h2>
|
|
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
|
|
Can't find the perfect mural? Our design experts can help you create a custom mural from your own image or concept.
|
|
</p>
|
|
<button class="btn btn--secondary">Request a Custom Mural</button>
|
|
</div>
|
|
</section>
|
|
@endsection
|
|
|
|
@section('scripts')
|
|
<script>
|
|
document.querySelectorAll('.filter-btn').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const filter = this.dataset.filter;
|
|
document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
|
|
this.classList.add('active');
|
|
|
|
document.querySelectorAll('[data-category]').forEach(card => {
|
|
if (filter === 'all' || card.dataset.category === filter) {
|
|
card.style.display = '';
|
|
} else {
|
|
card.style.display = 'none';
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
@endsection
|