final

src/components/sections/ServiceGridSection.jsx

@@ -0,0 +1,37 @@
+import { Link } from "react-router-dom"
+import { SERVICE_CARDS } from "../../data/service-grid-data"
+
+export default function ServiceGridSection() {
+  return (
+    <div
+      className="elementor-element elementor-element-97218ac elementor-widget elementor-widget-rakarservice"
+      data-id="97218ac"
+      data-element_type="widget"
+      data-e-type="widget"
+      data-widget_type="rakarservice.default"
+    >
+      <div className="elementor-widget-container">
+        <div className="row gy-4">
+          {SERVICE_CARDS.map((card) => (
+            <div key={card.number} className="col-xxl-3 col-lg-4 col-md-6">
+              <div className="service-card">
+                <div className="box-number">{card.number}</div>
+                <div className="box-icon">
+                  <img decoding="async" src={card.icon} alt={card.title} />
+                </div>
+                <p className="box-subtitle">{card.subtitle}</p>
+                <h3 className="box-title">
+                  <Link to={`/service/${card.slug}`}>{card.title}</Link>
+                </h3>
+                <p className="box-text">{card.text}</p>
+                <Link to={`/service/${card.slug}`} className="th-btn btn-sm th_btn">
+                  Read More<i className="far fa-arrow-right ms-2"></i>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}