<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Business Pitch Challenger 2025 - 2nd Edition</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <link rel="stylesheet" href="assets/css/main.css?v=1.2">
    <link rel="stylesheet" href="assets/css/components.css?v=1.2">
    <style>

        
        body {
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow-x: hidden;
        }
        
        .hero-background {
            min-height: 100vh;
            position: relative;
            overflow: hidden;
        }
        
        /* Carousel Styles */
        #heroCarousel {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            z-index: 1;
            margin-top: 0;
        }
        
        .carousel-background {
            background-size: cover;
            background-position: center;
            background-attachment: fixed;
            height: 100vh;
            width: 100%;
            margin-top: 0;
        }
        
        .carousel-item {
            height: 100vh;
            margin-top: 0;
        }
        
        /* Dark overlay for carousel */
        .carousel-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1;
        }
        

        
        /* Carousel Indicators Styling */
        .carousel-indicators {
            bottom: 30px;
        }
        
        .carousel-indicators button {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            border: 2px solid rgba(255, 255, 255, 0.3);
            margin: 0 5px;
            transition: all 0.3s ease;
        }
        
        .carousel-indicators button.active {
            background-color: white;
            border-color: white;
            transform: scale(1.2);
        }
        
        .hero-background::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.8);
            z-index: 1;
            margin-top: 0;
        }
        
        .hero-content {
            position: relative;
            z-index: 3;
            min-height: 100vh;
            display: flex;
            align-items: center;
            color: white;
            padding-top: 80px;
        }
        
        .hero-text {
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
            position: relative;
            z-index: 4;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            text-shadow: 4px 4px 12px rgba(0, 0, 0, 1);
            color: white;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        
        .hero-subtitle {
            font-size: 1.3rem;
            margin-bottom: 2rem;
            opacity: 1;
            line-height: 1.6;
            text-shadow: 3px 3px 8px rgba(0, 0, 0, 1);
            color: white;
            font-weight: 500;
        }
        
        .btn-primary-custom {
            background: #2c2b7c;
            border: none;
            border-radius: 50px;
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
        }
        
        .btn-primary-custom:hover {
            transform: none;
            color: white;
            background: #2c2b7c;
        }
        
        .btn-secondary-custom {
            background: rgba(255, 255, 255, 0.2);
            border: 2px solid white;
            border-radius: 50px;
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: 600;
            color: white;
            text-decoration: none;
            display: inline-block;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .btn-secondary-custom:hover {
            background: rgba(255, 255, 255, 0.3);
            color: white;
            transform: none;
        }
        
        /* Override Bootstrap button shadows */
        .btn-lg {
            box-shadow: none !important;
        }
        
        .btn-primary-custom.btn-lg {
            box-shadow: none !important;
            text-shadow: none !important;
        }
        
        .features-section {
            background: white;
            padding: 80px 0;
        }
        
        .feature-card {
            background: white;
            border-radius: 0;
            padding: 2rem;
            text-align: center;
            transition: transform 0.3s ease;
            height: 100%;
            color: #333;
            border: 1px solid #e0e0e0;
        }
        
        .feature-card:hover {
            transform: none;
        }
        
        .feature-icon {
            font-size: 3rem;
            color: white;
            margin-bottom: 1rem;
            background: #2c2b7c;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }
        
        .navbar {
            position: fixed !important;
            top: 0 !important;
            width: 100% !important;
            z-index: 9999 !important;
            background: rgba(44, 43, 124, 0.9) !important;
            backdrop-filter: blur(10px) !important;
            transition: background 0.3s ease !important;
        }
        
        .navbar.scrolled {
            background: rgba(44, 43, 124, 1) !important;
        }
        
        /* Force navbar color override */
        .navbar.navbar-expand-lg {
            background: rgba(44, 43, 124, 0.9) !important;
        }
        
        .navbar-brand {
            font-weight: bold;
            font-size: 1.5rem;
            color: white;
        }
        
        .navbar-brand img {
            height: 45px;
            width: auto;
            margin-right: 12px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
        }
        
        .navbar-brand img:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        }
        
        .nav-link {
            color: white !important;
            font-weight: 500;
            margin: 0 8px;
            transition: color 0.3s ease;
            white-space: nowrap;
        }
        
        .nav-link:hover {
            color: #ffffff !important;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 5px;
            padding: 5px 10px;
        }
        
        .login-btn {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 25px;
            padding: 8px 20px;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .login-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
            color: white !important;
            transform: translateY(-2px);
        }
        
        .stats-section {
            background: linear-gradient(135deg, #2c2b7c 0%, #764ba2 100%);
            color: white;
            padding: 60px 0;
        }
        
        .stat-card {
            text-align: center;
            padding: 2rem;
        }
        
        .stat-number {
            font-size: 3rem;
            font-weight: bold;
            margin-bottom: 0.5rem;
        }
        
        .footer {
            background: #2c2b7c;
            color: white;
            padding: 40px 0 20px;
        }
        
        .admin-access {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 10000;
            display: flex;
            gap: 8px;
        }
        
        .navbar {
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 1000;
            background: rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(10px);
            transition: background 0.3s ease;
        }
        
        .admin-btn {
            background: rgba(44, 43, 124, 0.9);
            color: white;
            border: none;
            border-radius: 25px;
            padding: 8px 16px;
            font-size: 0.85rem;
            text-decoration: none;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
            white-space: nowrap;
        }
        
        .admin-btn:hover {
            background: rgba(44, 43, 124, 1);
            color: white;
            transform: translateY(-2px);
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .hero-subtitle {
                font-size: 1.1rem;
            }
            
            .navbar {
                padding-right: 15px; /* Reset padding on mobile */
            }
            
            .navbar-brand img {
                height: 40px; /* Slightly smaller on mobile */
            }
            
            .admin-access {
                position: static;
                text-align: center;
                margin-top: 2rem;
                justify-content: center;
            }
            
            .nav-link {
                margin: 0 4px;
                font-size: 0.9rem;
            }
            
            /* Mobile Footer Improvements */
            .footer .col-md-4,
            .footer .col-md-3 {
                margin-bottom: 2rem;
                text-align: center;
            }
            
            .footer h5 {
                font-size: 1.2rem;
                margin-bottom: 1rem;
            }
            
            .footer p {
                font-size: 0.9rem;
                margin-bottom: 0.5rem;
            }
            
            .footer ul {
                text-align: center;
            }
            
            .footer ul li {
                margin-bottom: 0.5rem;
            }
            
            .social-media-links {
                justify-content: center;
                gap: 12px;
            }
            
            .social-link {
                width: 45px;
                height: 45px;
                font-size: 20px;
            }
        }
        
        /* Social Media Links Styling */
        .social-media-links {
            display: flex;
            gap: 15px;
            margin-top: 10px;
        }
        
        .social-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border-radius: 50%;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 18px;
        }
        
        .social-link:hover {
            background: rgba(255, 255, 255, 0.2);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .social-link i {
            transition: transform 0.3s ease;
        }
        
        .social-link:hover i {
            transform: scale(1.1);
        }
    </style>
</head>
<body>


    <!-- Navigation -->

    
    <nav class="navbar navbar-expand-lg">
        <div class="container">
            <a class="navbar-brand" href="#">
                <img src="assets/images/logos/logo.png" alt="UEW iHub Logo" class="me-2">
                UEW iHub
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#features">How It Works</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#contact">Contact</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link login-btn" href="login.php">
                            <i class="fas fa-sign-in-alt me-1"></i>Login
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <div class="hero-background">
        <!-- Background Carousel -->
        <div id="heroCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="5000">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="carousel-background" style="background-image: url('assets/images/hero/1.JPG');"></div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-background" style="background-image: url('assets/images/hero/2.JPG');"></div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-background" style="background-image: url('assets/images/hero/3.JPG');"></div>
                </div>
                <div class="carousel-item">
                    <div class="carousel-background" style="background-image: url('assets/images/hero/4.JPG');"></div>
                </div>
            </div>
            

            
            <!-- Carousel Indicators -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="3" aria-label="Slide 4"></button>
            </div>
        </div>
        
        <div class="hero-content">
            <div class="container">
                <div class="hero-text">
                    <h1 class="hero-title">
                        <i class="fas fa-trophy me-3"></i>
                        Business Pitch Challenge 2025
                    </h1>
                    <p class="hero-subtitle">
                        <strong>2nd Edition</strong> - Compete in the ultimate business pitch competition! Submit your innovative business concept 
                        and get evaluated by expert assessors using our comprehensive framework. Win recognition, mentorship, and support 
                        to turn your vision into reality.
                    </p>
                    <div class="mt-4">
                        <a href="submit_proposal.php" class="btn-primary-custom me-3 mb-2">
                            <i class="fas fa-paper-plane me-2"></i>Apply Now
                        </a>
                        <a href="#features" class="btn-secondary-custom mb-2">
                            <i class="fas fa-info-circle me-2"></i>Learn More
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div id="features" class="features-section">
        <div class="container">
            <div class="row">
                <div class="col-12 text-center mb-5">
                    <h2 class="display-5 fw-bold mb-3">How the Competition Works</h2>
                    <p class="lead text-muted">Your journey to becoming the Business Pitch Champion</p>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-edit"></i>
                        </div>
                        <h4>1. Submit Your Proposal</h4>
                        <p>Create and submit your compelling business proposal with detailed market analysis, financial projections, and implementation strategy.</p>
                    </div>
                </div>
                
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h4>2. Expert Screening</h4>
                        <p>Our panel of industry experts and business leaders will screen your proposal using our comprehensive 100-point assessment framework.</p>
                    </div>
                </div>
                
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <h4>3. Competitive Evaluation Result</h4>
                        <p>The successful applicant will be shortlisted for the proposal defense. Receive detailed feedback and scores across innovation, market potential, returns, competitive advantages, and social impact.</p>
                    </div>
                </div>
                
                <div class="col-md-3 mb-4">
                    <div class="feature-card">
                        <div class="feature-icon">
                            <i class="fas fa-trophy"></i>
                        </div>
                        <h4>4. Pitch Challenge</h4>
                        <p>Top performers receive prizes, mentorship, networking opportunities, and support to launch their business successfully.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>



    <!-- Call to Action Section -->
    <div class="features-section" style="background: #f8f9fa;">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-8 text-center">
                    <h2 class="display-5 fw-bold mb-4">Ready to Compete?</h2>
                    <p class="lead mb-4">
                        Join the Business Pitch Challenger 2025 and compete with the best entrepreneurs! 
                        Showcase your innovative business concept and win recognition, mentorship, and support to launch your venture.
                    </p>
                    <a href="submit_proposal.php" class="btn-primary-custom btn-lg">
                        <i class="fas fa-trophy me-2"></i>Apply Now
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5><img src="assets/images/logos/logo.png" alt="UEW iHub Logo" height="35" class="me-2" style="border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);">UEW iHub</h5>
                    <p>Empowering entrepreneurs through competitive pitch evaluation and expert mentorship in the 2nd Edition of our prestigious competition.</p>
                </div>
                <div class="col-md-4">
                    <h5>Quick Links</h5>
                    <ul class="list-unstyled">
                        <li><a href="#features" class="text-light">How the Competition Works</a></li>

                        <li><a href="#contact" class="text-light">Contact Us</a></li>
                    </ul>
                </div>
                <div class="col-md-3">
                    <div id="contact">
                        <h5>Contact Information</h5>
                        <p><i class="fas fa-envelope me-2"></i>bi@uew.edu.gh</p>
                        <p><i class="fas fa-phone me-2"></i>+233559615170</p>
                        <p><i class="fas fa-map-marker-alt me-2"></i><a href="https://maps.google.com/?q=9969+X79,Winneba" target="_blank" class="text-light text-decoration-none">Student Center, UEW Innovation Hub</a></p>
                    </div>
                </div>
                <div class="col-md-3">
                    <h5>Follow Us</h5>
                    <div class="social-media-links">
                        <a href="https://youtube.com/@universityofeducationinn-rm1dc?si=0OwEbK5KLnF66Xhq" target="_blank" class="social-link" title="YouTube">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="https://www.facebook.com/share/PS6e5LetxP4DpwxN/?mibextid=qi2Omg" target="_blank" class="social-link" title="Facebook">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <a href="https://x.com/uew_bus_hub?s=08" target="_blank" class="social-link" title="X (Twitter)">
                            <span style="font-weight: bold; font-size: 18px;">𝕏</span>
                        </a>
                        <a href="https://tinyurl.com/54x9ea6u" target="_blank" class="social-link" title="TikTok">
                            <i class="fab fa-tiktok"></i>
                        </a>
                    </div>
                </div>
            </div>
            <hr class="my-4">
            <div class="row">
                <div class="col-12 text-center">
                    <p class="mb-0">&copy; 2025 Business Pitch Challenger 2025 - 2nd Edition. All rights reserved.</p>
                </div>
            </div>
        </div>
    </footer>



    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // 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');
            }
        });

        // Smooth scrolling for navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Add animation on scroll
        window.addEventListener('scroll', function() {
            const cards = document.querySelectorAll('.feature-card');
            cards.forEach(card => {
                const cardTop = card.getBoundingClientRect().top;
                const cardVisible = 150;
                
                if (cardTop < window.innerHeight - cardVisible) {
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }
            });
        });

        // Initialize card animations
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.feature-card');
            cards.forEach(card => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
            });
        });
    </script>
</body>
</html>
