pinto/Additional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New Initial Commit

Browse Source
This commit is contained in:
twotalesanimation
2025-12-09 12:04:54 +02:00
commit 6de01c13c5
350 changed files with 42032 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/home.blade.php
+463
View File
@@ -0,0 +1,463 @@
@extends('layouts.app')
@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);
border: 2px solid white;
cursor: pointer;
transition: all 0.3s ease;
}
.hero-dot.active {
background: white;
transform: scale(1.2);
}
</style>
@endsection
@section('content')
<!-- ===== 3. 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('wallpaper').scrollIntoView({behavior: 'smooth'})">Browse Wallpaper Ranges</button>
<button class="btn btn--secondary" onclick="document.getElementById('consultation').scrollIntoView({behavior: 'smooth'})">Book a Free Consultation</button>
@endif
</div>
</div>
</div>
<div></div>
</div>
</div>
@empty
<!-- Fallback hero images if none are configured in admin -->
<div class="hero-slide active" style="background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=1200&q=80');">
<div class="hero-slide-content">
<div>
<div class="hero-content">
<h1 style="color: white; font-size: 3rem;">Transform Your Spaces with Custom Wallpaper</h1>
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">Discover our curated collections of premium wallpapers and custom-printed fabrics, designed to elevate your interior aesthetic.</p>
<div class="hero-cta">
<button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Browse Wallpaper Ranges</button>
<button class="btn btn--secondary" onclick="document.getElementById('consultation').scrollIntoView({behavior: 'smooth'})">Book a Free Consultation</button>
</div>
</div>
</div>
<div></div>
</div>
</div>
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=1200&q=80');">
<div class="hero-slide-content">
<div>
<div class="hero-content">
<h1 style="color: white; font-size: 3rem;">Luxury Designs for Every Room</h1>
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">From botanical motifs to contemporary patterns, find the perfect wallpaper to match your style.</p>
<div class="hero-cta">
<button class="btn" onclick="document.getElementById('wallpaper').scrollIntoView({behavior: 'smooth'})">Explore Collections</button>
</div>
</div>
</div>
<div></div>
</div>
</div>
<div class="hero-slide" style="background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=1200&q=80');">
<div class="hero-slide-content">
<div>
<div class="hero-content">
<h1 style="color: white; font-size: 3rem;">Custom Printed to Perfection</h1>
<p style="color: rgba(255, 255, 255, 0.9); font-size: 1.1rem; max-width: 95%;">Every design is crafted with precision and printed to your exact specifications using eco-friendly materials.</p>
<div class="hero-cta">
<button class="btn" onclick="document.getElementById('sustainability').scrollIntoView({behavior: 'smooth'})">Learn About Our Process</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>
<div class="hero-dot" data-slide="1"></div>
<div class="hero-dot" data-slide="2"></div>
@endforelse
</div>
</div>
</section>
<!-- ===== 4. WALLPAPER RANGES ===== -->
<section class="section section--light" id="wallpaper">
<div class="container">
<h2>Wallpaper Ranges</h2>
<p>Explore our carefully curated collections, from botanical motifs to contemporary geometric patterns. Each range is designed to inspire and transform your interior spaces.</p>
<div class="grid grid--3">
@forelse($categories as $category)
<div class="card">
<div class="card-image" style="background-image: url('{{ $category->image }}'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">{{ $category->name }}</div>
<p class="card-description">{{ $category->description }}</p>
</div>
</div>
@empty
<p>No categories available</p>
@endforelse
</div>
</div>
</section>
<!-- ===== 5. LATEST WALLPAPERS ===== -->
<section class="section" id="featured">
<div class="container">
<h2>Our Latest Wallpapers</h2>
<p>Discover our newest arrivals, hand-selected for their design excellence and quality.</p>
<div class="grid grid--3">
@forelse($featuredWallpapers as $product)
@include('components.product-card', ['product' => $product])
@empty
<p>No featured wallpapers available</p>
@endforelse
</div>
<div style="text-align: center; margin-top: var(--spacing-lg);">
<a href="{{ route('wallpapers') }}" class="btn">View All Wallpapers</a>
</div>
</div>
</section>
<!-- ===== 5.5 FEATURED MURALS ===== -->
<section class="section section--light" id="featured-murals">
<div class="container">
<h2>Featured Murals</h2>
<p>Stunning accent wall murals to transform any room. Single image, non-repeating designs perfect for making a statement.</p>
<div class="grid grid--3">
@forelse($featuredMurals as $product)
@include('components.product-card', ['product' => $product])
@empty
<p>No featured murals available</p>
@endforelse
</div>
<div style="text-align: center; margin-top: var(--spacing-lg);">
<a href="{{ route('murals') }}" class="btn">View All Murals</a>
</div>
</div>
</section>
<!-- ===== 6. FREE CONSULTATION CTA ===== -->
<section class="section section--highlight" id="consultation">
<div class="container" style="text-align: center;">
<h2>Free Online Wallpaper Consultation</h2>
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg);">
Unsure which design to choose? Our design experts offer complimentary 15-minute virtual consultations to help you select the perfect wallpaper and discuss customization options for your unique space.
</p>
<button class="btn btn--secondary">Schedule a Consultation</button>
</div>
</section>
<!-- ===== 7. RECENT PROJECTS ===== -->
<section class="section section--light" id="projects">
<div class="container">
<h2>Recent Projects</h2>
<p>Our work spans luxury hotels, high-end residences, and commercial spaces. See how we transform environments with our custom wallpaper and fabric solutions.</p>
<div class="grid grid--3">
<div class="card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Luxury Resort Redesign</div>
<p class="card-description">Custom botanical wallpapers throughout the main lobby and guest suites.</p>
<a href="#" class="btn btn--text">View Project</a>
</div>
</div>
<div class="card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1631049307264-da0ec9d70304?w=500&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Modern Executive Office</div>
<p class="card-description">Bespoke geometric wallpaper for corporate interiors with sustainable materials.</p>
<a href="#" class="btn btn--text">View Project</a>
</div>
</div>
<div class="card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1568605114967-8130f3a36994?w=500&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Residential Penthouse</div>
<p class="card-description">Custom-printed fabrics and vintage-inspired wallpapers for a luxury residence.</p>
<a href="#" class="btn btn--text">View Project</a>
</div>
</div>
</div>
</div>
</section>
<!-- ===== 8. CERTIFIED GREEN / SUSTAINABILITY ===== -->
<section class="section" id="sustainability">
<div class="container">
<div class="badge" style="border-radius: 20px;">
<div class="badge-icon">♻️</div>
<div class="badge-text">
<h4>Certified Eco-Conscious</h4>
<p>Our wallpapers and fabrics are printed using low-VOC inks and sustainable materials sourced responsibly.</p>
</div>
</div>
<div style="background-color: var(--bg-secondary); padding: var(--spacing-lg); border-radius: 20px;">
<h3 style="color: var(--accent-dark); margin-bottom: var(--spacing-md);">Sustainability Commitment</h3>
<ul style="list-style: none; color: var(--text-secondary);">
<li style="margin-bottom: 12px;"><strong>Low-VOC Inks:</strong> Non-toxic printing processes safe for your home and the environment.</li>
<li style="margin-bottom: 12px;"><strong>Local Production:</strong> Manufactured locally to reduce carbon footprint and ensure quality.</li>
<li style="margin-bottom: 12px;"><strong>Sustainable Materials:</strong> Sourced from certified sustainable suppliers with ethical practices.</li>
<li style="margin-bottom: 12px;"><strong>Recyclable Packaging:</strong> All packaging materials are fully recyclable or compostable.</li>
</ul>
<a href="#" class="btn btn--text" style="margin-top: var(--spacing-md);">Learn More About Our Practices</a>
</div>
</div>
</section>
<!-- ===== 9. CUSTOM FABRICS ===== -->
<section class="section section--light" id="fabrics">
<div class="container">
<h2>Custom Printed Fabrics</h2>
<div class="two-col">
<div class="two-col-text">
<h3>Extend Your Design to Soft Furnishings</h3>
<p>Love a wallpaper design? We can print it onto premium fabrics for upholstery, curtains, cushions, and more. Create a cohesive interior where your wallpaper designs flow seamlessly across all textiles.</p>
<ul style="list-style: none; color: var(--text-secondary);">
<li style="margin-bottom: 8px;">✓ Custom upholstery and furniture fabric</li>
<li style="margin-bottom: 8px;">✓ Bespoke curtain and drape materials</li>
<li style="margin-bottom: 8px;">✓ Decorative cushion and throw pillow fabric</li>
<li style="margin-bottom: 8px;">✓ Bedding and linens custom printing</li>
</ul>
<button class="btn" style="margin-top: var(--spacing-lg);">Browse Fabrics</button>
</div>
<div class="two-col-image">
<img src="https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=500&q=80" alt="Fabric Sample" style="width: 100%; height: auto; border-radius: 8px; object-fit: cover;">
</div>
</div>
</div>
</section>
<!-- ===== 10. DECOR SHOP TEASER =====
<section class="section" id="shop">
<div class="container">
<h2>Decor Shop</h2>
<p>Discover curated home décor pieces that complement our wallpaper and fabric collections. From wall hangings to tableware.</p>
<div class="grid grid--3">
<div class="card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1578926314433-8e18d4f89b16?w=400&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Artisan Wall Hangings</div>
<p class="card-description">Hand-crafted textile wall art pieces.</p>
</div>
</div>
<div class="card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=400&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Designer Tableware</div>
<p class="card-description">Coordinated dinnerware sets with exclusive designs.</p>
</div>
</div>
<div class="card">
<div class="card-image" style="background-image: url('https://images.unsplash.com/photo-1606389506042-4bc31f98b485?w=400&q=80'); background-size: cover; background-position: center;"></div>
<div class="card-content">
<div class="card-title">Decorative Accents</div>
<p class="card-description">Curated home accessories to complete your space.</p>
</div>
</div>
</div>
<div style="text-align: center; margin-top: var(--spacing-lg);">
<button class="btn btn--secondary">Visit Decor Shop</button>
</div>
</div>
</section>
<!-- ===== 11. PORTFOLIO GALLERY ===== -->
<!-- <section class="section section--light" id="portfolio">
<div class="container">
<h2>View Our Portfolio</h2>
<p>Explore our diverse portfolio showcasing wallpaper and fabric applications across different room types and design styles.</p>
<div class="portfolio-grid">
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1540932239986-310128078e37?w=600&q=80'); background-size: cover; background-position: center;">
<div class="portfolio-item-caption">Master Bedroom</div>
</div>
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=600&q=80'); background-size: cover; background-position: center;">
<div class="portfolio-item-caption">Living Room</div>
</div>
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=600&q=80'); background-size: cover; background-position: center;">
<div class="portfolio-item-caption">Kitchen Nook</div>
</div>
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1593642632823-8f785ba67e45?w=600&q=80'); background-size: cover; background-position: center;">
<div class="portfolio-item-caption">Home Office</div>
</div>
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1552321554-5fefe8c9ef14?w=600&q=80'); background-size: cover; background-position: center;">
<div class="portfolio-item-caption">Bathroom Spa</div>
</div>
<div class="portfolio-item" style="background-image: url('https://images.unsplash.com/photo-1566073771259-6a8506099945?w=600&q=80'); background-size: cover; background-position: center;">
<div class="portfolio-item-caption">Dining Space</div>
</div>
</div>
<div style="text-align: center; margin-top: var(--spacing-lg);">
<button class="btn">View Full Portfolio</button>
</div>
</div>
</section> -->
<!-- ===== 12. OUR CLIENTS ===== -->
<!-- <section class="section" id="clients">
<div class="container">
<h2>Brands We've Worked With</h2>
<div class="logo-strip">
<div class="logo-item">Luxury Hotels Co.</div>
<div class="logo-item">Interior Design Studio</div>
<div class="logo-item">Modern Architects Ltd.</div>
<div class="logo-item">Home & Living Mag</div>
<div class="logo-item">Premium Resorts Group</div>
<div class="logo-item">Urban Development</div>
</div>
</div>
</section> -->
<!-- ===== 13. CONTACT CTA ===== -->
<section class="section section--highlight" id="contact">
<div class="container" style="text-align: center;">
<h2>Ready to Start Your Project?</h2>
<p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
We'd love to hear about your vision. Send us your room measurements, mood boards, and any design inspirations, and our team will provide a personalized quote and design recommendations.
</p>
<button class="btn">Contact Us</button>
</div>
</section>
@endsection
@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
const slides = document.querySelectorAll('.hero-slide');
const dots = document.querySelectorAll('.hero-dot');
let currentSlide = 0;
let slideInterval;
function showSlide(index) {
slides.forEach(slide => slide.classList.remove('active'));
dots.forEach(dot => dot.classList.remove('active'));
slides[index].classList.add('active');
dots[index].classList.add('active');
currentSlide = index;
}
function nextSlide() {
let next = (currentSlide + 1) % slides.length;
showSlide(next);
}
function startAutoSlide() {
slideInterval = setInterval(nextSlide, 10000);
}
function stopAutoSlide() {
clearInterval(slideInterval);
}
// Dot click handlers
dots.forEach(dot => {
dot.addEventListener('click', function() {
stopAutoSlide();
showSlide(parseInt(this.dataset.slide));
startAutoSlide();
});
});
// Start automatic sliding
startAutoSlide();
// Pause on hover
const slider = document.querySelector('.hero-slider');
slider.addEventListener('mouseenter', stopAutoSlide);
slider.addEventListener('mouseleave', startAutoSlide);
});
</script>
@endsection