350 lines
12 KiB
HTML
350 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>BlackRoad Products - 150+ Tools & Platforms</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
|
|
background: #000;
|
|
color: #fff;
|
|
line-height: 1.618;
|
|
}
|
|
|
|
/* Hero Section */
|
|
.hero {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
text-align: center;
|
|
padding: 89px 34px;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:
|
|
radial-gradient(circle at 38.2% 38.2%, rgba(255, 29, 108, 0.15) 0%, transparent 50%),
|
|
radial-gradient(circle at 61.8% 61.8%, rgba(245, 166, 35, 0.15) 0%, transparent 50%);
|
|
z-index: 0;
|
|
}
|
|
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 1;
|
|
max-width: 1200px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 89px;
|
|
font-weight: 700;
|
|
margin-bottom: 21px;
|
|
background: linear-gradient(135deg, #FF1D6C 38.2%, #F5A623 61.8%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
animation: fadeInUp 0.8s ease;
|
|
}
|
|
|
|
.tagline {
|
|
font-size: 34px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 55px;
|
|
animation: fadeInUp 1s ease 0.2s both;
|
|
}
|
|
|
|
.stats {
|
|
display: flex;
|
|
gap: 55px;
|
|
justify-content: center;
|
|
margin-bottom: 55px;
|
|
animation: fadeInUp 1.2s ease 0.4s both;
|
|
}
|
|
|
|
.stat {
|
|
text-align: center;
|
|
}
|
|
|
|
.stat-number {
|
|
font-size: 55px;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, #FF1D6C 38.2%, #F5A623 61.8%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 21px;
|
|
color: rgba(255, 255, 255, 0.6);
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* Categories Grid */
|
|
.categories {
|
|
padding: 89px 34px;
|
|
max-width: 1400px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 55px;
|
|
text-align: center;
|
|
margin-bottom: 55px;
|
|
background: linear-gradient(135deg, #FF1D6C 38.2%, #F5A623 61.8%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.category-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(377px, 1fr));
|
|
gap: 34px;
|
|
margin-bottom: 89px;
|
|
}
|
|
|
|
.category-card {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border: 1px solid rgba(255, 29, 108, 0.2);
|
|
border-radius: 21px;
|
|
padding: 34px;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.category-card:hover {
|
|
transform: translateY(-8px);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border-color: rgba(255, 29, 108, 0.5);
|
|
box-shadow: 0 21px 55px rgba(255, 29, 108, 0.2);
|
|
}
|
|
|
|
.category-icon {
|
|
font-size: 55px;
|
|
margin-bottom: 21px;
|
|
}
|
|
|
|
.category-name {
|
|
font-size: 21px;
|
|
font-weight: 600;
|
|
margin-bottom: 13px;
|
|
color: #FF1D6C;
|
|
}
|
|
|
|
.category-count {
|
|
font-size: 34px;
|
|
font-weight: 700;
|
|
margin-bottom: 13px;
|
|
background: linear-gradient(135deg, #FF1D6C 38.2%, #F5A623 61.8%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.category-desc {
|
|
color: rgba(255, 255, 255, 0.7);
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* CTA Section */
|
|
.cta {
|
|
background: linear-gradient(135deg, rgba(255, 29, 108, 0.1) 38.2%, rgba(245, 166, 35, 0.1) 61.8%);
|
|
border: 1px solid rgba(255, 29, 108, 0.2);
|
|
border-radius: 21px;
|
|
padding: 89px 34px;
|
|
text-align: center;
|
|
margin: 89px 34px;
|
|
}
|
|
|
|
.cta h2 {
|
|
font-size: 55px;
|
|
margin-bottom: 21px;
|
|
background: linear-gradient(135deg, #FF1D6C 38.2%, #F5A623 61.8%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
.cta p {
|
|
font-size: 21px;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
margin-bottom: 34px;
|
|
}
|
|
|
|
.btn {
|
|
display: inline-block;
|
|
padding: 21px 55px;
|
|
background: linear-gradient(135deg, #FF1D6C 38.2%, #F5A623 61.8%);
|
|
color: #fff;
|
|
text-decoration: none;
|
|
border-radius: 13px;
|
|
font-size: 21px;
|
|
font-weight: 600;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 13px 34px rgba(255, 29, 108, 0.4);
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(34px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 55px 34px;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
border-top: 1px solid rgba(255, 29, 108, 0.1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Hero Section -->
|
|
<div class="hero">
|
|
<div class="hero-content">
|
|
<h1>🖤🛣️ BlackRoad</h1>
|
|
<p class="tagline">150+ Tools for Modern Development</p>
|
|
|
|
<div class="stats">
|
|
<div class="stat">
|
|
<div class="stat-number">150+</div>
|
|
<div class="stat-label">Products</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">21</div>
|
|
<div class="stat-label">Categories</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-number">100%</div>
|
|
<div class="stat-label">Open Source</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Categories Section -->
|
|
<div class="categories">
|
|
<h2 class="section-title">Product Categories</h2>
|
|
|
|
<div class="category-grid">
|
|
<div class="category-card">
|
|
<div class="category-icon">⛓️</div>
|
|
<div class="category-name">Blockchain & Web3</div>
|
|
<div class="category-count">10</div>
|
|
<div class="category-desc">NFTs, DeFi, smart contracts, multi-chain</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">🎮</div>
|
|
<div class="category-name">Gaming & Entertainment</div>
|
|
<div class="category-count">10</div>
|
|
<div class="category-desc">Game servers, matchmaking, esports</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">🏥</div>
|
|
<div class="category-name">Healthcare & Medical</div>
|
|
<div class="category-count">8</div>
|
|
<div class="category-desc">Patient portals, telemedicine, records</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">📚</div>
|
|
<div class="category-name">Education & E-Learning</div>
|
|
<div class="category-count">8</div>
|
|
<div class="category-desc">LMS, courses, quizzes, classrooms</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">🛠️</div>
|
|
<div class="category-name">DevOps & Infrastructure</div>
|
|
<div class="category-count">13</div>
|
|
<div class="category-desc">Containers, cloud, automation</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">🤖</div>
|
|
<div class="category-name">AI & Machine Learning</div>
|
|
<div class="category-count">3</div>
|
|
<div class="category-desc">NLP, classification, pipelines</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">📊</div>
|
|
<div class="category-name">Data & Analytics</div>
|
|
<div class="category-count">10</div>
|
|
<div class="category-desc">ETL, pipelines, visualization</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">🔒</div>
|
|
<div class="category-name">Security & Auth</div>
|
|
<div class="category-count">3</div>
|
|
<div class="category-desc">Scanning, authentication, secrets</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">💬</div>
|
|
<div class="category-name">Communication</div>
|
|
<div class="category-count">12</div>
|
|
<div class="category-desc">Chat, video, collaboration</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">🔌</div>
|
|
<div class="category-name">IoT & Hardware</div>
|
|
<div class="category-count">7</div>
|
|
<div class="category-desc">Device management, sensors, firmware</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">🛒</div>
|
|
<div class="category-name">E-Commerce</div>
|
|
<div class="category-count">7</div>
|
|
<div class="category-desc">Storefronts, payments, inventory</div>
|
|
</div>
|
|
|
|
<div class="category-card">
|
|
<div class="category-icon">📱</div>
|
|
<div class="category-name">Mobile & APIs</div>
|
|
<div class="category-count">10</div>
|
|
<div class="category-desc">App builders, REST, GraphQL, WebSocket</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA Section -->
|
|
<div class="cta">
|
|
<h2>Start Building Today</h2>
|
|
<p>All 150+ products are open source and ready to use</p>
|
|
<a href="https://github.com/BlackRoad-OS" class="btn">View on GitHub</a>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<p>🖤🛣️ Built with BlackRoad | MIT License | © 2026 BlackRoad OS, Inc.</p>
|
|
<p style="margin-top: 13px; font-size: 14px;">
|
|
<a href="https://blackroad.io" style="color: #FF1D6C; text-decoration: none;">Website</a> |
|
|
<a href="https://github.com/BlackRoad-OS" style="color: #FF1D6C; text-decoration: none;">GitHub</a> |
|
|
<a href="https://twitter.com/BlackRoadOS" style="color: #FF1D6C; text-decoration: none;">Twitter</a>
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html>
|