feature: sign up with github and about page completed

app/(website)/about/page.tsx

@@ -0,0 +1,541 @@
+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">
+      {" "}
+      {/* Prevent horizontal scroll */}
+      {/* 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"></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 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">
+        <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 leading-tight">
+                Forged in Innovation, <br className="hidden md:inline" /> Driven
+                by Purpose
+              </h2>
+              <p className="text-md md:text-lg text-gray-700 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 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">
+        <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">
+            Our North Star
+          </h2>
+          <p className="text-md md:text-lg text-gray-600 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 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">
+                Our Vision
+              </h3>
+              <p className="text-gray-700 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 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">
+                Our Mission
+              </h3>
+              <p className="text-gray-700 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">
+        <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 mb-4">
+              How We Deliver Excellence
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 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 p-6 rounded-lg shadow-md text-center transform transition duration-300 hover:-translate-y-2 hover:shadow-xl"
+              >
+                <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">
+                  {item.title}
+                </h4>
+                <p className="text-gray-600 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">
+        <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 leading-tight">
+                Deep Domain Knowledge
+              </h2>
+              <p className="text-md md:text-lg text-gray-700 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 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">
+                    {exp.industry}
+                  </h4>
+                  <p className="text-gray-600 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">
+            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 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 font-poppins text-sm">
+                Designed to grow with your business and adapt to future
+                technological advancements.
+              </p>
+            </div>
+            <div className="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 font-poppins text-sm">
+                Built with quality and security at the core, ensuring dependable
+                performance.
+              </p>
+            </div>
+            <div className="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 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">
+        <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">
+            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 p-6 rounded-lg shadow-sm text-center transition-shadow duration-300 hover:shadow-lg"
+              >
+                <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">
+                  {value.title}
+                </h4>
+                <p className="text-gray-600 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">
+        <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 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 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 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">
+        <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 mb-4">
+              Meet Our Leadership
+            </h2>
+            <p className="text-md md:text-lg text-gray-700 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 rounded-lg shadow-lg overflow-hidden text-center transition-transform duration-300 hover:scale-105 max-w-sm mx-auto"
+              >
+                {/* 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"
+                  />
+                </div>
+                <div className="p-6">
+                  <h4 className="text-xl font-semibold font-poppins mb-1">
+                    {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 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 hover:text-blue-800 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"
+        style={{ backgroundColor: "#e1c44a" }}
+      >
+        <div className="container mx-auto px-6 text-center">
+          <FaChartLine className="text-5xl mx-auto mb-5" />
+          <h2 className="text-3xl md:text-4xl font-bold mb-4 font-poppins">
+            Driving Measurable Impact
+          </h2>
+          <p className="text-lg md:text-xl max-w-3xl mx-auto leading-relaxed font-poppins">
+            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 transition-colors duration-300 font-poppins"
+            >
+              Start the Conversation
+            </a>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
+}