as

imswarnil · Feb 20, 2025 · bf278e8 · bf278e8
1 parent c67c5a3
commit bf278e8
Showing 1 changed file with 69 additions and 8 deletions.
diff --git a/_layouts/page.html b/_layouts/page.html
@@ -33,14 +33,75 @@
         {% else %}is-12{% endif %}">
         <!-- Hero Section -->
         {% unless page.hero == false %}
-          <section class="hero is-primary">
-            <div class="hero-body">
-              <div class="content">
-                <h1 class="title">{{ page.title | default: site.title }}</h1>
-                <p>{{ page.description | default: site.description }}</p>
-              </div>
-            </div>
-          </section>
+        <section class="page-header">
+          <div class="header-content">
+            <h1 class="header-title">{{ page.title | default: site.title }}</h1>
+            <p class="header-description">{{ page.description | default: site.description }}</p>
+          </div>
+        </section>
+
+        <style>
+          .page-header {
+            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+            padding: 3rem 1.5rem;
+            text-align: center;
+            color: #fff;
+            border-radius: 12px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+            position: relative;
+            overflow: hidden;
+          }
+
+          .page-header::before {
+            content: "";
+            position: absolute;
+            top: -40px;
+            left: -40px;
+            width: 80px;
+            height: 80px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+          }
+
+          .page-header::after {
+            content: "";
+            position: absolute;
+            bottom: -40px;
+            right: -40px;
+            width: 100px;
+            height: 100px;
+            background: rgba(255, 255, 255, 0.1);
+            border-radius: 50%;
+          }
+
+          .header-content {
+            position: relative;
+            z-index: 1;
+          }
+
+          .header-title {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin: 0;
+            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+          }
+
+          .header-description {
+            font-size: 1.2rem;
+            opacity: 0.85;
+            max-width: 600px;
+            margin: 0 auto;
+          }
+
+          @media (max-width: 768px) {
+            .header-title {
+              font-size: 2rem;
+            }
+            .header-description {
+              font-size: 1rem;
+            }
+          }
+        </style>
         {% endunless %}
 
         <!-- Main Content -->