<?php $__env->startSection('content'); ?>

<!-- ━━━━━━━━ 1. BANNER ━━━━━━━━ -->
<section class="port-banner d-none" id="portfolio" aria-label="Portfolio banner">
  <div class="port-banner-dots" aria-hidden="true"></div>
  <div class="port-banner-bg-text" aria-hidden="true">Work</div>

  <div class="container">
    <div class="row align-items-center gy-5">

      <!-- Left: copy -->
      <div class="col-lg-6 port-banner-content">
        <div class="port-banner-eyebrow" data-anim="fade-up">
          <div class="port-banner-eyebrow-line"></div>
          Selected Work
        </div>

        <h1 class="port-banner-h1" data-anim="fade-up" data-delay="100">
          Problems Solved.<br>
          <em>Products Built.</em>
        </h1>

        <p class="port-banner-sub" data-anim="fade-up" data-delay="200">
          A curated selection of projects where engineering rigour, clear thinking, and honest collaboration produced software that actually works.
        </p>

        <div class="port-count-strip" data-anim="fade-up" data-delay="300" role="region" aria-label="Portfolio statistics">
          <div class="port-count-item">
            <span class="port-count-num">50+</span>
            <span class="port-count-lbl">Projects Shipped</span>
          </div>
          <div class="port-count-divider" aria-hidden="true"></div>
          <div class="port-count-item">
            <span class="port-count-num">12</span>
            <span class="port-count-lbl">Industries</span>
          </div>
          <div class="port-count-divider" aria-hidden="true"></div>
          <div class="port-count-item">
            <span class="port-count-num">98%</span>
            <span class="port-count-lbl">On-Time Delivery</span>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ 2. FEATURED PROJECT ━━━━━━━━ -->
<section class="port-featured-sec d-none" id="featured" aria-label="Featured project">
  <div class="container">
    <div class="text-center mb-5">
      <div class="label-bw" data-anim="blur-in"><i class="fas fa-star"></i> Featured Case</div>
      <h2 class="sec-h h-dk" data-anim="fade-up" data-delay="100">Project <span style="font-weight:300;color:rgba(255,255,255,.28)">Spotlight</span></h2>
    </div>

    <div class="port-featured-wrap" data-anim="scale-in" data-delay="100">

      <!-- Left: monochrome image -->
      <div class="port-featured-img">
        <img
          src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&q=80"
          alt="NexaOps — logistics intelligence platform dashboard"
          loading="lazy"
        >
        <div class="port-featured-badge">
          <span class="port-featured-badge-dot"></span>
          Featured Project
        </div>
      </div>

      <!-- Right: content -->
      <div class="port-featured-content">
        <span class="port-featured-num">Case Study — 01</span>
        <h3 class="port-featured-title">NexaOps Logistics Intelligence Platform</h3>
        <p class="port-featured-desc">
          A full-stack SaaS platform built for a tier-1 logistics operator managing 2,000+ daily shipments. Replaced a patchwork of spreadsheets and legacy software with a real-time operations hub — from route optimisation to automated invoicing.
        </p>

        <div class="port-featured-metrics" role="region" aria-label="Project metrics">
          <div class="port-featured-metric">
            <span class="port-featured-metric-num">40%</span>
            <span class="port-featured-metric-lbl">Ops Cost Reduction</span>
          </div>
          <div class="port-featured-metric">
            <span class="port-featured-metric-num">2K+</span>
            <span class="port-featured-metric-lbl">Daily Shipments</span>
          </div>
          <div class="port-featured-metric">
            <span class="port-featured-metric-num">6mo</span>
            <span class="port-featured-metric-lbl">Time to Launch</span>
          </div>
        </div>

        <div class="port-featured-tags">
          <span class="port-featured-tag">SaaS Platform</span>
          <span class="port-featured-tag">React + Node.js</span>
          <span class="port-featured-tag">PostgreSQL</span>
          <span class="port-featured-tag">AWS</span>
          <span class="port-featured-tag">Logistics</span>
        </div>

        <a href="#case-study" class="port-featured-link">
          Read Case Study <i class="fas fa-arrow-right"></i>
        </a>
      </div>

    </div>
  </div>
</section>


