---
// About Us Page for WorkRoot IT Solutions LLP
// Features: Company story, team member cards, mission/vision statements, company timeline

import BaseLayout from '../layouts/BaseLayout.astro';
import SEO from '../components/SEO.astro';

// Team member data
// NOTE FOR MAINTAINERS: `photo` points to a placeholder avatar in
// /public/images/team/. Replace each file with a real headshot (same
// path, JPG/WebP at ~800×600) and fill in the real `linkedin` URL —
// the markup renders the photo and LinkedIn icon automatically.
const teamMembers = [
  {
    name: 'Ajay Ghanwat',
    role: 'Director & Lead Engineer',
    bio: 'Founder and hands-on technical lead. Ajay has architected and shipped 20+ production systems — including the Bihar Police Management System deployed across 11 districts and the University platform for IIT Patna. When you work with WorkRoot, he is in the room reviewing your architecture.',
    avatar: 'AG',
    photo: '/images/team/ajay-ghanwat.svg',
    social: {
      twitter: 'https://x.com/GhanwatAjay',
      linkedin: '',
    },
  },
  {
    name: 'Ashok Jamdade',
    role: 'Director & Delivery Lead',
    bio: 'Runs project governance and client delivery end to end. Ashok is your single point of accountability — scope, timeline, and quality — so nothing gets lost in handoffs between teams.',
    avatar: 'AJ',
    photo: '/images/team/ashok-jamdade.svg',
    social: {
      linkedin: '',
    },
  },
  {
    name: 'Swapnali Vachkal',
    role: 'Full Stack Engineer',
    bio: 'Builds the systems you depend on, in Angular, React, and Spring Boot. Swapnali writes the production code for your project directly — from government management systems to e-commerce platforms — clean, performant, and maintainable.',
    avatar: 'SV',
    photo: '/images/team/swapnali-vachkal.svg',
    social: {
      linkedin: '',
    },
  },
];

// Company stats — canonical site-wide proof set (kept identical to the
// homepage ProofNumbers band, the /portfolio stats bar, and the homepage
// stats counters) so the numbers never contradict across pages.
const stats = [
  { value: '20+', label: 'Projects' },
  { value: '11+', label: 'Districts Deployed' },
  { value: '50,000+', label: 'Records Managed' },
  { value: '8+', label: 'Years Avg Experience' },
];

// Company timeline
const timeline = [
  {
    year: '2022',
    title: 'The Beginning',
    description: 'Founded WorkRoot IT Solutions LLP in Maharashtra, India. Started with the PLNR Financing platform (Angular + Spring Boot + MySQL).',
  },
  {
    year: '2022',
    title: 'First Government Contract',
    description: 'Secured first government contract — Police Management System for Bihar Government, deployed across 11 districts.',
  },
  {
    year: '2023',
    title: 'University & LLP Registration',
    description: 'Delivered University Management System for IIT Patna (Next.js + Spring Boot + MySQL). Registered as LLP.',
  },
  {
    year: '2024',
    title: 'Smart Governance',
    description: 'Expanded into smart governance — delivered SCMS (Smart Crematorium Management System) for PSCL Bihar Government.',
  },
  {
    year: '2025',
    title: 'Product Expansion',
    description: 'Launched FPC Cart e-commerce platform (Astro + Golang). Built Pophealth mobile health app with Expo. Team grown to 3 members.',
  },
  {
    year: '2026',
    title: 'Continuing Innovation',
    description: 'Continuing to deliver innovative solutions. 20+ projects completed. 100% client satisfaction maintained.',
  },
];

// How we work — concrete commitments, not generic values
const howWeWork = [
  {
    title: 'You talk to the engineers',
    description: 'No account managers, no offshore relay. The people who design and write your system are the people you meet, email, and call.',
    icon: 'users',
  },
  {
    title: 'Fixed scope, price, and timeline',
    description: 'We agree on exactly what gets built, what it costs, and when it ships — before a line of code is written. No surprise invoices.',
    icon: 'shield',
  },
  {
    title: 'Built to pass an audit',
    description: 'Role-based access, data isolation, and offline resilience are designed in from day one — the same standards our 11-district government deployment runs on.',
    icon: 'star',
  },
  {
    title: 'We stay after launch',
    description: 'Shipping is the start, not the finish. We maintain, monitor, and extend the systems we build — some have run in production for years.',
    icon: 'lightbulb',
  },
];
---

<BaseLayout
  title="About Our Software Engineering Team & Story"
  description="Meet WorkRoot IT Solutions: founded 2022, a senior in-house engineering team averaging 8+ years' experience across 20+ web, mobile, ERP, and govtech projects."
