150 lines
8.5 KiB
Plaintext
150 lines
8.5 KiB
Plaintext
---
|
|
import BaseLayout from '../../../../layouts/BaseLayout.astro';
|
|
import Header from '../../../../components/Header.astro';
|
|
import Footer from '../../../../components/Footer.astro';
|
|
import { ui, languages, defaultLang } from '../../../../i18n/ui';
|
|
|
|
// Get language from the URL
|
|
export async function getStaticPaths() {
|
|
return Object.keys(languages).map(lang => {
|
|
return { params: { lang } };
|
|
});
|
|
}
|
|
|
|
const { lang = defaultLang } = Astro.params;
|
|
const t = ui[lang as keyof typeof ui];
|
|
---
|
|
|
|
<BaseLayout>
|
|
<Header />
|
|
|
|
<!-- Hero Section -->
|
|
<section class="relative pt-32 pb-20 overflow-hidden">
|
|
<!-- Background elements -->
|
|
<div class="absolute inset-0 -z-10">
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black-deep via-black-medium to-black-deep"></div>
|
|
<div class="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-silver-metallic/20 to-transparent"></div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="container mx-auto px-4 relative z-10">
|
|
<div class="mb-8">
|
|
<a href={`/${lang}/#services`} class="inline-flex items-center text-silver-light/70 hover:text-accent-gold transition-colors">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
{t['services.back']}
|
|
</a>
|
|
</div>
|
|
|
|
<h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-silver-metallic to-silver-light mb-6">
|
|
{t['services.security.page.title']}
|
|
</h1>
|
|
|
|
<p class="text-xl text-silver-light/90 mb-12 max-w-3xl leading-relaxed">
|
|
{t['services.security.page.description']}
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Main Content Section -->
|
|
<section class="relative py-16 px-4">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium"></div>
|
|
|
|
<div class="max-w-6xl mx-auto relative z-10">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-16">
|
|
<!-- Left Column: Content -->
|
|
<div>
|
|
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/90 backdrop-blur-sm rounded-2xl border border-silver-dark/20 shadow-xl overflow-hidden h-full">
|
|
<div class="absolute top-0 right-0 w-full h-1 bg-gradient-to-r from-transparent via-accent-gold/30 to-transparent"></div>
|
|
|
|
<div class="p-8 md:p-10">
|
|
<p class="text-lg text-silver-light/80 mb-8 leading-relaxed">
|
|
{t['services.security.page.content']}
|
|
</p>
|
|
|
|
<h3 class="text-xl text-silver-light font-semibold mb-6">{t['services.security.page.features']}</h3>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature1']}</h4>
|
|
<p class="text-silver-light/70 text-sm mt-1">Professional security presence for public and private events.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature2']}</h4>
|
|
<p class="text-silver-light/70 text-sm mt-1">Controlled entry systems and identity verification procedures.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature3']}</h4>
|
|
<p class="text-silver-light/70 text-sm mt-1">Continuous monitoring and vigilant security oversight.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature4']}</h4>
|
|
<p class="text-silver-light/70 text-sm mt-1">Specialist protection for high-profile individuals and assets.</p>
|
|
</div>
|
|
</li>
|
|
<li class="flex items-start gap-4">
|
|
<div class="flex-shrink-0 w-6 h-6 rounded-full bg-accent-blue/20 flex items-center justify-center mt-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-accent-blue" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h4 class="text-silver-metallic font-medium">{t['services.security.page.feature5']}</h4>
|
|
<p class="text-silver-light/70 text-sm mt-1">Comprehensive evaluation of security vulnerabilities and threats.</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Column: Image -->
|
|
<div class="relative rounded-2xl overflow-hidden h-full min-h-[400px]">
|
|
<div class="absolute inset-0 bg-gradient-to-br from-black-deep to-black-medium opacity-40"></div>
|
|
<img src="/assets/security-service.jpg" alt="Security Services" class="absolute inset-0 w-full h-full object-cover" onerror="this.src='/Logo.png';this.classList.add('p-12', 'object-contain', 'opacity-10');" />
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black-deep to-transparent"></div>
|
|
|
|
<!-- Contact box -->
|
|
<div class="absolute bottom-0 left-0 right-0 p-8">
|
|
<div class="bg-gradient-to-br from-black-deep/90 to-black-medium/80 backdrop-blur-sm rounded-xl border border-silver-dark/30 p-6">
|
|
<h3 class="text-xl text-silver-light font-semibold mb-4">Need Security Services?</h3>
|
|
<p class="text-silver-light/70 text-sm mb-6">Contact us today to discuss your security requirements and receive a tailored solution.</p>
|
|
<a href={`/${lang}/#contact`} class="inline-block bg-gradient-to-r from-accent-blue to-accent-blue/80 text-silver-light font-medium px-6 py-3 rounded-lg shadow-xl hover:shadow-accent-blue/20 transition-all duration-300 hover:translate-y-[-2px] w-full text-center">
|
|
Contact Us
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<Footer />
|
|
</BaseLayout> |