first commit

src/components/home/Features.tsx

@@ -0,0 +1,51 @@
+import { Link } from '@tanstack/react-router'
+import { featuresData, commonDescriptions } from '../../data/siteData'
+
+export default function Features() {
+  return (
+    <section className="py-20 bg-white" id="about">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-wrap lg:flex-nowrap gap-12">
+          {/* Left Content */}
+          <div className="w-full lg:w-1/3">
+            <h4 className="text-lg font-semibold text-secondary mb-3">
+              {commonDescriptions.featuresSubtitle}
+            </h4>
+            <p className="text-text mt-3 leading-relaxed">
+              {commonDescriptions.featuresDesc}
+            </p>
+            <Link
+              to="/services"
+              className="inline-block mt-4 px-6 py-3 bg-secondary hover:bg-secondary/80 text-white font-semibold rounded transition-colors"
+            >
+              See More Services &rarr;
+            </Link>
+          </div>
+
+          {/* Right Content - Feature Cards */}
+          <div className="w-full lg:w-2/3 grid sm:grid-cols-2 gap-6 lg:pl-8">
+            {featuresData.map((feature) => (
+              <div key={feature.id} className="feature-gd">
+                <img
+                  src={feature.image}
+                  alt={feature.title}
+                  className="w-full h-auto object-cover rounded"
+                />
+                <div className="icon-info mt-3">
+                  <h5 className="text-lg font-semibold mt-3">
+                    <a href="#" className="text-title hover:text-secondary transition-colors">
+                      {feature.title}
+                    </a>
+                  </h5>
+                  <p className="text-text mt-2">
+                    {feature.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}