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:
@@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user