www/app/about/page.tsx

import React from "react";
import { User, Award, Globe } from "lucide-react";
import { Button } from "@/components/button";
import { allAuthors } from "@/.content-collections/generated";
import Image from "next/image";
import Link from "next/link";
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "About Us",
  description: "Learn more about the team behind Techaro!",
};

const TeamMember = ({
  name,
  role,
  image,
}: {
  name: string;
  role: string;
  image: string;
}) => (
  <div className="text-center">
    <Image
      className="mx-auto h-40 w-40 rounded-full"
      width={128}
      height={128}
      src={image}
      alt={name}
    />
    <div className="mt-4">
      <h3 className="text-lg font-medium text-gray-900">{name}</h3>
      <p className="text-sm text-gray-500">{role}</p>
    </div>
  </div>
);

function shuffle(array: any[]) {
  let currentIndex = array.length;

  // While there remain elements to shuffle...
  while (currentIndex != 0) {
    // Pick a remaining element...
    let randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;

    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex],
    ];
  }
}

const AboutPage = () => {
  const teamMembers = allAuthors.map((author) => ({
    name: author.displayName,
    role: author.role,
    image: author.avatarUrl,
  }));
  shuffle(teamMembers);

  return (
    <div className="bg-gray-100 min-h-screen">
      <header className="bg-white shadow">
        <div className="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
          <h1 className="text-3xl font-bold text-gray-900">About Us</h1>
        </div>
      </header>
      <main>
        <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
          <div className="px-4 py-6 sm:px-0">
            <div className="text-center mb-12">
              <h2 className="text-3xl font-extrabold text-gray-900 sm:text-4xl">
                Empowering Canadian Businesses with Innovative Technology
              </h2>
              <p className="mt-4 text-xl text-gray-500">
                Techaro Computing Canada is at the forefront of digital
                transformation, helping businesses across the country leverage
                cutting-edge technology to drive growth and innovation.
              </p>
            </div>

            <div className="bg-white shadow overflow-hidden sm:rounded-lg mb-12">
              <div className="px-4 py-5 sm:px-6">
                <h3 className="text-lg leading-6 font-medium text-gray-900">
                  Our Mission
                </h3>
              </div>
              <div className="border-t border-gray-200">
                <dl>
                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt className="text-sm font-medium text-gray-500 flex items-center">
                      <User className="h-5 w-5 mr-2 text-blue-500" />
                      Client Focus
                    </dt>
                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                      We are dedicated to understanding and meeting the unique
                      needs of each client, ensuring their success in the
                      digital landscape.
                    </dd>
                  </div>
                  <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt className="text-sm font-medium text-gray-500 flex items-center">
                      <Award className="h-5 w-5 mr-2 text-blue-500" />
                      Innovation
                    </dt>
                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                      We continuously explore and implement the latest
                      technologies to provide cutting-edge solutions for our
                      clients.
                    </dd>
                  </div>
                  <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                    <dt className="text-sm font-medium text-gray-500 flex items-center">
                      <Globe className="h-5 w-5 mr-2 text-blue-500" />
                      Canadian Focus
                    </dt>
                    <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
                      We are committed to strengthening the Canadian tech
                      ecosystem and helping local businesses compete on a global
                      scale.
                    </dd>
                  </div>
                </dl>
              </div>
            </div>

            <div className="text-center mb-12">
              <h3 className="text-2xl font-bold text-gray-900">Our Team</h3>
              <div className="mt-10 grid grid-cols-1 gap-10 sm:grid-cols-2 lg:grid-cols-3">
                {teamMembers.map((member, index) => (
                  <TeamMember key={index} {...member} />
                ))}
              </div>
            </div>

            <div className="bg-blue-700 rounded-lg shadow-xl overflow-hidden">
              <div className="px-4 py-5 sm:p-6 text-center">
                <h3 className="text-2xl font-semibold text-white mb-4">
                  Ready to Transform Your Business?
                </h3>
                <p className="text-blue-100 mb-6">
                  Let{"'"}s discuss how Techaro Computing Canada can help you
                  achieve your technology goals.
                </p>
                <Link href="/contact">
                  <Button className="bg-white text-blue-700 hover:bg-blue-50">
                    Schedule a Consultation
                  </Button>
                </Link>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};

export default AboutPage;