41 lines
1.7 KiB
TypeScript
Executable File
41 lines
1.7 KiB
TypeScript
Executable File
import React from 'react';
|
|
import { SECTION_IDS, CONNECT_SECTION_CONTENT } from '../constants';
|
|
// Icons are now part of CONNECT_SECTION_CONTENT.contactMethods
|
|
|
|
const ConnectSection: React.FC = () => {
|
|
return (
|
|
<section
|
|
id={SECTION_IDS.connect}
|
|
className="py-20 md:py-24 bg-white"
|
|
>
|
|
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-3xl mx-auto bg-white rounded-xl p-8 md:p-12 text-center transform transition-all">
|
|
<h2 className="font-quicksand text-4xl sm:text-5xl font-bold text-slate-900 mb-4">
|
|
{CONNECT_SECTION_CONTENT.title}
|
|
</h2>
|
|
<p className="font-inter text-lg text-slate-600 mb-10 md:mb-12">
|
|
{CONNECT_SECTION_CONTENT.subtitle}
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row flex-wrap justify-center items-center gap-4 sm:gap-6">
|
|
{CONNECT_SECTION_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 ConnectSection;
|