call to action section, first attempt

_data/actions.json

@@ -2,30 +2,38 @@
     {
         "title": "Learn",
       "description": "with our core curriculum",
-        "icon": "dandelion",
+        "icon": "school-solid",
         "alt": "DHRIFT's logo, a dandelion.",
-        "link": "https://app.dhrift.org/workshops/?user=dhri-curriculum&repo=dhrift-site-template&wUser=dhri-curriculum&wGitRepo=workshops"
+        "link": "https://app.dhrift.org/workshops/?user=dhri-curriculum&repo=dhrift-site-template&wUser=dhri-curriculum&wGitRepo=workshops",
+        "image": "images/dhrift_site.png",
+        "message": "The DHRIFT platform provides an interactive learning experience for humanists, including code editors, challenges, and quizzes, all right in the browser."
     },
         {
       "title": "Teach",
       "description": "with our open-source materials",
-        "icon": "dandelion",
+        "icon": "chalkboard-user",
         "alt": "DHRIFT's logo, a dandelion.",
-        "link": "/teach"
+        "link": "/teach",
+        "image": "images/teach.jpg",
+        "message": "DHRIFT Core presents a vetted core set of interactive curriculum that is built for both synchronous and asynchronous instruction."
     },
     {
       "title": "Create",
       "description": "your own workshops",
-        "icon": "dandelion",
+        "icon": "creative-commons",
         "alt": "DHRIFT's logo, a dandelion.",
-        "link":"/create"
+        "link":"/create",
+        "image": "images/create.jpg",
+        "message": "DHRIFT is designed for extensibility, allowing you to easily create your own workshops and share them with the community."
     },
     {
         "title": "Build",
         "description": "your own institute",
-          "icon": "dandelion",
+          "icon": "building",
           "alt": "DHRIFT's logo, a dandelion.",
-          "link":"/build"
+          "link":"/build",
+          "image": "images/build.jpg",
+          "message": "Build and host an institute on DHRIFT, with your own branding and your own choice of workshops as well as a convenient scheduling component."
       }
   ]
 

_data/features.json

@@ -12,7 +12,7 @@
   },
   {
     "title": "Humanities Values",
-    "description": "DHRIFT is created by humanists, for humanists. We value inclusivity and openness in the design of our curriculum and platform.",
+    "description": "DHRIFT is created by humanists, for humanists. We value inclusivity and openness in the design of our curriculum and platform",
       "icon": "dandelion",
       "alt": "DHRIFT's logo, a dandelion."
   }

_layouts/faq.html

@@ -68,6 +68,9 @@ <h2 class="service-title faq-title" data-toggle="collapse" data-target="#faq-{{
       }
     }
   });
+
+
+
 </script>
 
 

_layouts/home.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-bodyClass: "page-home"
+bodyClass: home
 ---
 <!--
 <section class="intro">
@@ -26,23 +26,33 @@
 {% endif %}
 -->
 
+
 {% if site.data.actions %}
 <section id="actions">
-  <div class="action">
-    <!-- First action centered -->
-    <a href="https://app.dhrift.org/workshops/?user=dhri-curriculum&repo=dhrift-site-template&wUser=dhri-curriculum&wGitRepo=workshops" class="action-button" target="_blank">
-    <h3>Learn</h3>
-    </a>
-    <p>with our core curriculum</p>
-  </div>
-  <div class="action-row">
-    <!-- Following actions in a row -->
-    {% for action in site.data.actions offset:1 %}
-    <div class="action">
-      <a href="{{action.link}}" class="action-button" target="_blank"><h3>{{ action.title }}</h3></a>
-      <p>{{ action.description }}</p>
+  <div class="action-container">
+    <div class="grid-container">
+      {% for action in site.data.actions %}
+        <div class="action" data-image="{{ action.image }}" data-message="{{ action.message }}">
+          <div class="action-inner">
+            <div class="action-icon">
+              <img src="/images/{{ action.icon }}.svg" alt="{{ action.alt }}">
+            </div>
+            <div class="action-content">
+              <a href="{{ action.link }}" class="action-button" target="_blank">
+                <h3>{{ action.title }}</h3>
+              </a>
+              <p>{{ action.description }}</p>
+            </div>
+          </div>
+        </div>
+      {% endfor %}
+    </div>
+    <div class="image-container">
+      <div class="message-container">
+        <p class="message-content" id="messageContent">Default Message</p>
+      </div>
+      <img src="images/The_Graduate_Center_hero.jpg" alt="CUNY Graduate Center" id="mainImage">
     </div>
-    {% endfor %}
   </div>
 </section>
 {% endif %}
@@ -73,22 +83,54 @@ <h2 class="feature-title">{{ feature.title }}</h2>
   </div>
 </section>
 
