Add prominent hero section at the top of the page

Anon23261 · Dec 18, 2024 · b719161 · b719161
1 parent 263d214
commit b719161
Showing 1 changed file with 73 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -39,6 +39,61 @@
             --warning-color: #ff8800;
         }
 
+        /* Hero Section */
+        .hero-section {
+            background: linear-gradient(135deg, #2b2b2b 0%, #1e1e1e 100%);
+            padding: 4rem 2rem;
+            text-align: center;
+            border-bottom: 2px solid var(--primary-color);
+            margin-bottom: 2rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+        }
+
+        .hero-title {
+            font-size: 3.5em;
+            color: var(--primary-color);
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+            font-family: 'JetBrains Mono', monospace;
+        }
+
+        .hero-subtitle {
+            font-size: 1.8em;
+            color: var(--secondary-color);
+            margin-bottom: 2rem;
+            font-family: 'Inter', sans-serif;
+        }
+
+        .hero-description {
+            font-size: 1.2em;
+            color: var(--text-color);
+            max-width: 800px;
+            margin: 0 auto;
+            line-height: 1.6;
+        }
+
+        .hero-badges {
+            display: flex;
+            gap: 1rem;
+            justify-content: center;
+            margin-top: 2rem;
+        }
+
+        .badge {
+            background: #333;
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            color: var(--text-color);
+            font-family: 'JetBrains Mono', monospace;
+            border: 1px solid var(--primary-color);
+        }
+
+        .badge-primary {
+            background: var(--primary-color);
+            color: var(--bg-color);
+        }
+
         body {
             font-family: 'Inter', sans-serif;
             line-height: 1.6;
@@ -236,6 +291,24 @@
 </head>
 <body>
     <div id="top">
+        <div class="hero-section">
+            <div class="hero-title">
+                Modern C++ Calculator
+                <span style="font-size: 0.5em; color: var(--accent-color);">v1.0</span>
+            </div>
+            <div class="hero-subtitle">Advanced System-Level Development</div>
+            <div class="hero-description">
+                A professional-grade scientific calculator showcasing modern C++ features, 
+                system-level optimization, and robust architecture design.
+            </div>
+            <div class="hero-badges">
+                <span class="badge badge-primary">C++17/20</span>
+                <span class="badge">System Programming</span>
+                <span class="badge">Performance Optimized</span>
+                <span class="badge">Memory Safe</span>
+            </div>
+        </div>
+
         <div id="titlearea">
             <div id="projectname">Modern C++ Calculator
                 <span class="code-keyword">v1.0</span>