fix about page

components/aiero/HowItWorksSection.tsx

@@ -0,0 +1,65 @@
+import { SectionHeading } from "@/components/shared/SectionHeading";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+export function HowItWorksSection() {
+  const steps = [
+    {
+      number: "01",
+      title: "Neurons and Layers",
+      description: "A neural network consists of interconnected nodes called neurons. Neurons are organized into layers.",
+    },
+    {
+      number: "02",
+      title: "Activation Function",
+      description: "Each neuron applies an activation function to the weighted sum of its inputs and produces an output",
+    },
+    {
+      number: "03",
+      title: "Feedforward Process",
+      description: "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
+    },
+    {
+      number: "04",
+      title: "Activation Function",
+      description: "The inputs are multiplied by their respective weights, summed up, and passed through the activation function.",
+    },
+  ];
+
+  return (
+    <section className="bg-white px-[20px] py-[60px] md:py-[100px]">
+      <div className="mx-auto max-w-[1260px]">
+        <div className="flex flex-col md:flex-row md:items-end justify-between gap-[30px] mb-[60px]">
+          <SectionHeading
+            subtitle="how it works"
+            title="Neural networks are a fundamental component of Artificial Intelligence (AI) systems"
+            titleClassName="max-w-[700px] text-aiero-dark"
+          />
+          <div className="flex gap-[15px]">
+            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
+              <ArrowLeft size={20} />
+            </button>
+            <button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-aiero-card-border text-aiero-dark transition-colors hover:bg-aiero-card-border">
+              <ArrowRight size={20} />
+            </button>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[30px]">
+          {steps.map((step, index) => (
+            <div key={index} className="flex flex-col border-t border-aiero-card-border pt-[30px]">
+              <div className="text-[50px] font-bold text-transparent font-[var(--font-sora)]" style={{ WebkitTextStroke: "1px #3F3F3F" }}>
+                {step.number}
+              </div>
+              <h6 className="mt-[20px] mb-[15px] text-[20px] font-bold text-aiero-dark font-[var(--font-sora)]">
+                {step.title}
+              </h6>
+              <p className="text-[16px] leading-[1.6] text-aiero-text-muted">
+                {step.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}