From 02420f41cd77f2a54badcc92e4235c0e8e27a844 Mon Sep 17 00:00:00 2001
From: ehab-hassan <hassane@codescalers.com>
Date: Thu, 6 Feb 2025 16:42:18 +0200
Subject: [PATCH] why page

---
 css/index.css                        | 38 +++++++++++++++++++++++-----
 templates/partials/header.html       |  2 +-
 templates/partials/why/matters.html  | 10 ++++----
 templates/partials/why/ourwhy.html   |  6 ++---
 templates/partials/why/reason.html   | 12 ++++-----
 templates/partials/why/team.html     |  6 ++---
 templates/partials/why/timeline.html | 36 +++++++++++++-------------
 templates/partials/why/values.html   |  6 ++---
 8 files changed, 71 insertions(+), 45 deletions(-)

diff --git a/css/index.css b/css/index.css
index 52a22dc8a..27aaf66f5 100644
--- a/css/index.css
+++ b/css/index.css
@@ -30,6 +30,21 @@ body .icon {
   fill: #ffffff !important;
 }
 
+body .dropdown a{
+  @apply
+  px-0
+  text-white
+}
+
+body .dropdown{
+  background-color: rgb(0 0 0 / 50%);
+  color: #fff;
+}
+
+body .d_menu {
+  background-color: rgba(34 34 34);
+}
+
 /* lightMode */
 body.light-mode {
   background-color: #ffffff;
@@ -46,6 +61,21 @@ body.light-mode .semigray2 {
   color: #424242 !important;
 }
 
+body.light-mode .dropdown a{
+  @apply
+  px-0
+  text-black
+}
+
+body.light-mode .dropdown{
+  background-color: rgb(255 255 255 / 100%);
+  color: #121212;
+}
+
+body.light-mode .d_menu {
+  background-color: #e5e5e5;
+}
+
 body.light-mode .icon {
   
   fill: #424242 !important;
@@ -150,7 +180,7 @@ img[src*="#absolute"] {
 
 .dropdown { 
 
-  background-color: rgb(0 0 0 / 50%);
+  
   @apply
   lg:text-lg
   px-6
@@ -176,11 +206,7 @@ img[src*="#absolute"] {
   text-white
 }
 
-.dropdown a{
-  @apply
-  px-0
-  text-white
-}
+
 
 .subtitle {
   background-color:#58CF77 !important;
diff --git a/templates/partials/header.html b/templates/partials/header.html
index 0f0051b42..53b13ece9 100644
--- a/templates/partials/header.html
+++ b/templates/partials/header.html
@@ -142,7 +142,7 @@
 
 <nav>
     <div id="{{menu_id}}" class="nav_menu mt-0 sm:mt-0 md:mt-0 lg:mt-0 xl:mt-0 2xl:mt-0 z-50 absolute inset-x-0 transform shadow-lg lg:backdrop-blur xl:backdrop-blur transition duration-200 ease-in opacity-0 -translate-y-1 hidden">
-        <div style="background-color: rgba(34 34 34);">
+        <div class="d_menu">
             <div id="menu" class="conatiner mx-auto">
                 {{header_menu | safe }}
             </div>
diff --git a/templates/partials/why/matters.html b/templates/partials/why/matters.html
index 19f8adad1..aa085ee8c 100644
--- a/templates/partials/why/matters.html
+++ b/templates/partials/why/matters.html
@@ -1,11 +1,11 @@
-<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
+<div class="relative isolate overflow-hidden bg-transparent py-24 sm:py-32">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
         <div class="relative grid lg:grid-cols-12 lg:gap-8">
             <!-- Left Content -->
             <div class="lg:col-span-7">
                 <div class="mx-auto max-w-2xl lg:mx-0">
-                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Why it Matters</h1>
-                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">Why it Matters</h1>
+                    <p class="fade-in mt-6 text-lg lg:text-xl font-light">
                         For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners.
                         <br><br>
                         But we won’t stop here.
@@ -18,8 +18,8 @@
             <!-- Right Blockquote -->
             <div class="lg:col-span-5">
                 <figure class=" mt-6   pl-8">
-                    <blockquote class=" text-2xl text-white fade-in font-semibold">
-                        <p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
+                    <blockquote class=" text-2xl fade-in font-semibold">
+                        <p class="lg:text-2xl text-xl leading-normal font-semibold">Over the past decade, we’ve tackled complex challenges in areas such as data storage, secure overlay networking, and autonomous cloud security to bring this vision to life.</p>
                     </blockquote>
                     <br>
                     <div class="mt-6 border border-white px-6 py-2 rounded-xl inline-flex items-center gap-2 fade-in blinking-effect">
diff --git a/templates/partials/why/ourwhy.html b/templates/partials/why/ourwhy.html
index b43d91469..22e99521c 100644
--- a/templates/partials/why/ourwhy.html
+++ b/templates/partials/why/ourwhy.html
@@ -2,8 +2,8 @@
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
         <div class="mx-auto mt-24 pt-24 max-w-2xl lg:max-w-none">
             <div class="fade-in mx-auto max-w-3xl  text-center">
-                <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white sm:text-5xl">Why it Matters?</h2>
-                <p class="mt-6 text-lg font-light text-white">
+                <h2 class="fade-in text-balance text-4xl font-normal tracking-tight sm:text-5xl">Why it Matters?</h2>
+                <p class="mt-6 text-lg font-light">
                     For +30 years, we’ve dedicated ourselves to this vision, and ThreeFold is the culmination of that journey. Today, we have a fully operational product (V3) and a thriving community of farmers, users, and partners. 
                     <br><br>
                     But we won’t stop here. 
@@ -15,7 +15,7 @@
                         secure overlay networking, and autonomous cloud security to bring this vision to life. </span>
                 </p>
                 <br>
-                <a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight text-white sm:text-4xl blinking-effect">12.12.2024</a>
+                <a href="action.html" class="fade-in pt-10 text-balance text-3xl font-semibold tracking-tight sm:text-4xl blinking-effect">12.12.2024</a>
             </div>
         </div>
     </div>
diff --git a/templates/partials/why/reason.html b/templates/partials/why/reason.html
index 4236c9dae..b921f6b4b 100644
--- a/templates/partials/why/reason.html
+++ b/templates/partials/why/reason.html
@@ -1,11 +1,11 @@
-<div class="relative isolate overflow-hidden bg-transparent text-white py-24 sm:py-32">
+<div class="relative isolate overflow-hidden bg-transparent  py-24 sm:py-32">
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
         <div class="relative grid lg:grid-cols-12 lg:gap-8">
             <!-- Left Content -->
             <div class="lg:col-span-7">
                 <div class="mx-auto max-w-2xl lg:mx-0">
-                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">The Reason Behind It All</h1>
-                    <p class="fade-in mt-6 text-lg lg:text-xl font-light text-white">
+                    <h1 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">The Reason Behind It All</h1>
+                    <p class="fade-in mt-6 text-lg lg:text-xl font-light">
                         The Internet started as a peer-to-peer network, but over time it has become fragile and overly centralized. This shift has led to serious issues: misinformation is rampant, privacy and security are compromised, and half the world remains poorly connected.
                         <br><br>
                         Big tech companies now dominate the Internet, tracking our activities and influencing our decisions, consolidating control in ways that don't serve everyone equally...
@@ -17,12 +17,12 @@
             <!-- Right Blockquote -->
             <div class="lg:col-span-5">
                 <figure class=" mt-6 pl-8">
-                    <blockquote class=" lg:text-2xl text-xl text-white fade-in font-semibold">
-                        <p class="lg:text-2xl text-xl leading-normal text-white font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
+                    <blockquote class=" lg:text-2xl text-xl fade-in font-semibold">
+                        <p class="lg:text-2xl text-xl leading-normal font-semibold">Therefore we believe the Internet needs a fresh start—one that addresses these challenges with a focus on authenticity, equality, and sustainability for everyone.</p>
                     </blockquote>
                     <br>
                     <div class="mx-4">
-                    <p class="fade-in mx-auto text-2xl font-semibold tracking-tight text-white lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer>
+                    <p class="fade-in mx-auto text-2xl font-semibold tracking-tight lg:text-3xl opacity-0 transition-opacity duration-1000" data-observer>
                         Planet First. People First.
                     </p>
                     </div>
diff --git a/templates/partials/why/team.html b/templates/partials/why/team.html
index 22f3a8968..9374e2fb0 100644
--- a/templates/partials/why/team.html
+++ b/templates/partials/why/team.html
@@ -2,12 +2,12 @@
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <div class="mx-auto max-w-2xl lg:max-w-none">
         <div class="text-center">
-          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">Founded by Internet 1.0 Pioneers<br>and All of You</h2>
-          <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light text-gray-200 fade-in">The founders have been working on Internet technology since the early days,<br>when it was a decentralized, peer-to-peer network.<br>ThreeFold's aim is to help bring that vision to life once more. <br>More than 50 full-time active developers support the project.</p>
+          <h2 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">Founded by Internet 1.0 Pioneers<br>and All of You</h2>
+          <p class="mx-auto mb-10 mt-6 max-w-4xl text-pretty lg:text-xl text-lg font-light semigray fade-in">The founders have been working on Internet technology since the early days,<br>when it was a decentralized, peer-to-peer network.<br>ThreeFold's aim is to help bring that vision to life once more. <br>More than 50 full-time active developers support the project.</p>
         </div>
 
      <div class="mt-8 flex items-center justify-center gap-x-6 fade-in">
-        <a href="/people" class="fade-in rounded-2xl bg-white px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:bg-gray-200 hover:text-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-offset-2">Meet the Team</a>
+        <a href="/people" class="fade-in border-gray-500 border-2 rounded-2xl  px-4 py-2.5 text-sm font-semibold text-black shadow-sm hover:text-gray-800 bg-white hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2">Meet the Team</a>
       </div>
  </div>
     
diff --git a/templates/partials/why/timeline.html b/templates/partials/why/timeline.html
index 0cce4e8cd..9da621cec 100644
--- a/templates/partials/why/timeline.html
+++ b/templates/partials/why/timeline.html
@@ -2,8 +2,8 @@
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
         <div class="mx-auto max-w-2xl lg:max-w-none">
             <div class="text-center">
-                <h2 class="fade-in text-balance text-4xl font-normal tracking-tight text-white lg:text-5xl">ThreeFold’s Journey</h2>
-                <p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light text-gray-200">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
+                <h2 class="fade-in text-balance text-4xl font-normal tracking-tight lg:text-5xl">ThreeFold’s Journey</h2>
+                <p class="fade-in mx-auto mt-6 lg:mb-1 mb-6 max-w-3xl text-pretty lg:text-xl text-lg font-light semigray">The pivotal milestones that have shaped Threefold's growth and innovation, driving us towards a sustainable, decentralized future.</p>
             </div>
         </div>
     </div>
@@ -18,12 +18,12 @@
                 <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
             </svg>
         </div>
-        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
+        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-gray-200">Phase I</div>
+                <div class="font-medium semigray">Phase I</div>
             </div>
-            <div class="font-semibold text-lg text-gray-200 mb-2">Creation of Core Technology</div>
-            <div class="text-gray-200 font-light">
+            <div class="font-semibold text-lg semigray mb-2">Creation of Core Technology</div>
+            <div class="semigray font-light">
                 10+ years of Development
                 <br>Built decentralized, autonomous, edge internet technology
                 <br>50m dollars invested by founders, community, and TF Tech investors
@@ -38,12 +38,12 @@
                 <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
             </svg>
         </div>
-        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
+        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-white">Phase II</div>
+                <div class="font-medium">Phase II</div>
             </div>
-            <div class="font-semibold text-lg text-white mb-2">Global Proof Of Concept</div>
-            <div class="text-gray-200 font-light">
+            <div class="font-semibold text-lg mb-2">Global Proof Of Concept</div>
+            <div class="semigray font-light">
                 Open Source Development
                 <br>50+ Countries
                 <br>50,000+ Cores
@@ -62,12 +62,12 @@
                 <path fill-rule="nonzero" d="M10.422 1.257 4.655 7.025 2.553 4.923A.916.916 0 0 0 1.257 6.22l2.75 2.75a.916.916 0 0 0 1.296 0l6.415-6.416a.916.916 0 0 0-1.296-1.296Z" />
             </svg>
         </div>
-        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
+        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-white">2025</div>
+                <div class="font-medium">2025</div>
             </div>
-            <div class="font-semibold text-lg text-white mb-2">ThreeFold Web4</div>
-            <div class="text-gray-200 font-light">
+            <div class="font-semibold text-lg mb-2">ThreeFold Web4</div>
+            <div class="semigray font-light">
                 Introduce a Web4 Phone & Router
                 <br>Web4 smart contracts for the Web3 world.                
                 <br>Expand the network to +1 Million Nodes
@@ -85,12 +85,12 @@
                 <path d="M12 10v2H7V8.496a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5V12H0V4.496a.5.5 0 0 1 .206-.4l5.5-4a.5.5 0 0 1 .588 0l5.5 4a.5.5 0 0 1 .206.4V10Z" />
             </svg>
         </div>
-        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] bg-white/5 p-4 rounded-2xl shadow">
+        <div class="fade-in w-[calc(100%-4rem)] md:w-[calc(50%-2.5rem)] double_bg p-4 rounded-2xl shadow">
             <div class="flex items-center justify-between space-x-2 mb-1">
-                <div class="font-medium text-gray-400">The Result</div>
+                <div class="font-medium semigray2">The Result</div>
             </div>
-            <div class="font-semibold text-lg text-gray-400 mb-2">Sovereignty for All</div>
-            <div class="text-gray-400 font-light">
+            <div class="font-semibold text-lg semigray2 mb-2">Sovereignty for All</div>
+            <div class="semigray2 font-light">
                 An upgraded Internet for Billions.
                 <br>A planet and people first hybrid of Humans and Machines deliver
                 <br>on the promise of Augmented Collective Intelligence
diff --git a/templates/partials/why/values.html b/templates/partials/why/values.html
index aae617777..c46dafc76 100644
--- a/templates/partials/why/values.html
+++ b/templates/partials/why/values.html
@@ -2,17 +2,17 @@
     <div class="mx-auto max-w-7xl px-6 lg:px-8">
       <dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
         <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
             Open Source.
           </dd>
         </div>
         <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
             Authenticity.
           </dd>
         </div>
         <div class="mx-auto flex max-w-xs flex-col gap-y-4">
-          <dd class="fade-in order-first text-3xl font-semibold tracking-tight text-white sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
+          <dd class="fade-in order-first text-3xl font-semibold tracking-tight sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
             Simplicity.
           </dd>
         </div>