Service Freelance Light

                <!--
@type: Service
@industry: Freelance
@style: Light
@category: Page Section, Sale, UI Element
@framework: Tailwind
@license: Free
-->

<style>
  body { font-family: 'Inter', sans-serif; }
  .service-icon {
    background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    transition: all 0.3s ease;
  }
  .process-step {
    position: relative;
    transition: all 0.3s ease;
  }
  .process-step::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translateY(-50%);
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, #cbd5e1, transparent);
  }
  .process-step:last-child::after {
    display: none;
  }
  .process-step:hover {
    transform: scale(1.05);
  }
  .fade-in {
    animation: fadeIn 0.8s ease-out forwards;
  }
  .slide-up {
    animation: slideUp 0.8s ease-out forwards;
  }
  .slide-left {
    animation: slideLeft 0.8s ease-out forwards;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes slideLeft {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .tech-badge {
    transition: all 0.3s ease;
  }
  .tech-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
  @media (max-width: 768px) {
    .process-step:after {
      display: none;
    }
  }
</style>

<section class="bg-gray-100 py-20 px-6 relative">
  <div class="max-w-7xl mx-auto relative z-10">
    <!-- Header -->
    <div class="text-center mb-16 fade-in">
      <div class="inline-flex items-center px-4 py-2 bg-white/60 backdrop-blur-sm rounded-full border border-slate-200 mb-6 shadow-sm">
        <span class="text-sm font-medium text-slate-600">What I Do</span>
      </div>
      
      <h2 class="text-4xl md:text-5xl font-bold text-slate-900 mb-6">
        Services That
        <span class="text-transparent bg-clip-text bg-gradient-to-r from-slate-600 to-slate-800">
          Drive Results
        </span>
      </h2>
      
      <p class="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
        I specialize in creating exceptional digital experiences that combine beautiful design with powerful functionality. From concept to launch, I'll help bring your vision to life.
      </p>
    </div>

    <!-- Main Services Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-20">
      <!-- Web Design -->
      <div class="service-card bg-white rounded-2xl p-8 border border-slate-200 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-in-out slide-up" style="animation-delay: 0.1s;">
        <div class="service-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
          <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v6a2 2 0 002 2h4a2 2 0 002-2V5z"></path>
          </svg>
        </div>
        
        <h3 class="text-2xl font-bold text-slate-900 mb-4">Web Design</h3>
        <p class="text-slate-600 mb-6 leading-relaxed">
          Creating visually stunning and user-friendly designs that capture your brand essence and engage your audience effectively.
        </p>
        
        <ul class="space-y-2 mb-6">
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Custom UI/UX Design</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Responsive Layouts</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Brand Integration</span>
          </li>
        </ul>
        
        <div class="text-2xl font-bold text-slate-900">Starting at $800</div>
      </div>

      <!-- Frontend Development -->
      <div class="service-card bg-white rounded-2xl p-8 border border-slate-200 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-in-out slide-up" style="animation-delay: 0.2s;">
        <div class="service-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
          <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
          </svg>
        </div>
          
        <h3 class="text-2xl font-bold text-slate-900 mb-4">Frontend Development</h3>
        <p class="text-slate-600 mb-6 leading-relaxed">
          Bringing designs to life with clean, efficient code that ensures fast loading times and smooth user experiences across all devices.
        </p>
          
        <ul class="space-y-2 mb-6">
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>React & Vue.js</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Performance Optimization</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Cross-browser Testing</span>
          </li>
        </ul>
        
        <div class="text-2xl font-bold text-slate-900">Starting at $1,200</div>
      </div>

      <!-- E-commerce Solutions -->
      <div class="service-card bg-white rounded-2xl p-8 border border-slate-200 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-in-out slide-up" style="animation-delay: 0.3s;">
        <div class="service-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
          <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
          </svg>
        </div>
          
        <h3 class="text-2xl font-bold text-slate-900 mb-4">E-commerce Solutions</h3>
        <p class="text-slate-600 mb-6 leading-relaxed">
          Complete online store solutions that drive sales with secure payment processing, inventory management, and conversion optimization.
        </p>
          
        <ul class="space-y-2 mb-6">
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Shopify & WooCommerce</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Payment Integration</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Inventory Management</span>
          </li>
        </ul>
          
        <div class="text-2xl font-bold text-slate-900">Starting at $2,000</div>
      </div>

      <!-- Website Optimization -->
      <div class="service-card bg-white rounded-2xl p-8 border border-slate-200 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-in-out slide-up" style="animation-delay: 0.4s;">
        <div class="service-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
          <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
          </svg>
        </div>
        
        <h3 class="text-2xl font-bold text-slate-900 mb-4">Website Optimization</h3>
        <p class="text-slate-600 mb-6 leading-relaxed">
          Boost your website's performance with SEO optimization, speed improvements, and conversion rate enhancements.
        </p>
          
        <ul class="space-y-2 mb-6">
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>SEO Optimization</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Speed Optimization</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Analytics Setup</span>
          </li>
        </ul>
          
        <div class="text-2xl font-bold text-slate-900">Starting at $600</div>
      </div>

      <!-- Maintenance & Support -->
      <div class="service-card bg-white rounded-2xl p-8 border border-slate-200 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-in-out slide-up" style="animation-delay: 0.5s;">
        <div class="service-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
          <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
          </svg>
        </div>
        
        <h3 class="text-2xl font-bold text-slate-900 mb-4">Maintenance & Support</h3>
        <p class="text-slate-600 mb-6 leading-relaxed">
          Keep your website running smoothly with regular updates, security monitoring, and ongoing technical support.
        </p>
          
        <ul class="space-y-2 mb-6">
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Regular Updates</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Security Monitoring</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>24/7 Support</span>
          </li>
        </ul>
        
        <div class="text-2xl font-bold text-slate-900">Starting at $200/month</div>
      </div>

      <!-- Consultation -->
      <div class="service-card bg-white rounded-2xl p-8 border border-slate-200 shadow-md hover:shadow-xl hover:-translate-y-1 transition-all duration-300 ease-in-out slide-up" style="animation-delay: 0.6s;">
        <div class="service-icon w-16 h-16 rounded-2xl flex items-center justify-center mb-6">
          <svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
          </svg>
        </div>
        
        <h3 class="text-2xl font-bold text-slate-900 mb-4">Strategy Consultation</h3>
        <p class="text-slate-600 mb-6 leading-relaxed">
          Get expert guidance on your digital strategy, technology choices, and project planning to ensure successful outcomes.
        </p>
          
        <ul class="space-y-2 mb-6">
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Project Planning</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Technology Audit</span>
          </li>
          <li class="flex items-center space-x-2 text-slate-600">
            <div class="w-1.5 h-1.5 bg-slate-400 rounded-full"></div>
            <span>Growth Strategy</span>
          </li>
        </ul>
        
        <div class="text-2xl font-bold text-slate-900">$150/hour</div>
      </div>
    </div>

    <!-- Work Process -->
    <div class="mb-20 fade-in">
      <div class="text-center mb-12">
        <h3 class="text-3xl md:text-4xl font-bold text-slate-900 mb-4">How I Work</h3>
        <p class="text-xl text-slate-600 max-w-2xl mx-auto">
          A proven process that ensures your project is delivered on time, on budget, and exceeds expectations
        </p>
      </div>

      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <!-- Step 1 -->
        <div class="process-step bg-white border border-slate-200 rounded-xl p-6 text-center slide-left" style="animation-delay: 0.1s;">
          <div class="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold text-lg">
            1
          </div>
          <h4 class="text-lg font-semibold text-slate-900 mb-2">Discovery</h4>
          <p class="text-slate-600 text-sm">Understanding your goals, target audience, and project requirements</p>
        </div>

        <!-- Step 2 -->
        <div class="process-step bg-white border border-slate-200 rounded-xl p-6 text-center slide-left" style="animation-delay: 0.2s;">
          <div class="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold text-lg">
            2
          </div>
          <h4 class="text-lg font-semibold text-slate-900 mb-2">Planning</h4>
          <p class="text-slate-600 text-sm">Creating detailed wireframes, mockups, and project timeline</p>
        </div>

        <!-- Step 3 -->
        <div class="process-step bg-white border border-slate-200 rounded-xl p-6 text-center slide-left" style="animation-delay: 0.3s;">
          <div class="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold text-lg">
            3
          </div>
          <h4 class="text-lg font-semibold text-slate-900 mb-2">Development</h4>
          <p class="text-slate-600 text-sm">Building your project with regular updates and feedback sessions</p>
        </div>

        <!-- Step 4 -->
        <div class="process-step bg-white border border-slate-200 rounded-xl p-6 text-center slide-left" style="animation-delay: 0.4s;">
          <div class="w-12 h-12 bg-slate-900 text-white rounded-full flex items-center justify-center mx-auto mb-4 font-bold text-lg">
            4
          </div>
          <h4 class="text-lg font-semibold text-slate-900 mb-2">Launch</h4>
          <p class="text-slate-600 text-sm">Testing, optimization, and deployment with ongoing support</p>
        </div>
      </div>
    </div>

    <!-- Technologies -->
    <div class="text-center fade-in">
      <h3 class="text-3xl font-bold text-slate-900 mb-8">Technologies I Use</h3>
      
      <div class="flex flex-wrap justify-center gap-4 max-w-4xl mx-auto">
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">React</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">Vue.js</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">TypeScript</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">Node.js</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">Tailwind CSS</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">Figma</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">Shopify</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">WordPress</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">MongoDB</span>
        <span class="tech-badge bg-white border border-slate-200 px-4 py-2 rounded-full text-slate-700 font-medium shadow-sm">AWS</span>
      </div>
    </div>
  </div>
</section>

<script>
  // Intersection Observer for animations
  const observerOptions = {
    threshold: 0.1,
    rootMargin: '0px 0px -50px 0px'
  };

  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.opacity = '1';
        entry.target.style.transform = entry.target.classList.contains('slide-left') 
          ? 'translateX(0)' 
          : 'translateY(0)';
      }
    });
  }, observerOptions);

  // Observe animated elements
  document.querySelectorAll('.slide-up, .fade-in, .slide-left').forEach(element => {
    element.style.opacity = '0';
    if (element.classList.contains('slide-left')) {
      element.style.transform = 'translateX(30px)';
    } else {
      element.style.transform = 'translateY(40px)';
    }
    observer.observe(element);
  });

  // Tech badge hover effects
  document.querySelectorAll('.tech-badge').forEach(badge => {
    badge.addEventListener('mouseenter', function() {
      this.style.background = 'rgba(100, 116, 139, 0.1)';
      this.style.borderColor = 'rgba(100, 116, 139, 0.3)';
    });
    
    badge.addEventListener('mouseleave', function() {
      this.style.background = '';
      this.style.borderColor = '';
    });
  });
</script>