Fix: Conditionally apply CMS content to about page sections and refine rendering of "Why Choose Us" section elements based on data availability.

This commit is contained in:
pradeepkumar
2026-02-24 03:37:02 +05:30
parent 20857a9d59
commit cc22d47d1e

View File

@@ -91,12 +91,24 @@ export default function AboutPage() {
useEffect(() => { useEffect(() => {
cmsService.getPageContent('about').then((sections) => { cmsService.getPageContent('about').then((sections) => {
sections.forEach((s: CmsContentRecord) => { 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) { switch (s.sectionKey) {
case 'hero': setHero(s.content as AboutHeroContent); break; case 'hero':
case 'stats': setStats(s.content as AboutStatsContent); break; if (c.headline || c.description) setHero(c as unknown as AboutHeroContent);
case 'features': setFeatures(s.content as AboutFeaturesContent); break; break;
case 'team': setTeam(s.content as AboutTeamContent); break; case 'stats':
case 'cta': setCta(s.content as AboutCtaContent); break; 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,30 +196,35 @@ export default function AboutPage() {
)} )}
{/* Why Choose Us Section */} {/* 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 className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-20">
{/* Section Header */} {/* Section Header */}
{features.badge && (
<div className="text-center mb-12"> <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"> <span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full">
{features.badge} {features.badge}
</span> </span>
</div> </div>
)}
{/* Feature Cards */} {/* Feature Cards */}
{features.features.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
{features.features.map((feature, index) => ( {features.features.map((feature, index) => (
<div <div
key={index} key={index}
className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow" 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"> <div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
<Image <Image
src={feature.iconPath || '/assets/icons/verified-badge-orange.svg'} src={feature.iconPath}
alt="" alt=""
width={28} width={28}
height={28} height={28}
/> />
</div> </div>
)}
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3"> <h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3">
{feature.title} {feature.title}
</h3> </h3>
@@ -217,6 +234,7 @@ export default function AboutPage() {
</div> </div>
))} ))}
</div> </div>
)}
</section> </section>
)} )}