Bbox.wtf/landing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update info

Browse Source
This commit is contained in:
NW
2025-05-07 22:14:39 +00:00
parent d74bae32b8
commit 38261a3415
3 changed files with 271 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
lang/en/pages/products.html Normal file
View File

@@ -0,0 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Blackbox - Products</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, viewport-fit=cover">
<meta name="description" content="Blackbox products and services.">
<meta name="keywords" content="Blackbox, products, services, boxes">
<link href="/css/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.5.2/css/all.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat+Alternates:wght@700;500&family=Montserrat:wght@700;500;400&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<script src="/js/echarts.min.js"></script>
<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/products.css">
</head>
<body class="gradient-bg overflow-x-hidden">
<!-- HEADER -->
<header class="flex flex-wrap justify-between items-center px-5 md:px-10 py-4 md:py-7 bg-transparent z-20 relative">
<a href="/en/" class="flex items-center space-x-4">
<img src="/images/logo.webp" alt="bbox logo" class="w-14 h-14 rounded-lg shadow-lg">
<span class="font-montserrat font-bold text-2xl text-cyan-400 tracking-widest">BlackBox</span>
</a>
<nav class="hidden md:flex space-x-8 text-lg font-montserrat font-semibold">
<a href="/en/#features" class="hover:text-cyan-400 transition-colors">Features</a>
<a href="/en/#supercompare" class="hover:text-cyan-400 transition-colors">Comparison</a>
<a href="/en/#pricing" class="hover:text-cyan-400 transition-colors">Pricing</a>
<a href="/en/#testimonials" class="hover:text-cyan-400 transition-colors">Testimonials</a>
<a href="/en/pages/products.html" class="hover:text-cyan-400 transition-colors">Catalog</a>
</nav>
<a href="#order" class="pulse-cta rounded-xl px-7 py-3 bg-emerald-500 text-white text-lg font-bold shadow-lg hover:bg-emerald-400 transition-all duration-300 transform hover:scale-105" style="font-family: 'Montserrat', sans-serif; box-shadow: 0 0 15px 5px rgba(16, 185, 129, 0.5);">
Order Now
<i class="fas fa-lock ml-2"></i>
</a>
</header>
<main class="flex flex-col md:flex-row md:min-h-screen fade-up" style="--delay:.1s">
<!-- MENU -->
<div class="w-full md:w-64 bg-gray-900/50 border-b md:border-r border-gray-800 p-4 z-10">
<h2 class="text-xl font-bold text-cyan-400 mb-6">Categories</h2>
<ul class="space-y-2">
<li class="dropdown-item menu-item">
<button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="boxes-content">
<span>Boxes</span>
<i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
</button>
</li>
<li class="dropdown-item menu-item">
<button class="w-full text-left px-4 py-3 rounded-lg bg-gray-800 hover:bg-gray-700 transition-all duration-300 flex justify-between items-center" data-target="services-content">
<span>Services</span>
<i class="fas text-cyan-400 transition-transform duration-300 arrow-icon"></i>
</button>
</li>
</ul>
</div>
<!-- Content Areas -->
<div id="boxes-content" class="content-area p-8">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 justify-items-center">
<!-- BlackBox VPN -->
<div class="glass-card shadow-3d p-6 text-center">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox VPN" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox VPN</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
<span>99 €</span>
</div>
<p class="text-gray-300 mb-4">Creates a Wi-Fi point with secure VPN. 512 MB RAM.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn">Buy</button>
<button onclick="window.location.href='/items/boxes/blackbox-vpn.html'" class="details-btn">Details</button>
</div>
</div>
<!-- BlackBox Privacy Messenger/Cloud -->
<div class="glass-card shadow-3d p-6 text-center">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox Privacy" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox Privacy Messenger/Cloud</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
<span>199 €</span>
</div>
<p class="text-gray-300 mb-4">Built-in Matrix Messenger or Nextcloud. 1 GB RAM. Full control over your data.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn">Buy</button>
<button onclick="window.location.href='/items/boxes/blackbox-privacy.html'" class="details-btn">Details</button>
</div>
</div>
<!-- BlackBox 4GB -->
<div class="glass-card shadow-3d p-6 text-center">
<div class="h-40 mb-4 flex items-center justify-center">
<img src="/images/bb_on_white-square.webp" alt="BlackBox 4GB" class="h-full object-contain rounded-lg">
</div>
<h3 class="text-xl font-bold mb-3 text-cyan-300">BlackBox 4GB</h3>
<div class="inline-flex items-center px-3 py-1 rounded-full bg-cyan-800/20 text-cyan-200 font-bold mb-3 animate-pulse">
<span>299 €</span>
</div>
<p class="text-gray-300 mb-4">All functions of the first models + remote desktop (Workspace). 4 GB RAM.</p>
<div class="flex justify-center gap-3">
<button class="buy-btn">Buy</button>