Sarah/carousel fixes (#12477)

* add single-row version of carousel to homepage with hoverable links * fix logos to scroll from middle * make the initial middle carousel animation not repeat
pulumi · Aug 8, 2024 · 49f0b30 · 49f0b30
1 parent ed0f0f8
commit 49f0b30
Show file tree

Hide file tree

Showing 6 changed files with 284 additions and 84 deletions.
diff --git a/assets/css/bundle.css b/assets/css/bundle.css
@@ -20550,17 +20550,23 @@ body.section-workshop-signup .header-btn-primary::after:focus{
   height:240px
 }
 
-.stacked-carousel-container .carousel-left-primary,.stacked-carousel-container .carousel-left-secondary{
+.stacked-carousel-container .carousel-left-initial,.stacked-carousel-container .carousel-left-primary,.stacked-carousel-container .carousel-left-secondary{
   left:100%;
   width:100%;
   overflow:hidden;
   position:absolute;
-  white-space:nowrap
+  white-space:nowrap;
+  display:flex;
+  justify-content:space-around
+}
+
+.stacked-carousel-container .carousel-left-initial{
+  left:0;
+  animation:scroll-horizontal-middle 20s linear;
+  animation-fill-mode:forwards
 }
 
 .stacked-carousel-container .carousel-left-primary{
-  display:flex;
-  justify-content:space-around;
   animation:scroll-horizontal 40s linear infinite
 }
 
@@ -20569,17 +20575,23 @@ body.section-workshop-signup .header-btn-primary::after:focus{
   animation-delay:20s
 }
 
-.stacked-carousel-container .carousel-right-primary,.stacked-carousel-container .carousel-right-secondary{
+.stacked-carousel-container .carousel-right-initial,.stacked-carousel-container .carousel-right-primary,.stacked-carousel-container .carousel-right-secondary{
   left:-100%;
   width:100%;
   overflow:hidden;
   position:absolute;
-  white-space:nowrap
+  white-space:nowrap;
+  display:flex;
+  justify-content:space-around
+}
+
+.stacked-carousel-container .carousel-right-initial{
+  left:0;
+  animation:scroll-horizontal-reverse-middle 20s linear;
+  animation-fill-mode:forwards
 }
 
 .stacked-carousel-container .carousel-right-primary{
-  display:flex;
-  justify-content:space-around;
   animation:scroll-horizontal-reverse 40s linear infinite
 }
 
@@ -20598,6 +20610,16 @@ body.section-workshop-signup .header-btn-primary::after:focus{
   }
 }
 
+@keyframes scroll-horizontal-middle{
+  0%{
+    left:0
+  }
+
+  100%{
+    left:-100%
+  }
+}
+
 @keyframes scroll-horizontal-reverse{
   0%{
     left:-100%
@@ -20608,6 +20630,59 @@ body.section-workshop-signup .header-btn-primary::after:focus{
   }
 }
 
+@keyframes scroll-horizontal-reverse-middle{
+  0%{
+    left:0
+  }
+
+  100%{
+    left:100%
+  }
+}
+
+.stacked-carousel-container-single{
+  height:80px
+}
+
+.stacked-carousel-container-single .carousel-left-primary,.stacked-carousel-container-single .carousel-left-secondary{
+  width:300%;
+  overflow:hidden;
+  position:absolute;
+  white-space:nowrap;
+  display:flex;
+  justify-content:space-around
+}
+
+.stacked-carousel-container-single .carousel-left-primary{
+  left:0;
+  animation:single-scroll-horizontal-middle 30s linear infinite
+}
+
+.stacked-carousel-container-single .carousel-left-secondary{
+  left:300%;
+  animation:single-scroll-horizontal 30s linear infinite
+}
+
+@keyframes single-scroll-horizontal{
+  0%{
+    left:300%
+  }
+
+  100%{
+    left:0%
+  }
+}
+
+@keyframes single-scroll-horizontal-middle{
+  0%{
+    left:0
+  }
+
+  100%{
+    left:-300%
+  }
+}
+
 a.pulumi-ai-badge{
   display:inline-block
 }

diff --git a/content/_index.md b/content/_index.md
@@ -47,37 +47,69 @@ customer_logos:
   title: Trusted by 2,700+ cloud innovators
   logos:
     - name: bmw
+      link: /case-studies/
     - name: snowflake
+      link: /case-studies/
     - name: nvidia
+      link: /case-studies/
     - name: moderna
+      link: /case-studies/
     - name: docker
+      link: /case-studies/
     - name: unity
+      link: /case-studies/
     - name: rockstar
+      link: /case-studies/
     - name: deloitte
+      link: /case-studies/
     - name: crunchyroll
+      link: /case-studies/
     - name: xai
+      link: /case-studies/
     - name: stokespace
+      link: /case-studies/
     - name: univision
+      link: /case-studies/
     - name: wmg
+      link: /case-studies/
     - name: washington-trust
+      link: /case-studies/
     - name: lemonade
+      link: /case-studies/
     - name: pinecone
+      link: /case-studies/
     - name: ware2go
+      link: /case-studies/
     - name: nubank
+      link: /case-studies/
     - name: mindbody
+      link: /case-studies/
     - name: fenergo
+      link: /case-studies/
     - name: webflow
+      link: /case-studies/
     - name: bluenile
+      link: /case-studies/
     - name: dutchie
+      link: /case-studies/
     - name: panther-labs
+      link: /case-studies/
     - name: materialize
+      link: /case-studies/
     - name: altana
+      link: /case-studies/
     - name: mercedes-benz
+      link: /case-studies/
     - name: bt
+      link: /case-studies/
     - name: portx
+      link: /case-studies/
     - name: tivityhealth
+      link: /case-studies/
     - name: starburst
+      link: /case-studies/
     - name: linktree
+      link: /case-studies/
 
 customer_quotes:
   panther:

diff --git a/layouts/index.html b/layouts/index.html
@@ -29,37 +29,8 @@ <h1 class="flex flex-col items-center">
     <!-- Logos carousel -->
     <section class="container mx-auto text-center overflow-hidden px-3 mt-6">
         <h3 class="text-center mb-4">{{ .Params.customer_logos.title }}</h3>
-
-        <div class="w-full order-first pb-16 items-center justify-center hidden lg:block">
-            <pulumi-swiper slides="6" centered-slides="true" loop="true" autoplay="true" autoplay-delay="500" speed="2000">
-                {{ range $logo := .Params.customer_logos.logos }}
-                    <pulumi-swipeable>
-                        <div class="p-6 flex flex-col flex-grow items-end h-24 justify-center">
-                            <a href="/case-studies">
-                                {{ partial "customer-logo.html" (dict "logo" $logo.name "hoverable" true) }}
-                            </a>
-                        </div>
-                    </pulumi-swipeable>
-                {{ end }}
-            </pulumi-swiper>
-        </div>
-
-        <div class="w-full order-first pb-16 items-center justify-center block lg:hidden">
-            <pulumi-swiper slides="3" centered-slides="true" loop="true" autoplay="true" autoplay-delay="500" speed="2000">
-                {{ range $logo := .Params.customer_logos.logos }}
-                    <pulumi-swipeable>
-                        <div class="p-6 flex flex-col flex-grow items-end h-24 justify-center">
-                            {{ if $logo.link }}
-                                <a class="w-full h-full" href="{{ $logo.link }}" target="_blank">
-                                    {{ partial "customer-logo.html" (dict "logo" $logo.name "hoverable" true) }}
-                                </a>
-                            {{ else }}
-                                {{ partial "customer-logo.html" (dict "logo" $logo.name "hoverable" true) }}
-                            {{ end }}
-                        </div>
-                    </pulumi-swipeable>
-                {{ end }}
-            </pulumi-swiper>
+        <div class="my-12">
+            {{ partial "stacked-carousel.html" (dict "logos" .Params.customer_logos.logos "single_row" true "gray_hover" true ) }}
         </div>
     </section>
 

diff --git a/layouts/partials/customer-logo.html b/layouts/partials/customer-logo.html
@@ -1,7 +1,7 @@
 {{ $logoClass := "customer-logo" }}
 {{ if eq .black true }}
     {{ $logoClass = "customer-logo-black" }}
-{{ else if eq .hoverable true }}
+{{ else if .hoverable }}
     {{ $logoClass = "customer-logo-hoverable" }}
 {{ end }}
 

diff --git a/layouts/partials/stacked-carousel.html b/layouts/partials/stacked-carousel.html
@@ -1,48 +1,95 @@
 <!--
+Can be 1 row scrolling left, or 3 rows scrolling left/right offset
 3 rows of customer logos carousel - data looks like
     logos:
         - name: name1
+          link: (optional)
         - name: name2
+          link: (optional)
         - name: name3
+          link: (optional)
         ...
--->
-
-<!-- divide the list into thirds to make the 3 rows -->
-{{ $length := .logos | len }}
-{{ $row_size := div $length 3 }}
-{{ $first_row := first $row_size .logos }}
-{{ $second_row := first $row_size (after $row_size .logos) }}
-{{ $third_row := after (mul 2 $row_size) .logos }}
 
-<div class="hidden md:block stacked-carousel-container relative mx-auto">
-    <div class="carousel-left-primary">
-        {{ range $first_row }}
-            <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
-        {{ end }}
-    </div>
-    <div class="carousel-left-primary carousel-left-secondary">
-        {{ range $first_row }}
-            <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
-        {{ end }}
-    </div>
-    <div class="carousel-right-primary top-20">
-        {{ range $second_row }}
-            <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
-        {{ end }}
-    </div>
-    <div class="carousel-right-primary carousel-right-secondary top-20">
-        {{ range $second_row }}
-            <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
-        {{ end }}
-    </div>
-    <div class="carousel-left-primary top-40">
-        {{ range $third_row }}
-            <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
-        {{ end }}
+optional flags:
+    single_row: makes the carousel just one row, with gray hover behavior and (optional) links
+-->
+{{ if .single_row }}
+    <div class="hidden md:block stacked-carousel-container stacked-carousel-container-single relative mx-auto">
+        <div class="carousel-left-primary">
+            {{ range .logos }}
+                {{ if .link }}
+                    <a href="{{ .link }}">
+                        <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                    </a>
+                {{ else }}
+                    <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                {{ end }}
+            {{ end }}
+        </div>
+        <div class="carousel-left-primary carousel-left-secondary">
+            {{ range .logos }}
+                {{ if .link }}
+                    <a href="{{ .link }}">
+                        <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                    </a>
+                {{ else }}
+                    <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name "hoverable" true) }}</div>
+                {{ end }}
+            {{ end }}
+        </div>
     </div>
