Helm hub mag

index.html

@@ -5,7 +5,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>HelmHub</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
+    <link rel="icon" type="image/x-icon" href="/website-frontend/assets/logo/helm-white-fav.png">
     <link rel="stylesheet" href="style.css">
+
     <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> -->
 </head>
@@ -14,13 +17,18 @@
         <div class="container">
             <div class="nav-container">
                 <div class="nav-left">
-                    <a href="#" class="logo">HelmHub</a>
+                    <img src="/website-frontend/assets/logo/helm-white.png" alt="" class="logo">
+                    <a href="#" class="logo">HelmHub.IO</a>
+                    <a href="#" class="nav-link">About</a>
+                    <a href="#" class="nav-link">Blog</a>
+                    <a href="#" class="nav-link">Docs</a>
+                    <a href="#" class="nav-link">Team</a>
                     <a href="#" class="nav-link">Guide</a>
                     <a href="#" class="nav-link">Blog</a>
                 </div>
                 <div class="nav-right">
                     <button class="theme-toggle" onclick="toggleTheme()">
-                        <i class="fa fa-moon-o" id="theme-icon"></i>
+                        <i class="fa fa-shield" aria-hidden="true"></i>
                     </button>
                     <a href="https://github.com/helmhub/helmhub" class="github-link">
                         <i class="fa fa-github"></i>
@@ -43,26 +51,36 @@
     <header>
         <div class="container">
             <h1>HelmHub.io</h1>
-            <p class="subtitle">Your Kubernetes Helm Chart Repository</p>
+            <p class="subtitle">Your Kubernetes Helm Chart Repository, Maintained By A Community Of Passionate Engineers</p>
+
+
         </div>
     </header>
 
     <section class="hero">
         <div class="container">
-            <h2>The Kubernetes Package Manager</h2>
+
+
+            <h2>Why Choose HelmHub Charts?</h2>
             <p>Find, install and publish Kubernetes packages with the upcoming world's largest repository of Helm charts.</p>
-            <div class="hero-stats">
-                <div class="stat">
-                    <span class="stat-number">Only God Knows</span>
-                    <span class="stat-label">Charts</span>
-                </div>
-                <div class="stat">
-                    <span class="stat-number">Only God Knows</span>
-                    <span class="stat-label">Downloads</span>
-                </div>
-                <div class="stat">
-                    <span class="stat-number">Only God Knows</span>
-                    <span class="stat-label">Contributors</span>
+
+
+            <div class="hero-why">
+
+                <div class="why">
+                    <i class="fa fa-lock fa-4x" aria-hidden="true"></i>
+                    <h3>Secure</h3>
+                    <p>Choose from a large repo of Secure charts</p>
+                </div>
+                <div class="why">
+                    <i class="fa fa-wrench fa-4x" aria-hidden="true"></i>
+                    <h3> Flexible </h3>
+                    <p>Choose the chart that best suite your project</p>
+                </div>
+                <div class="why">
+                    <i class="fa fa-users fa-4x" aria-hidden="true"></i>
+                    <h3>Community-based support </h3>
+                    <p>Choose from a large and supportive community</p>
                 </div>
             </div>
             <div class="hero-buttons">

style.css

@@ -5,10 +5,10 @@
         /* Global Styles */
 :root {
   --text-primary: #000000;
-  --text-secondary: #6c757d;
+  --text-secondary: #36414d;
   --nav-bg: #1e3a8a;
   --body-bg: transparent;
-  --card-bg: #ffffff;
+  --card-bg: #c9c7c7;
 }
 
 :root[data-theme="dark"] {
@@ -32,7 +32,7 @@ body {
 /* Navigation */
 nav { background: var(--nav-bg); padding: 1rem 0; position: sticky; top: 0; z-index: 100; }
 .nav-container { display: flex; justify-content: space-between; align-items: center; }
-.nav-left { display: flex; align-items: center; gap: 2rem; }
+.nav-left { display: flex; align-items: center; gap: 3rem; justify-content: space-evenly;}
 .nav-right { display: flex; align-items: center; gap: 1rem; }
 .logo { color: white; font-size: 1.5rem; font-weight: bold; text-decoration: none; }
 .nav-link { color: white; text-decoration: none; transition: color 0.3s; }
@@ -50,17 +50,20 @@ nav { background: var(--nav-bg); padding: 1rem 0; position: sticky; top: 0; z-in
 
 /* Header */
 header { background: var(--nav-bg); color: white; padding: 2rem 0; text-align: center; }
-h1 { font-size: 3rem; margin-bottom: 1rem; }
+h1 { font-size: 3rem; margin-bottom: 2rem; }
 .subtitle { font-size: 1.2rem; opacity: 0.9; }
+/* logo */
+img.logo{ width: 4rem; height:4rem; }
 
 /* Hero Section */
 .hero { padding: 4rem 0; text-align: center; }
 .hero h2 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--text-primary); }
+.hero-why h3{ margin-bottom: 1.3rem; color: #1e40af;}
 .hero p { font-size: 1.1rem; color: var(--text-secondary); margin-bottom: 2rem; }
-.hero-stats { display: flex; justify-content: center; gap: 3rem; margin: 2rem 0; }
+.hero-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;  }
 .stat { text-align: center; }
-.stat-number { display: block; font-size: 2rem; font-weight: bold; color: #1e3a8a; }
-.stat-label { font-size: 0.9rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
+.stat-number { display: block; font-size: 1rem; font-weight: bold; color: #1e3a8a; }
+.stat-label { font-size: 1rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
 .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
 .btn { display: inline-block; background: #1e3a8a; color: white; padding: 12px 30px; text-decoration: none; border-radius: 5px; font-weight: 500; transition: background 0.3s; }
 .btn:hover { background: #1e40af; }