Обновлены метаданные в компоненте layout для SEO, изменены адреса в компонентах Contacts и Footer, улучшена структура отображения контактов. Добавлен динамический заголовок и описание для страницы услуги с использованием useEffect в компоненте ServicePage.

2025-04-22 15:01:49 +03:00
parent 6ecc0affb8
commit ff16a39b2a
5 changed files with 91 additions and 74 deletions
--- a/app/components/Contacts.tsx
+++ b/app/components/Contacts.tsx
@ -7,7 +7,6 @@ import {
  Mail,
  Clock,
  MapPin,
-  Building,
  MessagesSquare,
  FileText,
 } from 'lucide-react';
@ -22,7 +21,7 @@ const cityContacts = {
    coordinates: [37.539042, 55.74733],
  },
  Чебоксары: {
-    address: 'г. Чебоксары, пр. Тракторостроителей, д. 11',
+    address: 'г. Чебоксары, ул. Зои Яковлевой, д. 54',
    phone: '+7 (916) 830-58-58',
    email: 'ckeproekt@yandex.ru',
    workHours: 'ПН-ПТ: 8:00 - 20:00',
@ -42,11 +41,6 @@ const features = [
    title: 'Документы онлайн',
    description: 'Возможность получить документы в электронном виде',
  },
-  {
-    icon: Building,
-    title: 'Удобное расположение',
-    description: 'Офис в центре города с удобной транспортной доступностью',
-  },
 ];

 interface ContactsProps {
@ -228,46 +222,46 @@ const Contacts = ({ selectedCity }: ContactsProps) => {
                  </motion.div>
                </div>
              </motion.div>
-
-              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-                {features.map((feature, index) => (
-                  <motion.div
-                    key={index}
-                    variants={itemVariants}
-                    whileHover={{ scale: 1.05 }}
-                    className="bg-white rounded-xl p-6 shadow-lg text-center"
-                  >
-                    <motion.div
-                      className="mb-4 flex justify-center"
-                      whileHover={{ rotate: 360 }}
-                      transition={{ duration: 0.5 }}
-                    >
-                      <div className="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
-                        <feature.icon className="h-6 w-6 text-blue-700" />
-                      </div>
-                    </motion.div>
-                    <h3 className="text-lg font-semibold text-gray-900 mb-2">
-                      {feature.title}
-                    </h3>
-                    <p className="text-gray-600 text-sm">
-                      {feature.description}
-                    </p>
-                  </motion.div>
-                ))}
-              </div>
            </motion.div>

-            <motion.div
-              variants={mapVariants}
-              className="bg-white rounded-xl shadow-lg overflow-hidden h-[600px]"
-            >
-              <iframe
-                src={`https://yandex.ru/map-widget/v1/?ll=${cityData.coordinates[0]},${cityData.coordinates[1]}&z=16&mode=search&whatshere[point]=${cityData.coordinates[0]},${cityData.coordinates[1]}&whatshere[zoom]=16`}
-                width="100%"
-                height="100%"
-                frameBorder="0"
-                title="Карта с местоположением офиса"
-              />
+            <motion.div variants={itemVariants} className="space-y-8">
+              <motion.div
+                variants={mapVariants}
+                className="bg-white rounded-xl shadow-lg overflow-hidden"
+              >
+                <div className="p-8">
+                  <h3 className="text-2xl font-semibold text-gray-900 mb-4">
+                    Как с нами связаться
+                  </h3>
+
+                  <div className="grid grid-cols-1 gap-6 mt-6">
+                    {features.map((feature, index) => (
+                      <motion.div
+                        key={index}
+                        variants={itemVariants}
+                        whileHover={{ scale: 1.02 }}
+                        className="flex items-start gap-4"
+                      >
+                        <motion.div
+                          className="flex-shrink-0"
+                          whileHover={{ rotate: 360 }}
+                          transition={{ duration: 0.5 }}
+                        >
+                          <div className="w-12 h-12 rounded-lg bg-blue-100 flex items-center justify-center">
+                            <feature.icon className="h-6 w-6 text-blue-700" />
+                          </div>
+                        </motion.div>
+                        <div>
+                          <h3 className="text-lg font-semibold text-gray-900 mb-2">
+                            {feature.title}
+                          </h3>
+                          <p className="text-gray-600">{feature.description}</p>
+                        </div>
+                      </motion.div>
+                    ))}
+                  </div>
+                </div>
+              </motion.div>
            </motion.div>
          </div>
        </motion.div>
--- a/app/components/Footer.tsx
+++ b/app/components/Footer.tsx
@ -22,12 +22,12 @@ const legalLinks = [

 const cityContacts = {
  Москва: {
-    address: 'г. Москва, ул. Пресненская, д. 6, стр. 2',
+    address: 'г. Москва, ул. Космонавта Волкова, д. 29к1',
    phone: '+7 (916) 830-58-58',
    email: 'ckeproekt@yandex.ru',
  },
  Чебоксары: {
-    address: 'г. Чебоксары, пр. Тракторостроителей, д. 11',
+    address: 'г. Чебоксары, ул. Зои Яковлевой, д. 54',
    phone: '+7 (916) 830-58-58',
    email: 'ckeproekt@yandex.ru',
  },
--- a/app/components/Services.tsx
+++ b/app/components/Services.tsx
@ -178,9 +178,9 @@ const Services = () => {
                    scale: 1.02,
                    transition: { duration: 0.2 },
                  }}
-                  className="group bg-gray-50 rounded-xl p-6 hover:bg-blue-700 transition-all duration-300 h-full"
+                  className="group bg-gray-50 rounded-xl p-6 hover:bg-blue-700 transition-all duration-300 h-full flex flex-col"
                >
-                  <div className="flex items-start space-x-4">
+                  <div className="flex items-start space-x-4 mb-4">
                    <div className="flex-shrink-0">
                      <motion.div
                        whileHover={{ rotate: 360 }}
@ -191,26 +191,28 @@ const Services = () => {
                      </motion.div>
                    </div>
                    <div>
-                      <h3 className="text-xl font-semibold text-gray-900 group-hover:text-white mb-2">
+                      <h3 className="text-xl font-semibold text-gray-900 group-hover:text-white mb-2 line-clamp-2 h-14">
                        {service.title}
                      </h3>
-                      <p className="text-gray-600 group-hover:text-blue-100 mb-4">
+                      <p className="text-gray-600 group-hover:text-blue-100 mb-4 line-clamp-3 h-18">
                        {service.description}
                      </p>
-                      <ul className="space-y-2">
-                        {service.details.map((detail, idx) => (
-                          <li
-                            key={idx}
-                            className="flex items-center text-gray-600 group-hover:text-blue-100"
-                          >
-                            <ArrowRight className="h-4 w-4 mr-2 flex-shrink-0" />
-                            <span>{detail}</span>
-                          </li>
-                        ))}
-                      </ul>
                    </div>
                  </div>
-                  <div className="relative h-64 mt-4 rounded-lg overflow-hidden">
+
+                  <ul className="space-y-2 mb-4">
+                    {service.details.map((detail, idx) => (
+                      <li
+                        key={idx}
+                        className="flex items-start text-gray-600 group-hover:text-blue-100"
+                      >
+                        <ArrowRight className="h-4 w-4 mr-2 flex-shrink-0 mt-1" />
+                        <span className="line-clamp-1">{detail}</span>
+                      </li>
+                    ))}
+                  </ul>
+
+                  <div className="relative h-48 mt-auto rounded-lg overflow-hidden">
                    <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent z-10" />
                    <Image
                      src={service.image}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,20 +1,23 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import type { Metadata } from 'next';
+import { Geist, Geist_Mono } from 'next/font/google';
+import './globals.css';

 const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
+  variable: '--font-geist-sans',
+  subsets: ['latin'],
 });

 const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
+  variable: '--font-geist-mono',
+  subsets: ['latin'],
 });

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Независимая строительно-техническая экспертиза | СКЭ Проект',
+  description:
+    'Профессиональная экспертиза при заливах, обследование инженерных систем, оценка качества строительных работ в Москве и Чебоксарах. Официальные заключения.',
+  keywords:
+    'строительная экспертиза, экспертиза залива, обследование канализации, тепловизионная экспертиза, оценка строительных работ',
 };

 export default function RootLayout({
@ -23,7 +26,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="ru">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
--- a/app/services/[slug]/page.tsx
+++ b/app/services/[slug]/page.tsx
@ -1,6 +1,6 @@
 'use client';

-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import {
  ArrowLeft,
@ -33,6 +33,24 @@ export default function ServicePage({ params }: ServicePageProps) {
  const { slug } = use(params);
  const service = services.find((s) => s.slug === slug);

+  // Добавляем динамический заголовок и описание для SEO
+  useEffect(() => {
+    if (service) {
+      document.title = `${service.title} | СКЭ Проект`;
+      const metaDescription = document.querySelector(
+        'meta[name="description"]'
+      );
+      if (metaDescription) {
+        metaDescription.setAttribute('content', service.description);
+      } else {
+        const meta = document.createElement('meta');
+        meta.name = 'description';
+        meta.content = service.description;
+        document.head.appendChild(meta);
+      }
+    }
+  }, [service]);
+
  if (!service) {
    return <div>Услуга не найдена</div>;
  }