

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

<?php $__env->startPush('styles'); ?>
    <style>
        /* About Page Specific Styles */
        .hero-about {
            background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.85) 100%),
                url('<?php echo e(asset("assets/service-hero-bg.png")); ?>');
            background-size: cover;
            background-position: center;
            min-height: 70vh;
            display: flex;
            align-items: center;
        }

        .story-card {
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--text-200);
            padding: 2rem;
            transition: all var(--transition-normal);
            height: 100%;
        }

        .story-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-500);
        }

        .story-card .number {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 36px;
            height: 36px;
            background: var(--primary-500);
            color: white;
            border-radius: var(--radius-full);
            font-weight: 700;
            margin-right: 0.75rem;
        }

        .team-card {
            text-align: center;
            padding: 2rem;
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--text-200);
            transition: all var(--transition-normal);
        }

        .team-card:hover {
            transform: translateY(-8px);
            box-shadow: var(--shadow-xl);
            border-color: var(--primary-500);
        }

        .team-avatar {
            width: 120px;
            height: 120px;
            border-radius: var(--radius-full);
            object-fit: cover;
            margin: 0 auto 1.5rem;
            border: 4px solid var(--primary-100);
        }

        .value-card {
            text-align: center;
            padding: 2rem;
            background: var(--bg-white);
            border-radius: var(--radius-lg);
            border: 1px solid var(--text-200);
            transition: all var(--transition-normal);
        }

        .value-card:hover {
            background: var(--primary-50);
            border-color: var(--primary-300);
            transform: translateY(-4px);
        }

        .value-icon {
            width: 64px;
            height: 64px;
            background: var(--primary-100);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }

        .value-icon i {
            font-size: 1.5rem;
            color: var(--primary-500);
        }

        @media (max-width: 768px) {
            .hero-about {
                min-height: 60vh;
            }

            .story-card {
                padding: 1.5rem;
            }

            .team-card {
                padding: 1.5rem;
            }
        }
    </style>
<?php $__env->stopPush(); ?>

