From cc22d47d1ef01dcb5e9af7799927cef49f6f0f51 Mon Sep 17 00:00:00 2001
From: pradeepkumar <kongupradeep@live.com>
Date: Tue, 24 Feb 2026 03:37:02 +0530
Subject: [PATCH] Fix: Conditionally apply CMS content to about page sections
 and refine rendering of "Why Choose Us" section elements based on data
 availability.

---
 src/app/about/page.tsx | 84 +++++++++++++++++++++++++-----------------
 1 file changed, 51 insertions(+), 33 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index 4608a40..c1ba5a7 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -91,12 +91,24 @@ export default function AboutPage() {
   useEffect(() => {
     cmsService.getPageContent('about').then((sections) => {
       sections.forEach((s: CmsContentRecord) => {
+        const c = s.content as Record<string, unknown>;
+        // Only apply CMS content if it has meaningful data; otherwise keep defaults
         switch (s.sectionKey) {
-          case 'hero': setHero(s.content as AboutHeroContent); break;
-          case 'stats': setStats(s.content as AboutStatsContent); break;
-          case 'features': setFeatures(s.content as AboutFeaturesContent); break;
-          case 'team': setTeam(s.content as AboutTeamContent); break;
-          case 'cta': setCta(s.content as AboutCtaContent); break;
+          case 'hero':
+            if (c.headline || c.description) setHero(c as unknown as AboutHeroContent);
+            break;
+          case 'stats':
+            if (Array.isArray(c.stats) && c.stats.length > 0) setStats(c as unknown as AboutStatsContent);
+            break;
+          case 'features':
+            if (c.badge || (Array.isArray(c.features) && c.features.length > 0)) setFeatures(c as unknown as AboutFeaturesContent);
+            break;
+          case 'team':
+            if (Array.isArray(c.members) && c.members.length > 0) setTeam(c as unknown as AboutTeamContent);
+            break;
+          case 'cta':
+            if (c.title || c.description) setCta(c as unknown as AboutCtaContent);
+            break;
         }
       });
     });
@@ -184,39 +196,45 @@ export default function AboutPage() {
         )}
 
         {/* Why Choose Us Section */}
-        {features.features.length > 0 && (
+        {(features.badge || features.features.length > 0) && (
           <section className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
             {/* Section Header */}
-            <div className="text-center mb-12">
-              <span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full">
-                {features.badge}
-              </span>
-            </div>
+            {features.badge && (
+              <div className="text-center mb-12">
+                <span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full">
+                  {features.badge}
+                </span>
+              </div>
+            )}
 
             {/* Feature Cards */}
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-              {features.features.map((feature, index) => (
-                <div
-                  key={index}
-                  className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow"
-                >
-                  <div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <Image
-                      src={feature.iconPath || '/assets/icons/verified-badge-orange.svg'}
-                      alt=""
-                      width={28}
-                      height={28}
-                    />
+            {features.features.length > 0 && (
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+                {features.features.map((feature, index) => (
+                  <div
+                    key={index}
+                    className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow"
+                  >
+                    {feature.iconPath && (
+                      <div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <Image
+                          src={feature.iconPath}
+                          alt=""
+                          width={28}
+                          height={28}
+                        />
+                      </div>
+                    )}
+                    <h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3">
+                      {feature.title}
+                    </h3>
+                    <p className="font-serif text-[14px] text-[#00293d] leading-relaxed">
+                      {feature.description}
+                    </p>
                   </div>
-                  <h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3">
-                    {feature.title}
-                  </h3>
-                  <p className="font-serif text-[14px] text-[#00293d] leading-relaxed">
-                    {feature.description}
-                  </p>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            )}
           </section>
         )}