initiale Entwicklung

src/app/components/blog-post.component.ts

@@ -0,0 +1,57 @@
+// src/app/components/blog-post/blog-post.component.ts
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CommonModule } from '@angular/common';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { BlogService } from '../services/blog.service';
+import { FooterComponent } from './footer.component';
+import { HeaderComponent } from './header.component';
+
+@Component({
+  selector: 'app-blog-post',
+  standalone: true,
+  imports: [CommonModule, HeaderComponent, FooterComponent],
+  template: `
+    <app-header></app-header>
+    @if(safeContent){
+    <section class="py-20 bg-gray-200 m-auto" data-aos="fade-up">
+      <div class="container mx-auto px-6 max-w-[1024px]">
+        <button (click)="goBack()" class="text-blue-600 hover:underline mb-4">← Back to Latest Insights</button>
+        <h2 class="text-3xl font-bold mb-4">{{ post?.title }}</h2>
+        <img [src]="post?.image" [alt]="post?.title" class="rounded-lg mb-6 shadow-lg w-full h-auto object-cover" />
+        <div class="text-gray-700" [innerHTML]="safeContent"></div>
+      </div>
+    </section>
+    }
+    <app-footer></app-footer>
+  `
+})
+export class BlogPostComponent implements OnInit {
+  post: any;
+  safeContent: SafeHtml | null = null;
+
+  constructor(
+    private route: ActivatedRoute, 
+    private router: Router,
+    private blogService: BlogService,
+    private sanitizer: DomSanitizer
+  ) {}
+
+  ngOnInit() {
+    const postId = this.route.snapshot.paramMap.get('id');
+    this.post = this.blogService.getPost(postId);
+
+    if (this.post && this.post.content) {
+      this.safeContent = this.sanitizer.bypassSecurityTrustHtml(this.post.content);
+    } else {
+      // Redirect to a 404 page or display an error message
+      this.router.navigate(['**']);
+    }
+  }
+  ngAfterViewInit(){
+    
+  }
+  goBack() {
+    this.router.navigate(['']);
+  }
+}

src/app/components/blog.component.ts

@@ -0,0 +1,59 @@
+// src/app/components/blog/blog.component.ts
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { BlogService } from '../services/blog.service';
+
+@Component({
+  selector: 'app-blog',
+  standalone: true,
+  imports: [CommonModule, RouterLink],
+  template: `
+    <section id="blog" class="py-20 bg-gray-100" data-aos="fade-up">
+      <div class="container mx-auto px-6">
+        <h2 class="text-3xl font-bold text-center">Latest Insights</h2>
+        <p class="mt-4 text-center text-gray-600">Stay updated with our latest news and articles.</p>
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+          <div *ngFor="let post of blogPosts" class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
+            <img [src]="post.image" [alt]="post.title" class="rounded-t-lg mb-4 w-full h-auto object-cover">
+            <h3 class="text-xl font-semibold mb-2">{{ post.title }}</h3>
+            <p class="text-gray-600 mb-4">
+              {{ getShortContent(post.content) }}
+            </p>
+            <a [routerLink]="['/blog', getPostId(post.title)]" class="text-blue-600 hover:underline">Read More</a>
+          </div>
+        </div>
+      </div>
+    </section>
+  `
+})
+export class BlogComponent implements OnInit {
+  blogPosts: any[] = [];
+
+  constructor(private blogService: BlogService) {}
+
+  ngOnInit() {
+    const posts = this.blogService.getAllPosts();
+    // Convert the blogPosts object to an array
+    this.blogPosts = Object.keys(posts).map(key => posts[key]);
+  }
+
+  // Function to get a short preview of the content
+  getShortContent(content: string): string {
+    const div = document.createElement('div');
+    div.innerHTML = content;
+    const text = div.textContent || div.innerText || '';
+    return text.substring(0, 150) + '...';
+  }
+
+  // Function to get post ID based on the title
+  getPostId(title: string): string {
+    const posts = this.blogService.getAllPosts();
+    for (const id in posts) {
+      if (posts[id].title === title) {
+        return id;
+      }
+    }
+    return '1'; // Default to '1' if not found
+  }
+}

src/app/components/call2action.component.ts

