Refactor site layout and enhance content structure by adding a subscription form and footer details across multiple languages. Remove unused CSS files and ensure proper localization in JSON files. Update site configuration for improved navigation and accessibility.
This commit is contained in:
File diff suppressed because one or more lines are too long
@@ -9,7 +9,7 @@ export default defineConfig({
|
|||||||
defaultLocale: 'en',
|
defaultLocale: 'en',
|
||||||
locales: ['en', 'nl', 'de', 'fr'],
|
locales: ['en', 'nl', 'de', 'fr'],
|
||||||
routing: {
|
routing: {
|
||||||
prefixDefaultLocale: true,
|
prefixDefaultLocale: false,
|
||||||
redirectToDefaultLocale: false
|
redirectToDefaultLocale: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -41,6 +41,12 @@ export default defineConfig({
|
|||||||
key: fs.readFileSync('./localhost-key.pem'),
|
key: fs.readFileSync('./localhost-key.pem'),
|
||||||
cert: fs.readFileSync('./localhost.pem')
|
cert: fs.readFileSync('./localhost.pem')
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@config': '/src/site.config.ts',
|
||||||
|
'@': '/src'
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
4
dist/404.html
vendored
4
dist/404.html
vendored
File diff suppressed because one or more lines are too long
1
dist/_astro/about.BkthZUHi.css
vendored
Normal file
1
dist/_astro/about.BkthZUHi.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/_astro/about.D_EvXghT.css
vendored
1
dist/_astro/about.D_EvXghT.css
vendored
File diff suppressed because one or more lines are too long
1
dist/_astro/about.DiFGXuh7.css
vendored
Normal file
1
dist/_astro/about.DiFGXuh7.css
vendored
Normal file
File diff suppressed because one or more lines are too long
1
dist/_astro/about.UzmqI4ov.css
vendored
1
dist/_astro/about.UzmqI4ov.css
vendored
File diff suppressed because one or more lines are too long
29
dist/about/index.html
vendored
29
dist/about/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/blog/index.html
vendored
4
dist/blog/index.html
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
39
dist/contact/index.html
vendored
39
dist/contact/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/de/404/index.html
vendored
4
dist/de/404/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/de/about/index.html
vendored
4
dist/de/about/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/de/blog/index.html
vendored
4
dist/de/blog/index.html
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
dist/de/contact/index.html
vendored
4
dist/de/contact/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/de/index.html
vendored
4
dist/de/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/de/privacy/index.html
vendored
4
dist/de/privacy/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/de/services/index.html
vendored
4
dist/de/services/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/de/terms/index.html
vendored
4
dist/de/terms/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/en/404/index.html
vendored
4
dist/en/404/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/en/about/index.html
vendored
4
dist/en/about/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/en/blog/index.html
vendored
4
dist/en/blog/index.html
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
dist/en/contact/index.html
vendored
4
dist/en/contact/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/en/index.html
vendored
4
dist/en/index.html
vendored
File diff suppressed because one or more lines are too long
2
dist/en/privacy/index.html
vendored
2
dist/en/privacy/index.html
vendored
@@ -1 +1 @@
|
|||||||
<!doctype html><title>Redirecting to: /privacy</title><meta http-equiv="refresh" content="2;url=/privacy"><meta name="robots" content="noindex"><link rel="canonical" href="https://tiber365.it/privacy"><body> <a href="/privacy">Redirecting from <code>/en/privacy/</code> to <code>/privacy</code></a></body>
|
<!doctype html><title>Redirecting to: /privacy/</title><meta http-equiv="refresh" content="2;url=/privacy/"><meta name="robots" content="noindex"><link rel="canonical" href="https://tiber365.it/privacy/"><body> <a href="/privacy/">Redirecting from <code>/en/privacy/</code> to <code>/privacy/</code></a></body>
|
||||||
4
dist/en/services/index.html
vendored
4
dist/en/services/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/en/terms/index.html
vendored
4
dist/en/terms/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/fr/404/index.html
vendored
4
dist/fr/404/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/fr/about/index.html
vendored
4
dist/fr/about/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/fr/blog/index.html
vendored
4
dist/fr/blog/index.html
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
dist/fr/contact/index.html
vendored
4
dist/fr/contact/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/fr/index.html
vendored
4
dist/fr/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/fr/privacy/index.html
vendored
4
dist/fr/privacy/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/fr/services/index.html
vendored
4
dist/fr/services/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/fr/terms/index.html
vendored
4
dist/fr/terms/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/index.html
vendored
4
dist/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/nl/404/index.html
vendored
4
dist/nl/404/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/nl/about/index.html
vendored
4
dist/nl/about/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/nl/blog/index.html
vendored
4
dist/nl/blog/index.html
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
4
dist/nl/contact/index.html
vendored
4
dist/nl/contact/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/nl/index.html
vendored
4
dist/nl/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/nl/privacy/index.html
vendored
4
dist/nl/privacy/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/nl/services/index.html
vendored
4
dist/nl/services/index.html
vendored
File diff suppressed because one or more lines are too long
4
dist/nl/terms/index.html
vendored
4
dist/nl/terms/index.html
vendored
File diff suppressed because one or more lines are too long
22
dist/services/index.html
vendored
22
dist/services/index.html
vendored
File diff suppressed because one or more lines are too long
2
node_modules/.astro/data-store.json
generated
vendored
2
node_modules/.astro/data-store.json
generated
vendored
File diff suppressed because one or more lines are too long
12
node_modules/.vite/deps/_metadata.json
generated
vendored
12
node_modules/.vite/deps/_metadata.json
generated
vendored
@@ -1,25 +1,25 @@
|
|||||||
{
|
{
|
||||||
"hash": "0d2c9453",
|
"hash": "bc72b27b",
|
||||||
"configHash": "636dc1d0",
|
"configHash": "a43ebfd5",
|
||||||
"lockfileHash": "9529ee3f",
|
"lockfileHash": "9529ee3f",
|
||||||
"browserHash": "0f9ac100",
|
"browserHash": "0fff2eb6",
|
||||||
"optimized": {
|
"optimized": {
|
||||||
"astro > cssesc": {
|
"astro > cssesc": {
|
||||||
"src": "../../cssesc/cssesc.js",
|
"src": "../../cssesc/cssesc.js",
|
||||||
"file": "astro___cssesc.js",
|
"file": "astro___cssesc.js",
|
||||||
"fileHash": "eff02a83",
|
"fileHash": "72f6b37f",
|
||||||
"needsInterop": true
|
"needsInterop": true
|
||||||
},
|
},
|
||||||
"astro > aria-query": {
|
"astro > aria-query": {
|
||||||
"src": "../../aria-query/lib/index.js",
|
"src": "../../aria-query/lib/index.js",
|
||||||
"file": "astro___aria-query.js",
|
"file": "astro___aria-query.js",
|
||||||
"fileHash": "4cb8308d",
|
"fileHash": "f966efeb",
|
||||||
"needsInterop": true
|
"needsInterop": true
|
||||||
},
|
},
|
||||||
"astro > axobject-query": {
|
"astro > axobject-query": {
|
||||||
"src": "../../axobject-query/lib/index.js",
|
"src": "../../axobject-query/lib/index.js",
|
||||||
"file": "astro___axobject-query.js",
|
"file": "astro___axobject-query.js",
|
||||||
"fileHash": "45245bd3",
|
"fileHash": "d77c0233",
|
||||||
"needsInterop": true
|
"needsInterop": true
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -31,55 +31,165 @@
|
|||||||
"title": "Our Services",
|
"title": "Our Services",
|
||||||
"subtitle": "Comprehensive IT solutions tailored to your business needs",
|
"subtitle": "Comprehensive IT solutions tailored to your business needs",
|
||||||
"viewAll": "View All Services",
|
"viewAll": "View All Services",
|
||||||
|
"hero": {
|
||||||
|
"badge": "Our Services",
|
||||||
|
"title": "Professional IT Solutions",
|
||||||
|
"subtitle": "Comprehensive IT services designed to help your business thrive in the digital age"
|
||||||
|
},
|
||||||
|
"meta": {
|
||||||
|
"description": "Professional IT services including Microsoft 365 support, networking solutions, web hosting, and custom IT projects for small businesses and freelancers."
|
||||||
|
},
|
||||||
|
"featuresTitle": "Key Features",
|
||||||
|
"benefitsTitle": "Benefits",
|
||||||
|
"learnMore": "Learn More",
|
||||||
|
"process": {
|
||||||
|
"title": "Our Process",
|
||||||
|
"subtitle": "A proven approach to delivering exceptional IT solutions",
|
||||||
|
"discovery": {
|
||||||
|
"title": "Discovery",
|
||||||
|
"description": "We analyze your current setup and identify opportunities for improvement"
|
||||||
|
},
|
||||||
|
"planning": {
|
||||||
|
"title": "Planning",
|
||||||
|
"description": "We create a detailed roadmap tailored to your specific needs"
|
||||||
|
},
|
||||||
|
"implementation": {
|
||||||
|
"title": "Implementation",
|
||||||
|
"description": "We execute the plan with minimal disruption to your business"
|
||||||
|
},
|
||||||
|
"support": {
|
||||||
|
"title": "Support",
|
||||||
|
"description": "We provide ongoing support and maintenance to ensure success"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"whyChoose": {
|
||||||
|
"title": "Why Choose Tiber365?",
|
||||||
|
"expertise": {
|
||||||
|
"title": "Expert Knowledge",
|
||||||
|
"description": "Years of experience with Microsoft 365, networking, and IT infrastructure"
|
||||||
|
},
|
||||||
|
"support": {
|
||||||
|
"title": "24/7 Support",
|
||||||
|
"description": "Round-the-clock support to keep your business running smoothly"
|
||||||
|
},
|
||||||
|
"customization": {
|
||||||
|
"title": "Custom Solutions",
|
||||||
|
"description": "Tailored solutions designed specifically for your business needs"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"cta": {
|
||||||
|
"title": "Ready to Get Started?",
|
||||||
|
"description": "Let's discuss how we can help improve your IT infrastructure",
|
||||||
|
"button": "Contact Us Today"
|
||||||
|
},
|
||||||
"microsoft365": {
|
"microsoft365": {
|
||||||
"title": "Microsoft 365 Support",
|
"title": "Microsoft 365 Support",
|
||||||
"description": "Complete Microsoft 365 management including email migrations, Office apps, Teams, SharePoint, and admin center configuration.",
|
"description": "Complete Microsoft 365 management including email migrations, Office apps, Teams, SharePoint, and admin center configuration.",
|
||||||
|
"benefits": {
|
||||||
|
"seamlessTransition": "Seamless migration with zero downtime",
|
||||||
|
"zeroDowntime": "Zero downtime during implementation",
|
||||||
|
"enhancedSecurity": "Enhanced security and compliance",
|
||||||
|
"costEfficiency": "Cost-effective cloud solutions",
|
||||||
|
"expertSupport": "Expert support and training"
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"migrations": "Email migrations & setup",
|
"migrations": "Email migrations & setup",
|
||||||
"apps": "Office applications support",
|
"apps": "Office applications support",
|
||||||
"teams": "Microsoft Teams deployment",
|
"teams": "Microsoft Teams deployment",
|
||||||
"sharepoint": "SharePoint configuration",
|
"sharepoint": "SharePoint configuration",
|
||||||
"admin": "Admin center management"
|
"admin": "Admin center management",
|
||||||
|
"emailMigration": "Email migration and setup",
|
||||||
|
"teamsSetup": "Microsoft Teams configuration",
|
||||||
|
"sharepointConfiguration": "SharePoint site setup",
|
||||||
|
"onedriveSync": "OneDrive synchronization",
|
||||||
|
"securityCompliance": "Security and compliance setup"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"management": {
|
"management": {
|
||||||
"title": "Full M365 Management",
|
"title": "Full M365 Management",
|
||||||
"description": "Comprehensive Microsoft 365 management and automation to keep your business running smoothly.",
|
"description": "Comprehensive Microsoft 365 management and automation to keep your business running smoothly.",
|
||||||
|
"benefits": {
|
||||||
|
"proactiveMonitoring": "Proactive system monitoring",
|
||||||
|
"automatedWorkflows": "Automated workflow processes",
|
||||||
|
"enhancedSecurity": "Enhanced security measures",
|
||||||
|
"performanceOptimization": "Performance optimization",
|
||||||
|
"costEffective": "Cost-effective management"
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"automation": "Workflow automation",
|
"automation": "Workflow automation",
|
||||||
"monitoring": "System monitoring",
|
"monitoring": "System monitoring",
|
||||||
"maintenance": "Regular maintenance",
|
"maintenance": "Regular maintenance",
|
||||||
"optimization": "Performance optimization"
|
"optimization": "Performance optimization",
|
||||||
|
"environmentAssessment": "Environment assessment",
|
||||||
|
"automationIdentification": "Automation opportunities",
|
||||||
|
"monitoringSetup": "Monitoring system setup",
|
||||||
|
"maintenanceScheduling": "Maintenance scheduling",
|
||||||
|
"continuousImprovement": "Continuous improvement"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"networking": {
|
"networking": {
|
||||||
"title": "Networking & Infrastructure",
|
"title": "Networking & Infrastructure",
|
||||||
"description": "Professional networking solutions using Ubiquiti/Unifi equipment for reliable and secure connectivity.",
|
"description": "Professional networking solutions using Ubiquiti/Unifi equipment for reliable and secure connectivity.",
|
||||||
|
"benefits": {
|
||||||
|
"enterpriseGrade": "Enterprise-grade solutions",
|
||||||
|
"highPerformance": "High-performance networking",
|
||||||
|
"advancedSecurity": "Advanced security features",
|
||||||
|
"reliableConnectivity": "Reliable connectivity",
|
||||||
|
"scalableArchitecture": "Scalable architecture"
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"ubiquiti": "Ubiquiti/Unifi solutions",
|
"ubiquiti": "Ubiquiti/Unifi solutions",
|
||||||
"infrastructure": "Network infrastructure",
|
"infrastructure": "Network infrastructure",
|
||||||
"security": "Network security",
|
"security": "Network security",
|
||||||
"monitoring": "Network monitoring"
|
"monitoring": "Network monitoring",
|
||||||
|
"requirementsAnalysis": "Requirements analysis",
|
||||||
|
"infrastructureDesign": "Infrastructure design",
|
||||||
|
"equipmentDeployment": "Equipment deployment",
|
||||||
|
"securityImplementation": "Security implementation",
|
||||||
|
"performanceOptimization": "Performance optimization"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"hosting": {
|
"hosting": {
|
||||||
"title": "Web Hosting & Management",
|
"title": "Web Hosting & Management",
|
||||||
"description": "Reliable web hosting services with complete website management and maintenance.",
|
"description": "Reliable web hosting services with complete website management and maintenance.",
|
||||||
|
"benefits": {
|
||||||
|
"highPerformance": "High-performance hosting",
|
||||||
|
"secureInfrastructure": "Secure infrastructure",
|
||||||
|
"automatedBackups": "Automated backups",
|
||||||
|
"sslManagement": "SSL certificate management",
|
||||||
|
"domainAdministration": "Domain administration"
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"webhosting": "Premium web hosting",
|
"webhosting": "Premium web hosting",
|
||||||
"domains": "Domain management",
|
"domains": "Domain management",
|
||||||
"ssl": "SSL certificates",
|
"ssl": "SSL certificates",
|
||||||
"backup": "Automated backups"
|
"backup": "Automated backups",
|
||||||
|
"requirementsAssessment": "Requirements assessment",
|
||||||
|
"serverConfiguration": "Server configuration",
|
||||||
|
"securityImplementation": "Security implementation",
|
||||||
|
"backupConfiguration": "Backup configuration",
|
||||||
|
"monitoringMaintenance": "Monitoring and maintenance"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"custom": {
|
"custom": {
|
||||||
"title": "Custom IT Projects",
|
"title": "Custom IT Projects",
|
||||||
"description": "Tailored IT solutions and custom projects designed specifically for your business requirements.",
|
"description": "Tailored IT solutions and custom projects designed specifically for your business requirements.",
|
||||||
|
"benefits": {
|
||||||
|
"flexibleSolutions": "Flexible solutions",
|
||||||
|
"professionalManagement": "Professional project management",
|
||||||
|
"clearCommunication": "Clear communication",
|
||||||
|
"systemIntegration": "System integration",
|
||||||
|
"scalableImplementation": "Scalable implementation"
|
||||||
|
},
|
||||||
"features": {
|
"features": {
|
||||||
"consultation": "IT consultation",
|
"consultation": "IT consultation",
|
||||||
"development": "Custom development",
|
"development": "Custom development",
|
||||||
"integration": "System integration",
|
"integration": "System integration",
|
||||||
"support": "Ongoing support"
|
"support": "Ongoing support",
|
||||||
|
"feasibilityStudy": "Feasibility study",
|
||||||
|
"projectPlanning": "Project planning",
|
||||||
|
"phasedImplementation": "Phased implementation",
|
||||||
|
"qualityAssurance": "Quality assurance"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
BIN
src/pages/[lang]/.DS_Store
vendored
Normal file
BIN
src/pages/[lang]/.DS_Store
vendored
Normal file
Binary file not shown.
@@ -1,23 +1,285 @@
|
|||||||
---
|
---
|
||||||
// Client-side redirect to English about page
|
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 } from '../utils/i18n';
|
||||||
|
|
||||||
|
const t = await useTranslations('en');
|
||||||
|
|
||||||
|
// 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'
|
||||||
|
}
|
||||||
|
];
|
||||||
---
|
---
|
||||||
<html lang="en">
|
|
||||||
<head>
|
<BaseLayout
|
||||||
<meta charset="utf-8" />
|
title={`${t("nav.about")} | ${t("meta.title")}`}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
description={t("about.meta.description")}
|
||||||
<title>Redirecting...</title>
|
keywords={t("meta.keywords")}
|
||||||
<meta http-equiv="refresh" content="0;url=/en/about" />
|
>
|
||||||
<link rel="canonical" href="/en/about" />
|
<Header />
|
||||||
</head>
|
|
||||||
<body>
|
<main>
|
||||||
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;">
|
<!-- Hero Section -->
|
||||||
<div style="text-align: center;">
|
<section class="relative bg-gradient-to-br from-primary/5 via-background to-secondary/5 py-20">
|
||||||
<h1>Redirecting...</h1>
|
<div class="container mx-auto px-4">
|
||||||
<p>If you are not redirected automatically, <a href="/en/about">click here</a>.</p>
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
|
<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>
|
||||||
|
<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>
|
||||||
|
<p class="text-responsive-base text-muted leading-relaxed mb-12">
|
||||||
|
{t('about.hero.subtitle')}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Stats -->
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-2">5+</div>
|
||||||
|
<div class="text-muted">{t('about.experience')}</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-2">100+</div>
|
||||||
|
<div class="text-muted">{t('about.clients')}</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-3xl font-bold text-primary mb-2">500+</div>
|
||||||
|
<div class="text-muted">{t('about.projects')}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<script>
|
|
||||||
window.location.href = '/en/about';
|
<!-- Mission & Vision -->
|
||||||
</script>
|
<section class="py-20 bg-background">
|
||||||
</body>
|
<div class="container mx-auto px-4">
|
||||||
</html>
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold text-foreground mb-6">{t('about.mission')}</h2>
|
||||||
|
<p class="text-lg text-muted leading-relaxed mb-6">
|
||||||
|
{t('about.mission.vision')}
|
||||||
|
</p>
|
||||||
|
<p class="text-muted leading-relaxed">
|
||||||
|
{t('about.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-2xl p-8">
|
||||||
|
<h3 class="text-2xl font-bold text-foreground mb-4">{t('about.values.subtitle')}</h3>
|
||||||
|
<div class="space-y-4">
|
||||||
|
{values.map(value => (
|
||||||
|
<div class="flex items-start gap-3">
|
||||||
|
<span class="text-2xl">{value.icon}</span>
|
||||||
|
<div>
|
||||||
|
<h4 class="font-semibold text-foreground">{t(value.titleKey)}</h4>
|
||||||
|
<p class="text-sm text-muted">{t(value.descriptionKey)}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Timeline -->
|
||||||
|
<section class="py-20 bg-gradient-to-br from-secondary/5 to-primary/5">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||||
|
<h2 class="text-3xl font-bold text-foreground mb-4">{t('about.timeline.title')}</h2>
|
||||||
|
<p class="text-lg text-muted">{t('about.timeline.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="max-w-3xl mx-auto">
|
||||||
|
<div class="relative">
|
||||||
|
<!-- Timeline line -->
|
||||||
|
<div class="absolute left-8 top-0 bottom-0 w-0.5 bg-primary/20"></div>
|
||||||
|
|
||||||
|
{timeline.map((item, index) => (
|
||||||
|
<div class="relative flex items-start gap-8 mb-12 last:mb-0">
|
||||||
|
<div class="flex-shrink-0 w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-lg">
|
||||||
|
{item.year}
|
||||||
|
</div>
|
||||||
|
<div class="flex-1 pt-2">
|
||||||
|
<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>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Team -->
|
||||||
|
<section class="py-20 bg-background">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||||
|
<h2 class="text-3xl font-bold text-foreground mb-4">{t('about.team.title')}</h2>
|
||||||
|
<p class="text-lg text-muted">{t('about.team.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{teamMembers.map(member => (
|
||||||
|
<div class="bg-card rounded-2xl p-8 text-center border border-border/50 hover:border-primary/20 transition-colors">
|
||||||
|
<div class="w-24 h-24 bg-gradient-to-br from-primary to-secondary rounded-full mx-auto mb-6 flex items-center justify-center text-white text-2xl font-bold">
|
||||||
|
{member.name.split(' ').map(n => n[0]).join('')}
|
||||||
|
</div>
|
||||||
|
<h3 class="text-xl font-bold text-foreground mb-2">{member.name}</h3>
|
||||||
|
<p class="text-primary font-medium mb-4">{t(member.role)}</p>
|
||||||
|
<p class="text-muted mb-6">{t(member.bio)}</p>
|
||||||
|
<div class="flex flex-wrap gap-2 justify-center mb-6">
|
||||||
|
{member.specialties.map(specialty => (
|
||||||
|
<span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-full">
|
||||||
|
{specialty}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<a href={member.linkedin} class="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors">
|
||||||
|
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
{t('about.team.connect')}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Certifications -->
|
||||||
|
<section class="py-20 bg-gradient-to-br from-primary/5 to-secondary/5">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||||
|
<h2 class="text-3xl font-bold text-foreground mb-4">{t('about.certifications.title')}</h2>
|
||||||
|
<p class="text-lg text-muted">{t('about.certifications.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
<div class="bg-card rounded-2xl p-8 text-center border border-border/50 hover:border-primary/20 transition-colors">
|
||||||
|
<div class="w-16 h-16 bg-blue-100 rounded-full mx-auto mb-6 flex items-center justify-center">
|
||||||
|
<svg class="w-8 h-8 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('about.certifications.microsoft.title')}</h3>
|
||||||
|
<p class="text-muted text-sm">{t('about.certifications.microsoft.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-card rounded-2xl p-8 text-center border border-border/50 hover:border-primary/20 transition-colors">
|
||||||
|
<div class="w-16 h-16 bg-green-100 rounded-full mx-auto mb-6 flex items-center justify-center">
|
||||||
|
<svg class="w-8 h-8 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('about.certifications.ubiquiti.title')}</h3>
|
||||||
|
<p class="text-muted text-sm">{t('about.certifications.ubiquiti.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-card rounded-2xl p-8 text-center border border-border/50 hover:border-primary/20 transition-colors">
|
||||||
|
<div class="w-16 h-16 bg-red-100 rounded-full mx-auto mb-6 flex items-center justify-center">
|
||||||
|
<svg class="w-8 h-8 text-red-600" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('about.certifications.security.title')}</h3>
|
||||||
|
<p class="text-muted text-sm">{t('about.certifications.security.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-card rounded-2xl p-8 text-center border border-border/50 hover:border-primary/20 transition-colors">
|
||||||
|
<div class="w-16 h-16 bg-purple-100 rounded-full mx-auto mb-6 flex items-center justify-center">
|
||||||
|
<svg class="w-8 h-8 text-purple-600" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('about.certifications.cloud.title')}</h3>
|
||||||
|
<p class="text-muted text-sm">{t('about.certifications.cloud.subtitle')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<CTA />
|
||||||
|
<Footer />
|
||||||
|
</BaseLayout>
|
||||||
@@ -1,23 +1,138 @@
|
|||||||
---
|
---
|
||||||
// Client-side redirect to English contact page
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
import Header from '../components/Header.astro';
|
||||||
|
import Footer from '../components/Footer.astro';
|
||||||
|
import ContactForm from '../components/ContactForm.astro';
|
||||||
|
import { useTranslations } from '../utils/i18n';
|
||||||
|
|
||||||
|
const t = await useTranslations('en');
|
||||||
---
|
---
|
||||||
<html lang="en">
|
|
||||||
<head>
|
<BaseLayout
|
||||||
<meta charset="utf-8" />
|
title={`${t("nav.contact")} | ${t("meta.title")}`}
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
description={t("contact.meta.description")}
|
||||||
<title>Redirecting...</title>
|
keywords={t("meta.keywords")}
|
||||||
<meta http-equiv="refresh" content="0;url=/en/contact" />
|
>
|
||||||
<link rel="canonical" href="/en/contact" />
|
<Header />
|
||||||
</head>
|
|
||||||
<body>
|
<main>
|
||||||
<div style="display: flex; justify-content: center; align-items: center; height: 100vh; font-family: system-ui, sans-serif;">
|
<!-- Hero Section -->
|
||||||
<div style="text-align: center;">
|
<section class="relative bg-gradient-to-br from-primary/5 via-background to-secondary/5 py-20">
|
||||||
<h1>Redirecting...</h1>
|
<div class="container mx-auto px-4">
|
||||||
<p>If you are not redirected automatically, <a href="/en/contact">click here</a>.</p>
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
|
<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="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" clip-rule="evenodd"/>
|
||||||
|
<path fill-rule="evenodd" d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
{t('contact.hero.badge')}
|
||||||
|
</div>
|
||||||
|
<h1 class="text-responsive-xl font-bold text-foreground mb-6">
|
||||||
|
{t('contact.hero.title')}
|
||||||
|
</h1>
|
||||||
|
<p class="text-responsive-base text-muted leading-relaxed mb-12">
|
||||||
|
{t('contact.hero.subtitle')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
<script>
|
|
||||||
window.location.href = '/en/contact';
|
<!-- Contact Form & Info -->
|
||||||
</script>
|
<section class="py-20 bg-background">
|
||||||
</body>
|
<div class="container mx-auto px-4">
|
||||||
</html>
|
<div class="max-w-6xl mx-auto">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
||||||
|
<!-- Contact Form -->
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold text-foreground mb-6">{t('contact.form.title')}</h2>
|
||||||
|
<ContactForm />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Contact Information -->
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold text-foreground mb-6">{t('contact.info.title')}</h2>
|
||||||
|
<div class="space-y-8">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-2">{t('contact.info.address.title')}</h3>
|
||||||
|
<p class="text-muted">{t('contact.info.address.value')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
|
||||||
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-2">{t('contact.info.email.title')}</h3>
|
||||||
|
<a href="mailto:info@tiber365.it" class="text-primary hover:text-primary/80 transition-colors">
|
||||||
|
info@tiber365.it
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-2">{t('contact.info.phone.title')}</h3>
|
||||||
|
<a href="tel:+31612345678" class="text-primary hover:text-primary/80 transition-colors">
|
||||||
|
+31 6 12345678
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-2">{t('contact.info.hours.title')}</h3>
|
||||||
|
<p class="text-muted">{t('contact.info.hours.value')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Social Links -->
|
||||||
|
<div class="mt-12">
|
||||||
|
<h3 class="text-xl font-bold text-foreground mb-4">{t('contact.social.title')}</h3>
|
||||||
|
<div class="flex gap-4">
|
||||||
|
<a href="#" class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M16.338 16.338H13.67V12.16c0-.995-.017-2.277-1.387-2.277-1.39 0-1.601 1.086-1.601 2.207v4.248H8.014v-8.59h2.559v1.174h.037c.356-.675 1.227-1.387 2.526-1.387 2.703 0 3.203 1.778 3.203 4.092v4.711zM5.005 6.575a1.548 1.548 0 11-.003-3.096 1.548 1.548 0 01.003 3.096zm-1.337 9.763H6.34v-8.59H3.667v8.59zM17.668 1H2.328C1.595 1 1 1.581 1 2.298v15.403C1 18.418 1.595 19 2.328 19h15.34c.734 0 1.332-.582 1.332-1.299V2.298C19 1.581 18.402 1 17.668 1z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path d="M6.29 18.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0020 3.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.073 4.073 0 01.8 7.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 010 16.407a11.616 11.616 0 006.29 1.84"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
<a href="#" class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary hover:bg-primary hover:text-white transition-colors">
|
||||||
|
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M12.395 2.553a1 1 0 00-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 00-.613 3.58 2.64 2.64 0 01-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 005.05 6.05 6.981 6.981 0 003 11a7 7 0 1011.95-4.95c-.592-.591-.98-.985-1.348-1.467-.363-.476-.724-1.063-1.207-2.03zM12.12 15.12A3 3 0 017 13s.879.5 2.5.5c0-1 .5-4 1.25-4.5.5 1 .786 1.293 1.371 1.879A2.99 2.99 0 0113 13a2.99 2.99 0 01-.879 2.121z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<Footer />
|
||||||
|
</BaseLayout>
|
||||||
@@ -4,243 +4,184 @@ import Header from '../components/Header.astro';
|
|||||||
import Footer from '../components/Footer.astro';
|
import Footer from '../components/Footer.astro';
|
||||||
import CTA from '../components/CTA.astro';
|
import CTA from '../components/CTA.astro';
|
||||||
import { SERVICES } from '@config';
|
import { SERVICES } from '@config';
|
||||||
import { t } from '../utils/i18n';
|
import { useTranslations, localizePath } from '../utils/i18n';
|
||||||
|
|
||||||
|
const t = await useTranslations('en');
|
||||||
|
|
||||||
const getServiceDetails = (serviceId: string) => {
|
const getServiceDetails = (serviceId: string) => {
|
||||||
switch (serviceId) {
|
switch (serviceId) {
|
||||||
case 'microsoft365':
|
case 'microsoft365':
|
||||||
return {
|
return {
|
||||||
benefits: [
|
benefits: [
|
||||||
'Seamless transition to Microsoft 365 with expert guidance',
|
t('services.microsoft365.benefits.seamlessTransition'),
|
||||||
'Zero downtime email migrations and data transfer',
|
t('services.microsoft365.benefits.zeroDowntime'),
|
||||||
'Custom configuration of all Office applications',
|
t('services.microsoft365.benefits.enhancedSecurity'),
|
||||||
'Enhanced team collaboration through Microsoft Teams',
|
t('services.microsoft365.benefits.costEfficiency'),
|
||||||
'Secure document management with SharePoint',
|
t('services.microsoft365.benefits.expertSupport'),
|
||||||
'Streamlined admin center management'
|
],
|
||||||
|
features: [
|
||||||
|
t('services.microsoft365.features.emailMigration'),
|
||||||
|
t('services.microsoft365.features.teamsSetup'),
|
||||||
|
t('services.microsoft365.features.sharepointConfiguration'),
|
||||||
|
t('services.microsoft365.features.onedriveSync'),
|
||||||
|
t('services.microsoft365.features.securityCompliance'),
|
||||||
],
|
],
|
||||||
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':
|
case 'management':
|
||||||
return {
|
return {
|
||||||
benefits: [
|
benefits: [
|
||||||
'Proactive system monitoring and maintenance',
|
t('services.management.benefits.proactiveMonitoring'),
|
||||||
'Automated workflow implementation',
|
t('services.management.benefits.automatedWorkflows'),
|
||||||
'Enhanced security and compliance',
|
t('services.management.benefits.enhancedSecurity'),
|
||||||
'Regular performance optimization',
|
t('services.management.benefits.performanceOptimization'),
|
||||||
'Cost-effective resource utilization',
|
t('services.management.benefits.costEffective'),
|
||||||
'Reduced IT management overhead'
|
],
|
||||||
|
features: [
|
||||||
|
t('services.management.features.environmentAssessment'),
|
||||||
|
t('services.management.features.automationIdentification'),
|
||||||
|
t('services.management.features.monitoringSetup'),
|
||||||
|
t('services.management.features.maintenanceScheduling'),
|
||||||
|
t('services.management.features.continuousImprovement'),
|
||||||
],
|
],
|
||||||
process: [
|
|
||||||
'Environment assessment',
|
|
||||||
'Automation opportunity identification',
|
|
||||||
'Monitoring setup and configuration',
|
|
||||||
'Regular maintenance scheduling',
|
|
||||||
'Continuous improvement implementation'
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
case 'networking':
|
case 'networking':
|
||||||
return {
|
return {
|
||||||
benefits: [
|
benefits: [
|
||||||
'Enterprise-grade network infrastructure',
|
t('services.networking.benefits.enterpriseGrade'),
|
||||||
'High-performance Ubiquiti/UniFi solutions',
|
t('services.networking.benefits.highPerformance'),
|
||||||
'Advanced security implementation',
|
t('services.networking.benefits.advancedSecurity'),
|
||||||
'Reliable and fast connectivity',
|
t('services.networking.benefits.reliableConnectivity'),
|
||||||
'Scalable network architecture',
|
t('services.networking.benefits.scalableArchitecture'),
|
||||||
'Professional network monitoring'
|
],
|
||||||
|
features: [
|
||||||
|
t('services.networking.features.requirementsAnalysis'),
|
||||||
|
t('services.networking.features.infrastructureDesign'),
|
||||||
|
t('services.networking.features.equipmentDeployment'),
|
||||||
|
t('services.networking.features.securityImplementation'),
|
||||||
|
t('services.networking.features.performanceOptimization'),
|
||||||
],
|
],
|
||||||
process: [
|
|
||||||
'Network requirements analysis',
|
|
||||||
'Infrastructure design and planning',
|
|
||||||
'Equipment selection and deployment',
|
|
||||||
'Security implementation',
|
|
||||||
'Performance optimization'
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
case 'hosting':
|
case 'hosting':
|
||||||
return {
|
return {
|
||||||
benefits: [
|
benefits: [
|
||||||
'High-performance web hosting',
|
t('services.hosting.benefits.highPerformance'),
|
||||||
'Secure and reliable infrastructure',
|
t('services.hosting.benefits.secureInfrastructure'),
|
||||||
'Automated backup systems',
|
t('services.hosting.benefits.automatedBackups'),
|
||||||
'SSL certificate management',
|
t('services.hosting.benefits.sslManagement'),
|
||||||
'Domain name administration',
|
t('services.hosting.benefits.domainAdministration'),
|
||||||
'Regular maintenance and updates'
|
],
|
||||||
|
features: [
|
||||||
|
t('services.hosting.features.requirementsAssessment'),
|
||||||
|
t('services.hosting.features.serverConfiguration'),
|
||||||
|
t('services.hosting.features.securityImplementation'),
|
||||||
|
t('services.hosting.features.backupConfiguration'),
|
||||||
|
t('services.hosting.features.monitoringMaintenance'),
|
||||||
],
|
],
|
||||||
process: [
|
|
||||||
'Hosting requirements assessment',
|
|
||||||
'Server configuration and setup',
|
|
||||||
'Security implementation',
|
|
||||||
'Backup system configuration',
|
|
||||||
'Ongoing monitoring and maintenance'
|
|
||||||
]
|
|
||||||
};
|
};
|
||||||
case 'custom':
|
case 'custom':
|
||||||
return {
|
return {
|
||||||
benefits: [
|
benefits: [
|
||||||
'Flexible solutions tailored to your unique business needs',
|
t('services.custom.benefits.flexibleSolutions'),
|
||||||
'Professional project management and documentation',
|
t('services.custom.benefits.professionalManagement'),
|
||||||
'Clear communication and consultation throughout the process',
|
t('services.custom.benefits.clearCommunication'),
|
||||||
'Integration with existing systems and workflows',
|
t('services.custom.benefits.systemIntegration'),
|
||||||
'Scalable and future-proof implementations',
|
t('services.custom.benefits.scalableImplementation'),
|
||||||
'Support for requirements beyond our standard services'
|
|
||||||
],
|
],
|
||||||
process: [
|
features: [
|
||||||
'Initial consultation and requirements gathering',
|
t('services.custom.features.consultation'),
|
||||||
'Feasibility study and stakeholder alignment',
|
t('services.custom.features.feasibilityStudy'),
|
||||||
'Detailed project planning with all involved parties',
|
t('services.custom.features.projectPlanning'),
|
||||||
'Phased implementation with regular checkpoints',
|
t('services.custom.features.phasedImplementation'),
|
||||||
'Thorough testing and quality assurance',
|
t('services.custom.features.qualityAssurance'),
|
||||||
'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:
|
default:
|
||||||
return {
|
return { benefits: [], features: [] };
|
||||||
benefits: [],
|
|
||||||
process: []
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
---
|
---
|
||||||
|
|
||||||
<BaseLayout
|
<BaseLayout
|
||||||
title={`${t('nav.services')} | ${t('meta.title')}`}
|
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."
|
description={t("services.meta.description")}
|
||||||
|
keywords={t("meta.keywords")}
|
||||||
>
|
>
|
||||||
<Header />
|
<Header />
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<!-- Services Hero -->
|
<!-- Hero Section -->
|
||||||
<section class="py-20 bg-gradient-to-br from-background via-background to-muted">
|
<section class="relative bg-gradient-to-br from-primary/5 via-background to-secondary/5 py-20">
|
||||||
<div class="container-custom">
|
<div class="container mx-auto px-4">
|
||||||
<div class="text-center max-w-4xl mx-auto animate-on-scroll">
|
<div class="max-w-4xl mx-auto text-center">
|
||||||
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-display font-bold text-foreground mb-6">
|
<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">
|
||||||
{t('services.title')}
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
{t('services.hero.badge')}
|
||||||
|
</div>
|
||||||
|
<h1 class="text-responsive-xl font-bold text-foreground mb-6">
|
||||||
|
{t('services.hero.title')}
|
||||||
</h1>
|
</h1>
|
||||||
<p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
|
<p class="text-responsive-base text-muted leading-relaxed mb-12">
|
||||||
{t('services.subtitle')}
|
{t('services.hero.subtitle')}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Detailed Services -->
|
<!-- Services Grid -->
|
||||||
<section class="py-20 bg-background">
|
<section class="py-20 bg-background">
|
||||||
<div class="container-custom">
|
<div class="container mx-auto px-4">
|
||||||
<div class="space-y-32">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
{SERVICES.map((service, index) => {
|
{SERVICES.map(service => {
|
||||||
const details = getServiceDetails(service.id);
|
const serviceDetails = getServiceDetails(service.id);
|
||||||
return (
|
return (
|
||||||
<div
|
<div class="bg-card rounded-2xl p-8 border border-border/50 hover:border-primary/20 transition-all hover:shadow-lg" id={service.id}>
|
||||||
id={service.id}
|
<div class="w-16 h-16 bg-gradient-to-br from-primary to-secondary rounded-2xl flex items-center justify-center mb-6">
|
||||||
class={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-start animate-on-scroll ${index % 2 === 1 ? 'lg:grid-flow-col-reverse' : ''}`}
|
<span class="text-2xl">{service.icon}</span>
|
||||||
>
|
|
||||||
<!-- 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="/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>
|
</div>
|
||||||
|
|
||||||
<!-- Service features - Right side -->
|
<h2 class="text-2xl font-bold text-foreground mb-4">{t(service.titleKey)}</h2>
|
||||||
<div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5">
|
<p class="text-muted mb-6">{t(service.descriptionKey)}</p>
|
||||||
<div class="space-y-6">
|
|
||||||
<div class="text-center mb-8">
|
{service.features && (
|
||||||
<div class="text-6xl mb-4 opacity-20">{service.icon}</div>
|
<div class="mb-6">
|
||||||
<h3 class="text-xl font-semibold text-foreground">Features & Capabilities</h3>
|
<h3 class="text-lg font-semibold text-foreground mb-3">{t('services.featuresTitle')}</h3>
|
||||||
</div>
|
<ul class="space-y-2">
|
||||||
|
{service.features.map(feature => (
|
||||||
{service.features.map((feature) => (
|
<li class="flex items-center gap-2 text-muted">
|
||||||
<div class="bg-background/50 rounded-lg p-4">
|
<svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
<div class="flex items-start">
|
<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 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>
|
</svg>
|
||||||
<div>
|
{t(feature)}
|
||||||
<h4 class="font-medium text-foreground mb-1">{t(feature)}</h4>
|
</li>
|
||||||
<p class="text-sm text-muted-foreground">
|
))}
|
||||||
{/* Add feature descriptions based on the feature key */}
|
</ul>
|
||||||
{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>
|
)}
|
||||||
|
|
||||||
|
{serviceDetails.benefits.length > 0 && (
|
||||||
|
<div class="mb-6">
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-3">{t('services.benefitsTitle')}</h3>
|
||||||
|
<ul class="space-y-2">
|
||||||
|
{serviceDetails.benefits.map(benefit => (
|
||||||
|
<li class="flex items-center gap-2 text-muted">
|
||||||
|
<svg class="w-4 h-4 text-primary flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<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>
|
||||||
|
{benefit}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<a href={localizePath(`/services#${service.id}`, 'en')} class="inline-flex items-center gap-2 text-primary hover:text-primary/80 transition-colors font-medium">
|
||||||
|
{t('services.learnMore')}
|
||||||
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
@@ -248,41 +189,104 @@ const getServiceDetails = (serviceId: string) => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<!-- Why Choose Us -->
|
<!-- Process Section -->
|
||||||
<section class="py-20 bg-muted/30">
|
<section class="py-20 bg-gradient-to-br from-secondary/5 to-primary/5">
|
||||||
<div class="container-custom">
|
<div class="container mx-auto px-4">
|
||||||
<div class="text-center mb-16 animate-on-scroll">
|
<div class="max-w-4xl mx-auto text-center mb-16">
|
||||||
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
|
<h2 class="text-3xl font-bold text-foreground mb-4">{t('services.process.title')}</h2>
|
||||||
Why Choose Tiber365?
|
<p class="text-lg text-muted">{t('services.process.subtitle')}</p>
|
||||||
</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>
|
||||||
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||||
<div class="card p-6 text-center animate-on-scroll">
|
<div class="text-center">
|
||||||
<div class="text-4xl mb-4">⚡</div>
|
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4">1</div>
|
||||||
<h3 class="text-xl font-semibold text-foreground mb-3">Fast Response</h3>
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('services.process.discovery.title')}</h3>
|
||||||
<p class="text-muted-foreground">Quick turnaround times and 24/7 support when you need it most.</p>
|
<p class="text-muted">{t('services.process.discovery.description')}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.1s">
|
<div class="text-center">
|
||||||
<div class="text-4xl mb-4">🎯</div>
|
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4">2</div>
|
||||||
<h3 class="text-xl font-semibold text-foreground mb-3">Expert Knowledge</h3>
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('services.process.planning.title')}</h3>
|
||||||
<p class="text-muted-foreground">Years of experience with Microsoft 365, networking, and modern IT solutions.</p>
|
<p class="text-muted">{t('services.process.planning.description')}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.2s">
|
<div class="text-center">
|
||||||
<div class="text-4xl mb-4">💼</div>
|
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4">3</div>
|
||||||
<h3 class="text-xl font-semibold text-foreground mb-3">Business Focus</h3>
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('services.process.implementation.title')}</h3>
|
||||||
<p class="text-muted-foreground">We understand small business needs and provide cost-effective solutions.</p>
|
<p class="text-muted">{t('services.process.implementation.description')}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="w-16 h-16 bg-primary rounded-full flex items-center justify-center text-white font-bold text-xl mx-auto mb-4">4</div>
|
||||||
|
<h3 class="text-lg font-bold text-foreground mb-2">{t('services.process.support.title')}</h3>
|
||||||
|
<p class="text-muted">{t('services.process.support.description')}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<CTA />
|
<!-- Why Choose Us -->
|
||||||
|
<section class="py-20 bg-background">
|
||||||
|
<div class="container mx-auto px-4">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
||||||
|
<div>
|
||||||
|
<h2 class="text-3xl font-bold text-foreground mb-6">{t('services.whyChoose.title')}</h2>
|
||||||
|
<div class="space-y-6">
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-2">{t('services.whyChoose.expertise.title')}</h3>
|
||||||
|
<p class="text-muted">{t('services.whyChoose.expertise.description')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-2">{t('services.whyChoose.support.title')}</h3>
|
||||||
|
<p class="text-muted">{t('services.whyChoose.support.description')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-start gap-4">
|
||||||
|
<div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center flex-shrink-0">
|
||||||
|
<svg class="w-6 h-6 text-primary" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M3 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 4a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-lg font-semibold text-foreground mb-2">{t('services.whyChoose.customization.title')}</h3>
|
||||||
|
<p class="text-muted">{t('services.whyChoose.customization.description')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-gradient-to-br from-primary/10 to-secondary/10 rounded-2xl p-8">
|
||||||
|
<h3 class="text-2xl font-bold text-foreground mb-6">{t('services.cta.title')}</h3>
|
||||||
|
<p class="text-muted mb-6">{t('services.cta.description')}</p>
|
||||||
|
<a href={localizePath("/contact", 'en')} class="inline-flex items-center gap-2 bg-primary text-white px-6 py-3 rounded-lg hover:bg-primary/90 transition-colors font-medium">
|
||||||
|
{t('services.cta.button')}
|
||||||
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||||
|
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/>
|
||||||
|
</svg>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
|
<CTA />
|
||||||
<Footer />
|
<Footer />
|
||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
Reference in New Issue
Block a user