103 lines
5.9 KiB
JavaScript
103 lines
5.9 KiB
JavaScript
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; |