<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
    <meta name="description" content="Explore our portfolio of web design, development, and digital marketing projects. See how we've helped businesses succeed online.">
    
    <title>Our Portfolio | Finggu Infotech - Web Design & Development Company</title>
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://finggu.com/portfolio">
    <meta property="og:title" content="Our Portfolio | Finggu Infotech">
    <meta property="og:description" content="Explore our portfolio of web design, development, and digital marketing projects.">
    <meta property="og:image" content="https://finggu.com/images/og-portfolio.jpg">
    
    <!-- Twitter -->
    <meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://finggu.com/portfolio">
    <meta property="twitter:title" content="Our Portfolio | Finggu Infotech">
    <meta property="twitter:description" content="Explore our portfolio of web design, development, and digital marketing projects.">
    <meta property="twitter:image" content="https://finggu.com/images/og-portfolio.jpg">

    <!-- Favicon -->
    <link rel="icon" type="image/png" href="assets/images/favicon.png">
    
    <!-- Preconnect to important domains -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Custom CSS -->
    <link rel="stylesheet" href="assets/css/main.css">
    
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Inter', 'sans-serif'],
                    },
                    container: {
                        center: true,
                        padding: '1rem',
                        screens: {
                            sm: '100%',
                            md: '100%',
                            lg: '1024px',
                            xl: '1280px',
                        },
                    },
                }
            },
            plugins: [
                function({ addComponents }) {
                    addComponents({
                        '.filter-button': {
                            'background': 'transparent',
                            'border': '1px solid #e5e7eb',
                            'color': '#4b5563',
                            'padding': '0.5rem 1.25rem',
                            'border-radius': '9999px',
                            'font-weight': '500',
                            'margin': '0.25rem',
                            'cursor': 'pointer',
                            'transition': 'all 0.3s ease',
                            '&:hover': {
                                'background': '#f3f4f6',
                            },
                            '&.active': {
                                'background': '#dc2626',
                                'color': 'white',
                                'border-color': '#dc2626',
                            },
                            '@media (max-width: 640px)': {
                                'padding': '0.4rem 1rem',
                                'font-size': '0.875rem',
                            }
                        },
                        '.portfolio-item': {
                            'transition': 'transform 0.3s ease, box-shadow 0.3s ease',
                            '&:hover': {
                                'transform': 'translateY(-5px)',
                                'box-shadow': '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)'
                            },
                            'img': {
                                'transition': 'transform 0.5s ease',
                            },
                            '&:hover img': {
                                'transform': 'scale(1.05)'
                            }
                        },
                        '.portfolio-overlay': {
                            'background': 'rgba(0, 0, 0, 0.7)',
                            'opacity': '0',
                            'transition': 'opacity 0.3s ease',
                        },
                        '.portfolio-item:hover .portfolio-overlay': {
                            'opacity': '1',
                        }
                    });
                },
            ],
        }
    </script>
    
    <style>
        /* Base styles */
        .portfolio-filter {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0.5rem;
            margin-bottom: 2rem;
        }
        
        .portfolio-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }
        
        .portfolio-item {
            background: white;
            border-radius: 0.5rem;
            overflow: hidden;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .portfolio-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        
        .portfolio-img {
            position: relative;
            overflow: hidden;
        }
        
        .portfolio-img img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .portfolio-item:hover .portfolio-img img {
            transform: scale(1.05);
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1.5rem;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-content {
            padding: 1.5rem;
        }
        
        .portfolio-content h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #111827;
            margin-bottom: 0.5rem;
        }
        
        .portfolio-content p {
            color: #6b7280;
            font-size: 0.875rem;
        }
        
        @media (max-width: 768px) {
            .portfolio-grid {
                grid-template-columns: 1fr;
            }
            
            .portfolio-img img {
                height: 200px;
            }
        }
        .portfolio-item {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 30px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .portfolio-item:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }
        
        .portfolio-img {
            position: relative;
            overflow: hidden;
        }
        
        .portfolio-img img {
            width: 100%;
            height: 250px;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .portfolio-item:hover .portfolio-img img {
            transform: scale(1.05);
        }
        
        .portfolio-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(239, 68, 68, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: all 0.3s ease;
            padding: 20px;
            text-align: center;
        }
        
        .portfolio-item:hover .portfolio-overlay {
            opacity: 1;
        }
        
        .portfolio-overlay h4 {
            color: white;
            font-size: 20px;
            font-weight: 700;
            margin-bottom: 10px;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }
        
        .portfolio-overlay p {
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 20px;
            transform: translateY(20px);
            transition: all 0.4s ease;
        }
        
        .portfolio-overlay .btn {
            transform: translateY(20px);
            transition: all 0.5s ease;
        }
        
        .portfolio-item:hover .portfolio-overlay h4,
        .portfolio-item:hover .portfolio-overlay p,
        .portfolio-item:hover .portfolio-overlay .btn {
            transform: translateY(0);
        }
        
        .portfolio-info {
            padding: 20px;
            background: white;
        }
        
        .portfolio-category {
            display: inline-block;
            background: #f3f4f6;
            color: #4b5563;
            padding: 4px 12px;
            border-radius: 30px;
            font-size: 12px;
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .portfolio-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .portfolio-link {
            color: #6b7280;
            font-size: 14px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }
        
        .portfolio-link i {
            margin-left: 5px;
            transition: transform 0.3s ease;
        }
        
        .portfolio-link:hover i {
            transform: translateX(3px);
        }
        
        /* Testimonial */
        .testimonial-card {
            background: white;
            border-radius: 10px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            position: relative;
            margin-top: 30px;
        }
        
        .testimonial-card::before {
            content: '\201C';
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 80px;
            color: #f3f4f6;
            font-family: Georgia, serif;
            line-height: 1;
            z-index: 1;
        }
        
        .testimonial-content {
            position: relative;
            z-index: 2;
        }
        
        .testimonial-text {
            font-size: 18px;
            line-height: 1.7;
            color: #4b5563;
            margin-bottom: 20px;
            font-style: italic;
        }
        
        .testimonial-author {
            display: flex;
            align-items: center;
        }
        
        .testimonial-author img {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 15px;
            object-fit: cover;
        }
        
        .author-info h5 {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 5px;
        }
        
        .author-info p {
            color: #6b7280;
            margin: 0;
            font-size: 14px;
        }
        
        /* Stats */
        .stat-item {
            text-align: center;
            padding: 30px 15px;
            border-radius: 10px;
            background: white;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
        }
        
        .stat-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }
        
        .stat-number {
            font-size: 40px;
            font-weight: 700;
            color: #ef4444;
            margin-bottom: 10px;
            line-height: 1;
        }
        
        .stat-text {
            font-size: 16px;
            color: #6b7280;
            font-weight: 500;
        }
        
        /* Responsive */
        @media (max-width: 767px) {
            .portfolio-filter {
                flex-wrap: wrap;
                justify-content: center;
            }
            
            .portfolio-img img {
                height: 200px;
            }
        }
    </style>
</head>
<body class="font-sans antialiased text-gray-800 bg-white">
    <!-- Include Header -->
    <?php include 'includes/header.php'; ?>
    
    <!-- Page Header -->
    <section class="bg-gradient-to-r from-red-600 to-red-700 py-20 md:py-32 text-white relative overflow-hidden">
        <div class="absolute inset-0 opacity-10">
            <div class="absolute inset-0" style="background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgcGF0dGVyblRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHJlY3Qgd2lkdGg9IjUwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ3aGl0ZSIgZmlsbC1vcGFjaXR5PSIwLjA1Ii8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI3BhdHRlcm4pIi8+PC9zdmc+');"></div>
        </div>
        <div class="container mx-auto px-4 relative z-10">
            <div class="max-w-4xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Our Portfolio</h1>
                <p class="text-xl md:text-2xl text-red-100 max-w-3xl mx-auto">Explore our latest projects and see how we've helped businesses succeed online</p>
            </div>
        </div>
    </section>
    
    <!-- Portfolio Filter -->
    <section class="py-12 md:py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <span class="inline-block text-red-600 font-medium mb-3">OUR WORK</span>
                <h2 class="text-3xl md:text-4xl font-bold mb-6">Featured Projects</h2>
                <div class="w-20 h-1 bg-red-600 mx-auto mb-8"></div>
                <div class="flex flex-wrap justify-center gap-2 mb-12">
                    <button class="filter-button active" data-filter="all">All Work</button>
                    <button class="filter-button" data-filter="web-design">Web Design</button>
                    <button class="filter-button" data-filter="web-development">Web Development</button>
                    <button class="filter-button" data-filter="ecommerce">E-commerce</button>
                    <button class="filter-button" data-filter="seo">SEO</button>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Portfolio Item 1 -->
                <div class="portfolio-item group relative overflow-hidden rounded-lg bg-white shadow-md hover:shadow-xl transition-all duration-300" data-category="web-design">
                    <div class="overflow-hidden">
                        <img src="https://images.unsplash.com/photo-1547658719-da2b51169166?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1364&q=80" 
                             alt="Web Design Project" 
                             class="w-full h-64 object-cover transition-transform duration-500 group-hover:scale-105">
                        <div class="portfolio-overlay absolute inset-0 flex flex-col items-center justify-center p-6 text-center text-white opacity-0 group-hover:opacity-100 transition-opacity duration-300">
                            <h4 class="text-xl font-bold mb-2">E-commerce Website Redesign</h4>
                            <p class="text-gray-200 mb-4">UI/UX Design, Web Development</p>
                            <a href="#" class="inline-block bg-white text-gray-900 px-6 py-2 rounded-md font-medium hover:bg-gray-100 transition-colors">
                                View Project <i class="fas fa-arrow-right ml-2"></i>
                            </a>
                        </div>
                    </div>
                    <div class="p-6">
                        <h3 class="text-xl font-bold text-gray-900 mb-1">E-commerce Website Redesign</h3>
                        <p class="text-gray-600">UI/UX Design, Web Development</p>
                    </div>
                </div>
                
                <!-- Portfolio Item 2 -->
                <div class="portfolio-item" data-category="ecommerce">
                    <div class="portfolio-img">
                        <img src="https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="E-commerce Project">
                        <div class="portfolio-overlay">
                            <h4>Fashion Store</h4>
                            <p>E-commerce website with product catalog and secure checkout.</p>
                            <a href="project-details.html" class="btn btn-light">View Project</a>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <span class="portfolio-category">E-commerce</span>
                        <h3 class="portfolio-title">Fashion E-commerce Store</h3>
                        <a href="project-details.html" class="portfolio-link">View Project <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <!-- Portfolio Item 3 -->
                <div class="portfolio-item" data-category="mobile-apps">
                    <div class="portfolio-img">
                        <img src="https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Mobile App Project">
                        <div class="portfolio-overlay">
                            <h4>Fitness Tracker</h4>
                            <p>Mobile application for tracking fitness activities and health metrics.</p>
                            <a href="project-details.html" class="btn btn-light">View Project</a>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <span class="portfolio-category">Mobile App</span>
                        <h3 class="portfolio-title">Fitness Tracker App</h3>
                        <a href="project-details.html" class="portfolio-link">View Project <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <!-- Portfolio Item 4 -->
                <div class="portfolio-item" data-category="web-development">
                    <div class="portfolio-img">
                        <img src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1415&q=80" alt="Web Development Project">
                        <div class="portfolio-overlay">
                            <h4>Financial Dashboard</h4>
                            <p>Custom web application for financial data visualization and analysis.</p>
                            <a href="project-details.html" class="btn btn-light">View Project</a>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <span class="portfolio-category">Web Development</span>
                        <h3 class="portfolio-title">Financial Dashboard</h3>
                        <a href="project-details.html" class="portfolio-link">View Project <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <!-- Portfolio Item 5 -->
                <div class="portfolio-item" data-category="seo">
                    <div class="portfolio-img">
                        <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="SEO Project">
                        <div class="portfolio-overlay">
                            <h4>SEO Campaign</h4>
                            <p>Search engine optimization strategy that increased organic traffic by 150%.</p>
                            <a href="project-details.html" class="btn btn-light">View Project</a>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <span class="portfolio-category">SEO</span>
                        <h3 class="portfolio-title">E-commerce SEO Strategy</h3>
                        <a href="project-details.html" class="portfolio-link">View Project <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
                
                <!-- Portfolio Item 6 -->
                <div class="portfolio-item" data-category="web-design">
                    <div class="portfolio-img">
                        <img src="https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Web Design Project">
                        <div class="portfolio-overlay">
                            <h4>Restaurant Website</h4>
                            <p>Elegant website design for a fine dining restaurant with online reservations.</p>
                            <a href="project-details.html" class="btn btn-light">View Project</a>
                        </div>
                    </div>
                    <div class="portfolio-info">
                        <span class="portfolio-category">Web Design</span>
                        <h3 class="portfolio-title">Gourmet Restaurant</h3>
                        <a href="project-details.html" class="portfolio-link">View Project <i class="fas fa-arrow-right"></i></a>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <button class="bg-red-600 hover:bg-red-700 text-white font-semibold py-3 px-8 rounded-md transition-colors inline-flex items-center">
                    Load More Projects
                </button>
            </div>
        </div>
    </section>
    
    <!-- Testimonial Section -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-16">
                <span class="text-red-600 font-semibold">CLIENT TESTIMONIALS</span>
                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">What Our Clients Say</h2>
                <div class="w-20 h-1 bg-red-600 mx-auto"></div>
            </div>
            
            <div class="max-w-4xl mx-auto">
                <div class="testimonial-card">
                    <div class="testimonial-content">
                        <p class="testimonial-text">"Working with Finggu Infotech was a game-changer for our business. Their team delivered a stunning website that perfectly represents our brand and has significantly increased our online conversions."</p>
                        <div class="testimonial-author">
                            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Client">
                            <div class="author-info">
                                <h5>Priya Sharma</h5>
                                <p>Marketing Director, TechNova Solutions</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Stats Section -->
    <section class="py-16 bg-gray-50">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="stat-item">
                    <div class="stat-number">500+</div>
                    <div class="stat-text">Projects Completed</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">98%</div>
                    <div class="stat-text">Client Satisfaction</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">8+</div>
                    <div class="stat-text">Years Experience</div>
                </div>
                <div class="stat-item">
                    <div class="stat-number">50+</div>
                    <div class="stat-text">Team Members</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- CTA Section -->
    <section class="py-16 md:py-24 bg-red-600 text-white">
        <div class="container mx-auto px-4 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Project?</h2>
            <p class="text-xl mb-8 max-w-3xl mx-auto">Let's discuss how we can help you achieve your digital goals and take your business to the next level.</p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
                <a href="contact.html" class="bg-white hover:bg-gray-100 text-red-600 font-semibold py-3 px-8 rounded-md transition-colors inline-flex items-center justify-center">
                    Get Started
                </a>
                <a href="tel:+918655442429" class="bg-transparent hover:bg-red-700 text-white border-2 border-white font-semibold py-3 px-8 rounded-md transition-colors inline-flex items-center justify-center">
                    <i class="fas fa-phone-alt mr-2"></i> Call Us Now
                </a>
            </div>
        </div>
    </section>
    
    <!-- Include Footer -->
    <?php include 'includes/footer.html'; ?>
    
    <script>
        // Portfolio Filter
        document.addEventListener('DOMContentLoaded', function() {
            const filterButtons = document.querySelectorAll('.filter-button');
            const portfolioItems = document.querySelectorAll('.portfolio-item');
            
            filterButtons.forEach(button => {
                button.addEventListener('click', function() {
                    // Remove active class from all buttons
                    filterButtons.forEach(btn => btn.classList.remove('active'));
                    // Add active class to clicked button
                    this.classList.add('active');
                    
                    const filterValue = this.getAttribute('data-filter');
                    
                    portfolioItems.forEach(item => {
                        if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) {
                            item.style.display = 'block';
                            setTimeout(() => {
                                item.style.opacity = '1';
                                item.style.transform = 'translateY(0)';
                            }, 50);
                        } else {
                            item.style.opacity = '0';
                            item.style.transform = 'translateY(20px)';
                            setTimeout(() => {
                                item.style.display = 'none';
                            }, 300);
                        }
                    });
                });
            });
            
            // Initialize all items as visible
            portfolioItems.forEach(item => {
                item.style.opacity = '1';
                item.style.transform = 'translateY(0)';
                item.style.transition = 'all 0.3s ease';
            });
        });
    </script>
    
</body>
</html>
