...
This commit is contained in:
parent
fb458edca2
commit
189a96de30
@ -1,29 +1,3 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>ThreeFold Products</title>
|
||||
<link rel="icon" type="image/svg+xml" href="static/img/favicon.svg">
|
||||
<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=Inter:wght@200;300;400;450;500;600&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
||||
<link rel="stylesheet" href="static/css/tf.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#why">Why</a></li>
|
||||
<li><a href="#products">Products</a></li>
|
||||
<li><a href="#info">Info</a></li>
|
||||
<li><a href="#get-3nodes">Get 3Nodes</a></li>
|
||||
<li><a href="#newsroom">Newsroom</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container">
|
||||
<section id="why">
|
||||
<h1>A Secure & Sovereign Infrastructure Layer for the Internet</h1>
|
||||
<p>Our unique technology enables a system which can scale to a planetary level, can store data which can never be corrupted nor lost, is compatible with AI, Cloud, Web2, Web3 and Edge IT workloads, has the potential to recover from unforeseen events, and provide 100% uptime.</p>
|
||||
@ -76,13 +50,3 @@
|
||||
<h2>Build the Internet of Tomorrow, Today.</h2>
|
||||
<a href="#dive-deeper" role="button">Dive Deeper</a>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<p>© ThreeFold, All rights reserved.</p>
|
||||
<ul>
|
||||
<li><a href="#terms">Terms & Conditions</a></li>
|
||||
<li><a href="#privacy">Privacy Policy</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
15
poc_threefold/products.html
Normal file
15
poc_threefold/products.html
Normal file
@ -0,0 +1,15 @@
|
||||
{% include 'components/header.html' %}
|
||||
<link rel="stylesheet" href="/static/css/products.css">
|
||||
|
||||
<body class="products-page">
|
||||
{% include 'components/nav.html' %}
|
||||
<main>
|
||||
|
||||
[[products/body]]
|
||||
|
||||
</main>
|
||||
{% include 'components/footer.html' %}
|
||||
{% include 'components/login.html' %}
|
||||
{% include 'components/signup.html' %}
|
||||
</body>
|
||||
</html>
|
||||
@ -1,23 +1,57 @@
|
||||
:root {
|
||||
--primary-bg: #0a0a0a;
|
||||
--secondary-bg: #141414;
|
||||
--text-color: #ffffff;
|
||||
--text-muted: #a0a0a0;
|
||||
/* Light theme variables */
|
||||
--primary-bg-light: #ffffff;
|
||||
--secondary-bg-light: #f5f5f5;
|
||||
--text-color-light: #333333;
|
||||
--text-muted-light: #666666;
|
||||
--card-bg-light: #ffffff;
|
||||
--card-border-light: rgba(0, 0, 0, 0.1);
|
||||
--card-hover-bg-light: #f8f8f8;
|
||||
|
||||
/* Dark theme variables */
|
||||
--primary-bg-dark: #0a0a0a;
|
||||
--secondary-bg-dark: #141414;
|
||||
--text-color-dark: #ffffff;
|
||||
--text-muted-dark: #a0a0a0;
|
||||
--card-bg-dark: #141414;
|
||||
--card-border-dark: rgba(255, 255, 255, 0.1);
|
||||
--card-hover-bg-dark: #1a1a1a;
|
||||
|
||||
/* Common variables */
|
||||
--accent-color: #00abf4;
|
||||
--section-padding: 3.6rem 1.2rem;
|
||||
--nav-height: 42px;
|
||||
--card-bg: rgba(20, 20, 20, 0.6);
|
||||
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
|
||||
/* Default to dark theme */
|
||||
--primary-bg: var(--primary-bg-dark);
|
||||
--secondary-bg: var(--secondary-bg-dark);
|
||||
--text-color: var(--text-color-dark);
|
||||
--text-muted: var(--text-muted-dark);
|
||||
--card-bg: var(--card-bg-dark);
|
||||
--card-border: var(--card-border-dark);
|
||||
--card-hover-bg: var(--card-hover-bg-dark);
|
||||
}
|
||||
|
||||
* {
|
||||
/* Light theme overrides */
|
||||
.light-theme {
|
||||
--primary-bg: var(--primary-bg-light);
|
||||
--secondary-bg: var(--secondary-bg-light);
|
||||
--text-color: var(--text-color-light);
|
||||
--text-muted: var(--text-muted-light);
|
||||
--card-bg: var(--card-bg-light);
|
||||
--card-border: var(--card-border-light);
|
||||
--card-hover-bg: var(--card-hover-bg-light);
|
||||
}
|
||||
|
||||
.products-page * {
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
body {
|
||||
.products-page {
|
||||
font-family: var(--font-family);
|
||||
line-height: 1.6;
|
||||
background-color: var(--primary-bg);
|
||||
background-color: var(--primary-bg) !important;
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
@ -26,8 +60,8 @@ body {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
header {
|
||||
background-color: rgba(10, 10, 10, 0.95);
|
||||
.products-page header {
|
||||
background-color: var(--primary-bg);
|
||||
backdrop-filter: blur(10px);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -35,16 +69,16 @@ header {
|
||||
right: 0;
|
||||
height: var(--nav-height);
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-bottom: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
header nav {
|
||||
.products-page header nav {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
.products-page header nav ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@ -55,7 +89,7 @@ header nav ul {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
header nav ul li a {
|
||||
.products-page header nav ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.57rem;
|
||||
@ -63,14 +97,13 @@ header nav ul li a {
|
||||
transition: all 0.3s ease;
|
||||
padding: 0.3rem 0;
|
||||
position: relative;
|
||||
font-family: var(--font-family);
|
||||
}
|
||||
|
||||
header nav ul li a:hover {
|
||||
.products-page header nav ul li a:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
header nav ul li a::after {
|
||||
.products-page header nav ul li a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
@ -81,45 +114,41 @@ header nav ul li a::after {
|
||||
transition: width 0.3s ease;
|
||||
}
|
||||
|
||||
header nav ul li a:hover::after {
|
||||
.products-page header nav ul li a:hover::after {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
main.container {
|
||||
.products-page main.container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: var(--nav-height) 1.2rem 0;
|
||||
}
|
||||
|
||||
section {
|
||||
.products-page section {
|
||||
padding: var(--section-padding);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
section#why {
|
||||
.products-page section#why {
|
||||
min-height: calc(100vh - var(--nav-height));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
background: radial-gradient(circle at center, #141414 0%, #0a0a0a 100%);
|
||||
background: var(--primary-bg);
|
||||
}
|
||||
|
||||
section#why h1 {
|
||||
font-family: var(--font-family);
|
||||
.products-page section#why h1 {
|
||||
font-size: 2.4rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
margin-bottom: 1.2rem;
|
||||
background: linear-gradient(90deg, #ffffff 0%, #a0a0a0 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: var(--text-color);
|
||||
max-width: 1000px;
|
||||
}
|
||||
|
||||
section#why p {
|
||||
font-family: var(--font-family);
|
||||
.products-page section#why p {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
max-width: 800px;
|
||||
@ -127,24 +156,23 @@ section#why p {
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
section#products {
|
||||
.products-page section#products {
|
||||
background-color: var(--secondary-bg);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
section#products::before {
|
||||
.products-page section#products::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
|
||||
background: var(--card-border);
|
||||
}
|
||||
|
||||
section#products h2 {
|
||||
font-family: var(--font-family);
|
||||
.products-page section#products h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0.9rem;
|
||||
@ -152,8 +180,7 @@ section#products h2 {
|
||||
margin-left: 2.4rem;
|
||||
}
|
||||
|
||||
section#products p {
|
||||
font-family: var(--font-family);
|
||||
.products-page section#products p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
max-width: 900px;
|
||||
@ -162,7 +189,7 @@ section#products p {
|
||||
margin-left: 2.4rem;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
.products-page .product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1rem;
|
||||
@ -171,41 +198,40 @@ section#products p {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
.products-page .product-card {
|
||||
background-color: var(--card-bg);
|
||||
border: 1px solid var(--card-border);
|
||||
border-radius: 8px;
|
||||
padding: 0.9rem 0.6rem;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
.products-page .product-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: var(--card-border);
|
||||
background-color: var(--card-hover-bg);
|
||||
}
|
||||
|
||||
.product-card h3 {
|
||||
font-family: var(--font-family);
|
||||
.products-page .product-card h3 {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.product-card p {
|
||||
font-family: var(--font-family);
|
||||
.products-page .product-card p {
|
||||
font-size: 0.72rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
[role="button"] {
|
||||
font-family: var(--font-family);
|
||||
.products-page [role="button"] {
|
||||
display: inline-block;
|
||||
padding: 0.6rem 1.5rem;
|
||||
background: var(--accent-color);
|
||||
@ -220,15 +246,15 @@ section#products p {
|
||||
margin-top: 1.2rem;
|
||||
}
|
||||
|
||||
[role="button"]:hover {
|
||||
.products-page [role="button"]:hover {
|
||||
background: #0090d4;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 20px rgba(0, 171, 244, 0.2);
|
||||
}
|
||||
|
||||
section#dive-deeper {
|
||||
.products-page section#dive-deeper {
|
||||
text-align: center;
|
||||
background: linear-gradient(45deg, #141414, #1a1a1a);
|
||||
background: var(--secondary-bg);
|
||||
min-height: 30vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -236,25 +262,22 @@ section#dive-deeper {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
section#dive-deeper h2 {
|
||||
font-family: var(--font-family);
|
||||
.products-page section#dive-deeper h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 1.2rem;
|
||||
background: linear-gradient(90deg, #ffffff, #a0a0a0);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
footer {
|
||||
.products-page footer {
|
||||
text-align: center;
|
||||
padding: 1.8rem 0.6rem;
|
||||
background-color: var(--secondary-bg);
|
||||
color: var(--text-muted);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-top: 1px solid var(--card-border);
|
||||
}
|
||||
|
||||
footer ul {
|
||||
.products-page footer ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
@ -263,42 +286,41 @@ footer ul {
|
||||
margin-top: 0.9rem;
|
||||
}
|
||||
|
||||
footer ul li a {
|
||||
font-family: var(--font-family);
|
||||
.products-page footer ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.72rem;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
footer ul li a:hover {
|
||||
.products-page footer ul li a:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
.product-grid {
|
||||
.products-page .product-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
.products-page {
|
||||
--section-padding: 2.4rem 0.9rem;
|
||||
}
|
||||
|
||||
section#why h1 {
|
||||
.products-page section#why h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
section#why p {
|
||||
.products-page section#why p {
|
||||
font-size: 0.79rem;
|
||||
}
|
||||
|
||||
section#products h2 {
|
||||
.products-page section#products h2 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
.products-page header nav ul {
|
||||
padding: 0 0.6rem;
|
||||
gap: 0.9rem;
|
||||
flex-wrap: wrap;
|
||||
@ -306,11 +328,11 @@ footer ul li a:hover {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
header nav ul::-webkit-scrollbar {
|
||||
.products-page header nav ul::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.product-grid {
|
||||
.products-page .product-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user