ENG-9201: Customer pages update

.github/workflows/codespell.yml

@@ -13,6 +13,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
       - name: Codespell
         uses: codespell-project/actions-codespell@v2

.github/workflows/deploy-dev.yml

@@ -24,12 +24,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
         with:
           submodules: recursive
 
       - name: Install the latest version of uv
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           python-version: "3.12"
           activate-environment: true

.github/workflows/deploy-prd.yml

@@ -22,12 +22,12 @@ jobs:
     environment: production
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
         with:
           submodules: recursive
 
       - name: Install the latest version of uv
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           python-version: "3.12"
           activate-environment: true

.github/workflows/deploy-stg.yml

@@ -24,12 +24,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v6
         with:
           submodules: recursive
 
       - name: Install the latest version of uv
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           python-version: "3.12"
           activate-environment: true

.github/workflows/integration_tests.yml

@@ -25,12 +25,12 @@ jobs:
   reflex-web:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           submodules: recursive
 
       - name: Install the latest version of uv
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           python-version: "3.11"
           activate-environment: true

.github/workflows/pre-commit.yml

@@ -15,9 +15,9 @@ jobs:
     timeout-minutes: 30
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Install UV
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           python-version: "3.12"
           activate-environment: true

.github/workflows/unit_tests.yml

@@ -37,12 +37,12 @@ jobs:
         python-version: ["3.11", "3.12"]
     runs-on: ${{ matrix.os }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
         with:
           submodules: recursive
 
       - name: Install the latest version of uv
-        uses: astral-sh/setup-uv@v6
+        uses: astral-sh/setup-uv@v7
         with:
           python-version: ${{ matrix.python-version }}
           activate-environment: true
@@ -81,7 +81,7 @@ jobs:
 
       - name: Upload test failure videos
         if: failure()
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v7
         with:
           name: playwright-videos-${{ matrix.os }}-${{ matrix.python-version }}
           path: test-videos/

.github/workflows/whitelist.yml

@@ -10,6 +10,6 @@ jobs:
   reflex-web:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v6
       - name: Assert whitelist is empty
         run: echo -e "\nassert not WHITELISTED_PAGES, f'WHITELISTED_PAGES includes {WHITELISTED_PAGES}'" | cat "pcweb/whitelist.py" - | python3

assets/custom-colors.css

@@ -15,6 +15,30 @@
   --c-slate-10: #80838D;
   --c-slate-11: #60646C;
   --c-slate-12: #1C2024;
+  --slate-1: #FBFCFE;
+  --slate-2: #F7FAFD;
+  --slate-3: #EDF1F6;
+  --slate-4: #E4E9F1;
+  --slate-5: #DBE1EB;
+  --slate-6: #D3DAE6;
+  --slate-7: #C7D0DE;
+  --slate-8: #B1BDCF;
+  --slate-9: #838FA1;
+  --slate-10: #798495;
+  --slate-11: #5C6573;
+  --slate-12: #1B212A;
+  --slate-a1: #0040c004;
+  --slate-a2: #0040c008;
+  --slate-a3: #00398e12;
+  --slate-a4: #0037801c;
+  --slate-a5: #00327924;
+  --slate-a6: #002e772d;
+  --slate-a7: #002d7039;
+  --slate-a8: #0028634e;
+  --slate-a9: #00193c7c;
+  --slate-a10: #00153686;
+  --slate-a11: #001027a4;
+  --slate-a12: #000711e5;
   /* Violet */
   --c-violet-1: #FDFCFE;
   --c-violet-2: #FAFBFF;
@@ -72,6 +96,18 @@
 .dark,
 .dark-theme {
   /* Slate */
+  --slate-1: #141619;
+  --slate-2: #1B1D20;
+  --slate-3: #22252A;
+  --slate-4: #282B31;
+  --slate-5: #2E3238;
+  --slate-6: #353A42;
+  --slate-7: #414852;
+  --slate-8: #58616F;
+  --slate-9: #656E7D;
+  --slate-10: #737C8A;
+  --slate-11: #ADB4BF;
+  --slate-12: #ECEEF1;
   /* #151618 */
   --c-slate-2: #1A1B1D;
   /* #1A1B1D */
@@ -115,7 +151,7 @@
   --c-red-9: #E5484D;
   --c-red-10: #DC3E42;
   /* White */
-  --c-white-1: #0E0F10;
+  --c-white-1: #1B1D20;
   --glow: #261958;
   --wave-line-1: #2F1C78;
   --wave-line-2: #261958;

case-studies/ansa.md

@@ -1,6 +1,8 @@
 ---
 company: Ansa
 h1: "How Ansa Uses Reflex for AI-Powered Workflow Automation"
+card_header: "How Ansa saved 100 hours of manual work a month with Reflex"
+card_description: "See how Ansa automated their fintech workflows with Reflex, eliminating 100 hours of repetitive manual work per month and accelerating their operations."
 description: "Why Ansa chose Reflex over no-code and low-code frameworks for their workflow automations. Full Python control for AI-powered business process automation."
 domain: "https://www.ansa.co"
 founded: "New York, 2021"
@@ -42,15 +44,11 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
+from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
 
 ```python eval
-rx.vstack(
-    image_zoom(rx.image(src=f"{REFLEX_ASSETS_CDN}case_studies/ansa_app.webp", border_radius="10px", alt="Ansa App")),
-    rx.text("Ansa App built with Reflex"),
-    width="100%",
-)
+app_preview_card(f"{REFLEX_ASSETS_CDN}case_studies/ansa_app.webp", text="Ansa App built with Reflex")
 ```
 
 Meet [Ansa](https://www.ansa.co), a venture capital firm based in New York City that invests in companies from Series A to C. They have invested in companies like Defense Unicorns, Bland, Gradient, and Selector and prior to founding the firm, supported investments in many of the venture-capital industry’s largest outcomes including Crowdstrike, Coinbase, and SurveyMonkey to name a few.
@@ -144,7 +142,8 @@ Finally, when their team has a short list of companies that fit within an invest
 ```md quote
 - name: Ryan
 - role: Investor and Head of Data
-Let’s say we have 30 companies that we want to email. How can you efficiently send a custom note to each of these companies and track it properly? We launch a script, that runs through a Reflex background event, that'll go through each company, check the CRM ownership, fill out relevant fields and find the best person to reach out to. A lot of times, especially with early stage companies, data is missing or partially complete. So this workflow will leverage LLMs throughout the process to handle fuzzy matching and make contextual decisions, as well as proactively summarize company content, news, and relevant Ansa content to help support the email writing. Before we would do this all manually, now with this new workflow in Reflex, we've taken what was once 30+ clicks across 5 different apps and made it 5x faster with 2 clicks across 2 apps.
+- variant: medium
+Let’s say we have 30 companies that we want to email. How can you efficiently send a custom note to each of these companies and track it properly? We launch a script, that runs through a Reflex background event, that’ll go through each company, check the CRM ownership, fill out relevant fields and find the best person to reach out to. A lot of times, especially with early stage companies, data is missing or partially complete. So this workflow will leverage LLMs throughout the process to handle fuzzy matching and make contextual decisions, as well as proactively summarize company content, news, and relevant Ansa content to help support the email writing. Before we would do this all manually, now with this new workflow in Reflex, we’ve taken what was once 30+ clicks across 5 different apps and made it 5x faster with 2 clicks across 2 apps.
 ```
 
 All these different workflows are now built into a single Reflex app. It makes it extremely easy for anyone on the team to run any of these workflows and leverage LLM-powered automation with a few clicks.

case-studies/autodesk.md

@@ -1,5 +1,7 @@
 ---
 company: Autodesk
+card_header: "How Autodesk saved 25% of their development time"
+card_description: "Learn how Autodesk leveraged Reflex to streamline their internal tools development, cutting build time by 25% while maintaining enterprise-grade reliability."
 description: "Streamlining Complex Workflows: Why Autodesk Chose Reflex Over Streamlit for Scalable, Python-Based Solutions"
 domain: "https://autodesk.com"
 founded: "San Francisco, 1982"
@@ -46,17 +48,12 @@ meta: [
 ```python exec
 import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
-from reflex_image_zoom import image_zoom
-from pcweb.pages.docs import library
+from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
 
-<!-- ```python eval
-rx.vstack(
-    image_zoom(rx.image(src=f"{REFLEX_ASSETS_CDN}case_studies/bayesline_app.webp", border_radius="10px", alt="Bayesline App")),
-    rx.text("Bayesline App built with Reflex"),
-    width="100%",
-)
-``` -->
+```python eval
+app_preview_card(f"{REFLEX_ASSETS_CDN}case_studies/apps/case_studies_autodesk_app.webp", text="Autodesk App built with Reflex")
+```
 
 
 Meet Autodesk a globally recognized leader in design and engineering software, known for its innovative solutions that empower professionals across industries to bring their creative visions to life. Autodesk has established itself as a trusted partner for millions of users worldwide, helping them achieve greater efficiency, precision, and creativity in their projects.
@@ -130,6 +127,7 @@ The team was able to:
 ```md quote
 - name: Paolo
 - role: Principal Implementation Consultant
+- variant: medium
 I am able to wear all the caps at once: Solution Architecture, UI/UX, front-end and back-end.
 ```
 
@@ -183,5 +181,6 @@ Paolo and his team have now worked on three other projects for different custome
 ```md quote
 - name: Paolo
 - role: Principal Implementation Consultant
+- variant: medium
 Everything I was able to accomplish was because of the framework and unparalleled support and promptness of the Reflex team.
 ```

case-studies/bayesline.md

@@ -1,5 +1,7 @@
 ---
 company: Bayesline
+card_header: "Why Bayesline chose Reflex over Plotly Dash"
+card_description: "Discover how Bayesline built a robust Python web application aimed at creating scalable risk models and data visualizations."
 description: "Why Bayesline chose Reflex over Plotly Dash for their production-grade Python web app. Learn how they built scalable risk models and data visualizations."
 domain: "https://bayesline.com/"
 founded: "New York, 2024"
@@ -46,14 +48,11 @@ import reflex as rx
 from pcweb.constants import REFLEX_ASSETS_CDN
 from reflex_image_zoom import image_zoom
 from pcweb.pages.docs import enterprise
+from pcweb.pages.customers.views.app_preview_card import app_preview_card
 ```
 
 ```python eval
-rx.vstack(
-    image_zoom(rx.image(src=f"{REFLEX_ASSETS_CDN}case_studies/bayesline_app.webp", border_radius="10px", alt="Bayesline App")),
-    rx.text("Bayesline App built with Reflex"),
-    width="100%",
-)
+app_preview_card(f"{REFLEX_ASSETS_CDN}case_studies/bayesline_app.webp", text="Bayesline App built with Reflex")
 ```
 
 ## What Bayesline is building
@@ -70,25 +69,30 @@ Quantitative Analysts (Quants), like Sebastian, are usually proficient in data-o
 Quants want to spend their time building models, proving out their ideas, and not worrying about the UI.
 
 ```md quote
-- name: Sebastian
-- role: Cofounder
+- name: Sebastian Janisch
+- role: Cofounder, Bayesline
+- image: sebastian.webp
 The UI is the necessary evil, that is not our bread and butter.
 ```
 
 They used to build prototypes with Dash and eventually hand them to a fully-fledged engineering team.
 It would take months before their app ideas could be used across an organization; with Reflex you can both build and share apps in a matter of hours (`reflex deploy`).
 
 ```md quote
-- name: Sebastian
-- role: Cofounder
+- name: Sebastian Janisch
+- role: Cofounder, Bayesline
+- image: sebastian.webp
+- variant: medium
 You wouldn’t want to use Dash to build a production-grade application. It’s a prototyping tool. Usually, a UX and engineering team would re-implement everything from scratch. It will take six months for anyone to get hands on it, but we want this now.
 ```
 
 When embarking on building Bayesline, Sebastian and his co-founder wanted an open-source framework that would enable them to build a fully-fledged web app in pure Python, the language and ecosystem they were already familiar with.
 
 ```md quote
-- name: Sebastian
-- role: Cofounder
+- name: Sebastian Janisch
+- role: Cofounder, Bayesline
+- image: sebastian.webp
+- variant: medium
 So we basically need the tool that gets us to the finish line fastest without having to learn (a new framework) and without a super steep learning curve.
 ```
 
@@ -97,7 +101,9 @@ As their app grew, it eventually became slow and difficult to maintain.
 
 ```md quote
 - name: Sebastian
-- role: Cofounder
+- role: Cofounder, Bayesline
+- image: sebastian.webp
+- variant: medium
 The app was just getting painfully slow. Dash loads the entire application, the entire dom of every single page. As the application gets bigger, the performance will just go down.
 ```
 
@@ -106,16 +112,20 @@ The app was just getting painfully slow. Dash loads the entire application, the
 Bayesline switched from Dash to Reflex because they could build both a production-grade and an aesthetically pleasing web app quickly–without JavaScript experience.
 
 ```md quote
-- name: Sebastian
-- role: Cofounder
+- name: Sebastian Janisch
+- role: Cofounder, Bayesline
+- image: sebastian.webp
+- variant: medium
 We wanted to build a frontend that would be as indistinguishable as possible from one built by professional frontend developers.
 ```
 
 Complicated Dash apps not only eventually hit performance limits but are also challenging to maintain since there isn’t first-class support for object-oriented programming (OOP) design patterns.
 
 ```md quote
-- name: Sebastian
-- role: Cofounder
+- name: Sebastian Janisch
+- role: Cofounder, Bayesline
+- image: sebastian.webp
+- variant: medium
 When we started looking at the (Dash) code, it just got to this point where you’re scared of it because there is no object-oriented notion; the code just turns into an enormous mess because you just have this huge collection of functions.
 ```
 
@@ -128,8 +138,10 @@ Sebastian and the team originally started building with Reflex to create a minim
 They quickly learned that Reflex was already ready to build production grade web apps.
 
 ```md quote
-- name: Sebastian
-- role: Cofounder
+- name: Sebastian Janisch
+- role: Cofounder, Bayesline
+- image: sebastian.webp
+- variant: medium
 Turns out I don’t see right now, as it stands at least, reasons to migrate from Reflex to somewhere else.
 ```
 
@@ -143,23 +155,29 @@ Sebastian and his small team use Reflex to build a production-grade web app pure
 * Learn frontend technologies: React (JavaScript), NodeJS, TailwindCSS
 
 ```md quote
-- name: Misha and Sebastian
-- role: Cofounders
+- name: Misha Van Beek
+- role: Cofounder, Bayesline
+- image: misha.webp
+- variant: big
 Reflex definitely saved us from needing to hire a frontend engineer and sped us up by 4x relative to learning React
 ```
 
 * Write boilerplate to stitch together their frontend and backend (including database management)
 
 ```md quote
-- name: Sebastian
-- role: Cofounder
+- name: Sebastian Janisch
+- role: Cofounder, Bayesline
+- image: sebastian.webp
+- variant: big
 50% less code than the same Dash app and easier to read / write / maintain code compared to Dash
 ```
 
 * Maintain expensive, fragile, and inevitably slow Dash apps
 
 ```md quote
-- name: Misha
-- role: Cofounder
+- name: Misha Van Beek
+- role: Cofounder, Bayesline
+- image: misha.webp
+- variant: big
 Using Reflex instead of Plotly Dash was like the difference between organized Legos and a plate of spaghetti
 ```