refactor: conditionally render description and helper text in HeroSection based on content availability

This commit is contained in:
pradeepkumar
2026-04-12 16:18:54 +05:30
parent 1a23b3ccce
commit 580415f98a

View File

@@ -9,9 +9,9 @@ import type { HeroContent } from '@/types/cms';
const defaultHeroContent: HeroContent = { const defaultHeroContent: HeroContent = {
headline: '\u201cDiscover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.\u201d', headline: '\u201cDiscover verified, top-rated real estate professionals to guide your buying, selling, or investing journey.\u201d',
description: 'Discover verified, top-rated real estate professionals', description: '',
ctaButtonText: 'See All', ctaButtonText: 'See All',
helperText: 'Connect with trusted local agents to explore homes, compare options, and make smarter decisions.', helperText: '',
}; };
export function HeroSection({ content }: { content?: HeroContent }) { export function HeroSection({ content }: { content?: HeroContent }) {
@@ -128,9 +128,11 @@ export function HeroSection({ content }: { content?: HeroContent }) {
<h1 className="font-fractul font-bold text-[24px] md:text-[28px] lg:text-[30px] leading-[50px] text-[#00293d] max-w-4xl mx-auto"> <h1 className="font-fractul font-bold text-[24px] md:text-[28px] lg:text-[30px] leading-[50px] text-[#00293d] max-w-4xl mx-auto">
{data.headline} {data.headline}
</h1> </h1>
<p className="font-fractul font-bold text-[20px] md:text-[24px] leading-[40px] text-[#00293d] mt-2"> {data.description && (
{data.description} <p className="font-fractul font-bold text-[20px] md:text-[24px] leading-[40px] text-[#00293d] mt-2">
</p> {data.description}
</p>
)}
</div> </div>
{/* Search Form */} {/* Search Form */}
@@ -270,9 +272,11 @@ export function HeroSection({ content }: { content?: HeroContent }) {
</div> </div>
{/* Helper Text */} {/* Helper Text */}
<p className="text-center font-serif font-normal text-[14px] leading-[19px] text-[#00293D] mt-3 max-w-[419px] mx-auto"> {data.helperText && (
{data.helperText} <p className="text-center font-serif font-normal text-[14px] leading-[19px] text-[#00293D] mt-3 max-w-[419px] mx-auto">
</p> {data.helperText}
</p>
)}
</div> </div>
</div> </div>
</section> </section>