

<?php $__env->startSection('title', 'Portfolio | DIGITAL STUDIO2'); ?>

<?php $__env->startSection('content'); ?>
    <section class="hero hero-portfolio py-5 position-relative overflow-hidden" data-aos="fade-up">
        <div class="hero-pattern"></div>
        <div class="container py-lg-5 text-center">
            <h1 class="display-4 fw-bold mb-4" data-aos="fade-up" data-aos-delay="100">
                Our <span class="text-primary">Portfolio</span>: Excellence Refined
            </h1>
            <p class="lead text-muted mx-auto mb-4" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="200">
                Seeking design inspiration? Explore our portfolio to witness our creative craftsmanship and innovative
                digital solutions.
            </p>
            <a href="<?php echo e(route('packages')); ?>" class="btn btn-primary btn-lg px-5 py-3 rounded-pill" data-aos="fade-up"
                data-aos-delay="300">
                Begin Your Project Today
            </a>
        </div>
    </section>

    <section class="portfolio-showcase py-5" data-aos="fade-up">
        <div class="container">
            <div class="text-center mb-6">
                <h2 class="display-5 fw-bold mb-3" data-aos="fade-up">
                    Our <span class="text-gradient">Showcase</span>
                </h2>
                <p class="lead text-muted mx-auto" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                    At DIGITAL STUDIO2, we breathe life into your concepts through imaginative design and forward-thinking
                    digital solutions. Explore our body of work and discover how we help brands distinguish themselves.
                </p>
            </div>

            <!-- Filter Menu -->
            <div class="portfolio-filter d-flex flex-wrap justify-content-center gap-2 mb-5" data-aos="fade-up"
                data-aos-delay="200">
                <button class="btn btn-outline-primary filter-btn active rounded-pill px-4" data-filter="all">All</button>
                <button class="btn btn-outline-primary filter-btn rounded-pill px-4" data-filter="logo">Logo Design</button>
                <button class="btn btn-outline-primary filter-btn rounded-pill px-4" data-filter="web">Web
                    Development</button>
                <button class="btn btn-outline-primary filter-btn rounded-pill px-4"
                    data-filter="ecommerce">eCommerce</button>
                <button class="btn btn-outline-primary filter-btn rounded-pill px-4" data-filter="app">Mobile
                    Application</button>
                <button class="btn btn-outline-primary filter-btn rounded-pill px-4" data-filter="branding">Brand
                    Identity</button>
                <button class="btn btn-outline-primary filter-btn rounded-pill px-4" data-filter="seo">SEO</button>
            </div>

            <!-- Portfolio Grid -->
            <div class="row g-4 portfolio-grid">
                <?php
                    $portfolioItems = [
                        ['img' => asset('assets/show-case 1.png'), 'category' => 'web', 'title' => 'Bespoke Website Architecture', 'link' => 'services', 'desc' => 'Professional website with a modern responsive design'],
                        ['img' => asset('assets/ecom  (1).png'), 'category' => 'ecommerce', 'title' => 'eCommerce Web Solutions', 'link' => 'services.ecom', 'desc' => 'Full-featured eCommerce solution'],
                        ['img' => asset('assets/brand (1).png'), 'category' => 'branding', 'title' => 'Strategic Corporate Branding', 'link' => 'services.brand', 'desc' => 'Comprehensive brand identity design'],
                        ['img' => asset('assets/logo (1).png'), 'category' => 'logo', 'title' => 'Bespoke Brand Identity', 'link' => 'services.logo', 'desc' => 'Creative logo design services'],
                        ['img' => asset('assets/App Service 1.png'), 'category' => 'app', 'title' => 'Technical Mobile Solution', 'link' => 'services.app', 'desc' => 'Modern mobile application design'],
                        ['img' => asset('assets/SEO Service (1).png'), 'category' => 'seo', 'title' => 'Search Engine Performance', 'link' => 'services.seo', 'desc' => 'Engaging and effective search optimization'],
                        ['img' => asset('assets/ecom  (2).png'), 'category' => 'ecommerce', 'title' => 'High-Traffic Retail Platform', 'link' => 'services.ecom', 'desc' => 'High-performance online retail platform'],
                        ['img' => asset('assets/show-case 2.png'), 'category' => 'web', 'title' => 'Corporate Business Website', 'link' => 'services', 'desc' => 'Sophisticated professional business website'],
                        ['img' => asset('assets/App service ca.png'), 'category' => 'app', 'title' => 'Enterprise Mobile Ecosystem', 'link' => 'services.app', 'desc' => 'Bespoke health and fitness application'],
                        ['img' => asset('assets/logo (2).png'), 'category' => 'logo', 'title' => 'Visual Identity Transformation', 'link' => 'services.logo', 'desc' => 'Clean, modern, and memorable logo design'],
                        ['img' => asset('assets/brand (2).png'), 'category' => 'branding', 'title' => 'Bespoke Visual Systems', 'link' => 'services.brand', 'desc' => 'Complete corporate identity solution'],
                        ['img' => asset('assets/SEO Service (2).png'), 'category' => 'seo', 'title' => 'Digital Visibility Strategy', 'link' => 'services.seo', 'desc' => 'Expert search marketing strategy']
                    ];
                ?>

                <?php $__currentLoopData = $portfolioItems; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $index => $item): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="col-md-6 col-lg-4 portfolio-item" data-category="<?php echo e($item['category']); ?>" data-aos="fade-up"
                        data-aos-delay="<?php echo e(($index % 6) * 100); ?>">
                        <div class="portfolio-card h-100">
                            <div class="portfolio-image-wrapper">
                                <img src="<?php echo e($item['img']); ?>" alt="<?php echo e($item['title']); ?>" class="portfolio-image" loading="lazy">
                                <div class="portfolio-overlay">
                                    <div class="portfolio-content">
                                        <span class="portfolio-category badge bg-primary mb-2">
                                            <?php echo e(ucfirst($item['category'])); ?>

                                        </span>
                                        <h3 class="h5 fw-bold mb-2 text-white"><?php echo e($item['title']); ?></h3>
                                        <a href="<?php echo e(route($item['link'])); ?>" 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"><?php echo e($item['title']); ?></h3>
                                <p class="text-muted small mb-0"><?php echo e($item['desc']); ?></p>
                            </div>
                        </div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>

            <div class="text-center mt-5" data-aos="fade-up">
                <button id="load-more" class="btn btn-outline-primary px-5 py-3 rounded-pill">
                    View More Projects
                </button>
            </div>
        </div>
    </section>

    <section class="digital-journey py-5 bg-primary-ultra-light" data-aos="fade-up">
        <div class="container text-center">
            <div class="mb-4" data-aos="fade-down">
                <span class="badge rounded-pill bg-white text-primary px-3 py-2 border border-primary-light shadow-sm">
                    Our Process
                </span>
            </div>
            <h2 class="display-5 fw-bold mb-4" data-aos="fade-up">
                How DIGITAL STUDIO2 Advances <span class="text-gradient">Your Digital Journey</span>
            </h2>
            <p class="mx-auto mb-5 text-muted lead" style="max-width: 800px;" data-aos="fade-up" data-aos-delay="100">
                At DIGITAL STUDIO2, we streamline your digital transformation with expert-led services meticulously tailored
                to your goals.
            </p>

            <div class="row g-4">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="process-card h-100">
                        <div class="process-number">01</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Provide Your Brief</h3>
                        <p class="text-muted mb-0">
                            Begin by completing our brief project form with your full requirements. The more detail you
                            provide, the better we can realise your vision.
                        </p>
                    </div>
                </div>

                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="process-card h-100">
                        <div class="process-number">02</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Confirm Your Booking</h3>
                        <p class="text-muted mb-0">
                            Select the ideal package for your requirements and complete our secure checkout. Your project
                            will then be assigned to our specialist team.
                        </p>
                    </div>
                </div>

                <div class="col-md-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="process-card h-100">
                        <div class="process-number">03</div>
                        <div class="process-icon mb-4">
                            <i class="fas fa-rocket"></i>
                        </div>
                        <h3 class="h4 fw-bold mb-3">Bespoke Creation & Launch</h3>
                        <p class="text-muted mb-0">
                            We proceed with the creative process, providing regular updates throughout. Upon completion, you
                            will receive the final deliverables with the opportunity for feedback.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>

