Adding success stories in used_in_prod (#367)

crystal-lang · Nov 24, 2022 · 57306c3 · 57306c3
1 parent 107d361
commit 57306c3
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 26 deletions.
diff --git a/_sass/pages/_used_in_prod.scss b/_sass/pages/_used_in_prod.scss
@@ -179,3 +179,19 @@
 
   }
 }
+
+.success {
+  h1 {
+    font: normal 36px var(--sans);
+    color: var(--light-gray);
+    margin: 80px 0 30px 0;
+  }
+
+  article {
+    h2 {
+      font-size: 22px;
+      line-height: 28px;
+      margin-top: 30px;
+    }
+  }
+}
diff --git a/used_in_prod/index.html b/used_in_prod/index.html
@@ -2,41 +2,51 @@
 title: Used in production
 description: >
   <p>Companies and individuals all over the world are using Crystal in production for projects of all kinds. </p>
-  <p>Fill <a href="https://airtable.com/shrapvn1N02qwkowQ" target="_blank">this short form</a> to let us know that you are also using Crystal in production at your company or project, and we’ll add you to the list on the website.</p>
 layout: base
 css: used_in_prod
 ---
 {% include header.html header_title=page.title %}
 
 <main>
 
-  <section class="grid x6 top">
-    {% for company in site.data.used_in_production %}
-    <a href="{{company.url}}" target="_blank">
-      <picture>
-        <img src="/assets/sponsors/{{company.image}}" alt="{{company.name}}"{% if company.class %} class="{{company.class}}"{% endif %}>
-      </picture>
-      {{company.name}}
-    </a>
-    {% endfor %}
+  <section class="success">
+    <h1>Success stories</h1>
+
+    <div class="grid x3">
+      {% for story in site.categories.success_stories limit:3 %}
+      <article>
+        <a href="{{story.url}}">
+          <picture>
+            <source srcset="{{story.image}}.webp" type="image/webp">
+            <img src="{{story.image}}.jpg">
+          </picture>
+          <h2>{{story.title}}</h2>
+        </a>
+      </article>
+      {% endfor %}
+    </div>
   </section>
 
-  <section class="areas grid x2">
-
-    {% for category in site.data.used_prod_list %}
-    <article>
-      <a name="{{category.name | slugify }}" class="hex shadow uq"><span class="{{category.icon}} ico"></span></a>
-      <div>
-        <h2>{{category.name}}</h2>
-        <p>{{category.description}}</p>
-        <ul>
-          {% for company in category.companies %}
-          <li><a href="{{company.url}}" target="_blank">{{company.name}}</a>: {{company.description}}</li>
-          {% endfor %}
-        </ul>
-      </div>
-    </article>
-    {% endfor %}
+  <section class="success">
+    <h1>Companies by branch</h1>
+
+    <p>Fill <a href="https://airtable.com/shrapvn1N02qwkowQ" target="_blank">this short form</a> to let us know that you are also using Crystal in production at your company or project, and we’ll add you to the list on the website.</p>
 
+    <div class="areas grid x2">
+      {% for category in site.data.used_prod_list %}
+      <article>
+        <a name="{{category.name | slugify }}" class="hex shadow uq"><span class="{{category.icon}} ico"></span></a>
+        <div>
+          <h2>{{category.name}}</h2>
+          <p>{{category.description}}</p>
+          <ul>
+            {% for company in category.companies %}
+            <li><a href="{{company.url}}" target="_blank">{{company.name}}</a>: {{company.description}}</li>
+            {% endfor %}
+          </ul>
+        </div>
+      </article>
+      {% endfor %}
+    </div>
   </section>
 </main>