first commit

src/App.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Hero from './components/Hero.svelte';
+  import Services from './components/Services.svelte';
+  import Testimonials from './components/Testimonials.svelte';
+  import About from './components/About.svelte';
+  import Contact from './components/Contact.svelte';
+  import Footer from './components/Footer.svelte';
+</script>
+
+<main class="min-h-screen bg-white">
+  <Hero />
+  <Services />
+  <Testimonials />
+  <About />
+  <Contact />
+  <Footer />
+</main>
+
+<style>
+  :global(html) {
+    font-family: 'Inter', sans-serif;
+    color: #333333;
+  }
+
+  :global(h1, h2, h3, h4, h5, h6) {
+    font-family: 'Poppins', sans-serif;
+  }
+</style> 

src/app.css

@@ -0,0 +1,30 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600;700&display=swap');
+
+:root {
+  --primary-color: #0077cc;
+  --accent-color: #2ecc71;
+  --background-color: #ffffff;
+  --surface-color: #f9f9f9;
+  --text-color: #333333;
+  --link-hover-color: #005fa3;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', sans-serif;
+  color: var(--text-color);
+  background-color: var(--background-color);
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Poppins', sans-serif;
+} 

src/components/About.svelte

@@ -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> 

src/components/Contact.svelte

@@ -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> 

src/components/Footer.svelte

@@ -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> 

src/components/Hero.svelte

@@ -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> 

src/components/Services.svelte

@@ -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> 

src/components/Testimonials.svelte

@@ -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> 

src/main.ts

@@ -0,0 +1,8 @@
+import './app.css';
+import App from './App.svelte';
+
+const app = new App({
+  target: document.getElementById('app')!,
+});
+
+export default app; 

src/svelte.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svelte' {
+  import type { SvelteComponent } from 'svelte';
+  export default class extends SvelteComponent<Record<string, any>> {}
+} 

src/vite-env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
+
+declare module '*.svelte' {
+  import type { ComponentType } from 'svelte';
+  const component: ComponentType;
+  export default component;
+}
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+  // more env variables...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}