update home page

components/aiero/about/TeamSection.tsx

@@ -3,27 +3,34 @@
 import { PageContainer } from "@/components/shared/PageContainer";
 import { SectionContainer } from "@/components/shared/SectionContainer";
 import { SectionHeading } from "@/components/shared/SectionHeading";
+import { tenextButton as TenextButton } from "@/components/shared/AieroButton";
+import { Counter } from "@/components/shared/Counter";
 
 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",
+    image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
   },
   {
     name: "Arthur Dowson",
     role: "AI Programmer",
-    image: "/images/aiero/funny-curious-man-makes.jpg",
+    image: "/images/tenext/funny-curious-man-makes.jpg",
+  },
+  {
+    name: "Dan Smith",
+    role: "Manager",
+    image: "/images/tenext/portrait-confident-man.jpg",
+  },
+  {
+    name: "Brandon Adams",
+    role: "HR",
+    image: "/images/tenext/confident-ginger-man-with-trendy.jpg",
+  },
+  {
+    name: "Alan Begham",
+    role: "CEO Neuro",
+    image: "/images/tenext/waist-up-shot-handsome-calm.jpg",
   },
 ];
 
@@ -31,24 +38,42 @@ 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 className="columns-1 gap-6 sm:columns-2 lg:columns-4">
+          <div className="mb-6 flex break-inside-avoid flex-col">
+            <SectionHeading
+              tag="team"
+              title="The Neural Network experts: uniting talent for intelligent solutions"
+              titleClassName="text-tenext-dark"
+            />
+            <div className="mt-[40px]">
+              <Counter
+                target={500}
+                prefix="+"
+                numberClassName="text-[60px] font-extrabold leading-none font-[var(--font-manrope)] text-transparent"
+                style={{
+                  WebkitTextStroke: "1px #E2D7F8",
+                  backgroundImage:
+                    "linear-gradient(180deg, rgba(226, 215, 248, 0.44) 0%, rgba(226, 215, 248, 0.06) 90%)",
+                  backgroundClip: "text",
+                  WebkitBackgroundClip: "text",
+                }}
+                title="Awesome team members"
+                titleClassName="mt-[15px] text-[16px] font-bold text-tenext-dark"
+              />
+            </div>
+            <TenextButton
+              variant="simple"
+              className="mt-[25px] text-[15px] font-medium text-tenext-dark"
+              showArrow={true}
+            >
+              Explore more
+            </TenextButton>
           </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"
+              className="group relative mb-6 break-inside-avoid overflow-hidden rounded-[25px] bg-tenext-card-dark"
             >
               <div className="relative aspect-[3/4] w-full">
                 <img
@@ -57,7 +82,7 @@ export function TeamSection() {
                   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
+                      "/images/tenext/home-9-img.png";
                   }}
                 />
                 <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent opacity-80" />
@@ -69,7 +94,9 @@ export function TeamSection() {
                 >
                   {member.name}
                 </h4>
-                <p className="text-[14px] text-aiero-teal">{member.role}</p>
+                <p className="text-[14px] text-tenext-teal">
+                  / {member.role} /
+                </p>
               </div>
             </div>
           ))}