File "footer-20260316100723.php"
Full path: /home/u525140468/domains/productsizer.com/public_html/inc/footer-20260316100723.php
File
size: 7.82 B (7.82 KB bytes)
MIME-type: text/x-php
Charset: utf-8
Download Open Edit Advanced Editor Back
<?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 -->
<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">
<!-- Top Section: Ratings -->
<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>
<!-- Main Footer Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 border-t border-gray-200 pt-10">
<!-- Company Info & Contact -->
<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 items-center gap-2">
<i data-lucide="phone" class="w-5 h-5 text-gray-600"></i>
<span><?= $phone ?></span>
</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>
<!-- Company -->
<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>
<!-- Support -->
<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>
<!-- Legal -->
<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>
<!-- Bottom Row -->
<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>
<!-- Styles -->
<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>