<!-- ━━━━━━━━ 3. FILTER + GRID ━━━━━━━━ -->
<section class="port-grid-sec" id="projects" aria-label="All projects">
  <div class="container">

    <div class="port-grid-header">
      <div>
        <div class="label-bw-lt" data-anim="blur-in"><i class="fas fa-th-large"></i> All Work</div>
        <h2 class="sec-h h-lt" data-anim="fade-up" data-delay="100" style="margin-bottom:.3rem">Every Project,<br><span class="light-text-grad">Every Discipline</span></h2>
      </div>
      <span class="port-grid-total" data-anim="fade-up" data-delay="150" id="gridTotal">Showing 6 projects</span>
    </div>

    <!-- Filter pills -->
    <div class="port-filters" role="group" aria-label="Filter projects by category" data-anim="fade-up" data-delay="200">
      <button class="port-filter-btn active" data-filter="all">
        All <span class="port-filter-count">6</span>
      </button>
      <button class="port-filter-btn" data-filter="web">
        Web <span class="port-filter-count">2</span>
      </button>
      <button class="port-filter-btn" data-filter="mobile">
        Mobile <span class="port-filter-count">1</span>
      </button>
      <button class="port-filter-btn" data-filter="saas">
        SaaS <span class="port-filter-count">2</span>
      </button>
      <button class="port-filter-btn" data-filter="enterprise">
        Enterprise <span class="port-filter-count">1</span>
      </button>
    </div>

    <!-- Project grid -->
    <div class="port-grid" id="portGrid">

      <!-- 01 Custom Business Applications -->
      <article class="port-item" data-category="web" data-anim="fade-up" data-delay="100">
        <div class="port-img">
          <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&q=80" alt="Custom Business Applications" loading="lazy">
          <span class="port-cat"><span class="port-cat-dot"></span>Web App</span>
          <div class="port-arrow"><i class="fas fa-arrow-right"></i></div>
        </div>
        <div class="port-content">
          <span class="port-label">01 — Custom Development</span>
          <h3 class="port-h">Custom Business Applications</h3>
          <p class="port-p">Tailored software that automates workflows, manages data, and empowers teams to work smarter and faster — built around your exact processes.</p>
          <div class="port-tags">
            <span class="port-tag">Workflow Automation</span>
            <span class="port-tag">Data Management</span>
            <span class="port-tag">API Integration</span>
          </div>
        </div>
      </article>

      <!-- 02 SaaS Platform -->
      <article class="port-item" data-category="saas" data-anim="fade-up" data-delay="150">
        <div class="port-img">
          <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&q=80" alt="SaaS Platform analytics" loading="lazy">
          <span class="port-cat"><span class="port-cat-dot"></span>SaaS Platform</span>
          <div class="port-arrow"><i class="fas fa-arrow-right"></i></div>
        </div>
        <div class="port-content">
          <span class="port-label">02 — SaaS Platform</span>
          <h3 class="port-h">SaaS Analytics Platform</h3>
          <p class="port-p">Multi-tenant cloud platform with analytics dashboards, billing integration, and seamless third-party APIs at every layer.</p>
          <div class="port-tags">
            <span class="port-tag">Multi-tenant</span>
            <span class="port-tag">Cloud Native</span>
            <span class="port-tag">Analytics</span>
          </div>
        </div>
      </article>

      <!-- 03 Enterprise Systems -->
      <article class="port-item" data-category="enterprise" data-anim="fade-up" data-delay="200">
        <div class="port-img">
          <img src="https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=800&q=80" alt="Enterprise system interface" loading="lazy">
          <span class="port-cat"><span class="port-cat-dot"></span>Enterprise</span>
          <div class="port-arrow"><i class="fas fa-arrow-right"></i></div>
        </div>
        <div class="port-content">
          <span class="port-label">03 — Enterprise Systems</span>
          <h3 class="port-h">Enterprise Resource Platform</h3>
          <p class="port-p">Large-scale solutions handling complex business processes, legacy integrations, and global-scale requirements with robust reliability.</p>
          <div class="port-tags">
            <span class="port-tag">Legacy Integration</span>
            <span class="port-tag">Global Scale</span>
            <span class="port-tag">Security</span>
          </div>
        </div>
      </article>

      <!-- 04 Mobile App -->
      <article class="port-item" data-category="mobile" data-anim="fade-up" data-delay="100">
        <div class="port-img">
          <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800&q=80" alt="Mobile application design" loading="lazy">
          <span class="port-cat"><span class="port-cat-dot"></span>Mobile App</span>
          <div class="port-arrow"><i class="fas fa-arrow-right"></i></div>
        </div>
        <div class="port-content">
          <span class="port-label">04 — Mobile Engineering</span>
          <h3 class="port-h">Field Operations Mobile App</h3>
          <p class="port-p">Offline-first React Native application enabling field teams to log, sync, and manage work orders without a reliable connection.</p>
          <div class="port-tags">
            <span class="port-tag">React Native</span>
            <span class="port-tag">Offline-First</span>
            <span class="port-tag">iOS &amp; Android</span>
          </div>
        </div>
      </article>

      <!-- 05 SaaS Product #2 -->
      <article class="port-item" data-category="saas" data-anim="fade-up" data-delay="150">
        <div class="port-img">
          <img src="https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&q=80" alt="SaaS subscription management" loading="lazy">
          <span class="port-cat"><span class="port-cat-dot"></span>SaaS Platform</span>
          <div class="port-arrow"><i class="fas fa-arrow-right"></i></div>
        </div>
        <div class="port-content">
          <span class="port-label">05 — SaaS Product</span>
          <h3 class="port-h">Subscription Management Suite</h3>
          <p class="port-p">End-to-end SaaS billing and subscription platform serving 5,000+ subscribers, with Stripe integration, dunning flows, and admin controls.</p>
          <div class="port-tags">
            <span class="port-tag">Stripe</span>
            <span class="port-tag">Subscriptions</span>
            <span class="port-tag">Billing</span>
          </div>
        </div>
      </article>

      <!-- 06 Web Portal -->
      <article class="port-item" data-category="web" data-anim="fade-up" data-delay="200">
        <div class="port-img">
          <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&q=80" alt="Developer collaboration portal" loading="lazy">
          <span class="port-cat"><span class="port-cat-dot"></span>Web Portal</span>
          <div class="port-arrow"><i class="fas fa-arrow-right"></i></div>
        </div>
        <div class="port-content">
          <span class="port-label">06 — Web Platform</span>
          <h3 class="port-h">Client Collaboration Portal</h3>
          <p class="port-p">Secure, real-time project collaboration hub giving clients full visibility into timelines, deliverables, approvals, and communications.</p>
          <div class="port-tags">
            <span class="port-tag">Real-Time</span>
            <span class="port-tag">Permissions</span>
            <span class="port-tag">Notifications</span>
          </div>
        </div>
      </article>

    </div><!-- /port-grid -->

  </div>