@@ -0,0 +1,45 @@
+// src/app/components/footer/footer.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-call2action',
+  standalone: true,
+  imports: [CommonModule],
+  template: `<section class="bg-blue-900 text-white py-20" data-aos="fade-up">
+            <div
+                class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between"
+            >
+                <!-- Text und Button -->
+                <div class="md:w-1/2 mb-8 md:mb-0">
+                    <h2 class="text-3xl font-bold">
+                        Ready to Elevate Your IT Infrastructure?
+                    </h2>
+                    <p class="mt-4 text-lg">
+                        Contact Bay Area Affiliates, Inc. today and let our
+                        experts handle your IT needs.
+                    </p>
+                    <a
+                        href="#contact"
+                        class="mt-6 inline-block bg-white text-blue-900 px-6 py-3 rounded-full font-semibold hover:bg-gray-100"
+                        >Get in Touch</a
+                    >
+                </div>
+                <!-- Google Map Embed -->
+                <div class="md:w-1/2 flex justify-center" data-aos="fade-up">
+                    <iframe
+                        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3331.7894679685755!2d-98.48527228476843!3d27.773756032788047!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x866c1e3b8a9d0c0b%3A0x8f2c1d4c1a5c5b2c!2s1001%20Blucher%20St%2C%20Corpus%20Christi%2C%20TX%2078401%2C%20USA!5e0!3m2!1sen!2sde!4v1672531192743!5m2!1sen!2sde"
+                        width="100%"
+                        height="250"
+                        class="rounded-lg shadow-lg"
+                        style="border: 0"
+                        allowfullscreen=""
+                        loading="lazy"
+                        referrerpolicy="no-referrer-when-downgrade"
+                    >
+                    </iframe>
+                </div>
+            </div>
+        </section>`
+})
+export class Call2ActionComponent{}

src/app/components/contact.component.ts

@@ -0,0 +1,69 @@
+// src/app/components/contact/contact.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'app-contact',
+  standalone: true,
+  imports: [CommonModule, FormsModule],
+  template: `
+    <section id="contact" class="py-20" data-aos="fade-up">
+      <div class="container mx-auto px-6">
+        <h2 class="text-3xl font-bold text-center">Get in Touch</h2>
+        <p class="mt-4 text-center text-gray-600">We're here to help you with all your IT needs.</p>
+        <div class="mt-12 max-w-lg mx-auto">
+          <form (ngSubmit)="onSubmit()" class="bg-white p-8 rounded-lg shadow" data-aos="fade-up">
+            <div class="mb-4">
+              <label class="block text-gray-700">Name</label>
+              <input 
+                type="text" 
+                name="name"
+                [(ngModel)]="formData.name"
+                class="w-full mt-2 p-3 border rounded" 
+                placeholder="Your Name" 
+                required>
+            </div>
+            <div class="mb-4">
+              <label class="block text-gray-700">Email</label>
+              <input 
+                type="email" 
+                name="email"
+                [(ngModel)]="formData.email"
+                class="w-full mt-2 p-3 border rounded" 
+                placeholder="Your Email" 
+                required>
+            </div>
+            <div class="mb-4">
+              <label class="block text-gray-700">Message</label>
+              <textarea 
+                name="message"
+                [(ngModel)]="formData.message"
+                class="w-full mt-2 p-3 border rounded" 
+                rows="5" 
+                placeholder="Your Message" 
+                required></textarea>
+            </div>
+            <button 
+              type="submit" 
+              class="w-full bg-blue-600 text-white p-3 rounded hover:bg-blue-700">
+              Send Message
+            </button>
+          </form>
+        </div>
+      </div>
+    </section>
+  `
+})
+export class ContactComponent {
+  formData = {
+    name: '',
+    email: '',
+    message: ''
+  };
+
+  onSubmit() {
+    console.log('Form submitted:', this.formData);
+    // Implement your form submission logic here
+  }
+}

src/app/components/features.component.ts

