365DevNet/Tiber365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
becarta
2025-05-16 00:17:42 +02:00
parent ea5c866137
commit bacf566ec9
6020 changed files with 1715262 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/About.svelte Normal file
View File

@@ -0,0 +1,49 @@
<script lang="ts">
const values = [
{
title: 'Expertise',
description: 'Deep knowledge of Microsoft 365 ecosystem and best practices.',
icon: '🎯'
},
{
title: 'Reliability',
description: 'Consistent, dependable support when you need it most.',
icon: '⭐'
},
{
title: 'Innovation',
description: 'Staying ahead of the curve with the latest cloud technologies.',
icon: '💡'
}
];
</script>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="max-w-4xl mx-auto">
<h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-8">
About Us
</h2>
<p class="text-lg text-text/80 text-center mb-12">
We're a team of dedicated IT professionals passionate about helping freelancers and small businesses
thrive in the digital age. With years of experience in Microsoft 365 migrations and support,
we understand the unique challenges faced by small teams and provide tailored solutions to meet
your specific needs.
</p>
<div class="grid md:grid-cols-3 gap-8 mt-16">
{#each values as value}
<div class="text-center">
<div class="text-4xl mb-4">{value.icon}</div>
<h3 class="text-xl font-heading font-semibold text-primary mb-3">
{value.title}
</h3>
<p class="text-text/80">
{value.description}
</p>
</div>
{/each}
</div>
</div>
</div>
</section>

87
src/components/Contact.svelte Normal file
View File

@@ -0,0 +1,87 @@
<script lang="ts">
let formData = {
name: '',
email: '',
company: '',
message: ''
};
function handleSubmit() {
// Form submission would be handled here
console.log('Form submitted:', formData);
}
</script>
<section class="py-20 bg-surface">
<div class="container mx-auto px-4">
<div class="max-w-2xl mx-auto">
<h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-8">
Get in Touch
</h2>
<p class="text-lg text-text/80 text-center mb-12">
Ready to transform your business with expert Microsoft 365 support?
Fill out the form below and we'll get back to you within 24 hours.
</p>
<form on:submit|preventDefault={handleSubmit} class="space-y-6">
<div>
<label for="name" class="block text-sm font-medium text-text mb-2">
Name
</label>
<input
type="text"
id="name"
bind:value={formData.name}
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
required
/>
</div>
<div>
<label for="email" class="block text-sm font-medium text-text mb-2">
Email
</label>
<input
type="email"
id="email"
bind:value={formData.email}
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
required
/>
</div>
<div>
<label for="company" class="block text-sm font-medium text-text mb-2">
Company
</label>
<input
type="text"
id="company"
bind:value={formData.company}
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
/>
</div>
<div>
<label for="message" class="block text-sm font-medium text-text mb-2">
Message
</label>
<textarea
id="message"
bind:value={formData.message}
rows="4"
class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent"
required
></textarea>
</div>
<button
type="submit"
class="w-full bg-primary hover:bg-link-hover text-white px-8 py-4 rounded-lg text-lg font-semibold transition-colors duration-200"
>
Send Message
</button>
</form>
</div>
</div>
</section>

49
src/components/Footer.svelte Normal file
View File

@@ -0,0 +1,49 @@
<script lang="ts">
const currentYear = new Date().getFullYear();
</script>
<footer class="bg-primary text-white py-12">
<div class="container mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8">
<div class="space-y-4">
<h3 class="text-xl font-heading font-semibold">Tiber365</h3>
<p class="text-white/80">
Expert Microsoft 365 support for freelancers and small businesses.
</p>
</div>
<div>
<h4 class="text-lg font-heading font-semibold mb-4">Services</h4>
<ul class="space-y-2">
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Microsoft 365 Migrations</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Cloud Email Support</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Security & Compliance</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Remote IT Helpdesk</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-heading font-semibold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="#" class="text-white/80 hover:text-white transition-colors">About Us</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Contact</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Careers</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Blog</a></li>
</ul>
</div>
<div>
<h4 class="text-lg font-heading font-semibold mb-4">Legal</h4>
<ul class="space-y-2">
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Privacy Policy</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Terms of Service</a></li>
<li><a href="#" class="text-white/80 hover:text-white transition-colors">Cookie Policy</a></li>
</ul>
</div>
</div>
<div class="border-t border-white/10 mt-12 pt-8 text-center text-white/60">
<p>&copy; {currentYear} Tiber365. All rights reserved.</p>
</div>
</div>
</footer>

54
src/components/Hero.svelte Normal file
View File

@@ -0,0 +1,54 @@
<script lang="ts">
import { onMount } from 'svelte';
import '@lottiefiles/lottie-player';
let isVisible = false;
onMount(() => {
isVisible = true;
});
</script>
<section class="relative min-h-[80vh] bg-surface flex items-center">
<div class="container mx-auto px-4 py-16 md:py-24">
<div class="grid md:grid-cols-2 gap-12 items-center">
<div class="space-y-6" class:fade-in={isVisible}>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-heading font-bold text-primary leading-tight">
Empowering Freelancers & Small Teams with Expert Microsoft 365 Support
</h1>
<p class="text-xl text-text/80">
Seamless migrations, reliable support, and productivity-focused solutions.
</p>
<button class="bg-primary hover:bg-link-hover text-white px-8 py-4 rounded-lg text-lg font-semibold transition-colors duration-200">
Schedule a Free Consultation
</button>
</div>
<div class="relative h-[400px] md:h-[500px]" class:fade-in={isVisible}>
<lottie-player
src="https://assets2.lottiefiles.com/packages/lf20_cloud_support.json"
background="transparent"
speed="1"
loop
autoplay
/>
</div>
</div>
</div>
</section>
<style>
.fade-in {
animation: fadeIn 1s ease-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

50
src/components/Services.svelte Normal file
View File

@@ -0,0 +1,50 @@
<script lang="ts">
const services = [
{
title: 'Microsoft 365 Migrations',
description: 'Smooth transition to Microsoft 365 with minimal downtime and comprehensive data migration.',
icon: '🔄'
},
{
title: 'Cloud Email & File Support',
description: 'Expert management of Exchange Online and SharePoint, ensuring seamless collaboration.',
icon: '📧'
},
{
title: 'Security Configuration & Compliance',
description: 'Robust security setup and compliance management to protect your business data.',
icon: '🔒'
},
{
title: 'Remote IT Helpdesk',
description: '24/7 remote support for all your Microsoft 365 and general IT needs.',
icon: '💻'
},
{
title: 'Personalized Training & Onboarding',
description: 'Custom training programs to help your team maximize productivity with Microsoft 365.',
icon: '🎓'
}
];
</script>
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-12">
Our Services
</h2>
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{#each services as service}
<div class="bg-surface p-8 rounded-xl shadow-sm hover:shadow-md transition-shadow duration-200">
<div class="text-4xl mb-4">{service.icon}</div>
<h3 class="text-xl font-heading font-semibold text-primary mb-3">
{service.title}
</h3>
<p class="text-text/80">
{service.description}
</p>
</div>
{/each}
</div>
</div>
</section>

72
src/components/Testimonials.svelte Normal file
View File

@@ -0,0 +1,72 @@
<script lang="ts">
const testimonials = [
{
name: 'Sarah Johnson',
role: 'Freelance Designer',
content: 'The migration to Microsoft 365 was seamless. The team was professional and made sure all my data was transferred safely.',
avatar: '👩'
},
{
name: 'Michael Chen',
role: 'Small Business Owner',
content: 'Their ongoing support has been invaluable. Quick response times and always available when we need them.',
avatar: '👨'
},
{
name: 'Emma Rodriguez',
role: 'Marketing Agency Director',
content: 'The personalized training sessions helped our team get up to speed quickly with Microsoft 365.',
avatar: '👩'
}
];
let currentIndex = 0;
function next() {
currentIndex = (currentIndex + 1) % testimonials.length;
}
function prev() {
currentIndex = (currentIndex - 1 + testimonials.length) % testimonials.length;
}
</script>
<section class="py-20 bg-surface">
<div class="container mx-auto px-4">
<h2 class="text-3xl md:text-4xl font-heading font-bold text-center text-primary mb-12">
What Our Clients Say
</h2>
<div class="max-w-3xl mx-auto">
<div class="relative">
<div class="bg-white p-8 rounded-xl shadow-sm">
<div class="text-4xl mb-4">{testimonials[currentIndex].avatar}</div>
<p class="text-lg text-text/80 mb-6">
"{testimonials[currentIndex].content}"
</p>
<div>
<p class="font-heading font-semibold text-primary">
{testimonials[currentIndex].name}
</p>
<p class="text-text/60">
{testimonials[currentIndex].role}
</p>
</div>
</div>
<div class="flex justify-center mt-8 space-x-4">
<button
on:click={prev}
class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
>
←
</button>
<button
on:click={next}
class="p-2 rounded-full bg-white shadow-sm hover:shadow-md transition-shadow duration-200"
>
→
</button>
</div>
</div>
</div>
</div>
</section>