index.html

---
layout: default
title: Home
description: CodeStorm Hub - Leading technology company specializing in innovative software solutions, web development, and digital transformation services.
keywords: software development, web development, technology solutions, digital transformation, mobile apps, cloud computing
---

<!-- Hero Section -->
<section class="hero" id="hero">
    <div class="hero-background">
        <div class="hero-particles"></div>
    </div>
    <div class="container">
        <div class="hero-content">
            <div class="hero-text">
                <h1 class="hero-title">
                    Transform Your Business with
                    <span class="gradient-text">Innovative Technology</span>
                </h1>
                <p class="hero-description">
                    We storm through digital challenges to deliver cutting-edge software solutions that propel your business forward. From concept to deployment, we're your trusted technology partner.
                </p>
                <div class="hero-buttons">
                    <a href="contact.html" class="btn btn-primary btn-lg">
                        Start Your Project
                        <i class="fas fa-rocket"></i>
                    </a>
                    <a href="portfolio.html" class="btn btn-outline btn-lg">
                        View Our Work
                        <i class="fas fa-arrow-right"></i>
                    </a>
                </div>
                <div class="hero-stats">
                    <div class="stat">
                        <span class="stat-number">100+</span>
                        <span class="stat-label">Projects Delivered</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">50+</span>
                        <span class="stat-label">Happy Clients</span>
                    </div>
                    <div class="stat">
                        <span class="stat-number">5+</span>
                        <span class="stat-label">Years Experience</span>
                    </div>
                </div>
            </div>
            <div class="hero-visual">
                <div class="hero-image">
                    <img src="{{ '/assets/images/hero-illustration.svg' | relative_url }}" alt="Technology innovation illustration" loading="eager">
                </div>
            </div>
        </div>
    </div>
    <div class="scroll-indicator">
        <a href="#services" class="scroll-down" aria-label="Scroll to services section">
            <i class="fas fa-chevron-down"></i>
        </a>
    </div>
</section>

<!-- Services Overview Section -->
<section class="services-overview" id="services">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Our Expertise</h2>
            <p class="section-description">
                We provide comprehensive technology solutions tailored to your business needs
            </p>
        </div>
        
        <div class="services-grid">
            <div class="service-card" data-aos="fade-up" data-aos-delay="100">
                <div class="service-icon">
                    <i class="fas fa-code"></i>
                </div>
                <h3 class="service-title">Web Development</h3>
                <p class="service-description">
                    Modern, responsive websites and web applications built with cutting-edge technologies and best practices.
                </p>
                <a href="services.html#web-development" class="service-link">
                    Learn More <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            
            <div class="service-card" data-aos="fade-up" data-aos-delay="200">
                <div class="service-icon">
                    <i class="fas fa-mobile-alt"></i>
                </div>
                <h3 class="service-title">Mobile Apps</h3>
                <p class="service-description">
                    Native and cross-platform mobile applications that deliver exceptional user experiences on all devices.
                </p>
                <a href="services.html#mobile-apps" class="service-link">
                    Learn More <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            
            <div class="service-card" data-aos="fade-up" data-aos-delay="300">
                <div class="service-icon">
                    <i class="fas fa-cloud"></i>
                </div>
                <h3 class="service-title">Cloud Solutions</h3>
                <p class="service-description">
                    Scalable cloud infrastructure and services that grow with your business and ensure maximum uptime.
                </p>
                <a href="services.html#cloud-solutions" class="service-link">
                    Learn More <i class="fas fa-arrow-right"></i>
                </a>
            </div>
            
            <div class="service-card" data-aos="fade-up" data-aos-delay="400">
                <div class="service-icon">
                    <i class="fas fa-chart-line"></i>
                </div>
                <h3 class="service-title">Digital Transformation</h3>
                <p class="service-description">
                    Strategic consulting and implementation to modernize your business processes and technology stack.
                </p>
                <a href="services.html#consulting" class="service-link">
                    Learn More <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </div>
</section>

