From d37fb0262d74d6ef6b2d5c87e963c978ec918369 Mon Sep 17 00:00:00 2001
From: albivkt <albivkt@outlook.com>
Date: Sun, 6 Jul 2025 16:08:36 +0300
Subject: [PATCH] Implement 3D card flip animations and enhance team member
 interaction in the About page. Update global styles for improved animations
 and performance. Refactor button interactions for documentation and
 consultation features in the SecureT page.

---
 src/app/about/page.tsx    |  34 ++++++--
 src/app/globals.css       |  58 +++++++++++++
 src/app/secure-t/page.tsx | 178 ++++++++++++++++++++++++++++++++------
 3 files changed, 237 insertions(+), 33 deletions(-)

diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index f5e3bea..7e4e1a8 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -6,7 +6,7 @@ import Navigation from '../components/Navigation';
 export default function About() {
   const [mounted, setMounted] = useState(false);
   const [activeTimelineStep, setActiveTimelineStep] = useState(0);
-  const [teamMemberFlipped, setTeamMemberFlipped] = useState<number | null>(null);
+  const [teamMemberFlipped, setTeamMemberFlipped] = useState<number[]>([]);
   const [liveCounters, setLiveCounters] = useState({
     projects: 0,
     clients: 0,
@@ -203,7 +203,15 @@ export default function About() {
   }, []);
 
   const handleTeamMemberClick = (index: number) => {
-    setTeamMemberFlipped(teamMemberFlipped === index ? null : index);
+    setTeamMemberFlipped(prev => {
+      if (prev.includes(index)) {
+        // Если карточка уже открыта, закрываем её
+        return prev.filter(i => i !== index);
+      } else {
+        // Если карточка закрыта, открываем её
+        return [...prev, index];
+      }
+    });
   };
 
   const handleCompetencyClick = (competency: string) => {
@@ -675,12 +683,13 @@ export default function About() {
             {teamMembers.map((member, index) => (
               <div
                 key={index}
-                className="relative h-80 cursor-pointer"
+                className="relative h-80 cursor-pointer group"
                 onClick={() => handleTeamMemberClick(index)}
               >
-                <div className={`absolute inset-0 w-full h-full transition-all duration-700 transform-gpu ${
-                  teamMemberFlipped === index ? 'rotateY-180' : ''
-                }`} style={{ transformStyle: 'preserve-3d' }}>
+                <div className="absolute inset-0 w-full h-full transition-all duration-700 transform-gpu" style={{ 
+                  transformStyle: 'preserve-3d',
+                  transform: teamMemberFlipped.includes(index) ? 'rotateY(180deg)' : 'rotateY(0deg)'
+                }}>
                   
                   {/* Лицевая сторона */}
                   <div className="absolute inset-0 w-full h-full glass-effect rounded-lg p-6 flex flex-col items-center justify-center text-center hover-glow transition-all duration-300"
@@ -715,6 +724,17 @@ export default function About() {
                         </span>
                       ))}
                     </div>
+                    
+                    {/* Кнопка закрытия */}
+                    <button 
+                      className="absolute top-2 right-2 w-6 h-6 bg-gray-700 rounded-full flex items-center justify-center text-gray-300 hover:bg-gray-600"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setTeamMemberFlipped(prev => prev.filter(i => i !== index));
+                      }}
+                    >
+                      ×
+                    </button>
                   </div>
                 </div>
               </div>
@@ -1103,7 +1123,7 @@ export default function About() {
               <button className="px-8 py-3 bg-green-500 text-black font-semibold rounded-lg hover-glow transition-all duration-300">
                 Связаться с нами
               </button>
-              <button className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300">
+                              <button className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300">
                 Заказать консультацию
               </button>
             </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 35e7d0f..b9cd6ff 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -197,6 +197,64 @@ body {
   animation: code-typing 2s steps(40, end);
 }
 
+/* 3D переворот карточек команды */
+.rotateY-180 {
+  transform: rotateY(180deg);
+}
+
+/* Анимация для 3D эффекта карточек */
+@keyframes card-flip {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(180deg);
+  }
+}
+
+.card-flip-container {
+  perspective: 1000px;
+}
+
+.card-flip-inner {
+  transition: transform 0.6s;
+  transform-style: preserve-3d;
+}
+
+.card-flip-inner.flipped {
+  transform: rotateY(180deg);
+}
+
+.card-face {
+  backface-visibility: hidden;
+}
+
+.card-back {
+  transform: rotateY(180deg);
+}
+
+/* Анимация появления */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+/* Улучшение производительности 3D анимаций */
+.transform-gpu {
+  transform: translateZ(0);
+  will-change: transform;
+}
+
 /* Улучшенные эффекты для технологий */
 @keyframes tech-orbit {
   0% {
diff --git a/src/app/secure-t/page.tsx b/src/app/secure-t/page.tsx
index 801d4da..52f309d 100644
--- a/src/app/secure-t/page.tsx
+++ b/src/app/secure-t/page.tsx
@@ -623,81 +623,147 @@ export default function SecureT() {
           </div>
 
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
+            <div 
+              onClick={() => {
+                window.location.href = '/secure-t/documentation';
+              }}
+              className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
+            >
               <div className="text-red-400 text-4xl mb-4 group-hover:animate-pulse-secure">🔐</div>
               <h3 className="text-xl font-bold mb-4">Криптографическая защита</h3>
               <p className="text-gray-300">
                 Современные алгоритмы шифрования для защиты конфиденциальных данных
               </p>
               <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button className="text-red-400 text-sm font-medium hover:text-red-300">
+                <a 
+                  href="/secure-t/documentation"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="text-red-400 text-sm font-medium hover:text-red-300 cursor-pointer"
+                >
                   Подробнее →
-                </button>
+                </a>
               </div>
             </div>
 
-            <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
+            <div 
+              onClick={() => {
+                window.location.href = '/secure-t/documentation';
+              }}
+              className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
+            >
               <div className="text-orange-400 text-4xl mb-4 group-hover:animate-pulse-secure">🛡️</div>
               <h3 className="text-xl font-bold mb-4">Сетевая безопасность</h3>
               <p className="text-gray-300">
                 Комплексная защита сетевой инфраструктуры от внешних угроз
               </p>
               <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button className="text-orange-400 text-sm font-medium hover:text-orange-300">
+                <a 
+                  href="/secure-t/documentation"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="text-orange-400 text-sm font-medium hover:text-orange-300 cursor-pointer"
+                >
                   Подробнее →
-                </button>
+                </a>
               </div>
             </div>
 
-            <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
+            <div 
+              onClick={() => {
+                window.location.href = '/secure-t/documentation';
+              }}
+              className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
+            >
               <div className="text-yellow-400 text-4xl mb-4 group-hover:animate-pulse-secure">📊</div>
               <h3 className="text-xl font-bold mb-4">Мониторинг безопасности</h3>
               <p className="text-gray-300">
                 Системы мониторинга и анализа инцидентов информационной безопасности
               </p>
               <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button className="text-yellow-400 text-sm font-medium hover:text-yellow-300">
+                <a 
+                  href="/secure-t/documentation"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="text-yellow-400 text-sm font-medium hover:text-yellow-300 cursor-pointer"
+                >
                   Подробнее →
-                </button>
+                </a>
               </div>
             </div>
 
-            <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
+            <div 
+              onClick={() => {
+                window.location.href = '/secure-t/documentation';
+              }}
+              className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
+            >
               <div className="text-purple-400 text-4xl mb-4 group-hover:animate-pulse-secure">🔍</div>
               <h3 className="text-xl font-bold mb-4">Аудит безопасности</h3>
               <p className="text-gray-300">
                 Проведение комплексного аудита систем информационной безопасности
               </p>
               <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button className="text-purple-400 text-sm font-medium hover:text-purple-300">
+                <a 
+                  href="/secure-t/documentation"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="text-purple-400 text-sm font-medium hover:text-purple-300 cursor-pointer"
+                >
                   Подробнее →
-                </button>
+                </a>
               </div>
             </div>
 
-            <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
+            <div 
+              onClick={() => {
+                window.location.href = '/secure-t/documentation';
+              }}
+              className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
+            >
               <div className="text-blue-400 text-4xl mb-4 group-hover:animate-pulse-secure">⚙️</div>
               <h3 className="text-xl font-bold mb-4">Интеграция систем</h3>
               <p className="text-gray-300">
                 Интеграция решений безопасности с существующей IT-инфраструктурой
               </p>
               <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button className="text-blue-400 text-sm font-medium hover:text-blue-300">
+                <a 
+                  href="/secure-t/documentation"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="text-blue-400 text-sm font-medium hover:text-blue-300 cursor-pointer"
+                >
                   Подробнее →
-                </button>
+                </a>
               </div>
             </div>
 
-            <div className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105">
+            <div 
+              onClick={() => {
+                window.location.href = '/secure-t/documentation';
+              }}
+              className="glass-effect p-8 rounded-lg hover-glow transition-all duration-300 group hover:scale-105 cursor-pointer"
+            >
               <div className="text-green-400 text-4xl mb-4 group-hover:animate-pulse-secure">📚</div>
               <h3 className="text-xl font-bold mb-4">Обучение персонала</h3>
               <p className="text-gray-300">
                 Программы обучения сотрудников основам информационной безопасности
               </p>
               <div className="mt-4 opacity-0 group-hover:opacity-100 transition-opacity">
-                <button className="text-green-400 text-sm font-medium hover:text-green-300">
+                <a 
+                  href="/secure-t/documentation"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                  className="text-green-400 text-sm font-medium hover:text-green-300 cursor-pointer"
+                >
                   Подробнее →
-                </button>
+                </a>
               </div>
             </div>
           </div>
@@ -814,42 +880,90 @@ export default function SecureT() {
               <div className="text-blue-400 text-3xl mb-4">📄</div>
               <h4 className="text-lg font-bold mb-3">Техническая документация</h4>
               <p className="text-gray-300 mb-4">Подробные руководства по внедрению и настройке</p>
-              <button className="text-blue-400 hover:text-blue-300 font-medium">Скачать →</button>
+              <button 
+                onClick={() => {
+                  setDocumentationForm(prev => ({ ...prev, documentType: 'Полная документация' }));
+                  handleDocumentationClick();
+                }}
+                className="text-blue-400 hover:text-blue-300 font-medium cursor-pointer"
+              >
+                Скачать →
+              </button>
             </div>
 
             <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
               <div className="text-green-400 text-3xl mb-4">🎯</div>
               <h4 className="text-lg font-bold mb-3">Методические материалы</h4>
               <p className="text-gray-300 mb-4">Лучшие практики информационной безопасности</p>
-              <button className="text-green-400 hover:text-green-300 font-medium">Скачать →</button>
+              <button 
+                onClick={() => {
+                  setDocumentationForm(prev => ({ ...prev, documentType: 'Методические материалы' }));
+                  handleDocumentationClick();
+                }}
+                className="text-green-400 hover:text-green-300 font-medium cursor-pointer"
+              >
+                Скачать →
+              </button>
             </div>
 
             <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
               <div className="text-purple-400 text-3xl mb-4">🔧</div>
               <h4 className="text-lg font-bold mb-3">Инструменты настройки</h4>
               <p className="text-gray-300 mb-4">Утилиты для конфигурирования системы</p>
-              <button className="text-purple-400 hover:text-purple-300 font-medium">Скачать →</button>
+              <button 
+                onClick={() => {
+                  setDocumentationForm(prev => ({ ...prev, documentType: 'Инструменты настройки' }));
+                  handleDocumentationClick();
+                }}
+                className="text-purple-400 hover:text-purple-300 font-medium cursor-pointer"
+              >
+                Скачать →
+              </button>
             </div>
 
             <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
               <div className="text-red-400 text-3xl mb-4">📊</div>
               <h4 className="text-lg font-bold mb-3">Отчеты и аналитика</h4>
               <p className="text-gray-300 mb-4">Шаблоны отчетов и аналитические данные</p>
-              <button className="text-red-400 hover:text-red-300 font-medium">Скачать →</button>
+              <button 
+                onClick={() => {
+                  setDocumentationForm(prev => ({ ...prev, documentType: 'Отчеты и аналитика' }));
+                  handleDocumentationClick();
+                }}
+                className="text-red-400 hover:text-red-300 font-medium cursor-pointer"
+              >
+                Скачать →
+              </button>
             </div>
 
             <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
               <div className="text-yellow-400 text-3xl mb-4">🎓</div>
               <h4 className="text-lg font-bold mb-3">Обучающие материалы</h4>
               <p className="text-gray-300 mb-4">Курсы и тренинги по безопасности</p>
-              <button className="text-yellow-400 hover:text-yellow-300 font-medium">Скачать →</button>
+              <button 
+                onClick={() => {
+                  setDocumentationForm(prev => ({ ...prev, documentType: 'Обучающие материалы' }));
+                  handleDocumentationClick();
+                }}
+                className="text-yellow-400 hover:text-yellow-300 font-medium cursor-pointer"
+              >
+                Скачать →
+              </button>
             </div>
 
             <div className="glass-effect p-6 rounded-lg hover-glow transition-all duration-300">
               <div className="text-cyan-400 text-3xl mb-4">📋</div>
               <h4 className="text-lg font-bold mb-3">Сертификаты и лицензии</h4>
               <p className="text-gray-300 mb-4">Документы о соответствии стандартам</p>
-              <button className="text-cyan-400 hover:text-cyan-300 font-medium">Скачать →</button>
+              <button 
+                onClick={() => {
+                  setDocumentationForm(prev => ({ ...prev, documentType: 'Сертификаты и лицензии' }));
+                  handleDocumentationClick();
+                }}
+                className="text-cyan-400 hover:text-cyan-300 font-medium cursor-pointer"
+              >
+                Скачать →
+              </button>
             </div>
           </div>
         </div>
@@ -866,10 +980,22 @@ export default function SecureT() {
               Наши эксперты помогут подобрать оптимальное решение для вашей организации
             </p>
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
-              <button className="px-8 py-3 bg-red-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300">
+              <button 
+                onClick={() => {
+                  setSolutionsForm(prev => ({ ...prev, solution: 'Консультация' }));
+                  handleSolutionsClick();
+                }}
+                className="px-8 py-3 bg-red-500 text-white font-semibold rounded-lg hover-glow transition-all duration-300 cursor-pointer"
+              >
                 Получить консультацию
               </button>
-              <button className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300">
+              <button 
+                onClick={() => {
+                  setSolutionsForm(prev => ({ ...prev, solution: 'Аудит безопасности' }));
+                  handleSolutionsClick();
+                }}
+                className="px-8 py-3 glass-effect text-white font-semibold rounded-lg hover:bg-white/10 transition-all duration-300 cursor-pointer"
+              >
                 Заказать аудит
               </button>
             </div>