</section>


<!-- ━━━━━━━━ 4. CASE STUDY PREVIEW ━━━━━━━━ -->
<section class="port-case-sec" id="case-study" aria-label="Case study preview">
  <div class="port-case-bg-text" aria-hidden="true">Case</div>

  <div class="container" style="position:relative;z-index:2">
    <div class="text-center mb-5">
      <div class="label-bw" data-anim="blur-in"><i class="fas fa-file-alt"></i> Case Study</div>
      <h2 class="sec-h h-dk" data-anim="fade-up" data-delay="100">How We Built <span class="dark-text-grad">NexaOps</span></h2>
      <p class="sec-p-dk mx-auto" data-anim="fade-up" data-delay="200" style="max-width:500px">A closer look at the decisions, constraints, and outcomes behind our most complex logistics project.</p>
    </div>

    <div class="port-case-frame" data-anim="scale-in" data-delay="100">

      <!-- Chrome bar -->
      <div class="port-case-topbar">
        <div class="port-case-topbar-dots">
          <div class="port-case-topbar-dot"></div>
          <div class="port-case-topbar-dot"></div>
          <div class="port-case-topbar-dot"></div>
        </div>
        <span class="port-case-topbar-label">NexaOps · Case Study</span>
        <span class="port-case-topbar-label">2024 · Logistics · SaaS</span>
      </div>

      <!-- Two-col content -->
      <div class="port-case-grid">

        <!-- Col left: problem + outcome headline -->
        <div class="port-case-col">
          <span class="port-case-col-label">The Challenge</span>
          <h3 class="port-case-headline">Replace a fragile spreadsheet stack with a real-time operations platform — in six months.</h3>
          <p class="port-case-body">
            The client was running 14 interlocked spreadsheets and three legacy tools to manage a 2,000-shipment-per-day operation. Manual reconciliation was costing 40 hours per week and introducing errors that cascaded across invoicing and customer SLAs.
          </p>

          <!-- Metrics row -->
          <div class="port-case-metrics" role="region" aria-label="Project outcomes">
            <div class="port-case-metric-cell">
              <div class="port-case-metric-num">40%</div>
              <div class="port-case-metric-lbl">Cost Saved</div>
            </div>
            <div class="port-case-metric-cell">
              <div class="port-case-metric-num">14</div>
              <div class="port-case-metric-lbl">Tools Replaced</div>
            </div>
            <div class="port-case-metric-cell">
              <div class="port-case-metric-num">6mo</div>
              <div class="port-case-metric-lbl">Time to Live</div>
            </div>
          </div>

          <a href="#contact" class="port-case-link">
            Discuss a Similar Project <i class="fas fa-arrow-right"></i>
          </a>
        </div>

        <!-- Col right: solution breakdown -->
        <div class="port-case-col">
          <span class="port-case-col-label">Our Approach</span>

          <div class="port-case-insights">
            <div class="port-case-insight">
              <div class="port-case-insight-icon"><i class="fas fa-search"></i></div>
              <div>
                <div class="port-case-insight-title">Discovery Sprint</div>
                <div class="port-case-insight-body">Three weeks embedded with operations leads mapping every manual process, failure point, and data flow in the existing system.</div>
              </div>
            </div>
            <div class="port-case-insight">
              <div class="port-case-insight-icon"><i class="fas fa-layer-group"></i></div>
              <div>
                <div class="port-case-insight-title">Modular Architecture</div>
                <div class="port-case-insight-body">Built with a clean domain separation — shipments, routing, invoicing, and reporting as independent services with a shared event bus.</div>
              </div>
            </div>
            <div class="port-case-insight">
              <div class="port-case-insight-icon"><i class="fas fa-sync-alt"></i></div>
              <div>
                <div class="port-case-insight-title">Phased Migration</div>
                <div class="port-case-insight-body">Ran new and legacy systems in parallel for four weeks. Zero-downtime cutover with automated data reconciliation checks throughout.</div>
              </div>
            </div>
            <div class="port-case-insight">
              <div class="port-case-insight-icon"><i class="fas fa-chart-line"></i></div>
              <div>
                <div class="port-case-insight-title">Live Outcomes Monitoring</div>
                <div class="port-case-insight-body">Embedded an ops metrics dashboard from day one, giving the client full visibility into platform performance from the first sprint demo.</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div><!-- /port-case-frame -->
  </div>
