Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
47 changes: 46 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1 +1,46 @@
# test
# PHANTOM VPN — Russian VHS-Inspired Website

A highly stylized VHS-aesthetic landing page for a VPN service, fully in Russian.

## Tech Stack

- **React 19** + **Vite 8**
- **Tailwind CSS v4** (via `@tailwindcss/vite`)
- **Framer Motion** for animations

## Features

- 🎬 Tape loading intro screen with terminal log animation
- 📺 Global VHS overlay: film grain canvas, glitch bands, scanlines, timecode HUD
- 🌍 Interactive world map with flickering server nodes and connection lines
- 📊 Animated analog performance bars and speedometer gauges
- 📱 CRT-screen app preview with interactive connect button
- 💬 VHS-caption styled testimonials
- 📼 Cassette label pricing cards
- ⚡ RGB split / glitch effects on scroll and hover
- 🎨 Dark VHS palette: deep black, faded red/blue/cyan, color bleeding

## Sections

1. **Hero** — "Тебя уже отслеживают" with parallax & glitch headline
2. **Features** — "Запись найдена" — 4 security features with distortion cards
3. **Network** — "Глобальная сеть" — SVG world map with live pulsing nodes
4. **Performance** — "Производительность" — Analog UI bars + speedometers
5. **Interface** — "Интерфейс" — CRT screen with interactive VPN app mockup
6. **Testimonials** — "Отзывы" — VHS recording caption style
7. **Pricing** — "Тарифы" — Cassette label cards
8. **Final CTA** — "Отключись от слежки"

## Development

```bash
npm install
npm run dev
```

## Build

```bash
npm run build
npm run preview
```
29 changes: 29 additions & 0 deletions eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{js,jsx}'],
extends: [
js.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
parserOptions: {
ecmaVersion: 'latest',
ecmaFeatures: { jsx: true },
sourceType: 'module',
},
},
rules: {
'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
},
},
])
17 changes: 17 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PHANTOM VPN — Скрой свои данные</title>
<meta name="description" content="Тебя уже отслеживают. Скрой свои данные. Включи защиту с PHANTOM VPN." />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Oswald:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Loading