-<!-- Randomly rotate the dandelions! -->
+<!-- Rotate the dandelions and change actions content area according to button hover-->
 <script>
 document.addEventListener("DOMContentLoaded", function () {
   const featureIcons = document.querySelectorAll(".feature-image");
-  const usedRotationAngles = new Set(); // Keep track of used angles
+  const usedRotationAngles = new Set(); // Keep track of used dandelion angles
 
   featureIcons.forEach(function (icon) {
     let rotationAngle;
 
     do {
       rotationAngle = Math.floor(Math.random() * 360);
     } while (usedRotationAngles.has(rotationAngle));
-	
+
     usedRotationAngles.add(rotationAngle);
     icon.style.transform = `rotate(${rotationAngle}deg)`;
   });
+
+  // Store the default action image and message
+  let currentImage = $('#mainImage').attr('src');
+  let defaultMessage = "Digital Humanities Infrastructure for Teaching (DHRIFT) is a project of the CUNY Graduate Center's Digital Initiatives."; 
+
+  // Set the default message
+  $('#messageContent').text(defaultMessage);
+
+  let hoverTimeout;
+
+  // Image change on button hover with message
+  $('.action-button').hover(
+    function () {
+      let imageUrl = $(this).closest('.action').data('image');
+      let message = $(this).closest('.action').data('message');
+
+      clearTimeout(hoverTimeout);
+
+      // set timeout
+      hoverTimeout = setTimeout(function () {
+        // Check if the new image is different from the current one and update
+        if (imageUrl !== currentImage) {
+          $('#mainImage').attr('src', imageUrl);
+          currentImage = imageUrl;
+          $('#messageContent').text(message); 
+        }
+      }, 300);
+    },
+    function () {
+      clearTimeout(hoverTimeout); // Clear the timeout on mouse out
+    }
+  );
 });
-	</script>
+</script>
 {% endif %}

assets/css/style.scss

@@ -323,71 +323,118 @@ ul li {
   text-decoration: none;
 }
 
-//actions
+//actions 
 #actions {
-  text-align: center;
-  //margin: 30px 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
   background-color: $secondary;
-  //margin: 0; 
-  padding: 0;
-  // border-top: 5px solid $primary;
-  // border-bottom: 5px solid $primary;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  padding-right: 20px;
 }
 
-.action {
-  max-width: 200px;
-  text-align: center;
-  margin-top: 20px;
-}
-
-.action img {
-  max-width: 100px;
-  height: auto;
-  margin: 0 auto;
+.action-container {
+  display: flex;
+  max-width: 100%;
+  overflow: hidden; 
 }
 
-.action h3 {
-  font-size: 2em;
-  margin: 10px 0;
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+  max-width: 50%;
+  justify-content: flex-start; 
+  flex-grow: 1;
 }
 
-.action p {
-  font-size: 1.25em;
-  color: #555;
-}
 
-.action-row {
+.action {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: 80px;
-  margin-right: 20px;
-  align-items: flex-start;
+  margin-top: 20px;
+  font-size: larger;
+  margin-left: 10px;
 }
 
 .action-button {
   display: inline-block;
-  padding: 10px 20px;
-  background-color: $white; 
+  padding: 25px 50px; 
+  background-color: $white;
   color: $primary;
   text-decoration: none;
   border: $primary 2px solid;
-  //border-radius: 5px;
-  font-size: 1.5em;
+  font-size: 3.5em !important;
   transition: background-color 0.3s;
 }
 
 .action-button:hover {
   background-color: $primary;
-  color: $white; 
+  color: $white;
   text-decoration: none;
 }
 
+
+.action-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.action-icon img {
+  margin-bottom: 10px;
+  width: 70px;
+  height: 70px;
+}
+
+.action-content {
+  flex-grow: 1;
+}
+
+.image-container {
+  flex: 1;
+  margin-left: 20px;
+  //box-shadow: -10px 0 15px rgba(0, 0, 0, 0.3);
+  max-width: 50%;
+  height: 600px;
+  overflow: hidden; 
+  transition: margin-left 0.5s ease-in-out; 
+  //border-style: solid;
+  //border-color: $primary;
+  //border-bottom: none;
+  //border-right: none;
+  //padding-bottom: 20px;
+}
+
+.image-container img {
+  margin-left: 0; 
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: margin-left 0.5s ease-in-out; 
+}
+
+#messageContent {
+  margin: 0;
+  padding: 10px;
+ // background-color: rgba(255, 255, 255, 0.8);
+  //border-bottom: 1px solid #ccc;
+  text-align: center;
+  font-size: 1.2em;
+}
+
+.message-container {
+  background-color: rgba(255, 255, 255, 0);
+  padding: 10px;
+  border-radius: 5px;
+  margin-bottom: 10px;
+}
+
+.message-content {
+  margin: 0;
+}
+
+
 // footer stuff
 .footer {
   background-color: $primary;
@@ -441,8 +488,8 @@ ul li {
 .sub-footer-inner {
   background-color: $primary !important;
   color: $white;
-  margin-left: 200px;
-  margin-right: 50px; 
+  margin-left: 160px;
+  margin-right: 90px; 
 }
 
 .copyright {
@@ -513,3 +560,4 @@ ul li {
   background: none;
   cursor: pointer;
 }
+