<?php 
/**
 * index.php - হোম পেজ
 * বাটনগুলোতে ডায়নামিক হোভার ইফেক্ট যোগ করা হয়েছে।
 */

include('db_config.php');
include('header.php'); 
?>

<style>
    /* সার্ভিস কার্ড এবং বাটনের জন্য কাস্টম হোভার ইফেক্ট */
    .service-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .service-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important;
    }

    /* নীল বাটন হোভার করলে সবুজ হবে */
    .btn-blue {
        background-color: #00aeef;
        color: white;
        transition: 0.3s;
    }
    .btn-blue:hover {
        background-color: #57a03a;
        color: white;
        transform: scale(1.05);
    }

    /* সবুজ বাটন হোভার করলে নীল হবে */
    .btn-green {
        background-color: #57a03a;
        color: white;
        transition: 0.3s;
    }
    .btn-green:hover {
        background-color: #00aeef;
        color: white;
        transform: scale(1.05);
    }
</style>

<!-- স্লাইডার সেকশন -->
<?php include('slider.php'); ?>

<!-- Welcome Section -->
<section style="padding: 80px 0; background: #fff;">
    <div class="container">
        <div style="display: flex; flex-wrap: wrap; gap: 50px; align-items: center;">
            <div style="flex: 1; min-width: 300px;">
                <h4 style="color: #57a03a; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 10px; font-weight: 700;">স্বাগতম আমাদের নেটওয়ার্কে</h4>
                <h2 style="font-size: 2.5rem; color: #333; margin-bottom: 20px; line-height: 1.2;">রেড নেটওয়ার্ক লিমিটেড-এ আপনাকে <span style="color: #00aeef;">স্বাগতম</span></h2>
                <p style="color: #666; font-size: 1.1rem; margin-bottom: 25px; text-align: justify;">
                    আমরা আপনাকে দিচ্ছি দ্রুতগতির ও নির্ভরযোগ্য ইন্টারনেট সেবা। আধুনিক ফাইবার অপটিক প্রযুক্তির মাধ্যমে প্রতিটি ঘরে ও ব্যবসায়িক প্রতিষ্ঠানে নিরবচ্ছিন্ন সংযোগ পৌঁছে দেওয়া আমাদের লক্ষ্য।
                </p>
                <div style="margin-top: 35px;">
                    <a href="about.php" class="btn" style="background: #333; color: white; padding: 12px 30px; border-radius: 5px; text-decoration: none; font-weight: bold;">আরও জানুন</a>
                </div>
            </div>
            <div style="flex: 1; min-width: 300px; position: relative;">
                <img src="https://images.unsplash.com/photo-1551434678-e076c223a692?auto=format&fit=crop&w=800&q=80" alt="About Us" style="width: 100%; border-radius: 20px; box-shadow: 20px 20px 0px #f1f1f1;">
            </div>
        </div>
    </div>
</section>

