Additional/resources/views/fabrics.blade.php

@extends('layouts.app')

@section('title', 'Custom Printed Fabrics')

@section('content')
    <!-- HERO SECTION -->
    <section class="section" id="fabrics-hero" style="background: linear-gradient(to right, rgba(45, 80, 71, 0.7), rgba(45, 80, 71, 0.5)), url('https://images.unsplash.com/photo-1578926078328-123alce3f3ce?w=1200&q=80') center/cover no-repeat;">
        <div class="container">
            <div style="padding: 6rem 0; max-width: 700px;">
                <h1 style="color: white; font-size: 3rem; margin-bottom: 1rem;">Custom Printed Fabrics</h1>
                <p style="color: rgba(255, 255, 255, 0.95); font-size: 1.1rem;">Extend your favorite wallpaper designs to premium fabrics. From upholstery to curtains, cushions to bedding, create a cohesive interior where your designs flow seamlessly across all textiles.</p>
            </div>
        </div>
    </section>

    <!-- FABRIC TYPES SECTION -->
    <section class="section section--light">
        <div class="container">
            <h2>Fabric Types & Applications</h2>
            <p style="max-width: 700px; margin-bottom: 3rem;">Choose from our range of premium fabrics, each optimized for different applications and uses.</p>

            <div class="grid grid--3">
                <!-- Upholstery Fabrics -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=500&q=80" alt="Upholstery Fabrics" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Upholstery Fabrics</div>
                        <p class="card-description">Durable, premium fabrics perfect for furniture upholstery. Available in various weights and finishes. Ideal for sofas, chairs, and ottomans.</p>
                        <div style="margin-top: 1rem;">
                            <button class="btn btn--sm">Explore Collection</button>
                        </div>
                    </div>
                </div>

                <!-- Curtain & Drape Fabrics -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1578926314433-8e18d4f89b16?w=500&q=80" alt="Curtain Fabrics" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Curtain & Drape Fabrics</div>
                        <p class="card-description">Elegant draping fabrics in various opacities. Perfect for creating custom curtains, drapes, and window treatments that complement your wallpaper.</p>
                        <div style="margin-top: 1rem;">
                            <button class="btn btn--sm">Explore Collection</button>
                        </div>
                    </div>
                </div>

                <!-- Decorative Textiles -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1606389506042-4bc31f98b485?w=500&q=80" alt="Decorative Textiles" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Decorative Textiles</div>
                        <p class="card-description">Versatile fabrics for cushions, pillows, throws, and home accents. Perfect for adding coordinated touches throughout your space.</p>
                        <div style="margin-top: 1rem;">
                            <button class="btn btn--sm">Explore Collection</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- FEATURED FABRICS GRID -->
    <section class="section" id="featured-fabrics">
        <div class="container">
            <h2>Featured Fabric Collections</h2>
            <p style="margin-bottom: 2rem;">Our most popular custom-printed fabric options, available in various widths and finishes.</p>

            <div class="grid grid--3">
                <!-- Botanical Garden Fabric -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1520763185298-1b434c919eba?w=500&q=80" alt="Botanical Garden" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Botanical Garden</div>
                        <p class="card-description">Nature-inspired floral patterns printed on premium linen blend. Perfect for upholstery and curtains.</p>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                            <span style="font-weight: 600;">From $45/yard</span>
                            <button class="btn btn--sm">View</button>
                        </div>
                    </div>
                </div>

                <!-- Geometric Modern -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1577720643272-265f434b3f6f?w=500&q=80" alt="Geometric Modern" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Geometric Modern</div>
                        <p class="card-description">Contemporary geometric patterns on cotton canvas. Durable and perfect for high-traffic furniture.</p>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                            <span style="font-weight: 600;">From $48/yard</span>
                            <button class="btn btn--sm">View</button>
                        </div>
                    </div>
                </div>

                <!-- Vintage Elegance -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=500&q=80" alt="Vintage Elegance" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Vintage Elegance</div>
                        <p class="card-description">Classic ornamental patterns on silk blend fabric. Ideal for luxury upholstery and formal drapery.</p>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                            <span style="font-weight: 600;">From $65/yard</span>
                            <button class="btn btn--sm">View</button>
                        </div>
                    </div>
                </div>

                <!-- Tropical Vibrancy -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1505142468610-359e7d316be0?w=500&q=80" alt="Tropical Vibrancy" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Tropical Vibrancy</div>
                        <p class="card-description">Bright tropical foliage patterns on cotton velvet. Perfect for statement cushions and accent furniture.</p>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                            <span style="font-weight: 600;">From $52/yard</span>
                            <button class="btn btn--sm">View</button>
                        </div>
                    </div>
                </div>

                <!-- Minimalist Serenity -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1511884642898-4c92249e20b6?w=500&q=80" alt="Minimalist Serenity" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Minimalist Serenity</div>
                        <p class="card-description">Subtle minimalist patterns on natural linen. Versatile for any interior design style.</p>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                            <span style="font-weight: 600;">From $42/yard</span>
                            <button class="btn btn--sm">View</button>
                        </div>
                    </div>
                </div>

                <!-- Luxe Textured -->
                <div class="product-card">
                    <img src="https://images.unsplash.com/photo-1578926078328-123alce3f3ce?w=500&q=80" alt="Luxe Textured" class="card-image" style="object-fit: cover;">
                    <div class="card-content">
                        <div class="card-title">Luxe Textured</div>
                        <p class="card-description">High-end jacquard weave fabrics with dimensional textures. Perfect for luxury applications.</p>
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 1rem;">
                            <span style="font-weight: 600;">From $75/yard</span>
                            <button class="btn btn--sm">View</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CUSTOMIZATION SECTION -->
    <section class="section section--light">
        <div class="container">
            <h2>Fully Customizable</h2>
            <div class="two-col">
                <div class="two-col-text">
                    <h3>Create Your Own Custom Fabric</h3>
                    <p>Love a wallpaper design? We can print it on any of our premium fabric bases. Upload your own design or choose from our wallpaper collections and we'll print it on your fabric of choice.</p>
                    <ul style="list-style: none; color: var(--text-secondary); margin: var(--spacing-md) 0;">
                        <li style="margin-bottom: 12px;"><strong>✓ Any Wallpaper Design:</strong> Choose from our full wallpaper catalog</li>
                        <li style="margin-bottom: 12px;"><strong>✓ Custom Uploads:</strong> Print your own designs or artwork</li>
                        <li style="margin-bottom: 12px;"><strong>✓ Multiple Base Fabrics:</strong> Select from cotton, linen, silk blends, and more</li>
                        <li style="margin-bottom: 12px;"><strong>✓ Custom Sizing:</strong> Order exact yardage you need</li>
                        <li style="margin-bottom: 12px;"><strong>✓ Sample Swatches:</strong> Order fabric samples before committing</li>
                    </ul>
                    <button class="btn" style="margin-top: var(--spacing-lg);">Start Custom Design</button>
                </div>
                <div class="two-col-image">
                    <img src="https://images.unsplash.com/photo-1578500494198-246f612d03b3?w=500&q=80" alt="Custom Fabrics" style="width: 100%; height: auto; border-radius: 8px; object-fit: cover;">
                </div>
            </div>
        </div>
    </section>

    <!-- FABRIC SPECIFICATIONS -->
    <section class="section">
        <div class="container">
            <h2>Fabric Specifications & Care</h2>
            <div style="background-color: var(--bg-secondary); padding: var(--spacing-lg); border-radius: 20px;">
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg);">
                    <div>
                        <h4 style="color: var(--accent-dark); margin-bottom: 1rem;">Standard Widths</h4>
                        <ul style="list-style: none; color: var(--text-secondary);">
                            <li style="margin-bottom: 8px;">• 54" (Standard upholstery)</li>
                            <li style="margin-bottom: 8px;">• 60" (Premium upholstery)</li>
                            <li style="margin-bottom: 8px;">• 45" (Quilting & crafts)</li>
                            <li style="margin-bottom: 8px;">• 118" (Curtain & drape)</li>
                        </ul>
                    </div>
                    <div>
                        <h4 style="color: var(--accent-dark); margin-bottom: 1rem;">Care Instructions</h4>
                        <ul style="list-style: none; color: var(--text-secondary);">
                            <li style="margin-bottom: 8px;">• Dry clean or gentle hand wash recommended</li>
                            <li style="margin-bottom: 8px;">• Use cool water with mild detergent</li>
                            <li style="margin-bottom: 8px;">• Air dry away from direct heat</li>
                            <li style="margin-bottom: 8px;">• Professional upholstery cleaning safe</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA SECTION -->
    <section class="section section--highlight">
        <div class="container" style="text-align: center;">
            <h2>Ready to Start Your Fabric Project?</h2>
            <p style="max-width: 600px; margin: 0 auto var(--spacing-lg); color: var(--text-primary);">
                Contact our team to discuss your custom fabric needs. We'll provide samples, pricing, and personalized recommendations.
            </p>
            <button class="btn btn--secondary">Request Custom Quote</button>
        </div>
    </section>
@endsection