533 lines
28 KiB
TypeScript
533 lines
28 KiB
TypeScript
|
||
import { Shield, Phone, Clock, CheckCircle, Users, Award, Wrench, CameraIcon, Building2, Home, Factory, PhoneCall, ArrowRight, Star, Settings, Zap, HeadphonesIcon } from 'lucide-react'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
||
import ContactForm from '@/components/contact-form'
|
||
import Image from 'next/image'
|
||
import InteractiveButtons from '@/components/interactive-buttons'
|
||
|
||
export default function LandingPage() {
|
||
return (
|
||
<main className="min-h-screen">
|
||
{/* Hero Section */}
|
||
<section className="relative min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-900 via-gray-900 to-black">
|
||
<div className="absolute inset-0">
|
||
<Image
|
||
src="https://www.advancedcontrolcorp.com/wp-content/uploads/2021/08/CCTV-Solutions-in-South-Florida.jpg"
|
||
alt="Профессиональное видеонаблюдение"
|
||
fill
|
||
className="object-cover opacity-30"
|
||
priority
|
||
/>
|
||
</div>
|
||
<div className="relative z-10 max-w-6xl mx-auto px-4 sm:px-6 py-12 text-center text-white">
|
||
<div className="mb-6 sm:mb-8">
|
||
<Shield className="mx-auto h-12 w-12 sm:h-16 sm:w-16 text-blue-400 mb-4" />
|
||
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-7xl font-bold mb-4 sm:mb-6 bg-gradient-to-r from-blue-400 to-white bg-clip-text text-transparent leading-tight">
|
||
Профессиональный монтаж<br />видеонаблюдения
|
||
</h1>
|
||
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-300 mb-3 sm:mb-4 max-w-3xl mx-auto px-2">
|
||
Системы безопасности <span className="text-blue-400 font-semibold">любой сложности</span> в Москве
|
||
</p>
|
||
<p className="text-sm sm:text-base md:text-lg text-gray-400 mb-6 sm:mb-8 px-2">
|
||
От частных домов до крупных промышленных объектов
|
||
</p>
|
||
</div>
|
||
|
||
<div className="mb-8 sm:mb-12">
|
||
<InteractiveButtons variant="hero" />
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 sm:gap-6 max-w-4xl mx-auto">
|
||
<div className="bg-white/10 backdrop-blur-md rounded-lg p-4 sm:p-6 border border-white/20">
|
||
<Clock className="h-6 w-6 sm:h-8 sm:w-8 text-blue-400 mb-2 sm:mb-3 mx-auto" />
|
||
<h3 className="font-semibold text-base sm:text-lg mb-1 sm:mb-2">24/7 поддержка</h3>
|
||
<p className="text-gray-300 text-xs sm:text-sm">Круглосуточная техническая поддержка</p>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-md rounded-lg p-4 sm:p-6 border border-white/20">
|
||
<Award className="h-6 w-6 sm:h-8 sm:w-8 text-blue-400 mb-2 sm:mb-3 mx-auto" />
|
||
<h3 className="font-semibold text-base sm:text-lg mb-1 sm:mb-2">Гарантия качества</h3>
|
||
<p className="text-gray-300 text-xs sm:text-sm">Официальная гарантия на все работы</p>
|
||
</div>
|
||
<div className="bg-white/10 backdrop-blur-md rounded-lg p-4 sm:p-6 border border-white/20">
|
||
<Users className="h-6 w-6 sm:h-8 sm:w-8 text-blue-400 mb-2 sm:mb-3 mx-auto" />
|
||
<h3 className="font-semibold text-base sm:text-lg mb-1 sm:mb-2">Опытная команда</h3>
|
||
<p className="text-gray-300 text-xs sm:text-sm">Сертифицированные специалисты</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Services Section */}
|
||
<section className="py-12 sm:py-16 md:py-20 bg-gray-50">
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||
<div className="text-center mb-10 sm:mb-12 md:mb-16">
|
||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
|
||
Наши услуги
|
||
</h2>
|
||
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
|
||
Полный спектр услуг по установке и обслуживанию систем видеонаблюдения
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||
<Card className="hover:shadow-lg transition-shadow duration-300 group">
|
||
<div className="relative h-48 overflow-hidden rounded-t-lg">
|
||
<Image
|
||
src="https://pacifictd.com/wp-content/uploads/2023/11/CCTV-security-camera-at-home.jpg"
|
||
alt="Домашнее видеонаблюдение"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
</div>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center">
|
||
<Home className="mr-2 h-6 w-6 text-blue-600" />
|
||
Частные дома и квартиры
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-4">
|
||
Системы видеонаблюдения для защиты вашего дома и семьи
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Внутренние и внешние камеры
|
||
</li>
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Мобильное приложение
|
||
</li>
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Ночное видение
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="hover:shadow-lg transition-shadow duration-300 group">
|
||
<div className="relative h-48 overflow-hidden rounded-t-lg">
|
||
<Image
|
||
src="https://pro-vigil.com/wp-content/uploads/2022/06/Types-of-Security-Systems-for-Business.jpg"
|
||
alt="Коммерческое видеонаблюдение"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
</div>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center">
|
||
<Building2 className="mr-2 h-6 w-6 text-blue-600" />
|
||
Коммерческие объекты
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-4">
|
||
Профессиональные решения для бизнеса и офисов
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Системы контроля доступа
|
||
</li>
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Интеграция с охранной системой
|
||
</li>
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Центральный мониторинг
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="hover:shadow-lg transition-shadow duration-300 group">
|
||
<div className="relative h-48 overflow-hidden rounded-t-lg">
|
||
<Image
|
||
src="https://static.vecteezy.com/system/resources/previews/036/326/509/large_2x/ai-generated-cctv-security-safety-camera-provides-surveillance-privacy-and-protection-to-business-warehouse-photo.jpg"
|
||
alt="Промышленное видеонаблюдение"
|
||
fill
|
||
className="object-cover group-hover:scale-105 transition-transform duration-300"
|
||
/>
|
||
</div>
|
||
<CardHeader>
|
||
<CardTitle className="flex items-center">
|
||
<Factory className="mr-2 h-6 w-6 text-blue-600" />
|
||
Промышленные объекты
|
||
</CardTitle>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<p className="text-gray-600 mb-4">
|
||
Комплексные решения для крупных предприятий
|
||
</p>
|
||
<ul className="space-y-2">
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Периметральная защита
|
||
</li>
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Тепловизионные камеры
|
||
</li>
|
||
<li className="flex items-center text-sm text-gray-600">
|
||
<CheckCircle className="mr-2 h-4 w-4 text-green-500" />
|
||
Аналитические функции
|
||
</li>
|
||
</ul>
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Benefits Section */}
|
||
<section className="py-12 sm:py-16 md:py-20 bg-white">
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||
<div className="text-center mb-10 sm:mb-12 md:mb-16">
|
||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
|
||
Почему выбирают Global-IT24
|
||
</h2>
|
||
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
|
||
Мы предоставляем надежные решения безопасности с гарантией качества
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div className="text-center group">
|
||
<div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
|
||
<Shield className="h-8 w-8 text-blue-600 mx-auto" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Надежность</h3>
|
||
<p className="text-gray-600">
|
||
Используем только проверенное оборудование ведущих мировых брендов
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center group">
|
||
<div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
|
||
<Zap className="h-8 w-8 text-blue-600 mx-auto" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Быстрый монтаж</h3>
|
||
<p className="text-gray-600">
|
||
Профессиональная установка в кратчайшие сроки без ущерба качеству
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center group">
|
||
<div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
|
||
<HeadphonesIcon className="h-8 w-8 text-blue-600 mx-auto" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Поддержка 24/7</h3>
|
||
<p className="text-gray-600">
|
||
Круглосуточная техническая поддержка и оперативное решение проблем
|
||
</p>
|
||
</div>
|
||
|
||
<div className="text-center group">
|
||
<div className="bg-blue-100 rounded-full p-4 w-16 h-16 mx-auto mb-6 group-hover:bg-blue-200 transition-colors">
|
||
<Star className="h-8 w-8 text-blue-600 mx-auto" />
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Гарантия качества</h3>
|
||
<p className="text-gray-600">
|
||
Предоставляем расширенную гарантию на все виды работ и оборудование
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Process Section */}
|
||
<section className="py-12 sm:py-16 md:py-20 bg-gray-50">
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||
<div className="text-center mb-10 sm:mb-12 md:mb-16">
|
||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
|
||
Как мы работаем
|
||
</h2>
|
||
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
|
||
Простой и прозрачный процесс от консультации до запуска системы
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
<div className="relative">
|
||
<div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||
<div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
|
||
1
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Консультация</h3>
|
||
<p className="text-gray-600">
|
||
Бесплатная консультация и выезд специалиста для оценки объекта
|
||
</p>
|
||
</div>
|
||
<div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
|
||
<ArrowRight className="h-8 w-8 text-gray-300" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||
<div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
|
||
2
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Проектирование</h3>
|
||
<p className="text-gray-600">
|
||
Разработка индивидуального проекта с учетом ваших потребностей
|
||
</p>
|
||
</div>
|
||
<div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
|
||
<ArrowRight className="h-8 w-8 text-gray-300" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||
<div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
|
||
3
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Монтаж</h3>
|
||
<p className="text-gray-600">
|
||
Профессиональная установка оборудования и настройка системы
|
||
</p>
|
||
</div>
|
||
<div className="hidden lg:block absolute top-1/2 -right-4 transform -translate-y-1/2">
|
||
<ArrowRight className="h-8 w-8 text-gray-300" />
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative">
|
||
<div className="bg-white rounded-lg p-6 shadow-lg hover:shadow-xl transition-shadow">
|
||
<div className="bg-blue-600 text-white rounded-full w-12 h-12 flex items-center justify-center font-bold text-xl mb-4">
|
||
4
|
||
</div>
|
||
<h3 className="text-xl font-semibold mb-3">Запуск</h3>
|
||
<p className="text-gray-600">
|
||
Тестирование системы, обучение пользователей и сдача объекта
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Pricing Section */}
|
||
<section className="py-12 sm:py-16 md:py-20 bg-white">
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||
<div className="text-center mb-10 sm:mb-12 md:mb-16">
|
||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-4 sm:mb-6">
|
||
Пакеты услуг
|
||
</h2>
|
||
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
|
||
Выберите оптимальное решение для вашего объекта
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
<Card className="hover:shadow-xl transition-shadow duration-300 border-2 hover:border-blue-200">
|
||
<CardHeader className="text-center">
|
||
<CardTitle className="text-2xl mb-2">Базовый</CardTitle>
|
||
<p className="text-gray-600 mb-4">Для небольших объектов</p>
|
||
<div className="text-3xl font-bold text-blue-600">
|
||
от 25,000₽
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>До 4 камер</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Базовый регистратор</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Мобильное приложение</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Гарантия 1 год</span>
|
||
</div>
|
||
<InteractiveButtons variant="pricing" />
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="hover:shadow-xl transition-shadow duration-300 border-2 border-blue-500 relative overflow-hidden">
|
||
<div className="absolute top-0 left-0 right-0 bg-blue-500 text-white text-center py-2 text-sm font-semibold">
|
||
Популярный выбор
|
||
</div>
|
||
<CardHeader className="text-center pt-10">
|
||
<CardTitle className="text-2xl mb-2">Стандартный</CardTitle>
|
||
<p className="text-gray-600 mb-4">Для средних объектов</p>
|
||
<div className="text-3xl font-bold text-blue-600">
|
||
от 65,000₽
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>До 8 камер</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Профессиональный регистратор</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Удаленный доступ</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Ночное видение</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Гарантия 2 года</span>
|
||
</div>
|
||
<InteractiveButtons variant="pricing" />
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="hover:shadow-xl transition-shadow duration-300 border-2 hover:border-blue-200">
|
||
<CardHeader className="text-center">
|
||
<CardTitle className="text-2xl mb-2">Премиум</CardTitle>
|
||
<p className="text-gray-600 mb-4">Для крупных объектов</p>
|
||
<div className="text-3xl font-bold text-blue-600">
|
||
от 150,000₽
|
||
</div>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>16+ камер</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Серверное решение</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Аналитические функции</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Интеграция с системами</span>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<CheckCircle className="mr-3 h-5 w-5 text-green-500" />
|
||
<span>Гарантия 3 года</span>
|
||
</div>
|
||
<InteractiveButtons variant="pricing" />
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Contact Section */}
|
||
<section id="contact-section" className="py-12 sm:py-16 md:py-20 bg-gray-900 text-white">
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8 sm:gap-10 lg:gap-12 items-center">
|
||
<div>
|
||
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
|
||
Получите бесплатную консультацию
|
||
</h2>
|
||
<p className="text-base sm:text-lg md:text-xl text-gray-300 mb-6 sm:mb-8">
|
||
Наш специалист выедет на объект, проведет анализ и предложит оптимальное решение
|
||
</p>
|
||
|
||
<div className="space-y-4 sm:space-y-6">
|
||
<div className="flex items-center">
|
||
<Phone className="h-5 w-5 sm:h-6 sm:w-6 text-blue-400 mr-3 sm:mr-4 flex-shrink-0" />
|
||
<div>
|
||
<p className="font-semibold text-base sm:text-lg">8(985)489-16-19</p>
|
||
<p className="text-gray-400 text-sm sm:text-base">Звоните круглосуточно</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<Settings className="h-5 w-5 sm:h-6 sm:w-6 text-blue-400 mr-3 sm:mr-4 flex-shrink-0" />
|
||
<div>
|
||
<p className="font-semibold text-sm sm:text-base">Global-IT24</p>
|
||
<p className="text-gray-400 text-sm sm:text-base">Профессиональные системы безопасности</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<CheckCircle className="h-5 w-5 sm:h-6 sm:w-6 text-green-400 mr-3 sm:mr-4 flex-shrink-0" />
|
||
<p className="text-gray-300 text-sm sm:text-base">Выезд специалиста - бесплатно</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="contact-form" className="bg-white rounded-lg p-4 sm:p-6 md:p-8 text-gray-900">
|
||
<h3 className="text-xl sm:text-2xl font-bold mb-4 sm:mb-6 text-center">
|
||
Оставьте заявку
|
||
</h3>
|
||
<ContactForm />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
{/* Footer */}
|
||
<footer className="bg-gray-800 text-white py-8 sm:py-10 md:py-12">
|
||
<div className="max-w-6xl mx-auto px-4 sm:px-6">
|
||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 sm:gap-8">
|
||
<div>
|
||
<h3 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4 flex items-center">
|
||
<Shield className="mr-2 h-5 w-5 sm:h-6 sm:w-6 text-blue-400" />
|
||
Global-IT24
|
||
</h3>
|
||
<p className="text-gray-400 mb-3 sm:mb-4 text-sm sm:text-base">
|
||
Профессиональные системы видеонаблюдения в Москве
|
||
</p>
|
||
<div className="flex items-center">
|
||
<Phone className="h-4 w-4 text-blue-400 mr-2 flex-shrink-0" />
|
||
<span className="font-semibold text-sm sm:text-base">8(985)489-16-19</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="font-semibold mb-3 sm:mb-4 text-base sm:text-lg">Услуги</h4>
|
||
<ul className="space-y-2 text-gray-400 text-sm sm:text-base">
|
||
<li>Домашнее видеонаблюдение</li>
|
||
<li>Коммерческие системы</li>
|
||
<li>Промышленное видеонаблюдение</li>
|
||
<li>Техническое обслуживание</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="font-semibold mb-3 sm:mb-4 text-base sm:text-lg">Преимущества</h4>
|
||
<ul className="space-y-2 text-gray-400 text-sm sm:text-base">
|
||
<li>Гарантия качества</li>
|
||
<li>Поддержка 24/7</li>
|
||
<li>Опытная команда</li>
|
||
<li>Современное оборудование</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 className="font-semibold mb-3 sm:mb-4 text-base sm:text-lg">Контакты</h4>
|
||
<ul className="space-y-2 text-gray-400 text-sm sm:text-base">
|
||
<li>Москва и область</li>
|
||
<li>8(985)489-16-19</li>
|
||
<li>Консультации 24/7</li>
|
||
<li>Выезд специалиста</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border-t border-gray-700 mt-6 sm:mt-8 pt-6 sm:pt-8 text-center">
|
||
<p className="text-gray-400 text-xs sm:text-sm">
|
||
© 2024 Global-IT24. Все права защищены. Профессиональный монтаж видеонаблюдения в Москве.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</main>
|
||
)
|
||
}
|