initial commit
This commit is contained in:
commit
a25956d266
374
DESIGN.md
Normal file
374
DESIGN.md
Normal file
@ -0,0 +1,374 @@
|
|||||||
|
# Surfshark — Style Reference
|
||||||
|
> crisp ocean horizon at golden hour — warm coral sun meets teal sea, all floating on white sand
|
||||||
|
|
||||||
|
**Theme:** light
|
||||||
|
|
||||||
|
Source measurements are normalized; roles and recommendations are interpreted. Font summary lists are independent, not paired by position. HTML examples are reconstructions, not source components.
|
||||||
|
|
||||||
|
Surfshark's design language is a confident light-mode consumer SaaS anchored by a vivid teal brand mark and a warm coral primary action. Dark charcoal hero cards and feature panels provide high-contrast resting places between airy white sections, creating a rhythm of dark→light→dark that frames the product as both trustworthy and modern. Typography is exclusively Inter with a wide size range (12–60px) and a slight negative tracking at display sizes that tightens headlines without feeling clinical. Components lean rounded and pill-like — 48px card radii, 12px button radii — giving the interface a friendly, approachable feel. The three-color accent system (teal for brand identity, coral for conversion, yellow for promotional urgency) keeps the chromatic footprint tiny but high-impact, while a deep neutral scale handles 95% of the UI.
|
||||||
|
|
||||||
|
## Tokens — Colors
|
||||||
|
|
||||||
|
| Name | Value | Token | Role |
|
||||||
|
|------|-------|-------|------|
|
||||||
|
| Surfshark Teal | `#1ebfbf` | `--color-surfshark-teal` | Brand mark icon, accent highlights, inline link emphasis — the signature chromatic thread that ties logo, headings, and accent text together |
|
||||||
|
| Coral Pulse | `#fa3556` | `--color-coral-pulse` | Primary action buttons, high-urgency CTAs — warm pink-red against the cool palette creates immediate conversion pull |
|
||||||
|
| Promo Gold | `#ffc200` | `--color-promo-gold` | Promotional banner background, limited-time deal strips — golden yellow reserved exclusively for urgency framing |
|
||||||
|
| Charcoal Ink | `#16191c` | `--color-charcoal-ink` | Primary text, dark hero backgrounds, footer surfaces, button text on coral — near-black with a hint of cool depth |
|
||||||
|
| Pure White | `#ffffff` | `--color-pure-white` | Page canvas, card surfaces, button text on dark fills, text on coral CTAs |
|
||||||
|
| Fog White | `#f9f9f9` | `--color-fog-white` | Alternate canvas surface, subtle card backgrounds, soft section differentiation from pure white |
|
||||||
|
| Tide Tint | `#e8f7f8` | `--color-tide-tint` | Faint teal-tinted surface wash — barely-perceptible background variant for feature blocks |
|
||||||
|
| Ash Gray | `#dadadd` | `--color-ash-gray` | Light borders, dividers, subtle separation lines — cooler-toned hairline color |
|
||||||
|
| Mist Gray | `#bfbfc0` | `--color-mist-gray` | Secondary borders, disabled states, heavy-use divider color (highest neutral frequency after black) |
|
||||||
|
| Slate | `#5b6065` | `--color-slate` | Muted body text, secondary copy, icon strokes in resting state |
|
||||||
|
| Graphite | `#393e41` | `--color-graphite` | Navigation borders, tertiary UI elements, slightly lighter than Charcoal for layered depth |
|
||||||
|
| Carbon | `#000000` | `--color-carbon` | Maximum-contrast borders, SVG icon fills, structural strokes — used heavily for crisp 1px rules |
|
||||||
|
| Deep Abyss | `#1e2327` | `--color-deep-abyss` | Alternate dark surface — slightly bluer than Charcoal, used in distinct dark panels |
|
||||||
|
|
||||||
|
## Tokens — Typography
|
||||||
|
|
||||||
|
### Inter — Sole typeface across the entire product — 400 for body and descriptions, 600 for navigation, subheadings, and emphasis, 700 for display headlines and button labels. Inter's geometric neutrality and tall x-height keep the system legible at 12px captions while the 60px display weight holds authority without requiring a custom display face. · `--font-inter`
|
||||||
|
- **Substitute:** system-ui, -apple-system, Segoe UI, Roboto
|
||||||
|
- **Weights:** 400, 600, 700
|
||||||
|
- **Sizes:** 12, 14, 16, 18, 24, 32, 40, 48, 60
|
||||||
|
- **Line height:** 1.0–1.75
|
||||||
|
- **Letter spacing:** -1.5px at 60px (-0.025em), near-zero at body sizes, +0.24px at 14px (0.017em) for micro-copy
|
||||||
|
- **OpenType features:** `\"cv11\", \"ss01\"`
|
||||||
|
- **Role:** Sole typeface across the entire product — 400 for body and descriptions, 600 for navigation, subheadings, and emphasis, 700 for display headlines and button labels. Inter's geometric neutrality and tall x-height keep the system legible at 12px captions while the 60px display weight holds authority without requiring a custom display face.
|
||||||
|
|
||||||
|
### Type Scale
|
||||||
|
|
||||||
|
| Role | Family | Weight | Size | Line Height | Letter Spacing | Token |
|
||||||
|
|------|--------|--------|------|-------------|----------------|-------|
|
||||||
|
| caption | — | — | 12px | 1.5 | 0.17px | `--text-caption` |
|
||||||
|
| body-sm | — | — | 14px | 1.71 | 0.24px | `--text-body-sm` |
|
||||||
|
| body | — | — | 16px | 1.75 | — | `--text-body` |
|
||||||
|
| subheading | — | — | 18px | 1.67 | — | `--text-subheading` |
|
||||||
|
| heading-sm | — | — | 24px | 1.33 | — | `--text-heading-sm` |
|
||||||
|
| heading | — | — | 32px | 1.3 | — | `--text-heading` |
|
||||||
|
| heading-lg | — | — | 40px | 1.21 | — | `--text-heading-lg` |
|
||||||
|
| display | — | — | 60px | 1.07 | -1.5px | `--text-display` |
|
||||||
|
|
||||||
|
## Tokens — Spacing & Shapes
|
||||||
|
|
||||||
|
**Base unit:** 4px
|
||||||
|
|
||||||
|
**Density:** comfortable
|
||||||
|
|
||||||
|
### Spacing Scale
|
||||||
|
|
||||||
|
| Name | Value | Token |
|
||||||
|
|------|-------|-------|
|
||||||
|
| 4 | 4px | `--spacing-4` |
|
||||||
|
| 8 | 8px | `--spacing-8` |
|
||||||
|
| 12 | 12px | `--spacing-12` |
|
||||||
|
| 16 | 16px | `--spacing-16` |
|
||||||
|
| 24 | 24px | `--spacing-24` |
|
||||||
|
| 32 | 32px | `--spacing-32` |
|
||||||
|
| 48 | 48px | `--spacing-48` |
|
||||||
|
| 64 | 64px | `--spacing-64` |
|
||||||
|
| 96 | 96px | `--spacing-96` |
|
||||||
|
| 200 | 200px | `--spacing-200` |
|
||||||
|
|
||||||
|
### Border Radius
|
||||||
|
|
||||||
|
| Element | Value |
|
||||||
|
|---------|-------|
|
||||||
|
| cards | 48px |
|
||||||
|
| links | 8px |
|
||||||
|
| pills | 96px |
|
||||||
|
| small | 8px |
|
||||||
|
| buttons | 12px |
|
||||||
|
|
||||||
|
### Layout
|
||||||
|
|
||||||
|
- **Page max-width:** 1200px
|
||||||
|
- **Section gap:** 64px
|
||||||
|
- **Card padding:** 32px
|
||||||
|
- **Element gap:** 8px
|
||||||
|
|
||||||
|
## Components
|
||||||
|
|
||||||
|
### Promo Banner
|
||||||
|
**Role:** Top-of-page limited-time deal strip
|
||||||
|
|
||||||
|
Full-width 40px tall bar with #ffc200 background, centered 14px Inter weight 400 black text, no border or radius. Reserved for time-sensitive offers; appears above the navigation.
|
||||||
|
|
||||||
|
### Primary Navigation
|
||||||
|
**Role:** Sticky top navigation bar
|
||||||
|
|
||||||
|
White (#ffffff) background, 64px height. Left: Surfshark logo (teal
|
||||||
|
|
||||||
|
### Hero Card (Dark)
|
||||||
|
**Role:** Full-bleed conversion-focused hero
|
||||||
|
|
||||||
|
#16191c background with 64px border-radius, full width up to 1200px max. Left column: 60px Inter weight 700 white headline, teal #1ebfbf inline accent text at 24px, white checkmark bullet list (16px), coral CTA button. Right column: product/hero image. Generous 48–64px internal padding.
|
||||||
|
|
||||||
|
### Coral Filled Button
|
||||||
|
**Role:** Primary conversion action
|
||||||
|
|
||||||
|
#fa3556 background, white text, 12px border-radius, 16px vertical × 24px horizontal padding, 16px Inter weight 600. The only fully chromatic filled button in the system. Used for
|
||||||
|
|
||||||
|
### Dark Filled Button
|
||||||
|
**Role:** Secondary action on light backgrounds
|
||||||
|
|
||||||
|
#16191c background, white text, 12px border-radius, 16px × 24px padding, 16px Inter weight 600. Used when coral would compete with a nearby primary CTA.
|
||||||
|
|
||||||
|
### Text Link with Arrow
|
||||||
|
**Role:** Inline navigational link
|
||||||
|
|
||||||
|
16px Inter weight 600 #16191c text with trailing
|
||||||
|
|
||||||
|
### Checkmark Feature List
|
||||||
|
**Role:** Benefit bullet list in hero/feature blocks
|
||||||
|
|
||||||
|
Teal #1ebfbf checkmark icon (16px) + 16px Inter weight 400 white or charcoal text, 8–12px row gap, left-aligned.
|
||||||
|
|
||||||
|
### Feature Card (Light)
|
||||||
|
**Role:** Product feature highlight card
|
||||||
|
|
||||||
|
#ffffff or #f9f9f9 background, 48px border-radius, 32px padding, no shadow or 1px #dadadd border. 24–32px Inter weight 700 charcoal heading, 16px body text in #5b6065.
|
||||||
|
|
||||||
|
### Feature Card (Dark)
|
||||||
|
**Role:** Alternating dark feature panel
|
||||||
|
|
||||||
|
#16191c or #1e2327 background, 48px border-radius, 32px padding. White 32px heading, #bfbfc0 or #dadadd body text, optional teal
|
||||||
|
|
||||||
|
### Reviewer Avatar Strip
|
||||||
|
**Role:** Social proof header above testimonials
|
||||||
|
|
||||||
|
Row of 5–7 circular avatar images (64px diameter, full crop, no border), centered horizontally with 8–12px overlap. Small caption row beneath in 12px Inter weight 400 #5b6065.
|
||||||
|
|
||||||
|
### Testimonial Block
|
||||||
|
**Role:** Centered quote with attribution
|
||||||
|
|
||||||
|
White background, centered 32–40px Inter weight 700 #16191c quote text, 12px uppercase Inter weight 600 attribution name in #16191c, 14px #5b6065 subscriber count, dark charcoal pill button below.
|
||||||
|
|
||||||
|
### Pill Tag (Rating Badge)
|
||||||
|
**Role:** Star-rating display chip
|
||||||
|
|
||||||
|
Small inline label like
|
||||||
|
|
||||||
|
### Footer
|
||||||
|
**Role:** Site-wide footer with link columns
|
||||||
|
|
||||||
|
#16191c or near-black background, white 16px link columns organized under bold 14px Inter weight 700 white headings, 32px column gap, 48px vertical padding. Logo repeats in white/teal at top.
|
||||||
|
|
||||||
|
### Pill Button (Dark)
|
||||||
|
**Role:** Compact secondary CTA in testimonial/mid-page zones
|
||||||
|
|
||||||
|
#16191c background, white 16px Inter weight 600 text, 96px border-radius (full pill), 12px × 24px padding. Used for
|
||||||
|
|
||||||
|
## Do's and Don'ts
|
||||||
|
|
||||||
|
### Do
|
||||||
|
- Use Inter exclusively — never introduce a secondary typeface for display or body.
|
||||||
|
- Apply the three-color accent rule: teal for brand identity, coral for conversion, yellow for time-sensitive promos only.
|
||||||
|
- Use 12px radius for standard buttons and 48px radius for feature cards — these two radii define the system's personality.
|
||||||
|
- Maintain the dark→light→dark section rhythm: alternate between #16191c panels and #ffffff/#f9f9f9 sections at 64px gaps.
|
||||||
|
- Set display headlines at 60px Inter weight 700 with -1.5px letter-spacing — tighter tracking on large sizes is non-negotiable.
|
||||||
|
- Use #fa3556 filled coral buttons for the single primary action per view; switch to #16191c dark buttons for secondary actions to avoid CTA competition.
|
||||||
|
- Anchor every page with the yellow promo banner above the nav when a deal is active; never move it below the fold.
|
||||||
|
|
||||||
|
### Don't
|
||||||
|
- Don't use #1ebfbf as a button fill — teal is for brand identity, icons, and inline accent text, not for conversion surfaces.
|
||||||
|
- Don't apply shadows to cards — the system relies on background contrast and 48px radius for elevation, not drop shadows.
|
||||||
|
- Don't use border-radius values outside the scale: 8, 12, 32, 48, 64, 96px. Intermediate values break the visual language.
|
||||||
|
- Don't place two coral CTAs in the same viewport — one coral per view, the rest dark or ghost.
|
||||||
|
- Don't use the yellow #ffc200 outside promotional banners — leaking it into feature blocks dilutes its urgency signal.
|
||||||
|
- Don't use serif, display, or decorative fonts — Inter at multiple weights covers the full hierarchy.
|
||||||
|
- Don't set body text below 16px on marketing pages; 14px is the minimum and only for captions and micro-copy.
|
||||||
|
|
||||||
|
## Surfaces
|
||||||
|
|
||||||
|
| Level | Name | Value | Purpose |
|
||||||
|
|-------|------|-------|---------|
|
||||||
|
| 0 | Canvas | `#f9f9f9` | Page background, soft neutral base |
|
||||||
|
| 1 | Card | `#ffffff` | Feature cards, content surfaces, light section panels |
|
||||||
|
| 2 | Tinted Wash | `#e8f7f8` | Faint teal-tinted section background for brand-adjacent blocks |
|
||||||
|
| 3 | Dark Panel | `#16191c` | Hero cards, feature panels, footer — high-contrast resting surfaces |
|
||||||
|
| 4 | Deep Abyss | `#1e2327` | Alternate dark surface with subtle blue shift for layered depth |
|
||||||
|
|
||||||
|
## Elevation
|
||||||
|
|
||||||
|
The system avoids drop shadows entirely. Elevation is communicated through background-color contrast (white card on #f9f9f9 canvas, or #16191c panel on white section), 48px border-radius on large surfaces, and 1px hairline borders in #dadadd or #bfbfc0. This keeps the interface flat, fast, and modern — shadows would add visual weight that conflicts with the airy consumer-SaaS tone.
|
||||||
|
|
||||||
|
## Imagery
|
||||||
|
|
||||||
|
Photography is warm-toned and lifestyle-oriented: people using devices in cozy, dimly-lit domestic settings (candlelit rooms, sofas, natural evening light). Hero product renders are hyper-saturated and conceptual — a translucent teal jelly dessert with raspberries styled as VPN iconography. Avatars are circular tight crops of diverse faces used as social proof. Icons throughout are flat, single-stroke, and teal (#1ebfbf) on light backgrounds or white on dark. The overall image-to-text ratio is moderate: imagery occupies roughly 40% of viewport real estate, concentrated in hero panels and feature cards rather than full-bleed editorial spreads.
|
||||||
|
|
||||||
|
## Layout
|
||||||
|
|
||||||
|
Max-width 1200px centered container with 64px section gaps. Hero is a full-bleed dark rounded card (64px radius) with 2-column split: text-left, image-right. Below the hero, sections alternate between centered single-column text blocks (testimonials, value props) and 2-column text+image feature panels. Navigation is a 64px-tall sticky white bar. The page rhythm is: promo banner → nav → dark hero card → white centered text → dark feature panel → white testimonial → footer. No sidebar, no mega-menu, no masonry — the layout is linear and vertically stacked with generous breathing room between sections.
|
||||||
|
|
||||||
|
## Agent Prompt Guide
|
||||||
|
|
||||||
|
primary action: #fa3556 (filled action)
|
||||||
|
Create a Primary Action Button: #fa3556 background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
|
||||||
|
|
||||||
|
## Similar Brands
|
||||||
|
|
||||||
|
- **NordVPN** — Same dark hero card on light page pattern, teal-and-warm-accent palette, rounded 48px feature cards, Inter-style sans-serif throughout
|
||||||
|
- **ExpressVPN** — Similar alternating dark/light section rhythm, single warm accent color against deep charcoal panels, large display headlines on dark hero backgrounds
|
||||||
|
- **Proton VPN** — Shared consumer-VPN visual language with rounded cards, minimal shadows, and a single chromatic action color against an otherwise neutral system
|
||||||
|
- **1Password** — Same max-width 1200px centered layout, dark hero with split text+image, generous 64px section gaps, and Inter typography with tight display tracking
|
||||||
|
|
||||||
|
## Quick Start
|
||||||
|
|
||||||
|
### CSS Custom Properties
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
/* Colors */
|
||||||
|
--color-surfshark-teal: #1ebfbf;
|
||||||
|
--color-coral-pulse: #fa3556;
|
||||||
|
--color-promo-gold: #ffc200;
|
||||||
|
--color-charcoal-ink: #16191c;
|
||||||
|
--color-pure-white: #ffffff;
|
||||||
|
--color-fog-white: #f9f9f9;
|
||||||
|
--color-tide-tint: #e8f7f8;
|
||||||
|
--color-ash-gray: #dadadd;
|
||||||
|
--color-mist-gray: #bfbfc0;
|
||||||
|
--color-slate: #5b6065;
|
||||||
|
--color-graphite: #393e41;
|
||||||
|
--color-carbon: #000000;
|
||||||
|
--color-deep-abyss: #1e2327;
|
||||||
|
|
||||||
|
/* Typography — Font Families */
|
||||||
|
--font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
|
||||||
|
/* Typography — Scale */
|
||||||
|
--text-caption: 12px;
|
||||||
|
--leading-caption: 1.5;
|
||||||
|
--tracking-caption: 0.17px;
|
||||||
|
--text-body-sm: 14px;
|
||||||
|
--leading-body-sm: 1.71;
|
||||||
|
--tracking-body-sm: 0.24px;
|
||||||
|
--text-body: 16px;
|
||||||
|
--leading-body: 1.75;
|
||||||
|
--text-subheading: 18px;
|
||||||
|
--leading-subheading: 1.67;
|
||||||
|
--text-heading-sm: 24px;
|
||||||
|
--leading-heading-sm: 1.33;
|
||||||
|
--text-heading: 32px;
|
||||||
|
--leading-heading: 1.3;
|
||||||
|
--text-heading-lg: 40px;
|
||||||
|
--leading-heading-lg: 1.21;
|
||||||
|
--text-display: 60px;
|
||||||
|
--leading-display: 1.07;
|
||||||
|
--tracking-display: -1.5px;
|
||||||
|
|
||||||
|
/* Typography — Weights */
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-semibold: 600;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--spacing-unit: 4px;
|
||||||
|
--spacing-4: 4px;
|
||||||
|
--spacing-8: 8px;
|
||||||
|
--spacing-12: 12px;
|
||||||
|
--spacing-16: 16px;
|
||||||
|
--spacing-24: 24px;
|
||||||
|
--spacing-32: 32px;
|
||||||
|
--spacing-48: 48px;
|
||||||
|
--spacing-64: 64px;
|
||||||
|
--spacing-96: 96px;
|
||||||
|
--spacing-200: 200px;
|
||||||
|
|
||||||
|
/* Layout */
|
||||||
|
--page-max-width: 1200px;
|
||||||
|
--section-gap: 64px;
|
||||||
|
--card-padding: 32px;
|
||||||
|
--element-gap: 8px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
--radius-lg: 8px;
|
||||||
|
--radius-xl: 12px;
|
||||||
|
--radius-2xl: 16px;
|
||||||
|
--radius-3xl: 32px;
|
||||||
|
--radius-full: 48px;
|
||||||
|
--radius-full-2: 64px;
|
||||||
|
--radius-full-3: 96px;
|
||||||
|
|
||||||
|
/* Named Radii */
|
||||||
|
--radius-cards: 48px;
|
||||||
|
--radius-links: 8px;
|
||||||
|
--radius-pills: 96px;
|
||||||
|
--radius-small: 8px;
|
||||||
|
--radius-buttons: 12px;
|
||||||
|
|
||||||
|
/* Surfaces */
|
||||||
|
--surface-canvas: #f9f9f9;
|
||||||
|
--surface-card: #ffffff;
|
||||||
|
--surface-tinted-wash: #e8f7f8;
|
||||||
|
--surface-dark-panel: #16191c;
|
||||||
|
--surface-deep-abyss: #1e2327;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Tailwind v4
|
||||||
|
|
||||||
|
```css
|
||||||
|
@theme {
|
||||||
|
/* Colors */
|
||||||
|
--color-surfshark-teal: #1ebfbf;
|
||||||
|
--color-coral-pulse: #fa3556;
|
||||||
|
--color-promo-gold: #ffc200;
|
||||||
|
--color-charcoal-ink: #16191c;
|
||||||
|
--color-pure-white: #ffffff;
|
||||||
|
--color-fog-white: #f9f9f9;
|
||||||
|
--color-tide-tint: #e8f7f8;
|
||||||
|
--color-ash-gray: #dadadd;
|
||||||
|
--color-mist-gray: #bfbfc0;
|
||||||
|
--color-slate: #5b6065;
|
||||||
|
--color-graphite: #393e41;
|
||||||
|
--color-carbon: #000000;
|
||||||
|
--color-deep-abyss: #1e2327;
|
||||||
|
|
||||||
|
/* Typography */
|
||||||
|
--font-inter: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||||
|
|
||||||
|
/* Typography — Scale */
|
||||||
|
--text-caption: 12px;
|
||||||
|
--leading-caption: 1.5;
|
||||||
|
--tracking-caption: 0.17px;
|
||||||
|
--text-body-sm: 14px;
|
||||||
|
--leading-body-sm: 1.71;
|
||||||
|
--tracking-body-sm: 0.24px;
|
||||||
|
--text-body: 16px;
|
||||||
|
--leading-body: 1.75;
|
||||||
|
--text-subheading: 18px;
|
||||||
|
--leading-subheading: 1.67;
|
||||||
|
--text-heading-sm: 24px;
|
||||||
|
--leading-heading-sm: 1.33;
|
||||||
|
--text-heading: 32px;
|
||||||
|
--leading-heading: 1.3;
|
||||||
|
--text-heading-lg: 40px;
|
||||||
|
--leading-heading-lg: 1.21;
|
||||||
|
--text-display: 60px;
|
||||||
|
--leading-display: 1.07;
|
||||||
|
--tracking-display: -1.5px;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--spacing-4: 4px;
|
||||||
|
--spacing-8: 8px;
|
||||||
|
--spacing-12: 12px;
|
||||||
|
--spacing-16: 16px;
|
||||||
|
--spacing-24: 24px;
|
||||||
|
--spacing-32: 32px;
|
||||||
|
--spacing-48: 48px;
|
||||||
|
--spacing-64: 64px;
|
||||||
|
--spacing-96: 96px;
|
||||||
|
--spacing-200: 200px;
|
||||||
|
|
||||||
|
/* Border Radius */
|
||||||
|
--radius-lg: 8px;
|
||||||
|
--radius-xl: 12px;
|
||||||
|
--radius-2xl: 16px;
|
||||||
|
--radius-3xl: 32px;
|
||||||
|
--radius-full: 48px;
|
||||||
|
--radius-full-2: 64px;
|
||||||
|
--radius-full-3: 96px;
|
||||||
|
}
|
||||||
|
```
|
||||||
162
README.md
Normal file
162
README.md
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
<<<<<<< HEAD
|
||||||
|
# DmitriyVPN — Лендинг сервиса
|
||||||
|
|
||||||
|
> Быстрый, стабильный и надёжный VPN для всех устройств.
|
||||||
|
|
||||||
|
🌐 **Сайт:** [dmitriyvpn.serotonin.su](https://dmitriyvpn.serotonin.su)
|
||||||
|
💬 **Telegram-канал:** [@DmitriyVPN](https://t.me/DmitriyVPN)
|
||||||
|
🛠 **Поддержка:** [@Gioramily](https://t.me/Gioramily)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📌 О проекте
|
||||||
|
|
||||||
|
Лендинг-страница для VPN-сервиса **DmitriyVPN**. Сайт рассказывает о тарифах, преимуществах сервиса и помогает пользователям быстро подключиться через Telegram-бот.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🛠 Технологии
|
||||||
|
|
||||||
|
- **HTML5** — разметка
|
||||||
|
- **CSS3** — стили, анимации, адаптив
|
||||||
|
- **Vanilla JS** — без фреймворков
|
||||||
|
- **Google Fonts** — Inter, Fira Code
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📂 Структура
|
||||||
|
|
||||||
|
```
|
||||||
|
dmitriyvpn/
|
||||||
|
├── index.html # Основная страница
|
||||||
|
└── README.md # Документация
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 🚀 Запуск локально
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Просто открой файл в браузере
|
||||||
|
start index.html
|
||||||
|
```
|
||||||
|
|
||||||
|
Или через расширение **Live Server** в VS Code.
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📋 Тарифы
|
||||||
|
|
||||||
|
| Тариф | Устройства | Цена |
|
||||||
|
|---|---|---|
|
||||||
|
| Бесплатный | 1 | 0 ₽ |
|
||||||
|
| Standard | 1 | 109.22 ₽/мес |
|
||||||
|
| Pro | 5 | 194.41 ₽/мес |
|
||||||
|
| Premium | 15 | 291.62 ₽/мес |
|
||||||
|
| Пробный | 1 | 0 ₽ / 3 дня |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
## 📞 Контакты
|
||||||
|
|
||||||
|
- Telegram-канал: [@DmitriyVPN](https://t.me/DmitriyVPN)
|
||||||
|
- Техподдержка: [@Gioramily](https://t.me/Gioramily)
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
© 2026 DmitriyVPN. Все права защищены.
|
||||||
|
=======
|
||||||
|
# dmitriyvpn_site
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Getting started
|
||||||
|
|
||||||
|
To make it easy for you to get started with GitLab, here's a list of recommended next steps.
|
||||||
|
|
||||||
|
Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
|
||||||
|
|
||||||
|
## Add your files
|
||||||
|
|
||||||
|
* [Create](https://docs.gitlab.com/user/project/repository/web_editor/#create-a-file) or [upload](https://docs.gitlab.com/user/project/repository/web_editor/#upload-a-file) files
|
||||||
|
* [Add files using the command line](https://docs.gitlab.com/topics/git/add_files/#add-files-to-a-git-repository) or push an existing Git repository with the following command:
|
||||||
|
|
||||||
|
```
|
||||||
|
cd existing_repo
|
||||||
|
git remote add origin https://gitlab.com/sk-ceo-group/dmitriyvpn_site.git
|
||||||
|
git branch -M main
|
||||||
|
git push -uf origin main
|
||||||
|
```
|
||||||
|
|
||||||
|
## Integrate with your tools
|
||||||
|
|
||||||
|
* [Set up project integrations](https://gitlab.com/sk-ceo-group/dmitriyvpn_site/-/settings/integrations)
|
||||||
|
|
||||||
|
## Collaborate with your team
|
||||||
|
|
||||||
|
* [Invite team members and collaborators](https://docs.gitlab.com/user/project/members/)
|
||||||
|
* [Create a new merge request](https://docs.gitlab.com/user/project/merge_requests/creating_merge_requests/)
|
||||||
|
* [Automatically close issues from merge requests](https://docs.gitlab.com/user/project/issues/managing_issues/#closing-issues-automatically)
|
||||||
|
* [Enable merge request approvals](https://docs.gitlab.com/user/project/merge_requests/approvals/)
|
||||||
|
* [Set auto-merge](https://docs.gitlab.com/user/project/merge_requests/auto_merge/)
|
||||||
|
|
||||||
|
## Test and Deploy
|
||||||
|
|
||||||
|
Use the built-in continuous integration in GitLab.
|
||||||
|
|
||||||
|
* [Get started with GitLab CI/CD](https://docs.gitlab.com/ci/quick_start/)
|
||||||
|
* [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/user/application_security/sast/)
|
||||||
|
* [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/topics/autodevops/requirements/)
|
||||||
|
* [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/user/clusters/agent/)
|
||||||
|
* [Set up protected environments](https://docs.gitlab.com/ci/environments/protected_environments/)
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
# Editing this README
|
||||||
|
|
||||||
|
When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
|
||||||
|
|
||||||
|
## Suggestions for a good README
|
||||||
|
|
||||||
|
Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
|
||||||
|
|
||||||
|
## Name
|
||||||
|
Choose a self-explaining name for your project.
|
||||||
|
|
||||||
|
## Description
|
||||||
|
Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
|
||||||
|
|
||||||
|
## Badges
|
||||||
|
On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
|
||||||
|
|
||||||
|
## Visuals
|
||||||
|
Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
|
||||||
|
|
||||||
|
## Installation
|
||||||
|
Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
|
||||||
|
|
||||||
|
## Support
|
||||||
|
Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
|
||||||
|
|
||||||
|
## Roadmap
|
||||||
|
If you have ideas for releases in the future, it is a good idea to list them in the README.
|
||||||
|
|
||||||
|
## Contributing
|
||||||
|
State if you are open to contributions and what your requirements are for accepting them.
|
||||||
|
|
||||||
|
For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
|
||||||
|
|
||||||
|
You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
|
||||||
|
|
||||||
|
## Authors and acknowledgment
|
||||||
|
Show your appreciation to those who have contributed to the project.
|
||||||
|
|
||||||
|
## License
|
||||||
|
For open source projects, say how it is licensed.
|
||||||
|
|
||||||
|
## Project status
|
||||||
|
If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
|
||||||
|
>>>>>>> acd6753ff61650e96b74493cf0058ed0c9ccdd33
|
||||||
652
index.html
Normal file
652
index.html
Normal file
@ -0,0 +1,652 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>DmitriyVPN — Быстрый и стабильный VPN для всех устройств</title>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--bg-main: #0a0b0d;
|
||||||
|
--bg-card: #121418;
|
||||||
|
--bg-card-hover: #16191f;
|
||||||
|
--border: #1f242e;
|
||||||
|
--border-hover: #2f3747;
|
||||||
|
--text-main: #ffffff;
|
||||||
|
--text-sub: #94a3b8;
|
||||||
|
--accent: #38bdf8;
|
||||||
|
--accent-glow: rgba(56, 189, 248, 0.15);
|
||||||
|
--font-main: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-main);
|
||||||
|
background-color: var(--bg-main);
|
||||||
|
color: var(--text-main);
|
||||||
|
line-height: 1.5;
|
||||||
|
overflow-x: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
body::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: -10%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 600px;
|
||||||
|
height: 400px;
|
||||||
|
background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
|
||||||
|
z-index: -1;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1140px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 24px 0;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
backdrop-filter: blur(12px);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 100;
|
||||||
|
background: rgba(10, 11, 13, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-weight: 800;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
letter-spacing: -0.5px;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo span {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a {
|
||||||
|
color: #94a3b8;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a:hover {
|
||||||
|
color: var(--text-main);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-tg-nav {
|
||||||
|
background: #1e293b;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--text-main);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-tg-nav:hover {
|
||||||
|
background: #0284c7;
|
||||||
|
border-color: #38bdf8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero {
|
||||||
|
padding: 80px 0 100px 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.2fr 0.8fr;
|
||||||
|
align-items: center;
|
||||||
|
gap: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.hero { grid-template-columns: 1fr; text-align: center; padding: 40px 0; }
|
||||||
|
.hero-left { order: 1; }
|
||||||
|
.hero-right { order: 2; display: flex; justify-content: center; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-left {
|
||||||
|
max-width: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 6px 12px;
|
||||||
|
background: rgba(56, 189, 248, 0.06);
|
||||||
|
border: 1px solid rgba(56, 189, 248, 0.2);
|
||||||
|
color: var(--accent);
|
||||||
|
border-radius: 100px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.5rem;
|
||||||
|
font-weight: 800;
|
||||||
|
line-height: 1.1;
|
||||||
|
letter-spacing: -1.5px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 span {
|
||||||
|
background: linear-gradient(to right, #38bdf8, #a855f7);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-text {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
margin-bottom: 36px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-btns {
|
||||||
|
display: flex;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) { .hero-btns { justify-content: center; } }
|
||||||
|
|
||||||
|
.btn-main {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--text-main);
|
||||||
|
color: var(--bg-main);
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: transform 0.2s, opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-main:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
|
opacity: 0.95;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sec {
|
||||||
|
display: inline-block;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
color: var(--text-main);
|
||||||
|
padding: 14px 28px;
|
||||||
|
border-radius: 10px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: background 0.2s, border-color 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sec:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.03);
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero-right {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shield-graphic {
|
||||||
|
width: 280px;
|
||||||
|
height: 320px;
|
||||||
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||||
|
border: 2px solid var(--border);
|
||||||
|
border-radius: 20px 20px 140px 140px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
|
||||||
|
animation: float 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shield-icon {
|
||||||
|
font-size: 4rem;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
filter: drop-shadow(0 0 15px var(--accent));
|
||||||
|
}
|
||||||
|
|
||||||
|
.shield-label {
|
||||||
|
font-family: 'Fira Code', monospace;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--accent);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes float {
|
||||||
|
0%, 100% { transform: translateY(0); }
|
||||||
|
50% { transform: translateY(-12px); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.pricing {
|
||||||
|
padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 2.25rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 48px;
|
||||||
|
letter-spacing: -1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-pricing {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 950px) {
|
||||||
|
.grid-pricing { grid-template-columns: 1fr; max-width: 450px; margin: 0 auto; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 16px;
|
||||||
|
padding: 32px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-card:hover {
|
||||||
|
transform: translateY(-4px);
|
||||||
|
border-color: var(--border-hover);
|
||||||
|
background: var(--bg-card-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-card.featured {
|
||||||
|
border-color: #0284c7;
|
||||||
|
background: linear-gradient(180deg, #12151c 0%, #0d1015 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-card.featured::before {
|
||||||
|
content: 'ОБХОД ГЛУШИЛОК';
|
||||||
|
position: absolute;
|
||||||
|
top: 24px;
|
||||||
|
right: -35px;
|
||||||
|
background: #0284c7;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 4px 35px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-price {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: 800;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-price span {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-features {
|
||||||
|
list-style: none;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-features li {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-features li.disabled {
|
||||||
|
color: #475569;
|
||||||
|
text-decoration: line-through;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-features li::before {
|
||||||
|
content: '✓';
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-features li.disabled::before {
|
||||||
|
content: '✕';
|
||||||
|
color: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bot-sub-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bot-sub-item {
|
||||||
|
background: rgba(255,255,255,0.03);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bot-sub-item span {
|
||||||
|
color: #94a3b8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bot-sub-item strong {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-card {
|
||||||
|
display: block;
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-card-sec {
|
||||||
|
background: #1e293b;
|
||||||
|
color: var(--text-main);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.btn-card-sec:hover { background: #334155; }
|
||||||
|
|
||||||
|
.btn-card-primary {
|
||||||
|
background: #0284c7;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn-card-primary:hover { background: #0369a1; box-shadow: 0 0 15px rgba(2, 132, 199, 0.3); }
|
||||||
|
|
||||||
|
.reviews {
|
||||||
|
padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-reviews {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) { .grid-reviews { grid-template-columns: 1fr; } }
|
||||||
|
|
||||||
|
.review-card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-user {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin-bottom: 4px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-user::after {
|
||||||
|
content: '• Проверенный покупатель';
|
||||||
|
font-size: 0.75rem;
|
||||||
|
color: #22c55e;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.review-text {
|
||||||
|
color: #94a3b8;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support {
|
||||||
|
padding: 80px 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card {
|
||||||
|
background: linear-gradient(135deg, #11141a 0%, #0a0c10 100%);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 48px;
|
||||||
|
border-radius: 20px;
|
||||||
|
max-width: 700px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card h3 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.support-card p {
|
||||||
|
color: #94a3b8;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-support {
|
||||||
|
display: inline-block;
|
||||||
|
background: #22c55e;
|
||||||
|
color: #fff;
|
||||||
|
padding: 12px 28px;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
text-decoration: none;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-support:hover {
|
||||||
|
background: #16a34a;
|
||||||
|
box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
|
||||||
|
transform: translateY(-1px);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 40px 0;
|
||||||
|
text-align: center;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
color: #475569;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fade-in {
|
||||||
|
animation: fadeIn 0.6s ease-out forwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeIn {
|
||||||
|
from { opacity: 0; transform: translateY(10px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<div class="container header-wrap">
|
||||||
|
<a href="#" class="logo">Dmitriy<span>VPN</span></a>
|
||||||
|
<nav>
|
||||||
|
<a href="#pricing">Тарифы</a>
|
||||||
|
<a href="#reviews">Отзывы</a>
|
||||||
|
<a href="#support">Поддержка</a>
|
||||||
|
<a href="https://t.me/DmitriyVPN" target="_blank" class="btn-tg-nav">Telegram Канал</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main class="container">
|
||||||
|
|
||||||
|
<!-- Главный блок -->
|
||||||
|
<section class="hero fade-in">
|
||||||
|
<div class="hero-left">
|
||||||
|
<!-- Заменено согласно файлу image_9249bc.png -->
|
||||||
|
<div class="badge">Для всех устройств</div>
|
||||||
|
<h1>Надежный интернет без <span>ограничений</span></h1>
|
||||||
|
<p class="hero-text">
|
||||||
|
DmitriyVPN — это современное, легковесное решение для вашей безопасности. Стабильный обход блокировок, минимальный пинг в играх и мгновенная скорость на любом вашем устройстве.
|
||||||
|
</p>
|
||||||
|
<div class="hero-btns">
|
||||||
|
<a href="#pricing" class="btn-main">Выбрать тариф</a>
|
||||||
|
<a href="https://t.me/DmitriyVPN" target="_blank" class="btn-sec">В Telegram-канал</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hero-right">
|
||||||
|
<div class="shield-graphic">
|
||||||
|
<div class="shield-icon">🛡️</div>
|
||||||
|
<div class="shield-label">DMITRIY_CORE V2</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Тарифы -->
|
||||||
|
<section class="pricing fade-in" id="pricing">
|
||||||
|
<h2 class="section-title">Гибкие тарифные планы</h2>
|
||||||
|
<div class="grid-pricing">
|
||||||
|
|
||||||
|
<!-- Бесплатный -->
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="card-name">Бесплатный</div>
|
||||||
|
<div class="card-price">0 ₽<span>/ навсегда</span></div>
|
||||||
|
<ul class="card-features">
|
||||||
|
<li>Медленная скорость работы</li>
|
||||||
|
<li>Доступно всего 5 локаций</li>
|
||||||
|
<li class="disabled">Обход жестких глушилок</li>
|
||||||
|
<li class="disabled">Приоритетная поддержка</li>
|
||||||
|
</ul>
|
||||||
|
<a href="https://t.me/DmitriyVPN" target="_blank" class="btn-card btn-card-sec">Подключить</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Платные подписки -->
|
||||||
|
<div class="price-card featured">
|
||||||
|
<div class="card-name">Платные тарифы</div>
|
||||||
|
<div class="card-price">от 109.22 ₽<span>/ мес.</span></div>
|
||||||
|
|
||||||
|
<ul class="card-features">
|
||||||
|
<li><strong>Максимальная скорость соединения</strong></li>
|
||||||
|
<li><strong>20 доступные локации</strong></li>
|
||||||
|
<li><strong>Полный обход глушилок</strong></li>
|
||||||
|
<li>Высокая стабильность работы</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Список точных цен из бота -->
|
||||||
|
<div class="bot-sub-list">
|
||||||
|
<div class="bot-sub-item">
|
||||||
|
<span>Standard | 1 устр.</span>
|
||||||
|
<strong>109.22 ₽</strong>
|
||||||
|
</div>
|
||||||
|
<div class="bot-sub-item">
|
||||||
|
<span>Pro | 5 устр.</span>
|
||||||
|
<strong>194.41 ₽</strong>
|
||||||
|
</div>
|
||||||
|
<div class="bot-sub-item">
|
||||||
|
<span>Premium | 15 устр.</span>
|
||||||
|
<strong>291.62 ₽</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a href="https://t.me/DmitriyVPN" target="_blank" class="btn-card btn-card-primary">Открыть в Telegram</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Пробный -->
|
||||||
|
<div class="price-card">
|
||||||
|
<div class="card-name">Пробный тест</div>
|
||||||
|
<div class="card-price">0 ₽<span>/ 3 дня</span></div>
|
||||||
|
<ul class="card-features">
|
||||||
|
<li>Высокая скорость работы</li>
|
||||||
|
<li>Доступно 10 локаций</li>
|
||||||
|
<li class="disabled">Обход жестких глушилок</li>
|
||||||
|
<li class="disabled">Приоритетная поддержка</li>
|
||||||
|
</ul>
|
||||||
|
<a href="https://t.me/DmitriyVPN" target="_blank" class="btn-card btn-card-sec">Попробовать</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Отзывы -->
|
||||||
|
<section class="reviews fade-in" id="reviews">
|
||||||
|
<h2 class="section-title">Что говорят пользователи</h2>
|
||||||
|
<div class="grid-reviews">
|
||||||
|
<div class="review-card">
|
||||||
|
<div class="review-user">Сергей К.</div>
|
||||||
|
<p class="review-text">«Брал премиум за 87 рублей чисто ради того, чтобы нормально смотреть видосы в 4К на компе, так как стандартные методы перестали работать. Всё летает, задержек нет вообще. Топ за свои деньги.»</p>
|
||||||
|
</div>
|
||||||
|
<div class="review-card">
|
||||||
|
<div class="review-user">Dima_Gamer</div>
|
||||||
|
<p class="review-text">«Респект разработчику за пинг! Играю в онлайн-шутеры, с этим впном пакеты не теряются, коннект стабильный. Главное — на ПК настраивается за полминуты.»</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- Поддержка -->
|
||||||
|
<section class="support fade-in" id="support">
|
||||||
|
<div class="support-card">
|
||||||
|
<h3>Возникли вопросы или нужна помощь?</h3>
|
||||||
|
<p>Наша техническая поддержка работает оперативно. Если не получается настроить клиент или есть вопросы по оплате премиума — напишите нам напрямую.</p>
|
||||||
|
<a href="https://t.me/Gioramily" target="_blank" class="btn-support">Связаться с техподдержкой</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div class="container">
|
||||||
|
<p>© 2026 DmitriyVPN. Все права защищены. Разработано для всех типов устройств.</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user