70 lines
2.8 KiB
TypeScript
70 lines
2.8 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: "Backpropagation",
|
|
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
|
|
tag="how it works"
|
|
title="Neural networks are a fundamental component of Artificial Intelligence (AI) systems"
|
|
titleClassName="max-w-[700px] text-tenext-dark"
|
|
/>
|
|
<div className="flex gap-[15px]">
|
|
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
|
|
<ArrowLeft size={20} />
|
|
</button>
|
|
<button className="flex h-[50px] w-[50px] items-center justify-center rounded-full border border-tenext-card-border text-tenext-dark transition-colors hover:bg-tenext-card-border">
|
|
<ArrowRight size={20} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="flex flex-col">
|
|
<div className="flex flex-wrap items-center gap-[15px] rounded-[15px] bg-gradient-to-r from-tenext-blue to-tenext-purple-start px-[25px] py-[14px] text-white">
|
|
<span className="text-[14px] font-bold">{step.number}</span>
|
|
<span className="text-[18px] font-bold font-[var(--font-sora)]">
|
|
{step.title}
|
|
</span>
|
|
</div>
|
|
<p className="mt-[20px] mb-[25px] max-w-[720px] text-[16px] leading-[1.6] text-tenext-text-muted">
|
|
{step.description}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|