Update site content across multiple languages, enhancing the "Stay Updated" section with a subscription form and footer details. Remove unused CSS files and ensure proper localization in JSON files for German, French, Dutch, and English. Adjust site configuration for improved navigation and accessibility.
This commit is contained in:
@@ -1,9 +1,9 @@
|
||||
---
|
||||
import BaseLayout from "../../layouts/BaseLayout.astro";
|
||||
import Header from "../../components/Header.astro";
|
||||
import Footer from "../../components/Footer.astro";
|
||||
import CTA from "../../components/CTA.astro";
|
||||
import { useTranslations, SUPPORTED_LOCALES } from '../../utils/i18n';
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import CTA from '../../components/CTA.astro';
|
||||
import { useTranslations, SUPPORTED_LOCALES, localizePath } from '../../utils/i18n';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return SUPPORTED_LOCALES.map(lang => ({ params: { lang } }));
|
||||
@@ -11,25 +11,452 @@ export async function getStaticPaths() {
|
||||
|
||||
const { lang } = Astro.params;
|
||||
const t = await useTranslations(lang as any);
|
||||
|
||||
// Team members data
|
||||
const teamMembers = [
|
||||
{
|
||||
name: 'Marco van der Berg',
|
||||
role: 'about.team.founder.role',
|
||||
bio: 'about.team.founder.bio',
|
||||
image: '/images/team/marco.jpg',
|
||||
specialties: ['Microsoft 365', 'Cloud Architecture', 'Business Strategy'],
|
||||
linkedin: '#'
|
||||
},
|
||||
{
|
||||
name: 'Sarah de Wit',
|
||||
role: 'about.team.technical.role',
|
||||
bio: 'about.team.technical.bio',
|
||||
image: '/images/team/sarah.jpg',
|
||||
specialties: ['Network Security', 'Infrastructure', 'Automation'],
|
||||
linkedin: '#'
|
||||
},
|
||||
{
|
||||
name: 'Tom Jansen',
|
||||
role: 'about.team.support.role',
|
||||
bio: 'about.team.support.bio',
|
||||
image: '/images/team/tom.jpg',
|
||||
specialties: ['Customer Success', 'Training', 'Support'],
|
||||
linkedin: '#'
|
||||
}
|
||||
];
|
||||
|
||||
// Company values
|
||||
const values = [
|
||||
{
|
||||
icon: '🎯',
|
||||
titleKey: 'about.values.excellence.title',
|
||||
descriptionKey: 'about.values.excellence.description'
|
||||
},
|
||||
{
|
||||
icon: '🤝',
|
||||
titleKey: 'about.values.partnership.title',
|
||||
descriptionKey: 'about.values.partnership.description'
|
||||
},
|
||||
{
|
||||
icon: '🚀',
|
||||
titleKey: 'about.values.innovation.title',
|
||||
descriptionKey: 'about.values.innovation.description'
|
||||
},
|
||||
{
|
||||
icon: '🔒',
|
||||
titleKey: 'about.values.security.title',
|
||||
descriptionKey: 'about.values.security.description'
|
||||
}
|
||||
];
|
||||
|
||||
// Timeline data
|
||||
const timeline = [
|
||||
{
|
||||
year: '2019',
|
||||
titleKey: 'about.timeline.founded.title',
|
||||
descriptionKey: 'about.timeline.founded.description'
|
||||
},
|
||||
{
|
||||
year: '2020',
|
||||
titleKey: 'about.timeline.growth.title',
|
||||
descriptionKey: 'about.timeline.growth.description'
|
||||
},
|
||||
{
|
||||
year: '2022',
|
||||
titleKey: 'about.timeline.expansion.title',
|
||||
descriptionKey: 'about.timeline.expansion.description'
|
||||
},
|
||||
{
|
||||
year: '2024',
|
||||
titleKey: 'about.timeline.present.title',
|
||||
descriptionKey: 'about.timeline.present.description'
|
||||
}
|
||||
];
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={`${t("nav.about")} | ${t("meta.title")}`}
|
||||
description={t("meta.description")}
|
||||
description={t("about.meta.description")}
|
||||
keywords={t("meta.keywords")}
|
||||
>
|
||||
<Header />
|
||||
|
||||
<main>
|
||||
<section class="py-20">
|
||||
<!-- Hero Section -->
|
||||
<section class="section-padding bg-gradient-to-br from-background via-surface/30 to-background">
|
||||
<div class="container-custom">
|
||||
<h1 class="text-4xl font-bold mb-8">{t("about.title")}</h1>
|
||||
<div class="prose prose-lg">
|
||||
<p>{t("about.description")}</p>
|
||||
<p>{t("about.mission")}</p>
|
||||
<div class="max-w-4xl mx-auto text-center animate-on-scroll">
|
||||
<!-- Badge -->
|
||||
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 border border-primary/20 text-primary text-sm font-medium mb-6">
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
{t('about.hero.badge')}
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<h1 class="text-responsive-xl font-bold text-foreground mb-6">
|
||||
{t('about.hero.title')}
|
||||
<span class="block text-gradient">{t('about.hero.since')}</span>
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="text-responsive-base text-muted leading-relaxed mb-12">
|
||||
{t('about.hero.subtitle')}
|
||||
</p>
|
||||
|
||||
<!-- Stats -->
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-primary mb-2">5+</div>
|
||||
<div class="text-sm text-subtle">{t('about.hero.stats.experience')}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-accent mb-2">100+</div>
|
||||
<div class="text-sm text-subtle">{t('about.hero.stats.clients')}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-success mb-2">24/7</div>
|
||||
<div class="text-sm text-subtle">{t('about.hero.stats.support')}</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-warning mb-2">99.9%</div>
|
||||
<div class="text-sm text-subtle">{t('about.hero.stats.uptime')}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Mission & Vision Section -->
|
||||
<section class="section-padding bg-gradient-to-b from-surface/20 to-background">
|
||||
<div class="container-custom">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
|
||||
|
||||
<!-- Mission -->
|
||||
<div class="animate-on-scroll">
|
||||
<div class="card-glass p-8 h-full">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-primary/10 to-accent/10 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-foreground">{t('about.mission.title')}</h2>
|
||||
</div>
|
||||
<p class="text-muted leading-relaxed text-lg">
|
||||
{t('about.mission.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vision -->
|
||||
<div class="animate-on-scroll" style="animation-delay: 0.2s;">
|
||||
<div class="card-glass p-8 h-full">
|
||||
<div class="flex items-center gap-4 mb-6">
|
||||
<div class="w-16 h-16 bg-gradient-to-br from-accent/10 to-primary/10 rounded-2xl flex items-center justify-center">
|
||||
<svg class="w-8 h-8 text-accent" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-foreground">{t('about.mission.vision.title')}</h2>
|
||||
</div>
|
||||
<p class="text-muted leading-relaxed text-lg">
|
||||
{t('about.mission.vision.description')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Company Values -->
|
||||
<section class="section-padding bg-background">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16 animate-on-scroll">
|
||||
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
|
||||
{t('about.values.title')}
|
||||
</h2>
|
||||
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
|
||||
{t('about.values.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{values.map((value, index) => (
|
||||
<div
|
||||
class="text-center animate-on-scroll group"
|
||||
style={`animation-delay: ${index * 0.1}s`}
|
||||
>
|
||||
<div class="mb-6">
|
||||
<div class="inline-flex w-20 h-20 bg-gradient-to-br from-surface/50 to-background/50 border border-border/50 rounded-3xl items-center justify-center group-hover:scale-110 transition-all duration-300 group-hover:bg-primary/5 group-hover:border-primary/20">
|
||||
<span class="text-3xl">{value.icon}</span>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="text-xl font-bold text-foreground mb-4 group-hover:text-primary transition-colors">
|
||||
{t(value.titleKey)}
|
||||
</h3>
|
||||
<p class="text-muted leading-relaxed">
|
||||
{t(value.descriptionKey)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timeline Section -->
|
||||
<section class="section-padding bg-gradient-to-b from-surface/20 to-background">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16 animate-on-scroll">
|
||||
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
|
||||
{t('about.timeline.title')}
|
||||
</h2>
|
||||
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
|
||||
{t('about.timeline.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="relative">
|
||||
<!-- Timeline line -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-1 h-full bg-gradient-to-b from-primary to-accent rounded-full"></div>
|
||||
|
||||
<div class="space-y-16">
|
||||
{timeline.map((item, index) => (
|
||||
<div
|
||||
class={`flex items-center animate-on-scroll ${index % 2 === 0 ? 'flex-row' : 'flex-row-reverse'}`}
|
||||
style={`animation-delay: ${index * 0.2}s`}
|
||||
>
|
||||
<!-- Timeline dot -->
|
||||
<div class="absolute left-1/2 transform -translate-x-1/2 w-6 h-6 bg-gradient-to-br from-primary to-accent rounded-full border-4 border-background z-10"></div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class={`w-5/12 ${index % 2 === 0 ? 'text-right pr-8' : 'text-left pl-8'}`}>
|
||||
<div class="card-glass p-6">
|
||||
<div class="text-2xl font-bold text-primary mb-2">{item.year}</div>
|
||||
<h3 class="text-lg font-bold text-foreground mb-3">
|
||||
{t(item.titleKey)}
|
||||
</h3>
|
||||
<p class="text-muted">
|
||||
{t(item.descriptionKey)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Team Section -->
|
||||
<section class="section-padding bg-background">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16 animate-on-scroll">
|
||||
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
|
||||
{t('about.team.title')}
|
||||
</h2>
|
||||
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
|
||||
{t('about.team.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
{teamMembers.map((member, index) => (
|
||||
<div
|
||||
class="text-center animate-on-scroll group"
|
||||
style={`animation-delay: ${index * 0.1}s`}
|
||||
>
|
||||
<div class="card-glass p-8 hover:shadow-xl transition-all duration-300 group-hover:-translate-y-2">
|
||||
<!-- Avatar placeholder -->
|
||||
<div class="mb-6">
|
||||
<div class="w-24 h-24 mx-auto bg-gradient-to-br from-primary/10 to-accent/10 rounded-full flex items-center justify-center group-hover:scale-110 transition-all duration-300">
|
||||
<svg class="w-12 h-12 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-xl font-bold text-foreground mb-2 group-hover:text-primary transition-colors">
|
||||
{member.name}
|
||||
</h3>
|
||||
|
||||
<div class="text-accent font-medium mb-4">
|
||||
{t(member.role)}
|
||||
</div>
|
||||
|
||||
<p class="text-muted text-sm leading-relaxed mb-6">
|
||||
{t(member.bio)}
|
||||
</p>
|
||||
|
||||
<!-- Specialties -->
|
||||
<div class="flex flex-wrap justify-center gap-2 mb-6">
|
||||
{member.specialties.map((specialty) => (
|
||||
<span class="px-3 py-1 bg-primary/10 text-primary text-xs rounded-full">
|
||||
{specialty}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- LinkedIn link -->
|
||||
<a
|
||||
href={member.linkedin}
|
||||
class="inline-flex items-center gap-2 text-primary hover:text-accent transition-colors text-sm font-medium"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
|
||||
</svg>
|
||||
{t('about.team.connect')}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Certifications & Partners -->
|
||||
<section class="section-padding bg-gradient-to-b from-surface/20 to-background">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16 animate-on-scroll">
|
||||
<h2 class="text-responsive-xl font-bold text-foreground mb-6">
|
||||
{t('about.certifications.title')}
|
||||
</h2>
|
||||
<p class="text-responsive-base text-muted max-w-2xl mx-auto">
|
||||
{t('about.certifications.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
||||
<!-- Microsoft Partner -->
|
||||
<div class="text-center animate-on-scroll group">
|
||||
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-primary/30 transition-all">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary/10 to-accent/10 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">🏅</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-foreground">{t('about.certifications.microsoft.title')}</h3>
|
||||
<p class="text-sm text-subtle mt-2">{t('about.certifications.microsoft.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ubiquiti Partner -->
|
||||
<div class="text-center animate-on-scroll group" style="animation-delay: 0.1s;">
|
||||
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-accent/30 transition-all">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-accent/10 to-primary/10 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">🌐</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-foreground">{t('about.certifications.ubiquiti.title')}</h3>
|
||||
<p class="text-sm text-subtle mt-2">{t('about.certifications.ubiquiti.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Security Certified -->
|
||||
<div class="text-center animate-on-scroll group" style="animation-delay: 0.2s;">
|
||||
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-success/30 transition-all">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-success/10 to-primary/10 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">🔒</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-foreground">{t('about.certifications.security.title')}</h3>
|
||||
<p class="text-sm text-subtle mt-2">{t('about.certifications.security.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cloud Specialist -->
|
||||
<div class="text-center animate-on-scroll group" style="animation-delay: 0.3s;">
|
||||
<div class="p-6 bg-surface/50 rounded-2xl border border-border/50 group-hover:border-warning/30 transition-all">
|
||||
<div class="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-warning/10 to-accent/10 rounded-xl flex items-center justify-center">
|
||||
<span class="text-2xl">☁️</span>
|
||||
</div>
|
||||
<h3 class="font-semibold text-foreground">{t('about.certifications.cloud.title')}</h3>
|
||||
<p class="text-sm text-subtle mt-2">{t('about.certifications.cloud.subtitle')}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CTA Section -->
|
||||
<CTA />
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
/* About page specific animations */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.animate-on-scroll.in-view {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Timeline enhancements */
|
||||
.timeline-dot {
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Team card hover effects */
|
||||
.group:hover .card-glass {
|
||||
background: rgba(var(--color-surface), 0.8);
|
||||
}
|
||||
|
||||
/* Value card enhancements */
|
||||
.group:hover span {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Initialize scroll animations
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const observerOptions = {
|
||||
threshold: 0.1,
|
||||
rootMargin: '0px 0px -50px 0px'
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('in-view');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
const animatedElements = document.querySelectorAll('.animate-on-scroll');
|
||||
animatedElements.forEach((el) => observer.observe(el));
|
||||
|
||||
// Add parallax effect to timeline
|
||||
window.addEventListener('scroll', () => {
|
||||
const timeline = document.querySelector('.timeline-line');
|
||||
if (timeline) {
|
||||
const scrolled = window.pageYOffset;
|
||||
const rate = scrolled * -0.5;
|
||||
timeline.style.transform = `translateY(${rate}px)`;
|
||||
}
|
||||
}, { passive: true });
|
||||
});
|
||||
</script>
|
||||
295
src/pages/[lang]/services.astro
Normal file
295
src/pages/[lang]/services.astro
Normal file
@@ -0,0 +1,295 @@
|
||||
---
|
||||
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||
import Header from '../../components/Header.astro';
|
||||
import Footer from '../../components/Footer.astro';
|
||||
import CTA from '../../components/CTA.astro';
|
||||
import { SERVICES } from '@config';
|
||||
import { getLangFromUrl, useTranslations, SUPPORTED_LOCALES } from '../../utils/i18n';
|
||||
|
||||
export async function getStaticPaths() {
|
||||
return SUPPORTED_LOCALES.map(lang => ({ params: { lang } }));
|
||||
}
|
||||
|
||||
const { lang } = Astro.params;
|
||||
const t = await useTranslations(lang as any);
|
||||
|
||||
const getServiceDetails = (serviceId: string) => {
|
||||
switch (serviceId) {
|
||||
case 'microsoft365':
|
||||
return {
|
||||
benefits: [
|
||||
'Seamless transition to Microsoft 365 with expert guidance',
|
||||
'Zero downtime email migrations and data transfer',
|
||||
'Custom configuration of all Office applications',
|
||||
'Enhanced team collaboration through Microsoft Teams',
|
||||
'Secure document management with SharePoint',
|
||||
'Streamlined admin center management'
|
||||
],
|
||||
process: [
|
||||
'Initial assessment of your current setup',
|
||||
'Custom migration plan development',
|
||||
'Step-by-step implementation',
|
||||
'User training and support',
|
||||
'Ongoing maintenance and optimization'
|
||||
]
|
||||
};
|
||||
case 'management':
|
||||
return {
|
||||
benefits: [
|
||||
'Proactive system monitoring and maintenance',
|
||||
'Automated workflow implementation',
|
||||
'Enhanced security and compliance',
|
||||
'Regular performance optimization',
|
||||
'Cost-effective resource utilization',
|
||||
'Reduced IT management overhead'
|
||||
],
|
||||
process: [
|
||||
'Environment assessment',
|
||||
'Automation opportunity identification',
|
||||
'Monitoring setup and configuration',
|
||||
'Regular maintenance scheduling',
|
||||
'Continuous improvement implementation'
|
||||
]
|
||||
};
|
||||
case 'networking':
|
||||
return {
|
||||
benefits: [
|
||||
'Enterprise-grade network infrastructure',
|
||||
'High-performance Ubiquiti/UniFi solutions',
|
||||
'Advanced security implementation',
|
||||
'Reliable and fast connectivity',
|
||||
'Scalable network architecture',
|
||||
'Professional network monitoring'
|
||||
],
|
||||
process: [
|
||||
'Network requirements analysis',
|
||||
'Infrastructure design and planning',
|
||||
'Equipment selection and deployment',
|
||||
'Security implementation',
|
||||
'Performance optimization'
|
||||
]
|
||||
};
|
||||
case 'hosting':
|
||||
return {
|
||||
benefits: [
|
||||
'High-performance web hosting',
|
||||
'Secure and reliable infrastructure',
|
||||
'Automated backup systems',
|
||||
'SSL certificate management',
|
||||
'Domain name administration',
|
||||
'Regular maintenance and updates'
|
||||
],
|
||||
process: [
|
||||
'Hosting requirements assessment',
|
||||
'Server configuration and setup',
|
||||
'Security implementation',
|
||||
'Backup system configuration',
|
||||
'Ongoing monitoring and maintenance'
|
||||
]
|
||||
};
|
||||
case 'custom':
|
||||
return {
|
||||
benefits: [
|
||||
'Flexible solutions tailored to your unique business needs',
|
||||
'Professional project management and documentation',
|
||||
'Clear communication and consultation throughout the process',
|
||||
'Integration with existing systems and workflows',
|
||||
'Scalable and future-proof implementations',
|
||||
'Support for requirements beyond our standard services'
|
||||
],
|
||||
process: [
|
||||
'Initial consultation and requirements gathering',
|
||||
'Feasibility study and stakeholder alignment',
|
||||
'Detailed project planning with all involved parties',
|
||||
'Phased implementation with regular checkpoints',
|
||||
'Thorough testing and quality assurance',
|
||||
'Post-implementation support and maintenance'
|
||||
],
|
||||
additionalInfo: `While we offer standardized services for common IT needs, we understand that every business is unique. We're open to discussing and supporting custom IT projects that may fall outside our standard service offerings. Our professional approach ensures that all stakeholders are involved in the consultation, planning, and implementation phases. This collaborative process helps us deliver solutions that truly meet your specific requirements.`
|
||||
};
|
||||
default:
|
||||
return {
|
||||
benefits: [],
|
||||
process: []
|
||||
};
|
||||
}
|
||||
};
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={`${t('nav.services')} | ${t('meta.title')}`}
|
||||
description="Comprehensive IT services for small businesses: Microsoft 365 support, networking solutions, web hosting, and custom IT projects."
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<!-- Services Hero -->
|
||||
<section class="py-20 bg-gradient-to-br from-background via-background to-muted">
|
||||
<div class="container-custom">
|
||||
<div class="text-center max-w-4xl mx-auto animate-on-scroll">
|
||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6">
|
||||
{t('services.title')}
|
||||
</h1>
|
||||
<p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
|
||||
{t('services.subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Detailed Services -->
|
||||
<section class="py-20 bg-background">
|
||||
<div class="container-custom">
|
||||
<div class="space-y-32">
|
||||
{SERVICES.map((service, index) => {
|
||||
const details = getServiceDetails(service.id);
|
||||
return (
|
||||
<div
|
||||
id={service.id}
|
||||
class={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll ${index % 2 === 1 ? 'lg:grid-flow-col-reverse' : ''}`}
|
||||
>
|
||||
<!-- Service content - Left side -->
|
||||
<div>
|
||||
<div class="text-5xl mb-4">{service.icon}</div>
|
||||
<h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-4">
|
||||
{t(service.titleKey)}
|
||||
</h2>
|
||||
<p class="text-lg text-muted-foreground mb-8 leading-relaxed">
|
||||
{t(service.descriptionKey)}
|
||||
</p>
|
||||
|
||||
{service.id === 'custom' && (
|
||||
<div class="mb-8 p-4 bg-primary/5 rounded-lg border border-primary/10">
|
||||
<p class="text-muted-foreground leading-relaxed">
|
||||
{details.additionalInfo}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<!-- Key Benefits -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-foreground mb-4">Key Benefits</h3>
|
||||
<ul class="space-y-3">
|
||||
{details.benefits.map((benefit) => (
|
||||
<li class="flex items-start">
|
||||
<svg class="h-5 w-5 mt-1 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
<span class="text-foreground">{benefit}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Our Process -->
|
||||
<div class="mb-8">
|
||||
<h3 class="text-xl font-semibold text-foreground mb-4">Our Process</h3>
|
||||
<ul class="space-y-3">
|
||||
{details.process.map((step, stepIndex) => (
|
||||
<li class="flex items-start">
|
||||
<div class="flex-shrink-0 h-6 w-6 rounded-full bg-primary/10 text-primary flex items-center justify-center mr-3 mt-0.5">
|
||||
{stepIndex + 1}
|
||||
</div>
|
||||
<span class="text-foreground">{step}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- CTA button -->
|
||||
<a
|
||||
href={`/${lang === 'en' ? '' : lang}/contact`}
|
||||
class="btn-primary px-6 py-3 rounded-lg inline-flex items-center group"
|
||||
>
|
||||
Get Started
|
||||
<svg class="h-4 w-4 ml-2 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Service features - Right side -->
|
||||
<div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5">
|
||||
<div class="space-y-6">
|
||||
<div class="text-center mb-8">
|
||||
<div class="text-6xl mb-4 opacity-20">{service.icon}</div>
|
||||
<h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3>
|
||||
</div>
|
||||
|
||||
{service.features.map((feature) => (
|
||||
<div class="bg-background/50 rounded-lg p-4">
|
||||
<div class="flex items-start">
|
||||
<svg class="h-5 w-5 mt-0.5 mr-3 text-primary flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
<div>
|
||||
<h4 class="font-medium text-foreground mb-1">{t(feature)}</h4>
|
||||
<p class="text-sm text-muted-foreground">
|
||||
{/* Add feature descriptions based on the feature key */}
|
||||
{feature.includes('migrations') && 'Seamless data transfer with zero downtime'}
|
||||
{feature.includes('apps') && 'Full setup and optimization of Office applications'}
|
||||
{feature.includes('teams') && 'Custom Teams environment configuration'}
|
||||
{feature.includes('sharepoint') && 'Document management and collaboration setup'}
|
||||
{feature.includes('admin') && 'Complete admin portal configuration'}
|
||||
{feature.includes('automation') && 'Custom workflow automation solutions'}
|
||||
{feature.includes('monitoring') && 'Proactive system monitoring and alerts'}
|
||||
{feature.includes('maintenance') && 'Regular updates and maintenance tasks'}
|
||||
{feature.includes('optimization') && 'Performance tuning and improvements'}
|
||||
{feature.includes('ubiquiti') && 'Expert Ubiquiti/UniFi implementation'}
|
||||
{feature.includes('infrastructure') && 'Enterprise-grade network setup'}
|
||||
{feature.includes('security') && 'Advanced security measures'}
|
||||
{feature.includes('webhosting') && 'High-performance hosting solutions'}
|
||||
{feature.includes('domains') && 'Complete domain management'}
|
||||
{feature.includes('ssl') && 'SSL certificate installation and renewal'}
|
||||
{feature.includes('backup') && 'Automated backup and recovery'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Why Choose Us -->
|
||||
<section class="py-20 bg-muted/30">
|
||||
<div class="container-custom">
|
||||
<div class="text-center mb-16 animate-on-scroll">
|
||||
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
|
||||
Why Choose Tiber365?
|
||||
</h2>
|
||||
<p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
|
||||
We're dedicated to providing reliable, professional IT services that help your business thrive.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<div class="card p-6 text-center animate-on-scroll">
|
||||
<div class="text-4xl mb-4">⚡</div>
|
||||
<h3 class="text-xl font-semibold text-foreground mb-3">Fast Response</h3>
|
||||
<p class="text-muted-foreground">Quick turnaround times and 24/7 support when you need it most.</p>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s">
|
||||
<div class="text-4xl mb-4">🎯</div>
|
||||
<h3 class="text-xl font-semibold text-foreground mb-3">Expert Knowledge</h3>
|
||||
<p class="text-muted-foreground">Years of experience with Microsoft 365, networking, and modern IT solutions.</p>
|
||||
</div>
|
||||
|
||||
<div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s">
|
||||
<div class="text-4xl mb-4">💼</div>
|
||||
<h3 class="text-xl font-semibold text-foreground mb-3">Business Focus</h3>
|
||||
<p class="text-muted-foreground">We understand small business needs and provide cost-effective solutions.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<CTA />
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
23
src/pages/about.astro
Normal file
23
src/pages/about.astro
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
// Client-side redirect to English about page
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Redirecting...</title>
|
||||
<meta http-equiv="refresh" content="0;url=/en/about" />
|
||||
<link rel="canonical" href="/en/about" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;">
|
||||
<div style="text-align: center;">
|
||||
<h1>Redirecting...</h1>
|
||||
<p>If you are not redirected automatically, <a href="/en/about">click here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.location.href = '/en/about';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
23
src/pages/contact.astro
Normal file
23
src/pages/contact.astro
Normal file
@@ -0,0 +1,23 @@
|
||||
---
|
||||
// Client-side redirect to English contact page
|
||||
---
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Redirecting...</title>
|
||||
<meta http-equiv="refresh" content="0;url=/en/contact" />
|
||||
<link rel="canonical" href="/en/contact" />
|
||||
</head>
|
||||
<body>
|
||||
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;">
|
||||
<div style="text-align: center;">
|
||||
<h1>Redirecting...</h1>
|
||||
<p>If you are not redirected automatically, <a href="/en/contact">click here</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
window.location.href = '/en/contact';
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user