krushndayshmookh commented on code in PR #35:
URL: https://github.com/apache/fineract-site/pull/35#discussion_r1911920646


##########
index.html:
##########
@@ -35,136 +35,789 @@
         <div class="nav-wrapper">
           <div class="container">
             <a href="#top" class="brand-logo">
-              <img class="logo" src="images/apache-fineract-logo.png" 
alt="Fineract Logo"/>
-              <span class="brand">Apache Fineract&reg;</span>
-                   <img referrerpolicy="no-referrer-when-downgrade" 
src="https://static.scarf.sh/a.png?x-pxid=2067fdb9-816d-461c-8713-bfb6cd8bb098"; 
/>
+              <div class="logo-wrapper">
+                <div class="logo-container">
+                  <img class="logo-img" src="images/apache-fineract-logo.png" 
alt="Apache Fineract Logo"/>
+                  <div class="brand-text">
+                    <span class="brand-name">Apache Fineract&reg;</span>
+                  </div>
+                </div>
+              </div>
             </a>
             <a href="#" data-activates="mobile-menu" 
class="button-collapse"><i class="material-icons">menu</i></a>
-            <ul class="right hide-on-med-and-down">
-              <li><a class="ghost-white-hover" href="#about">About</a></li>
-              <li><a class="ghost-white-hover" 
href="#contribute">Contribute</a></li>
-              <li><a class="ghost-white-hover" 
href="#downloads">Downloads</a></li>
-              <li><a class="ghost-white-hover" 
href="#resources">Resources</a></li>
-              <li><a class="ghost-white-hover" 
href="#reference">Reference</a></li>
+            
+            <ul class="right hide-on-med-and-down nav-links">
+              <li>
+                <a class="nav-link" href="#about">
+                  <i class="material-icons left">info</i>About
+                </a>
+              </li>
+              <li>
+                <a class="nav-link" href="#contribute">
+                  <i class="material-icons left">people</i>Contribute
+                </a>
+              </li>
+              <li>
+                <a class="nav-link" href="#downloads">
+                  <i class="material-icons left">download</i>Downloads
+                </a>
+              </li>
+              <li>
+                <a class="nav-link" href="#resources">
+                  <i class="material-icons left">library_books</i>Resources
+                </a>
+              </li>
+              <li>
+                <a class="nav-link" href="#reference">
+                  <i class="material-icons left">link</i>Reference
+                </a>
+              </li>
             </ul>
+
             <ul class="side-nav ghost-white jet-text" id="mobile-menu">
-              <li class="side-nav-heading">Apache Fineract&reg;</li>
-              <li><a class="jet-hover" href="#about" 
onclick="closeSideNav()">About</a></li>
-              <li><a class="jet-hover" href="#contribute" 
onclick="closeSideNav()">Contribute</a></li>
-              <li><a class="jet-hover" href="#downloads" 
onclick="closeSideNav()">Downloads</a></li>
-              <li><a class="jet-hover" href="#resources" 
onclick="closeSideNav()">Resources</a></li>
-              <li><a class="jet-hover" href="#reference" 
onclick="closeSideNav()">Reference</a></li>
+              <li class="side-nav-header">
+                <div class="logo-container">
+                  <img class="logo" src="images/apache-fineract-logo.png" 
alt="Fineract Logo"/>
+                  <span class="brand">Apache Fineract&reg;</span>
+                </div>
+              </li>
+              <li><div class="divider"></div></li>
+              <li>
+                <a class="side-nav-link" href="#about" 
onclick="closeSideNav()">
+                  <i class="material-icons left">info</i>About
+                </a>
+              </li>
+              <li>
+                <a class="side-nav-link" href="#contribute" 
onclick="closeSideNav()">
+                  <i class="material-icons left">people</i>Contribute
+                </a>
+              </li>
+              <li>
+                <a class="side-nav-link" href="#downloads" 
onclick="closeSideNav()">
+                  <i class="material-icons left">download</i>Downloads
+                </a>
+              </li>
+              <li>
+                <a class="side-nav-link" href="#resources" 
onclick="closeSideNav()">
+                  <i class="material-icons left">library_books</i>Resources
+                </a>
+              </li>
+              <li>
+                <a class="side-nav-link" href="#reference" 
onclick="closeSideNav()">
+                  <i class="material-icons left">link</i>Reference
+                </a>
+              </li>
             </ul>
           </div>
         </div>
       </nav>
     </div>