@@ -0,0 +1,54 @@
+// src/app/components/features/features.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-features',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <section id="features" class="py-20" data-aos="fade-up">
+      <div class="container mx-auto px-6">
+        <h2 class="text-3xl font-bold text-center">Why Choose Us</h2>
+        <p class="mt-4 text-center text-gray-600">
+          Discover the benefits of partnering with Bay Area Affiliates, Inc.
+        </p>
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-8">
+          <!-- Feature Item 1 -->
+          <div class="flex items-center" data-aos="fade-up">
+            <div class="text-blue-900 text-3xl mr-4">
+              <i class="fas fa-check-circle"></i>
+            </div>
+            <div>
+              <h3 class="text-xl font-semibold">Experienced Team</h3>
+              <p class="text-gray-600">Over 25 years of expertise in IT services and solutions.</p>
+            </div>
+          </div>
+
+          <!-- Feature Item 2 -->
+          <div class="flex items-center" data-aos="fade-up">
+            <div class="text-blue-900 text-3xl mr-4">
+              <i class="fas fa-shield-alt"></i>
+            </div>
+            <div>
+              <h3 class="text-xl font-semibold">Secure Solutions</h3>
+              <p class="text-gray-600">Top-notch security measures to protect your business data.</p>
+            </div>
+          </div>
+
+          <!-- Feature Item 3 -->
+          <div class="flex items-center" data-aos="fade-up">
+            <div class="text-blue-900 text-3xl mr-4">
+              <i class="fas fa-cogs"></i>
+            </div>
+            <div>
+              <h3 class="text-xl font-semibold">Customized Solutions</h3>
+              <p class="text-gray-600">Tailored IT strategies to meet your unique business requirements.</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  `
+})
+export class FeaturesComponent {}

src/app/components/footer.component.ts

@@ -0,0 +1,209 @@
+// src/app/components/footer/footer.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-footer',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <footer class="bg-gray-800 text-white py-6" data-aos="fade-up">
+      <div class="container mx-auto px-6 flex flex-col md:flex-row justify-between items-center">
+        <div class="mb-4 md:mb-0">
+          © {{currentYear}} Bay Area Affiliates, Inc. All rights reserved.
+        </div>
+        <div class="flex space-x-4 mb-4 md:mb-0">
+          <a href="#" class="hover:text-blue-400"><i class="fab fa-facebook-f"></i></a>
+          <a href="#" class="hover:text-blue-400"><i class="fab fa-twitter"></i></a>
+          <a href="#" class="hover:text-blue-400"><i class="fab fa-linkedin-in"></i></a>
+          <a href="#" class="hover:text-blue-400"><i class="fab fa-instagram"></i></a>
+        </div>
+        <div class="hidden md:flex space-x-4">
+          <button 
+            class="text-gray-400 hover:text-white focus:outline-none"
+            (click)="showPrivacyPolicy = true">
+            Privacy Policy
+          </button>
+          <button 
+            class="text-gray-400 hover:text-white focus:outline-none"
+            (click)="showTerms = true">
+            Terms of Service
+          </button>
+        </div>
+      </div>
+      <div class="container mx-auto px-6 mt-4 text-center md:hidden">
+        <button 
+          class="text-gray-400 hover:text-white mx-2 focus:outline-none"
+          (click)="showPrivacyPolicy = true">
+          Privacy Policy
+        </button>
+        <span class="text-gray-400">|</span>
+        <button 
+          class="text-gray-400 hover:text-white mx-2 focus:outline-none"
+          (click)="showTerms = true">
+          Terms of Service
+        </button>
+      </div>
+
+      <!-- Privacy Policy Modal -->
+      <div *ngIf="showPrivacyPolicy" 
+           class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg w-11/12 md:w-3/4 lg:w-1/2 relative overflow-y-auto max-h-screen p-6">
+          <button 
+            class="absolute top-4 right-4 text-gray-600 hover:text-gray-800 focus:outline-none"
+            (click)="showPrivacyPolicy = false">
+            <i class="fas fa-times"></i>
+          </button>
+          <div class="p-4 text-gray-800">
+            <h2 class="text-3xl font-bold mb-4 text-gray-800">Privacy Policy</h2>
+            <p class="text-gray-700 mb-4">
+              At Bay Area Affiliates, Inc., we are committed to protecting your privacy. 
+              This Privacy Policy outlines how we collect, use, disclose, and safeguard your 
+              information when you visit our website and use our services.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">
+                Information We Collect
+            </h3>
+            <p class="text-gray-700 mb-4">
+                We may collect personal information such as your name,
+                email address, phone number, and other relevant details
+                when you contact us for our IT support services.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">
+                How We Use Your Information
+            </h3>
+            <p class="text-gray-700 mb-4">
+                Your information is used to provide and improve our
+                services, respond to your inquiries, and communicate
+                important updates. We do not sell or rent your personal
+                information to third parties.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">Data Security</h3>
+            <p class="text-gray-700 mb-4">
+                We implement a variety of security measures to maintain
+                the safety of your personal information. However, no
+                method of transmission over the internet or electronic
+                storage is 100% secure.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">Your Consent</h3>
+            <p class="text-gray-700 mb-4">
+                By using our website and services, you consent to our
+                Privacy Policy.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">
+                Changes to Our Privacy Policy
+            </h3>
+            <p class="text-gray-700 mb-4">
+                We reserve the right to update our Privacy Policy at any
+                time. Any changes will be effective immediately upon
+                posting on this page.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">Contact Us</h3>
+            <p class="text-gray-700 mb-4">
+                If you have any questions regarding this Privacy Policy,
+                please contact us at
+                <a
+                    href="mailto:info&#64;bayareaaffiliates.com"
+                    class="text-blue-600 underline"
+                    >info&#64;bayareaaffiliates.com</a
+                >.
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <!-- Terms of Service Modal -->
+      <div *ngIf="showTerms" 
+           class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div class="bg-white rounded-lg w-11/12 md:w-3/4 lg:w-1/2 relative overflow-y-auto max-h-screen p-6">
+          <button 
+            class="absolute top-4 right-4 text-gray-600 hover:text-gray-800 focus:outline-none"
+            (click)="showTerms = false">
+            <i class="fas fa-times"></i>
+          </button>
+          <div class="p-4 text-gray-800">
+            <h2 class="text-3xl font-bold mb-4 text-gray-800">Terms of Service</h2>
+            <p class="text-gray-700 mb-4">
+              Welcome to Bay Area Affiliates, Inc. By accessing our website and using our 
+              IT support services, you agree to comply with and be bound by the following 
+              Terms of Service.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">
+                Service Description
+            </h3>
+            <p class="text-gray-700 mb-4">
+                Bay Area Affiliates, Inc. provides comprehensive IT
+                support services, including hardware and software
+                support, network infrastructure, server repair, remote
+                support, web services, virtualization solutions, and
+                more.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">
+                User Responsibilities
+            </h3>
+            <p class="text-gray-700 mb-4">
+                Users are responsible for maintaining the
+                confidentiality of their account information and for all
+                activities that occur under their account. Users agree
+                to provide accurate and complete information when using
+                our services.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">Payment Terms</h3>
+            <p class="text-gray-700 mb-4">
+                All services rendered by Bay Area Affiliates, Inc. are
+                subject to payment terms agreed upon in the service
+                contract. Late payments may incur additional fees.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">
+                Limitation of Liability
+            </h3>
+            <p class="text-gray-700 mb-4">
+                Bay Area Affiliates, Inc. shall not be liable for any
+                indirect, incidental, or consequential damages arising
+                from the use of our services. Our total liability is
+                limited to the amount paid for the services rendered.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">Termination</h3>
+            <p class="text-gray-700 mb-4">
+                Either party may terminate the service agreement at any
+                time with written notice. Upon termination, users must
+                cease using all services provided by Bay Area
+                Affiliates, Inc.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">Governing Law</h3>
+            <p class="text-gray-700 mb-4">
+                These Terms of Service are governed by and construed in
+                accordance with the laws of the State of Texas, without
+                regard to its conflict of law principles.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">
+                Changes to Terms
+            </h3>
+            <p class="text-gray-700 mb-4">
+                Bay Area Affiliates, Inc. reserves the right to modify
+                these Terms of Service at any time. Any changes will be
+                effective immediately upon posting on our website.
+                Continued use of our services constitutes acceptance of
+                the updated terms.
+            </p>
+            <h3 class="text-2xl font-semibold mb-2">Contact Us</h3>
+            <p class="text-gray-700 mb-4">
+                If you have any questions about these Terms of Service,
+                please contact us at
+                <a
+                    href="mailto:info&#64;bayareaaffiliates.com"
+                    class="text-blue-600 underline"
+                    >info&#64;bayareaaffiliates.com</a
+                >.
+            </p>
+          </div>
+        </div>
+      </div>
+    </footer>
+  `
+})
+export class FooterComponent {
+  currentYear = new Date().getFullYear();
+  showPrivacyPolicy = false;
+  showTerms = false;
+}

