Skip to content

Fix/head 121 #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
TomTyack merged 3 commits into from
Jul 9, 2025
Merged

Fix/head 121 #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
77299ea
Fixed UI blockers
anhvietq Jul 7, 2025
1febb59
UI Fixes
anhvietq Jul 7, 2025
89cd0d4
Minor UI Fixes
anhvietq Jul 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
157 changes: 121 additions & 36 deletions src/theme/conversion/components/cdclients/components/variants/cdclientsDefaultVariant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,52 +2,137 @@ import React from "react";
import { StandardComponentProps } from "@conversiondigital/headless-basics-components/src/interfaces/standardComponentProps";
import { getCmsImage } from "@conversiondigital/headless-basics-data/src/cms/tools/multiCmsImageTools";
import { buttonIcon as ButtonIcon } from "../../../../styles/icons/icons";
import Link from "next/link";

interface ClientItem {
name: string;
link?: string;
inactiveLogo?: any;
activeLogo?: any;
}

export default function DefaultVariant(props: StandardComponentProps) {
interface CdclientsDefaultVariantProps extends StandardComponentProps {
matchingData: {
title?: string;
subtitle?: string;
clientsList?: ClientItem[];
buttonText?: string;
buttonUrl?: string;
};
}

const CdclientsDefaultVariant: React.FC<CdclientsDefaultVariantProps> = (props) => {
const { matchingData } = props;
const title = matchingData?.title?.toUpperCase() || "OUR CLIENTS";
const clients = matchingData?.clientsList || [];
const buttonText = matchingData?.buttonText || "View All Clients";
const buttonLink = matchingData?.buttonLink || "#";
const subtitle = matchingData?.subtitle;
const clientsList = matchingData?.clientsList || [];
const buttonText = matchingData?.buttonText;
const buttonUrl = matchingData?.buttonUrl;

return (
<section
id="cdclients-default"
className="bg-white text-[#0D0E47] py-20 px-4 md:px-8"
>
<div className="max-w-7xl mx-auto">
<section className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-6">
<div className="mb-16">
<h2 className="text-[#0C093F] font-extrabold text-2xl !important md:text-3xl !important mb-4">{title}</h2>
{title && (
<h2 className="text-3xl md:text-3xl font-bold text-[#0D0E47] mb-4">
{title}
</h2>
)}
{subtitle && (
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
{subtitle}
</p>
)}
<div className="w-full h-0.5 bg-gray-300"></div>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 md:gap-12">
{Array.isArray(clients) &&
clients.map((client: any, index: number) => {
const logoUrl = client?.logo?.asset?.url;
return (
<div key={index} className="flex items-center justify-center h-24 md:h-32 p-4">
{logoUrl && (
<img
src={logoUrl}
alt={client?.name || "Client"}
className="object-contain max-h-16 md:max-h-20 hover:opacity-80 transition"
/>
)}
</div>
);
})}
</div>
<div className="flex justify-center mt-12">
<a
href={buttonLink}
className="bg-[#800928] text-[#FFF6EC] font-semibold text-lg md:text-xl px-10 py-4 rounded-full hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-[44px]"
>
{buttonText}
<ButtonIcon/>
</a>
</div>


{clientsList.length > 0 && (
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 mb-12">
{clientsList.map((client, index) => (
<div
key={index}
className="group flex items-center justify-center p-4"
>
{client.link ? (
<a
href={client.link}
target="_blank"
rel="noopener noreferrer"
className="block w-full h-full"
>
<div className="relative w-full h-16 flex items-center justify-center">
{client.inactiveLogo && (
<img
src={client.inactiveLogo.asset?.url || client.inactiveLogo}
alt={`${client.name} logo`}
className="absolute inset-0 w-full h-16 object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-all duration-300 ease-in-out"
/>
)}

{client.activeLogo && (
<img
src={client.activeLogo.asset?.url || client.activeLogo}
alt={`${client.name} logo`}
className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
/>
)}

{client.inactiveLogo && !client.activeLogo && (
<img
src={client.inactiveLogo.asset?.url || client.inactiveLogo}
alt={`${client.name} logo`}
className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
/>
)}
</div>
</a>
) : (
<div className="relative w-full h-16 flex items-center justify-center">
{client.inactiveLogo && (
<img
src={client.inactiveLogo.asset?.url || client.inactiveLogo}
alt={`${client.name} logo`}
className="absolute inset-0 w-full h-16 object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-all duration-300 ease-in-out"
/>
)}

{client.activeLogo && (
<img
src={client.activeLogo.asset?.url || client.activeLogo}
alt={`${client.name} logo`}
className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
/>
)}

{client.inactiveLogo && !client.activeLogo && (
<img
src={client.inactiveLogo.asset?.url || client.inactiveLogo}
alt={`${client.name} logo`}
className="absolute inset-0 w-full h-16 object-contain opacity-0 group-hover:opacity-100 transition-all duration-300 ease-in-out"
/>
)}
</div>
)}
</div>
))}
</div>
)}

{buttonText && buttonUrl && (
<div className="text-center">
<Link
href={buttonUrl}
className="bg-[#800928] text-[#FFF6EC] font-semibold text-lg md:text-xl px-10 py-4 rounded-full hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-[44px]"
>
{buttonText}
<ButtonIcon/>
</Link>
</div>
)}
</div>
</section>
);
};

export default CdclientsDefaultVariant;
37 changes: 30 additions & 7 deletions src/theme/conversion/components/cdclients/components/variants/demoVariant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,38 @@ const DemoVariant: React.FC<StandardComponentProps> = ({
{clientsList.map((client: any, index: number) => (
<div
key={index}
className="bg-white rounded-md shadow-md w-[140px] p-4 flex items-center justify-center"
className="bg-white rounded-md shadow-md w-[140px] p-4 flex items-center justify-center group"
>
{client.logo && (
{(client.inactiveLogo || client.activeLogo) && (
<a href={client.link || "#"} target="_blank" rel="noopener noreferrer">
<img
src={client.logo}
alt={client.name || "Client"}
className="object-contain max-h-12 hover:opacity-80 transition"
/>
<div className="relative w-full h-12 flex items-center justify-center">
{/* Inactive Logo */}
{client.inactiveLogo && (
<img
src={client.inactiveLogo.asset?.url || client.inactiveLogo}
alt={client.name || "Client"}
className="max-w-full max-h-full object-contain filter grayscale opacity-70 group-hover:opacity-0 transition-all duration-300"
/>
)}

{/* Active Logo */}
{client.activeLogo && (
<img
src={client.activeLogo.asset?.url || client.activeLogo}
alt={client.name || "Client"}
className="absolute inset-0 max-w-full max-h-full object-contain opacity-0 group-hover:opacity-100 transition-all duration-300"
/>
)}

{/* Fallback if only inactive logo exists */}
{client.inactiveLogo && !client.activeLogo && (
<img
src={client.inactiveLogo.asset?.url || client.inactiveLogo}
alt={client.name || "Client"}
className="absolute inset-0 max-w-full max-h-full object-contain opacity-0 group-hover:opacity-100 group-hover:grayscale-0 transition-all duration-300"
/>
)}
</div>
</a>
)}
</div>
Expand Down
28 changes: 24 additions & 4 deletions src/theme/conversion/components/cdclients/sanity-query.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
clientsList {
name
link
logo {
inactiveLogo {
asset {
url
}
}
activeLogo {
asset {
url
}
Expand All @@ -35,7 +40,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
clientsList {
name
link
logo {
inactiveLogo {
asset {
url
}
}
activeLogo {
asset {
url
}
Expand All @@ -59,7 +69,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
clientsList {
name
link
logo {
inactiveLogo {
asset {
url
}
}
activeLogo {
asset {
url
}
Expand All @@ -77,7 +92,12 @@ export function query(pageAndComponentCombo: PageAndSingleComponentDetails): str
clientsList {
name
link
logo {
inactiveLogo {
asset {
url
}
}
activeLogo {
asset {
url
}
Expand Down
13 changes: 10 additions & 3 deletions src/theme/conversion/components/cdclients/sanity-schema.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,16 @@ export const clientItem = defineType({
type: 'url'
}),
defineField({
name: 'logo',
title: 'Client Logo',
type: 'image'
name: 'inactiveLogo',
title: 'Inactive Logo',
type: 'image',
description: 'Logo shown by default (grayscale or muted version)'
}),
defineField({
name: 'activeLogo',
title: 'Active Logo',
type: 'image',
description: 'Logo shown on hover (colored or highlighted version)'
})
]
});
Expand Down
26 changes: 18 additions & 8 deletions src/theme/conversion/components/cdcta/components/variants/cdctaDefaultVariant.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,24 @@ const DefaultVariant: React.FC<StandardComponentProps> = ({
const buttonUrl = matchingData?.buttonUrl || "#";

return (
<section className="bg-[#86002F] py-32 text-center text-[#FFF3EA]">
<h2 className="text-5xl md:text-6xl font-extrabold tracking-tight uppercase mb-10">
{title}
</h2>
<a href={buttonUrl} className="bg-[#FFF3EA] text-[#0C093F] font-semibold text-lg md:text-xl px-10 py-4 rounded-full shadow-md hover:shadow-lg hover:scale-105 hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-[44px]">
{buttonLabel}
<ButtonIcon/>
</a>
<section className="bg-[#86002F] py-8 sm:py-12 md:py-16 lg:py-20 xl:py-32 text-center text-[#FFF3EA] px-4 sm:px-6 md:px-8 lg:px-12">
<div className="max-w-4xl mx-auto">
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl font-extrabold tracking-tight uppercase mb-6 sm:mb-8 md:mb-10 leading-tight">
{title}
</h2>
{subtitle && (
<p className="text-base sm:text-lg md:text-xl lg:text-2xl mb-6 sm:mb-8 md:mb-10 text-[#FFF3EA] opacity-90">
{subtitle}
</p>
)}
<a
href={buttonUrl}
className="bg-[#FFF3EA] text-[#0C093F] font-semibold text-base sm:text-lg md:text-xl px-6 sm:px-8 md:px-10 py-3 sm:py-4 rounded-full shadow-md hover:shadow-lg hover:scale-105 hover:bg-[#0D0E47] hover:text-[#FFF6EC] inline-flex items-center gap-4 sm:gap-[44px] transition-all duration-300"
>
{buttonLabel}
<ButtonIcon/>
</a>
</div>
</section>
);
};
Expand Down
2 changes: 1 addition & 1 deletion src/theme/conversion/components/cdfooter/sanity-mapping.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export async function mapIdentifierData(pageAndComponentCombo: PageAndSingleComp
log.trace(`${logPrefix()} thisComponentsOrder: ${thisComponentsOrder}`);


const matchingData = extractComponentsFromSanityData(content, "cdfooter", log, true, '', thisComponentsOrder);
const matchingData = extractComponentsFromSanityData(content, "cdfooter", log);

return matchingData
}
Loading
Loading