+
+    <style>
+      .navbar-fixed {
+        height: 72px;
+      }
+      
+      .nav-wrapper {
+        padding: 0 15px;
+      }
+
+      /* Logo Styles */
+      .logo-wrapper {
+        display: flex;
+        align-items: center;
+        height: 72px;
+        padding: 5px 0;
+      }
+
+      .logo-container {
+        display: flex;
+        align-items: center;
+        gap: 15px;
+      }
+
+      .logo-img {
+        height: 52px;
+        width: auto;
+        margin: 0;
+      }
+
+      .brand-text {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+      }
+
+      .brand-name {
+        font-size: 1.8rem;
+        font-weight: 700;
+        color: #ffffff;
+        line-height: 1.2;
+        letter-spacing: 0.5px;
+        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      /* Responsive adjustments */
+      @media only screen and (max-width: 992px) {
+        .brand-logo {
+          transform: translateX(-50%);
+          left: 50%;
+        }
+
+        .logo-img {
+          height: 46px;
+        }
+
+        .brand-name {
+          font-size: 1.6rem;
+        }
+      }
+
+      @media only screen and (max-width: 600px) {
+        .logo-img {
+          height: 40px;
+        }
+        
+        .brand-name {
+          font-size: 1.4rem;
+        }
+      }
+
+      /* Rest of the existing styles */
+      .nav-links li {
+        margin: 0 5px;
+      }
+
+      .nav-link {
+        display: flex;
+        align-items: center;
+        padding: 0 15px;
+        height: 72px;
+        transition: background-color 0.3s ease;
+        border-bottom: 3px solid transparent;
+      }
+
+      .nav-link:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+        border-bottom: 3px solid #26a69a;
+      }
+
+      .nav-link i {
+        margin-right: 8px;
+        transition: transform 0.3s ease;
+      }
+
+      .nav-link:hover i {
+        transform: translateY(-2px);
+      }
+
+      .side-nav-header {
+        padding: 20px 15px;
+        background-color: #343434;
+      }
+
+      .side-nav-header .logo-container {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .side-nav-header .brand {
+        color: white;
+        margin-top: 10px;
+        text-align: center;
+      }
+
+      .side-nav-link {
+        display: flex !important;
+        align-items: center;
+        padding: 15px !important;
+        height: auto !important;
+        transition: background-color 0.3s ease;
+      }
+
+      .side-nav-link i {
+        margin-right: 15px !important;
+        color: #26a69a;
+      }
+
+      .side-nav-link:hover {
+        background-color: #f5f5f5 !important;
+      }
+
+      @media only screen and (max-width: 992px) {
+        .brand-logo {
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    </style>
   </header>
+  <div class="cube-loader">
+    <div class="cube">
+      <div class="face front"></div>
+      <div class="face back"></div>
+      <div class="face right"></div>
+      <div class="face left"></div>
+      <div class="face top"></div>
+      <div class="face bottom"></div>
+      <div class="inner-cube">
+        <div class="face front"></div>
+        <div class="face back"></div>
+        <div class="face right"></div>
+        <div class="face left"></div>
+        <div class="face top"></div>
+        <div class="face bottom"></div>
+      </div>
+    </div>
+  </div>
+
+  <style>
+    .cube-loader {
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 120px;
+      height: 120px;
+      perspective: 1000px;
+      display: none; /* Hidden by default, show with .show class */
+    }
+
+    .cube-loader.show {
+      display: block;
+    }
+
+    .cube {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      transform-style: preserve-3d;
+      animation: rotate 4s infinite linear;
+    }
+
+    .cube .face {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background: rgba(186, 0, 143, 0.9);
+      border: 2px solid rgba(186, 0, 143, 1);
+      box-sizing: border-box;
+    }
+
+    .inner-cube {
+      position: absolute;
+      width: 60%;
+      height: 60%;
+      top: 20%;
+      left: 20%;
+      transform-style: preserve-3d;
+    }
+
+    .inner-cube .face {
+      background: rgba(0, 119, 190, 0.9);
+      border: 2px solid rgba(0, 119, 190, 1);
+    }
+
+    .inner-cube::after {
+      content: '';
+      position: absolute;
+      width: 40%;
+      height: 40%;
+      top: 30%;
+      left: 30%;
+      background: rgba(141, 198, 63, 0.9);
+      border: 2px solid rgba(141, 198, 63, 1);
+      transform: translateZ(0);
+    }
+
+    /* Face Transformations */
+    .cube .face.front  { transform: rotateY(0deg) translateZ(60px); }
+    .cube .face.back   { transform: rotateY(180deg) translateZ(60px); }
+    .cube .face.right  { transform: rotateY(90deg) translateZ(60px); }
+    .cube .face.left   { transform: rotateY(-90deg) translateZ(60px); }
+    .cube .face.top    { transform: rotateX(90deg) translateZ(60px); }
+    .cube .face.bottom { transform: rotateX(-90deg) translateZ(60px); }
+
+    .inner-cube .face.front  { transform: rotateY(0deg) translateZ(36px); }
+    .inner-cube .face.back   { transform: rotateY(180deg) translateZ(36px); }
+    .inner-cube .face.right  { transform: rotateY(90deg) translateZ(36px); }
+    .inner-cube .face.left   { transform: rotateY(-90deg) translateZ(36px); }
+    .inner-cube .face.top    { transform: rotateX(90deg) translateZ(36px); }
+    .inner-cube .face.bottom { transform: rotateX(-90deg) translateZ(36px); }
+
+    @keyframes rotate {
+      0% {
+        transform: rotateX(0deg) rotateY(0deg);
+      }
+      100% {
+        transform: rotateX(360deg) rotateY(360deg);
+      }
+    }
+
+    /* Add shadow effect */
+    .cube-loader::after {
+      content: '';
+      position: absolute;
+      bottom: -20px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 85%;
+      height: 10px;
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 50%;
+      filter: blur(5px);
+      animation: shadow 4s infinite linear;
+    }
+
+    @keyframes shadow {
+      0%, 100% {
+        transform: translateX(-50%) scale(1);
+        opacity: 0.4;
+      }
+      50% {
+        transform: translateX(-50%) scale(1.2);
+        opacity: 0.2;
+      }
+    }
+  </style>
+
+  <script>
+    // Function to show/hide loader
+    function showLoader() {
+      document.querySelector('.cube-loader').classList.add('show');
+    }
+
+    function hideLoader() {
+      document.querySelector('.cube-loader').classList.remove('show');
+    }
+  </script>
   <main class="container">
     <section class="section">
       <h3 class="center-align">Platform for Digital Financial Services</h3>
-      <p class="flow-text justify-align">
-        Apache Fineract&reg; (&#92;&#8217;f&#299;n-,&#1241;-,rakt&#92;) is 
open source software for financial services. 
-      </p>
-      <p class="flow-text justify-align">
-        At Apache Fineract&reg;, our mission is to build, maintain and enhance 
a cloud-ready
-       core banking system for robust, scalable, and secure operations of 
financial institutions.   
-        Fineract&reg; provides a reliable, robust, and affordable solution
-        for entrepreneurs, financial institutions, and service providers. 
-        We believe in financial services for everyone, including and 
especially for the unbanked and underbanked. 
-             
-        Fineract&reg; is aimed at innovative mobile and cloud-based solutions,
-        and enables digital transaction accounts for all.
-      </p>
-       <p class="flow-text justify-align">ASF Fineract&reg; 1.x is a 
cloud-ready platform with open APIs. It is, by design, a headless application.  
-               Solution Providers, including system integrators and banking 
system operators are able to build their own front end solutions on top of 
Fineract&reg;. 
-               We encourage all Consumers (or users) of fineract to consult 
competent technical resources for all questions related to securing and running 
the software properly. 
-               Please consult the Apache license for further legal information 
and the <a 
href="https://cwiki.apache.org/confluence/pages/viewpage.action?pageId=91554327";>FAQ<a></a>
 and <a 
href="https://cwiki.apache.org/confluence/display/FINERACT/Securing+Fineract";>Securing
 Fineract</a> for key information about the setup of this project. 
-           </p>
-          
-       <p class="flow-text justify-align"> NOTE DEPRECATED SUB-PROJECT: The 
Fineract&reg; Community has also worked on a code project called Fineract&reg; 
CN, 
-               intended to operate as a microservice architecture.  If you 
find references to this CN project it was not released.  In May 2023, the 
Fineract&reg; Community decided to DEPRECATE this project, and archived in late 
2023. This side-project served an important role in describing a microservice 
approach.   
-      </p>
+      
+      <div class="row">
+        <div class="col s12">
+          <div class="card-panel">
+            <h4><i class="material-icons left">account_balance</i>What is 
Apache Fineract?</h4>
+            <p class="flow-text justify-align">
+              Apache Fineract&reg; (\'fīn-,ˌ,rakt\) is open source software 
for financial services, designed to create a cloud-ready 

Review Comment:
   Unable to see any replacement character. Looks good to me. 



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to