190 lines
8.1 KiB
Plaintext
190 lines
8.1 KiB
Plaintext
---
|
|
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 { t } from '../utils/i18n';
|
|
---
|
|
|
|
<BaseLayout
|
|
title={`${t('nav.about')} | ${t('meta.title')}`}
|
|
description="Learn about Tiber365 - your trusted IT partner specializing in Microsoft 365, networking, and comprehensive IT solutions for small businesses."
|
|
>
|
|
<Header />
|
|
<main>
|
|
<!-- About 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('about.title')}
|
|
</h1>
|
|
<p class="text-lg sm:text-xl text-muted-foreground leading-relaxed">
|
|
{t('about.subtitle')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Company Story -->
|
|
<section class="py-20 bg-background">
|
|
<div class="container-custom">
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
<!-- Content -->
|
|
<div class="animate-on-scroll">
|
|
<h2 class="text-3xl sm:text-4xl font-display font-bold text-foreground mb-6">
|
|
Our Story
|
|
</h2>
|
|
<p class="text-lg text-muted-foreground mb-6 leading-relaxed">
|
|
{t('about.description')}
|
|
</p>
|
|
<p class="text-lg text-muted-foreground leading-relaxed">
|
|
{t('about.mission')}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Visual -->
|
|
<div class="animate-on-scroll" style="animation-delay: 0.2s">
|
|
<div class="card p-8 bg-gradient-to-br from-primary/5 via-primary/10 to-secondary/5">
|
|
<div class="text-center">
|
|
<div class="text-6xl mb-6">🚀</div>
|
|
<h3 class="text-xl font-semibold text-foreground mb-4">Modern IT Solutions</h3>
|
|
<p class="text-muted-foreground">
|
|
Empowering businesses with cutting-edge technology and reliable support.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Stats -->
|
|
<section class="py-20 bg-muted/30">
|
|
<div class="container-custom">
|
|
<div class="grid grid-cols-1 sm:grid-cols-3 gap-8 text-center">
|
|
<div class="animate-on-scroll">
|
|
<div class="text-4xl sm:text-5xl font-bold text-primary mb-2">5+</div>
|
|
<div class="text-muted-foreground">{t('about.experience')}</div>
|
|
</div>
|
|
<div class="animate-on-scroll" style="animation-delay: 0.1s">
|
|
<div class="text-4xl sm:text-5xl font-bold text-primary mb-2">100+</div>
|
|
<div class="text-muted-foreground">{t('about.clients')}</div>
|
|
</div>
|
|
<div class="animate-on-scroll" style="animation-delay: 0.2s">
|
|
<div class="text-4xl sm:text-5xl font-bold text-primary mb-2">200+</div>
|
|
<div class="text-muted-foreground">{t('about.projects')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Values -->
|
|
<section class="py-20 bg-background">
|
|
<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">
|
|
Our Values
|
|
</h2>
|
|
<p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
The principles that guide everything we do
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg: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">Security First</h3>
|
|
<p class="text-muted-foreground">
|
|
We prioritize the security and privacy of your business data above all else.
|
|
</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">Reliability</h3>
|
|
<p class="text-muted-foreground">
|
|
Count on us for consistent, dependable service that keeps your business running.
|
|
</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">Innovation</h3>
|
|
<p class="text-muted-foreground">
|
|
We stay ahead of technology trends to bring you the best solutions.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.3s">
|
|
<div class="text-4xl mb-4">📞</div>
|
|
<h3 class="text-xl font-semibold text-foreground mb-3">Support</h3>
|
|
<p class="text-muted-foreground">
|
|
Dedicated support when you need it, with real people who understand your business.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.4s">
|
|
<div class="text-4xl mb-4">⚡</div>
|
|
<h3 class="text-xl font-semibold text-foreground mb-3">Efficiency</h3>
|
|
<p class="text-muted-foreground">
|
|
Streamlined processes and quick resolutions to minimize downtime.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="card p-6 text-center animate-on-scroll" style="animation-delay: 0.5s">
|
|
<div class="text-4xl mb-4">🎯</div>
|
|
<h3 class="text-xl font-semibold text-foreground mb-3">Focus</h3>
|
|
<p class="text-muted-foreground">
|
|
Laser-focused on small business needs and cost-effective solutions.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Team Section -->
|
|
<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">
|
|
Our Expertise
|
|
</h2>
|
|
<p class="text-lg sm:text-xl text-muted-foreground max-w-3xl mx-auto">
|
|
Specialized knowledge in the technologies that matter to your business
|
|
</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6">
|
|
<div class="card p-4 text-center animate-on-scroll">
|
|
<div class="text-3xl mb-2">🏢</div>
|
|
<div class="text-sm font-medium text-foreground">Microsoft 365</div>
|
|
</div>
|
|
<div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.1s">
|
|
<div class="text-3xl mb-2">☁️</div>
|
|
<div class="text-sm font-medium text-foreground">Cloud Services</div>
|
|
</div>
|
|
<div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.2s">
|
|
<div class="text-3xl mb-2">🌐</div>
|
|
<div class="text-sm font-medium text-foreground">Networking</div>
|
|
</div>
|
|
<div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.3s">
|
|
<div class="text-3xl mb-2">🔒</div>
|
|
<div class="text-sm font-medium text-foreground">Security</div>
|
|
</div>
|
|
<div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.4s">
|
|
<div class="text-3xl mb-2">🚀</div>
|
|
<div class="text-sm font-medium text-foreground">Web Hosting</div>
|
|
</div>
|
|
<div class="card p-4 text-center animate-on-scroll" style="animation-delay: 0.5s">
|
|
<div class="text-3xl mb-2">⚙️</div>
|
|
<div class="text-sm font-medium text-foreground">Automation</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<CTA />
|
|
</main>
|
|
<Footer />
|
|
</BaseLayout> |