src/app/components/header.component.ts

@@ -0,0 +1,50 @@
+// src/app/components/header/header.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-header',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <header class="bg-white shadow">
+      <div class="container mx-auto px-6 py-4 flex justify-between items-center">
+        <div class="text-2xl font-bold text-blue-900">
+          Bay Area Affiliates, Inc.
+        </div>
+        <button
+          (click)="toggleMenu()"
+          class="md:hidden text-blue-900 focus:outline-none"
+        >
+          <i class="fas fa-bars"></i>
+        </button>
+        <nav [class.hidden]="!isMenuOpen" class="hidden md:block w-full md:w-auto">
+          <ul class="flex flex-col md:flex-row md:space-x-6">
+            <li>
+              <a href="#services" class="hover:text-blue-900">Services</a>
+            </li>
+            <li>
+              <a href="#features" class="hover:text-blue-900">Features</a>
+            </li>
+            <li>
+              <a href="#blog" class="hover:text-blue-900">Blog</a>
+            </li>
+            <li>
+              <a
+                href="#contact"
+                class="bg-blue-900 text-white px-4 py-2 rounded hover:bg-blue-800"
+              >Contact</a>
+            </li>
+          </ul>
+        </nav>
+      </div>
+    </header>
+  `
+})
+export class HeaderComponent {
+  isMenuOpen = false;
+
+  toggleMenu() {
+    this.isMenuOpen = !this.isMenuOpen;
+  }
+}

src/app/components/hero.component.ts

@@ -0,0 +1,30 @@
+// src/app/components/hero/hero.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-hero',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <section class="bg-blue-900 text-white" data-aos="fade-up">
+      <div class="container mx-auto px-6 py-20 flex flex-col-reverse md:flex-row items-center">
+        <div class="w-full md:w-1/2 mt-8 md:mt-0">
+          <h1 class="text-4xl md:text-5xl font-bold">
+            Reliable IT Services for Over 25 Years
+          </h1>
+          <p class="mt-4 text-lg">
+            Providing top-notch Computer & Networking solutions to the Coastal Bend community.
+          </p>
+          <a href="#contact" class="mt-6 inline-block bg-white text-blue-900 px-6 py-3 rounded-full font-semibold hover:bg-gray-100">
+            Get in Touch
+          </a>
+        </div>
+        <div class="w-full md:w-1/2 flex justify-center">
+          <img src="assets/it-services.webp" alt="IT Services" class="rounded-lg shadow-lg h-[300px] w-[600px] object-cover">
+        </div>
+      </div>
+    </section>
+  `
+})
+export class HeroComponent {}

