first commit

src/components/about/Team.tsx

@@ -0,0 +1,63 @@
+import { teamData, commonDescriptions } from '../../data/siteData'
+
+export default function Team() {
+  return (
+    <section className="py-20 bg-white" id="team">
+      <div className="container mx-auto px-4">
+        {/* Section Header */}
+        <div className="text-center max-w-3xl mx-auto mb-12">
+          <h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
+            {commonDescriptions.teamTitle}
+          </h3>
+          <p className="text-text my-3">
+            {commonDescriptions.sectionDesc}
+          </p>
+        </div>
+
+        {/* Team Grid */}
+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6 pt-5 mt-5">
+          {teamData.map((member) => (
+            <div
+              key={member.id}
+              className="team-info text-center"
+            >
+              <div className="column relative">
+                <a href="#url">
+                  <img
+                    src={member.image}
+                    alt={member.name}
+                    className="w-full h-auto object-cover rounded"
+                  />
+                </a>
+              </div>
+              <div className="column mt-4">
+                <h3 className="text-lg font-semibold font-sans">
+                  <a href="#url" className="text-title hover:text-secondary transition-colors">
+                    {member.name}
+                  </a>
+                </h3>
+                <p className="text-text">{member.role}</p>
+                <div className="social mt-3">
+                  <div className="social-left flex justify-center gap-2">
+                    <a href={member.social.facebook} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
+                      <span className="fa fa-facebook" aria-hidden="true" />
+                    </a>
+                    <a href={member.social.twitter} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
+                      <span className="fa fa-twitter" aria-hidden="true" />
+                    </a>
+                    <a href={member.social.linkedin} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
+                      <span className="fa fa-linkedin" aria-hidden="true" />
+                    </a>
+                    <a href={member.social.google} className="w-10 h-10 bg-secondary hover:bg-primary rounded flex items-center justify-center text-white transition-colors">
+                      <span className="fa fa-google-plus" aria-hidden="true" />
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}