</section>


<!-- ━━━━━━━━ 5. CTA ━━━━━━━━ -->
<section class="portcta-sec" id="contact" aria-label="Call to action">
  <div class="cta-ring-a" aria-hidden="true"></div>
  <div class="cta-ring-b" aria-hidden="true"></div>
  <div class="container">
    <div class="label-bw" data-anim="blur-in" style="display:inline-flex">
      <i class="fas fa-comments"></i> Start a Project
    </div>
    <h2 class="cta-headline" data-anim="fade-up" data-delay="100">
      Have a project that<br>deserves this kind of<br>
      <span class="t-brand">craft and attention?</span>
    </h2>
    <div class="d-flex gap-3 justify-content-center flex-wrap" data-anim="fade-up" data-delay="200">
      <a href="<?php echo e(route('contact')); ?>" class="btn-pri ripple-host">
        Let's Talk <i class="fas fa-arrow-right" style="font-size:.8rem"></i>
      </a>
      <a href="<?php echo e(route('services')); ?>" class="btn-ghost">See Our Services</a>
    </div>
  </div>
</section>

<?php $__env->stopSection(); ?>

<?php $__env->startPush('scripts'); ?>
<script src="<?php echo e(asset('js/portfolio.js')); ?>"></script>
<?php $__env->stopPush(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH /home/demoserver22/public_html/nexatech/dev/resources/views/pages/portfolio.blade.php ENDPATH**/ ?>