feat: new about, new primary color

Author: mstark5652

index.html

@@ -67,31 +67,30 @@
       <div class="buffer"></div>
       <div class="section about">
         <a class="anchor" id="about"></a>
-        <div class="subtitle">About</div>
-        <div class="">
-          <p>Stark Tech is a new product and development agency changing how software is built and delivered.</p>
-          <p>We understand the importance of speed and efficiency to market. Leveraging existing resources, experienced engineers, and AI we deliver exceptional results and get you to market faster than ever!</p>
-        </div>
-      </div>
-      <div class="buffer"></div>
-      <div class="section about">
-        <div class="subtitle">Why choose Stark Tech?</div>
-        <div class="features-grid">
-          <div class="feature-card">
-            <h3>Innovative Solutions</h3>
-            <p>Cutting-edge technology and AI-powered development for unmatched speed and efficiency</p>
-          </div>
-          <div class="feature-card">
-            <h3>Tailored Approach</h3>
-            <p>Custom solutions designed specifically for your unique business needs</p>
-          </div>
-          <div class="feature-card">
-            <h3>Cost-Effective</h3>
-            <p>Optimized development processes that deliver maximum value for your investment</p>
-          </div>
-          <div class="feature-card">
-            <h3>Transparent Communication</h3>
-            <p>Clear, consistent collaboration throughout the entire development process</p>
+        <div class="about-content">
+          <div class="about-text">
+            <h2>Transforming Ideas into Digital Reality</h2>
+            <p>Stark Tech is a forward-thinking product and development agency that's revolutionizing the software development landscape. With our unique blend of human expertise and cutting-edge AI technology, we're setting new standards in digital innovation.</p>
+            
+            <div class="about-highlights">
+              <div class="highlight">
+                <span class="highlight-icon">🚀</span>
+                <h3>Speed to Market</h3>
+                <p>We accelerate your journey from concept to launch, ensuring you stay ahead of the competition.</p>
+              </div>
+              
+              <div class="highlight">
+                <span class="highlight-icon">💡</span>
+                <h3>Innovation First</h3>
+                <p>Leveraging AI and advanced technologies to solve complex challenges with elegant solutions.</p>
+              </div>
+              
+              <div class="highlight">
+                <span class="highlight-icon">👥</span>
+                <h3>Expert Team</h3>
+                <p>Our experienced engineers bring deep expertise across the full development stack.</p>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -122,7 +121,7 @@ <h3>Transparent Communication</h3>
             <a href="mailto:michael@starktech.dev" class="contact-button" title="Email">
               <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24">
                 <path d="M0 0h24v24H0z" fill="none"/>
-                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#3F84E5"/>
+                <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" fill="#003049"/>
               </svg>
               michael@starktech.dev
             </a>

src/main.css

@@ -4,7 +4,7 @@ body {
   margin: auto;
   font-family: 'Roboto', sans-serif;
   font-size: 18px;
-  color: #3F84E5;
+  color: #003049;
   overflow: hidden;
   padding: 0px;
 }
@@ -124,7 +124,7 @@ a.anchor {
 }
 
 .scroll-indicator svg {
-  fill: #3F84E5;
+  fill: #003049;
   height: 30px;
   opacity: 0;
   animation-name: fade-in-out;
@@ -280,7 +280,7 @@ a.anchor {
 }
 
 .feature-card h3 {
-  color: #007bff;
+  color: #003049;
   margin-bottom: 1rem;
 }
 
@@ -302,7 +302,7 @@ a.anchor {
   align-items: center;
   gap: 0.5rem;
   padding: 0.75rem 1.5rem;
-  color: #3F84E5;
+  color: #003049;
   text-decoration: none;
   border-radius: 5px;
   transition: background-color 0.3s ease;
@@ -318,3 +318,79 @@ a.anchor {
     grid-template-columns: 1fr;
   }
 }
+
+/* About Section Styles */
+.about-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 1rem;
+}
+
+.about-text {
+  text-align: left;
+}
+
+.about-text h2 {
+  color: #003049;
+  font-size: 2rem;
+  margin-bottom: 1.5rem;
+  text-align: center;
+}
+
+.about-text p {
+  font-size: 1.1rem;
+  line-height: 1.6;
+  margin-bottom: 2rem;
+  color: #305252;
+}
+
+.about-highlights {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+
+.highlight {
+  padding: 1.5rem;
+  background-color: rgba(63, 132, 229, 0.05);
+  border-radius: 10px;
+  transition: transform 0.3s ease;
+}
+
+.highlight:hover {
+  transform: translateY(-5px);
+}
+
+.highlight-icon {
+  font-size: 2rem;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.highlight h3 {
+  color: #003049;
+  margin-bottom: 0.5rem;
+  font-size: 1.25rem;
+}
+
+.highlight p {
+  font-size: 1rem;
+  margin-bottom: 0;
+  color: #305252;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .about-text h2 {
+    font-size: 1.5rem;
+  }
+  
+  .about-highlights {
+    grid-template-columns: 1fr;
+  }
+  
+  .highlight {
+    text-align: center;
+  }
+}