update home page

components/aiero/about/TeamSection.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { PageContainer } from "@/components/shared/PageContainer";
+import { SectionContainer } from "@/components/shared/SectionContainer";
+import { SectionHeading } from "@/components/shared/SectionHeading";
+
+const teamMembers = [
+  {
+    name: "Dan Smith",
+    role: "Manager",
+    image: "/images/aiero/portrait-confident-man.jpg",
+  },
+  {
+    name: "Alan Begham",
+    role: "CEO",
+    image: "/images/aiero/waist-up-shot-handsome-calm.jpg",
+  },
+  {
+    name: "Brandon Adams",
+    role: "HR",
+    image: "/images/aiero/confident-ginger-man-with-trendy.jpg",
+  },
+  {
+    name: "Arthur Dowson",
+    role: "AI Programmer",
+    image: "/images/aiero/funny-curious-man-makes.jpg",
+  },
+];
+
+export function TeamSection() {
+  return (
+    <SectionContainer paddingY="lg">
+      <PageContainer>
+        <div className="mb-12 flex flex-col items-center justify-between gap-6 md:flex-row md:items-end">
+          <SectionHeading
+            tag="team"
+            title="The Neural Network experts: uniting talent for intelligent solutions"
+            titleClassName="text-white max-w-[600px]"
+          />
+          <div className="flex flex-col items-start gap-4 md:items-end">
+            <p className="max-w-[200px] text-[16px] text-aiero-text-muted md:text-right">
+              Awesome team members + 0 Explore more
+            </p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+          {teamMembers.map((member, i) => (
+            <div
+              key={i}
+              className="group relative overflow-hidden rounded-[25px] bg-aiero-card-dark"
+            >
+              <div className="relative aspect-[3/4] w-full">
+                <img
+                  src={member.image}
+                  alt={member.name}
+                  className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).src =
+                      "/images/aiero/home-9-img.png"; // Fallback image
+                  }}
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80" />
+              </div>
+              <div className="absolute bottom-0 left-0 w-full p-6 text-white transition-transform duration-300 group-hover:-translate-y-2">
+                <h4
+                  className="text-[20px] font-bold"
+                  style={{ fontFamily: "var(--font-dm-sans)" }}
+                >
+                  {member.name}
+                </h4>
+                <p className="text-[14px] text-aiero-teal">{member.role}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      </PageContainer>
+    </SectionContainer>
+  );
+}