128 lines
4.0 KiB
TypeScript
128 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import accenture from "../assets/accenture.svg";
|
|
import adani from "../assets/adani-logo.svg";
|
|
import axis from "../assets/axis-bank.svg";
|
|
import ceat from "../assets/ceat-logo.svg";
|
|
import hsbc from "../assets/hsbc.svg";
|
|
import larsen from "../assets/larsen-toubro-logo.svg";
|
|
import levis from "../assets/levis.svg";
|
|
import tata from "../assets/tata-motors.svg";
|
|
import Frame1597884933 from "../imports/Frame1597884933-44-374";
|
|
|
|
// Logo data using Frame1597884944 logos with proper dimensions
|
|
const logoData = [
|
|
{ src: accenture, name: 'CANMOOR', width: 302, height: 54 }, // CANMOOR
|
|
{ src: ceat, name: 'BlackRock', width: 210, height: 54 }, // BlackRock
|
|
{ src: hsbc, name: 'Royal London', width: 145, height: 54 }, // Royal London
|
|
{ src: adani, name: 'Abstract', width: 172, height: 54 }, // Abstract
|
|
{ src: larsen, name: 'ARES', width: 163, height: 54 }, // ARES
|
|
{ src: axis, name: 'KADANS', width: 206, height: 54 }, // KADANS
|
|
{ src: levis, name: 'levis', width: 206, height: 54 }, // KADANS
|
|
{ src: tata, name: 'tata', width: 206, height: 54 },
|
|
|
|
];
|
|
|
|
// Top row logos - Original 6 unique logos
|
|
const topRowLogos = logoData.slice(0, 6);
|
|
|
|
// Bottom row logos - Repeated 6 logos for variety
|
|
const bottomRowLogos = logoData.slice(6, 12);
|
|
|
|
interface LogoItemProps {
|
|
logo: typeof logoData[0];
|
|
index: number;
|
|
duplicate?: boolean;
|
|
}
|
|
|
|
function LogoItem({ logo, index, duplicate = false }: LogoItemProps) {
|
|
// Scale down larger logos while maintaining aspect ratio
|
|
const scaledWidth = logo.width > 250 ? Math.round(logo.width * 0.8) : logo.width;
|
|
const displayWidth = Math.max(120, Math.min(scaledWidth, 250)); // Min 120px, Max 250px
|
|
|
|
return (
|
|
<div
|
|
className="logo-ticker-item flex-shrink-0 flex items-center justify-center mx-8"
|
|
style={{
|
|
width: `${displayWidth}px`,
|
|
height: '54px',
|
|
minWidth: `${displayWidth}px`,
|
|
}}
|
|
aria-label={logo.name}
|
|
role="listitem"
|
|
tabIndex={duplicate ? -1 : 0}
|
|
>
|
|
<img
|
|
src={logo.src}
|
|
alt={`${logo.name} logo`}
|
|
style={{
|
|
width: '100%',
|
|
height: 'auto',
|
|
maxHeight: '54px',
|
|
objectFit: 'contain',
|
|
}}
|
|
className="logo-ticker-item-image"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function LogosSection() {
|
|
return (
|
|
<section
|
|
className="py-16 overflow-hidden"
|
|
style={{
|
|
backgroundColor: '#F7F7FD', // Same as app background
|
|
width: '100%',
|
|
}}
|
|
>
|
|
{/* Reference Frame Component (Hidden - maintains import) */}
|
|
<div className="hidden" aria-hidden="true">
|
|
<Frame1597884933 />
|
|
</div>
|
|
|
|
{/* Logo Ticker - Two Rows */}
|
|
<div
|
|
className="w-full relative"
|
|
role="region"
|
|
aria-label="Client logos showcase"
|
|
>
|
|
{/* Top Row - Scrolling Left to Right */}
|
|
<div
|
|
className="relative h-[54px] overflow-hidden"
|
|
role="list"
|
|
aria-label="Client logos row 1"
|
|
>
|
|
<div className="flex items-center h-full will-change-transform">
|
|
<div
|
|
className="scroll-left flex items-center h-full"
|
|
style={{
|
|
width: '400%',
|
|
gap: '80px',
|
|
paddingLeft: '40px',
|
|
paddingRight: '40px'
|
|
}}
|
|
>
|
|
{/* Create multiple sets for seamless infinite scroll */}
|
|
{[1, 2, 3, 4].map((setNumber) => (
|
|
<div
|
|
key={`top-set-${setNumber}`}
|
|
className="flex items-center h-full"
|
|
style={{ gap: '80px' }}
|
|
>
|
|
{topRowLogos.map((logo, index) => (
|
|
<LogoItem
|
|
key={`top-${setNumber}-${index}`}
|
|
logo={logo}
|
|
index={index}
|
|
duplicate={setNumber > 1}
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |