113 lines
3.2 KiB
Vue
113 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<!-- Hero Section -->
|
|
<section class="aws-gradient text-white section-padding">
|
|
<div class="container-custom text-center">
|
|
<h1 class="text-5xl font-bold mb-6">
|
|
{{ $t('services.title') }}
|
|
</h1>
|
|
<p class="text-xl text-white/90 max-w-3xl mx-auto">
|
|
{{ $t('services.subtitle') }}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Services Grid -->
|
|
<section class="section-padding bg-white">
|
|
<div class="container-custom">
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
<div v-for="(service, key) in services" :key="key" class="card hover:shadow-aws transition-all duration-300 group">
|
|
<div class="text-aws-orange text-5xl mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
<component :is="service.icon" />
|
|
</div>
|
|
<h3 class="text-2xl font-bold mb-4">{{ service.title }}</h3>
|
|
<p class="text-gray-600 mb-6">{{ service.description }}</p>
|
|
<ul class="space-y-2 text-sm text-gray-500">
|
|
<li v-for="feature in service.features" :key="feature" class="flex items-center">
|
|
<Check class="text-green-500 mr-2 flex-shrink-0" />
|
|
<span>{{ feature }}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA Section -->
|
|
<section class="gradient-bg text-white section-padding">
|
|
<div class="container-custom text-center">
|
|
<h2 class="text-4xl font-bold mb-4">
|
|
{{ $t('cta.title') || 'Ready to Get Started?' }}
|
|
</h2>
|
|
<p class="text-xl mb-8 text-white/90">
|
|
{{ $t('cta.subtitle') || 'Contact us today to discuss your AWS needs.' }}
|
|
</p>
|
|
<button class="btn-secondary text-lg px-8 py-4">
|
|
{{ $t('cta.button') || 'Contact Us' }}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { Server, Database, Network, HardDrive, Check, Shield, Zap, Globe } from 'lucide-vue-next'
|
|
|
|
// i18n
|
|
const { t } = useI18n()
|
|
|
|
// SEO
|
|
useSeoMeta({
|
|
title: () => t('seo.services.title'),
|
|
description: () => t('seo.services.description')
|
|
})
|
|
|
|
// Services data
|
|
const services = computed(() => [
|
|
{
|
|
title: t('services.compute.title'),
|
|
description: t('services.compute.description'),
|
|
icon: Server,
|
|
features: [
|
|
'Scalable instances',
|
|
'Auto-scaling groups',
|
|
'Load balancing',
|
|
'24/7 monitoring'
|
|
]
|
|
},
|
|
{
|
|
title: t('services.storage.title'),
|
|
description: t('services.storage.description'),
|
|
icon: HardDrive,
|
|
features: [
|
|
'Unlimited storage',
|
|
'Data encryption',
|
|
'Cross-region replication',
|
|
'Lifecycle management'
|
|
]
|
|
},
|
|
{
|
|
title: t('services.database.title'),
|
|
description: t('services.database.description'),
|
|
icon: Database,
|
|
features: [
|
|
'Managed databases',
|
|
'Automated backups',
|
|
'Read replicas',
|
|
'Performance monitoring'
|
|
]
|
|
},
|
|
{
|
|
title: t('services.networking.title'),
|
|
description: t('services.networking.description'),
|
|
icon: Network,
|
|
features: [
|
|
'Private networks',
|
|
'VPN connections',
|
|
'Security groups',
|
|
'Traffic routing'
|
|
]
|
|
}
|
|
])
|
|
</script>
|