<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Daf-Devs - Empowering Businesses with Cutting-Edge SaaS Solutions and Software Development">
    <meta name="keywords" content="SaaS, software development, custom development, IT solutions, web apps, mobile apps">
    <title>Daf-Devs | Cutting-Edge Software Development</title>
    
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
    
    <!-- TailwindCSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    
    <!-- AOS Animation Library -->
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
    
    <!-- Swiper.js for carousels -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    
    <style id="app-style">
        :root {
            --color-primary: #0f2b4a;
            --color-secondary: #1a4674;
            --color-accent: #00e676;
            --color-light: #f8f9fa;
            --color-dark: #1c1c1c;
            --color-gray: #6c757d;
            --color-light-gray: #e9ecef;
        }
        
        body {
            font-family: 'Roboto', sans-serif;
            color: var(--color-dark);
            overflow-x: hidden;
            scroll-behavior: smooth;
        }
        
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Montserrat', sans-serif;
            font-weight: 700;
        }
        
        .text-accent {
            color: var(--color-accent);
        }
        
        .bg-primary {
            background-color: var(--color-primary);
        }
        
        .bg-secondary {
            background-color: var(--color-secondary);
        }
        
        .bg-accent {
            background-color: var(--color-accent);
        }
        
        .btn-primary {
            background-color: var(--color-accent);
            color: var(--color-dark);
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn-primary:hover {
            background-color: transparent;
            border-color: var(--color-accent);
            color: var(--color-accent);
        }
        
        .btn-outline {
            background-color: transparent;
            color: var(--color-accent);
            font-weight: 600;
            padding: 0.75rem 1.5rem;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
            border: 2px solid var(--color-accent);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .btn-outline:hover {
            background-color: var(--color-accent);
            color: var(--color-dark);
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(15,43,74,0.95) 0%, rgba(15,43,74,0.8) 100%);
        }
        
        .navbar {
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .navbar.scrolled {
            background-color: var(--color-primary);
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            padding: 0.5rem 0;
        }
        
        .hero {
            height: 100vh;
            position: relative;
            background: url('https://cdn.pixabay.com/photo/2018/09/16/22/58/network-3682734_1280.jpg') no-repeat center center;
            background-size: cover;
            display: flex;
            align-items: center;
            color: white;
        }
        
        .timeline {
            position: relative;
        }
        
        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            width: 2px;
            height: 100%;
            background: var(--color-accent);
            transform: translateX(-50%);
        }
        
        .timeline-item {
            position: relative;
            margin-bottom: 3rem;
        }
        
        .timeline-item:nth-child(odd) {
            padding-right: 50%;
        }
        
        .timeline-item:nth-child(even) {
            padding-left: 50%;
        }
        
        .timeline-dot {
            position: absolute;
            width: 20px;
            height: 20px;
            background: var(--color-accent);
            border-radius: 50%;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .service-card {
            transition: all 0.3s ease;
            border: 1px solid var(--color-light-gray);
            border-radius: 8px;
            overflow: hidden;
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
            border-color: var(--color-accent);
        }
        
        .service-icon {
            width: 60px;
            height: 60px;
            background-color: rgba(0,230,118,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
            color: var(--color-accent);
            font-size: 1.5rem;
        }
        
        .product-card {
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .product-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .portfolio-filters button {
            background: transparent;
            border: none;
            padding: 0.5rem 1rem;
            cursor: pointer;
            position: relative;
            font-weight: 500;
        }
        
        .portfolio-filters button.active {
            color: var(--color-accent);
        }
        
        .portfolio-filters button.active::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 1rem;
            right: 1rem;
            height: 2px;
            background-color: var(--color-accent);
        }
        
        .portfolio-item {
            position: relative;
            overflow: hidden;
            border-radius: 8px;
            margin-bottom: 2rem;
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(15,43,74,0.9);
            opacity: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s ease;
            padding: 1rem;
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .blog-card {
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--color-light-gray);
        }
        
        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .blog-card img {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .counter-box {
            text-align: center;
            padding: 2rem;
        }
        
        .counter-box h3 {
            font-size: 3rem;
            font-weight: 700;
            color: var(--color-accent);
        }
        
        .team-member {
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }
        
        .team-member:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }
        
        .team-member img {
            width: 100%;
            height: 300px;
            object-fit: cover;
        }
        
        .testimonial-card {
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
            border: 1px solid var(--color-light-gray);
            padding: 2rem;
        }
        
        .contact-info-item {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .contact-info-item i {
            width: 40px;
            height: 40px;
            background-color: rgba(0,230,118,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            color: var(--color-accent);
        }
        
        .form-control {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid var(--color-light-gray);
            border-radius: 4px;
            margin-bottom: 1rem;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--color-accent);
        }
        
        footer {
            background-color: var(--color-primary);
            color: white;
            padding: 3rem 0;
        }
        
        .footer-links {
            list-style: none;
            padding: 0;
        }
        
        .footer-links li {
            margin-bottom: 0.5rem;
        }
        
        .footer-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-links a:hover {
            color: var(--color-accent);
        }
        
        .social-links a {
            width: 40px;
            height: 40px;
            background-color: rgba(255,255,255,0.1);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 0.5rem;
            color: white;
            transition: all 0.3s ease;
        }
        
        .social-links a:hover {
            background-color: var(--color-accent);
            color: var(--color-dark);
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 2000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            width: 90%;
            max-width: 800px;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            max-height: 90vh;
            overflow-y: auto;
        }
        
        .close-modal {
            position: absolute;
            right: 1rem;
            top: 1rem;
            cursor: pointer;
            background: var(--color-accent);
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-dark);
        }
        
        .admin-login {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 999;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--color-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            cursor: pointer;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
        }
        
        .admin-login:hover {
            background-color: var(--color-accent);
            transform: scale(1.05);
        }
        
        .admin-panel {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            z-index: 2000;
            padding: 2rem;
            overflow-y: auto;
        }
        
        .admin-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--color-light-gray);
        }
        
        .admin-panel-close {
            cursor: pointer;
            background: var(--color-primary);
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }
        
        .admin-tab {
            display: none;
        }
        
        .admin-tab.active {
            display: block;
        }
        
        .admin-tabs {
            display: flex;
            margin-bottom: 2rem;
        }
        
        .admin-tabs button {
            background: transparent;
            border: none;
            padding: 1rem 2rem;
            cursor: pointer;
            font-weight: 600;
            border-bottom: 2px solid transparent;
        }
        
        .admin-tabs button.active {
            border-bottom-color: var(--color-accent);
            color: var(--color-accent);
        }
        
        .admin-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem;
            border-bottom: 1px solid var(--color-light-gray);
        }
        
        .admin-item-actions {
            display: flex;
            gap: 1rem;
        }
        
        .admin-item-actions button {
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
        }
        
        .admin-form-group {
            margin-bottom: 1.5rem;
        }
        
        .admin-form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
        }
        
        .admin-form-actions {
            display: flex;
            justify-content: flex-end;
            gap: 1rem;
            margin-top: 2rem;
        }
        
        /* Mobile menu */
        .mobile-menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 1.5rem;
        }
        
        @media (max-width: 992px) {
            .navbar-nav {
                position: fixed;
                top: 0;
                left: -100%;
                width: 80%;
                max-width: 300px;
                height: 100vh;
                background-color: var(--color-primary);
                padding: 2rem;
                z-index: 1001;
                transition: all 0.3s ease;
                flex-direction: column;
            }
            
            .navbar-nav.active {
                left: 0;
            }
            
            .mobile-menu-toggle {
                display: block;
            }
            
            .navbar-nav .nav-item {
                margin: 1rem 0;
            }
            
            .timeline::before {
                left: 2rem;
            }
            
            .timeline-item:nth-child(odd), 
            .timeline-item:nth-child(even) {
                padding: 0 0 0 4rem;
            }
            
            .timeline-dot {
                left: 2rem;
            }
        }
    </style>
