942 lines
No EOL
27 KiB
Svelte
942 lines
No EOL
27 KiB
Svelte
<script>
|
||
import { onMount } from 'svelte';
|
||
import { writable } from 'svelte/store';
|
||
import { Container, Row, Col } from '@sveltestrap/sveltestrap';
|
||
import GlitchText from '$lib/components/GlitchText.svelte';
|
||
import CRTScreen from '$lib/components/CRTScreen.svelte';
|
||
|
||
const activeSection = writable('mission');
|
||
const isMobile = writable(false);
|
||
|
||
const teamData = {
|
||
mission: {
|
||
title: "Наша Миссия",
|
||
icon: "",
|
||
content: {
|
||
main: "Мы создаем инновационные технологические решения, которые делают мир лучше, проще и эффективнее.",
|
||
points: [
|
||
"Разрабатывать ПО, которое решает реальные проблемы",
|
||
"Создавать продукты с душой и вниманием к деталям",
|
||
"Продвигать open-source и сообщество разработчиков",
|
||
"Обучать и вдохновлять следующее поколение инженеров"
|
||
]
|
||
}
|
||
},
|
||
values: {
|
||
title: "Наши Ценности",
|
||
icon: "",
|
||
content: {
|
||
main: "Наши ценности - это фундамент, на котором строится вся наша работа.",
|
||
points: [
|
||
{
|
||
icon: "",
|
||
title: "Инновации",
|
||
description: "Мы постоянно исследуем новые технологии и подходы"
|
||
},
|
||
{
|
||
icon: "",
|
||
title: "Качество",
|
||
description: "Каждая строка кода должна быть продумана и оптимизирована"
|
||
},
|
||
{
|
||
icon: "",
|
||
title: "Сотрудничество",
|
||
description: "Вместе мы достигаем большего, чем по отдельности"
|
||
},
|
||
{
|
||
icon: "",
|
||
title: "Обучение",
|
||
description: "Мы постоянно растем и развиваемся как профессионалы"
|
||
},
|
||
{
|
||
icon: "",
|
||
title: "Креативность",
|
||
description: "Находим нестандартные решения для сложных задач"
|
||
},
|
||
{
|
||
icon: "",
|
||
title: "Эффективность",
|
||
description: "Делаем больше за меньшее время без потери качества"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
history: {
|
||
title: "Наша История",
|
||
icon: "",
|
||
content: {
|
||
main: "Путь от идеи к реализации - это история постоянного роста и развития.",
|
||
timeline: [
|
||
{
|
||
year: "2023",
|
||
event: "Основание команды",
|
||
description: "Группа энтузиастов объединилась для работы над первыми проектами"
|
||
},
|
||
{
|
||
year: "2024",
|
||
event: "Первый крупный проект",
|
||
description: "Успешный запуск платформы для блогов в ретро-стиле"
|
||
},
|
||
{
|
||
year: "2024",
|
||
event: "Расширение команды",
|
||
description: "К команде присоединились специалисты разных направлений"
|
||
},
|
||
{
|
||
year: "Настоящее время",
|
||
event: "Активное развитие",
|
||
description: "Работа над несколькими инновационными проектами одновременно"
|
||
}
|
||
]
|
||
}
|
||
},
|
||
technology: {
|
||
title: "Технологии",
|
||
icon: "",
|
||
content: {
|
||
main: "Мы используем современный стек технологий, сочетая его с проверенными временем решениями.",
|
||
categories: [
|
||
{
|
||
name: "Frontend",
|
||
technologies: ["Svelte/SvelteKit", "TypeScript", "Vue.js", "Tailwind CSS"],
|
||
color: "#00aaff"
|
||
},
|
||
{
|
||
name: "Backend",
|
||
technologies: ["Node.js", "Python", "Rust", "PostgreSQL", "MongoDB"],
|
||
color: "#ff00aa"
|
||
},
|
||
{
|
||
name: "DevOps",
|
||
technologies: ["Docker", "Kubernetes", "AWS", "GitLab CI/CD", "Linux"],
|
||
color: "#00ff88"
|
||
},
|
||
{
|
||
name: "Embedded",
|
||
technologies: ["C/C++", "Arduino", "Raspberry Pi", "IoT Protocols"],
|
||
color: "#ffaa00"
|
||
},
|
||
{
|
||
name: "QA",
|
||
technologies: ["Jest", "Cypress", "Selenium", "Test Automation"],
|
||
color: "#aa00ff"
|
||
}
|
||
]
|
||
}
|
||
}
|
||
};
|
||
|
||
const stats = {
|
||
projects: 12,
|
||
teamMembers: 5,
|
||
yearsExperience: 2,
|
||
technologies: 20,
|
||
satisfiedClients: 8,
|
||
codeCommits: 2500
|
||
};
|
||
|
||
onMount(() => {
|
||
isMobile.set(window.innerWidth < 768);
|
||
|
||
const handleResize = () => isMobile.set(window.innerWidth < 768);
|
||
window.addEventListener('resize', handleResize);
|
||
return () => window.removeEventListener('resize', handleResize);
|
||
});
|
||
|
||
function setActiveSection(section) {
|
||
activeSection.set(section);
|
||
}
|
||
</script>
|
||
|
||
<section class="about-page">
|
||
<Row class=" g-0">
|
||
<!-- Левая панель - Навигация -->
|
||
<Col lg={3} class="h-100">
|
||
<div class="panel navigation-panel">
|
||
<CRTScreen class="navigation-terminal h-100">
|
||
<div class="terminal-header">
|
||
<span class="blink">█</span> О КОМАНДЕ [58]
|
||
</div>
|
||
|
||
<div class="terminal-body navigation-body">
|
||
|
||
<div class="navigation-menu">
|
||
{#each Object.entries(teamData) as [key, section]}
|
||
<div
|
||
class="nav-item"
|
||
class:active={$activeSection === key}
|
||
on:click={() => setActiveSection(key)}
|
||
>
|
||
<span class="nav-icon">{section.icon}</span>
|
||
<span class="nav-title">{section.title}</span>
|
||
<span class="nav-arrow">
|
||
{#if $activeSection === key}
|
||
▶
|
||
{:else}
|
||
●
|
||
{/if}
|
||
</span>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
|
||
<div class="quick-stats">
|
||
<h4> Быстрая статистика</h4>
|
||
<div class="stats-grid">
|
||
<div class="stat">
|
||
<span class="stat-number">{stats.projects}+</span>
|
||
<span class="stat-label">Проектов</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-number">{stats.teamMembers}</span>
|
||
<span class="stat-label">Участников</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-number">{stats.yearsExperience}</span>
|
||
<span class="stat-label">Года опыта</span>
|
||
</div>
|
||
<div class="stat">
|
||
<span class="stat-number">{stats.technologies}+</span>
|
||
<span class="stat-label">Технологий</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contact-info">
|
||
<h4> Контакты</h4>
|
||
<div class="contact-item">
|
||
<span class="contact-icon"></span>
|
||
<span class="contact-text">team58@example.com</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-icon"></span>
|
||
<span class="contact-text">@58team</span>
|
||
</div>
|
||
<div class="contact-item">
|
||
<span class="contact-icon"></span>
|
||
<span class="contact-text">github.com/58team</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CRTScreen>
|
||
</div>
|
||
</Col>
|
||
|
||
<!-- Правая панель - Контент -->
|
||
<Col lg={9} class="h-100">
|
||
<div class="panel content-panel">
|
||
<CRTScreen class="content-terminal h-100">
|
||
<div class="terminal-header">
|
||
<span class="blink">█</span>
|
||
{teamData[$activeSection].icon} {teamData[$activeSection].title}
|
||
</div>
|
||
|
||
<div class="terminal-body content-body">
|
||
<div class="content-scroll">
|
||
{#if $activeSection === 'mission'}
|
||
<div class="mission-content">
|
||
<div class="section-header">
|
||
<h1>Наша Миссия</h1>
|
||
<p class="lead">{teamData.mission.content.main}</p>
|
||
</div>
|
||
|
||
<div class="mission-points">
|
||
{#each teamData.mission.content.points as point}
|
||
<div class="mission-point">
|
||
<span class="point-icon">✓</span>
|
||
<span class="point-text">{point}</span>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
|
||
<div class="mission-vision">
|
||
<h2> Наше Видение</h2>
|
||
<div class="vision-grid">
|
||
<div class="vision-card">
|
||
<div class="vision-icon"></div>
|
||
<h3>Инновации</h3>
|
||
<p>Создавать технологии, которые опережают время</p>
|
||
</div>
|
||
<div class="vision-card">
|
||
<div class="vision-icon"></div>
|
||
<h3>Влияние</h3>
|
||
<p>Менять мир к лучшему через технологии</p>
|
||
</div>
|
||
<div class="vision-card">
|
||
<div class="vision-icon"></div>
|
||
<h3>Сообщество</h3>
|
||
<p>Развивать open-source и помогать другим</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{:else if $activeSection === 'values'}
|
||
<div class="values-content">
|
||
<div class="section-header">
|
||
<h1>Наши Ценности</h1>
|
||
<p class="lead">{teamData.values.content.main}</p>
|
||
</div>
|
||
|
||
<div class="values-grid">
|
||
{#each teamData.values.content.points as value}
|
||
<div class="value-card">
|
||
<div class="value-icon">{value.icon}</div>
|
||
<div class="value-content">
|
||
<h3>{value.title}</h3>
|
||
<p>{value.description}</p>
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
|
||
<div class="values-principles">
|
||
<h2>Наши Принципы Работы</h2>
|
||
<div class="principles-list">
|
||
<div class="principle">
|
||
<strong>Agile подход:</strong> Гибкость и адаптивность в разработке
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Code Review:</strong> Каждая строка кода проверяется коллегами
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Документация:</strong> Подробная документация для всех проектов
|
||
</div>
|
||
<div class="principle">
|
||
<strong>Непрерывное обучение:</strong> Регулярные воркшопы и обмен знаниями
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{:else if $activeSection === 'history'}
|
||
<div class="history-content">
|
||
<div class="section-header">
|
||
<h1>Наша История</h1>
|
||
<p class="lead">{teamData.history.content.main}</p>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
{#each teamData.history.content.timeline as event, index}
|
||
<div class="timeline-item">
|
||
<div class="timeline-marker">
|
||
<div class="marker-dot"></div>
|
||
{#if index < teamData.history.content.timeline.length - 1}
|
||
<div class="marker-line"></div>
|
||
{/if}
|
||
</div>
|
||
<div class="timeline-content">
|
||
<div class="timeline-year">{event.year}</div>
|
||
<h3>{event.event}</h3>
|
||
<p>{event.description}</p>
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
|
||
<div class="history-achievements">
|
||
<h2> Наши Достижения</h2>
|
||
<div class="achievements-grid">
|
||
<div class="achievement">
|
||
<div class="achievement-icon"></div>
|
||
<div class="achievement-text">Успешный запуск 10+ проектов</div>
|
||
</div>
|
||
<div class="achievement">
|
||
<div class="achievement-icon"></div>
|
||
<div class="achievement-text">Собрана сильная команда специалистов</div>
|
||
</div>
|
||
<div class="achievement">
|
||
<div class="achievement-icon"></div>
|
||
<div class="achievement-text">Разработана уникальная ретро-платформа</div>
|
||
</div>
|
||
<div class="achievement">
|
||
<div class="achievement-icon"></div>
|
||
<div class="achievement-text">Постоянный рост и развитие</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{:else if $activeSection === 'technology'}
|
||
<div class="technology-content">
|
||
<div class="section-header">
|
||
<h1>Наш Технологический Стек</h1>
|
||
<p class="lead">{teamData.technology.content.main}</p>
|
||
</div>
|
||
|
||
<div class="tech-categories">
|
||
{#each teamData.technology.content.categories as category}
|
||
<div class="tech-category">
|
||
<h3 style="color: {category.color}">{category.name}</h3>
|
||
<div class="tech-tags">
|
||
{#each category.technologies as tech}
|
||
<span
|
||
class="tech-tag"
|
||
style="border-color: {category.color}; color: {category.color}"
|
||
>
|
||
{tech}
|
||
</span>
|
||
{/each}
|
||
</div>
|
||
</div>
|
||
{/each}
|
||
</div>
|
||
|
||
<div class="tech-philosophy">
|
||
<h2>Наш Подход к Технологиям</h2>
|
||
<div class="philosophy-points">
|
||
<div class="philosophy-point">
|
||
<strong>Правильный инструмент для задачи:</strong> Выбираем технологии исходя из требований проекта
|
||
</div>
|
||
<div class="philosophy-point">
|
||
<strong>Современные стандарты:</strong> Следуем best practices и актуальным трендам
|
||
</div>
|
||
<div class="philosophy-point">
|
||
<strong>Безопасность и надежность:</strong> Приоритет - стабильность и защита данных
|
||
</div>
|
||
<div class="philosophy-point">
|
||
<strong>Масштабируемость:</strong> Архитектура, которая растет вместе с проектом
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
|
||
<div class="content-footer">
|
||
<div class="footer-cta">
|
||
<h3> Готовы работать с нами?</h3>
|
||
<p>Мы всегда открыты для новых вызовов и интересных проектов</p>
|
||
<div class="cta-buttons">
|
||
<a href="/contact" class="cta-btn primary">Связаться с нами</a>
|
||
<a href="/projects" class="cta-btn secondary">Наши проекты</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</CRTScreen>
|
||
</div>
|
||
</Col>
|
||
</Row>
|
||
</section>
|
||
|
||
<style>
|
||
.about-page {
|
||
min-height: 100vh;
|
||
padding-top: 50px;
|
||
background: var(--bg-dark);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panel {
|
||
height: 100%;
|
||
border: 1px solid var(--terminal-border);
|
||
background: rgba(10, 10, 10, 0.9);
|
||
}
|
||
|
||
.terminal-header {
|
||
background: var(--primary-green);
|
||
color: var(--bg-dark);
|
||
padding: 12px 20px;
|
||
font-weight: bold;
|
||
border-bottom: 2px solid var(--bg-dark);
|
||
font-size: 0.9rem;
|
||
font-family: 'Courier New', monospace;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.terminal-body {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.navigation-body {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 30px;
|
||
}
|
||
|
||
|
||
.navigation-menu {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 5px;
|
||
}
|
||
|
||
.nav-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
padding: 12px 15px;
|
||
border: 1px solid var(--terminal-border);
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.3s ease;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.nav-item:hover {
|
||
border-color: var(--primary-green);
|
||
transform: translateX(5px);
|
||
}
|
||
|
||
.nav-item.active {
|
||
border-color: var(--secondary-pink);
|
||
background: rgba(255, 0, 170, 0.1);
|
||
}
|
||
|
||
.nav-icon {
|
||
font-size: 1.2rem;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.nav-title {
|
||
flex: 1;
|
||
color: var(--text-secondary);
|
||
font-weight: bold;
|
||
}
|
||
|
||
.nav-item.active .nav-title {
|
||
color: var(--primary-green);
|
||
}
|
||
|
||
.nav-arrow {
|
||
color: var(--text-muted);
|
||
}
|
||
|
||
.quick-stats h4, .contact-info h4 {
|
||
color: var(--primary-green);
|
||
margin: 0 0 15px 0;
|
||
font-size: 1rem;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: 10px;
|
||
}
|
||
|
||
.stat {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--terminal-border);
|
||
border-radius: 6px;
|
||
padding: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.stat-number {
|
||
display: block;
|
||
color: var(--primary-green);
|
||
font-size: 1.2rem;
|
||
font-weight: bold;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.stat-label {
|
||
color: var(--text-muted);
|
||
font-size: 0.7rem;
|
||
}
|
||
|
||
.contact-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 8px 0;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.contact-item:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.contact-icon {
|
||
font-size: 1rem;
|
||
width: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.contact-text {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
/* Контентная часть */
|
||
.content-body {
|
||
padding: 0;
|
||
}
|
||
|
||
.content-scroll {
|
||
flex: 1;
|
||
padding: 30px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.section-header {
|
||
margin-bottom: 40px;
|
||
text-align: center;
|
||
}
|
||
|
||
.section-header h1 {
|
||
color: var(--primary-green);
|
||
font-size: 2.5rem;
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.lead {
|
||
color: var(--text-secondary);
|
||
font-size: 1.2rem;
|
||
line-height: 1.6;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
/* Стили для разных секций */
|
||
.mission-points {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.mission-point {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 15px;
|
||
padding: 15px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--terminal-border);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.point-icon {
|
||
color: var(--primary-green);
|
||
font-weight: bold;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.point-text {
|
||
color: var(--text-secondary);
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.vision-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 20px;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.vision-card {
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--terminal-border);
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.vision-card:hover {
|
||
border-color: var(--primary-green);
|
||
transform: translateY(-5px);
|
||
}
|
||
|
||
.vision-icon {
|
||
font-size: 2rem;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.vision-card h3 {
|
||
color: var(--primary-green);
|
||
margin: 0 0 10px 0;
|
||
}
|
||
|
||
.vision-card p {
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.values-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.value-card {
|
||
display: flex;
|
||
gap: 15px;
|
||
padding: 20px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--terminal-border);
|
||
border-radius: 8px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.value-card:hover {
|
||
border-color: var(--primary-green);
|
||
}
|
||
|
||
.value-icon {
|
||
font-size: 1.5rem;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.value-content h3 {
|
||
color: var(--primary-green);
|
||
margin: 0 0 10px 0;
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.value-content p {
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.principles-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.principle {
|
||
color: var(--text-secondary);
|
||
padding: 10px 15px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 6px;
|
||
border-left: 3px solid var(--primary-green);
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
margin: 40px 0;
|
||
}
|
||
|
||
.timeline-item {
|
||
display: flex;
|
||
gap: 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.timeline-marker {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.marker-dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
background: var(--primary-green);
|
||
border-radius: 50%;
|
||
border: 2px solid var(--bg-dark);
|
||
}
|
||
|
||
.marker-line {
|
||
flex: 1;
|
||
width: 2px;
|
||
background: var(--primary-green);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.timeline-content {
|
||
flex: 1;
|
||
padding-bottom: 20px;
|
||
}
|
||
|
||
.timeline-year {
|
||
color: var(--secondary-pink);
|
||
font-weight: bold;
|
||
font-size: 1.1rem;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.timeline-content h3 {
|
||
color: var(--primary-green);
|
||
margin: 0 0 10px 0;
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.timeline-content p {
|
||
color: var(--text-secondary);
|
||
margin: 0;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.achievements-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.achievement {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 15px;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--terminal-border);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.achievement-icon {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.achievement-text {
|
||
color: var(--text-secondary);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.tech-categories {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 25px;
|
||
margin: 30px 0;
|
||
}
|
||
|
||
.tech-category h3 {
|
||
margin: 0 0 15px 0;
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.tech-tags {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.tech-tag {
|
||
padding: 5px 12px;
|
||
border: 1px solid;
|
||
border-radius: 20px;
|
||
font-size: 0.9rem;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.tech-tag:hover {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.philosophy-points {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.philosophy-point {
|
||
color: var(--text-secondary);
|
||
padding: 15px;
|
||
background: rgba(0, 0, 0, 0.2);
|
||
border-radius: 8px;
|
||
border-left: 4px solid var(--primary-green);
|
||
}
|
||
|
||
.content-footer {
|
||
margin-top: 50px;
|
||
padding-top: 30px;
|
||
border-top: 1px solid var(--terminal-border);
|
||
}
|
||
|
||
.footer-cta {
|
||
text-align: center;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
border: 1px solid var(--terminal-border);
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
}
|
||
|
||
.footer-cta h3 {
|
||
color: var(--primary-green);
|
||
margin: 0 0 10px 0;
|
||
}
|
||
|
||
.footer-cta p {
|
||
color: var(--text-secondary);
|
||
margin: 0 0 20px 0;
|
||
}
|
||
|
||
.cta-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
justify-content: center;
|
||
}
|
||
|
||
.cta-btn {
|
||
padding: 12px 24px;
|
||
border: 2px solid;
|
||
border-radius: 6px;
|
||
text-decoration: none;
|
||
font-weight: bold;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.cta-btn.primary {
|
||
background: var(--primary-green);
|
||
border-color: var(--primary-green);
|
||
color: var(--bg-dark);
|
||
}
|
||
|
||
.cta-btn.secondary {
|
||
background: transparent;
|
||
border-color: var(--secondary-pink);
|
||
color: var(--secondary-pink);
|
||
}
|
||
|
||
.cta-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
/* Адаптивность */
|
||
@media (max-width: 768px) {
|
||
.about-page {
|
||
height: auto;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.content-scroll {
|
||
padding: 20px;
|
||
}
|
||
|
||
.section-header h1 {
|
||
font-size: 2rem;
|
||
}
|
||
|
||
.vision-grid, .values-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.cta-buttons {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.timeline-item {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.timeline-marker {
|
||
flex-direction: row;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.marker-line {
|
||
width: 100%;
|
||
height: 2px;
|
||
margin: 0 10px;
|
||
}
|
||
}
|
||
</style> |