66 lines
2.7 KiB
TypeScript
66 lines
2.7 KiB
TypeScript
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>
|
|
);
|
|
}
|