neo/calls24-landing
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: вернуть блок дохода, добавить дисклеймер, * к заголовку

Browse Source
This commit is contained in:
neo committed 2026-06-19 18:52:54 +05:00
1 parent 1e0fb461d1
commit bb0800a51d
24 files changed
+1415 -127
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

logos/README.md
+102
View File
@@ -0,0 +1,102 @@
# calls24 — Logo Set
**Дата:** 19.06.2026
**Стек:** Pure SVG, без внешних зависимостей, полностью self-hosted
## Файлы
```
logos/
├── README.md ← этот файл
├── preview.html ← превью всех 5 логотипов
│
├── logo-01-wordmark-wave.svg # Главный вариант
├── logo-01-wordmark-wave-icon-only.svg # Иконка только (фавикон)
├── logo-01-wordmark-wave-black.svg # Чёрная версия
│
├── logo-02-circle-wave.svg
├── logo-02-circle-wave-black.svg
│
├── logo-03-phone-wave.svg
├── logo-03-phone-wave-black.svg
│
├── logo-04-hex-data.svg
├── logo-04-hex-data-black.svg
│
├── logo-05-c-wave.svg
└── logo-05-c-wave-black.svg
```
## Концепции
### 01. Wordmark + Sound Wave (главный)
- **Тип:** Словоформ с иконкой
- **Формат:** Горизонтальный (320x60)
- **Иконка:** 5 вертикальных баров — аудио-волна слева от текста
- **Цвет:** Зелёный градиент (#22c55e → #16a34a)
- **Текст:** `calls` белый, `24` зелёный
- **Шрифт:** Inter Bold / SF Pro / -apple-system
- **Использование:** header, футер, презентации, сайт
- **Файлы:** wordmark + icon-only + black version
### 02. Circle Sound Wave
- **Тип:** Circular icon / Favicon
- **Формат:** Квадрат 60x60, центрированный
- **Форма:** Круг с аудио-волной внутри
- **Использование:** фавикон, иконка приложения, avatars, дашборд
### 03. Phone + Wave
- **Тип:** Line-art icon
- **Формат:** Квадрат 60x60
- **Форма:** Телефонная трубка + исходящие волны
- **Использование:** иконка раздела звонков, кнопки, иллюстрации
### 04. Hex Data Grid
- **Тип:** Geometric icon (Bauhaus)
- **Формат:** Квадрат 60x60, гексагон
- **Форма:** Гексагон с аудио-волной и точками данных
- **Использование:** премиальный вариант, tech-ассоциация, дашборд
### 05. C-Wave
- **Тип:** Abstract letterform
- **Формат:** Квадрат 60x60
- **Форма:** Буква «C» → звуковая волна (непрерывный path)
- **Использование:** минималистичный вариант, Apple-like, favicon
## Цвета
| Назначение | HEX |
|-----------|-----|
| Зелёный акцент | #22c55e |
| Зелёный тёмный | #16a34a |
| Зелёный глубокий | #15803d |
| Белый | #ffffff |
| Чёрный | #000000 |
## Использование
### В HTML
```html
<!-- Wordmark (header) -->
<img src="logos/logo-01-wordmark-wave.svg" alt="calls24" height="48">
<!-- Icon only (favicon / mobile header) -->
<img src="logos/logo-01-wordmark-wave-icon-only.svg" alt="calls24" height="32">
<!-- Icon variant -->
<img src="logos/logo-02-circle-wave.svg" alt="calls24" height="32">
```
### В SVG (inline, рекомендуемо)
```html
<svg class="calls24-logo" role="img" aria-label="calls24">
<use href="logos/logo-01-wordmark-wave.svg"/>
</svg>
```
### CSS
```css
/* Зелёный акцент из логотипа */
.calls24 .cta { color: #22c55e; }
.calls24 .accent { background: linear-gradient(135deg, #22c55e, #15803d); }
```
logos/logo-01-wordmark-wave-black.svg
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #01 — Чёрная версия (для печати, гравировки, светлого фона) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="320" height="60">
<g transform="translate(4, 5)">
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="#000000"/>
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="#000000" opacity="0.85"/>
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="#000000" opacity="0.7"/>
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="#000000" opacity="0.85"/>
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="#000000" opacity="0.6"/>
</g>
<text x="52" y="40" font-family="'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-weight="700" font-size="32" fill="#000000">
calls<tspan fill="#22c55e">24</tspan>
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 918 B

logos/logo-01-wordmark-wave-icon-only.svg
+17
View File
@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #01 — Иконка только (для фавикона, шапки, мобильного) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<linearGradient id="w1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<g transform="translate(3, 3)">
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1)"/>
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1)" opacity="0.85"/>
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1)" opacity="0.7"/>
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1)" opacity="0.85"/>
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1)" opacity="0.6"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 908 B

