fix about page

components/aiero/WOWSection.tsx

@@ -0,0 +1,75 @@
+import Link from "next/link";
+import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";
+import { PageContainer } from "@/components/shared/PageContainer";
+
+export function WOWSection() {
+  return (
+    <section className="relative z-20 px-[20px]">
+      <div className="relative z-20 mx-auto max-w-[1340px] overflow-hidden rounded-t-[20px] bg-aiero-dark pt-[30px] pb-[60px] md:pt-[40px] md:pb-[80px]">
+        <PageContainer>
+          <div className="grid grid-cols-1 gap-[40px] lg:grid-cols-2 lg:gap-[60px]">
+            <div className="flex flex-col justify-between">
+              <div className="mb-[35px] md:mb-[70px] md:pr-[10%]">
+                <span
+                  className="mb-[18px] block text-[12px] font-semibold uppercase tracking-[0.1em] text-white"
+                  style={{ fontFamily: "var(--font-sora)" }}
+                >
+                  [ about ]
+                </span>
+                <h2
+                  className="tracking-[-0.03em] text-white"
+                  style={{
+                    fontFamily: "var(--font-dm-sans)",
+                    fontSize: "clamp(44px, 5vw, 80px)",
+                    fontWeight: 500,
+                    lineHeight: 1.1,
+                  }}
+                >
+                  WOW! Meet the next evolution of neural networks
+                </h2>
+              </div>
+
+              <img
+                src="/images/aiero/home-9-img.png"
+                alt="Aiiero"
+                width={632}
+                height={158}
+                className="h-auto w-full max-w-[632px] object-contain"
+              />
+            </div>
+
+            <div className="flex flex-col justify-between">
+              <div className="max-w-[560px] text-white">
+                <p className="text-[16px] font-bold leading-[1.7]">
+                  Artificial Intelligence refers to the development of computer
+                  systems that can perform tasks that would typically require
+                  human intelligence. It involves the creation of algorithms and
+                  models that enable machines to learn, reason, perceive, and
+                  make decisions.
+                </p>
+                <p className="mt-[27px] text-[16px] font-medium leading-[1.7]">
+                  There are generally two types of AI: Narrow or Weak AI, which
+                  is designed to perform specific tasks, and General or Strong
+                  AI, which possesses human-level intelligence and can handle a
+                  wide range of tasks. AI strategies that drive innovation,
+                  optimize processes, and unlock new opportunities for growth.
+                </p>
+              </div>
+
+              <div className="mt-[40px] md:mt-[60px]">
+                <Link
+                  href="/services"
+                  className="aiero-button aiero-button-gradient-border group rounded-full px-[35px] py-[15px] font-[var(--font-sora)] text-[15px] font-semibold tracking-wide text-white transition-all"
+                >
+                  <span className="button-inner" />
+                  Explore more
+                  <ArrowIcon className="ml-2 h-[12px] w-[12px] transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1" />
+                </Link>
+              </div>
+            </div>
+          </div>
+        </PageContainer>
+      </div>
+    </section>
+  );
+}