diff --git a/app/components/home/FAQSection.tsx b/app/components/home/FAQSection.tsx index dc28c12..dc47ac5 100644 --- a/app/components/home/FAQSection.tsx +++ b/app/components/home/FAQSection.tsx @@ -46,11 +46,11 @@ const FAQSection = ({ data }: FAQSectionProps) => {
diff --git a/app/components/home/HeroSection.tsx b/app/components/home/HeroSection.tsx index 013979f..d123810 100644 --- a/app/components/home/HeroSection.tsx +++ b/app/components/home/HeroSection.tsx @@ -1,25 +1,60 @@ import { getCmsImageUrl } from '@/utils/image'; import Link from 'next/link'; +interface HeroSlide { + title: string; + subtitle: string; + description: string; + primaryButton: { + label: string; + href: string; + }; + secondaryButton: { + label: string; + href: string; + }; + heroImage?: string; + videoUrl: string; +} + interface HeroSectionProps { data: { - title: string; - subtitle: string; - description: string; - primaryButton: { - label: string; - href: string; - }; - secondaryButton: { - label: string; - href: string; - }; backgroundImage: string; - videoUrl: string; + // Optional multi-slide support from CMS + slides?: HeroSlide[]; + // Legacy single-slide fields (fallback) + title?: string; + subtitle?: string; + description?: string; + primaryButton?: { + label: string; + href: string; + }; + secondaryButton?: { + label: string; + href: string; + }; + heroImage?: string; + videoUrl?: string; }; } const HeroSection = ({ data }: HeroSectionProps) => { + const slides: HeroSlide[] = + (data.slides && data.slides.length > 0) + ? data.slides + : [{ + title: data.title || '', + subtitle: data.subtitle || '', + description: data.description || '', + primaryButton: data.primaryButton || { label: '', href: '#' }, + secondaryButton: data.secondaryButton || { label: '', href: '#' }, + heroImage: data.heroImage, + videoUrl: data.videoUrl || '', + }]; + + const firstSlide = slides[0]; + return (
@@ -49,46 +84,51 @@ const HeroSection = ({ data }: HeroSectionProps) => {
-
-
-
{data.subtitle}
-

- {data.title} - - - -

-

- {data.description} -

-
- - {data.primaryButton.label} - - - - {data.secondaryButton.label} - - + {slides.map((slide, index) => ( +
+
+
{slide.subtitle}
+

+ {slide.title} + {slide.videoUrl && ( + + + + )} +

+

+ {slide.description} +

+
+ {slide.primaryButton?.href && ( + + {slide.primaryButton.label} + + + )} + {slide.secondaryButton?.href && ( + + {slide.secondaryButton.label} + + + )} +
-
+ ))}
-
-
- img + {slides.map((slide, index) => ( +
+
+ img +
-
-
-
- img -
-
+ ))}
diff --git a/app/components/home/WhyChooseUs.tsx b/app/components/home/WhyChooseUs.tsx index e8e7c1e..a47bf22 100644 --- a/app/components/home/WhyChooseUs.tsx +++ b/app/components/home/WhyChooseUs.tsx @@ -3,8 +3,11 @@ import Link from 'next/link'; interface WhyChooseUsProps { data: { heading: string; + highlightWord?: string; subheading: string; description: string; + mainImage?: string; + secondaryImage?: string; items: { icon: string; title: string; @@ -19,6 +22,25 @@ interface WhyChooseUsProps { } const WhyChooseUs = ({ data }: WhyChooseUsProps) => { + const highlight = data.highlightWord?.trim(); + + let headingContent: React.ReactNode = data.heading; + + if (highlight) { + const index = data.heading.indexOf(highlight); + if (index !== -1) { + const before = data.heading.slice(0, index); + const after = data.heading.slice(index + highlight.length); + headingContent = ( + <> + {before} + {highlight} + {after} + + ); + } + } + return (
@@ -29,9 +51,9 @@ const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
- img + img
- img + img
img @@ -49,7 +71,7 @@ const WhyChooseUs = ({ data }: WhyChooseUsProps) => {
{data.subheading}

- {data.heading.split(' Dreams ')[0]} Dreams {data.heading.split(' Dreams ')[1]} + {headingContent}

diff --git a/app/components/layout/Footer/FooterBottom.tsx b/app/components/layout/Footer/FooterBottom.tsx index 9dcd7a1..7bcd406 100644 --- a/app/components/layout/Footer/FooterBottom.tsx +++ b/app/components/layout/Footer/FooterBottom.tsx @@ -22,7 +22,13 @@ const FooterBottom = () => { loadFooterData(); }, []); - const { bottom } = data; + // Ensure we always have a valid `bottom` object, even if API shape changes + const bottom = data?.bottom || footerData.bottom; + + // If bottom is still missing, avoid rendering to prevent runtime errors + if (!bottom) { + return null; + } return (

diff --git a/app/components/layout/Footer/FooterTop.tsx b/app/components/layout/Footer/FooterTop.tsx index 89263fd..6cc9d72 100644 --- a/app/components/layout/Footer/FooterTop.tsx +++ b/app/components/layout/Footer/FooterTop.tsx @@ -22,10 +22,19 @@ const FooterTop = () => { loadFooterData(); }, []); - const { top } = data; + // Ensure we always have a valid `top` object, even if API shape changes + const top = data?.top || footerData.top; + + // If for some reason `top` is still missing, avoid rendering to prevent runtime errors + if (!top) { + return null; + } return ( -