>
  <SEO
    slot="head"
    type="AboutPage"
    breadcrumbs={[
      { name: 'Home', url: '/' },
      { name: 'About Us', url: '/about' }
    ]}
  />
  <!-- Hero Section -->
  <section class="relative min-h-[70vh] flex items-center overflow-hidden bg-gradient-to-br from-secondary-900 via-secondary-800 to-primary-900">
    <!-- Background decorative elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute -top-40 -right-40 w-96 h-96 bg-primary/20 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-accent/10 rounded-full blur-3xl"></div>
      <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-primary/5 rounded-full blur-3xl"></div>
      <!-- Grid pattern overlay -->
      <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.03)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
    </div>

    <div class="container-wrapper relative z-10 py-20">
      <div class="max-w-4xl">
        <span class="inline-block px-4 py-1.5 mb-6 text-sm font-medium text-primary-300 bg-primary-500/10 rounded-full border border-primary-500/20">
          About WorkRoot IT Solutions LLP
        </span>
        <h1 class="text-4xl sm:text-5xl lg:text-6xl xl:text-7xl font-bold text-white leading-tight mb-6">
          The team behind Bihar's 11-district Police Management System
          <span class="block text-transparent bg-clip-text bg-gradient-to-r from-primary-300 to-accent-400 mt-2">
            and IIT Patna's University platform.
          </span>
        </h1>
        <p class="text-lg sm:text-xl text-secondary-200 max-w-2xl mb-8">
          A small, senior engineering team in India that has shipped 20+ production systems for governments and enterprises. You work directly with the people who build yours.
        </p>

        <!-- Quick stats in hero -->
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 mt-10 max-w-3xl">
          {stats.map((stat) => (
            <div class="text-center sm:text-left">
              <p class="text-3xl sm:text-4xl font-bold text-primary-300 mb-1">{stat.value}</p>
              <p class="text-secondary-300 text-sm font-medium">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>

  <!-- Company Story Section -->
  <section class="py-16 lg:py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
        <div class="order-2 lg:order-1" data-animate="fade-right">
          <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Our Story</span>
          <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-6">
            From Startup to Trusted Partner
          </h2>
          <div class="space-y-4 text-secondary-600 dark:text-secondary-400 leading-relaxed">
            <p>
              Founded in 2022, WorkRoot IT Solutions LLP began with a clear mission: to empower businesses and government organizations with innovative, reliable, and scalable software solutions. What started as a focused team in Maharashtra, India has grown into a trusted technology partner delivering 20+ projects across enterprise and government domains.
            </p>
            <p>
              From building the Police Management System deployed across 11 districts in Bihar to delivering the University Management System for IIT Patna, we've consistently proven our ability to handle complex, large-scale projects. Our portfolio spans government systems, enterprise platforms, e-commerce solutions, and mobile health applications.
            </p>
            <p>
              What sets us apart isn't just our technical skills—it's our commitment to understanding your business. We don't believe in one-size-fits-all solutions. Every project we undertake is tailored to your unique needs, goals, and constraints, with a 100% client satisfaction track record.
            </p>
          </div>
        </div>
        <div class="order-1 lg:order-2 relative" data-animate="fade-left" data-delay="150">
          <div class="aspect-[4/3] rounded-2xl overflow-hidden shadow-2xl bg-secondary-200">
            <img
              src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&h=600&fit=crop&auto=format&q=75"
              alt="WorkRoot team collaborating in office"
              width="800"
              height="600"
              class="w-full h-full object-cover"
              loading="eager"
              decoding="async"
              fetchpriority="high"
            />
          </div>
          <div class="absolute -bottom-6 -left-6 bg-primary-500 text-white p-6 rounded-xl shadow-xl hidden sm:block">
            <p class="text-4xl font-bold">3+</p>
            <p class="text-primary-100">Years of Excellence</p>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- Company Timeline Section -->
  <section class="py-16 lg:py-24 bg-white dark:bg-secondary-900">
    <div class="container-wrapper">
      <div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">Our Journey</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">Company Timeline</h2>
        <p class="text-secondary-600 dark:text-secondary-400">
          Our journey of innovation, growth, and excellence in technology solutions since 2022.
        </p>
      </div>

      <div class="max-w-5xl mx-auto">
        <!-- Timeline container -->
        <div class="relative">
          <!-- Vertical line (hidden on mobile, visible on md+) -->
          <div class="hidden md:block absolute left-1/2 top-0 bottom-0 w-0.5 bg-gradient-to-b from-primary-500 via-primary-300 to-primary-500 transform -translate-x-1/2" aria-hidden="true"></div>

          <div class="space-y-8 md:space-y-12">
            {timeline.map((item, index) => (
              <div class={`relative ${index % 2 === 0 ? 'md:mr-auto md:pr-12' : 'md:ml-auto md:pl-12'} md:w-1/2`} data-animate={index % 2 === 0 ? 'fade-right' : 'fade-left'} data-delay={String(index * 100)}>
                <!-- Timeline dot -->
                <div class="hidden md:flex absolute top-0 w-4 h-4 bg-primary-500 rounded-full border-4 border-white shadow-lg z-10"
                     style={index % 2 === 0 ? 'right: -2.25rem;' : 'left: -2.25rem;'}
                     aria-hidden="true">
                </div>

                <!-- Content card -->
                <div class={`relative bg-white dark:bg-secondary-800 border-2 border-secondary-100 dark:border-secondary-700 rounded-2xl p-6 shadow-sm hover:shadow-lg transition-all duration-300 group hover:border-primary-200 ${index % 2 === 0 ? 'md:text-right' : 'md:text-left'}`}>
                  <div class="absolute -top-3 left-6 md:left-auto md:right-6 px-4 py-1 bg-gradient-to-r from-primary-500 to-primary-600 text-white text-sm font-bold rounded-full shadow-md">
                    {item.year}
                  </div>
                  <h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mt-4 mb-2 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
                    {item.title}
                  </h3>
                  <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed">
                    {item.description}
                  </p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- How We Work Section -->
  <section class="py-16 lg:py-24 bg-gradient-to-b from-secondary-50 to-white dark:from-secondary-900 dark:to-secondary-900 relative overflow-hidden">
    <!-- Background decoration -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute top-0 right-0 w-96 h-96 bg-primary-500/5 rounded-full blur-3xl"></div>
      <div class="absolute bottom-0 left-0 w-96 h-96 bg-accent-500/5 rounded-full blur-3xl"></div>
    </div>

    <div class="container-wrapper relative">
      <div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">How We Work</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">What working with us actually looks like</h2>
        <p class="text-secondary-600 dark:text-secondary-400">
          A three-person senior team is the feature, not the caveat — no layers between you and the people building your system.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 lg:gap-8">
        {howWeWork.map((value, index) => (
          <div class="group relative" data-animate="fade-up" data-delay={String(index * 100)}>
            <!-- Gradient background on hover -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary-500 to-primary-700 rounded-2xl opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>

            <!-- Card content -->
            <div class="relative bg-white dark:bg-secondary-800 p-6 lg:p-8 rounded-2xl shadow-sm group-hover:shadow-xl transition-all duration-300 border-2 border-secondary-100 dark:border-secondary-700 group-hover:border-primary-200 group-hover:translate-y-[-4px]">
              <div class="w-14 h-14 bg-gradient-to-br from-primary-50 to-primary-100 dark:from-primary-900/30 dark:to-primary-900/50 text-primary-600 dark:text-primary-400 rounded-xl flex items-center justify-center mb-6 group-hover:bg-white group-hover:text-white transition-all duration-300 shadow-md">
                {value.icon === 'lightbulb' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                  </svg>
                )}
                {value.icon === 'shield' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                  </svg>
                )}
                {value.icon === 'star' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                )}
                {value.icon === 'users' && (
                  <svg xmlns="http://www.w3.org/2000/svg" class="w-7 h-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                  </svg>
                )}
              </div>
              <h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mb-3 group-hover:text-white transition-colors duration-300">{value.title}</h3>
              <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed group-hover:text-primary-50 transition-colors duration-300">{value.description}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>

  <!-- Team Section -->
  <section class="py-16 lg:py-24 bg-secondary-50 dark:bg-secondary-800/50">
    <div class="container-wrapper">
      <div class="text-center max-w-2xl mx-auto mb-12 lg:mb-16" data-animate="fade-up">
        <span class="text-primary-500 dark:text-primary-400 font-semibold text-sm uppercase tracking-wider">The Team</span>
        <h2 class="text-3xl sm:text-4xl font-bold text-secondary-900 dark:text-secondary-100 mt-2 mb-4">The people who'll build your system</h2>
        <p class="text-secondary-600 dark:text-secondary-400">
          You work directly with the senior engineers who design and write your software — no account managers, no offshore handoffs, no junior teams learning on your project.
        </p>
      </div>

      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-8 lg:gap-10">
        {teamMembers.map((member, index) => (
          <article class="group relative" data-animate="fade-up" data-delay={String((index % 3) * 100)}>
            <!-- Card wrapper with gradient border effect -->
            <div class="absolute inset-0 bg-gradient-to-br from-primary-400 to-accent-400 rounded-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-300 blur-sm"></div>

            <div class="relative bg-white dark:bg-secondary-800 rounded-3xl overflow-hidden shadow-md hover:shadow-2xl transition-all duration-300 transform group-hover:-translate-y-2">
              <!-- Avatar / photo container -->
              <div class="relative aspect-[4/3] overflow-hidden bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center">
                {member.photo ? (
                  <img
                    src={member.photo}
                    alt={`${member.name}, ${member.role} at WorkRoot`}
                    width="800"
                    height="600"
                    class="absolute inset-0 w-full h-full object-cover"
                    loading="lazy"
                    decoding="async"
                  />
                ) : (
                  <span class="text-6xl font-bold text-white/90">{member.avatar}</span>
                )}

                <!-- Gradient overlay -->
                <div class="absolute inset-0 bg-gradient-to-t from-secondary-900/50 via-transparent to-transparent"></div>

                <!-- Social links overlay -->
                {(member.social.twitter || member.social.linkedin) && (
                  <div class="absolute inset-x-0 bottom-0 p-6 transform translate-y-full group-hover:translate-y-0 transition-transform duration-300">
                    <div class="flex justify-center gap-3">
                      {member.social.linkedin && (
                        <a
                          href={member.social.linkedin}
                          target="_blank"
                          rel="noopener noreferrer"
                          class="w-11 h-11 bg-white/95 hover:bg-white rounded-xl flex items-center justify-center text-secondary-700 hover:text-primary-500 transition-all shadow-lg hover:scale-110"
                          aria-label={`${member.name}'s LinkedIn profile`}
                        >
                          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.225 0z"/>
                          </svg>
                        </a>
                      )}
                      {member.social.twitter && (
                        <a
                          href={member.social.twitter}
                          target="_blank"
                          rel="noopener noreferrer"
                          class="w-11 h-11 bg-white/95 hover:bg-white rounded-xl flex items-center justify-center text-secondary-700 hover:text-primary-500 transition-all shadow-lg hover:scale-110"
                          aria-label={`${member.name}'s Twitter/X profile`}
                        >
                          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                          </svg>
                        </a>
                      )}
                    </div>
                  </div>
                )}
              </div>

              <!-- Content -->
              <div class="p-6 lg:p-7">
                <h3 class="text-xl font-bold text-secondary-900 dark:text-secondary-100 mb-1 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">{member.name}</h3>
                <p class="text-primary-500 dark:text-primary-400 font-semibold text-sm mb-3 uppercase tracking-wide">{member.role}</p>
                <p class="text-secondary-600 dark:text-secondary-400 leading-relaxed text-sm">{member.bio}</p>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>

  <!-- CTA Section -->
  <section class="relative py-20 lg:py-28 overflow-hidden">
    <!-- Gradient background -->
    <div class="absolute inset-0 bg-gradient-to-br from-primary-600 via-primary-700 to-secondary-800"></div>

    <!-- Decorative elements -->
    <div class="absolute inset-0 overflow-hidden pointer-events-none" aria-hidden="true">
      <div class="absolute -top-40 -right-40 w-96 h-96 bg-accent-500/20 rounded-full blur-3xl"></div>
      <div class="absolute -bottom-40 -left-40 w-96 h-96 bg-primary-400/20 rounded-full blur-3xl"></div>
      <div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.05)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.05)_1px,transparent_1px)] bg-[size:64px_64px]"></div>
    </div>

    <div class="container-wrapper relative z-10">
      <div class="max-w-4xl mx-auto text-center">
        <div class="inline-block px-4 py-1.5 mb-6 text-sm font-medium text-primary-200 bg-white/10 rounded-full border border-white/20 backdrop-blur-sm">
          Let's Build Together
        </div>
        <h2 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-white mb-6">
          Talk to the engineers who'll build it
        </h2>
        <p class="text-primary-50 text-lg sm:text-xl max-w-2xl mx-auto mb-10">
          Tell us what you're building. You'll get a fixed-scope, fixed-price proposal from the people who'll actually deliver it — not a sales pitch.
        </p>

        <div class="flex flex-col sm:flex-row gap-4 justify-center">
          <a
            href="/contact?source=about-cta"
            data-cta="about-primary"
            class="group inline-flex items-center justify-center px-8 py-4 bg-white text-primary-600 font-semibold rounded-xl hover:bg-primary-50 transition-all shadow-xl hover:shadow-2xl hover:scale-105 focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
          >
            Get my free proposal
            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 ml-2 group-hover:translate-x-1 transition-transform" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
              <path stroke-linecap="round" stroke-linejoin="round" d="M17 8l4 4m0 0l-4 4m4-4H3" />
            </svg>
          </a>
          <a
            href="/portfolio"
            data-cta="about-secondary"
            class="inline-flex items-center justify-center px-8 py-4 border-2 border-white/40 text-white font-semibold rounded-xl hover:bg-white/10 hover:border-white/60 transition-all backdrop-blur-sm focus:outline-none focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-primary-600"
          >
            See 20+ case studies
          </a>
        </div>
      </div>
    </div>
  </section>
</BaseLayout>