logos/logo-01-wordmark-wave.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #01: Minimalist Wordmark + Sound Wave -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="320" height="60">
<defs>
<linearGradient id="waveGrad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#16a34a"/>
</linearGradient>
</defs>
<!-- Sound wave icon (left) -->
<g transform="translate(4, 5)">
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#waveGrad)"/>
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#waveGrad)" opacity="0.85"/>
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#waveGrad)" opacity="0.7"/>
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#waveGrad)" opacity="0.85"/>
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#waveGrad)" opacity="0.6"/>
</g>
<!-- Wordmark -->
<text x="52" y="40" font-family="'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" font-weight="700" font-size="32" fill="#ffffff">
calls<tspan fill="#22c55e">24</tspan>
</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

logos/logo-02-circle-wave-black.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #02 — Чёрная версия -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<circle cx="30" cy="30" r="28" fill="none" stroke="#000000" stroke-width="2" opacity="0.15"/>
<rect x="25" y="14" width="10" height="32" rx="5" fill="#000000"/>
<rect x="14" y="20" width="6" height="20" rx="3" fill="#000000" opacity="0.7"/>
<rect x="6" y="25" width="6" height="10" rx="3" fill="#000000" opacity="0.45"/>
<rect x="40" y="20" width="6" height="20" rx="3" fill="#000000" opacity="0.7"/>
<rect x="48" y="25" width="6" height="10" rx="3" fill="#000000" opacity="0.45"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 680 B

logos/logo-02-circle-wave.svg
+25
View File
@@ -0,0 +1,25 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #02: Geometric Circle Sound Wave -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<linearGradient id="waveGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<!-- Outer circle ring -->
<circle cx="30" cy="30" r="28" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.15"/>
<!-- Sound wave bars inside circle -->
<g transform="translate(0, 0)">
<!-- Center vertical bar -->
<rect x="25" y="14" width="10" height="32" rx="5" fill="url(#waveGrad2)"/>
<!-- Left bars -->
<rect x="14" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
<rect x="6" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
<!-- Right bars -->
<rect x="40" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
<rect x="48" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

logos/logo-03-phone-wave-black.svg
+10
View File
@@ -0,0 +1,10 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #03 — Чёрная версия -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<g transform="translate(5, 2)">
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#000000" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 858 B

logos/logo-03-phone-wave.svg
+20
View File
@@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #03: Phone Handset + Sound Wave -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<linearGradient id="phoneGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#16a34a"/>
</linearGradient>
</defs>
<g transform="translate(5, 2)">
<!-- Phone handset outline -->
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#ffffff" stroke-width="2.5" stroke-linejoin="round"/>
<!-- Sound waves emanating -->
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

