

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

<?php $__env->startPush('styles'); ?>
    <style>
        .brand-showcase {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
            margin: 2rem 0;
        }

        .brand-item {
            border-radius: var(--radius-lg);
            overflow: hidden;
            position: relative;
            height: 300px;
        }

        .brand-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.8s ease;
        }

        .brand-item:hover img {
            transform: scale(1.1);
        }

        .brand-overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, rgba(15, 23, 42, 0.9), transparent);
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 1.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .brand-item:hover .brand-overlay {
            opacity: 1;
        }

        .brand-category {
            color: var(--primary-500);
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 0.5rem;
        }

        .brand-title {
            color: white;
            font-size: 1.25rem;
            font-weight: 700;
        }

        /* Process section styles are now global in app.blade.php */

        @media (max-width: 768px) {
            .brand-showcase {
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }

        @media (max-width: 576px) {
            .brand-showcase {
                grid-template-columns: 1fr;
            }
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <!-- Hero Section -->
    <section class="service-hero">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 text-center">
                    <div class="service-hero-content text-white">
                        <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                            <i class="fas fa-palette me-2"></i> Branding Design
                        </span>
                        <h1 class="display-3 fw-bold mb-4 text-white">
                            Custom Branding Design <br>
                            <span class="text-gradient">Services</span>
                        </h1>
                        <p class="lead mb-5 mx-auto" style="max-width: 800px;">
                            Stand out with bold, memorable branding. At DIGITAL STUDIO2, our custom branding design
                            services help shape your visual identity—from logo creation to brand guidelines—ensuring
                            a consistent and impactful presence across all platforms.
                        </p>
                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            <a href="<?php echo e(route('contact')); ?>" class="btn btn-primary btn-lg">
                                <i class="fas fa-calendar me-2"></i>
                                Request Free Quote
                            </a>
                            <a href="#services" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-eye me-2"></i>
                                View Services
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section id="services" class="service-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Services
                </span>
                <h2 class="mb-4">Branding Design <br><span class="text-gradient">Services</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Comprehensive branding solutions to create a powerful visual identity that resonates with your audience.
                </p>
            </div>

            <div class="row g-4">
                <!-- Social Media Branding -->
                <div class="col-lg-8">
                    <div class="service-card">
                        <div class="service-icon">
                            <i class="fab fa-instagram"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Social Media Branding</h4>
                        <p class="text-muted mb-4">
                            Our social media branding service ensures a consistent and professional presence across all
                            platforms. We design visually appealing templates, cover images, and graphics that align
                            with your brand identity, creating a cohesive look.
                        </p>
                        <div class="d-flex flex-wrap gap-2 mb-4">
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fab fa-facebook me-1"></i> Facebook
                            </span>
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fab fa-instagram me-1"></i> Instagram
                            </span>
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fab fa-twitter me-1"></i> Twitter
                            </span>
                            <span class="badge bg-primary-100 text-primary px-3 py-2">
                                <i class="fab fa-linkedin me-1"></i> LinkedIn
                            </span>
                        </div>
                        <a href="<?php echo e(route('contact')); ?>" class="text-primary fw-semibold d-flex align-items-center gap-2">
                            Get Social Media Branding
                            <i class="fas fa-arrow-right"></i>
                        </a>
                    </div>
                </div>

                <div class="col-lg-4">
                    <div class="row g-4 h-100">
                        <!-- Brand Identity -->
                        <div class="col-12">
                            <div class="service-card h-100">
                                <div class="service-icon">
                                    <i class="fas fa-fingerprint"></i>
                                </div>
                                <h4 class="fw-bold mb-3">Brand Identity Development</h4>
                                <p class="text-muted mb-4">
                                    Our brand identity development service creates a unique visual identity that resonates
                                    with your target audience.
                                </p>
                            </div>
                        </div>

                        <!-- CTA Card -->
                        <div class="col-12">
                            <div class="service-card bg-primary text-white">
                                <h4 class="fw-bold mb-3">Hire Branding Designer</h4>
                                <p class="text-light opacity-90 mb-4">
                                    Get dedicated branding experts to craft your visual identity.
                                </p>
                                <a href="<?php echo e(route('contact')); ?>" class="btn btn-light btn-lg w-100 fw-bold">
                                    Get Started
                                </a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Packaging Design -->
                <div class="col-12">
                    <div class="service-card">
                        <div class="row align-items-center">
                            <div class="col-lg-5 mb-4 mb-lg-0">
                                <img src="<?php echo e(asset('assets/brand service (1).png')); ?>" alt="Packaging Design"
                                    class="img-fluid rounded-3 shadow"
                                    onerror="this.src='https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                            </div>
                            <div class="col-lg-7">
                                <h4 class="fw-bold mb-3">Packaging Design</h4>
                                <p class="text-muted mb-4">
                                    Elevate your product presentation with our bespoke packaging design services. We create
                                    visually striking, practical packaging that protects your products while reinforcing
                                    your
                                    brand identity and capturing customer attention.
                                </p>
                                <div class="d-flex flex-wrap gap-2">
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-box me-1"></i> Product Packaging
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-tag me-1"></i> Label Design
                                    </span>
                                    <span class="badge bg-primary-100 text-primary px-3 py-2">
                                        <i class="fas fa-shopping-bag me-1"></i> Retail Packaging
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Showcase Section -->
    <section class="service-section bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Work
                </span>
                <h2 class="mb-4">Branding Design <br><span class="text-gradient">Portfolio</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Discover how our custom branding design services have empowered businesses to define their identity.
                </p>
            </div>

            <div class="brand-showcase">
                <?php for($i = 1; $i <= 9; $i++): ?>
                    <div class="brand-item">
                        <img src="<?php echo e(asset('assets/brand (' . $i . ').png')); ?>" alt="Branding Project <?php echo e($i); ?>"
                            onerror="this.src='https://images.unsplash.com/photo-1634942537034-2531766767d1?q=80&w=2026&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'">
                        <div class="brand-overlay">
                            <div class="brand-category">Brand Identity</div>
                            <h3 class="brand-title">Project <?php echo e($i); ?></h3>
                        </div>
                    </div>
                <?php endfor; ?>
            </div>
        </div>
    </section>

    <!-- Process Section -->
    <section class="service-section">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Process
                </span>
                <h2 class="mb-4">Branding Design <br><span class="text-gradient">Process</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    Our systematic approach ensures your brand identity is unique, memorable, and effective.
                </p>
            </div>

            <div class="row">
                <div class="col-lg-8 mx-auto">
                    <div class="process-list">
                        <div class="process-item">
                            <h5 class="fw-bold mb-2">Discovery & Research</h5>
                            <p class="text-muted mb-0">We analyse your business, competitors, and target audience to
                                understand your brand positioning.</p>
                        </div>
                        <div class="process-item">
                            <h5 class="fw-bold mb-2">Strategy Development</h5>
                            <p class="text-muted mb-0">We create a comprehensive branding strategy including tone of voice,
                                messaging, and visual direction.</p>
                        </div>
                        <div class="process-item">
                            <h5 class="fw-bold mb-2">Visual Identity Creation</h5>
                            <p class="text-muted mb-0">Designing logos, colour palettes, typography, and visual elements
                                that represent your brand.</p>
                        </div>
                        <div class="process-item">
                            <h5 class="fw-bold mb-2">Application Design</h5>
                            <p class="text-muted mb-0">Implementing the brand identity across all touchpoints including
                                stationery, packaging, and digital assets.</p>
                        </div>
                        <div class="process-item">
                            <h5 class="fw-bold mb-2">Brand Guidelines</h5>
                            <p class="text-muted mb-0">Creating comprehensive guidelines to ensure consistent brand
                                application across all platforms.</p>
                        </div>
                        <div class="process-item">
                            <h5 class="fw-bold mb-2">Launch & Support</h5>
                            <p class="text-muted mb-0">Launching your new brand and providing ongoing support for
                                implementation.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technologies Section -->
    <section class="service-section bg-light">
        <div class="container">
            <div class="text-center mb-5">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Tools We Use
                </span>
                <h2 class="mb-4">Design <br><span class="text-gradient">Technologies</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px;">
                    We use industry-standard tools to create stunning and effective branding solutions.
                </p>
            </div>

            <div class="tech-grid">
                <?php
                    $tools = [
                        ['name' => 'Adobe Illustrator', 'icon' => 'illustrator.svg'],
                        ['name' => 'Adobe Photoshop', 'icon' => 'photoshop.svg'],
                        ['name' => 'Adobe InDesign', 'icon' => 'indesign.svg'],
                        ['name' => 'Figma', 'icon' => 'figma.svg'],
                        ['name' => 'Sketch', 'icon' => 'sketch.svg'],
                        ['name' => 'Affinity Designer', 'icon' => 'affinity.svg'],
                        ['name' => 'Canva', 'icon' => 'canva.svg'],
                        ['name' => 'Procreate', 'icon' => 'procreate.svg'],
                    ];
                ?>

                <?php $__currentLoopData = $tools; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $tool): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                    <div class="tech-item">
                        <div class="tech-icon">
                            <img src="<?php echo e(asset('assets/' . $tool['icon'])); ?>" alt="<?php echo e($tool['name']); ?>"
                                onerror="this.src='https://via.placeholder.com/48?text=<?php echo e(substr($tool['name'], 0, 2)); ?>'">
                        </div>
                        <div class="tech-name"><?php echo e($tool['name']); ?></div>
                    </div>
                <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="service-cta">
        <div class="cta-pattern"></div>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 text-center" data-aos="fade-up">
                    <div class="service-cta-content">
                        <h2 class="display-5 fw-bold mb-4">Ready to Build Your Brand?</h2>
                        <p class="lead mb-5 text-light opacity-90">
                            Let's create a powerful brand identity that sets you apart from the competition.
                        </p>

                        <div class="d-flex flex-wrap gap-3 justify-content-center">
                            <a href="<?php echo e(route('contact')); ?>" class="btn btn-primary btn-lg">
                                <i class="fas fa-calendar me-2"></i>
                                Start Branding Project
                            </a>
                            <a href="<?php echo e(route('home')); ?>#portfolio" class="btn btn-outline-light btn-lg">
                                <i class="fas fa-eye me-2"></i>
                                View Portfolio
                            </a>
                        </div>

                        <p class="mt-4 mb-0 text-light opacity-75">
                            <i class="fas fa-star me-1"></i> Free brand audit included
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>
<?php $__env->stopSection(); ?>
<?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\brand3\resources\views/pages/services-brand.blade.php ENDPATH**/ ?>