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,39 +196,45 @@ 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 */}
<div className="text-center mb-12"> {features.badge && (
<span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full"> <div className="text-center mb-12">
{features.badge} <span className="bg-[#e58625]/10 text-[#e58625] font-fractul font-semibold text-[14px] px-4 py-2 rounded-full">
</span> {features.badge}
</div> </span>
</div>
)}
{/* Feature Cards */} {/* Feature Cards */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6"> {features.features.length > 0 && (
{features.features.map((feature, index) => ( <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div {features.features.map((feature, index) => (
key={index} <div
className="border border-[#00293d]/10 rounded-[15px] p-6 text-center hover:shadow-lg transition-shadow" 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 {feature.iconPath && (
src={feature.iconPath || '/assets/icons/verified-badge-orange.svg'} <div className="w-[60px] h-[60px] bg-[#e58625]/10 rounded-full flex items-center justify-center mx-auto mb-4">
alt="" <Image
width={28} src={feature.iconPath}
height={28} 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> </div>
<h3 className="font-fractul font-bold text-[18px] text-[#00293d] mb-3"> ))}
{feature.title} </div>
</h3> )}
<p className="font-serif text-[14px] text-[#00293d] leading-relaxed">
{feature.description}
</p>
</div>
))}
</div>
</section> </section>
)} )}