BivekiGroup/gunderev
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
albivkt
2025-07-06 16:08:36 +03:00
parent afcb9ba27b
commit d37fb0262d
3 changed files with 237 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/app/about/page.tsx
View File

@ -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>

58
src/app/globals.css
View File

@ -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% {

178
src/app/secure-t/page.tsx
View File

@ -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>