logos/logo-04-animated-loop.svg
+59
View File
@@ -0,0 +1,59 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo — Animated Loop: continuous wave, no dots, pulsing 24 -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
<style>
/* Wave bars — continuous breathing */
.w { animation: wave 2.4s ease-in-out infinite; }
.w1 { animation-delay: 0s; }
.w2 { animation-delay: 0.15s; }
.w3 { animation-delay: 0.3s; }
.w4 { animation-delay: 0.45s; }
.w5 { animation-delay: 0.6s; }
@keyframes wave {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(0.85); }
}
/* "24" bright pulse */
.b24 { animation: brightPulse 2.4s ease-in-out infinite; }
@keyframes brightPulse {
0%, 100% { fill: #22c55e; filter: drop-shadow(0 0 0px transparent); }
50% { fill: #4ade80; filter: drop-shadow(0 0 6px rgba(34,197,94,0.5)); }
}
/* Tech line — pulse */
.tech-line {
stroke-dasharray: 30;
animation: linePulse 3s ease-in-out infinite;
}
@keyframes linePulse {
0%, 100% { opacity: 0.8; }
50% { opacity: 0.2; }
}
/* Gradient shimmer */
.grad-stop { animation: shimmer 3s ease-in-out infinite; }
@keyframes shimmer {
0%, 100% { stop-color: #22c55e; }
50% { stop-color: #4ade80; }
}
</style>
</defs>
<!-- Animated Wave (no dots) -->
<g transform="translate(2, 2)">
<rect class="w w1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect class="w w2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect class="w w3" x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
<rect class="w w4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect class="w w5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
</g>
<!-- Wordmark -->
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-0.5">Calls<tspan class="b24" font-weight="700">24</tspan></text>
<!-- Tech line -->
<line class="tech-line" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

logos/logo-04-hex-data-black.svg
+14
View File
@@ -0,0 +1,14 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #04 — Чёрная версия -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<rect x="14" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
<rect x="22" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
<rect x="30" y="14" width="6" height="38" rx="3" fill="#000000"/>
<rect x="38" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
<rect x="46" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
<circle cx="17" cy="24" r="2" fill="#000000" opacity="0.3"/>
<circle cx="25" cy="18" r="2" fill="#000000" opacity="0.5"/>
<circle cx="33" cy="12" r="2" fill="#000000"/>
<circle cx="41" cy="18" r="2" fill="#000000" opacity="0.5"/>
<circle cx="49" cy="24" r="2" fill="#000000" opacity="0.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 883 B

logos/logo-04-hex-data.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #04: Hexagonal Data Grid (Bauhaus) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<!-- Internal data bars (sound wave inside hex boundary) -->
<rect x="14" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="22" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="30" y="14" width="6" height="38" rx="3" fill="url(#hexGrad)"/>
<rect x="38" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="46" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<!-- Data points -->
<circle cx="17" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
<circle cx="25" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="33" cy="12" r="2" fill="#22c55e"/>
<circle cx="41" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="49" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

logos/logo-04-icon-only.svg
+23
View File
@@ -0,0 +1,23 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #04 — Иконка только (фавикон, мобильный header) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<g transform="translate(2, 2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

logos/logo-04-wordmark-animated.svg
+118
View File
@@ -0,0 +1,118 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #04 — Animated Wordmark: Icon + "Calls24" -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e">
<animate attributeName="stop-color" values="#22c55e;#4ade80;#22c55e" dur="3s" repeatCount="indefinite"/>
</stop>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
<style>
/* Wave bars */
.bar {
transform-origin: bottom center;
animation: barGrow 1.2s ease-out forwards;
opacity: 0;
}
.bar1 { animation-delay: 0.1s; }
.bar2 { animation-delay: 0.2s; }
.bar3 { animation-delay: 0.3s; }
.bar4 { animation-delay: 0.4s; }
.bar5 { animation-delay: 0.5s; }
@keyframes barGrow {
0% { transform: scaleY(0); opacity: 0; }
100% { transform: scaleY(1); opacity: 1; }
}
/* Pulse on center bar */
.bar3 { animation: barGrow 1.2s ease-out forwards, pulseBar 3s ease-in-out infinite 1.5s; }
@keyframes pulseBar {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* Data points */
.dot {
opacity: 0;
animation: dotIn 0.6s ease-out forwards;
}
.dot1 { animation-delay: 0.5s; }
.dot2 { animation-delay: 0.6s; }
.dot3 { animation-delay: 0.7s; }
.dot4 { animation-delay: 0.8s; }
.dot5 { animation-delay: 0.9s; }
@keyframes dotIn {
0% { opacity: 0; transform: scale(0); }
60% { transform: scale(1.3); }
100% { opacity: var(--o, 0.5); transform: scale(1); }
}
/* Text */
.wordmark {
opacity: 0;
transform: translateX(-10px);
animation: textIn 0.8s ease-out forwards;
animation-delay: 0.6s;
}
@keyframes textIn {
0% { opacity: 0; transform: translateX(-10px); }
100% { opacity: 1; transform: translateX(0); }
}
/* Tech line */
.tech-line {
stroke-dasharray: 30;
stroke-dashoffset: 30;
animation: lineDraw 0.6s ease-out forwards;
animation-delay: 1.2s;
}
@keyframes lineDraw {
0% { stroke-dashoffset: 30; }
100% { stroke-dashoffset: 0; }
}
/* Floating particles */
.particle {
opacity: 0;
animation: float 4s ease-in-out infinite;
}
.particle:nth-child(1) { animation-delay: 2s; }
.particle:nth-child(2) { animation-delay: 2.5s; }
@keyframes float {
0%, 100% { opacity: 0; transform: translateY(0); }
50% { opacity: 0.6; transform: translateY(-3px); }
}
</style>
</defs>
<!-- ===== ICON: Animated Sound Wave ===== -->
<g transform="translate(2, 2)">
<rect class="bar bar1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect class="bar bar2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect class="bar bar3" x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
<rect class="bar bar4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect class="bar bar5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<!-- Data points -->
<circle class="dot dot1" cx="7" cy="24" r="2" fill="#22c55e" style="--o: 0.3" opacity="0.3"/>
<circle class="dot dot2" cx="15" cy="18" r="2" fill="#22c55e" style="--o: 0.5" opacity="0.5"/>
<circle class="dot dot3" cx="23" cy="6" r="2" fill="#22c55e" style="--o: 1" opacity="1"/>
<circle class="dot dot4" cx="31" cy="18" r="2" fill="#22c55e" style="--o: 0.5" opacity="0.5"/>
<circle class="dot dot5" cx="39" cy="24" r="2" fill="#22c55e" style="--o: 0.3" opacity="0.3"/>
<!-- Floating particles -->
<circle class="particle" cx="23" cy="2" r="1" fill="#22c55e" opacity="0.4"/>
<circle class="particle" cx="15" cy="10" r="1.5" fill="#22c55e" opacity="0.3"/>
</g>
<!-- ===== WORDMARK ===== -->
<g class="wordmark">
<text x="56" y="40"
font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
font-weight="300"
font-size="30"
fill="#ffffff"
letter-spacing="-0.5">
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
</text>
<!-- Tech underline -->
<line class="tech-line" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

logos/logo-04-wordmark-black.svg
+36
View File
@@ -0,0 +1,36 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #04 — Wordmark: Чёрная версия (для светлого фона) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<!-- ICON -->
<g transform="translate(2, 2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="#000000"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#000000" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#000000" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#000000" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#000000" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#000000"/>
<circle cx="31" cy="18" r="2" fill="#000000" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#000000" opacity="0.3"/>
</g>
<!-- WORDMARK — чёрный текст на белом фоне -->
<text x="56" y="40"
font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
font-weight="300"
font-size="30"
fill="#000000"
letter-spacing="-0.5">
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
</text>
<line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

logos/logo-04-wordmark-manrope.svg
+38
View File
@@ -0,0 +1,38 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #04 — Wordmark: Manrope (более характерный геометричный гротеск) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<!-- ICON -->
<g transform="translate(2, 2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
</g>
<!-- Шрифт: Manrope — геометричный гротеск, характерный x-height -->
<text x="56" y="38"
font-family="Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
font-weight="400"
font-size="32"
fill="#ffffff"
letter-spacing="-0.3">
calls<tspan font-weight="700" fill="#22c55e">24</tspan>
</text>
<!-- Двойная линия как tech-акцент -->
<line x1="202" y1="42" x2="228" y2="42" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
<line x1="202" y1="45" x2="220" y2="45" stroke="#22c55e" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

logos/logo-04-wordmark.svg
+39
View File
@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #04 — Wordmark: Icon + "Calls24" -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="340" height="56">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<!-- ===== ICON (Logo-04: зелёная волна) ===== -->
<g transform="translate(2, 2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
</g>
<!-- ===== WORDMARK ===== -->
<!-- Шрифт: Inter — геометричный гротеск, идеален для tech/SaaS -->
<!-- "Calls" — тонкий/regular белый, "24" — bold зелёный -->
<text x="56" y="40"
font-family="Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
font-weight="300"
font-size="30"
fill="#ffffff"
letter-spacing="-0.5">
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
</text>
<!-- Tech-подчёркивание: тонкая зелёная линия под "24" -->
<line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

logos/logo-05-c-wave-black.svg
+16
View File
@@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #05 — Чёрная версия -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<path d="
M48 14
C38 10, 26 12, 18 18
C10 24, 8 34, 12 42
C14 48, 22 52, 32 50
C40 48, 46 42, 48 36
C46 38, 40 42, 32 42
C24 42, 18 38, 16 32
C14 26, 16 18, 24 14
C30 10, 42 10, 48 14
Z
" fill="#000000"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 438 B

logos/logo-05-c-wave.svg
+24
View File
@@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #05: Letter "C" + Continuous Wave (Apple-like) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<linearGradient id="cGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/>
<stop offset="100%" stop-color="#16a34a"/>
</linearGradient>
</defs>
<!-- C shape morphed into wave -->
<path d="
M48 14
C38 10, 26 12, 18 18
C10 24, 8 34, 12 42
C14 48, 22 52, 32 50
C40 48, 46 42, 48 36
C46 38, 40 42, 32 42
C24 42, 18 38, 16 32
C14 26, 16 18, 24 14
C30 10, 42 10, 48 14
Z
" fill="url(#cGrad)"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 700 B

logos/logo-06-hex-cwave-icon-only.svg
+11
View File
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #06 — Чёрная версия -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.15"/>
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="#000000"/>
<circle cx="20" cy="18" r="1.5" fill="#000000" opacity="0.5"/>
<circle cx="12" cy="26" r="1.5" fill="#000000" opacity="0.35"/>
<circle cx="34" cy="12" r="1.5" fill="#000000" opacity="0.65"/>
<circle cx="40" cy="20" r="1.5" fill="#000000" opacity="0.5"/>
<circle cx="44" cy="32" r="1.5" fill="#000000" opacity="0.35"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 820 B

logos/logo-06-hex-cwave.svg
+34
View File
@@ -0,0 +1,34 @@
<?xml version="1.0" encoding="UTF-8"?>
<!-- calls24 Logo #06: Hexagon + C-Wave (комбинированный) -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="60" height="60">
<defs>
<linearGradient id="hexC" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ef4444"/>
<stop offset="100%" stop-color="#dc2626"/>
</linearGradient>
</defs>
<!-- Hexagon outline (Bauhaus, тонкая линия) -->
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#ffffff" stroke-width="1.5" opacity="0.15"/>
<!-- C-shaped wave inside hexagon (красная, как на странице) -->
<path d="
M44 16
C36 12, 24 14, 16 20
C8 26, 6 36, 10 42
C14 48, 22 50, 30 48
C38 46, 44 40, 46 34
C44 36, 38 40, 30 40
C22 40, 16 36, 14 30
C12 24, 14 18, 22 14
C28 10, 40 10, 44 16
Z
" fill="url(#hexC)"/>
<!-- Data points (красные, полупрозрачные) -->
<circle cx="20" cy="18" r="1.5" fill="#ef4444" opacity="0.5"/>
<circle cx="12" cy="26" r="1.5" fill="#ef4444" opacity="0.35"/>
<circle cx="34" cy="12" r="1.5" fill="#ef4444" opacity="0.65"/>
<circle cx="40" cy="20" r="1.5" fill="#ef4444" opacity="0.5"/>
<circle cx="44" cy="32" r="1.5" fill="#ef4444" opacity="0.35"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

logos/preview-animated.html
+118
View File
@@ -0,0 +1,118 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calls24 — Animated Logo</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif;padding:40px 20px}
h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px}
.sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:800px;margin:0 auto}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
.card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px}
.card .name{font-size:14px;color:#ccc;margin-bottom:4px}
.card .desc{font-size:12px;color:#666;margin-bottom:24px;line-height:1.5}
.preview{background:#050505;border-radius:12px;padding:32px;display:flex;align-items:center;justify-content:center;min-height:120px}
</style>
</head>
<body>
<h1>calls24 — Animated Logos</h1>
<p class="sub">SVG CSS animations</p>
<div class="grid">
<!-- Entrance -->
<div class="card" style="grid-column:1/-1">
<div class="label">Entrance</div>
<div class="name">Волна растёт, текст выезжает, линия рисуется</div>
<div class="desc">Однократная анимация появления. Идеальна для hero, загрузочных экранов.</div>
<div class="preview">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
<defs>
<linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"><animate attributeName="stop-color" values="#22c55e;#4ade80;#22c55e" dur="3s" repeatCount="indefinite"/></stop>
<stop offset="100%" stop-color="#15803d"/>
</linearGradient>
<style>
.b{transform-origin:bottom center;animation:grow 1s ease-out forwards;opacity:0}
.b1{animation-delay:.1s}.b2{animation-delay:.2s}.b3{animation-delay:.3s}.b4{animation-delay:.4s}.b5{animation-delay:.5s}
@keyframes grow{0%{transform:scaleY(0);opacity:0}100%{transform:scaleY(1);opacity:1}}
.b3{animation:grow 1s ease-out forwards, pulse 3s ease-in-out infinite 1.2s}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.7}}
.d{opacity:0;animation:dp .5s ease-out forwards}
.d1{animation-delay:.5s}.d2{animation-delay:.6s}.d3{animation-delay:.7s}.d4{animation-delay:.8s}.d5{animation-delay:.9s}
@keyframes dp{0%{opacity:0;transform:scale(0)}60%{transform:scale(1.3)}100%{opacity:var(--o);transform:scale(1)}}
.t{opacity:0;transform:translateX(-10px);animation:ti .7s ease-out forwards;animation-delay:.6s}
@keyframes ti{0%{opacity:0;transform:translateX(-10px)}100%{opacity:1;transform:translateX(0)}}
.l{stroke-dasharray:30;stroke-dashoffset:30;animation:ld .5s ease-out forwards;animation-delay:1s}
@keyframes ld{0%{stroke-dashoffset:30}100%{stroke-dashoffset:0}}
</style>
</defs>
<g transform="translate(2,2)">
<rect class="b b1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
<rect class="b b2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
<rect class="b b3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g1)"/>
<rect class="b b4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
<rect class="b b5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
<circle class="d d1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
<circle class="d d2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
<circle class="d d3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
<circle class="d d4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
<circle class="d d5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
</g>
<g class="t">
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
<line class="l" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
</g>
</svg>
</div>
</div>
<!-- Loop -->
<div class="card" style="grid-column:1/-1">
<div class="label">Loop</div>
<div class="name">Непрерывная волна + пульсация точек</div>
<div class="desc">Бесконечная анимация. Идеальна для header, лобби, загрузки.</div>
<div class="preview">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="300" height="50">
<defs>
<linearGradient id="g2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
</linearGradient>
<style>
.w{animation:wave 2.4s ease-in-out infinite}
.w1{animation-delay:0s}.w2{animation-delay:.15s}.w3{animation-delay:.3s}.w4{animation-delay:.45s}.w5{animation-delay:.6s}
@keyframes wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.85)}}
.p{animation:dp 2.4s ease-in-out infinite}
.p1{animation-delay:0s}.p2{animation-delay:.1s}.p3{animation-delay:.2s}.p4{animation-delay:.3s}.p5{animation-delay:.4s}
@keyframes dp{0%,100%{opacity:var(--o);transform:scale(1)}50%{opacity:calc(var(--o)*.5);transform:scale(.8)}}
.ll{stroke-dasharray:30;animation:lp 3s ease-in-out infinite}
@keyframes lp{0%,100%{opacity:.8}50%{opacity:.3}}
</style>
</defs>
<g transform="translate(2,2)">
<rect class="w w1" x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
<rect class="w w2" x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
<rect class="w w3" x="20" y="8" width="6" height="50" rx="3" fill="url(#g2)"/>
<rect class="w w4" x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity=".6"/>
<rect class="w w5" x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity=".4"/>
<circle class="p p1" cx="7" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
<circle class="p p2" cx="15" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
<circle class="p p3" cx="23" cy="6" r="2" fill="#22c55e" style="--o:1"/>
<circle class="p p4" cx="31" cy="18" r="2" fill="#22c55e" style="--o:.5"/>
<circle class="p p5" cx="39" cy="24" r="2" fill="#22c55e" style="--o:.3"/>
</g>
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-.5">Calls<tspan font-weight="700" fill="#22c55e">24</tspan></text>
<line class="ll" x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
</svg>
</div>
</div>
</div>
</body>
</html>
logos/preview.html
+347
View File
@@ -0,0 +1,347 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>calls24 — Logo Concepts</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{background:#0a0a0a;color:#e5e5e5;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;padding:40px 20px}
h1{text-align:center;font-size:24px;font-weight:600;margin-bottom:8px;color:#fff}
.sub{text-align:center;font-size:13px;color:#888;margin-bottom:48px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:900px;margin:0 auto}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card{background:#111;border-radius:16px;padding:32px;border:1px solid #1a1a1a}
.card .label{font-size:12px;color:#22c55e;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:16px}
.card .name{font-size:14px;color:#ccc;margin-bottom:4px}
.card .desc{font-size:12px;color:#666;line-height:1.5;margin-bottom:20px}
.logo-row{display:flex;align-items:center;gap:24px;padding:24px;background:#0a0a0a;border-radius:12px;margin-bottom:8px}
.icon-row{display:flex;gap:16px;justify-content:center;padding:16px;background:#0a0a0a;border-radius:12px}
.icon-row svg{max-height:48px;max-width:48px}
</style>
</head>
<body>
<h1>calls24 — Logo Concepts</h1>
<p class="sub">5 вариантов логотипа • SVG • Pure code</p>
<div class="grid">
<!-- Logo 01 -->
<div class="card">
<div class="label">01</div>
<div class="name">Wordmark + Sound Wave</div>
<div class="desc">Минималистичный словоформ с вертикальной аудио-волной слева. Зелёный акцент на «24».</div>
<div class="logo-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="160" height="30">
<defs>
<linearGradient id="w1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
</linearGradient>
</defs>
<g transform="translate(4,5)">
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1)"/>
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1)" opacity="0.85"/>
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1)" opacity="0.7"/>
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1)" opacity="0.85"/>
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1)" opacity="0.6"/>
</g>
<text x="52" y="40" font-family="-apple-system,sans-serif" font-weight="700" font-size="32" fill="#ffffff">
calls<tspan fill="#22c55e">24</tspan>
</text>
</svg>
</div>
<div class="icon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<defs>
<linearGradient id="w1b" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<g transform="translate(3,3)">
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="url(#w1b)"/>
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="url(#w1b)" opacity="0.7"/>
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="url(#w1b)" opacity="0.85"/>
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="url(#w1b)" opacity="0.6"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<defs>
<linearGradient id="w1c" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<g transform="translate(3,3)">
<rect x="0" y="12" width="5" height="36" rx="2.5" fill="#000"/>
<rect x="8" y="8" width="5" height="44" rx="2.5" fill="#000" opacity="0.85"/>
<rect x="16" y="3" width="5" height="54" rx="2.5" fill="#000" opacity="0.7"/>
<rect x="24" y="10" width="5" height="40" rx="2.5" fill="#000" opacity="0.85"/>
<rect x="32" y="15" width="5" height="30" rx="2.5" fill="#000" opacity="0.6"/>
</g>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрный</div>
</div>
<!-- Logo 02 -->
<div class="card">
<div class="label">02</div>
<div class="name">Circle Sound Wave</div>
<div class="desc">Круглый значок с аудио-волной внутри. Иконка / фавикон.</div>
<div class="logo-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
<defs>
<linearGradient id="w2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<circle cx="30" cy="30" r="28" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.15"/>
<rect x="25" y="14" width="10" height="32" rx="5" fill="url(#w2)"/>
<rect x="14" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
<rect x="6" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
<rect x="40" y="20" width="6" height="20" rx="3" fill="#22c55e" opacity="0.7"/>
<rect x="48" y="25" width="6" height="10" rx="3" fill="#22c55e" opacity="0.45"/>
</svg>
</div>
<div class="icon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<circle cx="30" cy="30" r="28" fill="none" stroke="#000" stroke-width="2" opacity="0.15"/>
<rect x="25" y="14" width="10" height="32" rx="5" fill="#000"/>
<rect x="14" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
<rect x="6" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
<rect x="40" y="20" width="6" height="20" rx="3" fill="#000" opacity="0.7"/>
<rect x="48" y="25" width="6" height="10" rx="3" fill="#000" opacity="0.45"/>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
</div>
<!-- Logo 03 -->
<div class="card">
<div class="label">03</div>
<div class="name">Phone + Wave</div>
<div class="desc">Трубка с исходящими звуковыми волнами. Прямая ассоциация со звонками.</div>
<div class="logo-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
<g transform="translate(5,2)">
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#fff" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
</g>
</svg>
</div>
<div class="icon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<g transform="translate(5,2)">
<path d="M8 38 Q8 34 12 34 L16 34 Q18 34 18 32 L18 24 Q18 22 20 22 L26 22 Q28 22 28 24 L28 32 Q28 34 30 34 L34 34 Q38 34 38 38 L38 42 Q38 46 34 46 L22 46 Q18 46 18 42 Z" fill="none" stroke="#000" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M40 30 Q44 28 44 30 Q44 32 40 30" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round"/>
<path d="M42 25 Q48 22 48 30 Q48 38 42 35" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.6"/>
<path d="M44 20 Q52 15 52 30 Q52 45 44 40" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" opacity="0.35"/>
</g>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
</div>
<!-- Logo 04 -->
<div class="card">
<div class="label">04</div>
<div class="name">Hex Data Grid</div>
<div class="desc">Гексагон с волной и точками данных. Bauhaus + tech.</div>
<div class="logo-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
<defs>
<linearGradient id="w4" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<rect x="14" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="22" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="30" y="14" width="6" height="38" rx="3" fill="url(#w4)"/>
<rect x="38" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="46" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<circle cx="33" cy="12" r="2" fill="#22c55e"/>
<circle cx="25" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="41" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
</svg>
</div>
<div class="icon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<rect x="14" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
<rect x="22" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
<rect x="30" y="14" width="6" height="38" rx="3" fill="#000"/>
<rect x="38" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
<rect x="46" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
<circle cx="33" cy="12" r="2" fill="#000"/>
<circle cx="25" cy="18" r="2" fill="#000" opacity="0.5"/>
<circle cx="41" cy="18" r="2" fill="#000" opacity="0.5"/>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
</div>
<!-- Logo 05 -->
<div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
<div class="label">05</div>
<div class="name">C-Wave (Apple-like)</div>
<div class="desc">Буква «C» от calls24 → звуковая волна. Непрерывный path, чистая геометрия.</div>
<div class="logo-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
<defs>
<linearGradient id="w5" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#16a34a"/>
</linearGradient>
</defs>
<path d="
M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50
C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32
C14 26,16 18,24 14 C30 10,42 10,48 14 Z
" fill="url(#w5)"/>
</svg>
</div>
<div class="icon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<path d="M48 14 C38 10,26 12,18 18 C10 24,8 34,12 42 C14 48,22 52,32 50 C40 48,46 42,48 36 C46 38,40 42,32 42 C24 42,18 38,16 32 C14 26,16 18,24 14 C30 10,42 10,48 14 Z" fill="#000"/>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">чёрная версия</div>
</div>
<!-- Logo 06 -->
<div class="card" style="grid-column:1/-1;max-width:320px;margin:0 auto">
<div class="label" style="color:#ef4444">06 ★</div>
<div class="name">Hexagon + C-Wave (комбинированный)</div>
<div class="desc">Гексагон (лого-04) + C-волна (лого-05). Волна красного #ef4444 как на странице. Точки данных по контуру.</div>
<div class="logo-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="96" height="96">
<defs>
<linearGradient id="hexC" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#ef4444"/><stop offset="100%" stop-color="#dc2626"/>
</linearGradient>
</defs>
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="url(#hexC)"/>
<circle cx="20" cy="18" r="1.5" fill="#ef4444" opacity="0.5"/>
<circle cx="12" cy="26" r="1.5" fill="#ef4444" opacity="0.35"/>
<circle cx="34" cy="12" r="1.5" fill="#ef4444" opacity="0.65"/>
<circle cx="40" cy="20" r="1.5" fill="#ef4444" opacity="0.5"/>
<circle cx="44" cy="32" r="1.5" fill="#ef4444" opacity="0.35"/>
</svg>
</div>
<div class="icon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<polygon points="30,4 54,17 54,43 30,56 6,43 6,17" fill="none" stroke="#fff" stroke-width="1.5" opacity="0.15"/>
<path d="M44 16 C36 12,24 14,16 20 C8 26,6 36,10 42 C14 48,22 50,30 48 C38 46,44 40,46 34 C44 36,38 40,30 40 C22 40,16 36,14 30 C12 24,14 18,22 14 C28 10,40 10,44 16 Z" fill="#000"/>
<circle cx="20" cy="18" r="1.5" fill="#000" opacity="0.5"/>
<circle cx="12" cy="26" r="1.5" fill="#000" opacity="0.35"/>
<circle cx="34" cy="12" r="1.5" fill="#000" opacity="0.65"/>
<circle cx="40" cy="20" r="1.5" fill="#000" opacity="0.5"/>
<circle cx="44" cy="32" r="1.5" fill="#000" opacity="0.35"/>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной • чёрная версия</div>
</div>
<!-- Logo 04 Wordmark variants -->
<div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
<div class="label" style="color:#22c55e">04a ★</div>
<div class="name">Hex-Wave + "Calls24" — Inter (Regular/Bold)</div>
<div class="desc">Иконка + словоформ. Шрифт Inter: тонкий "calls" (#300 weight), жирный "24" (#700). Зелёный градиент на волне. Tech-подчёркивание.</div>
<div class="logo-row" style="justify-content:center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
<defs>
<linearGradient id="hexGrad" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<g transform="translate(2,2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad)"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
</g>
<text x="56" y="40" font-family="Inter,-apple-system,sans-serif" font-weight="300" font-size="30" fill="#fff" letter-spacing="-0.5">
Calls<tspan font-weight="700" fill="#22c55e">24</tspan>
</text>
<line x1="200" y1="40" x2="230" y2="40" stroke="#22c55e" stroke-width="2" stroke-linecap="round" opacity="0.8"/>
</svg>
</div>
<div class="icon-row">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<defs><linearGradient id="h1" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/></linearGradient></defs>
<g transform="translate(2,2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#h1)"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60" width="48" height="48">
<g transform="translate(2,2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="#000"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#000" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#000" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#000" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#000" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#000"/>
<circle cx="31" cy="18" r="2" fill="#000" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#000" opacity="0.3"/>
</g>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">цветной иконка • чёрная иконка</div>
</div>
<div class="card" style="grid-column:1/-1;max-width:400px;margin:0 auto">
<div class="label">04b</div>
<div class="name">Hex-Wave + "Calls24" — Manrope (Medium/Bold)</div>
<div class="desc">Тот же знак, другой шрифт. Manrope: более характерный, геометричный. Двойная tech-линия как акцент.</div>
<div class="logo-row" style="justify-content:center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 340 56" width="272" height="45">
<defs>
<linearGradient id="hexGrad2" x1="0%" y1="0%" x2="100%" y2="100%">
<stop offset="0%" stop-color="#22c55e"/><stop offset="100%" stop-color="#15803d"/>
</linearGradient>
</defs>
<g transform="translate(2,2)">
<rect x="4" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<rect x="12" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="20" y="8" width="6" height="50" rx="3" fill="url(#hexGrad2)"/>
<rect x="28" y="20" width="6" height="26" rx="3" fill="#22c55e" opacity="0.6"/>
<rect x="36" y="26" width="6" height="14" rx="3" fill="#22c55e" opacity="0.4"/>
<circle cx="7" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
<circle cx="15" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="23" cy="6" r="2" fill="#22c55e"/>
<circle cx="31" cy="18" r="2" fill="#22c55e" opacity="0.5"/>
<circle cx="39" cy="24" r="2" fill="#22c55e" opacity="0.3"/>
</g>
<text x="56" y="38" font-family="Manrope,-apple-system,sans-serif" font-weight="400" font-size="32" fill="#fff" letter-spacing="-0.3">
calls<tspan font-weight="700" fill="#22c55e">24</tspan>
</text>
<line x1="202" y1="42" x2="228" y2="42" stroke="#22c55e" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
<line x1="202" y1="45" x2="220" y2="45" stroke="#22c55e" stroke-width="1" stroke-linecap="round" opacity="0.3"/>
</svg>
</div>
<div style="text-align:center;font-size:10px;color:#444;margin-top:4px">Inter vs Manrope — выбери характер</div>
</div>
</div>
</body>
</html>