<?php $__env->startPush('styles'); ?>
    <style>
        .hero-portfolio {
            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-1497215728101-856f4ea42174?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;
        }

        .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;
        }

        .portfolio-category {
            font-size: 0.75rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .filter-btn.active {
            background-color: var(--primary-color) !important;
            border-color: var(--primary-color) !important;
            color: white !important;
        }

        .portfolio-item {
            display: block;
        }

        .mb-6 {
            margin-bottom: 4rem;
        }

        .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;
        }

        @media (max-width: 767.98px) {
            .mb-6 {
                margin-bottom: 3rem;
            }

            .portfolio-image-wrapper {
                height: 200px;
            }
        }

        /* How We Work Section */
        .process-card {
            text-align: center;
            padding: 2.5rem 2rem;
            background: white;
            border-radius: 16px;
            border: 1px solid var(--primary-light);
            transition: var(--transition-smooth);
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(153, 41, 234, 0.05);
        }

        .process-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(153, 41, 234, 0.1);
            border-color: var(--primary-color);
        }

        .process-number {
            position: absolute;
            top: 1rem;
            left: 1rem;
            font-size: 3rem;
            font-weight: 900;
            color: var(--primary-ultra-light);
            line-height: 1;
            z-index: 0;
            opacity: 0.5;
        }

        .process-icon {
            width: 80px;
            height: 80px;
            background: var(--primary-ultra-light);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            transition: var(--transition-smooth);
            position: relative;
            z-index: 1;
        }

        .process-card:hover .process-icon {
            background: var(--primary-color);
            transform: rotate(10deg);
        }

        .process-icon i {
            font-size: 2rem;
            color: var(--primary-color);
            transition: var(--transition-smooth);
        }

        .process-card:hover .process-icon i {
            color: white !important;
        }

        .bg-primary-ultra-light {
            background-color: #f3e8fd !important;
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startPush('scripts'); ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // Portfolio Filtering
            const filterBtns = document.querySelectorAll('.filter-btn');
            const portfolioItems = document.querySelectorAll('.portfolio-item');
            const loadMoreBtn = document.getElementById('load-more');
            let visibleItems = 6;

            filterBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    // Update active button
                    filterBtns.forEach(b => b.classList.remove('active'));
                    this.classList.add('active');

                    const filter = this.dataset.filter;

                    // Filter items
                    portfolioItems.forEach(item => {
                        if (filter === 'all' || item.dataset.category === filter) {
                            item.style.display = 'block';
                        } else {
                            item.style.display = 'none';
                        }
                    });
                });
            });

            // Load More functionality
            if (loadMoreBtn) {
                loadMoreBtn.addEventListener('click', function () {
                    const hiddenItems = Array.from(portfolioItems).slice(visibleItems, visibleItems + 3);
                    hiddenItems.forEach(item => {
                        item.style.display = 'block';
                    });
                    visibleItems += 3;

                    // Hide button if no more items
                    if (visibleItems >= portfolioItems.length) {
                        loadMoreBtn.style.display = 'none';
                    }
                });
            }

            // Initially show only first 6 items
            portfolioItems.forEach((item, index) => {
                if (index >= 6) {
                    item.style.display = 'none';
                }
            });
        });
    </script>
<?php $__env->stopPush(); ?>
<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\maijitech-projects\company-projects\new brands\laravel1\brand4\resources\views/pages/portfolio.blade.php ENDPATH**/ ?>