refactor: conditionally render description and helper text in HeroSection based on content availability
This commit is contained in:
@@ -9,9 +9,9 @@ import type { HeroContent } from '@/types/cms';
|
||||
|
||||
const defaultHeroContent: HeroContent = {
|
||||
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',
|
||||
helperText: 'Connect with trusted local agents to explore homes, compare options, and make smarter decisions.',
|
||||
helperText: '',
|
||||
};
|
||||
|
||||
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">
|
||||
{data.headline}
|
||||
</h1>
|
||||
<p className="font-fractul font-bold text-[20px] md:text-[24px] leading-[40px] text-[#00293d] mt-2">
|
||||
{data.description}
|
||||
</p>
|
||||
{data.description && (
|
||||
<p className="font-fractul font-bold text-[20px] md:text-[24px] leading-[40px] text-[#00293d] mt-2">
|
||||
{data.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Search Form */}
|
||||
@@ -270,9 +272,11 @@ export function HeroSection({ content }: { content?: HeroContent }) {
|
||||
</div>
|
||||
|
||||
{/* 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}
|
||||
</p>
|
||||
{data.helperText && (
|
||||
<p className="text-center font-serif font-normal text-[14px] leading-[19px] text-[#00293D] mt-3 max-w-[419px] mx-auto">
|
||||
{data.helperText}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user