UX adjustments to the contact buttons on main page

content/_index.md

@@ -49,16 +49,16 @@ Exit to Community is a search for another way—a path where organizations can m
 <div class="secondary-actions">
   <h3>Get Involved</h3>
   <div class="secondary-cards">
+    <div class="secondary-card">
+      <h4>Plan Your E2C</h4>
+      <p>Connect with our team to discuss your organization's future</p>
+      <a href="/contact/" class="secondary-button">Get in Touch</a>
+    </div>
     <div class="secondary-card">
       <h4>Share Your Story</h4>
       <p>Help others learn by contributing your organization's E2C experience</p>
       <a href="/add-your-story/" class="secondary-button">Add Your Story</a>
     </div>
-    <div class="secondary-card">
-      <h4>Get in Touch</h4>
-      <p>Connect with the Exit to Community project team</p>
-      <a href="/contact/" class="secondary-button">Contact Us</a>
-    </div>
   </div>
 </div>
 

static/css/main.css

@@ -546,12 +546,12 @@ a:hover {
 .secondary-cards {
     display: grid;
     gap: 24px;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
 }
 
 .secondary-card {
     background: var(--card-background);
-    border: 1px solid var(--border);
+    border: 3px solid var(--text-primary);
     border-radius: 12px;
     padding: 24px;
     text-align: center;
@@ -565,8 +565,12 @@ a:hover {
 
 .secondary-card h4 {
     font-size: 1.1rem;
-    color: var(--text-primary);
+    color: var(--text-primary) !important;
     margin-bottom: 0.5rem;
+    font-weight: 600;
+    display: block !important;
+    visibility: visible !important;
+    opacity: 1 !important;
 }
 
 .secondary-card p {
@@ -581,7 +585,7 @@ a:hover {
     background: transparent;
     color: var(--text-primary);
     text-decoration: none;
-    border: 1px solid var(--border);
+    border: 2px solid var(--text-primary);
     border-radius: 16px;
     font-weight: 500;
     font-size: 14px;
@@ -859,6 +863,32 @@ a:hover {
         grid-template-columns: 1fr;
     }
     
+    .secondary-cards {
+        grid-template-columns: 1fr;
+        gap: 24px;
+    }
+    
+    .secondary-actions {
+        margin: 3rem 0;
+        padding: 2rem;
+    }
+    
+    .secondary-actions h3 {
+        font-size: 2.5rem;
+    }
+    
+    .secondary-card {
+        padding: 24px;
+    }
+    
+    .secondary-card h4 {
+        font-size: 1.5rem;
+    }
+    
+    .secondary-card p {
+        font-size: 1.1rem;
+    }
+    
     .footer-content {
         grid-template-columns: 1fr;
         gap: 32px;