src/app/components/landing-page.component.ts

@@ -0,0 +1,51 @@
+// src/app/components/landing-page/landing-page.component.ts
+import { Component, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import * as AOS from 'aos';
+import { BlogComponent } from './blog.component';
+import { Call2ActionComponent } from './call2action.component';
+import { ContactComponent } from './contact.component';
+import { FeaturesComponent } from './features.component';
+import { FooterComponent } from './footer.component';
+import { HeaderComponent } from './header.component';
+import { HeroComponent } from './hero.component';
+import { ServicesComponent } from './services.component';
+
+@Component({
+  selector: 'app-landing-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    HeaderComponent,
+    HeroComponent,
+    ServicesComponent,
+    FeaturesComponent,
+    Call2ActionComponent,
+    BlogComponent,
+    ContactComponent,
+    FooterComponent
+  ],
+  template: `
+    <app-header></app-header>
+    <app-hero></app-hero>
+    <app-services></app-services>
+    <app-features></app-features>
+    <app-call2action></app-call2action>
+    <app-blog></app-blog>
+    <app-contact></app-contact>
+    <app-footer></app-footer>    
+  `
+})
+export class LandingPageComponent {
+  // ngOnInit() {
+  //   AOS.init({
+  //     duration: 1000,
+  //     once: true
+  //   });
+  // }
+  // ngAfterViewInit(): void {
+  //   setTimeout(() => {
+  //     AOS.refresh();
+  //   }, 500);
+  // }
+}

src/app/components/services.component.ts

