File

Back Back Up Advanced Editor

<?php
// Load footer menus with a fallback
$footer_menus = [];
if (file_exists(__DIR__ . '/data.footer.php')) {
    $footer_menus = include __DIR__ . '/data.footer.php';
}

// Ensure footer_menus is an array with default structure
$footer_menus = array_merge([
    'company' => ['title' => 'Company', 'items' => []],
    'support' => ['title' => 'Support', 'items' => []],
    'legal' => ['title' => 'Legal', 'items' => []]
], is_array($footer_menus) ? $footer_menus : []);
?>

<footer class="bg-white text-gray-800 text-sm border-t border-gray-200">
    <div class="max-w-screen-xl mx-auto px-6 py-12">
        
        <div class="flex flex-col items-center gap-8 mb-10">
            <div class="flex flex-wrap justify-center gap-6">
                <div class="flex items-center gap-2 animate-fade-in delay-100">
                    <img src="https://cdn-icons-png.flaticon.com/128/5290/5290058.png" alt="G2" class="w-5 h-5" />
                    <span class="font-medium text-black">G2 / 4.8</span>
                </div>
                <div class="flex items-center gap-2 animate-fade-in delay-200">
                    <img src="https://cdn-icons-png.flaticon.com/128/5300/5300532.png" alt="Capterra" class="w-5 h-5" />
                    <span class="font-medium text-black">Capterra / 4.9</span>
                </div>
                <div class="flex items-center gap-2 animate-fade-in delay-300">
                    <img src="https://cdn-icons-png.flaticon.com/128/18359/18359846.png" alt="TrustRadius" class="w-5 h-5" />
                    <span class="font-medium text-black">TrustRadius / 5.0</span>
                </div>
            </div>
        </div>

<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 border-t border-gray-200 pt-10">
            
            <div class="space-y-4 flex flex-col items-center sm:col-span-2 md:col-span-1 md:items-start">
                <div class="flex items-center gap-3 animate-fade-in delay-100">
                    <i data-lucide="<?= $logoicon ?>" class="w-6 h-6 text-blue-600"></i>
                    <span class="font-bold text-black text-xl"><?= $logotext ?></span>
                </div>
                <div class="flex items-center gap-2">
                    <i data-lucide="mail" class="w-5 h-5 text-gray-600"></i>
                    <a href="mailto:<?= $email ?>" class="hover:text-blue-600 transition"><?= $email ?></a>
                </div>
                
                <div class="flex gap-4 mt-4">
                    <a href="<?= $facebook ?>" class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100 hover:bg-blue-500 hover:text-white transition group shadow-sm">
                        <i data-lucide="facebook" class="w-5 h-5 text-gray-600 group-hover:text-white"></i>
                    </a>
					<a href="<?= $linkedin ?>" class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100 hover:text-white transition group shadow-sm insta">
						<i data-lucide="instagram" class="w-5 h-5 text-gray-600 group-hover:text-white"></i>
					</a>
                    <a href="<?= $youtube ?>" class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100 hover:bg-red-500 hover:text-white transition group shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brand-pinterest" class="lucide lucide-brand-pinterest w-5 h-5 text-gray-600 group-hover:text-white"><path d="M8 20l4 -9" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /></svg>
                    </a>
                    <a href="<?= $twitter ?>" class="w-10 h-10 rounded-full flex items-center justify-center bg-gray-100 hover:bg-black hover:text-white transition group shadow-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" data-lucide="brand-x" class="lucide lucide-brand-x w-5 h-5 text-gray-600 group-hover:text-white"><path d="M4 4L15.733 20H20L8.267 4Z" />
						<path d="M4 20L10.768 13.232M13.228 10.772L20 4" /></svg>
                    </a>
                </div>
                <a href="#" class="mt-6 inline-flex items-center gap-2 px-4 py-2 text-sm bg-blue-100 text-blue-700 font-medium rounded-md hover:bg-blue-200 transition">
                    <i data-lucide="mail-check" class="w-5 h-5"></i> Contact Us
                </a>
            </div>

<div class="space-y-3">
                <h3 class="text-black font-semibold text-lg mb-3"><?php echo htmlspecialchars($footer_menus['company']['title']); ?></h3>
                <?php foreach ($footer_menus['company']['items'] as $item): ?>
                    <p><a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="hover:text-blue-600 transition"><?php echo htmlspecialchars($item['title'] ?? ''); ?></a></p>
                <?php endforeach; ?>
            </div>

<div class="space-y-3">
                <h3 class="text-black font-semibold text-lg mb-3"><?php echo htmlspecialchars($footer_menus['support']['title']); ?></h3>
                <?php foreach ($footer_menus['support']['items'] as $item): ?>
                    <p><a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="hover:text-blue-600 transition"><?php echo htmlspecialchars($item['title'] ?? ''); ?></a></p>
                <?php endforeach; ?>
            </div>

<div class="space-y-3 sm:col-span-2 md:col-span-1">
                <h3 class="text-black font-semibold text-lg mb-3"><?php echo htmlspecialchars($footer_menus['legal']['title']); ?></h3>
                <?php foreach ($footer_menus['legal']['items'] as $item): ?>
                    <p><a href="<?php echo htmlspecialchars($item['url'] ?? '#'); ?>" class="hover:text-blue-600 transition"><?php echo htmlspecialchars($item['title'] ?? ''); ?></a></p>
                <?php endforeach; ?>
            </div>
        </div>

<div class="flex flex-col md:flex-row justify-between items-center mt-12 text-xs text-gray-600">
            <div class="mb-4 md:mb-0">
                © <?= date('Y') ?> <?= $name ?>. All rights reserved.<br />
                <?= $address ?>
            </div>
            <div class="flex gap-6">
                <img src="https://upload.wikimedia.org/wikipedia/commons/4/41/Visa_Logo.png" alt="Visa" class="h-6" />
                <img src="https://upload.wikimedia.org/wikipedia/commons/0/04/Mastercard-logo.png" alt="MasterCard" class="h-6" />
                <img src="https://cdn-icons-png.flaticon.com/128/349/349230.png" alt="Discover" class="h-6" />
                <img src="https://cdn-icons-png.flaticon.com/128/349/349228.png" alt="Amex" class="h-6" />
            </div>
        </div>
    </div>
</footer>

<style>
    @keyframes fade-in {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    .animate-fade-in { animation: fade-in 0.6s ease-out both; }
    .delay-100 { animation-delay: 0.1s; }
    .delay-200 { animation-delay: 0.2s; }
    .delay-300 { animation-delay: 0.3s; }
	
	.insta:hover {background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d624ff 60%, #285aff 91%);}
</style>