<!DOCTYPE html>

BizPro - Professional Business Solutions

BizPro

Home Services Portfolio About Contact

<!-- Hero Section -->
<section id="hero" class="hero-gradient min-h-screen flex items-center relative overflow-hidden">
    <div class="absolute inset-0 bg-black/30 z-10"></div>
    <div class="container mx-auto px-4 relative z-20 text-center">
        <h1 class="text-[clamp(2.5rem,6vw,4rem)] font-bold text-white mb-6 text-shadow">
            Professional Solutions for Your Business
        </h1>
        <p class="text-[clamp(1rem,2vw,1.25rem)] text-white/90 mb-10 max-w-2xl mx-auto">
            We help businesses grow with innovative strategies and cutting-edge technology. Let's build something amazing together.
        </p>
        <div class="flex flex-col sm:flex-row justify-center gap-4">
            <a href="#contact" class="bg-white text-primary font-semibold py-3 px-8 rounded-lg hover:bg-primary hover:text-white transition-colors">
                Get Started
            </a>
            <a href="#services" class="bg-transparent border-2 border-white text-white font-semibold py-3 px-8 rounded-lg hover:bg-white/10 transition-colors">
                Learn More
            </a>
        </div>
    </div>
    <div class="absolute -bottom-10 -right-10 w-64 h-64 bg-primary/20 rounded-full blur-3xl"></div>
    <div class="absolute top-20 -left-10 w-48 h-48 bg-secondary/20 rounded-full blur-3xl"></div>
</section>
<!-- Services Section -->
<section id="services" class="py-16 bg-light">
    <div class="container mx-auto px-4">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center mb-12 text-dark">Our Services</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6">
                <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                    <i class="fa fa-laptop text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3 text-dark">Web Development</h3>
                <p class="text-gray-600">Responsive, fast, and user-friendly websites that help you stand out online.</p>
            </div>
            <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6">
                <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                    <i class="fa fa-mobile text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3 text-dark">Mobile Apps</h3>
                <p class="text-gray-600">Native and cross-platform applications tailored to your business needs.</p>
            </div>
            <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6">
                <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                    <i class="fa fa-line-chart text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3 text-dark">Digital Marketing</h3>
                <p class="text-gray-600">Result-driven strategies to grow your audience and increase sales.</p>
            </div>
            <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6">
                <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                    <i class="fa fa-paint-brush text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3 text-dark">UI/UX Design</h3>
                <p class="text-gray-600">Beautiful and intuitive designs for exceptional user experiences.</p>
            </div>
            <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6">
                <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                    <i class="fa fa-shield text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3 text-dark">Cybersecurity</h3>
                <p class="text-gray-600">Comprehensive security solutions to protect your business from threats.</p>
            </div>
            <div class="bg-white rounded-lg shadow-md hover:shadow-xl transition-shadow p-6">
                <div class="w-14 h-14 bg-primary/10 rounded-lg flex items-center justify-center mb-6">
                    <i class="fa fa-cogs text-primary text-2xl"></i>
                </div>
                <h3 class="text-xl font-semibold mb-3 text-dark">IT Consulting</h3>
                <p class="text-gray-600">Expert advice to make the right technology decisions for your business.</p>
            </div>
        </div>
    </div>
</section>
<!-- Portfolio Section -->
<section id="portfolio" class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center mb-12 text-dark">Our Work</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="rounded-lg overflow-hidden shadow-md group relative">
                <img src="https://picsum.photos/id/26/600/400" alt="Project" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                <div class="absolute inset-0 bg-primary/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <a href="#" class="text-white font-semibold">View Project</a>
                </div>
            </div>
            <div class="rounded-lg overflow-hidden shadow-md group relative">
                <img src="https://picsum.photos/id/42/600/400" alt="Project" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                <div class="absolute inset-0 bg-primary/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <a href="#" class="text-white font-semibold">View Project</a>
                </div>
            </div>
            <div class="rounded-lg overflow-hidden shadow-md group relative">
                <img src="https://picsum.photos/id/65/600/400" alt="Project" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                <div class="absolute inset-0 bg-primary/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <a href="#" class="text-white font-semibold">View Project</a>
                </div>
            </div>
            <div class="rounded-lg overflow-hidden shadow-md group relative">
                <img src="https://picsum.photos/id/96/600/400" alt="Project" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                <div class="absolute inset-0 bg-primary/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <a href="#" class="text-white font-semibold">View Project</a>
                </div>
            </div>
            <div class="rounded-lg overflow-hidden shadow-md group relative">
                <img src="https://picsum.photos/id/119/600/400" alt="Project" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                <div class="absolute inset-0 bg-primary/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <a href="#" class="text-white font-semibold">View Project</a>
                </div>
            </div>
            <div class="rounded-lg overflow-hidden shadow-md group relative">
                <img src="https://picsum.photos/id/142/600/400" alt="Project" class="w-full h-64 object-cover group-hover:scale-105 transition-transform duration-500">
                <div class="absolute inset-0 bg-primary/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
                    <a href="#" class="text-white font-semibold">View Project</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- About Section -->
<section id="about" class="py-16 bg-light">
    <div class="container mx-auto px-4">
        <div class="flex flex-col lg:flex-row items-center gap-12">
            <div class="lg:w-1/2">
                <img src="https://picsum.photos/id/342/800/600" alt="About Us" class="w-full h-auto rounded-lg shadow-lg">
            </div>
            <div class="lg:w-1/2">
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-6 text-dark">About Our Company</h2>
                <p class="text-gray-600 mb-6">
                    Founded in 2015, BizPro has been providing top-notch business solutions to clients across various industries. Our team of experts is dedicated to delivering results that exceed expectations.
                </p>
                <p class="text-gray-600 mb-8">
                    We believe in building long-term relationships with our clients by understanding their unique needs and providing customized solutions. Our mission is to help businesses thrive in the digital age.
                </p>
                <div class="grid grid-cols-2 gap-6 mb-8">
                    <div class="text-center">
                        <h3 class="text-3xl font-bold text-primary mb-2">100+</h3>
                        <p class="text-gray-600">Completed Projects</p>
                    </div>
                    <div class="text-center">
                        <h3 class="text-3xl font-bold text-primary mb-2">50+</h3>
                        <p class="text-gray-600">Happy Clients</p>
                    </div>
                    <div class="text-center">
                        <h3 class="text-3xl font-bold text-primary mb-2">15+</h3>
                        <p class="text-gray-600">Awards Won</p>
                    </div>
                    <div class="text-center">
                        <h3 class="text-3xl font-bold text-primary mb-2">7+</h3>
                        <p class="text-gray-600">Years of Experience</p>
                    </div>
                </div>
                <a href="#contact" class="bg-primary text-white font-semibold py-3 px-8 rounded-lg hover:bg-primary/90 transition-colors inline-block">
                    Contact Us
                </a>
            </div>
        </div>
    </div>
</section>
<!-- Contact Section -->
<section id="contact" class="py-16 bg-white">
    <div class="container mx-auto px-4">
        <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-center mb-12 text-dark">Get In Touch</h2>
        <div class="max-w-4xl mx-auto">
            <form id="contactForm" class="bg-light rounded-lg shadow-md p-8">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label for="name" class="block text-gray-700 mb-2">Name</label>
                        <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary" placeholder="Your Name" required>
                    </div>
                    <div>
                        <label for="email" class="block text-gray-700 mb-2">Email</label>
                        <input type="email" id="email" class="w-full px-4 py-3