www/app/about/page.jsx

import React from 'react';
import { User, Award, Globe } from 'lucide-react';
import { Button } from '@/components/ui/Button';

const TeamMember = ({ name, role, image }) => (
    <div className="text-center">
        <img className="mx-auto h-40 w-40 rounded-full" 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>
);

const AboutPage = () => {
    const teamMembers = [
        { name: "Jane Doe", role: "CEO & Founder", image: "/api/placeholder/150/150" },
        { name: "John Smith", role: "CTO", image: "/api/placeholder/150/150" },
        { name: "Emily Brown", role: "Head of AI", image: "/api/placeholder/150/150" },
    ];

    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 Leadership 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>
                                <Button className="bg-white text-blue-700 hover:bg-blue-50">
                                    Schedule a Consultation
                                </Button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    );
};

export default AboutPage;