import React from "react";

const About = () => (
  <section className="bg-gray-50 py-16">
    <div className="max-w-7xl mx-auto flex flex-col-reverse lg:flex-row justify-center items-center gap-12 px-4">
      {/* Text Content */}
      <div className="flex-1 max-w-lg h-full flex flex-col justify-center text-center lg:text-left">
        <h2 className="text-3xl md:text-4xl font-bold text-blue-900 mb-6">
          About Digitro Solutions
        </h2>
        <p className="text-lg text-gray-700 mb-4">
          At Digitro Solution, we are a dynamic IT company committed to
          empowering businesses through innovative digital solutions. Our
          services span across Website Development, Graphics Design, SEO
          Services, Social Media Marketing, and Pay Per Click (PPC) campaigns,
          tailored to help brands grow online.
        </p>
        <p className="text-lg text-gray-700">
          We also specialize in strategic Paid Marketing and Mobile Application
          development, delivering performance-driven results that engage
          audiences and drive success. With a focus on creativity, technology,
          and measurable outcomes, Digitro Solution is your trusted partner in
          the digital transformation journey.
        </p>
      </div>

      {/* Image Section */}
      <div className="flex-1 max-w-lg h-full flex items-center justify-center">
        <img
          src="img/about.png"
          alt="Digital solutions illustration"
          className="w-full h-full rounded-xl shadow-md object-cover"
        />
      </div>
    </div>
  </section>
);

export default About;