<?php $__env->startSection('content'); ?>
    <!-- Hero Section -->
    <section class="hero-about position-relative">
        <!-- Glow Effects -->
        <div class="glow-effect glow-primary glow-top-right"></div>
        <div class="glow-effect glow-primary glow-bottom-left"></div>

        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <h1 class="display-3 fw-bold text-white mb-4">
                        A Truly Integrated <span class="text-gradient">Design</span> Agency
                    </h1>
                    <p class="lead text-light opacity-90 mb-0">
                        Welcome to DIGITAL STUDIO2, where collaboration, expertise, and client-centricity
                        intersect to shape the future of digital innovation.
                    </p>
                </div>
            </div>
        </div>
    </section>

    <!-- What We Do -->
    <section class="py-5">
        <div class="container">
            <div class="row justify-content-center text-center" data-aos="fade-up">
                <div class="col-lg-8">
                    <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                        Our Mission
                    </span>
                    <h2 class="mb-4">What <span class="text-gradient">We Do</span></h2>
                    <p class="lead text-muted mb-5">
                        Leveraging our extensive experience, professional dedication, and industry-leading talent,
                        we deliver superior results for our clients. We offer a comprehensive suite of services,
                        including web development, e-commerce solutions, custom logo design, application development,
                        and illustrative design.
                    </p>
                    <a href="<?php echo e(route('contact')); ?>" class="btn btn-primary btn-lg">
                        Let's Get Started
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-4 col-6" data-aos="fade-up">
                    <div class="stat-card text-center">
                        <div class="stat-number">200+</div>
                        <div class="stat-label">Happy Clients</div>
                    </div>
                </div>
                <div class="col-md-4 col-6" data-aos="fade-up" data-aos-delay="100">
                    <div class="stat-card text-center">
                        <div class="stat-number">280+</div>
                        <div class="stat-label">Projects Delivered</div>
                    </div>
                </div>
                <div class="col-md-4 col-6" data-aos="fade-up" data-aos-delay="200">
                    <div class="stat-card text-center">
                        <div class="stat-number">100%</div>
                        <div class="stat-label">Satisfaction Rate</div>
                    </div>
                </div>
                <div class="col-md-6 col-6" data-aos="fade-up" data-aos-delay="300">
                    <div class="stat-card text-center">
                        <div class="stat-number">420K</div>
                        <div class="stat-label">Social Followers</div>
                    </div>
                </div>
                <div class="col-md-6 col-6" data-aos="fade-up" data-aos-delay="400">
                    <div class="stat-card text-center">
                        <div class="stat-number">10+</div>
                        <div class="stat-label">Years Experience</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Story -->
    <section class="py-5">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Story
                </span>
                <h2 class="mb-4">Our Journey of <span class="text-gradient">Innovation</span></h2>
                <p class="text-muted mx-auto" style="max-width: 800px">
                    At DIGITAL STUDIO2, we believe that every successful project begins with a compelling vision.
                    Our journey started with a commitment to redefine the digital landscape through creativity,
                    innovation, and technical excellence.
                </p>
            </div>

            <div class="row g-4">
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="story-card">
                        <h4 class="fw-bold mb-3">
                            <span class="number">01</span>
                            Design Excellence
                        </h4>
                        <p class="text-muted mb-0">
                            Our talented designers believe that aesthetics fundamentally shape digital interaction.
                            Founded on a passion for usability, we craft visually stunning and intuitive interfaces.
                        </p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="story-card">
                        <h4 class="fw-bold mb-3">
                            <span class="number">02</span>
                            Engineering Precision
                        </h4>
                        <p class="text-muted mb-0">
                            Our engineering team focuses on building robust foundations of digital innovation,
                            transforming complex ideas into scalable reality with deep expertise in development.
                        </p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="story-card">
                        <h4 class="fw-bold mb-3">
                            <span class="number">03</span>
                            Project Management
                        </h4>
                        <p class="text-muted mb-0">
                            Effective project management is our success core, ensuring clear communication,
                            meticulous organisation, and efficient execution for every project.
                        </p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="400">
                    <div class="story-card">
                        <h4 class="fw-bold mb-3">
                            <span class="number">04</span>
                            Collaboration
                        </h4>
                        <p class="text-muted mb-0">
                            At DIGITAL STUDIO2, our departments form a cohesive and collaborative unit,
                            embracing the power of combined expertise for exceptional digital products.
                        </p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="500">
                    <div class="story-card">
                        <h4 class="fw-bold mb-3">
                            <span class="number">05</span>
                            Client Focus
                        </h4>
                        <p class="text-muted mb-0">
                            We measure success by our commitment to clients, placing them at the centre of
                            everything we do and understanding their unique challenges.
                        </p>
                    </div>
                </div>
                <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="600">
                    <div class="story-card">
                        <h4 class="fw-bold mb-3">
                            <span class="number">06</span>
                            Growth & Innovation
                        </h4>
                        <p class="text-muted mb-0">
                            With each project, our reputation grows. We help startups and established
                            enterprises succeed through continuous innovation and quality delivery.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Values Section -->
    <section class="py-5 bg-light">
        <div class="container">
            <div class="text-center mb-5" data-aos="fade-up">
                <span class="badge bg-primary-100 text-primary mb-3 px-3 py-2 rounded-pill">
                    Our Values
                </span>
                <h2 class="mb-4">What <span class="text-gradient">Drives Us</span></h2>
            </div>

            <div class="row g-4">
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-lightbulb"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Innovation</h4>
                        <p class="text-muted mb-0">
                            We constantly push boundaries and embrace new technologies to deliver
                            cutting-edge solutions.
                        </p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="200">
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-handshake"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Integrity</h4>
                        <p class="text-muted mb-0">
                            We build trust through transparency, honesty, and delivering on our promises.
                        </p>
                    </div>
                </div>
                <div class="col-md-4" data-aos="fade-up" data-aos-delay="300">
                    <div class="value-card">
                        <div class="value-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h4 class="fw-bold mb-3">Collaboration</h4>
                        <p class="text-muted mb-0">
                            We work closely with clients, treating them as partners in the creative process.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- CTA Section -->
    <section class="service-cta">
        <div class="cta-pattern"></div>
        <div class="container">
            <div class="row justify-content-center text-center">
                <div class="col-lg-8" data-aos="fade-up">
                    <div class="service-cta-content">
                        <h2 class="text-white mb-4">Ready to Start Your Project?</h2>
                        <p class="text-light mb-5 opacity-90">
                            Join hundreds of satisfied clients who have transformed their digital presence
                            with our expert solutions.
                        </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>
                                Book Consultation
                            </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 Our Work
                            </a>
                        </div>
                    </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/about.blade.php ENDPATH**/ ?>