Initial commit for iiEasy: all files included
This commit is contained in:
153
components/BusinessServicesSection.tsx
Executable file
153
components/BusinessServicesSection.tsx
Executable file
@@ -0,0 +1,153 @@
|
||||
import React from 'react';
|
||||
import { SECTION_IDS, BUSINESS_SERVICES_CONTENT } from '../constants';
|
||||
import { ServiceItemData, ClientLogo } from '../types';
|
||||
import {
|
||||
ComputerDesktopIcon, CodeBracketIcon, CpuChipIcon, MagnifyingGlassIcon,
|
||||
PaintBrushIcon, ShieldCheckIcon, UsersIcon, LightBulbIcon, ChartBarIcon, AcademicCapIcon,
|
||||
PuzzlePieceIcon, CommandLineIcon, BriefcaseIcon, BuildingOffice2Icon, BuildingLibraryIcon,
|
||||
CircleStackIcon, CurrencyDollarIcon, HomeIcon, InformationCircleIcon, NewspaperIcon, RocketLaunchIcon,
|
||||
SparklesIcon as SoraIcon, WrenchScrewdriverIcon
|
||||
} from '../components/icons'; // Ensure all potential icons are imported
|
||||
|
||||
// Define an icon map
|
||||
const iconMap: Record<string, React.ElementType> = {
|
||||
ComputerDesktopIcon,
|
||||
CodeBracketIcon,
|
||||
CpuChipIcon,
|
||||
MagnifyingGlassIcon,
|
||||
PaintBrushIcon,
|
||||
ShieldCheckIcon,
|
||||
UsersIcon,
|
||||
LightBulbIcon,
|
||||
ChartBarIcon,
|
||||
AcademicCapIcon,
|
||||
PuzzlePieceIcon,
|
||||
CommandLineIcon,
|
||||
BriefcaseIcon,
|
||||
BuildingOffice2Icon,
|
||||
BuildingLibraryIcon,
|
||||
CircleStackIcon,
|
||||
CurrencyDollarIcon,
|
||||
HomeIcon,
|
||||
InformationCircleIcon,
|
||||
NewspaperIcon,
|
||||
RocketLaunchIcon,
|
||||
SoraIcon,
|
||||
WrenchScrewdriverIcon,
|
||||
// Add other icons as needed, ensure keys match Strapi values
|
||||
};
|
||||
|
||||
interface ServiceItemProps {
|
||||
iconName: string; // Changed from icon: React.ElementType to iconName: string
|
||||
title: string;
|
||||
description: string;
|
||||
}
|
||||
|
||||
const ServiceItem: React.FC<ServiceItemProps> = ({ iconName, title, description }) => {
|
||||
const IconComponent = iconMap[iconName] || CpuChipIcon; // Fallback to a default icon
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-xl">
|
||||
<div className="flex items-start">
|
||||
<div className="flex-shrink-0">
|
||||
<IconComponent className="w-8 h-8 text-slate-600" aria-hidden="true" />
|
||||
</div>
|
||||
<div className="ml-4">
|
||||
<h3 className="font-quicksand text-xl font-semibold text-slate-800 mb-2">{title}</h3>
|
||||
<p className="font-inter text-slate-600 leading-relaxed">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface BusinessServicesSectionProps {
|
||||
serviceItems: ServiceItemData[];
|
||||
clientLogos: ClientLogo[];
|
||||
}
|
||||
|
||||
const BusinessServicesSection: React.FC<BusinessServicesSectionProps> = ({ serviceItems, clientLogos }) => {
|
||||
return (
|
||||
<section
|
||||
id={SECTION_IDS.businessServicesPage}
|
||||
className="py-16 md:py-24 bg-white min-h-screen"
|
||||
>
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<header className="mb-12 md:mb-16">
|
||||
<h1 className="font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900">
|
||||
{BUSINESS_SERVICES_CONTENT.title}
|
||||
</h1>
|
||||
<p className="mt-4 text-lg md:text-xl text-slate-700 max-w-3xl">
|
||||
{BUSINESS_SERVICES_CONTENT.subtitle}
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{serviceItems && serviceItems.length > 0 ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{serviceItems.map((service) => (
|
||||
<ServiceItem
|
||||
key={service.title}
|
||||
iconName={service.icon} // Pass iconName string
|
||||
title={service.title}
|
||||
description={service.description}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-center py-10">
|
||||
<WrenchScrewdriverIcon className="w-12 h-12 mx-auto text-slate-300 mb-4" />
|
||||
<p className="text-slate-600 font-inter">Услуги скоро будут добавлены.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{clientLogos && clientLogos.length > 0 && (
|
||||
<div className="mt-16 md:mt-24">
|
||||
<h2 className="text-center font-quicksand text-3xl sm:text-4xl font-semibold text-slate-700 mb-10">
|
||||
{BUSINESS_SERVICES_CONTENT.trustedByTitle}
|
||||
</h2>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-x-6 gap-y-8 items-center">
|
||||
{clientLogos.map((logo) => (
|
||||
<div key={logo.id} className="flex justify-center items-center group">
|
||||
<img
|
||||
src={logo.imageUrl}
|
||||
alt={logo.name}
|
||||
className="h-12 md:h-16 object-contain filter grayscale group-hover:grayscale-0 transition-all duration-300 ease-in-out"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="mt-16 md:mt-24 text-center bg-white p-8 md:p-12 rounded-xl">
|
||||
<h2 className="text-3xl font-quicksand font-semibold text-slate-800 mb-6">
|
||||
{BUSINESS_SERVICES_CONTENT.ctaTitle}
|
||||
</h2>
|
||||
<p className="font-inter text-lg text-slate-600 mb-8 max-w-xl mx-auto">
|
||||
{BUSINESS_SERVICES_CONTENT.ctaSubtitle}
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row flex-wrap justify-center items-center gap-4 sm:gap-6">
|
||||
{BUSINESS_SERVICES_CONTENT.contactMethods.map((method) => (
|
||||
<a
|
||||
key={method.id}
|
||||
href={method.href}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={`group inline-flex items-center justify-center px-6 py-3 text-base font-medium text-slate-800 ${method.bgColor} ${method.hoverBgColor} rounded-full focus:outline-none focus:ring-2 ${method.ringColor} focus:ring-offset-2 transition-all duration-150 ease-in-out font-quicksand w-full sm:w-auto sm:min-w-[180px]`}
|
||||
aria-label={method.ariaLabel}
|
||||
>
|
||||
<method.icon className="w-5 h-5" />
|
||||
<span className="ml-2.5">{method.name}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export default BusinessServicesSection;
|
||||
Reference in New Issue
Block a user