oms-website-nextjs/app/(website)/about/page.tsx

import Image from "next/image";
import {
  FaHandshake,
  FaBullseye,
  FaUsers,
  FaCheckCircle,
  FaHeart,
  FaComments,
  FaShieldAlt,
  FaCogs,
  FaChartLine,
  FaMicrochip,
  FaBriefcase,
  FaSyncAlt,
  FaUserCheck,
  FaProjectDiagram,
} from "react-icons/fa";

const leadershipTeam = [
  {
    id: 1,
    name: "Michael Shapiro",
    title: "Managing Director",
    imageUrl: "/images/profile1.jpg",
    bio: "A seasoned leader and innovator with over 25 years of experience, driving strategic growth and fostering a culture of excellence within OMS.",
    linkedinUrl: "#",
  },
  {
    id: 2,
    name: "Gareth Corbishley",
    title: "Director",
    imageUrl: "/images/profile2.jpg",
    bio: "Expert in operational efficiency and technological implementation, ensuring seamless project delivery and client satisfaction.",
    linkedinUrl: "#",
  },
  {
    id: 3,
    name: "Darryl Govender",
    title: "Director",
    imageUrl: "/images/profile3.jpg",
    bio: "Specializes in aligning cutting-edge technology solutions with complex business needs to unlock transformative results.",
    linkedinUrl: "#",
  },
];

const coreValues = [
  {
    icon: FaCheckCircle,
    title: "Service",
    description:
      "Dedicated to providing outstanding service at every touchpoint, meeting the highest standards, and creating lasting impact for our clients.",
  },
  {
    icon: FaHandshake,
    title: "Accountability",
    description:
      "Taking ownership of our actions and delivering on promises with transparency. Our commitment fosters trust and ensures we consistently meet client expectations.",
  },
  {
    icon: FaHeart,
    title: "Passion",
    description:
      "Driven by a passion for innovation, we embrace new ideas and technologies, constantly seeking ways to improve and deliver creative, boundary-pushing solutions.",
  },
  {
    icon: FaComments,
    title: "Communication",
    description:
      "Clear, consistent, and proactive communication is central. We ensure all stakeholders are aligned, informed, and empowered, fostering collaboration.",
  },
  {
    icon: FaShieldAlt,
    title: "Trust",
    description:
      "Cultivating trust through ethical practices, honesty, and transparency. We uphold the highest integrity for long-term, mutually beneficial relationships.",
  },
];

const ourApproach = [
  {
    icon: FaProjectDiagram,
    title: "Strategic Alignment",
    description:
      " We begin by deeply understanding your business objectives, challenges, and long-term vision to ensure every solution delivers strategic value.",
  },
  {
    icon: FaUserCheck,
    title: "Client-Centric Collaboration",
    description:
      "We believe in true partnership. You're involved throughout the process, ensuring transparency, feedback loops, and solutions tailored precisely to your needs.",
  },
  {
    icon: FaSyncAlt,
    title: "Agile & Adaptive Delivery",
    description:
      "Leveraging agile methodologies allows us to be flexible, adapt to changing requirements, and deliver incremental value faster, ensuring projects stay on track and relevant.",
  },
  {
    icon: FaCogs,
    title: "Technical Excellence",
    description:
      "Our commitment to technical excellence means employing best practices, rigorous testing, and seasoned expertise to build robust, scalable, and maintainable solutions.",
  },
];

const industryExpertise = [
  {
    icon: FaBriefcase,
    industry: "Financial Services & Fintech",
    details:
      "Deep understanding of regulatory landscapes, security requirements, and digital transformation needs within banking, insurance, and investment sectors. We build secure, compliant, and innovative fintech solutions.",
  },
  {
    icon: FaBriefcase,
    industry: "Automotive",
    details:
      "Experience in optimizing supply chains, developing connected car solutions, enhancing customer experiences, and leveraging data analytics for the automotive industry.",
  },
  {
    icon: FaBriefcase,
    industry: "Technology",
    details:
      "Partnering with tech companies to accelerate product development, provide specialized engineering talent, and build scalable cloud-native applications.",
  },
  {
    icon: FaBriefcase,
    industry: "Retail/E-commerce",
    details: "Describe experience in this sector.",
  },
];

