143 lines
6.7 KiB
TypeScript
143 lines
6.7 KiB
TypeScript
import { Mail, Phone, MapPin, Send, Hash, Code, Video } from 'lucide-react'
|
||
|
||
export function Footer() {
|
||
return (
|
||
<footer className="bg-gray-900 text-gray-400 pt-20 pb-10 border-t border-gray-800">
|
||
<div className="max-w-[1600px] mx-auto px-6 xl:px-12 2xl:px-16">
|
||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
|
||
<div>
|
||
<div className="flex items-center gap-3 mb-6">
|
||
<div className="w-9 h-9 bg-gradient-to-br from-blue-600 to-blue-700 rounded-lg flex items-center justify-center shadow-md">
|
||
<div className="w-5 h-5 border-2 border-white rounded"></div>
|
||
</div>
|
||
<span className="text-2xl text-white tracking-tight">SOFTCLICK</span>
|
||
</div>
|
||
<p className="mb-6 leading-relaxed">Комплексные IT-решения для развития бизнеса</p>
|
||
<div className="flex gap-4">
|
||
<a
|
||
href="#"
|
||
className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
|
||
title="Telegram"
|
||
>
|
||
<Send className="w-5 h-5" />
|
||
</a>
|
||
<a
|
||
href="#"
|
||
className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
|
||
title="VK"
|
||
>
|
||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12.785 16.241s.288-.032.436-.19c.136-.145.131-.419.131-.419s-.019-1.281.576-1.47c.586-.185 1.341 1.238 2.138 1.788.604.417 1.064.325 1.064.325l2.137-.03s1.117-.069.587-.948c-.043-.072-.309-.651-1.589-1.84-1.339-1.246-1.16-1.044.453-3.197.983-1.312 1.376-2.113 1.253-2.456-.117-.328-.84-.241-.84-.241l-2.406.015s-.178-.024-.31.055c-.129.077-.212.258-.212.258s-.381.987-.887 1.827c-1.063 1.766-1.497 1.86-1.668 1.748-.395-.259-.296-1.04-.296-1.595 0-1.734.263-2.456-.512-2.642-.258-.062-.447-.102-1.106-.109-.845-.009-1.56.003-1.964.201-.269.132-.476.426-.35.443.156.021.509.095.696.349.241.328.233 1.064.233 1.064s.139 2.042-.324 2.296c-.318.174-.754-.182-1.69-1.806-.479-.821-.841-1.729-.841-1.729s-.07-.171-.194-.263c-.151-.111-.362-.146-.362-.146l-2.286.015s-.343.01-.469.159c-.112.132-.009.405-.009.405s1.789 4.182 3.814 6.291c1.857 1.935 3.965 1.808 3.965 1.808h.955z" />
|
||
</svg>
|
||
</a>
|
||
<a
|
||
href="#"
|
||
className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
|
||
title="Habr"
|
||
>
|
||
<svg className="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm4.326 14.467H7.674v-1.652h8.652v1.652zm0-3.239H7.674V9.576h8.652v1.652z" />
|
||
</svg>
|
||
</a>
|
||
<a
|
||
href="#"
|
||
className="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center hover:bg-blue-600 transition-colors border border-gray-700 hover:border-blue-600"
|
||
title="VK Video"
|
||
>
|
||
<Video className="w-5 h-5" />
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="text-white mb-6">Решения</h4>
|
||
<ul className="space-y-3">
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Облачные решения
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Кибербезопасность
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Цифровая трансформация
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Управление данными
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="text-white mb-6">Компания</h4>
|
||
<ul className="space-y-3">
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
О нас
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Карьера
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Новости
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Партнерам
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="text-white mb-6">Контакты</h4>
|
||
<ul className="space-y-4">
|
||
<li className="flex items-start gap-3">
|
||
<Phone className="w-5 h-5 mt-1 flex-shrink-0 text-blue-400" />
|
||
<div>
|
||
<div className="text-white">+7 (495) 123-45-67</div>
|
||
<div>Пн-Пт 9:00-18:00</div>
|
||
</div>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<Mail className="w-5 h-5 mt-1 flex-shrink-0 text-blue-400" />
|
||
<a href="mailto:info@softclick.ru" className="hover:text-blue-400 transition-colors">
|
||
info@softclick.ru
|
||
</a>
|
||
</li>
|
||
<li className="flex items-start gap-3">
|
||
<MapPin className="w-5 h-5 mt-1 flex-shrink-0 text-blue-400" />
|
||
<div>Москва, Пресненская наб., 12</div>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center gap-4">
|
||
<div>© 2025 SOFTCLICK. Все права защищены.</div>
|
||
<div className="flex gap-6">
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Политика конфиденциальности
|
||
</a>
|
||
<a href="#" className="hover:text-blue-400 transition-colors">
|
||
Условия использования
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
)
|
||
}
|