@@ -0,0 +1,134 @@
+// src/app/components/services/services.component.ts
+import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'app-services',
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <section id="services" class="py-20 bg-gray-100" data-aos="fade-up">
+      <div class="container mx-auto px-6">
+        <h2 class="text-3xl font-bold text-center">Our Services</h2>
+        <p class="mt-4 text-center text-gray-600">
+          Comprehensive IT solutions tailored to your business needs.
+          Read concrete examples of these topics in our
+          <a href="#blog" class="text-blue-900 underline">Latest Insights</a>
+          section.
+        </p>
+        <div class="mt-12 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          <!-- Service Item 1 -->
+          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
+            <div class="text-blue-900 text-4xl mb-4">
+              <i class="fas fa-window-maximize"></i>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">Windows 11 Transition</h3>
+            <p class="text-gray-600">
+              Upgrade to Windows 11 before October 2025 to ensure continued security support and take advantage of the latest features.
+            </p>
+          </div>
+
+          <!-- Service Item 2 -->
+          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
+            <div class="text-blue-900 text-4xl mb-4">
+              <i class="fas fa-globe"></i>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">Web Services</h3>
+            <p class="text-gray-600">
+              Web design, domain registration, email services, and more to establish and enhance your online presence.
+            </p>
+          </div>
+
+          <!-- Service Item 3 -->
+          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
+            <div class="text-blue-900 text-4xl mb-4">
+              <i class="fas fa-tachometer-alt"></i>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">Performance Upgrades</h3>
+            <p class="text-gray-600">
+              Enhance your desktops and laptops with SSDs, maintain your Windows installations, and achieve dramatic performance boosts.
+            </p>
+          </div>
+
+          <!-- Service Item 4 -->
+          <div class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition" data-aos="fade-up">
+            <div class="text-blue-900 text-4xl mb-4">
+              <i class="fas fa-print"></i>
+            </div>
+            <h3 class="text-xl font-semibold mb-2">Printer & Scanner Installation</h3>
+            <p class="text-gray-600">
+              Professional installation and configuration of printers and scanners to ensure seamless integration into your workflow.
+            </p>
+          </div>
+                    <!-- Service Item 4 -->
+                    <div
+                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
+                        data-aos="fade-up"
+                    >
+                        <div class="text-blue-900 text-4xl mb-4">
+                            <i class="fas fa-desktop"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">
+                            New/Refurbished Desktop Hardware
+                        </h3>
+                        <p class="text-gray-600">
+                            Supply and installation of new or refurbished
+                            desktop hardware, tailored to meet your business
+                            requirements.
+                        </p>
+                    </div>          
+                    <!-- Service Item 5 -->
+                    <div
+                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
+                        data-aos="fade-up"
+                    >
+                        <div class="text-blue-900 text-4xl mb-4">
+                            <i class="fas fa-shield-virus"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">VPN Setup</h3>
+                        <p class="text-gray-600">
+                            Configure Virtual Private Networks to allow secure
+                            remote access to your internal network from
+                            anywhere.
+                        </p>
+                    </div>
+                    <!-- Service Item 6 -->
+                    <div
+                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
+                        data-aos="fade-up"
+                    >
+                        <div class="text-blue-900 text-4xl mb-4">
+                            <i class="fas fa-network-wired"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">
+                            Network Infrastructure Support
+                        </h3>
+                        <p class="text-gray-600">
+                            Robust network solutions to ensure connectivity,
+                            security, and efficiency, including routers, access
+                            points, and switches.
+                        </p>
+                    </div>
+                    <!-- Service Item 7 -->
+                    <div
+                        class="bg-white p-6 rounded-lg shadow hover:shadow-lg transition"
+                        data-aos="fade-up"
+                    >
+                        <div class="text-blue-900 text-4xl mb-4">
+                            <i class="fas fa-hdd"></i>
+                        </div>
+                        <h3 class="text-xl font-semibold mb-2">
+                            Network Attached Storage
+                        </h3>
+                        <p class="text-gray-600">
+                            Selection, setup, and maintenance of Network
+                            Attached Storage solutions to provide scalable and
+                            reliable data storage.
+                        </p>
+                    </div>          
+        </div>
+      </div>
+    </section>
+  `
+})
+export class ServicesComponent {}