diff --git a/poc_threefold/tf.html b/poc_threefold/content/products/body.html similarity index 69% rename from poc_threefold/tf.html rename to poc_threefold/content/products/body.html index b5e7b8d..f9b8d8e 100644 --- a/poc_threefold/tf.html +++ b/poc_threefold/content/products/body.html @@ -1,29 +1,3 @@ - - - - - - ThreeFold Products - - - - - - - - -
- -
-

A Secure & Sovereign Infrastructure Layer for the Internet

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.

@@ -76,13 +50,3 @@

Build the Internet of Tomorrow, Today.

Dive Deeper
-
- - - diff --git a/poc_threefold/products.html b/poc_threefold/products.html new file mode 100644 index 0000000..c97369c --- /dev/null +++ b/poc_threefold/products.html @@ -0,0 +1,15 @@ +{% include 'components/header.html' %} + + + + {% include 'components/nav.html' %} +
+ + [[products/body]] + +
+ {% include 'components/footer.html' %} + {% include 'components/login.html' %} + {% include 'components/signup.html' %} + + diff --git a/poc_threefold/static/css/tf.css b/poc_threefold/static/css/products.css similarity index 57% rename from poc_threefold/static/css/tf.css rename to poc_threefold/static/css/products.css index b467601..86bca0b 100644 --- a/poc_threefold/static/css/tf.css +++ b/poc_threefold/static/css/products.css @@ -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; } }