Refactor routing in App component to enhance navigation and improve error handling by integrating dynamic routes and updating the NotFound route.
This commit is contained in:
becarta
67
src/pages/404.astro
Normal file
67
src/pages/404.astro
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { t } from '../utils/i18n';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={`${t('404.title')} | ${t('meta.title')}`}
|
||||
description={t('404.description')}
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-background to-muted">
|
||||
<div class="container-custom">
|
||||
<div class="text-center max-w-2xl mx-auto animate-on-scroll">
|
||||
<!-- 404 Visual -->
|
||||
<div class="text-8xl sm:text-9xl font-bold text-primary/20 mb-8">404</div>
|
||||
|
||||
<!-- Error message -->
|
||||
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-display font-bold text-foreground mb-4">
|
||||
{t('404.title')}
|
||||
</h1>
|
||||
|
||||
<p class="text-lg sm:text-xl text-muted-foreground mb-8">
|
||||
{t('404.description')}
|
||||
</p>
|
||||
|
||||
<!-- Action buttons -->
|
||||
<div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||
<a
|
||||
href="/"
|
||||
class="btn-primary px-8 py-4 text-lg font-semibold rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105 inline-flex items-center group"
|
||||
>
|
||||
<svg class="h-5 w-5 mr-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="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
{t('404.button')}
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="/contact"
|
||||
class="btn-outline px-8 py-4 text-lg font-semibold rounded-xl transition-all duration-300 hover:scale-105"
|
||||
>
|
||||
Get Help
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Helpful links -->
|
||||
<div class="mt-12">
|
||||
<p class="text-muted-foreground mb-4">Or try one of these popular pages:</p>
|
||||
<div class="flex flex-wrap justify-center gap-4">
|
||||
<a href="/services" class="text-primary hover:text-primary/80 transition-colors">Services</a>
|
||||
<span class="text-muted-foreground">•</span>
|
||||
<a href="/about" class="text-primary hover:text-primary/80 transition-colors">About</a>
|
||||
<span class="text-muted-foreground">•</span>
|
||||
<a href="/contact" class="text-primary hover:text-primary/80 transition-colors">Contact</a>
|
||||
<span class="text-muted-foreground">•</span>
|
||||
<a href="https://blog.tiber365.it" target="_blank" rel="noopener noreferrer" class="text-primary hover:text-primary/80 transition-colors">Blog</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
190
src/pages/about.astro
Normal file
190
src/pages/about.astro
Normal file
@@ -0,0 +1,190 @@
|
||||
---
|
||||
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>
|
||||
18
src/pages/contact.astro
Normal file
18
src/pages/contact.astro
Normal file
@@ -0,0 +1,18 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import ContactForm from '../components/ContactForm.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { t } from '../utils/i18n';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={`${t('nav.contact')} | ${t('meta.title')}`}
|
||||
description="Contact Tiber365 for professional IT services. Get in touch for Microsoft 365 support, networking solutions, and custom IT projects."
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<ContactForm />
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
29
src/pages/index.astro
Normal file
29
src/pages/index.astro
Normal file
@@ -0,0 +1,29 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Hero from '../components/Hero.astro';
|
||||
import Services from '../components/Services.astro';
|
||||
import Testimonials from '../components/Testimonials.astro';
|
||||
import CTA from '../components/CTA.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { t } from '../utils/i18n';
|
||||
|
||||
const pageTitle = t('meta.title');
|
||||
const pageDescription = t('meta.description');
|
||||
const pageKeywords = t('meta.keywords');
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={pageTitle}
|
||||
description={pageDescription}
|
||||
keywords={pageKeywords}
|
||||
>
|
||||
<Header />
|
||||
<main>
|
||||
<Hero />
|
||||
<Services />
|
||||
<Testimonials />
|
||||
<CTA />
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
154
src/pages/privacy.astro
Normal file
154
src/pages/privacy.astro
Normal file
@@ -0,0 +1,154 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { t } from '../utils/i18n';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={`${t('footer.links.privacy')} | ${t('meta.title')}`}
|
||||
description="Privacy Policy for Tiber365 - Learn how we collect, use, and protect your personal data in compliance with GDPR and Dutch privacy laws."
|
||||
>
|
||||
<Header />
|
||||
<main class="py-16 bg-background">
|
||||
<div class="container-custom">
|
||||
<article class="prose prose-lg dark:prose-invert max-w-4xl mx-auto">
|
||||
<h1 class="text-4xl font-display font-bold mb-8">{t('footer.links.privacy')}</h1>
|
||||
|
||||
<div class="mb-8 text-sm text-muted-foreground">
|
||||
Last updated: {new Date().toLocaleDateString()}
|
||||
</div>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>1. Introduction</h2>
|
||||
<p>
|
||||
Tiber365 ("we", "our", or "us") is committed to protecting your privacy and personal data. This Privacy Policy explains how we collect, use, and protect your personal information in accordance with the General Data Protection Regulation (GDPR) and Dutch privacy laws.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>2. Data Controller</h2>
|
||||
<p>
|
||||
Tiber365<br />
|
||||
Italy<br />
|
||||
Email: info@tiber365.it
|
||||
</p>
|
||||
<p>
|
||||
For privacy-related inquiries, you can contact our Data Protection Officer at privacy@tiber365.it.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>3. Personal Data We Collect</h2>
|
||||
<p>We collect and process the following types of personal data:</p>
|
||||
<ul>
|
||||
<li>Contact information (name, email, phone number, company name)</li>
|
||||
<li>Technical data (IP address, browser type, device information)</li>
|
||||
<li>Usage data (how you interact with our website and services)</li>
|
||||
<li>Communication data (messages you send us through our contact form)</li>
|
||||
<li>Service data (information related to the IT services we provide)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>4. Legal Basis for Processing</h2>
|
||||
<p>We process your personal data based on the following legal grounds:</p>
|
||||
<ul>
|
||||
<li>Contract performance (when providing our IT services)</li>
|
||||
<li>Legal obligations (compliance with Dutch and EU laws)</li>
|
||||
<li>Legitimate interests (improving our services and communication)</li>
|
||||
<li>Consent (for marketing communications and cookies)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>5. How We Use Your Data</h2>
|
||||
<p>We use your personal data for:</p>
|
||||
<ul>
|
||||
<li>Providing and managing our IT services</li>
|
||||
<li>Communicating with you about our services</li>
|
||||
<li>Improving our website and services</li>
|
||||
<li>Complying with legal obligations</li>
|
||||
<li>Sending you marketing communications (with your consent)</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>6. Data Sharing and Transfers</h2>
|
||||
<p>
|
||||
We may share your data with:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Service providers (hosting, email, analytics)</li>
|
||||
<li>Professional advisers (lawyers, accountants)</li>
|
||||
<li>Authorities (when legally required)</li>
|
||||
</ul>
|
||||
<p>
|
||||
Data transfers outside the EU/EEA are protected by appropriate safeguards (Standard Contractual Clauses).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>7. Data Retention</h2>
|
||||
<p>
|
||||
We retain your personal data only for as long as necessary to fulfill the purposes for which it was collected, including legal requirements and accounting purposes.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>8. Your Rights</h2>
|
||||
<p>Under GDPR and Dutch privacy laws, you have the right to:</p>
|
||||
<ul>
|
||||
<li>Access your personal data</li>
|
||||
<li>Correct inaccurate data</li>
|
||||
<li>Request deletion of your data</li>
|
||||
<li>Object to processing</li>
|
||||
<li>Data portability</li>
|
||||
<li>Withdraw consent</li>
|
||||
</ul>
|
||||
<p>
|
||||
To exercise these rights, contact us at privacy@tiber365.it. We'll respond within 30 days.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>9. Cookies and Tracking</h2>
|
||||
<p>
|
||||
We use cookies and similar technologies to improve your browsing experience. You can manage cookie preferences through your browser settings.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>10. Security</h2>
|
||||
<p>
|
||||
We implement appropriate technical and organizational measures to protect your personal data against unauthorized access, alteration, disclosure, or destruction.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>11. Changes to This Policy</h2>
|
||||
<p>
|
||||
We may update this Privacy Policy periodically. We will notify you of any material changes by posting the new policy on this page.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>12. Complaints</h2>
|
||||
<p>
|
||||
If you have concerns about how we process your personal data, please contact us first. You also have the right to file a complaint with the Dutch Data Protection Authority (Autoriteit Persoonsgegevens).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>13. Contact Us</h2>
|
||||
<p>
|
||||
For any privacy-related questions or requests, please contact us at:<br />
|
||||
Email: privacy@tiber365.it<br />
|
||||
Phone: +39 123 456 7890
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
126
src/pages/services.astro
Normal file
126
src/pages/services.astro
Normal file
@@ -0,0 +1,126 @@
|
||||
---
|
||||
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 '../site.config';
|
||||
import { t } from '../utils/i18n';
|
||||
---
|
||||
|
||||
<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-20">
|
||||
{SERVICES.map((service, index) => (
|
||||
<div class={`grid grid-cols-1 lg:grid-cols-2 gap-12 items-center animate-on-scroll ${index % 2 === 1 ? 'lg:grid-flow-col-reverse' : ''}`}>
|
||||
<!-- Service content -->
|
||||
<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-6 leading-relaxed">
|
||||
{t(service.descriptionKey)}
|
||||
</p>
|
||||
|
||||
<!-- Features list -->
|
||||
<ul class="space-y-3 mb-8">
|
||||
{service.features.map((feature) => (
|
||||
<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">{t(feature)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<!-- Service visual -->
|
||||
<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-8xl mb-6 opacity-20">{service.icon}</div>
|
||||
<div class="space-y-4">
|
||||
{service.features.slice(0, 3).map((feature) => (
|
||||
<div class="bg-background/50 rounded-lg p-3 text-sm text-muted-foreground">
|
||||
{t(feature)}
|
||||
</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>
|
||||
165
src/pages/terms.astro
Normal file
165
src/pages/terms.astro
Normal file
@@ -0,0 +1,165 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
import Header from '../components/Header.astro';
|
||||
import Footer from '../components/Footer.astro';
|
||||
import { t } from '../utils/i18n';
|
||||
---
|
||||
|
||||
<BaseLayout
|
||||
title={`${t('footer.links.terms')} | ${t('meta.title')}`}
|
||||
description="Terms of Service for Tiber365 - Understanding our service agreement and legal terms in compliance with European and Dutch laws."
|
||||
>
|
||||
<Header />
|
||||
<main class="py-16 bg-background">
|
||||
<div class="container-custom">
|
||||
<article class="prose prose-lg dark:prose-invert max-w-4xl mx-auto">
|
||||
<h1 class="text-4xl font-display font-bold mb-8">{t('footer.links.terms')}</h1>
|
||||
|
||||
<div class="mb-8 text-sm text-muted-foreground">
|
||||
Last updated: {new Date().toLocaleDateString()}
|
||||
</div>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>1. Introduction</h2>
|
||||
<p>
|
||||
These Terms of Service ("Terms") govern your use of Tiber365's website and services. By accessing our website or using our services, you agree to be bound by these Terms. If you disagree with any part of these terms, please do not use our services.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>2. Company Information</h2>
|
||||
<p>
|
||||
Tiber365<br />
|
||||
Registered in Italy<br />
|
||||
Email: info@tiber365.it<br />
|
||||
Phone: +39 123 456 7890
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>3. Services</h2>
|
||||
<p>
|
||||
We provide IT services including:
|
||||
</p>
|
||||
<ul>
|
||||
<li>Microsoft 365 support and management</li>
|
||||
<li>Networking and infrastructure solutions</li>
|
||||
<li>Web hosting and management</li>
|
||||
<li>Custom IT projects</li>
|
||||
</ul>
|
||||
<p>
|
||||
Service specifics will be detailed in individual service agreements.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>4. Service Agreement</h2>
|
||||
<p>
|
||||
Upon engaging our services:
|
||||
</p>
|
||||
<ul>
|
||||
<li>We will provide services as specified in the service agreement</li>
|
||||
<li>You agree to provide necessary information and access for service delivery</li>
|
||||
<li>You will maintain the confidentiality of any access credentials provided</li>
|
||||
<li>You will use the services in compliance with applicable laws</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>5. Intellectual Property</h2>
|
||||
<p>
|
||||
All content on our website and services, including but not limited to text, graphics, logos, and software, is our property or that of our licensors and is protected by intellectual property laws.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>6. User Obligations</h2>
|
||||
<p>You agree to:</p>
|
||||
<ul>
|
||||
<li>Provide accurate and complete information</li>
|
||||
<li>Maintain the security of your account</li>
|
||||
<li>Not use our services for illegal purposes</li>
|
||||
<li>Not interfere with the proper functioning of our services</li>
|
||||
<li>Comply with all applicable laws and regulations</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>7. Payment Terms</h2>
|
||||
<p>
|
||||
Payment terms, including fees, billing cycles, and payment methods, will be specified in your service agreement. Late payments may result in service suspension.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>8. Liability</h2>
|
||||
<p>
|
||||
To the extent permitted by law:
|
||||
</p>
|
||||
<ul>
|
||||
<li>We provide services "as is" without warranties</li>
|
||||
<li>We are not liable for indirect, consequential, or incidental damages</li>
|
||||
<li>Our liability is limited to the amount paid for services in the previous 12 months</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>9. Data Protection</h2>
|
||||
<p>
|
||||
We process personal data in accordance with our Privacy Policy and applicable data protection laws (GDPR and Dutch privacy laws).
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>10. Service Availability</h2>
|
||||
<p>
|
||||
While we strive for high availability, we do not guarantee uninterrupted service. We will provide notice of scheduled maintenance when possible.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>11. Termination</h2>
|
||||
<p>
|
||||
Either party may terminate services according to the terms in the service agreement. Upon termination:
|
||||
</p>
|
||||
<ul>
|
||||
<li>All access to services will cease</li>
|
||||
<li>You remain liable for any outstanding payments</li>
|
||||
<li>We will assist with data transition as specified in the service agreement</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>12. Changes to Terms</h2>
|
||||
<p>
|
||||
We may modify these Terms at any time. Continued use of our services after changes constitutes acceptance of the modified Terms.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>13. Governing Law</h2>
|
||||
<p>
|
||||
These Terms are governed by Dutch law. Any disputes will be subject to the exclusive jurisdiction of the Dutch courts.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>14. Severability</h2>
|
||||
<p>
|
||||
If any provision of these Terms is found to be unenforceable, the remaining provisions will remain in effect.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section class="mb-12">
|
||||
<h2>15. Contact</h2>
|
||||
<p>
|
||||
For questions about these Terms, please contact us at:<br />
|
||||
Email: legal@tiber365.it<br />
|
||||
Phone: +39 123 456 7890
|
||||
</p>
|
||||
</section>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</BaseLayout>
|
||||
Reference in New Issue
Block a user