CloudBridge/components/AppFooter.vue
2025-09-04 18:01:27 +08:00

101 lines
3.7 KiB
Vue

<template>
<footer class="bg-aws-blue text-white">
<div class="container-custom py-12">
<div class="grid md:grid-cols-4 gap-8">
<!-- Company Info -->
<div class="md:col-span-2">
<div class="flex items-center space-x-2 mb-4">
<div class="w-8 h-8 bg-aws-orange rounded-lg flex items-center justify-center">
<span class="text-white font-bold text-lg">C</span>
</div>
<span class="text-xl font-bold">CloudBridge Proxy</span>
</div>
<p class="text-gray-300 mb-6 max-w-md">
Professional AWS cloud services proxy. Fast, secure, and reliable cloud infrastructure solutions for businesses of all sizes.
</p>
<div class="flex space-x-4">
<a
href="https://t.me/pinnovatecloud"
target="_blank"
rel="noopener noreferrer"
class="text-gray-300 hover:text-aws-orange transition-colors duration-200"
>
<MessageCircle class="w-6 h-6" />
</a>
<a
href="https://wa.me/19174029875"
target="_blank"
rel="noopener noreferrer"
class="text-gray-300 hover:text-aws-orange transition-colors duration-200"
>
<Phone class="w-6 h-6" />
</a>
</div>
</div>
<!-- Quick Links -->
<div>
<h3 class="text-lg font-semibold mb-4">Quick Links</h3>
<ul class="space-y-2">
<li>
<NuxtLink :to="localePath('/services')" class="text-gray-300 hover:text-aws-orange transition-colors duration-200">
{{ $t('nav.services') }}
</NuxtLink>
</li>
<li>
<NuxtLink :to="localePath('/pricing')" class="text-gray-300 hover:text-aws-orange transition-colors duration-200">
{{ $t('nav.pricing') }}
</NuxtLink>
</li>
<li>
<NuxtLink :to="localePath('/blog')" class="text-gray-300 hover:text-aws-orange transition-colors duration-200">
{{ $t('nav.blog') }}
</NuxtLink>
</li>
<li>
<NuxtLink :to="localePath('/contact')" class="text-gray-300 hover:text-aws-orange transition-colors duration-200">
{{ $t('nav.contact') }}
</NuxtLink>
</li>
</ul>
</div>
<!-- Contact Info -->
<div>
<h3 class="text-lg font-semibold mb-4">Contact</h3>
<div class="space-y-2 text-gray-300">
<div class="flex items-center space-x-2">
<MessageCircle class="w-4 h-4" />
<span>@pinnovatecloud</span>
</div>
<div class="flex items-center space-x-2">
<Phone class="w-4 h-4" />
<span>+1 9174029875</span>
</div>
</div>
</div>
</div>
<!-- Bottom Bar -->
<div class="border-t border-gray-600 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-300 text-sm">
{{ $t('footer.copyright') }}
</p>
<div class="flex space-x-6 mt-4 md:mt-0">
<a href="#" class="text-gray-300 hover:text-aws-orange text-sm transition-colors duration-200">
{{ $t('footer.privacy') }}
</a>
<a href="#" class="text-gray-300 hover:text-aws-orange text-sm transition-colors duration-200">
{{ $t('footer.terms') }}
</a>
</div>
</div>
</div>
</footer>
</template>
<script setup>
import { MessageCircle, Phone } from 'lucide-vue-next'
const localePath = useLocalePath()
</script>