Invoice system working
This commit is contained in:
twotalesanimation
@@ -0,0 +1,255 @@
|
||||
<?php $__env->startSection('title', 'Wallpapers - 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('wallpaper-grid').scrollIntoView({behavior: 'smooth'})">Browse Wallpapers</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-1552321554-5fefe8c9ef14?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;">Premium Custom Wallpapers</h1>
|
||||
<p style="color: rgba(255, 255, 255, 0.95); font-size: 1.1rem;">Transform your spaces with our carefully curated collection of high-quality wallpapers. From botanical motifs to contemporary geometric patterns, each design is crafted with precision and printed to perfection.</p>
|
||||
<div class="hero-cta">
|
||||
<button class="btn" onclick="document.getElementById('wallpaper-grid').scrollIntoView({behavior: 'smooth'})">Browse Wallpapers</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>
|
||||
|
||||
|
||||
<!-- WALLPAPER GRID -->
|
||||
<section class="section" id="wallpaper-grid" 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 Wallpapers</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="botanical">Botanical</button>
|
||||
<button class="filter-btn" data-filter="vintage">Vintage</button>
|
||||
<button class="filter-btn" data-filter="modern">Modern</button>
|
||||
<button class="filter-btn" data-filter="geometric">Geometric</button>
|
||||
<button class="filter-btn" data-filter="texture">Texture</button>
|
||||
<button class="filter-btn" data-filter="floral">Floral</button>
|
||||
</div>
|
||||
</div>
|
||||
<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 products available</p>
|
||||
<?php endif; ?><?php if(\Livewire\Mechanisms\ExtendBlade\ExtendBlade::isRenderingLivewireComponent()): ?><!--[if ENDBLOCK]><![endif]--><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA SECTION -->
|
||||
<section class="section section--highlight">
|
||||
<div class="container" style="text-align: center;">
|
||||
<h2>Need Help Choosing?</h2>
|
||||
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
|
||||
Schedule a free consultation with our design experts. We'll help you find the perfect wallpaper for your space.
|
||||
</p>
|
||||
<button class="btn btn--secondary">Book a Free Consultation</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/wallpapers.blade.php ENDPATH**/ ?>
|
||||
Reference in New Issue
Block a user