Added 'contact' segment

Author: ceciliasnho

_config.yml

@@ -72,7 +72,7 @@ header-tagline: Advancing Science through Multi‑Disciplinary AI
 # IMPORTANT: you can modify contact form from this static template, but now works contact form works with a free external server
 # To configure this contact form, first please send a fictive email afeter you enter below your email and verify that :)
 #
-email: [email protected]
+email: [email protected]
 
 # # Offer Banner Link
 # # Default link is a link to all Sera OnePage products
@@ -576,7 +576,7 @@ roles:
 ############   Contact   ############
 #####################################
 contact-title: Contact Us
-contact-description: Let's pioneer the future of science together. Contact us to join the conversation.
+contact-description: Need more information? Get in touch.
 
 #####################################
 #############   Footer   ############

_includes/header-page.html

@@ -39,7 +39,7 @@
               <li><a href="{{ site.baseurl }}/#team">Team</a></li>
               <li><a href="{{ site.baseurl }}/#careers">Careers</a></li>
               <!-- <li><a href="{{ site.baseurl }}#prices">Prices</a></li> -->
-              <!-- <li><a href="{{ site.baseurl }}#contact">Contact</a></li> -->
+              <li><a href="{{ site.baseurl }}#contact">Contact</a></li>
             </ul>
           </nav>
         </div>

_includes/header.html

@@ -42,8 +42,8 @@
               <li><a href="#blog">News</a></li>
               <li><a href="#team">Team</a></li>
               <li><a href="#careers">Careers</a></li>
+              <li><a href="#contact">Contact</a></li>
               <!-- <li><a href="#prices">Prices</a></li> -->
-              <!-- <li><a href="#contact">Contact</a></li> -->
             </ul>
           </nav>
 

_includes/sections/contact.html

@@ -18,16 +18,18 @@ <h2>{{ site.contact-title }}</h2>
       </header>
 
       <!-- Section Content -->
-      <div class="col-md-8 col-md-push-2 col-sm-12 section-content">
+      <div class="col-md-8 col-md-push-2 col-sm-12 contact-description">
         <p>{{ site.contact-description }}</p>
+        <a href="mailto:{{ site.email }}" target="_blank" class="contact-button">{{site.email}}</a>
       </div>
 
     </div>
 
     <!-- Form Container -->
+    <!--
     <div class="row form-container">
 
-      <!-- Contact Form -->
+      <!-- Contact Form
       <div class="col-md-8 col-md-push-2">
         <form id="sera-contact-form" action="https://formspree.io/{{ site.email }}" method="POST"
           class="contact-form container-fluid">
@@ -52,7 +54,7 @@ <h2>{{ site.contact-title }}</h2>
         </form>
       </div>
 
-    </div>
+    </div> -->
 
   </div>
 </section>

_scss/layout/_contact.scss

@@ -23,6 +23,42 @@ section.contact-section {
     }
   }
 
+  .contact-description {
+    p {
+      font-size: 1.5rem;
+      font-weight: 500;
+      color: $white;
+      margin-bottom: 1.5rem;
+  }
+  }
+
+  .contact-button,
+button {
+  display: inline-block;
+  width: auto;
+  max-width: 100%;
+  color: $white;
+  border: 2px solid $primary;
+  padding: 0.8em 2em;
+  cursor: pointer;
+  font-size: 1rem;
+  font-weight: 500;
+  text-align: center;
+
+  &.button-focus {
+    color: $white;
+    background-color: $primary;
+  }
+  
+  &:hover,
+  &:active {
+  color: $white;
+  border-color: lighten($primary, 20%);
+  background-color: lighten($primary, 20%);
+  }
+
+}
+
   // Form Container
   .form-container {
     margin-top: 80px;

index.html

@@ -17,4 +17,6 @@
 
 {% include sections/careers.html %}
 
+{% include sections/contact.html %}
+
 <!-- include sections/contact.html -->