1323 lines
78 KiB
HTML
1323 lines
78 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Privacy First - The Internet, Reimagined for Privacy. Privacy-focused internet services with encrypted hosting, email, storage, and more.">
|
||
<meta name="keywords" content="privacy, hosting, encrypted email, VPN, cloud storage, private internet">
|
||
<meta name="author" content="Privacy First - Powered by SilverLABS">
|
||
<meta name="theme-color" content="#0a0a0f">
|
||
|
||
<!-- Open Graph -->
|
||
<meta property="og:title" content="Privacy First - The Internet, Reimagined for Privacy">
|
||
<meta property="og:description" content="Privacy-focused internet services provider. No tracking, no data mining, no compromise.">
|
||
<meta property="og:type" content="website">
|
||
<meta property="og:url" content="https://privacy-first.uk">
|
||
|
||
<title>Privacy First | Privacy-Focused Internet Services</title>
|
||
|
||
<!-- Fonts -->
|
||
<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=JetBrains+Mono:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap" rel="stylesheet">
|
||
|
||
<!-- Styles -->
|
||
<link rel="stylesheet" href="css/style.css">
|
||
|
||
<!-- Favicon -->
|
||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🛡️</text></svg>">
|
||
</head>
|
||
<body>
|
||
<!-- Navigation -->
|
||
<header class="header" id="header">
|
||
<nav class="nav container">
|
||
<a href="#" class="nav__logo">
|
||
<span class="logo-icon">
|
||
<svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<!-- Shield outline with gradient -->
|
||
<defs>
|
||
<linearGradient id="shieldGrad" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#00d4aa;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#7c5cff;stop-opacity:1" />
|
||
</linearGradient>
|
||
<linearGradient id="shieldInner" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#1a1a24;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#12121a;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- Outer shield -->
|
||
<path d="M20 2L4 9v12c0 11 16 19 16 19s16-8 16-19V9L20 2z" fill="url(#shieldGrad)"/>
|
||
<!-- Inner shield -->
|
||
<path d="M20 6L7 11.5v9.5c0 8.5 13 15 13 15s13-6.5 13-15v-9.5L20 6z" fill="url(#shieldInner)"/>
|
||
<!-- Privacy "eye" symbol - crossed out -->
|
||
<circle cx="20" cy="20" r="5" stroke="url(#shieldGrad)" stroke-width="1.5" fill="none"/>
|
||
<circle cx="20" cy="20" r="2" fill="url(#shieldGrad)"/>
|
||
<line x1="14" y1="26" x2="26" y2="14" stroke="url(#shieldGrad)" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</span>
|
||
<span class="logo-text">Privacy<span class="logo-accent">First</span></span>
|
||
</a>
|
||
|
||
<div class="nav__menu" id="nav-menu">
|
||
<ul class="nav__list">
|
||
<li class="nav__item"><a href="#services" class="nav__link">Services</a></li>
|
||
<li class="nav__item"><a href="#platform" class="nav__link">Platform</a></li>
|
||
<li class="nav__item"><a href="#passport" class="nav__link">Passport</a></li>
|
||
<li class="nav__item"><a href="#pricing" class="nav__link">Pricing</a></li>
|
||
<li class="nav__item"><a href="#network" class="nav__link">Network</a></li>
|
||
</ul>
|
||
<button class="nav__close" id="nav-close" aria-label="Close menu">×</button>
|
||
</div>
|
||
|
||
<div class="nav__actions">
|
||
<a href="https://passport.silverlabs.uk/auth/login" class="btn btn--outline btn--sm">Sign In</a>
|
||
<a href="#passport" class="btn btn--primary btn--sm">Get Started</a>
|
||
</div>
|
||
|
||
<button class="nav__toggle" id="nav-toggle" aria-label="Open menu">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</button>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<!-- Hero Section -->
|
||
<section class="hero" id="hero">
|
||
<canvas id="particle-canvas" class="hero__canvas"></canvas>
|
||
<div class="hero__gradient"></div>
|
||
|
||
<div class="container hero__container">
|
||
<div class="hero__content reveal">
|
||
<div class="hero__badge">
|
||
<span class="pulse"></span>
|
||
Now in Public Beta
|
||
</div>
|
||
|
||
<h1 class="hero__title">
|
||
The Internet,<br>
|
||
<span class="gradient-text">Reimagined for Privacy</span>
|
||
</h1>
|
||
|
||
<p class="hero__description">
|
||
Take back control of your digital life. Privacy First delivers enterprise-grade
|
||
hosting, encrypted communications, and secure cloud services—built from the
|
||
ground up with your privacy as the foundation.
|
||
</p>
|
||
|
||
<div class="hero__cta">
|
||
<a href="#passport" class="btn btn--primary btn--lg">
|
||
Get Started with Passport
|
||
<svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
<a href="#services" class="btn btn--ghost btn--lg">Explore Services</a>
|
||
</div>
|
||
|
||
<div class="hero__trust">
|
||
<div class="trust-badge">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
No Tracking
|
||
</div>
|
||
<div class="trust-badge">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<path d="M4.93 4.93l14.14 14.14"/>
|
||
</svg>
|
||
No Data Mining
|
||
</div>
|
||
<div class="trust-badge">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
|
||
<path d="M22 4L12 14.01l-3-3"/>
|
||
</svg>
|
||
No Compromise
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero__visual reveal reveal--delay-1">
|
||
<div class="hero__mockup">
|
||
<div class="mockup__header">
|
||
<span class="mockup__dot"></span>
|
||
<span class="mockup__dot"></span>
|
||
<span class="mockup__dot"></span>
|
||
<span class="mockup__title">Privacy Dashboard</span>
|
||
</div>
|
||
<div class="mockup__content">
|
||
<div class="mockup__stat">
|
||
<span class="mockup__stat-value">0</span>
|
||
<span class="mockup__stat-label">Data Points Collected</span>
|
||
</div>
|
||
<div class="mockup__stat">
|
||
<span class="mockup__stat-value">256-bit</span>
|
||
<span class="mockup__stat-label">AES Encryption</span>
|
||
</div>
|
||
<div class="mockup__stat">
|
||
<span class="mockup__stat-value">100%</span>
|
||
<span class="mockup__stat-label">Your Data, Your Control</span>
|
||
</div>
|
||
<div class="mockup__services">
|
||
<div class="mockup__service active">
|
||
<span class="service-icon">🌐</span>
|
||
<span>Hosting</span>
|
||
</div>
|
||
<div class="mockup__service">
|
||
<span class="service-icon">📧</span>
|
||
<span>Email</span>
|
||
</div>
|
||
<div class="mockup__service">
|
||
<span class="service-icon">☁️</span>
|
||
<span>Storage</span>
|
||
</div>
|
||
<div class="mockup__service">
|
||
<span class="service-icon">🔐</span>
|
||
<span>VPN</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="hero__scroll">
|
||
<span>Scroll to explore</span>
|
||
<div class="scroll-indicator"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Problem Statement -->
|
||
<section class="problem" id="problem">
|
||
<div class="container">
|
||
<div class="problem__content reveal">
|
||
<p class="section-label">The Reality</p>
|
||
<h2 class="problem__title">
|
||
The internet wasn't built for privacy.<br>
|
||
<span class="gradient-text">We're changing that.</span>
|
||
</h2>
|
||
</div>
|
||
|
||
<div class="problem__comparison">
|
||
<div class="comparison-card comparison-card--bad reveal reveal--delay-1">
|
||
<div class="comparison-card__header">
|
||
<span class="comparison-card__icon">⚠️</span>
|
||
<h3>Traditional Providers</h3>
|
||
</div>
|
||
<ul class="comparison-card__list">
|
||
<li><span class="x-mark">✗</span> Scan your emails for advertising</li>
|
||
<li><span class="x-mark">✗</span> Sell your browsing data to third parties</li>
|
||
<li><span class="x-mark">✗</span> Track every click and keystroke</li>
|
||
<li><span class="x-mark">✗</span> Retain data indefinitely without consent</li>
|
||
<li><span class="x-mark">✗</span> Comply with mass surveillance requests</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="comparison-card comparison-card--good reveal reveal--delay-2">
|
||
<div class="comparison-card__header">
|
||
<span class="comparison-card__icon">🛡️</span>
|
||
<h3>Privacy First</h3>
|
||
</div>
|
||
<ul class="comparison-card__list">
|
||
<li><span class="check-mark">✓</span> Zero-knowledge encryption on all data</li>
|
||
<li><span class="check-mark">✓</span> No data monetization—ever</li>
|
||
<li><span class="check-mark">✓</span> Minimal data collection by design</li>
|
||
<li><span class="check-mark">✓</span> Automatic data purging on request</li>
|
||
<li><span class="check-mark">✓</span> Warrant canary & transparency reports</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="problem__stats reveal reveal--delay-3">
|
||
<div class="stat-card">
|
||
<span class="stat-card__value">2,200+</span>
|
||
<span class="stat-card__label">Data breaches in 2024</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-card__value">1B+</span>
|
||
<span class="stat-card__label">Records exposed yearly</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-card__value">$9.44M</span>
|
||
<span class="stat-card__label">Average breach cost</span>
|
||
</div>
|
||
<div class="stat-card">
|
||
<span class="stat-card__value">72%</span>
|
||
<span class="stat-card__label">Distrust big tech with data</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Core Services -->
|
||
<section class="services" id="services">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<p class="section-label">What We Offer</p>
|
||
<h2 class="section-title">Privacy-First Services</h2>
|
||
<p class="section-description">
|
||
Every service we build starts with a simple question:
|
||
"How can we deliver this with the least amount of user data possible?"
|
||
</p>
|
||
</div>
|
||
|
||
<div class="services__grid">
|
||
<article class="service-card reveal reveal--delay-1">
|
||
<div class="service-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
|
||
<polyline points="9,22 9,12 15,12 15,22"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="service-card__title">Web Hosting</h3>
|
||
<p class="service-card__description">
|
||
Privacy-first hosting with encrypted storage, automatic SSL,
|
||
and no server-side analytics. Your website, your data.
|
||
</p>
|
||
<ul class="service-card__features">
|
||
<li>Encrypted at rest & in transit</li>
|
||
<li>DDoS protection included</li>
|
||
<li>One-click WordPress & Blazor</li>
|
||
</ul>
|
||
<a href="#pricing" class="service-card__link">
|
||
Learn More
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</article>
|
||
|
||
<article class="service-card reveal reveal--delay-2">
|
||
<div class="service-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
<polyline points="22,6 12,13 2,6"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="service-card__title">Email Services</h3>
|
||
<p class="service-card__description">
|
||
End-to-end encrypted email with zero content scanning.
|
||
Your conversations stay between you and your recipients.
|
||
</p>
|
||
<ul class="service-card__features">
|
||
<li>PGP encryption built-in</li>
|
||
<li>Custom domains supported</li>
|
||
<li>No advertising, ever</li>
|
||
</ul>
|
||
<a href="#pricing" class="service-card__link">
|
||
Learn More
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</article>
|
||
|
||
<article class="service-card reveal reveal--delay-3">
|
||
<div class="service-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M18 10h-1.26A8 8 0 109 20h9a5 5 0 000-10z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="service-card__title">Cloud Storage</h3>
|
||
<p class="service-card__description">
|
||
Zero-knowledge encrypted file storage. We can't see your files
|
||
even if we wanted to—and we don't want to.
|
||
</p>
|
||
<ul class="service-card__features">
|
||
<li>Client-side encryption</li>
|
||
<li>Secure file sharing</li>
|
||
<li>Version history</li>
|
||
</ul>
|
||
<a href="#pricing" class="service-card__link">
|
||
Learn More
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</article>
|
||
|
||
<article class="service-card reveal reveal--delay-1">
|
||
<div class="service-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||
<path d="M7 11V7a5 5 0 0110 0v4"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="service-card__title">VPN & Network</h3>
|
||
<p class="service-card__description">
|
||
Anonymous browsing with a strict no-logs policy.
|
||
Browse freely without leaving a trace.
|
||
</p>
|
||
<ul class="service-card__features">
|
||
<li>WireGuard protocol</li>
|
||
<li>Kill switch enabled</li>
|
||
<li>Multi-hop routing available</li>
|
||
</ul>
|
||
<a href="#pricing" class="service-card__link">
|
||
Learn More
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</article>
|
||
|
||
<article class="service-card reveal reveal--delay-2">
|
||
<div class="service-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<line x1="2" y1="12" x2="22" y2="12"/>
|
||
<path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="service-card__title">Domain Registration</h3>
|
||
<p class="service-card__description">
|
||
Register domains with private WHOIS by default.
|
||
Keep your personal information off public records.
|
||
</p>
|
||
<ul class="service-card__features">
|
||
<li>Private WHOIS included</li>
|
||
<li>DNSSEC support</li>
|
||
<li>Secure DNS hosting</li>
|
||
</ul>
|
||
<a href="#pricing" class="service-card__link">
|
||
Learn More
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</article>
|
||
|
||
<article class="service-card reveal reveal--delay-3">
|
||
<div class="service-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<ellipse cx="12" cy="5" rx="9" ry="3"/>
|
||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
|
||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
|
||
</svg>
|
||
</div>
|
||
<h3 class="service-card__title">Database Hosting</h3>
|
||
<p class="service-card__description">
|
||
Encrypted PostgreSQL and MySQL hosting with automated
|
||
backups. Your data stays yours.
|
||
</p>
|
||
<ul class="service-card__features">
|
||
<li>Encrypted connections</li>
|
||
<li>Automated daily backups</li>
|
||
<li>Point-in-time recovery</li>
|
||
</ul>
|
||
<a href="#pricing" class="service-card__link">
|
||
Learn More
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Platform Showcase -->
|
||
<section class="platform" id="platform">
|
||
<div class="container">
|
||
<div class="platform__grid">
|
||
<div class="platform__content reveal">
|
||
<p class="section-label">Developer Platform</p>
|
||
<h2 class="section-title">Build on SilverSHELL</h2>
|
||
<p class="platform__description">
|
||
Our multi-tenant cloud platform lets you build privacy-first
|
||
applications without compromising on features. Deploy Blazor
|
||
WebAssembly apps, .NET APIs, and more—all with built-in
|
||
encryption and zero tracking.
|
||
</p>
|
||
|
||
<div class="platform__features">
|
||
<div class="platform__feature">
|
||
<div class="platform__feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="16 18 22 12 16 6"/>
|
||
<polyline points="8 6 2 12 8 18"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>.NET 9 Ready</h4>
|
||
<p>Latest framework with AOT compilation support</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="platform__feature">
|
||
<div class="platform__feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
|
||
<polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
|
||
<line x1="12" y1="22.08" x2="12" y2="12"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>Multi-Tenant Architecture</h4>
|
||
<p>Complete data isolation between tenants</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="platform__feature">
|
||
<div class="platform__feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>Security by Default</h4>
|
||
<p>JWT auth, encryption, and CORS built-in</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="btn btn--primary">
|
||
View Documentation
|
||
<svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"/>
|
||
<polyline points="15,3 21,3 21,9"/>
|
||
<line x1="10" y1="14" x2="21" y2="3"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="platform__visual reveal reveal--delay-1">
|
||
<div class="code-window">
|
||
<div class="code-window__header">
|
||
<span class="code-window__dot"></span>
|
||
<span class="code-window__dot"></span>
|
||
<span class="code-window__dot"></span>
|
||
<span class="code-window__title">Program.cs</span>
|
||
</div>
|
||
<pre class="code-window__content"><code><span class="code-keyword">var</span> builder = WebApplication.CreateBuilder(args);
|
||
|
||
<span class="code-comment">// Privacy-first configuration</span>
|
||
builder.Services.AddSilverShell(options => {
|
||
options.<span class="code-property">EnableEncryption</span> = <span class="code-keyword">true</span>;
|
||
options.<span class="code-property">DisableTracking</span> = <span class="code-keyword">true</span>;
|
||
options.<span class="code-property">DataRetention</span> = TimeSpan.Zero;
|
||
});
|
||
|
||
builder.Services.AddAuthentication()
|
||
.AddPrivacyFirstJwt();
|
||
|
||
<span class="code-keyword">var</span> app = builder.Build();
|
||
|
||
app.UsePrivacyHeaders();
|
||
app.MapSilverShellEndpoints();
|
||
|
||
app.Run();</code></pre>
|
||
</div>
|
||
|
||
<div class="platform__apps">
|
||
<span class="platform__apps-label">App Ecosystem</span>
|
||
<div class="platform__app-icons">
|
||
<div class="app-icon" title="Commerce">🛒</div>
|
||
<div class="app-icon" title="Analytics">📊</div>
|
||
<div class="app-icon" title="CRM">👥</div>
|
||
<div class="app-icon" title="Custom">⚡</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Passport Identity -->
|
||
<section class="passport" id="passport">
|
||
<div class="passport__glow"></div>
|
||
<div class="container">
|
||
<div class="passport__grid">
|
||
<div class="passport__visual reveal">
|
||
<div class="passport-card">
|
||
<div class="passport-card__header">
|
||
<div class="passport-card__logo">
|
||
<svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="shieldGradPassport" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#00d4aa;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#7c5cff;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M20 2L4 9v12c0 11 16 19 16 19s16-8 16-19V9L20 2z" fill="url(#shieldGradPassport)"/>
|
||
</svg>
|
||
</div>
|
||
<span class="passport-card__badge">PASSPORT</span>
|
||
</div>
|
||
<div class="passport-card__content">
|
||
<div class="passport-card__avatar">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
|
||
</svg>
|
||
</div>
|
||
<div class="passport-card__info">
|
||
<span class="passport-card__name">anonymous_user</span>
|
||
<span class="passport-card__id">ID: ****-****-7X2K</span>
|
||
</div>
|
||
</div>
|
||
<div class="passport-card__services">
|
||
<div class="passport-card__service active">Hosting</div>
|
||
<div class="passport-card__service">Email</div>
|
||
<div class="passport-card__service">Storage</div>
|
||
</div>
|
||
<div class="passport-card__footer">
|
||
<span class="passport-card__status">
|
||
<span class="status-dot"></span>
|
||
All services active
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="passport__content reveal reveal--delay-1">
|
||
<p class="section-label">Identity Portal</p>
|
||
<h2 class="section-title">One Identity.<br><span class="gradient-text">Complete Control.</span></h2>
|
||
|
||
<p class="passport__description">
|
||
Passport is your single sign-on for all Privacy First services.
|
||
We've reimagined identity management with privacy at the core—we only
|
||
ask for a username. Everything else is optional.
|
||
</p>
|
||
|
||
<div class="passport__features">
|
||
<div class="passport__feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
|
||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||
</svg>
|
||
<span>Minimal data collection—username only required</span>
|
||
</div>
|
||
<div class="passport__feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
|
||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||
</svg>
|
||
<span>Manage all connected apps in one place</span>
|
||
</div>
|
||
<div class="passport__feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
|
||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||
</svg>
|
||
<span>Export your data anytime—it's yours</span>
|
||
</div>
|
||
<div class="passport__feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
|
||
<polyline points="22 4 12 14.01 9 11.01"/>
|
||
</svg>
|
||
<span>GDPR compliant by design, not afterthought</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="passport__cta">
|
||
<a href="https://passport.silverlabs.uk/auth/register" class="btn btn--primary btn--lg">Create Your Passport</a>
|
||
<a href="https://passport.silverlabs.uk/auth/login" class="btn btn--ghost">Sign In</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Search Marketplace -->
|
||
<section class="marketplace" id="marketplace">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<p class="section-label">Privacy Search</p>
|
||
<h2 class="section-title">Discover Without Being Discovered</h2>
|
||
<p class="section-description">
|
||
Search products across multiple vendors without creating an account.
|
||
No tracking, no profile building, no creepy personalized ads following you around.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="marketplace__demo reveal reveal--delay-1">
|
||
<div class="search-mockup">
|
||
<div class="search-mockup__bar">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="8"/>
|
||
<path d="M21 21l-4.35-4.35"/>
|
||
</svg>
|
||
<input type="text" placeholder="Search for anything..." disabled>
|
||
<button class="search-mockup__btn">Search</button>
|
||
</div>
|
||
|
||
<div class="search-mockup__results">
|
||
<div class="search-result">
|
||
<div class="search-result__image">📱</div>
|
||
<div class="search-result__info">
|
||
<span class="search-result__title">Privacy Phone Case</span>
|
||
<span class="search-result__vendor">SecureShop</span>
|
||
<span class="search-result__price">$29.99</span>
|
||
</div>
|
||
</div>
|
||
<div class="search-result">
|
||
<div class="search-result__image">🔐</div>
|
||
<div class="search-result__info">
|
||
<span class="search-result__title">Hardware Security Key</span>
|
||
<span class="search-result__vendor">CryptoGear</span>
|
||
<span class="search-result__price">$45.00</span>
|
||
</div>
|
||
</div>
|
||
<div class="search-result">
|
||
<div class="search-result__image">📡</div>
|
||
<div class="search-result__info">
|
||
<span class="search-result__title">Faraday Bag</span>
|
||
<span class="search-result__vendor">PrivacyTools</span>
|
||
<span class="search-result__price">$19.99</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="search-mockup__footer">
|
||
<span class="privacy-indicator">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
No search history stored • No tracking cookies
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="marketplace__features reveal reveal--delay-2">
|
||
<div class="marketplace__feature">
|
||
<span class="marketplace__feature-icon">🔍</span>
|
||
<h4>Anonymous Search</h4>
|
||
<p>No login required for browsing</p>
|
||
</div>
|
||
<div class="marketplace__feature">
|
||
<span class="marketplace__feature-icon">🌐</span>
|
||
<h4>Multi-Provider</h4>
|
||
<p>Results from multiple vendors</p>
|
||
</div>
|
||
<div class="marketplace__feature">
|
||
<span class="marketplace__feature-icon">🚫</span>
|
||
<h4>No Profiling</h4>
|
||
<p>Zero behavioral tracking</p>
|
||
</div>
|
||
<div class="marketplace__feature">
|
||
<span class="marketplace__feature-icon">💳</span>
|
||
<h4>Crypto Payments</h4>
|
||
<p>Pay anonymously with BTC/XMR</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="text-center reveal reveal--delay-3">
|
||
<a href="#" class="btn btn--primary btn--lg">Explore Marketplace</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AppStore Coming Soon -->
|
||
<section class="appstore" id="appstore">
|
||
<div class="appstore__bg"></div>
|
||
<div class="container">
|
||
<div class="appstore__content reveal">
|
||
<div class="coming-soon-badge">
|
||
<span class="glow-pulse"></span>
|
||
Coming Soon
|
||
</div>
|
||
|
||
<h2 class="appstore__title">
|
||
The Privacy-First<br>
|
||
<span class="gradient-text glow-text">App Ecosystem</span>
|
||
</h2>
|
||
|
||
<p class="appstore__description">
|
||
A curated marketplace of privacy-respecting applications.
|
||
Every app reviewed for data collection practices.
|
||
No surveillance-ware allowed.
|
||
</p>
|
||
|
||
<div class="appstore__categories">
|
||
<div class="app-category reveal reveal--delay-1">
|
||
<span class="app-category__icon">📱</span>
|
||
<span class="app-category__name">Android Apps</span>
|
||
<span class="app-category__desc">APK distribution</span>
|
||
</div>
|
||
<div class="app-category reveal reveal--delay-2">
|
||
<span class="app-category__icon">🌐</span>
|
||
<span class="app-category__name">PWA Apps</span>
|
||
<span class="app-category__desc">Web applications</span>
|
||
</div>
|
||
<div class="app-category reveal reveal--delay-3">
|
||
<span class="app-category__icon">🧩</span>
|
||
<span class="app-category__name">Plugins</span>
|
||
<span class="app-category__desc">Platform extensions</span>
|
||
</div>
|
||
<div class="app-category reveal reveal--delay-1">
|
||
<span class="app-category__icon">🔧</span>
|
||
<span class="app-category__name">Browser Extensions</span>
|
||
<span class="app-category__desc">Privacy tools</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="appstore__notify">
|
||
<p>Get notified when we launch</p>
|
||
<form class="notify-form" onsubmit="return false;">
|
||
<input type="email" placeholder="Enter your email" class="notify-form__input">
|
||
<button type="submit" class="btn btn--accent">Notify Me</button>
|
||
</form>
|
||
<span class="notify-form__note">We'll only use this to notify you. Obviously.</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PrivateWeb Network -->
|
||
<section class="network" id="network">
|
||
<div class="container">
|
||
<div class="network__grid">
|
||
<div class="network__content reveal">
|
||
<p class="section-label">Advanced Privacy</p>
|
||
<h2 class="section-title">The Censorship-Resistant Internet</h2>
|
||
|
||
<p class="network__description">
|
||
PrivateWeb is our distributed privacy network for users who need
|
||
the highest level of anonymity. Built on Tor and IPFS, it provides
|
||
censorship-resistant hosting and communication.
|
||
</p>
|
||
|
||
<div class="network__features">
|
||
<div class="network__feature">
|
||
<div class="network__feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<circle cx="12" cy="12" r="6"/>
|
||
<circle cx="12" cy="12" r="2"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>Tor Integration</h4>
|
||
<p>Onion routing for anonymous access</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="network__feature">
|
||
<div class="network__feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>IPFS Storage</h4>
|
||
<p>Distributed, immutable file storage</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="network__feature">
|
||
<div class="network__feature-icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
<path d="M12 8v4M12 16h.01"/>
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h4>Warrant Canary</h4>
|
||
<p>Transparent security reporting</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a href="#" class="btn btn--outline btn--lg">
|
||
Join the Network
|
||
<svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="network__visual reveal reveal--delay-1">
|
||
<div class="network-diagram">
|
||
<div class="network-node network-node--center">
|
||
<span>You</span>
|
||
</div>
|
||
<div class="network-node network-node--tor">
|
||
<span>Tor</span>
|
||
</div>
|
||
<div class="network-node network-node--ipfs">
|
||
<span>IPFS</span>
|
||
</div>
|
||
<div class="network-node network-node--exit">
|
||
<span>Exit</span>
|
||
</div>
|
||
<div class="network-node network-node--relay1">
|
||
<span>Relay</span>
|
||
</div>
|
||
<div class="network-node network-node--relay2">
|
||
<span>Relay</span>
|
||
</div>
|
||
<svg class="network-lines" viewBox="0 0 300 300">
|
||
<line x1="150" y1="150" x2="75" y2="75" class="network-line"/>
|
||
<line x1="150" y1="150" x2="225" y2="75" class="network-line"/>
|
||
<line x1="150" y1="150" x2="75" y2="225" class="network-line"/>
|
||
<line x1="150" y1="150" x2="225" y2="225" class="network-line"/>
|
||
<line x1="75" y1="75" x2="225" y2="75" class="network-line"/>
|
||
<line x1="75" y1="225" x2="225" y2="225" class="network-line"/>
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Control Panel -->
|
||
<section class="control-panel" id="control-panel">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<p class="section-label">Service Management</p>
|
||
<h2 class="section-title">Enterprise-Grade Control</h2>
|
||
<p class="section-description">
|
||
PrivateWebCP gives you complete control over your services
|
||
with a clean, intuitive interface.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="control-panel__mockup reveal reveal--delay-1">
|
||
<div class="cp-window">
|
||
<div class="cp-window__header">
|
||
<span class="cp-window__dot"></span>
|
||
<span class="cp-window__dot"></span>
|
||
<span class="cp-window__dot"></span>
|
||
<span class="cp-window__title">PrivateWebCP - Control Panel</span>
|
||
</div>
|
||
<div class="cp-window__content">
|
||
<aside class="cp-sidebar">
|
||
<div class="cp-sidebar__item active">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="3" width="7" height="7"/>
|
||
<rect x="14" y="3" width="7" height="7"/>
|
||
<rect x="14" y="14" width="7" height="7"/>
|
||
<rect x="3" y="14" width="7" height="7"/>
|
||
</svg>
|
||
Dashboard
|
||
</div>
|
||
<div class="cp-sidebar__item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/>
|
||
</svg>
|
||
Websites
|
||
</div>
|
||
<div class="cp-sidebar__item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
|
||
<polyline points="22,6 12,13 2,6"/>
|
||
</svg>
|
||
Email
|
||
</div>
|
||
<div class="cp-sidebar__item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<ellipse cx="12" cy="5" rx="9" ry="3"/>
|
||
<path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/>
|
||
<path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
|
||
</svg>
|
||
Databases
|
||
</div>
|
||
<div class="cp-sidebar__item">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="3"/>
|
||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||
</svg>
|
||
Settings
|
||
</div>
|
||
</aside>
|
||
<main class="cp-main">
|
||
<div class="cp-stats">
|
||
<div class="cp-stat">
|
||
<span class="cp-stat__value">3</span>
|
||
<span class="cp-stat__label">Active Sites</span>
|
||
</div>
|
||
<div class="cp-stat">
|
||
<span class="cp-stat__value">12.4 GB</span>
|
||
<span class="cp-stat__label">Storage Used</span>
|
||
</div>
|
||
<div class="cp-stat">
|
||
<span class="cp-stat__value">99.9%</span>
|
||
<span class="cp-stat__label">Uptime</span>
|
||
</div>
|
||
<div class="cp-stat">
|
||
<span class="cp-stat__value">🟢</span>
|
||
<span class="cp-stat__label">All Systems</span>
|
||
</div>
|
||
</div>
|
||
<div class="cp-actions">
|
||
<button class="cp-action">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<line x1="12" y1="5" x2="12" y2="19"/>
|
||
<line x1="5" y1="12" x2="19" y2="12"/>
|
||
</svg>
|
||
New Website
|
||
</button>
|
||
<button class="cp-action">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||
<path d="M7 11V7a5 5 0 0110 0v4"/>
|
||
</svg>
|
||
SSL Certificates
|
||
</button>
|
||
<button class="cp-action">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="23 4 23 10 17 10"/>
|
||
<path d="M20.49 15a9 9 0 11-2.12-9.36L23 10"/>
|
||
</svg>
|
||
Backup Now
|
||
</button>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="control-panel__features reveal reveal--delay-2">
|
||
<div class="cp-feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
|
||
</svg>
|
||
<span>One-Click Provisioning</span>
|
||
</div>
|
||
<div class="cp-feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||
<path d="M7 11V7a5 5 0 0110 0v4"/>
|
||
</svg>
|
||
<span>Automated SSL/TLS</span>
|
||
</div>
|
||
<div class="cp-feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
|
||
</svg>
|
||
<span>Resource Monitoring</span>
|
||
</div>
|
||
<div class="cp-feature">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<polyline points="12 6 12 12 16 14"/>
|
||
</svg>
|
||
<span>Scheduled Backups</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pricing -->
|
||
<section class="pricing" id="pricing">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<p class="section-label">Simple Pricing</p>
|
||
<h2 class="section-title">Privacy Shouldn't Be a Premium</h2>
|
||
<p class="section-description">
|
||
Transparent pricing with no hidden fees.
|
||
All plans include our core privacy protections.
|
||
</p>
|
||
</div>
|
||
|
||
<div class="pricing__toggle reveal">
|
||
<span class="pricing__toggle-label" data-period="monthly">Monthly</span>
|
||
<button class="pricing__toggle-switch" id="pricing-toggle" aria-label="Toggle billing period">
|
||
<span class="pricing__toggle-slider"></span>
|
||
</button>
|
||
<span class="pricing__toggle-label" data-period="annual">
|
||
Annual
|
||
<span class="pricing__discount">Save 20%</span>
|
||
</span>
|
||
</div>
|
||
|
||
<div class="pricing__grid">
|
||
<div class="pricing-card reveal reveal--delay-1">
|
||
<div class="pricing-card__header">
|
||
<h3 class="pricing-card__name">Individual</h3>
|
||
<p class="pricing-card__description">Perfect for personal projects and privacy-conscious individuals</p>
|
||
</div>
|
||
<div class="pricing-card__price">
|
||
<span class="pricing-card__currency">$</span>
|
||
<span class="pricing-card__amount" data-monthly="9.99" data-annual="7.99">9.99</span>
|
||
<span class="pricing-card__period">/month</span>
|
||
</div>
|
||
<ul class="pricing-card__features">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 1 Website</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 5 GB Encrypted Storage</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 1 Email Account</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Free SSL Certificate</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Basic VPN Access</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Community Support</li>
|
||
</ul>
|
||
<a href="#passport" class="btn btn--outline btn--block">Get Started</a>
|
||
</div>
|
||
|
||
<div class="pricing-card pricing-card--featured reveal reveal--delay-2">
|
||
<div class="pricing-card__badge">Most Popular</div>
|
||
<div class="pricing-card__header">
|
||
<h3 class="pricing-card__name">Professional</h3>
|
||
<p class="pricing-card__description">For freelancers, small teams, and growing businesses</p>
|
||
</div>
|
||
<div class="pricing-card__price">
|
||
<span class="pricing-card__currency">$</span>
|
||
<span class="pricing-card__amount" data-monthly="29.99" data-annual="23.99">29.99</span>
|
||
<span class="pricing-card__period">/month</span>
|
||
</div>
|
||
<ul class="pricing-card__features">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 5 Websites</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 50 GB Encrypted Storage</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> 10 Email Accounts</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Wildcard SSL</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Full VPN Access</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> API Access</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Priority Support</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Database Hosting</li>
|
||
</ul>
|
||
<a href="#passport" class="btn btn--primary btn--block">Get Started</a>
|
||
</div>
|
||
|
||
<div class="pricing-card reveal reveal--delay-3">
|
||
<div class="pricing-card__header">
|
||
<h3 class="pricing-card__name">Enterprise</h3>
|
||
<p class="pricing-card__description">For organizations requiring dedicated resources and SLA</p>
|
||
</div>
|
||
<div class="pricing-card__price">
|
||
<span class="pricing-card__amount pricing-card__amount--custom">Custom</span>
|
||
</div>
|
||
<ul class="pricing-card__features">
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Unlimited Websites</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Unlimited Storage</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Unlimited Email</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Dedicated Resources</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Custom VPN Endpoints</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> SLA Guarantee</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> White-label Option</li>
|
||
<li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> Dedicated Support</li>
|
||
</ul>
|
||
<a href="#" class="btn btn--outline btn--block">Contact Sales</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pricing__guarantee reveal">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
</svg>
|
||
<div>
|
||
<strong>30-Day Money-Back Guarantee</strong>
|
||
<p>Try Privacy First risk-free. Not satisfied? Full refund, no questions asked.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Trust & Security -->
|
||
<section class="trust" id="trust">
|
||
<div class="container">
|
||
<div class="section-header reveal">
|
||
<p class="section-label">Trust & Security</p>
|
||
<h2 class="section-title">Built on Transparency</h2>
|
||
</div>
|
||
|
||
<div class="trust__grid">
|
||
<div class="trust-card reveal reveal--delay-1">
|
||
<div class="trust-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
|
||
<polyline points="9 12 11 14 15 10"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Zero-Knowledge Encryption</h3>
|
||
<p>Your data is encrypted before it leaves your device. We can't read it even if we wanted to.</p>
|
||
</div>
|
||
|
||
<div class="trust-card reveal reveal--delay-2">
|
||
<div class="trust-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/>
|
||
<polyline points="14 2 14 8 20 8"/>
|
||
<line x1="16" y1="13" x2="8" y2="13"/>
|
||
<line x1="16" y1="17" x2="8" y2="17"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Transparency Reports</h3>
|
||
<p>We publish regular reports on data requests. See exactly how we handle legal inquiries.</p>
|
||
</div>
|
||
|
||
<div class="trust-card reveal reveal--delay-3">
|
||
<div class="trust-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z"/>
|
||
<path d="M12 8v4l3 3"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Warrant Canary</h3>
|
||
<p>Updated daily. If we receive a secret subpoena, you'll know—because the canary will stop singing.</p>
|
||
</div>
|
||
|
||
<div class="trust-card reveal reveal--delay-1">
|
||
<div class="trust-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<polyline points="16 18 22 12 16 6"/>
|
||
<polyline points="8 6 2 12 8 18"/>
|
||
</svg>
|
||
</div>
|
||
<h3>Open Source Core</h3>
|
||
<p>Our core encryption libraries are open source. Audit the code yourself—we encourage it.</p>
|
||
</div>
|
||
|
||
<div class="trust-card reveal reveal--delay-2">
|
||
<div class="trust-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"/>
|
||
<path d="M7 11V7a5 5 0 0110 0v4"/>
|
||
</svg>
|
||
</div>
|
||
<h3>GDPR Compliant</h3>
|
||
<p>Full compliance with EU data protection regulations. Your rights are our priority.</p>
|
||
</div>
|
||
|
||
<div class="trust-card reveal reveal--delay-3">
|
||
<div class="trust-card__icon">
|
||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
|
||
<circle cx="12" cy="12" r="10"/>
|
||
<line x1="12" y1="16" x2="12" y2="12"/>
|
||
<line x1="12" y1="8" x2="12.01" y2="8"/>
|
||
</svg>
|
||
</div>
|
||
<h3>No Hidden Trackers</h3>
|
||
<p>We don't use Google Analytics, Facebook Pixel, or any third-party tracking scripts.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CTA Section -->
|
||
<section class="cta">
|
||
<div class="cta__bg"></div>
|
||
<div class="container">
|
||
<div class="cta__content reveal">
|
||
<h2 class="cta__title">Ready to Take Back Your Privacy?</h2>
|
||
<p class="cta__description">
|
||
Join thousands of users who've made the switch to privacy-first internet services.
|
||
Start with our 30-day free trial—no credit card required.
|
||
</p>
|
||
<div class="cta__actions">
|
||
<a href="#passport" class="btn btn--primary btn--xl">
|
||
Create Free Account
|
||
<svg class="btn__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M5 12h14M12 5l7 7-7 7"/>
|
||
</svg>
|
||
</a>
|
||
<a href="#services" class="btn btn--ghost btn--xl">View All Services</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<!-- Footer -->
|
||
<footer class="footer">
|
||
<div class="container">
|
||
<div class="footer__grid">
|
||
<div class="footer__brand">
|
||
<a href="#" class="footer__logo">
|
||
<span class="logo-icon">
|
||
<svg viewBox="0 0 40 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<defs>
|
||
<linearGradient id="shieldGradFooter" x1="0%" y1="0%" x2="100%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#00d4aa;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#7c5cff;stop-opacity:1" />
|
||
</linearGradient>
|
||
<linearGradient id="shieldInnerFooter" x1="0%" y1="0%" x2="0%" y2="100%">
|
||
<stop offset="0%" style="stop-color:#1a1a24;stop-opacity:1" />
|
||
<stop offset="100%" style="stop-color:#12121a;stop-opacity:1" />
|
||
</linearGradient>
|
||
</defs>
|
||
<path d="M20 2L4 9v12c0 11 16 19 16 19s16-8 16-19V9L20 2z" fill="url(#shieldGradFooter)"/>
|
||
<path d="M20 6L7 11.5v9.5c0 8.5 13 15 13 15s13-6.5 13-15v-9.5L20 6z" fill="url(#shieldInnerFooter)"/>
|
||
<circle cx="20" cy="20" r="5" stroke="url(#shieldGradFooter)" stroke-width="1.5" fill="none"/>
|
||
<circle cx="20" cy="20" r="2" fill="url(#shieldGradFooter)"/>
|
||
<line x1="14" y1="26" x2="26" y2="14" stroke="url(#shieldGradFooter)" stroke-width="1.5" stroke-linecap="round"/>
|
||
</svg>
|
||
</span>
|
||
<span class="logo-text">Privacy<span class="logo-accent">First</span></span>
|
||
</a>
|
||
<p class="footer__tagline">The Internet, Reimagined for Privacy</p>
|
||
<div class="footer__social">
|
||
<a href="#" class="social-link" aria-label="Mastodon">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M23.268 5.313c-.35-2.578-2.617-4.61-5.304-5.004C17.51.242 15.792 0 11.813 0h-.03c-3.98 0-4.835.242-5.288.309C3.882.692 1.496 2.518.917 5.127.64 6.412.61 7.837.661 9.143c.074 1.874.088 3.745.26 5.611.118 1.24.325 2.47.62 3.68.55 2.237 2.777 4.098 4.96 4.857 2.336.792 4.849.923 7.256.38.265-.061.527-.132.786-.213.585-.184 1.27-.39 1.774-.753a.057.057 0 00.023-.043v-1.809a.052.052 0 00-.02-.041.053.053 0 00-.046-.01 20.282 20.282 0 01-4.709.545c-2.73 0-3.463-1.284-3.674-1.818a5.593 5.593 0 01-.319-1.433.053.053 0 01.066-.054c1.517.363 3.072.546 4.632.546.376 0 .75 0 1.125-.01 1.57-.044 3.224-.124 4.768-.422.038-.008.077-.015.11-.024 2.435-.464 4.753-1.92 4.989-5.604.008-.145.03-1.52.03-1.67.002-.512.167-3.63-.024-5.545zm-3.748 9.195h-2.561V8.29c0-1.309-.55-1.976-1.67-1.976-1.23 0-1.846.79-1.846 2.35v3.403h-2.546V8.663c0-1.56-.617-2.35-1.848-2.35-1.112 0-1.668.668-1.668 1.977v6.218H4.822V8.102c0-1.31.337-2.35 1.011-3.12.696-.77 1.608-1.164 2.74-1.164 1.311 0 2.302.5 2.962 1.498l.638 1.06.638-1.06c.66-.999 1.65-1.498 2.96-1.498 1.13 0 2.043.395 2.74 1.164.675.77 1.012 1.81 1.012 3.12z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="#" class="social-link" aria-label="Matrix">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M.632.55v22.9H2.28V24H0V0h2.28v.55zm7.043 7.26v1.157h.033c.309-.443.683-.784 1.117-1.024.433-.245.936-.365 1.5-.365.54 0 1.033.107 1.481.314.448.208.785.582 1.02 1.108.254-.374.6-.706 1.034-.992.434-.287.95-.43 1.546-.43.453 0 .872.056 1.26.167.388.11.716.286.993.53.276.245.489.559.646.951.152.392.23.863.23 1.417v5.728h-2.349V11.52c0-.286-.01-.559-.032-.812a1.755 1.755 0 00-.18-.66 1.106 1.106 0 00-.438-.448c-.194-.11-.457-.166-.785-.166-.332 0-.6.064-.803.189a1.38 1.38 0 00-.48.499 1.946 1.946 0 00-.231.696 5.56 5.56 0 00-.06.785v4.768h-2.35v-4.8c0-.254-.004-.503-.018-.752a2.074 2.074 0 00-.143-.688 1.052 1.052 0 00-.415-.503c-.194-.125-.476-.19-.854-.19-.111 0-.259.024-.439.074-.18.051-.36.143-.53.282-.171.138-.319.33-.439.573-.121.245-.18.57-.18.975v5.03H4.78V7.81zm15.693 15.64V.55H21.72V0H24v24h-2.28v-.55z"/>
|
||
</svg>
|
||
</a>
|
||
<a href="#" class="social-link" aria-label="GitHub">
|
||
<svg viewBox="0 0 24 24" fill="currentColor">
|
||
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
|
||
</svg>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer__links">
|
||
<div class="footer__column">
|
||
<h4>Services</h4>
|
||
<ul>
|
||
<li><a href="#services">Web Hosting</a></li>
|
||
<li><a href="#services">Email Services</a></li>
|
||
<li><a href="#services">Cloud Storage</a></li>
|
||
<li><a href="#services">VPN Access</a></li>
|
||
<li><a href="#services">Domain Registration</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer__column">
|
||
<h4>Platform</h4>
|
||
<ul>
|
||
<li><a href="#passport">Passport</a></li>
|
||
<li><a href="#platform">SilverSHELL</a></li>
|
||
<li><a href="#marketplace">Marketplace</a></li>
|
||
<li><a href="#network">PrivateWeb</a></li>
|
||
<li><a href="#">Documentation</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer__column">
|
||
<h4>Company</h4>
|
||
<ul>
|
||
<li><a href="#">About Us</a></li>
|
||
<li><a href="#">Blog</a></li>
|
||
<li><a href="#">Careers</a></li>
|
||
<li><a href="#">Contact</a></li>
|
||
<li><a href="#">Press Kit</a></li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="footer__column">
|
||
<h4>Legal</h4>
|
||
<ul>
|
||
<li><a href="#">Privacy Policy</a></li>
|
||
<li><a href="#">Terms of Service</a></li>
|
||
<li><a href="#">Cookie Policy</a></li>
|
||
<li><a href="#">Transparency Report</a></li>
|
||
<li><a href="#">Warrant Canary</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer__bottom">
|
||
<p class="footer__copyright">
|
||
© 2025 Privacy First. All rights reserved.
|
||
</p>
|
||
<p class="footer__credit">
|
||
Built with 🛡️ by <a href="https://silverlabs.uk" target="_blank" rel="noopener">SilverLABS</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<!-- Scripts -->
|
||
<script src="js/main.js"></script>
|
||
</body>
|
||
</html>
|