relocating
This commit is contained in:
twotalesanimation
@@ -1,280 +0,0 @@
|
||||
|
||||
|
||||
<?php $__env->startSection('title', 'Murals - Premium Custom Designs'); ?>
|
||||
|
||||
<?php $__env->startSection('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>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('content'); ?>
|
||||
<!-- HERO SECTION -->
|
||||
<section class="section" id="hero">
|
||||
<div class="hero-slider">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-slide <?php if($index === 0): ?> active <?php endif; ?>" style="background-image: url('<?php echo e(asset('storage/' . $image->image_path)); ?>');">
|
||||
<div class="hero-slide-content">
|
||||
<div>
|
||||
<div class="hero-content">
|
||||
<h1 style="color: white; font-size: 3rem;"><?php echo e($image->title); ?></h1>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->description): ?>
|
||||
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;"><?php echo e($image->description); ?></p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<div class="hero-cta">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if($image->button_text && $image->button_link): ?>
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php if(str_starts_with($image->button_link, '#')): ?>
|
||||
<button class="btn" onclick="document.getElementById('<?php echo e(substr($image->button_link, 1)); ?>').scrollIntoView({behavior: 'smooth'})"><?php echo e($image->button_text); ?></button>
|
||||
<?php else: ?>
|
||||
<a href="<?php echo e($image->button_link); ?>" class="btn"><?php echo e($image->button_text); ?></a>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
<?php else: ?>
|
||||
<button class="btn" onclick="document.getElementById('mural-filters').scrollIntoView({behavior: 'smooth'})">Browse Murals</button>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<!-- 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>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
|
||||
<div class="hero-dots">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $heroImages; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $image): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<div class="hero-dot <?php if($index === 0): ?> active <?php endif; ?>" data-slide="<?php echo e($index); ?>"></div>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<div class="hero-dot active" data-slide="0"></div>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</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">
|
||||
<?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if BLOCK]><![endif]--><?php endif; ?><?php $__empty_1 = true; $__currentLoopData = $products; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $product): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); $__empty_1 = false; ?>
|
||||
<?php echo $__env->make('components.product-card', ['product' => $product], array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?>
|
||||
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); if ($__empty_1): ?>
|
||||
<p>No murals available yet</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</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>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php $__env->startSection('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>
|
||||
<?php $__env->stopSection(); ?>
|
||||
|
||||
<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /var/www/additional_design/resources/views/murals.blade.php ENDPATH**/ ?>
|
||||
Reference in New Issue
Block a user