Redesigning the home page

assets/scss/_common.scss

@@ -77,7 +77,7 @@ a:hover {
   padding-top: 70px;
   padding-bottom: 70px;
   text-align: left;
-
+  
   &-title {
     margin-bottom: 30px;
     text-align: left;

config/_default/params.yaml

@@ -6,6 +6,7 @@ plugins:
     - link: plugins/youmax/youmax.css
     - link: plugins/bootstrap-select/css/bootstrap-select.min.css
     - link: css/custom-menu.css
+    - link: css/custom.css
   js:
     - link: plugins/jQuery/jquery.min.js
     - link: plugins/bootstrap/bootstrap.min.js

layouts/partials/footer.html

@@ -79,7 +79,7 @@
 	youmaxDefaultTab: "UPLOADS",
 	youmaxColumns: 3,
 	showVideoInLightbox: false,
-	maxResults: 6,
+	maxResults: 3,
 });
 $(function(){
   $('#langpicker').selectpicker();

layouts/shortcodes/contact-form-one-liner.html

@@ -1,10 +1,12 @@
 <div class="newsletter-signup">
   <form class="signup-form" action="https://innersourcecommons.us1.list-manage.com/subscribe/post?u=0363fb06e6a59d48c6e260f1b&amp;id=97224b5ff2" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" target="_blank">
     <div class="form-group">
-      <span class="signup-text p">If you want to hear the latest news, please enter </span>
-      <input type="email" name="EMAIL" class="form-input" id="mce-EMAIL" aria-describedby="emailHelp" placeholder="[email protected]" required>
-      <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0363fb06e6a59d48c6e260f1b_97224b5ff2" tabindex="-1" value=""></div>
-      <button type="submit" name="subscribe" id="mc-embedded-subscribe">Subscribe!</button>
+      <!-- <span class="signup-text p">If you want to hear the latest news, please enter </span> -->
+      <div class="bg-white rounded-input w-100 d-flex newsletter-input">
+        <input type="email" name="EMAIL" class="form-input rounded-input col-md-10 border-0" id="mce-EMAIL" aria-describedby="emailHelp" placeholder="[email protected]" required>
+        <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_0363fb06e6a59d48c6e260f1b_97224b5ff2" tabindex="-1" value=""></div>
+        <button type="submit" class="p-2 btn-cyan px-4 rounded-input ml-auto col-md-2" name="subscribe" >Send</button>
+      </div>
     </div>
   </form>
 </div>

layouts/shortcodes/more-videos-button.html

@@ -1 +1 @@
-<a href="https://www.youtube.com/channel/UCoSPSd6Or4F_vpjo4SmyoEA" target="_blank" class="btn-link">More Videos<i class="ti-arrow-right"></i></a>
+<a href="https://www.youtube.com/channel/UCoSPSd6Or4F_vpjo4SmyoEA" target="_blank" class="btn btn-dark-green mt-auto">More</a>

layouts/shortcodes/summit-event-card.html

@@ -1,7 +1,6 @@
 <div style="position: relative; border: none; box-shadow: none;">
   <div
-    style="position: absolute; top: 10px; left: 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: white; background: rgba(0, 0, 0, 0.5); padding: 4px 8px; border-radius: 2px; z-index: 1;">
-    Upcoming Event</div>
+    style="position: absolute; top: 10px; left: 10px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: white; background: rgba(0, 0, 0, 0.5); padding: 4px 8px; border-radius: 2px; z-index: 1;"></div>
   <a href="/events/isc-2025/" class="event-link" target="_blank"
     style="text-decoration: none; color: inherit; display: block; border: none;">
     <img src="/images/events/Summit2025.png"

static/css/custom.css

@@ -0,0 +1,245 @@
+.bg-dark-green {
+  background-color: #077778!important;
+}
+
+.bg-darker-green {
+  background-color: #054C4D!important;
+}
+
+.bg-light-cyan {
+  background-color: #E8F4F4!important;
+}
+
+.bg-cyan {
+  background-color: #29ABA9!important;
+}
+
+.text-cyan {
+  color: #29ABA9!important;
+}
+
+.text-dark-green {
+  color: #054C4D!important;
+}
+
+.case-studies-section {
+  background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url('/images/photos/case-studies-bg.jpg'); background-size: cover; 
+  background-position: center; 
+  position: relative;
+}
+
+.home-page-top {
+  background-image:url(/images/photos/homepage-top.png); 
+  background-size: cover; 
+  background-position: center; 
+  height:100%;
+  min-height: 400px;
+  position: relative;
+  padding-bottom: 10px;
+}
+
+/* .row{
+  margin-left: 0!important;
+  margin-right: 0!important;
+} */
+
+.contact-section-rounded {
+  border-radius: 25px;
+}
+
+.rounded-item {
+  border-radius: 100px;
+}
+
+.w-50px {
+  width: 50px;
+}
+
+.newsletter-box {
+  margin-bottom: -10rem;
+}
+
+.image-under-newsletter-box{
+  margin-bottom: -7rem;
+}
+
+.rounded-input {
+  border-radius: 12px;
+}
+
+.homepage-list li {
+  list-style-image: url("/images/resources/checkmark.png");
+  list-style: none;
+  padding-left: 30px;
+  background-image: url('/images/resources/checkmark.png');
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: 20px 20px; /* Control the size here */
+  line-height: 2rem;
+  font-size: 1rem;
+}
+
+.homepage-social-icons-list-item a{
+  width: 50px!important;
+  height: 50px!important;
+  display: flex!important;
+}
+
+.homepage-social-icons-list-item a i{
+  font-size: 20px;
+  margin: auto;
+}
+
+.newsletter-input {
+  line-height: 2rem;
+}
+
+.btn-white {
+  background-color: white!important;
+  color: black;
+}
+
+.btn-dark-green {
+  background-color: #054C4D!important;
+  color: white!important;
+}
+
+.btn-cyan {
+  background-color: #29ABA9!important;
+  color: white!important;
+}
+
+.summit-box {
+  padding: 6rem!important;
+  border-radius: 40px;
+  margin-right: -6rem;
+}
+
+.carousel-container {
+  max-width: 900px;
+  width: 100%;
+  position: relative;
+}
+
+.carousel-wrapper {
+  border-radius: 20px;
+  padding: 60px;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-slides {
+  position: relative;
+  width: 100%;
+  min-height: 300px;
+}
+
+.slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+  pointer-events: none;
+}
+
+.slide h2 {
+  color: #054C4D!important;
+}
+
+.slide.active {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.slide h2 {
+  font-size: 2.5em;
+  margin-bottom: 30px;
+  line-height: 1.3;
+}
+
+.slide p {
+  line-height: 1.7;
+  color: #054C4D!important;
+}
+
+.carousel-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  margin-top: 50px;
+}
+
+.arrow {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 10px;
+  transition: transform 0.3s ease;
+}
+
+.arrow:hover {
+  transform: scale(1.2);
+}
+
+.arrow svg {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}
+
+.dots {
+  display: flex;
+  gap: 12px;
+}
+
+.dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #cbd5e0;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.dot.active {
+  background: #2d3748;
+  transform: scale(1.2);
+}
+
+.dot:hover {
+  background: #a0aec0;
+}
+
+@media (min-width: 768px) {
+  .newsletter-box-sm{
+    display: none!important;
+  }
+}
+
+
+@media (max-width: 768px) {
+  .summit-box {
+    padding: 2rem!important;
+    border-radius: 40px;
+    margin-right: auto!important;
+    margin-left: auto!important;
+  }
+  .carousel-wrapper {
+      padding: 40px 30px;
+  }
+
+  .slide h2 {
+      font-size: 1.8em;
+  }
+
+  .slide p {
+      font-size: 1em;
+  }
+  .newsletter-box {
+    display: none!important;
+  }
+}

static/js/case-studies-carousel.js

@@ -0,0 +1,42 @@
+let currentSlide = 0;
+const slides = document.querySelectorAll('.slide');
+const dots = document.querySelectorAll('.dot');
+const totalSlides = slides.length;
+
+function showSlide(index) {
+    // Remove active class from all slides and dots
+    slides.forEach(slide => slide.classList.remove('active'));
+    dots.forEach(dot => dot.classList.remove('active'));
+
+    // Add active class to current slide and dot
+    slides[index].classList.add('active');
+    dots[index].classList.add('active');
+
+    currentSlide = index;
+}
+
+function nextSlide() {
+    let next = (currentSlide + 1) % totalSlides;
+    showSlide(next);
+}
+
+function previousSlide() {
+    let prev = (currentSlide - 1 + totalSlides) % totalSlides;
+    showSlide(prev);
+}
+
+function goToSlide(index) {
+    showSlide(index);
+}
+
+// Keyboard navigation
+document.addEventListener('keydown', (e) => {
+    if (e.key === 'ArrowLeft') previousSlide();
+    if (e.key === 'ArrowRight') nextSlide();
+});
+
+// Optional: Auto-advance slides every 5 seconds
+// Uncomment the lines below to enable auto-play
+// setInterval(() => {
+//     nextSlide();
+// }, 5000);

static/plugins/youmax/youmax.css

@@ -92,13 +92,13 @@
 }
 
 .youmax-video-list-title {
-	color: #0aa8a7;
+	color: white;
 	display: inline-block;
 	padding: 15px 20px;
-  font-weight: bold;
-  font-size: 15px;
+	font-weight: bold;
+	font-size: 15px;
 	max-width: 350px;
-  height: 60px;
+ 	 height: 60px;
 	overflow: hidden;
 }
 

static/plugins/youmax/youmax.js

@@ -103,7 +103,7 @@ var youmax_global_options = {};
 
     getUploads = function() {
         let response = JSON.parse(sessionStorage.getItem("youtubeResponse"));
-        if (!(location.hostname === "localhost" || location.hostname === "127.0.0.1")){
+        // if (!(location.hostname === "localhost" || location.hostname === "127.0.0.1")){
             if(!response){
                 let channelId = youmax_global_options.youTubeChannelURL.split('/').pop();
                 var apiUploadURL = "https://www.googleapis.com/youtube/v3/search?key=" + youmax_global_options.apiKey + "&channelId="+ channelId +"&part=snippet,id&order=date&maxResults=" + youmax_global_options.maxResults;
@@ -124,7 +124,7 @@ var youmax_global_options = {};
             } else {
                 showUploads();
             }
-        }
+        // }
     },
 
     $.fn.youmax = function(options) {