{% extends "base.html" %}

{% block title %}Services - Charles Feinn // AppSimple{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="/assets/css/pages/services.css" />
{% endblock %}

{% block content %}
<!-- Services Introduction -->
<h1 class="page-title">Services</h1>
<p class="page-intro">I provide specialized technical services across mobile development and applied AI. My background in creating intuitive mobile experiences informs how I develop AI solutions that integrate seamlessly with how people work. Whether you need a mobile app, an AI-powered solution, or a solution that combines both, I focus on practical, user-centric technology that delivers real business value. <strong>When you partner with AppSimple, you work directly with me, Charles Feinn, ensuring dedicated expertise on your project.</strong></p>

<!-- Mobile Development Services -->
<h2 class="section-heading">Mobile Development</h2>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
                <line x1="12" y1="18" x2="12.01" y2="18"/>
            </svg>
        </div>
        Custom Mobile Applications
    </h3>
    <ul class="service-list">
        <li>iOS and Android native app development</li>
        <li>Cross-platform solutions using React Native</li>
        <li>User-centered design and intuitive interfaces</li>
        <li>Integration with existing business systems</li>
    </ul>
    <a href="/portfolio" class="service-link">See portfolio examples</a>
</div>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
                <circle cx="9" cy="7" r="4"/>
                <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
                <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
            </svg>
        </div>
        User Experience Design
    </h3>
    <ul class="service-list">
        <li>Mobile-specific UX design for optimal usability</li>
        <li>Streamlined user flows and interactions</li>
        <li>Accessibility considerations</li>
        <li>Usability testing and optimization</li>
    </ul>
    <a href="/contact" class="service-link">Discuss your needs</a>
</div>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
            </svg>
        </div>
        Content & Commerce Platforms
    </h3>
    <ul class="service-list">
        <li>Content delivery applications</li>
        <li>Subscription management systems</li>
        <li>In-app purchase integration</li>
        <li>Commercial content marketplaces</li>
    </ul>
    <a href="/portfolio" class="service-link">See examples</a>
</div>

<!-- Applied AI Services -->
<h2 class="section-heading">Applied AI Solutions</h2>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <path d="M15.5 2H8.6c-.4 0-.8.2-1.1.5-.3.3-.5.7-.5 1.1v16.8c0 .4.2.8.5 1.1.3.3.7.5 1.1.5h12.8c.4 0 .8-.2 1.1-.5.3-.3.5-.7.5-1.1V7.5L15.5 2z"/>
                <polyline points="15 2 15 8 21 8"/>
                <line x1="10" y1="13" x2="18" y2="13"/>
                <line x1="10" y1="17" x2="18" y2="17"/>
            </svg>
        </div>
        Intelligent Document Processing
    </h3>
    <ul class="service-list">
        <li>Extract structured data from unstructured documents</li>
        <li>Automate document classification and routing</li>
        <li>Implement OCR with AI verification</li>
        <li>Create searchable document repositories</li>
    </ul>
    <a href="/contact" class="service-link">Discuss your needs</a>
</div>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <path d="M5 22h14"/>
                <path d="M5 2h14"/>
                <path d="M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22"/>
                <path d="M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2"/>
            </svg>
        </div>
        Business Process Automation
    </h3>
    <ul class="service-list">
        <li>Identify automation opportunities in your workflow</li>
        <li>Implement AI-powered workflow solutions</li>
        <li>Connect disparate systems with intelligent processes</li>
        <li>Develop custom business rules and logic</li>
    </ul>
    <a href="/contact" class="service-link">Discuss your needs</a>
</div>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
            </svg>
        </div>
        LLM & Chatbot Implementation
    </h3>
    <ul class="service-list">
        <li>Design and implement custom AI assistants</li>
        <li>Fine-tune models for specific business knowledge</li>
        <li>Create secure, accurate chatbot systems</li>
        <li>Implement retrieval-augmented generation (RAG)</li>
    </ul>
    <a href="/contact" class="service-link">Discuss your needs</a>
</div>

<!-- Hybrid Solutions -->
<h2 class="section-heading">Hybrid Mobile & AI Solutions</h2>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                <line x1="12" y1="8" x2="12" y2="16"/>
                <line x1="8" y1="12" x2="16" y2="12"/>
            </svg>
        </div>
        AI-Enhanced Mobile Applications
    </h3>
    <ul class="service-list">
        <li>Mobile apps with integrated AI capabilities</li>
        <li>Personalized user experiences based on usage patterns</li>
        <li>Intelligent content recommendation systems</li>
        <li>On-device machine learning features</li>
    </ul>
    <a href="/contact" class="service-link">Discuss your needs</a>
</div>

<div class="service-item">
    <h3>
        <div class="icon-container">
            <svg class="icon service-icon" viewBox="0 0 24 24">
                <line x1="12" y1="2" x2="12" y2="6"/>
                <line x1="12" y1="18" x2="12" y2="22"/>
                <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/>
                <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
                <line x1="2" y1="12" x2="6" y2="12"/>
                <line x1="18" y1="12" x2="22" y2="12"/>
                <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/>
                <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>
            </svg>
        </div>
        Smart Business Tools
    </h3>
    <ul class="service-list">
        <li>Mobile interfaces for AI business systems</li>
        <li>Real-time data analysis and visualization</li>
        <li>Intelligent decision support systems</li>
        <li>Field data collection with AI processing</li>
    </ul>
    <a href="/contact" class="service-link">Discuss your needs</a>
</div>

<!-- CTA Section -->
<div class="process-cta">
    <h3>Not sure which service you need?</h3>
    <p>The best solutions often begin with a conversation. Let's discuss your business challenges and determine which approach—mobile, AI, or a hybrid solution—will deliver the most value for your specific situation.</p>
    <a href="/contact" class="process-cta-button">Start a Conversation</a>
</div>
{% endblock %}