sa/global_it24_landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Исправлена мобильная версия сайта

Browse Source
This commit is contained in:
DeepAgent
2025-10-25 08:19:00 +00:00
parent 43fa160ba0
commit d688d93bc0
4 changed files with 86 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
nextjs_space/app/page.tsx
View File

@@ -20,52 +20,52 @@ export default function LandingPage() {
priority
/>
</div>
<div className="relative z-10 max-w-6xl mx-auto px-6 text-center text-white">
<div className="mb-8">
<Shield className="mx-auto h-16 w-16 text-blue-400 mb-4" />
<h1 className="text-5xl md:text-7xl font-bold mb-6 bg-gradient-to-r from-blue-400 to-white bg-clip-text text-transparent">
<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-xl md:text-2xl text-gray-300 mb-4 max-w-3xl mx-auto">
<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-lg text-gray-400 mb-8">
<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-12">
<div className="mb-8 sm:mb-12">
<InteractiveButtons variant="hero" />
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
<div className="bg-white/10 backdrop-blur-md rounded-lg p-6 border border-white/20">
<Clock className="h-8 w-8 text-blue-400 mb-3 mx-auto" />
<h3 className="font-semibold text-lg mb-2">24/7 поддержка</h3>
<p className="text-gray-300 text-sm">Круглосуточная техническая поддержка</p>
<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-6 border border-white/20">
<Award className="h-8 w-8 text-blue-400 mb-3 mx-auto" />
<h3 className="font-semibold text-lg mb-2">Гарантия качества</h3>
<p className="text-gray-300 text-sm">Официальная гарантия на все работы</p>
<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-6 border border-white/20">
<Users className="h-8 w-8 text-blue-400 mb-3 mx-auto" />
<h3 className="font-semibold text-lg mb-2">Опытная команда</h3>
<p className="text-gray-300 text-sm">Сертифицированные специалисты</p>
<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-20 bg-gray-50">
<div className="max-w-6xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
<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-xl text-gray-600 max-w-3xl mx-auto">
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
Полный спектр услуг по установке и обслуживанию систем видеонаблюдения
</p>
</div>
@@ -183,13 +183,13 @@ export default function LandingPage() {
</section>
{/* Benefits Section */}
<section className="py-20 bg-white">
<div className="max-w-6xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
<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-xl text-gray-600 max-w-3xl mx-auto">
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
Мы предоставляем надежные решения безопасности с гарантией качества
</p>
</div>
@@ -239,13 +239,13 @@ export default function LandingPage() {
</section>
{/* Process Section */}
<section className="py-20 bg-gray-50">
<div className="max-w-6xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
<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-xl text-gray-600 max-w-3xl mx-auto">
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
Простой и прозрачный процесс от консультации до запуска системы
</p>
</div>
@@ -312,13 +312,13 @@ export default function LandingPage() {
</section>
{/* Pricing Section */}
<section className="py-20 bg-white">
<div className="max-w-6xl mx-auto px-6">
<div className="text-center mb-16">
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
<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-xl text-gray-600 max-w-3xl mx-auto">
<p className="text-base sm:text-lg md:text-xl text-gray-600 max-w-3xl mx-auto px-2">
Выберите оптимальное решение для вашего объекта
</p>
</div>
@@ -426,43 +426,43 @@ export default function LandingPage() {
</section>
{/* Contact Section */}
<section id="contact-section" className="py-20 bg-gray-900 text-white">
<div className="max-w-6xl mx-auto px-6">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<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-4xl md:text-5xl font-bold mb-6">
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold mb-4 sm:mb-6">
Получите бесплатную консультацию
</h2>
<p className="text-xl text-gray-300 mb-8">
<p className="text-base sm:text-lg md:text-xl text-gray-300 mb-6 sm:mb-8">
Наш специалист выедет на объект, проведет анализ и предложит оптимальное решение
</p>
<div className="space-y-6">
<div className="space-y-4 sm:space-y-6">
<div className="flex items-center">
<Phone className="h-6 w-6 text-blue-400 mr-4" />
<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-lg">8(985)489-16-19</p>
<p className="text-gray-400">Звоните круглосуточно</p>
<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-6 w-6 text-blue-400 mr-4" />
<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">Global-IT24</p>
<p className="text-gray-400">Профессиональные системы безопасности</p>
<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-6 w-6 text-green-400 mr-4" />
<p className="text-gray-300">Выезд специалиста - бесплатно</p>
<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-8 text-gray-900">
<h3 className="text-2xl font-bold mb-6 text-center">
<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 />
@@ -472,26 +472,26 @@ export default function LandingPage() {
</section>
{/* Footer */}
<footer className="bg-gray-800 text-white py-12">
<div className="max-w-6xl mx-auto px-6">
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
<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-xl font-bold mb-4 flex items-center">
<Shield className="mr-2 h-6 w-6 text-blue-400" />
<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-4">
<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" />
<span className="font-semibold">8(985)489-16-19</span>
<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-4">Услуги</h4>
<ul className="space-y-2 text-gray-400">
<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>
@@ -500,8 +500,8 @@ export default function LandingPage() {
</div>
<div>
<h4 className="font-semibold mb-4">Преимущества</h4>
<ul className="space-y-2 text-gray-400">
<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>
@@ -510,8 +510,8 @@ export default function LandingPage() {
</div>
<div>
<h4 className="font-semibold mb-4">Контакты</h4>
<ul className="space-y-2 text-gray-400">
<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>
@@ -520,8 +520,8 @@ export default function LandingPage() {
</div>
</div>
<div className="border-t border-gray-700 mt-8 pt-8 text-center">
<p className="text-gray-400">
<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>

16
nextjs_space/components/contact-form.tsx
View File

@@ -72,7 +72,7 @@ export default function ContactForm() {
}
return (
<form onSubmit={handleSubmit} className="space-y-6 max-w-md mx-auto">
<form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6 w-full">
<div className="relative">
<User className="absolute left-3 top-3 h-4 w-4 text-gray-400" />
<Input
@@ -80,7 +80,7 @@ export default function ContactForm() {
placeholder="Ваше имя *"
value={formData.name}
onChange={(e) => setFormData({...formData, name: e.target.value})}
className="pl-10"
className="pl-10 text-sm sm:text-base"
required
/>
</div>
@@ -92,7 +92,7 @@ export default function ContactForm() {
placeholder="Телефон *"
value={formData.phone}
onChange={(e) => setFormData({...formData, phone: e.target.value})}
className="pl-10"
className="pl-10 text-sm sm:text-base"
required
/>
</div>
@@ -104,7 +104,7 @@ export default function ContactForm() {
placeholder="Email (необязательно)"
value={formData.email}
onChange={(e) => setFormData({...formData, email: e.target.value})}
className="pl-10"
className="pl-10 text-sm sm:text-base"
/>
</div>
@@ -114,7 +114,7 @@ export default function ContactForm() {
value={formData.serviceType || "general"}
onValueChange={(value) => setFormData({...formData, serviceType: value})}
>
<SelectTrigger className="pl-10">
<SelectTrigger className="pl-10 text-sm sm:text-base">
<SelectValue placeholder="Тип услуги" />
</SelectTrigger>
<SelectContent>
@@ -133,7 +133,7 @@ export default function ContactForm() {
placeholder="Дополнительная информация о вашем проекте"
value={formData.message}
onChange={(e) => setFormData({...formData, message: e.target.value})}
className="pl-10 min-h-[100px]"
className="pl-10 min-h-[100px] text-sm sm:text-base"
rows={4}
/>
</div>
@@ -141,13 +141,13 @@ export default function ContactForm() {
<Button
type="submit"
size="lg"
className="w-full bg-blue-600 hover:bg-blue-700 text-white"
className="w-full bg-blue-600 hover:bg-blue-700 text-white text-sm sm:text-base"
disabled={isSubmitting}
>
{isSubmitting ? 'Отправляется...' : 'Получить консультацию'}
</Button>
<p className="text-sm text-gray-500 text-center">
<p className="text-xs sm:text-sm text-gray-500 text-center">
* - обязательные поля
</p>
</form>

10
nextjs_space/components/interactive-buttons.tsx
View File

@@ -56,23 +56,23 @@ export default function InteractiveButtons({ variant = 'hero', className = '' }:
if (variant === 'hero') {
return (
<div className={`flex flex-col sm:flex-row gap-4 justify-center ${className}`}>
<div className={`flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center ${className}`}>
<Button
size="lg"
className="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 text-lg"
className="bg-blue-600 hover:bg-blue-700 text-white px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg w-full sm:w-auto"
onClick={handlePhoneClick}
>
<Phone className="mr-2 h-5 w-5" />
<Phone className="mr-2 h-4 w-4 sm:h-5 sm:w-5" />
8(985)489-16-19
</Button>
<Button
size="lg"
variant="outline"
className="border-white text-white hover:bg-white hover:text-gray-900 px-8 py-4 text-lg"
className="border-white text-white hover:bg-white hover:text-gray-900 px-6 sm:px-8 py-3 sm:py-4 text-base sm:text-lg w-full sm:w-auto"
onClick={scrollToContact}
>
Получить консультацию
<ArrowRight className="ml-2 h-5 w-5" />
<ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5" />
</Button>
</div>
)