ServicesSection.js

import clock from "../img/clock.svg"
import diaphragm from "../img/diaphragm.svg"
import money from "../img/money.svg"
import teamwork from "../img/teamwork.svg"


const cards = [
	{ icon: clock, h1Text: "Efficient", pText: "So efficient!" },
	{ icon: teamwork, h1Text: "Teamwork", pText: "Such teamwork" },
	{ icon: diaphragm, h1Text: "Diaphragm", pText: "Diaphphgraprhagm" },
	{ icon: money, h1Text: "Money", pText: "Money > No money" },
]

function servicesSection() {
	return (
		<div className="services">
			<div className="description">
				<h2>High <span>quality</span> services</h2>

				<div className="cards">
					{cards.map(card => {
						return (
							<div className="card">
								<div className="icon">
									<h1>{card.h1Text}</h1>
									<div className="image">
										<img src={card.icon} alt="lol" />
									</div>
									<p>{card.pText}</p>
								</div>
							</div>
						)
					})}
				</div>

			</div>
		</div>
	)
}

export default servicesSection