<!-- Featured Portfolio Section -->
<section class="featured-portfolio" id="portfolio-highlights">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">Featured Projects</h2>
            <p class="section-description">
                Showcase of our recent work and successful client collaborations
            </p>
        </div>
        
        <div class="portfolio-grid">
            <div class="portfolio-item featured" data-aos="fade-up">
                <div class="portfolio-image">
                    <img src="{{ '/assets/images/portfolio/ecommerce-platform.jpg' | relative_url }}" alt="E-commerce Platform" loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-info">
                            <h3 class="portfolio-title">E-commerce Platform</h3>
                            <p class="portfolio-category">Web Development</p>
                            <div class="portfolio-actions">
                                <a href="#" class="btn btn-outline btn-sm">View Case Study</a>
                                <a href="#" class="btn btn-primary btn-sm">Live Demo</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="portfolio-item" data-aos="fade-up" data-aos-delay="100">
                <div class="portfolio-image">
                    <img src="{{ '/assets/images/portfolio/banking-app.jpg' | relative_url }}" alt="Mobile Banking App" loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-info">
                            <h3 class="portfolio-title">Banking Mobile App</h3>
                            <p class="portfolio-category">Mobile Development</p>
                            <div class="portfolio-actions">
                                <a href="#" class="btn btn-outline btn-sm">View Case Study</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="portfolio-item" data-aos="fade-up" data-aos-delay="200">
                <div class="portfolio-image">
                    <img src="{{ '/assets/images/portfolio/cloud-migration.jpg' | relative_url }}" alt="Cloud Migration Project" loading="lazy">
                    <div class="portfolio-overlay">
                        <div class="portfolio-info">
                            <h3 class="portfolio-title">Cloud Migration</h3>
                            <p class="portfolio-category">Cloud Solutions</p>
                            <div class="portfolio-actions">
                                <a href="#" class="btn btn-outline btn-sm">View Case Study</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="section-cta">
            <a href="portfolio.html" class="btn btn-primary btn-lg">
                View All Projects
                <i class="fas fa-arrow-right"></i>
            </a>
        </div>
    </div>
</section>

<!-- Client Testimonials Section -->
<section class="testimonials" id="testimonials">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">What Our Clients Say</h2>
            <p class="section-description">
                Hear from the businesses we've helped transform through technology
            </p>
        </div>
        
        <div class="testimonials-slider">
            <div class="testimonial-item active" data-aos="fade-up">
                <div class="testimonial-content">
                    <div class="testimonial-text">
                        <p>"CodeStorm Hub transformed our outdated e-commerce platform into a modern, lightning-fast solution. Our sales increased by 150% within the first quarter after launch."</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="{{ '/assets/images/testimonials/sarah-johnson.jpg' | relative_url }}" alt="Sarah Johnson" loading="lazy">
                        </div>
                        <div class="author-info">
                            <h4 class="author-name">Sarah Johnson</h4>
                            <p class="author-title">CEO, TechStart Inc.</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="testimonial-item" data-aos="fade-up" data-aos-delay="100">
                <div class="testimonial-content">
                    <div class="testimonial-text">
                        <p>"The team's expertise in cloud migration saved us thousands in infrastructure costs while improving our application performance by 300%. Exceptional work!"</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="{{ '/assets/images/testimonials/michael-chen.jpg' | relative_url }}" alt="Michael Chen" loading="lazy">
                        </div>
                        <div class="author-info">
                            <h4 class="author-name">Michael Chen</h4>
                            <p class="author-title">CTO, FinanceFlow</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="testimonial-item" data-aos="fade-up" data-aos-delay="200">
                <div class="testimonial-content">
                    <div class="testimonial-text">
                        <p>"From concept to deployment, CodeStorm Hub delivered a mobile app that exceeded our expectations. Their attention to detail and user experience is outstanding."</p>
                    </div>
                    <div class="testimonial-author">
                        <div class="author-avatar">
                            <img src="{{ '/assets/images/testimonials/emily-rodriguez.jpg' | relative_url }}" alt="Emily Rodriguez" loading="lazy">
                        </div>
                        <div class="author-info">
                            <h4 class="author-name">Emily Rodriguez</h4>
                            <p class="author-title">Product Manager, HealthTech Solutions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="testimonials-navigation">
            <button class="testimonial-nav-btn" data-slide="0" aria-label="View testimonial 1"></button>
            <button class="testimonial-nav-btn" data-slide="1" aria-label="View testimonial 2"></button>
            <button class="testimonial-nav-btn active" data-slide="2" aria-label="View testimonial 3"></button>
        </div>
    </div>
</section>

<!-- Call to Action Section -->
<section class="cta-section" id="get-started">
    <div class="container">
        <div class="cta-content" data-aos="fade-up">
            <h2 class="cta-title">Ready to Transform Your Business?</h2>
            <p class="cta-description">
                Let's discuss how our technology solutions can drive your business forward. 
                Get a free consultation and project estimate today.
            </p>
            <div class="cta-buttons">
                <a href="contact.html" class="btn btn-primary btn-lg">
                    Get Free Consultation
                    <i class="fas fa-arrow-right"></i>
                </a>
                <a href="tel:+1-555-123-4567" class="btn btn-outline btn-lg">
                    <i class="fas fa-phone"></i>
                    Call Us Now
                </a>
            </div>
        </div>
    </div>
</section>