

<?php $__env->startSection('title', 'eCommerce Website | DIGITAL STUDIO'); ?>

<?php $__env->startSection('content'); ?>
    <section class="hero hero-service-detail py-5 position-relative overflow-hidden" data-aos="fade-up">
        <div class="hero-pattern"></div>
        <div class="container py-lg-5 text-center">
            <h2 class="h5 text-primary fw-bold mb-3" data-aos="fade-up" data-aos-delay="100">eCommerce Website Solutions
            </h2>
            <h1 class="display-4 fw-bold mb-4" data-aos="fade-up" data-aos-delay="200">
                eCommerce Website <br>
                <span class="text-gradient">Expertise</span>
            </h1>
            <p class="lead text-muted mx-auto mb-5" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="300">
                Empower your online store through our expert eCommerce solutions. We develop scalable, secure, and visually
                captivating eCommerce websites that drive conversions, simplify inventory management, and provide a seamless
                shopping experience for your clientele.
            </p>
            <div data-aos="fade-up" data-aos-delay="400">
                <a href="<?php echo e(route('contact')); ?>" class="btn btn-primary btn-lg px-5 py-3 rounded-pill">
                    Request a Bespoke Quote
                </a>
            </div>
        </div>
    </section>

    <section class="services-detail py-5" data-aos="fade-up">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-4">
                    Enhance Your Online Performance with our eCommerce <br>
                    Design & Development <span class="text-gradient">Solutions</span>
                </h2>
            </div>

            <div class="row g-4">
                <!-- Custom E-commerce Web Design -->
                <div class="col-lg-8" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-card-detail p-4 bg-white border rounded-3 shadow-sm h-100">
                        <div class="row align-items-center">
                            <div class="col-md-8">
                                <h4 class="fw-bold mb-3">Bespoke eCommerce Web Design</h4>
                                <p class="text-muted">
                                    Our bespoke eCommerce web design service crafts unique online stores that mirror your
                                    brand identity and satisfy your specific commercial requirements.
                                </p>
                                <a href="#" class="text-primary text-decoration-none fw-bold">Read More <i
                                        class="fas fa-arrow-right ms-1"></i></a>
                            </div>
                            <div class="col-md-4 text-center">
                                <img src="<?php echo e(asset('assets/ecom service (1).png')); ?>" alt="Custom E-commerce Web Design"
                                    class="img-fluid">
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="row g-4 h-100">
                        <!-- Platform-Based Development -->
                        <div class="col-12">
                            <div class="service-card-detail p-4 bg-white border rounded-3 shadow-sm h-100">
                                <h4 class="fw-bold mb-3">Platform-Specific Development</h4>
                                <p class="text-muted mb-0">
                                    We specialise in utilising leading eCommerce platforms such as Shopify, WooCommerce, and
                                    Magento to construct tailored online stores.
                                </p>
                                <a href="#" class="text-primary text-decoration-none fw-bold mt-2 d-inline-block">Read More
                                    <i class="fas fa-arrow-right ms-1"></i></a>
                            </div>
                        </div>
                        <!-- Hire E-commerce Designer -->
                        <div class="col-12">
                            <div
                                class="service-card-detail p-4 bg-primary border rounded-3 shadow-sm h-100 d-flex flex-column justify-content-center">
                                <h4 class="fw-bold mb-3 text-white">Hire a Specialist eCommerce Designer</h4>
                                <a href="<?php echo e(route('contact')); ?>"
                                    class="btn btn-light rounded-pill w-100 fw-bold text-primary">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Responsive & Mobile-Friendly Stores -->
                <div class="col-12" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-card-detail p-4 bg-white border rounded-3 shadow-sm">
                        <div class="row align-items-center">
                            <div class="col-lg-4 text-center">
                                <img src="<?php echo e(asset('assets/ecom service (2).png')); ?>" alt="Responsive & Mobile-Friendly"
                                    class="img-fluid">
                            </div>
                            <div class="col-lg-8">
                                <h4 class="fw-bold mb-3">Responsive & Mobile-Optimised Stores</h4>
                                <p class="text-muted mb-0">
                                    Our responsive and mobile-optimised eCommerce stores deliver an ideal shopping
                                    experience across all devices. This approach ensures effortless navigation and seamless
                                    access to your product range.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="platforms py-5 bg-primary-ultra-light" data-aos="fade-up">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 text-center text-lg-start mb-4 mb-lg-0">
                    <h2 class="fw-bold mb-3">Maximise Your Visibility on Major Search Platforms!</h2>
                    <p class="text-muted">Establish your presence where it matters most! Optimise your online visibility and
                        attract a broader audience on premier search platforms effortlessly.</p>
                </div>
                <div class="col-lg-6">
                    <div class="row g-3 justify-content-center">
                        <?php
                            $platforms = [
                                'wordpress.svg' => 'WordPress',
                                'html-css.svg' => 'HTML CSS JS',
                                'shopify.svg' => 'Shopify',
                                'woocommerce.svg' => 'WooCommerce'
                            ];
                        ?>

                        <?php $__currentLoopData = $platforms; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $icon => $name): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <div class="col-6 col-md-3" data-aos="fade-up" data-aos-delay="<?php echo e($loop->index * 50); ?>">
                                <div class="platform-card p-3 bg-white border rounded-3 shadow-sm text-center">
                                    <img src="<?php echo e(asset('assets/' . $icon)); ?>" alt="<?php echo e($name); ?>" class="img-fluid mb-2"
                                        style="height: 40px;">
                                    <p class="small mb-0 text-dark fw-bold"><?php echo e($name); ?></p>
                                </div>
                            </div>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="portfolio-showcase py-5" data-aos="fade-up">
        <div class="container">
            <div class="text-center mb-5">
                <h2 class="display-5 fw-bold mb-4">How Our eCommerce Solutions <span class="text-gradient">Drive Commercial
                        Growth</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Success stories demonstrating how our eCommerce website solutions have empowered organisations to
                    achieve their commercial goals and significantly enhance sales performance.
                </p>
            </div>

            <div class="row g-4 portfolio-grid">
                <?php for($i = 1; $i <= 9; $i++): ?>
                    <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="<?php echo e($i * 50); ?>">
                        <div class="portfolio-card h-100">
                            <div class="portfolio-image-wrapper">
                                <img src="<?php echo e(asset('assets/ecom  (' . $i . ').png')); ?>" alt="Ecommerce Portfolio <?php echo e($i); ?>"
                                    class="portfolio-image" loading="lazy" width="400" height="240">
                                <div class="portfolio-overlay">
                                    <div class="portfolio-content">
                                        <span class="portfolio-category badge bg-primary mb-2">
                                            eCommerce
                                        </span>
                                        <h3 class="h5 fw-bold mb-2 text-white">eCommerce Store <?php echo e($i); ?></h3>
                                        <a href="<?php echo e(route('portfolio')); ?>" class="btn btn-outline-light btn-sm rounded-pill">
                                            View Details <i class="fas fa-arrow-right ms-2"></i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-info p-4">
                                <h3 class="h6 fw-bold mb-2">Bespoke Store Design</h3>
                                <p class="text-muted small mb-0">Comprehensive eCommerce solution for modern commercial ventures
                                </p>
                            </div>
                        </div>
                    </div>
                <?php endfor; ?>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
    <style>
        .hero-service-detail {
            background-color: var(--background-color);
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85)),
                url("https://images.unsplash.com/photo-1441986300917-64674bd600d8?auto=format&fit=crop&q=80&w=2070");
            background-size: cover;
            background-position: center;
            min-height: 50vh;
            display: flex;
            align-items: center;
            position: relative;
        }

        .hero-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 86c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm66 3c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-46-71c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm20 31c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%239929ea' fill-opacity='0.03' fill-rule='evenodd'/%3E%3C/svg%3E");
            opacity: 1;
            pointer-events: none;
        }

        .text-gradient {
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .service-card-detail {
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
        }

        .service-card-detail:hover {
            border-color: var(--primary-color);
            transform: translateY(-5px);
            box-shadow: var(--shadow-lg);
        }

        .platform-card {
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
        }

        .platform-card:hover {
            border-color: var(--primary-color);
            transform: translateY(-3px);
        }

        .portfolio-card {
            background: white;
            border-radius: 16px;
            transition: var(--transition-smooth);
            border: 1px solid var(--border-light);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            height: 100%;
        }

        .portfolio-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-xl);
        }

        .portfolio-image-wrapper {
            position: relative;
            overflow: hidden;
            height: 240px;
        }

        .portfolio-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .portfolio-card:hover .portfolio-image {
            transform: scale(1.05);
        }

        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
            display: flex;
            align-items: flex-end;
            padding: 2rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .portfolio-card:hover .portfolio-overlay {
            opacity: 1;
        }

        .portfolio-content {
            transform: translateY(20px);
            transition: transform 0.3s ease;
        }

        .portfolio-card:hover .portfolio-content {
            transform: translateY(0);
        }

        .portfolio-info {
            padding: 1.5rem;
        }

        @media (max-width: 767.98px) {
            .hero-service-detail {
                min-height: auto;
                padding: 4rem 0;
            }

            .platform-card {
                padding: 1rem;
            }

            .portfolio-image-wrapper {
                height: 200px;
            }
        }
    </style>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/unitedwe/brand4.unitedwebdesign.co.uk/brand4/resources/views/pages/services-ecom.blade.php ENDPATH**/ ?>