make this codes (<?php
// public/about_kaakalia/index.php

// Include the header
require_once '../../includes/header.php';
?>
<!-- Main Content -->
<main class="container mx-auto px-4 py-8">
    <!-- About Us Section -->
    <section class="mb-12">
        <h2 class="text-3xl font-semibold text-gray-800 mb-6">نبذة عن كعك عليا</h2>
        <div class="bg-white p-6 rounded-lg shadow-md">
            <p class="text-gray-700 mb-4">
                تأسست مخبز كعك عليا في عام 2019 في الكويت، وهي مخبز معروف بجودته الاستثنائية وتشكيلته اللذيذة من المخبوزات. التزامنا باستخدام أفضل المكونات والوصفات التقليدية جعلنا علامة محبوبة بين عملائنا.
            </p>
            <p class="text-gray-700">
                في كعك عليا، رؤيتنا هي جلب الفرح لكل مناسبة من خلال منتجاتنا المخبوزة الرائعة والمصنوعة بعناية. نسعى أن نكون جزءًا من احتفالاتكم، الكبيرة والصغيرة، من خلال تقديم منتجات متنوعة تلبي مختلف الأذواق والتفضيلات.
            </p>
        </div>
    </section>

    <!-- Location Section -->
    <section class="mb-12">
        <h2 class="text-3xl font-semibold text-gray-800 mb-6">موقعنا</h2>
        <div class="bg-white p-6 rounded-lg shadow-md">
            <p class="text-gray-700 mb-4">
                📍 <strong>العنوان بالعربية:</strong> الشهداء ق١ش١٠٤م٦١
            </p>
            <p class="text-gray-700 mb-4">
                🛠️ <strong>نحن نصنع منتجاتنا في:</strong> مطبخ مركزي، حيث نقوم بتجهيز كافة المخبوزات باستخدام أحدث المعدات وأفضل المكونات لضمان الجودة المثلى والذوق الفريد.
            </p>
            <p class="text-gray-700">
                📞 <strong>رقم الهاتف:</strong> <a href="tel:<PRESIDIO_ANONYMIZED_PHONE_NUMBER>" class="text-indigo-600 hover:underline">+965 9772 5391</a>
            </p>
        </div>
    </section>

    <!-- Products Section -->
    <section class="mb-12">
        <h2 class="text-3xl font-semibold text-gray-800 mb-6">منتجاتنا</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
            <!-- Product 1 -->
            <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
                <h3 class="text-xl font-bold text-indigo-600 mb-2">شابورة (لسان الثور) - Biscuits/Cakes</h3>
                <p class="text-gray-700 mb-4">
                    متوفرة بأوزان 0.5 كجم، 1 كجم، وصندوق.<br>
                    مقدمة في صندوق عادي أو سلة.
                </p>
            </div>

            <!-- Product 2 -->
            <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
                <h3 class="text-xl font-bold text-indigo-600 mb-2">كيكة مالحة</h3>
                <p class="text-gray-700 mb-4">
                    تحتوي على الجبن، الزعتر، الزيتون، الطماطم المجففة، والصلصة.<br>
                    متوفرة بأحجام كبيرة وكميات من 12، 24، و36 قطعة.<br>
                    <strong>التغليف:</strong> صندوق عادي أو صينية.
                </p>
            </div>

            <!-- Product 3 -->
            <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
                <h3 class="text-xl font-bold text-indigo-600 mb-2">مهلبية كرنشي 🍨</h3>
                <p class="text-gray-700 mb-4">
                    مهلبية باردة مع مكسرات متنوعة.<br>
                    متوفرة بكميات من 12 قطعة.
                </p>
            </div>

            <!-- Product 4 -->
            <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
                <h3 class="text-xl font-bold text-indigo-600 mb-2">بوكسات المناسبات - Special Occasion Boxes</h3>
                <p class="text-gray-700 mb-4">
                    <strong>الخيارات:</strong> 35 قطعة من الكيكة المالحة (14.5 دينار كويتي) أو 33 قطعة (11 دينار كويتي).<br>
                    <strong>الأنماط:</strong> الحمدالله على السلامة (Thank God for Your Safety)، مبروك (Congratulations)، زارتنا البركة (Blessing Visited Us).
                </p>
            </div>

            <!-- Product 5 -->
            <div class="bg-white rounded-lg shadow-md p-6 flex flex-col">
                <h3 class="text-xl font-bold text-indigo-600 mb-2">تقديم في الصواني لمنتجاتنا</h3>
                <p class="text-gray-700 mb-4">
                    خمسة منتجات نقدمها بشكل أنيق في صواني، مثالية لأي مناسبة.
                </p>
            </div>
        </div>

        <!-- Buttons to Copy Product Details -->
        <div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-6">
            <!-- Button 1: شابورة (لسان الثور) -->
            <button id="copyProduct1" class="bg-indigo-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-indigo-700 transition-colors flex items-center justify-center">
                <i class="fas fa-copy mr-2"></i> شابورة (لسان الثور)
            </button>

            <!-- Button 2: كعكة مالحة -->
            <button id="copyProduct2" class="bg-green-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-green-700 transition-colors flex items-center justify-center">
                <i class="fas fa-copy mr-2"></i> كعكة مالحة
            </button>

            <!-- Button 3: مهلبية -->
            <button id="copyProduct3" class="bg-pink-600 text-white px-6 py-3 rounded-lg shadow-md hover:bg-pink-700 transition-colors flex items-center justify-center">
                <i class="fas fa-copy mr-2"></i> مهلبية
            </button>
        </div>

        <!-- Hidden Texts for Copying -->
        <div class="hidden">
            <!-- Text for Product 1: شابورة (لسان الثور) -->
            <p id="textProduct1">
شابورة (شابوره (لسان الثور)
في علبه نص كيلو 🗃 ٦ دك 
علبة كيلو 🗃 ٨ دك 
سلة صغيرة 🧺 ٨ دك 
سلة كبيرة 🧺 ١٠ دك
بوكس المناسبات ٣٣ حبه اب ١١ دك
            </p>

            <!-- Text for Product 2: كعكة مالحة -->
            <p id="textProduct2">
كعكة مالحة (الكيكه المالحه (مونكي بريد)🥮 
الحجم الكبير ١٢ دك
الميني كيك ١٢ حبه اب ٦ دك 
الميني كيك ٢٤ حبه اب ٩ دك 
الميني كيك ٣٦ حبه اب ١٢ دك
بوكس المناسبات ٣٥ حبه اب ١٤.٥ دك
            </p>

            <!-- Text for Product 3: مهلبية -->
            <p id="textProduct3">
مهلبية (المحلبيه كرنشي 🍨 
١٢ حبه اب ١٢ دك
            </p>
        </div>

        <!-- JavaScript for Copy Functionality -->
        <script>
            // Function to copy text
            function copyText(elementId) {
                const text = document.getElementById(elementId).innerText;
                navigator.clipboard.writeText(text).then(() => {
                    // Create and show a temporary toast message
                    const toast = document.createElement('div');
                    toast.className = 'fixed bottom-4 right-4 bg-green-600 text-white px-4 py-2 rounded shadow-md z-50';
                    toast.innerText = 'تم نسخ المعلومات بنجاح';
                    document.body.appendChild(toast);
                    setTimeout(() => {
                        toast.remove();
                    }, 2000);
                }).catch(err => {
                    // Create and show a temporary error message
                    const toast = document.createElement('div');
                    toast.className = 'fixed bottom-4 right-4 bg-red-600 text-white px-4 py-2 rounded shadow-md z-50';
                    toast.innerText = 'فشل في نسخ المعلومات';
                    document.body.appendChild(toast);
                    setTimeout(() => {
                        toast.remove();
                    }, 2000);
                });
            }

            // Add event listeners to buttons
            document.getElementById('copyProduct1').addEventListener('click', () => {
                copyText('textProduct1');
            });

            document.getElementById('copyProduct2').addEventListener('click', () => {
                copyText('textProduct2');
            });

            document.getElementById('copyProduct3').addEventListener('click', () => {
                copyText('textProduct3');
            });
        </script>
    </section>
</main>

<!-- Footer Section without footer.php -->
<footer class="bg-white shadow mt-12">
    <div class="container mx-auto px-4 py-6 flex justify-between items-center">
        <p class="text-gray-700">&copy; <?= date("Y"); ?> كعك عليا. جميع الحقوق محفوظة.</p>
        <div class="flex space-x-4">
            <a href="#" class="text-gray-700 hover:text-indigo-600"><i class="fab fa-facebook-f"></i></a>
            <a href="#" class="text-gray-700 hover:text-indigo-600"><i class="fab fa-instagram"></i></a>
            <a href="#" class="text-gray-700 hover:text-indigo-600"><i class="fab fa-twitter"></i></a>
            <!-- أضف أيقونات وسائل التواصل الاجتماعي الأخرى حسب الحاجة -->
        </div>
    </div>
</footer>
</body>
</html>) good design and add more design codes to make it great