</head>
<body>
    <!-- Navbar -->
    <nav class="navbar">
        <div class="container mx-auto px-4 flex justify-between items-center">
            <a href="javascript:void(0)" class="text-white text-2xl font-bold">Daf-<span class="text-accent">Devs</span></a>
            
            <div class="mobile-menu-toggle text-white">
                <i class="fas fa-bars"></i>
            </div>
            
            <ul class="navbar-nav hidden lg:flex items-center space-x-6">
                <li class="nav-item"><a href="#home" class="text-white hover:text-accent transition-colors duration-300">Home</a></li>
                <li class="nav-item"><a href="#about" class="text-white hover:text-accent transition-colors duration-300">About</a></li>
                <li class="nav-item"><a href="#services" class="text-white hover:text-accent transition-colors duration-300">Services</a></li>
                <li class="nav-item"><a href="#products" class="text-white hover:text-accent transition-colors duration-300">SaaS Products</a></li>
                <li class="nav-item"><a href="#portfolio" class="text-white hover:text-accent transition-colors duration-300">Portfolio</a></li>
                <li class="nav-item"><a href="#blog" class="text-white hover:text-accent transition-colors duration-300">Blog</a></li>
                <li class="nav-item"><a href="#contact" class="text-white hover:text-accent transition-colors duration-300">Contact</a></li>
            </ul>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="hero">
        <div class="overlay"></div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-2xl" data-aos="fade-right">
                <h1 class="text-5xl md:text-6xl font-bold mb-4">Daf-<span class="text-accent">Devs</span></h1>
                <p class="text-xl md:text-2xl mb-8">Empowering Businesses with Cutting-Edge SaaS Solutions and Software Development</p>
                <div class="flex flex-wrap gap-4">
                    <a href="#contact" class="btn-primary">Get a Quote</a>
                    <a href="#services" class="btn-outline">Explore Services</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Services Teaser -->
    <section class="py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">Our <span class="text-accent">Services</span></h2>
                <p class="max-w-2xl mx-auto text-gray-600">Delivering exceptional digital experiences through innovative software solutions tailored to your business needs.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Service Card 1 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-icon">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">Web Development</h3>
                    <p class="text-gray-600 mb-4">Custom web applications with responsive design and seamless user experience.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Progressive Web Apps</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> E-commerce Solutions</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Enterprise Portals</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <!-- Service Card 2 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="200">
                    <div class="service-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">Mobile App Development</h3>
                    <p class="text-gray-600 mb-4">Native and cross-platform mobile applications that deliver exceptional performance.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> iOS & Android Apps</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Flutter Development</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Mobile Strategy Consulting</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <!-- Service Card 3 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-icon">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">Cloud Solutions</h3>
                    <p class="text-gray-600 mb-4">Scalable cloud infrastructure and deployment services for optimal performance.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> AWS & Azure Integration</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Serverless Architecture</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Cloud Migration Services</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <a href="#services" class="btn-primary">All Services</a>
            </div>
        </div>
    </section>

    <!-- About Us -->
    <section id="about" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">About <span class="text-accent">Us</span></h2>
                <p class="max-w-2xl mx-auto text-gray-600">Get to know the team behind Daf-Devs and our mission to deliver exceptional software solutions.</p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
                <div data-aos="fade-right">
                    <h3 class="text-3xl font-bold mb-6">Our Mission</h3>
                    <p class="text-gray-600 mb-6">At Daf-Devs, our mission is to deliver scalable, user-centric software solutions that empower businesses to achieve their full potential in the digital era. We combine technical excellence with innovative thinking to create products that drive real business value.</p>
                    <p class="text-gray-600 mb-6">With a focus on quality, performance, and user experience, we develop custom software and SaaS products that solve complex business challenges and provide sustainable competitive advantages for our clients.</p>
                    <div class="grid grid-cols-2 gap-6 mt-10">
                        <div class="counter-box bg-white rounded-lg shadow-sm">
                            <h3 class="counter" data-count="10">10+</h3>
                            <p class="text-gray-600 font-medium">Years in IT Development</p>
                        </div>
                        <div class="counter-box bg-white rounded-lg shadow-sm">
                            <h3 class="counter" data-count="50">50+</h3>
                            <p class="text-gray-600 font-medium">Successful Projects</p>
                        </div>
                    </div>
                </div>
                
                <div class="relative" data-aos="fade-left">
                    <img src="https://cdn.pixabay.com/photo/2017/07/31/11/44/laptop-2557576_1280.jpg" alt="About Daf-Devs" class="rounded-lg shadow-lg w-full">
                    <div class="absolute -bottom-10 -left-10 bg-white p-6 rounded-lg shadow-lg max-w-xs">
                        <h4 class="text-xl font-bold mb-2">Innovative Solutions</h4>
                        <p class="text-gray-600">We bring innovative approaches to complex technical challenges.</p>
                    </div>
                </div>
            </div>
            
            <!-- Timeline -->
            <div class="my-20" data-aos="fade-up">
                <h3 class="text-3xl font-bold mb-12 text-center">Our <span class="text-accent">Journey</span></h3>
                
                <div class="timeline py-10">
                    <div class="timeline-item" data-aos="fade-right">
                        <div class="timeline-dot"></div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h4 class="text-xl font-bold mb-2">2015</h4>
                            <p class="text-gray-600">Founding of Daf-Devs with a small team of 3 developers</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item" data-aos="fade-left">
                        <div class="timeline-dot"></div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h4 class="text-xl font-bold mb-2">2017</h4>
                            <p class="text-gray-600">Launched our first SaaS product and expanded to 10 team members</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item" data-aos="fade-right">
                        <div class="timeline-dot"></div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h4 class="text-xl font-bold mb-2">2020</h4>
                            <p class="text-gray-600">Opened second office location and reached 25 enterprise clients</p>
                        </div>
                    </div>
                    
                    <div class="timeline-item" data-aos="fade-left">
                        <div class="timeline-dot"></div>
                        <div class="bg-white p-6 rounded-lg shadow-sm">
                            <h4 class="text-xl font-bold mb-2">2023</h4>
                            <p class="text-gray-600">Expanded product line to 5 SaaS offerings and grew to 30+ team members</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Team -->
            <div data-aos="fade-up">
                <h3 class="text-3xl font-bold mb-12 text-center">Our <span class="text-accent">Team</span></h3>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                    <!-- Team Member 1 -->
                    <div class="team-member bg-white rounded-lg overflow-hidden shadow-sm" data-aos="fade-up" data-aos-delay="100">
                        <img src="https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg" alt="Team Member" class="w-full">
                        <div class="p-6">
                            <h4 class="text-xl font-bold mb-1">David Foster</h4>
                            <p class="text-accent mb-3">CEO & Founder</p>
                            <p class="text-gray-600 mb-4">15+ years of experience in software architecture and business development.</p>
                            <div class="flex space-x-3">
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-linkedin-in"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-twitter"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fas fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Team Member 2 -->
                    <div class="team-member bg-white rounded-lg overflow-hidden shadow-sm" data-aos="fade-up" data-aos-delay="200">
                        <img src="https://cdn.pixabay.com/photo/2017/08/01/01/33/beanie-2562646_1280.jpg" alt="Team Member" class="w-full">
                        <div class="p-6">
                            <h4 class="text-xl font-bold mb-1">Alexa Ramirez</h4>
                            <p class="text-accent mb-3">CTO</p>
                            <p class="text-gray-600 mb-4">Cloud architecture specialist with expertise in scalable systems design.</p>
                            <div class="flex space-x-3">
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-linkedin-in"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-github"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fas fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Team Member 3 -->
                    <div class="team-member bg-white rounded-lg overflow-hidden shadow-sm" data-aos="fade-up" data-aos-delay="300">
                        <img src="https://images.unsplash.com/photo-1643409329501-f17776d3823a?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjkwMjR8MHwxfHNlYXJjaHw0NXx8ZGV2ZWxvcG1lbnQlMjBjb21wYW55fGVufDB8fHx8MTc2Mjk0MDM3M3ww&ixlib=rb-4.1.0&q=80&w=1080" alt="Team Member" class="w-full">
                        <div class="p-6">
                            <h4 class="text-xl font-bold mb-1">Sarah Chen</h4>
                            <p class="text-accent mb-3">Lead Designer</p>
                            <p class="text-gray-600 mb-4">UI/UX specialist with a passion for creating intuitive user experiences.</p>
                            <div class="flex space-x-3">
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-linkedin-in"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-dribbble"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fas fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Team Member 4 -->
                    <div class="team-member bg-white rounded-lg overflow-hidden shadow-sm" data-aos="fade-up" data-aos-delay="400">
                        <img src="https://cdn.pixabay.com/photo/2017/08/01/08/29/woman-2563491_1280.jpg" alt="Team Member" class="w-full">
                        <div class="p-6">
                            <h4 class="text-xl font-bold mb-1">Michael Torres</h4>
                            <p class="text-accent mb-3">Lead Developer</p>
                            <p class="text-gray-600 mb-4">Full-stack developer with expertise in React, Node.js, and cloud technologies.</p>
                            <div class="flex space-x-3">
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-linkedin-in"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fab fa-github"></i></a>
                                <a href="javascript:void(0)" class="text-gray-400 hover:text-accent"><i class="fas fa-envelope"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Services -->
    <section id="services" class="py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">Our <span class="text-accent">Services</span></h2>
                <p class="max-w-2xl mx-auto text-gray-600">Comprehensive software development solutions tailored to your business needs.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Service 1 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-icon">
                        <i class="fas fa-laptop-code"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">Web Application Development</h3>
                    <p class="text-gray-600 mb-4">Custom web applications with responsive design and seamless user experience.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Progressive Web Apps</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> E-commerce Solutions</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Enterprise Portals</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> CMS Development</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <!-- Service 2 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="200">
                    <div class="service-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">Mobile App Development</h3>
                    <p class="text-gray-600 mb-4">Native and cross-platform mobile applications that deliver exceptional performance.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> iOS & Android Apps</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Flutter Development</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Mobile Strategy Consulting</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> App Store Optimization</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <!-- Service 3 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-icon">
                        <i class="fas fa-cloud"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">Cloud Solutions</h3>
                    <p class="text-gray-600 mb-4">Scalable cloud infrastructure and deployment services for optimal performance.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> AWS & Azure Integration</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Serverless Architecture</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Cloud Migration Services</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> DevOps Implementation</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <!-- Service 4 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="100">
                    <div class="service-icon">
                        <i class="fas fa-code-branch"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">API Development & Integration</h3>
                    <p class="text-gray-600 mb-4">Seamless API development and third-party integrations for connected systems.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> RESTful API Design</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> GraphQL Implementation</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Payment Gateway Integration</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> CRM & ERP Connectors</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <!-- Service 5 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="200">
                    <div class="service-icon">
                        <i class="fas fa-paint-brush"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">UI/UX Design</h3>
                    <p class="text-gray-600 mb-4">User-centered design solutions that enhance customer experience and engagement.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> User Research & Testing</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Wireframing & Prototyping</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Visual Design & Branding</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Accessibility Compliance</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
                
                <!-- Service 6 -->
                <div class="service-card p-8 bg-white" data-aos="fade-up" data-aos-delay="300">
                    <div class="service-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-2xl font-semibold mb-4">Maintenance & Support</h3>
                    <p class="text-gray-600 mb-4">Ongoing maintenance, monitoring, and support services for your applications.</p>
                    <ul class="mb-6 space-y-2 text-gray-600">
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Performance Optimization</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Security Audits & Updates</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> 24/7 Monitoring</li>
                        <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Technical Support</li>
                    </ul>
                    <a href="#portfolio" class="text-accent font-semibold hover:underline flex items-center">
                        View Case Studies <i class="fas fa-arrow-right ml-2"></i>
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- SaaS Products -->
    <section id="products" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">Our SaaS <span class="text-accent">Products</span></h2>
                <p class="max-w-2xl mx-auto text-gray-600">Explore our range of innovative SaaS solutions designed to solve real business problems.</p>
            </div>
            
            <!-- Product Slider -->
            <div class="swiper-container product-slider">
                <div class="swiper-wrapper">
                    <!-- Product 1 -->
                    <div class="swiper-slide">
                        <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm" data-aos="fade-up">
                            <img src="https://cdn.pixabay.com/photo/2018/05/08/08/44/artificial-intelligence-3382507_1280.jpg" alt="Product" class="w-full h-64 object-cover">
                            <div class="p-8">
                                <h3 class="text-2xl font-bold mb-4">DataVision Analytics</h3>
                                <p class="text-gray-600 mb-6">AI-powered analytics platform for data-driven business decisions.</p>
                                
                                <h4 class="font-semibold mb-3">Key Features:</h4>
                                <ul class="mb-6 space-y-2 text-gray-600">
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Real-time dashboard analytics</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> AI-driven insights and predictions</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Custom reporting tools</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Data visualization options</li>
                                </ul>
                                
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                                        <h5 class="font-semibold mb-2">Starter</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$49/mo</p>
                                        <p class="text-sm text-gray-600">For small businesses</p>
                                    </div>
                                    <div class="bg-primary text-white p-4 rounded-lg text-center transform scale-105">
                                        <h5 class="font-semibold mb-2">Pro</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$99/mo</p>
                                        <p class="text-sm">Most popular option</p>
                                    </div>
                                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                                        <h5 class="font-semibold mb-2">Enterprise</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$249/mo</p>
                                        <p class="text-sm text-gray-600">Unlimited resources</p>
                                    </div>
                                </div>
                                
                                <div class="border-l-4 border-accent pl-4 italic text-gray-600 mb-8">
                                    "DataVision Analytics has transformed how we process and interpret customer data, leading to a 35% increase in engagement rates." - Maria Johnson, CMO at TechCorp
                                </div>
                                
                                <a href="javascript:void(0)" class="btn-primary">Learn More</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Product 2 -->
                    <div class="swiper-slide">
                        <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm" data-aos="fade-up" data-aos-delay="100">
                            <img src="https://cdn.pixabay.com/photo/2018/03/10/12/00/teamwork-3213924_1280.jpg" alt="Product" class="w-full h-64 object-cover">
                            <div class="p-8">
                                <h3 class="text-2xl font-bold mb-4">ProjectFlow</h3>
                                <p class="text-gray-600 mb-6">Comprehensive project management solution with team collaboration tools.</p>
                                
                                <h4 class="font-semibold mb-3">Key Features:</h4>
                                <ul class="mb-6 space-y-2 text-gray-600">
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Task management & delegation</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Real-time collaboration</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Resource allocation tools</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Gantt charts & timeline views</li>
                                </ul>
                                
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                                        <h5 class="font-semibold mb-2">Basic</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$29/mo</p>
                                        <p class="text-sm text-gray-600">For small teams</p>
                                    </div>
                                    <div class="bg-primary text-white p-4 rounded-lg text-center transform scale-105">
                                        <h5 class="font-semibold mb-2">Business</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$79/mo</p>
                                        <p class="text-sm">Most popular option</p>
                                    </div>
                                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                                        <h5 class="font-semibold mb-2">Enterprise</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$199/mo</p>
                                        <p class="text-sm text-gray-600">Custom solutions</p>
                                    </div>
                                </div>
                                
                                <div class="border-l-4 border-accent pl-4 italic text-gray-600 mb-8">
                                    "ProjectFlow has streamlined our entire product development process, improving delivery times by over 40%." - Alex Thompson, Product Manager at InnovateX
                                </div>
                                
                                <a href="javascript:void(0)" class="btn-primary">Learn More</a>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Product 3 -->
                    <div class="swiper-slide">
                        <div class="product-card bg-white rounded-lg overflow-hidden shadow-sm" data-aos="fade-up" data-aos-delay="200">
                            <img src="https://cdn.pixabay.com/photo/2018/01/17/20/22/analytics-3088958_1280.jpg" alt="Product" class="w-full h-64 object-cover">
                            <div class="p-8">
                                <h3 class="text-2xl font-bold mb-4">SecureCloud</h3>
                                <p class="text-gray-600 mb-6">Enterprise-grade cloud security and compliance management platform.</p>
                                
                                <h4 class="font-semibold mb-3">Key Features:</h4>
                                <ul class="mb-6 space-y-2 text-gray-600">
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Threat detection & prevention</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Compliance automation</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Data encryption & security</li>
                                    <li class="flex items-center"><i class="fas fa-check text-accent mr-2"></i> Security audit logs</li>
                                </ul>
                                
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
                                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                                        <h5 class="font-semibold mb-2">Standard</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$99/mo</p>
                                        <p class="text-sm text-gray-600">Basic protection</p>
                                    </div>
                                    <div class="bg-primary text-white p-4 rounded-lg text-center transform scale-105">
                                        <h5 class="font-semibold mb-2">Advanced</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$199/mo</p>
                                        <p class="text-sm">Enhanced security</p>
                                    </div>
                                    <div class="bg-gray-50 p-4 rounded-lg text-center">
                                        <h5 class="font-semibold mb-2">Enterprise</h5>
                                        <p class="text-accent text-xl font-bold mb-2">$349/mo</p>
                                        <p class="text-sm text-gray-600">Full protection suite</p>
                                    </div>
                                </div>
                                
                                <div class="border-l-4 border-accent pl-4 italic text-gray-600 mb-8">
                                    "SecureCloud gives us peace of mind knowing our sensitive data is protected with enterprise-grade security." - Robert Chen, CIO at FinTech Solutions
                                </div>
                                
                                <a href="javascript:void(0)" class="btn-primary">Learn More</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Slider pagination -->
                <div class="swiper-pagination mt-8"></div>
            </div>
            
            <div class="text-center mt-12">
                <a href="javascript:void(0)" class="btn-primary">View All Products</a>
            </div>
        </div>
    </section>

    <!-- Portfolio -->
    <section id="portfolio" class="py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">Our <span class="text-accent">Portfolio</span></h2>
                <p class="max-w-2xl mx-auto text-gray-600">Explore our successful projects across various industries.</p>
            </div>
            
            <!-- Portfolio Filters -->
            <div class="portfolio-filters flex flex-wrap justify-center mb-12" data-aos="fade-up">
                <button class="filter-btn active" data-filter="all">All Projects</button>
                <button class="filter-btn" data-filter="fintech">Fintech</button>
                <button class="filter-btn" data-filter="healthcare">Healthcare</button>
                <button class="filter-btn" data-filter="ecommerce">E-Commerce</button>
                <button class="filter-btn" data-filter="education">Education</button>
            </div>
            
            <!-- Portfolio Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 portfolio-grid">
                <!-- Portfolio Item 1 -->
                <div class="portfolio-item" data-category="fintech" data-aos="fade-up" data-aos-delay="100">
                    <img src="https://cdn.pixabay.com/photo/2017/09/07/08/54/money-2724241_1280.jpg" alt="Portfolio Project" class="w-full h-64 object-cover rounded-lg">
                    <div class="portfolio-overlay rounded-lg text-center">
                        <h3 class="text-2xl font-bold text-white mb-2">CryptoTracker Pro</h3>
                        <p class="text-gray-200 mb-4">Mobile app for cryptocurrency portfolio management</p>
                        <p class="text-sm text-gray-300 mb-6">Client: BlockChain Ventures</p>
                        <div class="flex justify-center space-x-2 mb-6">
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">React Native</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Node.js</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Firebase</span>
                        </div>
                        <button class="btn-primary view-project" data-project="1">View Case Study</button>
                    </div>
                </div>
                
                <!-- Portfolio Item 2 -->
                <div class="portfolio-item" data-category="healthcare" data-aos="fade-up" data-aos-delay="200">
                    <img src="https://cdn.pixabay.com/photo/2016/11/09/15/27/dna-1811955_1280.jpg" alt="Portfolio Project" class="w-full h-64 object-cover rounded-lg">
                    <div class="portfolio-overlay rounded-lg text-center">
                        <h3 class="text-2xl font-bold text-white mb-2">MediConnect</h3>
                        <p class="text-gray-200 mb-4">Patient management system for healthcare providers</p>
                        <p class="text-sm text-gray-300 mb-6">Client: Regional Health Network</p>
                        <div class="flex justify-center space-x-2 mb-6">
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Angular</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">C#/.NET</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Azure</span>
                        </div>
                        <button class="btn-primary view-project" data-project="2">View Case Study</button>
                    </div>
                </div>
                
                <!-- Portfolio Item 3 -->
                <div class="portfolio-item" data-category="ecommerce" data-aos="fade-up" data-aos-delay="300">
                    <img src="https://cdn.pixabay.com/photo/2017/03/13/17/26/ecommerce-2140603_1280.jpg" alt="Portfolio Project" class="w-full h-64 object-cover rounded-lg">
                    <div class="portfolio-overlay rounded-lg text-center">
                        <h3 class="text-2xl font-bold text-white mb-2">ShopGenius</h3>
                        <p class="text-gray-200 mb-4">AI-powered recommendation engine for e-commerce</p>
                        <p class="text-sm text-gray-300 mb-6">Client: Global Retail Inc.</p>
                        <div class="flex justify-center space-x-2 mb-6">
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Python</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">TensorFlow</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">AWS</span>
                        </div>
                        <button class="btn-primary view-project" data-project="3">View Case Study</button>
                    </div>
                </div>
                
                <!-- Portfolio Item 4 -->
                <div class="portfolio-item" data-category="education" data-aos="fade-up" data-aos-delay="100">
                    <img src="https://cdn.pixabay.com/photo/2018/06/27/07/45/college-student-3500990_1280.jpg" alt="Portfolio Project" class="w-full h-64 object-cover rounded-lg">
                    <div class="portfolio-overlay rounded-lg text-center">
                        <h3 class="text-2xl font-bold text-white mb-2">LearnSphere</h3>
                        <p class="text-gray-200 mb-4">Online learning platform with adaptive curriculum</p>
                        <p class="text-sm text-gray-300 mb-6">Client: EduTech Academy</p>
                        <div class="flex justify-center space-x-2 mb-6">
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Vue.js</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Laravel</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">PostgreSQL</span>
                        </div>
                        <button class="btn-primary view-project" data-project="4">View Case Study</button>
                    </div>
                </div>
                
                <!-- Portfolio Item 5 -->
                <div class="portfolio-item" data-category="fintech" data-aos="fade-up" data-aos-delay="200">
                    <img src="https://images.unsplash.com/photo-1695634280931-c7fe426ebb19?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjkwMjR8MHwxfHNlYXJjaHw4fHxQb3J0Zm9saW8lMjBQcm9qZWN0fGVufDB8fHx8MTc2Mjk0MDEwOXww&ixlib=rb-4.1.0&q=80&w=1080" alt="Portfolio Project" class="w-full h-64 object-cover rounded-lg">
                    <div class="portfolio-overlay rounded-lg text-center">
                        <h3 class="text-2xl font-bold text-white mb-2">InvoicePro</h3>
                        <p class="text-gray-200 mb-4">Automated invoice and payment processing system</p>
                        <p class="text-sm text-gray-300 mb-6">Client: Financial Solutions Corp</p>
                        <div class="flex justify-center space-x-2 mb-6">
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">React</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Node.js</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">MongoDB</span>
                        </div>
                        <button class="btn-primary view-project" data-project="5">View Case Study</button>
                    </div>
                </div>
                
                <!-- Portfolio Item 6 -->
                <div class="portfolio-item" data-category="healthcare" data-aos="fade-up" data-aos-delay="300">
                    <img src="https://cdn.pixabay.com/photo/2017/01/29/21/16/nurse-2019420_1280.jpg" alt="Portfolio Project" class="w-full h-64 object-cover rounded-lg">
                    <div class="portfolio-overlay rounded-lg text-center">
                        <h3 class="text-2xl font-bold text-white mb-2">TeleHealth Connect</h3>
                        <p class="text-gray-200 mb-4">Secure video consultation platform for healthcare</p>
                        <p class="text-sm text-gray-300 mb-6">Client: MediCare Group</p>
                        <div class="flex justify-center space-x-2 mb-6">
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">WebRTC</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">React</span>
                            <span class="bg-accent bg-opacity-20 text-white px-3 py-1 rounded-full text-xs">Express</span>
                        </div>
                        <button class="btn-primary view-project" data-project="6">View Case Study</button>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12" data-aos="fade-up">
                <a href="javascript:void(0)" class="btn-primary">View All Projects</a>
            </div>
        </div>
    </section>

    <!-- Blog -->
    <section id="blog" class="py-20 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">Latest <span class="text-accent">Insights</span></h2>
                <p class="max-w-2xl mx-auto text-gray-600">Stay updated with the latest trends and insights in software development and SaaS.</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Blog Post 1 -->
                <div class="blog-card bg-white rounded-lg overflow-hidden" data-aos="fade-up" data-aos-delay="100">
                    <img src="https://cdn.pixabay.com/photo/2016/11/19/14/00/code-1839406_1280.jpg" alt="Blog Post" class="w-full">
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-4">
                            <i class="far fa-calendar-alt mr-2"></i> April 15, 2025
                            <span class="mx-2">•</span>
                            <i class="far fa-user mr-2"></i> David Foster
                        </div>
                        <h3 class="text-xl font-bold mb-4">The Future of Serverless Architecture in Enterprise Applications</h3>
                        <p class="text-gray-600 mb-4">Explore how serverless architecture is transforming enterprise application development and what this means for businesses in 2025 and beyond.</p>
                        <a href="javascript:void(0)" class="text-accent font-semibold hover:underline flex items-center">
                            Read More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Blog Post 2 -->
                <div class="blog-card bg-white rounded-lg overflow-hidden" data-aos="fade-up" data-aos-delay="200">
                    <img src="https://images.unsplash.com/photo-1432821596592-e2c18b78144f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3NjkwMjR8MHwxfHNlYXJjaHw3fHxCbG9nJTIwUG9zdHxlbnwwfHx8fDE3NjI5NDA0MDV8MA&ixlib=rb-4.1.0&q=80&w=1080" alt="Blog Post" class="w-full">
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-4">
                            <i class="far fa-calendar-alt mr-2"></i> April 3, 2025
                            <span class="mx-2">•</span>
                            <i class="far fa-user mr-2"></i> Alexa Ramirez
                        </div>
                        <h3 class="text-xl font-bold mb-4">Blockchain Technology in SaaS: Beyond the Hype</h3>
                        <p class="text-gray-600 mb-4">A deep dive into practical applications of blockchain technology in SaaS products and how it's creating real business value.</p>
                        <a href="javascript:void(0)" class="text-accent font-semibold hover:underline flex items-center">
                            Read More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Blog Post 3 -->
                <div class="blog-card bg-white rounded-lg overflow-hidden" data-aos="fade-up" data-aos-delay="300">
                    <img src="https://cdn.pixabay.com/photo/2018/01/28/10/59/internet-3113279_1280.jpg" alt="Blog Post" class="w-full">
                    <div class="p-6">
                        <div class="flex items-center text-sm text-gray-500 mb-4">
                            <i class="far fa-calendar-alt mr-2"></i> March 22, 2025
                            <span class="mx-2">•</span>
                            <i class="far fa-user mr-2"></i> Sarah Chen
                        </div>
                        <h3 class="text-xl font-bold mb-4">Designing for Accessibility: Why It Matters More Than Ever</h3>
                        <p class="text-gray-600 mb-4">Learn why accessible design is not just a legal requirement but a business advantage in creating inclusive software products.</p>
                        <a href="javascript:void(0)" class="text-accent font-semibold hover:underline flex items-center">
                            Read More <i class="fas fa-arrow-right ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12" data-aos="fade-up">
                <a href="javascript:void(0)" class="btn-primary">View All Articles</a>
            </div>
        </div>
    </section>

    <!-- Testimonials -->
    <section class="py-20 bg-primary text-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">Client <span class="text-accent">Testimonials</span></h2>
                <p class="max-w-2xl mx-auto text-gray-300">Don't just take our word for it. Here's what our clients have to say.</p>
            </div>
            
            <div class="swiper-container testimonial-slider">
                <div class="swiper-wrapper">
                    <!-- Testimonial 1 -->
                    <div class="swiper-slide">
                        <div class="testimonial-card bg-secondary rounded-lg p-8" data-aos="fade-up">
                            <div class="flex items-center mb-6">
                                <img src="https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg" alt="Testimonial" class="w-16 h-16 rounded-full object-cover mr-4">
                                <div>
                                    <h4 class="text-xl font-bold">John Mitchell</h4>
                                    <p class="text-gray-300">CEO, TechSolutions Inc.</p>
                                </div>
                            </div>
                            <p class="text-gray-200 mb-6">"Working with Daf-Devs has been a game-changer for our business. Their team delivered a custom SaaS solution that exceeded our expectations and has significantly improved our operational efficiency."</p>
                            <div class="flex text-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Testimonial 2 -->
                    <div class="swiper-slide">
                        <div class="testimonial-card bg-secondary rounded-lg p-8" data-aos="fade-up" data-aos-delay="100">
                            <div class="flex items-center mb-6">
                                <img src="https://cdn.pixabay.com/photo/2017/08/01/08/29/woman-2563491_1280.jpg" alt="Testimonial" class="w-16 h-16 rounded-full object-cover mr-4">
                                <div>
                                    <h4 class="text-xl font-bold">Sarah Williams</h4>
                                    <p class="text-gray-300">CTO, HealthTech Partners</p>
                                </div>
                            </div>
                            <p class="text-gray-200 mb-6">"Daf-Devs' expertise in healthcare software development was evident throughout our project. They understood our complex requirements and delivered a secure, compliant solution that has improved patient care."</p>
                            <div class="flex text-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Testimonial 3 -->
                    <div class="swiper-slide">
                        <div class="testimonial-card bg-secondary rounded-lg p-8" data-aos="fade-up" data-aos-delay="200">
                            <div class="flex items-center mb-6">
                                <img src="https://cdn.pixabay.com/photo/2019/11/03/20/11/portrait-4599553_1280.jpg" alt="Testimonial" class="w-16 h-16 rounded-full object-cover mr-4">
                                <div>
                                    <h4 class="text-xl font-bold">Michael Rodriguez</h4>
                                    <p class="text-gray-300">Founder, E-Shop Global</p>
                                </div>
                            </div>
                            <p class="text-gray-200 mb-6">"Our e-commerce platform developed by Daf-Devs has seen a 40% increase in conversion rates. Their attention to UX details and performance optimization made all the difference."</p>
                            <div class="flex text-accent">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Slider pagination -->
                <div class="swiper-pagination mt-8"></div>
            </div>
        </div>
    </section>

    <!-- Contact -->
    <section id="contact" class="py-20">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16" data-aos="fade-up">
                <h2 class="text-4xl font-bold mb-4">Get In <span class="text-accent">Touch</span></h2>
                <p class="max-w-2xl mx-auto text-gray-600">Have a project in mind? Let's discuss how we can help you achieve your goals.</p>
            </div>
            
            <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
                <!-- Contact Form -->
                <div class="bg-white p-8 rounded-lg shadow-sm" data-aos="fade-right">
                    <h3 class="text-2xl font-bold mb-6">Send Us a Message</h3>
                    
                    <form id="contactForm">
                        <div class="mb-4">
                            <label for="name" class="block text-gray-700 mb-2">Your Name</label>
                            <input type="text" id="name" name="name" class="form-control" placeholder="John Doe" required>
                        </div>
                        
                        <div class="mb-4">
                            <label for="email" class="block text-gray-700 mb-2">Your Email</label>
                            <input type="email" id="email" name="email" class="form-control" placeholder="john@example.com" required>
                        </div>
                        
                        <div class="mb-4">
                            <label for="subject" class="block text-gray-700 mb-2">Subject</label>
                            <input type="text" id="subject" name="subject" class="form-control" placeholder="Project Inquiry" required>
                        </div>
                        
                        <div class="mb-6">
                            <label for="message" class="block text-gray-700 mb-2">Your Message</label>
                            <textarea id="message" name="message" rows="5" class="form-control" placeholder="Tell us about your project..." required></textarea>
                        </div>
                        
                        <button type="submit" class="btn-primary w-full">Send Message</button>
                    </form>
                </div>
                
                <!-- Contact Information -->
                <div data-aos="fade-left">
                    <h3 class="text-2xl font-bold mb-6">Contact Information</h3>
                    
                    <div class="space-y-6 mb-10">
                        <div class="contact-info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <div>
                                <h4 class="font-semibold text-lg">Our Location</h4>
                                <p class="text-gray-600">1234 Tech Park, Innovation Drive<br>San Francisco, CA 94107</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item">
                            <i class="fas fa-phone-alt"></i>
                            <div>
                                <h4 class="font-semibold text-lg">Call Us</h4>
                                <p class="text-gray-600">+1 (555) 123-4567</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item">
                            <i class="fas fa-envelope"></i>
                            <div>
                                <h4 class="font-semibold text-lg">Email Us</h4>
                                <p class="text-gray-600">info@daf-devs.com</p>
                            </div>
                        </div>
                        
                        <div class="contact-info-item">
                            <i class="fas fa-clock"></i>
                            <div>
                                <h4 class="font-semibold text-lg">Working Hours</h4>
                                <p class="text-gray-600">Monday - Friday: 9:00 AM - 6:00 PM<br>Weekend: Closed</p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Map -->
                    <div class="rounded-lg overflow-hidden h-80 bg-gray-200">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d50470.93947650387!2d-122.43316001185215!3d37.77696589606801!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80859a6d00690021%3A0x4a501367f076adff!2sSan%20Francisco%2C%20CA%2C%20USA!5e0!3m2!1sen!2s!4v1639564558878!5m2!1sen!2s" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                    
                    <!-- Social Media -->
                    <div class="mt-8">
                        <h4 class="font-semibold text-lg mb-4">Follow Us</h4>
                        <div class="flex space-x-4">
                            <a href="javascript:void(0)" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white transition-all hover:bg-accent">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                            <a href="javascript:void(0)" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white transition-all hover:bg-accent">
                                <i class="fab fa-twitter"></i>
                            </a>
                            <a href="javascript:void(0)" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white transition-all hover:bg-accent">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                            <a href="javascript:void(0)" class="w-10 h-10 rounded-full bg-primary flex items-center justify-center text-white transition-all hover:bg-accent">
                                <i class="fab fa-github"></i>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-primary text-white">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Column 1 -->
                <div>
                    <h3 class="text-2xl font-bold mb-6">Daf-<span class="text-accent">Devs</span></h3>
                    <p class="text-gray-300 mb-6">Empowering businesses with cutting-edge software solutions and SaaS products.</p>
                    <div class="social-links flex">
                        <a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a>
                        <a href="javascript:void(0)"><i class="fab fa-twitter"></i></a>
                        <a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a>
                        <a href="javascript:void(0)"><i class="fab fa-github"></i></a>
                    </div>
                </div>
                
                <!-- Column 2 -->
                <div>
                    <h4 class="text-xl font-semibold mb-6">Quick Links</h4>
                    <ul class="footer-links">
                        <li><a href="#home">Home</a></li>
                        <li><a href="#about">About Us</a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#products">SaaS Products</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#blog">Blog</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </div>
                
                <!-- Column 3 -->
                <div>
                    <h4 class="text-xl font-semibold mb-6">Our Services</h4>
                    <ul class="footer-links">
                        <li><a href="#services">Web Development</a></li>
                        <li><a href="#services">Mobile App Development</a></li>
                        <li><a href="#services">Cloud Solutions</a></li>
                        <li><a href="#services">UI/UX Design</a></li>
                        <li><a href="#services">API Development</a></li>
                        <li><a href="#services">Maintenance & Support</a></li>
                    </ul>
                </div>
                
                <!-- Column 4 -->
                <div>
                    <h4 class="text-xl font-semibold mb-6">Contact Us</h4>
                    <ul class="footer-links space-y-4">
                        <li class="flex items-start">
                            <i class="fas fa-map-marker-alt mt-1 mr-3"></i>
                            <span>1234 Tech Park, Innovation Drive<br>San Francisco, CA 94107</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-phone-alt mr-3"></i>
                            <span>+1 (555) 123-4567</span>
                        </li>
                        <li class="flex items-center">
                            <i class="fas fa-envelope mr-3"></i>
                            <span>info@daf-devs.com</span>
                        </li>
                    </ul>
                </div>
            </div>
            
            <hr class="border-gray-700 my-8">
            
            <div class="flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-300 mb-4 md:mb-0">© 2025 Daf-Devs. All Rights Reserved.</p>
                <div class="flex space-x-6">
                    <a href="javascript:void(0)" class="text-gray-300 hover:text-accent transition-colors">Privacy Policy</a>
                    <a href="javascript:void(0)" class="text-gray-300 hover:text-accent transition-colors">Terms of Service</a>
                    <a href="javascript:void(0)" class="text-gray-300 hover:text-accent transition-colors">Cookie Policy</a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Project Modal -->
    <div id="projectModal" class="modal">
        <div class="modal-content">
            <div class="close-modal">
                <i class="fas fa-times"></i>
            </div>
            <div id="projectDetails" class="p-8">
                <!-- Project details will be inserted here -->
            </div>
        </div>
    </div>

    <!-- Admin Login Button -->
    <div class="admin-login">
        <i class="fas fa-lock"></i>
    </div>

    <!-- Admin Panel -->
    <div id="adminPanel" class="admin-panel">
        <div class="admin-panel-header">
            <h2 class="text-2xl font-bold">Admin Panel</h2>
            <div class="admin-panel-close">
                <i class="fas fa-times"></i>
            </div>
        </div>
        
        <div class="admin-tabs">
            <button class="admin-tab-btn active" data-tab="team">Team</button>
            <button class="admin-tab-btn" data-tab="portfolio">Portfolio</button>
            <button class="admin-tab-btn" data-tab="products">SaaS Products</button>
        </div>
        
        <!-- Team Tab -->
        <div id="teamTab" class="admin-tab active">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold">Manage Team Members</h3>
                <button id="addTeamBtn" class="bg-accent text-dark py-2 px-4 rounded-md font-medium">Add New Member</button>
            </div>
            
            <div id="teamList" class="space-y-4">
                <div class="admin-item">
                    <div class="flex items-center">
                        <img src="https://cdn.pixabay.com/photo/2016/11/21/12/42/beard-1845166_1280.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-4 object-cover">
                        <div>
                            <h4 class="font-medium">David Foster</h4>
                            <p class="text-sm text-gray-500">CEO & Founder</p>
                        </div>
                    </div>
                    <div class="admin-item-actions">
                        <button class="edit-team-btn text-blue-600"><i class="fas fa-edit"></i></button>
                        <button class="delete-team-btn text-red-600"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
                
                <div class="admin-item">
                    <div class="flex items-center">
                        <img src="https://cdn.pixabay.com/photo/2017/08/01/01/33/beanie-2562646_1280.jpg" alt="Team Member" class="w-12 h-12 rounded-full mr-4 object-cover">
                        <div>
                            <h4 class="font-medium">Alexa Ramirez</h4>
                            <p class="text-sm text-gray-500">CTO</p>
                        </div>
                    </div>
                    <div class="admin-item-actions">
                        <button class="edit-team-btn text-blue-600"><i class="fas fa-edit"></i></button>
                        <button class="delete-team-btn text-red-600"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
            </div>
            
            <!-- Team Member Form (hidden by default) -->
            <div id="teamForm" class="bg-gray-50 p-6 rounded-lg mt-8" style="display: none;">
                <h4 class="text-lg font-semibold mb-4">Add/Edit Team Member</h4>
                
                <div class="admin-form-group">
                    <label for="teamName">Name</label>
                    <input type="text" id="teamName" class="form-control" placeholder="Full Name">
                </div>
                
                <div class="admin-form-group">
                    <label for="teamPosition">Position</label>
                    <input type="text" id="teamPosition" class="form-control" placeholder="Job Title">
                </div>
                
                <div class="admin-form-group">
                    <label for="teamBio">Bio</label>
                    <textarea id="teamBio" class="form-control" rows="3" placeholder="Brief bio..."></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label for="teamPhoto">Photo</label>
                    <input type="file" id="teamPhoto" class="form-control" accept="image/*">
                </div>
                
                <div class="admin-form-group">
                    <label>Social Links</label>
                    <div class="grid grid-cols-2 gap-4">
                        <input type="text" id="teamLinkedIn" class="form-control" placeholder="LinkedIn URL">
                        <input type="text" id="teamTwitter" class="form-control" placeholder="Twitter URL">
                    </div>
                </div>
                
                <div class="admin-form-actions">
                    <button id="cancelTeamBtn" class="px-4 py-2 border border-gray-300 rounded-md">Cancel</button>
                    <button id="saveTeamBtn" class="px-4 py-2 bg-accent text-dark rounded-md">Save Member</button>
                </div>
            </div>
        </div>
        
        <!-- Portfolio Tab -->
        <div id="portfolioTab" class="admin-tab">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold">Manage Portfolio Projects</h3>
                <button id="addPortfolioBtn" class="bg-accent text-dark py-2 px-4 rounded-md font-medium">Add New Project</button>
            </div>
            
            <div id="portfolioList" class="space-y-4">
                <div class="admin-item">
                    <div class="flex items-center">
                        <img src="https://cdn.pixabay.com/photo/2017/09/07/08/54/money-2724241_1280.jpg" alt="Project" class="w-16 h-12 rounded object-cover mr-4">
                        <div>
                            <h4 class="font-medium">CryptoTracker Pro</h4>
                            <p class="text-sm text-gray-500">Fintech</p>
                        </div>
                    </div>
                    <div class="admin-item-actions">
                        <button class="edit-portfolio-btn text-blue-600"><i class="fas fa-edit"></i></button>
                        <button class="delete-portfolio-btn text-red-600"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
                
                <div class="admin-item">
                    <div class="flex items-center">
                        <img src="https://cdn.pixabay.com/photo/2016/11/09/15/27/dna-1811955_1280.jpg" alt="Project" class="w-16 h-12 rounded object-cover mr-4">
                        <div>
                            <h4 class="font-medium">MediConnect</h4>
                            <p class="text-sm text-gray-500">Healthcare</p>
                        </div>
                    </div>
                    <div class="admin-item-actions">
                        <button class="edit-portfolio-btn text-blue-600"><i class="fas fa-edit"></i></button>
                        <button class="delete-portfolio-btn text-red-600"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
            </div>
            
            <!-- Portfolio Project Form (hidden by default) -->
            <div id="portfolioForm" class="bg-gray-50 p-6 rounded-lg mt-8" style="display: none;">
                <h4 class="text-lg font-semibold mb-4">Add/Edit Portfolio Project</h4>
                
                <div class="admin-form-group">
                    <label for="projectName">Project Name</label>
                    <input type="text" id="projectName" class="form-control" placeholder="Project Name">
                </div>
                
                <div class="admin-form-group">
                    <label for="projectClient">Client</label>
                    <input type="text" id="projectClient" class="form-control" placeholder="Client Name">
                </div>
                
                <div class="admin-form-group">
                    <label for="projectCategory">Category</label>
                    <select id="projectCategory" class="form-control">
                        <option value="fintech">Fintech</option>
                        <option value="healthcare">Healthcare</option>
                        <option value="ecommerce">E-Commerce</option>
                        <option value="education">Education</option>
                    </select>
                </div>
                
                <div class="admin-form-group">
                    <label for="projectDescription">Description</label>
                    <textarea id="projectDescription" class="form-control" rows="3" placeholder="Project description..."></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label for="projectTechnologies">Technologies (comma separated)</label>
                    <input type="text" id="projectTechnologies" class="form-control" placeholder="React, Node.js, AWS">
                </div>
                
                <div class="admin-form-group">
                    <label for="projectImage">Project Image</label>
                    <input type="file" id="projectImage" class="form-control" accept="image/*">
                </div>
                
                <div class="admin-form-group">
                    <label for="projectChallenges">Challenges</label>
                    <textarea id="projectChallenges" class="form-control" rows="3" placeholder="Challenges faced..."></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label for="projectSolution">Solution</label>
                    <textarea id="projectSolution" class="form-control" rows="3" placeholder="How we solved it..."></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label for="projectResults">Results</label>
                    <textarea id="projectResults" class="form-control" rows="3" placeholder="Project outcomes..."></textarea>
                </div>
                
                <div class="admin-form-actions">
                    <button id="cancelPortfolioBtn" class="px-4 py-2 border border-gray-300 rounded-md">Cancel</button>
                    <button id="savePortfolioBtn" class="px-4 py-2 bg-accent text-dark rounded-md">Save Project</button>
                </div>
            </div>
        </div>
        
        <!-- Products Tab -->
        <div id="productsTab" class="admin-tab">
            <div class="flex justify-between items-center mb-6">
                <h3 class="text-xl font-semibold">Manage SaaS Products</h3>
                <button id="addProductBtn" class="bg-accent text-dark py-2 px-4 rounded-md font-medium">Add New Product</button>
            </div>
            
            <div id="productsList" class="space-y-4">
                <div class="admin-item">
                    <div class="flex items-center">
                        <img src="https://cdn.pixabay.com/photo/2018/05/08/08/44/artificial-intelligence-3382507_1280.jpg" alt="Product" class="w-16 h-12 rounded object-cover mr-4">
                        <div>
                            <h4 class="font-medium">DataVision Analytics</h4>
                            <p class="text-sm text-gray-500">AI-powered analytics platform</p>
                        </div>
                    </div>
                    <div class="admin-item-actions">
                        <button class="edit-product-btn text-blue-600"><i class="fas fa-edit"></i></button>
                        <button class="delete-product-btn text-red-600"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
                
                <div class="admin-item">
                    <div class="flex items-center">
                        <img src="https://cdn.pixabay.com/photo/2018/03/10/12/00/teamwork-3213924_1280.jpg" alt="Product" class="w-16 h-12 rounded object-cover mr-4">
                        <div>
                            <h4 class="font-medium">ProjectFlow</h4>
                            <p class="text-sm text-gray-500">Project management solution</p>
                        </div>
                    </div>
                    <div class="admin-item-actions">
                        <button class="edit-product-btn text-blue-600"><i class="fas fa-edit"></i></button>
                        <button class="delete-product-btn text-red-600"><i class="fas fa-trash-alt"></i></button>
                    </div>
                </div>
            </div>
            
            <!-- Product Form (hidden by default) -->
            <div id="productForm" class="bg-gray-50 p-6 rounded-lg mt-8" style="display: none;">
                <h4 class="text-lg font-semibold mb-4">Add/Edit SaaS Product</h4>
                
                <div class="admin-form-group">
                    <label for="productName">Product Name</label>
                    <input type="text" id="productName" class="form-control" placeholder="Product Name">
                </div>
                
                <div class="admin-form-group">
                    <label for="productDescription">Description</label>
                    <textarea id="productDescription" class="form-control" rows="3" placeholder="Product description..."></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label for="productFeatures">Key Features (one per line)</label>
                    <textarea id="productFeatures" class="form-control" rows="4" placeholder="Feature 1&#10;Feature 2&#10;Feature 3"></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label for="productImage">Product Image/Screenshot</label>
                    <input type="file" id="productImage" class="form-control" accept="image/*">
                </div>
                
                <div class="admin-form-group">
                    <label>Pricing Tiers</label>
                    <div class="grid grid-cols-3 gap-4 mb-2">
                        <input type="text" id="priceTier1Name" class="form-control" placeholder="Tier Name (e.g. Basic)">
                        <input type="number" id="priceTier1Price" class="form-control" placeholder="Price">
                        <input type="text" id="priceTier1Description" class="form-control" placeholder="Short description">
                    </div>
                    <div class="grid grid-cols-3 gap-4 mb-2">
                        <input type="text" id="priceTier2Name" class="form-control" placeholder="Tier Name (e.g. Pro)">
                        <input type="number" id="priceTier2Price" class="form-control" placeholder="Price">
                        <input type="text" id="priceTier2Description" class="form-control" placeholder="Short description">
                    </div>
                    <div class="grid grid-cols-3 gap-4">
                        <input type="text" id="priceTier3Name" class="form-control" placeholder="Tier Name (e.g. Enterprise)">
                        <input type="number" id="priceTier3Price" class="form-control" placeholder="Price">
                        <input type="text" id="priceTier3Description" class="form-control" placeholder="Short description">
                    </div>
                </div>
                
                <div class="admin-form-group">
                    <label for="productTestimonial">Featured Testimonial</label>
                    <textarea id="productTestimonial" class="form-control" rows="3" placeholder="Customer testimonial..."></textarea>
                </div>
                
                <div class="admin-form-group">
                    <label for="testimonialAuthor">Testimonial Author</label>
                    <input type="text" id="testimonialAuthor" class="form-control" placeholder="Name, Position at Company">
                </div>
                
                <div class="admin-form-actions">
                    <button id="cancelProductBtn" class="px-4 py-2 border border-gray-300 rounded-md">Cancel</button>
                    <button id="saveProductBtn" class="px-4 py-2 bg-accent text-dark rounded-md">Save Product</button>
                </div>
            </div>
        </div>
    </div>

    <!-- AOS Animation Library -->
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
    
    <!-- Swiper.js -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    
    <script id="app-script">
        // Initialize AOS animation library
        AOS.init({
            duration: 800,
            easing: 'ease-in-out',
            once: true
        });
        
        // Navbar scroll effect
        window.addEventListener('scroll', function() {
            const navbar = document.querySelector('.navbar');
            if (window.scrollY > 50) {
                navbar.classList.add('scrolled');
            } else {
                navbar.classList.remove('scrolled');
            }
        });
        
        // Mobile menu toggle
        const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
        const navbarNav = document.querySelector('.navbar-nav');
        
        mobileMenuToggle.addEventListener('click', function() {
            navbarNav.classList.toggle('active');
        });
        
        // Initialize Swiper sliders
        const productSlider = new Swiper('.product-slider', {
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            breakpoints: {
                768: {
                    slidesPerView: 2
                },
                1024: {
                    slidesPerView: 3
                }
            }
        });
        
        const testimonialSlider = new Swiper('.testimonial-slider', {
            slidesPerView: 1,
            spaceBetween: 30,
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            breakpoints: {
                768: {
                    slidesPerView: 2
                },
                1024: {
                    slidesPerView: 3
                }
            }
        });
        
        // Portfolio filtering
        const filterBtns = document.querySelectorAll('.filter-btn');
        const portfolioItems = document.querySelectorAll('.portfolio-item');
        
        filterBtns.forEach(btn => {
            btn.addEventListener('click', () => {
                // Reset active class
                filterBtns.forEach(btn => btn.classList.remove('active'));
                btn.classList.add('active');
                
                const filterValue = btn.getAttribute('data-filter');
                
                portfolioItems.forEach(item => {
                    const category = item.getAttribute('data-category');
                    
                    if (filterValue === 'all' || filterValue === category) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });
            });
        });
        
        // Portfolio modal
        const modal = document.getElementById('projectModal');
        const projectDetails = document.getElementById('projectDetails');
        const viewProjectBtns = document.querySelectorAll('.view-project');
        const closeModal = document.querySelector('.close-modal');
        
        // Sample project data (would come from API in production)
        const projectData = {
            1: {
                title: "CryptoTracker Pro",
                client: "BlockChain Ventures",
                category: "Fintech",
                description: "Mobile app for cryptocurrency portfolio management with real-time tracking and analytics.",
                image: "https://cdn.pixabay.com/photo/2017/09/07/08/54/money-2724241_1280.jpg",
                technologies: ["React Native", "Node.js", "Firebase"],
                challenge: "The client needed a secure, fast-performing mobile application that could track multiple cryptocurrency investments in real-time, with complex data visualization and alerts.",
                solution: "We developed a React Native application with offline capabilities and real-time data synchronization. The app included custom charting libraries for performance visualization and integrated with multiple cryptocurrency APIs.",
                results: "The application achieved a 4.8/5 star rating on app stores with over 50,000 downloads in the first three months. User retention rate of 78% after 30 days."
            },
            2: {
                title: "MediConnect",
                client: "Regional Health Network",
                category: "Healthcare",
                description: "Patient management system for healthcare providers with secure record sharing and appointment scheduling.",
                image: "https://cdn.pixabay.com/photo/2016/11/09/15/27/dna-1811955_1280.jpg",
                technologies: ["Angular", "C#/.NET", "Azure"],
                challenge: "The healthcare network needed to replace legacy systems with a HIPAA-compliant, integrated platform that could manage patient records across multiple facilities.",
                solution: "We developed a secure Angular front-end with a .NET backend, deployed on Azure. The application included role-based access control, audit logging, and secure data sharing between authorized providers.",
                results: "Reduced administrative time by 35% and improved patient appointment adherence by 28%. Successfully integrated with 5 different EHR systems."
            }
        };
        
        viewProjectBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const projectId = this.getAttribute('data-project');
                const project = projectData[projectId];
                
                if (project) {
                    let techHTML = '';
                    project.technologies.forEach(tech => {
                        techHTML += `<span class="bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-xs mr-2">${tech}</span>`;
                    });
                    
                    projectDetails.innerHTML = `
                        <div class="mb-6">
                            <img src="${project.image}" alt="${project.title}" class="w-full h-64 object-cover rounded-lg">
                        </div>
                        <h2 class="text-3xl font-bold mb-2">${project.title}</h2>
                        <p class="text-gray-600 mb-6">${project.description}</p>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-6">
                            <div>
                                <h3 class="text-xl font-semibold mb-3">Client</h3>
                                <p class="text-gray-600">${project.client}</p>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold mb-3">Category</h3>
                                <p class="text-gray-600">${project.category}</p>
                            </div>
                        </div>
                        
                        <div class="mb-6">
                            <h3 class="text-xl font-semibold mb-3">Technologies Used</h3>
                            <div class="flex flex-wrap gap-2">
                                ${techHTML}
                            </div>
                        </div>
                        
                        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-6">
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h3 class="text-xl font-semibold mb-3">Challenge</h3>
                                <p class="text-gray-600">${project.challenge}</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h3 class="text-xl font-semibold mb-3">Solution</h3>
                                <p class="text-gray-600">${project.solution}</p>
                            </div>
                            <div class="bg-gray-50 p-6 rounded-lg">
                                <h3 class="text-xl font-semibold mb-3">Results</h3>
                                <p class="text-gray-600">${project.results}</p>
                            </div>
                        </div>
                    `;
                    
                    modal.style.display = 'flex';
                }
            });
        });
        
        closeModal.addEventListener('click', function() {
            modal.style.display = 'none';
        });
        
        window.addEventListener('click', function(e) {
            if (e.target === modal) {
                modal.style.display = 'none';
            }
        });
        
        // Contact form submission
        const contactForm = document.getElementById('contactForm');
        
        contactForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = {
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                subject: document.getElementById('subject').value,
                message: document.getElementById('message').value
            };
            
            // This would be connected to a real API in production
            alert('Thank you for your message! This is a prototype. In the full version, your message would be sent to our team.');
            
            // Clear form
            contactForm.reset();
        });
        
        // Admin Panel Functionality
        const adminLoginBtn = document.querySelector('.admin-login');
        const adminPanel = document.getElementById('adminPanel');
        const adminPanelClose = document.querySelector('.admin-panel-close');
        const adminTabBtns = document.querySelectorAll('.admin-tab-btn');
        const adminTabs = document.querySelectorAll('.admin-tab');
        
        // Admin login
        adminLoginBtn.addEventListener('click', function() {
            const password = prompt('Please enter admin password:');
            
            // Simple client-side authentication (would be replaced with proper auth in production)
            if (password === 'admin123') {
                adminPanel.style.display = 'block';
            } else if (password !== null) {
                alert('Incorrect password');
            }
        });
        
        // Close admin panel
        adminPanelClose.addEventListener('click', function() {
            adminPanel.style.display = 'none';
        });
        
        // Admin tab switching
        adminTabBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                const tabName = this.getAttribute('data-tab');
                
                // Update active tab button
                adminTabBtns.forEach(btn => btn.classList.remove('active'));
                this.classList.add('active');
                
                // Show selected tab
                adminTabs.forEach(tab => {
                    tab.classList.remove('active');
                    if (tab.id === `${tabName}Tab`) {
                        tab.classList.add('active');
                    }
                });
            });
        });
        
        // Team Management
        const addTeamBtn = document.getElementById('addTeamBtn');
        const teamForm = document.getElementById('teamForm');
        const cancelTeamBtn = document.getElementById('cancelTeamBtn');
        const saveTeamBtn = document.getElementById('saveTeamBtn');
        const editTeamBtns = document.querySelectorAll('.edit-team-btn');
        const deleteTeamBtns = document.querySelectorAll('.delete-team-btn');
        
        addTeamBtn.addEventListener('click', function() {
            teamForm.style.display = 'block';
        });
        
        cancelTeamBtn.addEventListener('click', function() {
            teamForm.style.display = 'none';
        });
        
        saveTeamBtn.addEventListener('click', function() {
            alert('This is a prototype. In the full version, the team member would be saved to the database.');
            teamForm.style.display = 'none';
        });
        
        editTeamBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                teamForm.style.display = 'block';
                // In production, this would pre-fill the form with existing data
            });
        });
        
        deleteTeamBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (confirm('Are you sure you want to delete this team member?')) {
                    alert('This is a prototype. In the full version, the team member would be deleted from the database.');
                }
            });
        });
        
        // Portfolio Management
        const addPortfolioBtn = document.getElementById('addPortfolioBtn');
        const portfolioForm = document.getElementById('portfolioForm');
        const cancelPortfolioBtn = document.getElementById('cancelPortfolioBtn');
        const savePortfolioBtn = document.getElementById('savePortfolioBtn');
        const editPortfolioBtns = document.querySelectorAll('.edit-portfolio-btn');
        const deletePortfolioBtns = document.querySelectorAll('.delete-portfolio-btn');
        
        addPortfolioBtn.addEventListener('click', function() {
            portfolioForm.style.display = 'block';
        });
        
        cancelPortfolioBtn.addEventListener('click', function() {
            portfolioForm.style.display = 'none';
        });
        
        savePortfolioBtn.addEventListener('click', function() {
            alert('This is a prototype. In the full version, the project would be saved to the database.');
            portfolioForm.style.display = 'none';
        });
        
        editPortfolioBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                portfolioForm.style.display = 'block';
                // In production, this would pre-fill the form with existing data
            });
        });
        
        deletePortfolioBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (confirm('Are you sure you want to delete this project?')) {
                    alert('This is a prototype. In the full version, the project would be deleted from the database.');
                }
            });
        });
        
        // Product Management
        const addProductBtn = document.getElementById('addProductBtn');
        const productForm = document.getElementById('productForm');
        const cancelProductBtn = document.getElementById('cancelProductBtn');
        const saveProductBtn = document.getElementById('saveProductBtn');
        const editProductBtns = document.querySelectorAll('.edit-product-btn');
        const deleteProductBtns = document.querySelectorAll('.delete-product-btn');
        
        addProductBtn.addEventListener('click', function() {
            productForm.style.display = 'block';
        });
        
        cancelProductBtn.addEventListener('click', function() {
            productForm.style.display = 'none';
        });
        
        saveProductBtn.addEventListener('click', function() {
            alert('This is a prototype. In the full version, the product would be saved to the database.');
            productForm.style.display = 'none';
        });
        
        editProductBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                productForm.style.display = 'block';
                // In production, this would pre-fill the form with existing data
            });
        });
        
        deleteProductBtns.forEach(btn => {
            btn.addEventListener('click', function() {
                if (confirm('Are you sure you want to delete this product?')) {
                    alert('This is a prototype. In the full version, the product would be deleted from the database.');
                }
            });
        });
    </script>
</body>
</html>