fix about page

components/aiero/BenefitsGridSection.tsx

@@ -0,0 +1,51 @@
+import { CheckCircle2 } from "lucide-react";
+
+export function BenefitsGridSection() {
+  return (
+    <section className="relative overflow-hidden bg-white px-[20px] pb-[60px] md:pb-[100px]">
+      <div className="mx-auto max-w-[1260px]">
+        
+        <div className="grid grid-cols-1 gap-[30px] md:grid-cols-3">
+          
+          {/* Card 1 */}
+          <div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
+            <h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
+              AI-Powered Marketing & Personalization
+            </h4>
+            <ul className="flex flex-col gap-[15px] mt-[10px]">
+              <li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
+                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
+                Hyper-personalized recommendations
+              </li>
+              <li className="flex items-start gap-[10px] text-[16px] text-aiero-text-muted">
+                <span className="mt-[5px] h-[6px] w-[6px] rounded-full bg-aiero-accent-teal shrink-0"></span>
+                AI-driven ad targeting & optimization
+              </li>
+            </ul>
+          </div>
+
+          {/* Card 2 */}
+          <div className="flex flex-col gap-[20px] rounded-[25px] border border-aiero-card-border p-[40px] transition-transform duration-300 hover:-translate-y-2">
+            <h4 className="text-[22px] font-bold leading-[1.3] text-aiero-dark font-[var(--font-sora)]">
+              Seamless AI integration for your business success
+            </h4>
+            <p className="text-[16px] leading-[1.6] text-aiero-text-muted mt-[10px]">
+              Seamless integration with existing systems and platforms & Scalable and flexible architecture
+            </p>
+          </div>
+
+          {/* Card 3 (OpenAI Logo) */}
+          <div className="flex items-center justify-center rounded-[25px] border border-aiero-card-border bg-[#F8F9FA] p-[40px] transition-transform duration-300 hover:-translate-y-2">
+            <img 
+              src="https://8ded8880.delivery.rocketcdn.me/themes/aiero/wp-content/uploads/2024/12/openai-logo-1.png" 
+              alt="OpenAI Logo" 
+              className="w-[180px] h-auto object-contain"
+            />
+          </div>
+
+        </div>
+        
+      </div>
+    </section>
+  );
+}