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";
import { Metadata } from "next";


// 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: "#",
//   },
// ];
    export const metadata: Metadata = {
    title: "About Us | Owethu Managed Services (OMS)",
    description: "Learn about OMS, our mission, vision, and the values that drive us to deliver exceptional IT solutions and services.",
    keywords: [
      "Owethu Managed Services",
      "About OMS",
      "OMS",
      "Black-owned ",
      "Women-owned",
      "Tech company",
      "bank statement reader",
      "fintech solutions" ,
      
     ],

    }


const coreValues = [
  {
    icon: FaCheckCircle,
    title: "Service",
    description:
      "We strive to elevate every experience — from client interactions to internal collaborations. With unwavering dedication, we deliver excellence that inspires growth, fosters partnerships, and creates a lasting, positive impact on everyone we touch.",
  },
  {
    icon: FaHandshake,
    title: "Accountability",
    description:
      "We embrace ownership with pride, holding ourselves and each other to the highest standards. Our transparency and commitment to our promises build the trust that strengthens relationships, propels progress, and empowers everyone to thrive.",
  },
  {
    icon: FaHeart,
    title: "Passion",
    description:
      "Driven by a relentless passion for innovation, we embrace challenges as opportunities. We inspire creativity, ignite new ideas, and fuel transformation — always seeking to push the limits of what’s possible and make a difference in everything we do.",
  },
  {
    icon: FaComments,
    title: "Communication",
    description:
      "Open, honest, and proactive communication is the bridge that connects us all. We believe in the power of dialogue to align, inspire, and drive collaboration — ensuring that every voice is heard and every idea has the opportunity to flourish.",
  },
  {
    icon: FaShieldAlt,
    title: "Trust",
    description:
      "At the heart of our work lies unwavering trust. Built on integrity, honesty, and respect, we nurture strong, meaningful relationships that create a foundation for long-term success — together, as partners, as a team, and as a community.",
  },
];

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:
      "Experience in building scalable e-commerce platforms, optimizing digital customer journeys, enabling secure payment integrations, and leveraging data analytics to drive personalized shopping experiences and operational efficiency.",
  },
];

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">
                Owethu Managed Services wasn’t built in a boardroom — it was
                born from a deeper calling: a desire to do more than simply
                exist in the tech space. We set out to use innovation not as a
                buzzword, but as a lifeline — pulling businesses out of
                stagnation and into a future full of possibility.
              </p>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-4 font-poppins">
                From day one, we’ve challenged the status quo. We don’t just fix
                problems — we anticipate them, reimagine them, and turn them
                into powerful stepping stones for growth. Our mission is simple:
                break what seems impossible, and rebuild it into something
                extraordinary.
              </p>
              <p className="text-md md:text-lg text-gray-700 dark:text-gray-300 leading-relaxed font-poppins">
                Today, OMS is more than a service provider. We are trusted
                digital transformation partners, creative problem-solvers, and
                passionate believers in human-driven innovation. This isn’t just
                business. This is our purpose.
              </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="/about-2.jpg" // Ensure this image exists in your public folder
                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.&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 Purpose
              </h3>
              <p className="text-gray-700 dark:text-gray-300 leading-relaxed font-poppins flex-grow">
                &quot;Our purpose is to help our clients drive transformative
                growth and innovation to propel their business forward –
                redefining whats possible.&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/meeting.svg"
                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, processes, 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">
            {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"
              >
                <div className="relative h-60 w-full">
                  <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}`}
                    >
                      Connect on LinkedIn
                    </a>
                  )}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      */}
      {/* Section 10: Commitment to Impact (Optional, but adds value) */}
      <section
        className="py-16 md:py-24 bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 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
            creating solutions that ignite momentum, unlock potential, and turn
            ambition into achievement — empowering you to rise above challenges
            and lead with confidence into the future. Together, let&apos;s build
            a future where your success is not just a possibility, but a
            reality.
          </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>
  );
}