-    <div class="carousel-left-primary carousel-left-secondary top-40">
-        {{ range $third_row }}
-            <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
-        {{ end }}
+{{ else }}
+    <!-- divide the list into thirds to make the 3 rows -->
+    {{ $length := .logos | len }}
+    {{ $row_size := div $length 3 }}
+    {{ $first_row := first $row_size .logos }}
+    {{ $second_row := first $row_size (after $row_size .logos) }}
+    {{ $third_row := after (mul 2 $row_size) .logos }}
+    <div class="hidden md:block stacked-carousel-container relative mx-auto">
+        <div class="carousel-left-initial">
+            {{ range $first_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-left-primary">
+            {{ range $first_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-left-primary carousel-left-secondary">
+            {{ range $first_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-right-initial top-20">
+            {{ range $second_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-right-primary top-20">
+            {{ range $second_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-right-primary carousel-right-secondary top-20">
+            {{ range $second_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-left-initial top-40">
+            {{ range $third_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-left-primary top-40">
+            {{ range $third_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
+        <div class="carousel-left-primary carousel-left-secondary top-40">
+            {{ range $third_row }}
+                <div class="w-24 h-12 m-4">{{ partial "customer-logo.html" (dict "logo" .name) }}</div>
+            {{ end }}
+        </div>
     </div>
-</div>
+{{ end }}