<!-- What We Do Section (Interactive Buttons) -->
<section style="padding: 80px 0; background: #f8f9fa;">
    <div class="container">
        <div style="text-align: center; margin-bottom: 60px;">
            <h2 style="font-size: 2.5rem; color: #333; text-transform: uppercase; font-weight: 800; position: relative; display: inline-block;">
                আমরা কি করি?
                <span style="display: block; width: 80px; height: 5px; background: #00aeef; margin: 10px auto;"></span>
            </h2>
        </div>

        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px;">
            
            <!-- Service 1: Home Internet -->
            <div class="service-card" style="background: #fff; border-radius: 12px; padding: 45px 30px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-bottom: 5px solid #00aeef;">
                <div style="width: 90px; height: 90px; background: rgba(0, 174, 239, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;">
                    <img src="https://cdn-icons-png.flaticon.com/512/2880/2880590.png" alt="Home" style="width: 50px;">
                </div>
                <h3 style="color: #333; margin-bottom: 15px; font-weight: 700;">হোম ইন্টারনেট</h3>
                <p style="color: #777; margin-bottom: 30px; line-height: 1.6;">রিয়েল আইপি সহ হাই-স্পিড অপটিক্যাল ফাইবার ইন্টারনেট সেবা।</p>
                <a href="#" class="btn btn-blue" style="padding: 12px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-block;">আরও জানুন <i class="fas fa-arrow-right" style="margin-left: 8px; font-size: 0.8rem;"></i></a>
            </div>

            <!-- Service 2: Corporate Internet -->
            <div class="service-card" style="background: #fff; border-radius: 12px; padding: 45px 30px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-bottom: 5px solid #57a03a;">
                <div style="width: 90px; height: 90px; background: rgba(87, 160, 58, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;">
                    <img src="https://cdn-icons-png.flaticon.com/512/1055/1055644.png" alt="Corporate" style="width: 50px;">
                </div>
                <h3 style="color: #333; margin-bottom: 15px; font-weight: 700;">কর্পোরেট ইন্টারনেট</h3>
                <p style="color: #777; margin-bottom: 30px; line-height: 1.6;">ডেডিকেটেড ব্যান্ডউইথ এবং নির্ভরযোগ্য ব্যবসা সলিউশন।</p>
                <a href="#" class="btn btn-green" style="padding: 12px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-block;">আরও জানুন <i class="fas fa-arrow-right" style="margin-left: 8px; font-size: 0.8rem;"></i></a>
            </div>

            <!-- Service 3: IP CCTV -->
            <div class="service-card" style="background: #fff; border-radius: 12px; padding: 45px 30px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-bottom: 5px solid #00aeef;">
                <div style="width: 90px; height: 90px; background: rgba(0, 174, 239, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;">
                    <img src="https://cdn-icons-png.flaticon.com/512/2965/2965313.png" alt="CCTV" style="width: 50px;">
                </div>
                <h3 style="color: #333; margin-bottom: 15px; font-weight: 700;">আইপি এবং সিসিটিভি</h3>
                <p style="color: #777; margin-bottom: 30px; line-height: 1.6;">উন্নত আইপি ক্যামেরা এবং সিসিটিভি নজরদারি সিস্টেম।</p>
                <a href="#" class="btn btn-blue" style="padding: 12px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-block;">আরও জানুন <i class="fas fa-arrow-right" style="margin-left: 8px; font-size: 0.8rem;"></i></a>
            </div>

            <!-- Service 4: Network Solution -->
            <div class="service-card" style="background: #fff; border-radius: 12px; padding: 45px 30px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-bottom: 5px solid #57a03a;">
                <div style="width: 90px; height: 90px; background: rgba(87, 160, 58, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;">
                    <img src="https://cdn-icons-png.flaticon.com/512/1265/1265807.png" alt="Network" style="width: 50px;">
                </div>
                <h3 style="color: #333; margin-bottom: 15px; font-weight: 700;">নেটওয়ার্ক সলিউশন</h3>
                <p style="color: #777; margin-bottom: 30px; line-height: 1.6;">অফিস এবং ইন্ডাস্ট্রিয়াল নেটওয়ার্ক ইনফ্রাস্ট্রাকচার।</p>
                <a href="#" class="btn btn-green" style="padding: 12px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-block;">আরও জানুন <i class="fas fa-arrow-right" style="margin-left: 8px; font-size: 0.8rem;"></i></a>
            </div>

            <!-- Service 5: Cloud Storage -->
            <div class="service-card" style="background: #fff; border-radius: 12px; padding: 45px 30px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-bottom: 5px solid #00aeef;">
                <div style="width: 90px; height: 90px; background: rgba(0, 174, 239, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;">
                    <img src="https://cdn-icons-png.flaticon.com/512/4149/4149661.png" alt="Cloud" style="width: 50px;">
                </div>
                <h3 style="color: #333; margin-bottom: 15px; font-weight: 700;">ক্লাউড স্টোরেজ সেবা</h3>
                <p style="color: #777; margin-bottom: 30px; line-height: 1.6;">নিরাপদ ডেটা ব্যাকআপ এবং ক্লাউড স্টোরেজ সলিউশন।</p>
                <a href="#" class="btn btn-blue" style="padding: 12px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-block;">আরও জানুন <i class="fas fa-arrow-right" style="margin-left: 8px; font-size: 0.8rem;"></i></a>
            </div>

            <!-- Service 6: Software -->
            <div class="service-card" style="background: #fff; border-radius: 12px; padding: 45px 30px; text-align: center; box-shadow: 0 10px 20px rgba(0,0,0,0.05); border-bottom: 5px solid #57a03a;">
                <div style="width: 90px; height: 90px; background: rgba(87, 160, 58, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 25px;">
                    <img src="https://cdn-icons-png.flaticon.com/512/2014/2014614.png" alt="Software" style="width: 50px;">
                </div>
                <h3 style="color: #333; margin-bottom: 15px; font-weight: 700;">সফটওয়্যার ডেভেলপমেন্ট</h3>
                <p style="color: #777; margin-bottom: 30px; line-height: 1.6;">কাস্টম আইটি সলিউশন এবং বিজনেস সফটওয়্যার।</p>
                <a href="#" class="btn btn-green" style="padding: 12px 30px; text-decoration: none; border-radius: 50px; font-weight: bold; display: inline-block;">আরও জানুন <i class="fas fa-arrow-right" style="margin-left: 8px; font-size: 0.8rem;"></i></a>
            </div>

        </div>
    </div>
</section>

<div id="packages">
    <?php include('packages_list.php'); ?>
</div>

<?php include('footer.php'); ?>