// 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.jpg" alt="IT Services" class="rounded-lg shadow-lg h-[300px] w-[600px] object-cover">
        </div>
      </div>
    </section>
  `
})
export class HeroComponent {}