diff --git a/public/assets/icons/clean-honest-platform-icon.svg b/public/assets/icons/clean-honest-platform-icon.svg new file mode 100644 index 0000000..20c2aea --- /dev/null +++ b/public/assets/icons/clean-honest-platform-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/equal-playing-field-icon.svg b/public/assets/icons/equal-playing-field-icon.svg new file mode 100644 index 0000000..6ee90f3 --- /dev/null +++ b/public/assets/icons/equal-playing-field-icon.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/assets/icons/no-lead-funnels-icon.svg b/public/assets/icons/no-lead-funnels-icon.svg new file mode 100644 index 0000000..e3bf9e6 --- /dev/null +++ b/public/assets/icons/no-lead-funnels-icon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx index b693021..c7479b3 100644 --- a/src/app/about/page.tsx +++ b/src/app/about/page.tsx @@ -55,10 +55,14 @@ export default function AboutPage() { } break; case 'team': - if (Array.isArray(c.members) && c.members.length > 0) { + if (c.title || c.subtitle || c.intro || (Array.isArray(c.cards) && c.cards.length > 0)) { const teamData = c as unknown as AboutTeamContent; - for (const member of teamData.members) { - member.imageUrl = await resolveImageUrl(member.imageUrl); + if (Array.isArray(teamData.cards)) { + for (const card of teamData.cards) { + card.iconPath = await resolveImageUrl(card.iconPath); + } + } else { + teamData.cards = []; } setTeam(teamData); } @@ -196,24 +200,32 @@ export default function AboutPage() { )} {/* Team Section */} - {team && team.members.length > 0 && ( + {team && (team.title || team.subtitle || team.intro || team.cards.length > 0) && (
-

- {team.title} -

-

- {team.subtitle} -

-

- RE-Quest is a unique platform in real estate where no agent can pay to be pushed to the top. RE-Quest elevates ethical, skilled, service-oriented professionals who genuinely care about their clients with no sponsorship tiers. With RE-Quest you receive: -

-
-
- {team.members.map((member, index) => ( - - ))} + {team.title && ( +

+ {team.title} +

+ )} + {team.subtitle && ( +

+ {team.subtitle} +

+ )} + {team.intro && ( +

+ {team.intro} +

+ )}
+ {team.cards.length > 0 && ( +
+ {team.cards.map((card, index) => ( + + ))} +
+ )}
)} @@ -334,12 +346,14 @@ function AboutSkeleton() {
-
+
{[1, 2, 3].map((i) => ( -
-
-
-
+
+
+
+
+
+
))}
@@ -436,38 +450,40 @@ function FeatureCard({ feature }: { feature: AboutFeaturesContent['features'][nu // Team card — shimmer image while loading // --------------------------------------------------------------------------- -function TeamCard({ member }: { member: AboutTeamContent['members'][number] }) { - const [imgStatus, setImgStatus] = useState<'loading' | 'loaded' | 'error'>( - member.imageUrl ? 'loading' : 'error' +function TeamCard({ card }: { card: AboutTeamContent['cards'][number] }) { + const [iconStatus, setIconStatus] = useState<'loading' | 'loaded' | 'error'>( + card.iconPath ? 'loading' : 'error' ); useEffect(() => { - setImgStatus(member.imageUrl ? 'loading' : 'error'); - }, [member.imageUrl]); + setIconStatus(card.iconPath ? 'loading' : 'error'); + }, [card.iconPath]); return ( -
-
- {imgStatus === 'loading' && ( -
- )} - {member.imageUrl && imgStatus !== 'error' && ( - /* eslint-disable-next-line @next/next/no-img-element */ - { if (el?.complete) setImgStatus(el.naturalWidth > 0 ? 'loaded' : 'error'); }} - src={member.imageUrl} - alt={member.name} - className={`w-full h-full object-cover transition-opacity duration-300 ${imgStatus === 'loaded' ? 'opacity-100' : 'opacity-0'}`} - onLoad={() => setImgStatus('loaded')} - onError={() => setImgStatus('error')} - /> - )} +
+
+
+ {iconStatus === 'loading' && ( +
+ )} + {card.iconPath && iconStatus !== 'error' && ( + /* eslint-disable-next-line @next/next/no-img-element */ + { if (el?.complete) setIconStatus(el.naturalWidth > 0 ? 'loaded' : 'error'); }} + src={card.iconPath} + alt="" + className={`w-[36px] h-[36px] object-contain transition-opacity duration-300 ${iconStatus === 'loaded' ? 'opacity-100' : 'opacity-0'}`} + onLoad={() => setIconStatus('loaded')} + onError={() => setIconStatus('error')} + /> + )} +
-

- {member.name} +

+ {card.title}

-

- {member.role} +

+ {card.description}

); diff --git a/src/types/cms.ts b/src/types/cms.ts index 4cf5e05..2472298 100644 --- a/src/types/cms.ts +++ b/src/types/cms.ts @@ -95,16 +95,17 @@ export interface AboutFeaturesContent { features: AboutFeatureItem[]; } -export interface AboutTeamMember { - name: string; - role: string; - imageUrl: string; +export interface AboutTeamCard { + title: string; + description: string; + iconPath: string; } export interface AboutTeamContent { title: string; subtitle: string; - members: AboutTeamMember[]; + intro: string; + cards: AboutTeamCard[]; } export interface AboutCtaContent {