first commit

src/components/home/Services.tsx

@@ -0,0 +1,51 @@
+import { servicesData, commonDescriptions } from '../../data/siteData'
+
+export default function Services() {
+  return (
+    <section className="py-20 bg-services-bg" id="services">
+      <div className="container mx-auto px-4">
+        {/* Section Header */}
+        <div className="text-center max-w-3xl mx-auto mb-12">
+          <h3 className="text-3xl md:text-4xl font-bold text-title mb-4 font-sans">
+            {commonDescriptions.servicesTitle}
+          </h3>
+          <p className="text-text my-3">
+            {commonDescriptions.sectionDesc}
+          </p>
+        </div>
+
+        {/* Service Cards */}
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6 pt-8 mt-3">
+          {servicesData.map((service) => (
+            <div
+              key={service.id}
+              className="group bg-white text-center px-5 py-10 rounded border-b-[3px] border-secondary hover:bg-secondary transition-all duration-300"
+            >
+              <div className="icon-holder mb-4">
+                <span
+                  className={`fa fa-${service.icon} text-secondary group-hover:text-white transition-colors duration-300`}
+                  style={{ fontSize: '36px' }}
+                  aria-hidden="true"
+                />
+              </div>
+              <h4 className="text-xl font-semibold text-title group-hover:text-white mb-3 font-sans transition-colors duration-300">
+                {service.title}
+              </h4>
+              <div className="open-description">
+                <p className="text-text group-hover:text-white/90 mb-5 transition-colors duration-300">
+                  {service.description}
+                </p>
+                <a
+                  href="#read"
+                  className="text-secondary group-hover:text-white font-bold transition-colors duration-300"
+                >
+                  Read More
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}