export default function AboutUsPage() {
  return (
    <div className="bg-white text-gray-800 overflow-x-hidden dark:bg-gray-900 dark:text-gray-200">
      {" "}
      {/* Prevent horizontal scroll & Add dark mode base */}
      {/* Section 1: Hero / Company Overview */}
      <section className="relative bg-gradient-to-r from-gray-800 via-gray-700 to-gray-800 text-white py-24 md:py-40">
        {/* Optional decorative background elements */}
        <div className="absolute inset-0 bg-black opacity-30 dark:opacity-50"></div>
        <div
          className="absolute inset-0 bg-cover bg-center opacity-10"
          style={{ backgroundImage: "url('/path/to/abstract-tech-bg.jpg')" }}
        ></div>{" "}
        {/* Add a subtle background image */}
        <div className="container mx-auto px-6 text-center relative z-10">
          <h1
            className="text-4xl md:text-6xl font-bold mb-4 font-poppins text-gold-500 drop-shadow-md"
            style={{ color: "#e1c44a" }}
          >
            About Owethu Managed Services
          </h1>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-200 dark:text-gray-300 font-poppins">
            Your strategic partner in navigating the digital frontier. We fuse
            deep technical expertise with a passion for innovation to craft
            bespoke IT solutions that drive tangible business results and unlock
            future potential.
          </p>
        </div>
      </section>
      {/* Section 2: Our Genesis & Purpose */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
                Forged in Innovation, <br className="hidden md:inline" /> Driven
                by Purpose
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
                Expand on the founding story/motivation. E.g., Owethu Managed
                Services was born from a clear vision: to harness the
                transformative power of technology not just to solve problems,
                but to proactively create opportunities for businesses to
                thrive. We saw a need for a partner who truly understands both
                technology&apos;s potential and the unique challenges modern
                organizations face.
              </p>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
                Elaborate on the journey. E.g., Our journey has been defined by
                a relentless pursuit of knowledge, adaptation to the
                ever-evolving tech landscape, and an unwavering commitment to
                client success. This focus has established us as trusted
                advisors and thought leaders in digital transformation.
              </p>
            </div>
            <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg">
              {/* Replace with a relevant, high-quality image representing innovation or teamwork */}
              <Image
                src="/images/team-collaborative.png"
                alt="Team collaborating on innovative solutions"
                layout="fill"
                objectFit="cover"
                className="transition-transform duration-500 hover:scale-105"
              />
            </div>
          </div>
        </div>
      </section>
      {/* Section 3: Vision & Mission (Similar layout, refined look) */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6 text-center mb-12">
          <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white">
            Our North Star
          </h2>
          <p className="text-md md:text-lg text-gray-600 dark:text-gray-400 mt-3 max-w-2xl mx-auto font-poppins">
            Guiding our strategy, actions, and partnerships.
          </p>
        </div>
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-10 md:gap-12">
            {/* Vision Card */}
            <div
              className="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 border-t-4 border-gold-500 flex flex-col items-center text-center"
              style={{ borderColor: "#e1c44a" }}
            >
              <FaBullseye
                className="text-5xl mb-5 text-gold-500"
                style={{ color: "#e1c44a" }}
              />
              <h3 className="text-2xl font-bold mb-4 font-poppins text-gray-900 dark:text-white">
                Our Vision
              </h3>
              <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
                &quot;To be global leaders in delivering cutting-edge IT
                solutions, pushing the boundaries of what&apos;s possible, and
                transforming industries for the better. We aim to empower
                organisations to break through technological barriers and
                achieve greater success.&quot;
              </p>
            </div>
            {/* Mission Card */}
            <div
              className="bg-gray-50 dark:bg-gray-800 p-8 rounded-xl shadow-md hover:shadow-lg transition-shadow duration-300 border-t-4 border-gold-500 flex flex-col items-center text-center"
              style={{ borderColor: "#e1c44a" }}
            >
              <FaHandshake
                className="text-5xl mb-5 text-gold-500"
                style={{ color: "#e1c44a" }}
              />
              <h3 className="text-2xl font-bold mb-4 font-poppins text-gray-900 dark:text-white">
                Our Mission
              </h3>
              <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
                &quot;We are dedicated to creating tailored, innovative
                solutions that drive business success. By combining expertise
                with cutting-edge technology, we solve complex problems and
                enable our clients to achieve outstanding results. We partner
                closely with clients to ensure every solution aligns with their
                unique needs for long-term success.&quot;
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Section 4: Our Approach & Methodology */}
      <section className="py-16 md:py-24 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-700">
        <div className="container mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              How We Deliver Excellence
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
              Our methodology is built on collaboration, precision, and a
              relentless focus on delivering impactful results. We tailor our
              process to fit your specific project needs.
            </p>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {ourApproach.map((item) => (
              <div
                key={item.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-2 hover:shadow-xl dark:hover:shadow-gold-500/20"
              >
                <item.icon
                  className="text-4xl text-gold-500 mx-auto mb-5"
                  style={{ color: "#e1c44a" }}
                />
                <h4 className="text-xl font-semibold mb-3 font-poppins dark:text-white">
                  {item.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
      {/* Section 5: Industry Expertise */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
            <div className="lg:col-span-1">
              <FaBriefcase
                className="text-5xl text-gold-500 mb-4"
                style={{ color: "#e1c44a" }}
              />
              <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900 dark:text-white leading-tight">
                Deep Domain Knowledge
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
                We combine broad technological capabilities with specialized
                expertise across key industries, understanding the unique
                challenges and opportunities within each sector.
              </p>
            </div>
            <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
              {industryExpertise.map((exp) => (
                <div
                  key={exp.industry}
                  className="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-sm border-l-4 border-gold-500"
                  style={{ borderColor: "#e1c44a" }}
                >
                  <h4 className="text-lg font-semibold mb-2 font-poppins dark:text-white">
                    {exp.industry}
                  </h4>
                  <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
                    {exp.details}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
      {/* Section 6: Technology Philosophy */}
      <section className="py-16 md:py-24 bg-gray-800 text-white">
        <div className="container mx-auto px-6 text-center">
          <FaMicrochip
            className="text-5xl text-gold-500 mx-auto mb-5"
            style={{ color: "#e1c44a" }}
          />
          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-white">
            Smart Technology, Applied Wisely
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed text-gray-300 mb-8 font-poppins">
            We don&apos;t chase trends; we select and implement technologies
            strategically. Our focus is on building solutions that are:
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
              <h4
                className="text-xl font-semibold mb-2 font-poppins text-gold-500"
                style={{ color: "#e1c44a" }}
              >
                Scalable & Future-Proof
              </h4>
              <p className="text-gray-300 dark:text-gray-300 font-poppins text-sm">
                Designed to grow with your business and adapt to future
                technological advancements.
              </p>
            </div>
            <div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
              <h4
                className="text-xl font-semibold mb-2 font-poppins text-gold-500"
                style={{ color: "#e1c44a" }}
              >
                Robust & Reliable
              </h4>
              <p className="text-gray-300 dark:text-gray-300 font-poppins text-sm">
                Built with quality and security at the core, ensuring dependable
                performance.
              </p>
            </div>
            <div className="bg-gray-700 dark:bg-gray-700 p-6 rounded-lg">
              <h4
                className="text-xl font-semibold mb-2 font-poppins text-gold-500"
                style={{ color: "#e1c44a" }}
              >
                Best-Fit Solutions
              </h4>
              <p className="text-gray-300 dark:text-gray-300 font-poppins text-sm">
                Chosen based on your specific needs, budget, and existing
                infrastructure, not just the latest hype.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Section 7: Core Values (Reusing previous structure, adjusting background) */}
      <section className="py-16 md:py-24 bg-gray-100 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <h2 className="text-3xl md:text-4xl font-bold text-center mb-12 font-poppins text-gray-900 dark:text-white">
            Our Foundational Values
          </h2>
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {coreValues.map((value) => (
              <div
                key={value.title}
                className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-sm text-center transition-shadow duration-300 hover:shadow-lg dark:hover:shadow-gold-500/20"
              >
                <value.icon
                  className="text-4xl text-gold-500 mx-auto mb-4"
                  style={{ color: "#e1c44a" }}
                />
                <h4 className="text-xl font-semibold mb-2 font-poppins dark:text-white">
                  {value.title}
                </h4>
                <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm leading-relaxed">
                  {value.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>
      {/* Section 8: The OMS Partnership */}
      <section className="py-16 md:py-24 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
            <div className="relative h-64 md:h-80 rounded-lg overflow-hidden shadow-lg order-last md:order-first">
              {/* Replace with an image representing partnership or client collaboration */}
              <Image
                src="/images/partners.jpg"
                alt="Client partnership and collaboration"
                layout="fill"
                objectFit="cover"
                className="transition-transform duration-500 hover:scale-105"
              />
            </div>
            <div>
              <FaUsers
                className="text-5xl text-gold-500 mb-4"
                style={{ color: "#e1c44a" }}
              />
              <h2 className="text-3xl md:text-4xl font-bold mb-6 font-poppins text-gray-900 dark:text-white leading-tight">
                More Than Vendors, <br className="hidden md:inline" />{" "}
                We&apos;re Partners
              </h2>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
                We believe the best results come from true collaboration. We
                invest time in understanding your culture, goals, and
                challenges, working alongside your team as an extension of your
                own capabilities.
              </p>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
                This means open communication, shared goals, proactive
                problem-solving, and a long-term commitment to your success,
                extending far beyond project completion.
              </p>
            </div>
          </div>
        </div>
      </section>
      {/* Section 9: Our Leadership Team */}
      <section className="py-16 md:py-24 bg-gray-50 dark:bg-gray-800">
        <div className="container mx-auto px-6">
          <div className="text-center mb-14">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-gray-900 dark:text-white mb-4">
              Meet Our Leadership
            </h2>
            <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 max-w-3xl mx-auto font-poppins">
              Slightly enhance the intro. E.g., Guided by experience and a
              passion for innovation, our leadership team fosters a culture of
              excellence and empowers our experts to deliver outstanding results
              for our clients.
            </p>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 justify-center">
            {/* Added justify-center */}
            {leadershipTeam.map((member) => (
              <div
                key={member.id}
                className="bg-white dark:bg-gray-700 rounded-lg shadow-lg overflow-hidden text-center transition-transform duration-300 hover:scale-105 max-w-sm mx-auto dark:hover:shadow-gold-500/20"
              >
                {/* Added max-width and mx-auto for centering if fewer than 3 items */}
                <div className="relative h-60 w-full">
                  {/* Slightly taller image */}
                  <Image
                    src={member.imageUrl || "/images/profile1.jpg"}
                    alt={`Photo of ${member.name}`}
                    layout="fill"
                    objectFit="cover"
                    className="bg-gray-200 dark:bg-gray-600"
                  />
                </div>
                <div className="p-6">
                  <h4 className="text-xl font-semibold font-poppins mb-1 dark:text-white">
                    {member.name}
                  </h4>
                  <p
                    className="text-gold-600 font-poppins text-sm mb-3"
                    style={{ color: "#c8a93d" }}
                  >
                    {member.title}
                  </p>
                  <p className="text-gray-600 dark:text-gray-300 font-poppins text-sm mb-4">
                    {member.bio}
                  </p>
                  {member.linkedinUrl && member.linkedinUrl !== "#" && (
                    <a
                      href={member.linkedinUrl}
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm font-medium text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 transition-colors duration-200 font-poppins"
                      aria-label={`LinkedIn profile of ${member.name}`}
                    >
                      {/* Using a simple text link for cleanliness */}
                      Connect on LinkedIn
                    </a>
                  )}
                </div>
              </div>
            ))}
          </div>
          {/* Button removed as requested */}
        </div>
      </section>
      {/* Section 10: Commitment to Impact (Optional, but adds value) */}
      <section
        className="py-16 md:py-24 bg-gold-500 text-gray-900 dark:bg-gold-600 dark:text-gray-900"
        style={{ backgroundColor: "#e1c44a" }}
      >
        <div className="container mx-auto px-6 text-center">
          <FaChartLine className="text-5xl mx-auto mb-5 text-gray-800" />
          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins text-gray-900">
            Driving Measurable Impact
          </h2>
          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins text-gray-800">
            Ultimately, our success is measured by yours. We are committed to
            delivering solutions that not only meet technical requirements but
            also drive efficiency, foster growth, enhance user experiences, and
            provide a clear return on investment. Let&apos;s build a successful
            future, together.
          </p>
          {/* Optional CTA to contact */}
          <div className="mt-10">
            <a
              href="/contact"
              className="inline-block bg-gray-800 text-white font-bold py-3 px-8 rounded-md hover:bg-gray-900 dark:bg-gray-900 dark:hover:bg-black transition-colors duration-300 font-poppins"
            >
              Start the Conversation
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}