Add images to landing page

Author: phughk

assets/scss/rapidrecast/_helper_classes.scss

@@ -7,4 +7,30 @@
 
 .logo-font {
   font-family: var(--rr-font-header), serif;
-}
+}
+
+[data-bs-theme=dark] .dark-mode {
+  display: inherit;
+}
+
+[data-bs-theme=light] .dark-mode {
+  display: none;
+}
+
+[data-bs-theme=dark] .light-mode {
+  display: none;
+}
+
+[data-bs-theme=light] .light-mode {
+  display: inherit;
+}
+
+// TODO change this to theme colours
+.svg-white {
+  fill: white;
+  filter: invert(1);
+}
+
+.svg-black {
+  fill: black;
+}

layouts/partials/landing/section-protocols.html

@@ -4,7 +4,8 @@ <h1 class="rapid-gradient-text">Streaming, as you like it</h1>
         <p>
             Different teams, different tools, different preferences. When it comes to streaming, convenience means something unique to everyone:
         </p>
-        <img class="d-inline-block" src="{{ "graphics/landing/RapidRecast-protocols.svg" | relURL }}" style="width: 400px;"/>
+        <img class="img-fluid float-end me-3 light-mode" src="{{ "graphics/landing/RapidRecast-protocols.svg" | relURL }}" style="width: 400px;"/>
+        <img class="img-fluid float-end me-3 dark-mode" src="{{ "graphics/landing/RapidRecast-protocols-dark.svg" | relURL }}" style="width: 400px;"/>
 
         <ul>
             <li>Your frontend team thrives with <span class="rapid-gradient-text">WebSockets</span> or <span class="rapid-gradient-text">HTTP 2 resource streams</span>.</li>

layouts/partials/landing/section-request-batching.html

@@ -6,6 +6,8 @@ <h1 class="rapid-gradient-text">Request Batching</h1>
             While manageable individually, a surge of such requests can quickly create a backlog, straining your system until it scales out.
             This not only delays responses but also drives up operational costs as you add more replicas to handle the load.
         </p>
+        <img class="img-fluid float-end me-3 light-mode" src="{{ "graphics/landing/RapidRecast-Batch-Request.svg" | relURL }}" style="width: 400px;"/>
+        <img class="img-fluid float-end me-3 dark-mode" src="{{ "graphics/landing/RapidRecast-Batch-Request-dark.svg" | relURL }}" style="width: 400px;"/>
         <p>
             By batching similar requests, you can process them in bulk, dramatically improving system throughput without the need for additional infrastructure.
             RapidRecast makes this effortless by allowing you to assign requests to specific channels and consume responses directly from them.

layouts/partials/landing/section-rust.html

@@ -5,6 +5,9 @@ <h1 class="rapid-gradient-text">Rust all the way</h1>
             Rust is a systems programming language renowned for its exceptional performance and unparalleled safety guarantees.
             Its innovative design enables developers to write fast, reliable software without compromising on security or correctness.
         </p>
+        <!--        THE DIMENSIONS ARE DIFFERENT HERE-->
+        <img class="img-fluid float-start me-3 light-mode svg-black" src="{{ "svgs/rust-svgrepo-com.svg" | relURL }}" style="width: 300px;"/>
+        <img class="img-fluid float-start me-3 dark-mode svg-white" src="{{ "svgs/rust-svgrepo-com.svg" | relURL }}" style="width: 300px;"/>
         <p>
             One of Rust’s standout features is "fearless concurrency" — a result of its strict language constraints that prevent common pitfalls in concurrent programming.
             These constraints ensure safe access to shared data, significantly reducing the risk of bugs in multi-threaded applications.

layouts/partials/landing/section-scalability.html

@@ -5,6 +5,8 @@ <h1 class="rapid-gradient-text">Scalability</h1>
             Most existing streaming systems expect you to manage intricate settings like partitions, regions, and replication levels.
             They assume you not only understand these controls but can configure them perfectly to ensure optimal replication, region affinity, and partitioning for your workloads.
         </p>
+        <img class="img-fluid float-start me-3 light-mode" src="{{ "graphics/landing/RapidRecast-Scale.svg" | relURL }}" style="width: 400px;"/>
+        <img class="img-fluid float-start me-3 dark-mode" src="{{ "graphics/landing/RapidRecast-Scale-dark.svg" | relURL }}" style="width: 400px;"/>
 
         <p>
             But isn’t this approach counterintuitive?
@@ -17,6 +19,12 @@ <h1 class="rapid-gradient-text">Scalability</h1>
             From there, RapidRecast intelligently manages the rest, including partitioning, region distribution, and load balancing.
         </p>
 
+        <p>
+            Beyond these optimizations, RapidRecast is cluster-aware, dynamically routing traffic to the appropriate nodes and handling potential redirections seamlessly.
+            This ensures your workloads are consumed efficiently, even in complex distributed environments.
+            Whether it's balancing traffic across clusters or redirecting requests for optimized processing, RapidRecast adapts to your infrastructure in real-time.
+        </p>
+
         <p>
             By leveraging advancements in data systems research, RapidRecast adopts an opinionated approach to ensure your workloads are handled with precision and efficiency.
             The result?

layouts/partials/landing/section-server-client.html

@@ -5,6 +5,8 @@ <h1 class="rapid-gradient-text">Server and Client Capabilities</h1>
             When you make a request, you’re initiating an action — pushing data or triggering a response.
             But as the one handling those requests, isn’t it frustrating to keep a live connection open just to receive inbound messages?
         </p>
+        <img class="img-fluid float-start me-3 light-mode" src="{{ "graphics/landing/RapidRecast-Client-Server.svg" | relURL }}" style="width: 400px;"/>
+        <img class="img-fluid float-start me-3 dark-mode" src="{{ "graphics/landing/RapidRecast-Client-Server-dark.svg" | relURL }}" style="width: 400px;"/>
         <p>
             Traditional streaming APIs tie you to this model, forcing you to constantly manage live connections or repeatedly initialize requests by connecting to the service.
             It’s cumbersome and limits your flexibility.

layouts/partials/landing/section-stability.html

@@ -4,6 +4,8 @@ <h1 class="rapid-gradient-text">Stability</h1>
         <p>
             At RapidRecast, stability isn’t an afterthought — it’s a core feature. We adopt the same rigorous methodologies trusted by database providers to ensure the system remains reliable and behaves predictably, even under heavy workloads.
         </p>
+        <img class="img-fluid float-start me-3 light-mode" src="{{ "graphics/landing/RapidRecast-Stability.svg" | relURL }}" style="width: 500px;"/>
+        <img class="img-fluid float-start me-3 dark-mode" src="{{ "graphics/landing/RapidRecast-Stability-dark.svg" | relURL }}" style="width: 500px;"/>
 
         <p>
             To uphold data correctness guarantees, we run Jepsen tests on the live product, ensuring that consistency and reliability are never compromised.

layouts/partials/landing/section-sync-async.html

@@ -5,7 +5,8 @@ <h1 class="rapid-gradient-text">Synchronous or Asynchronous</h1>
             Synchronous requests are straightforward: you send a request and get a response quickly.
             It’s simple, intuitive, and easy to work with.
         </p>
-
+        <img class="img-fluid float-end me-3 light-mode" src="{{ "graphics/landing/RapidRecast-Sync-Async.svg" | relURL }}" style="width: 400px;"/>
+        <img class="img-fluid float-end me-3 dark-mode" src="{{ "graphics/landing/RapidRecast-Sync-Async-dark.svg" | relURL }}" style="width: 400px;"/>
         <p>
             But what happens when a request takes too long to process?
             If the server is tied up handling it, resources can quickly become bottlenecks.

layouts/partials/landing/section-zero-integration.html

@@ -7,6 +7,8 @@ <h1 class="rapid-gradient-text">Near-zero Integration</h1>
             Instead, it lets you leverage the tools and code you already use.
             Whether it’s your frontend, backend, infrastructure, or customer-facing applications, you’ll hardly need to make any changes to start interacting with RapidRecast.
         </p>
+        <img class="img-fluid float-end me-3 light-mode" src="{{ "graphics/landing/RapidRecast-Zero-Integration.svg" | relURL }}" style="width: 500px;"/>
+        <img class="img-fluid float-end me-3 dark-mode" src="{{ "graphics/landing/RapidRecast-Zero-Integration-dark.svg" | relURL }}" style="width: 500px;"/>
 
         <p>
             At the heart of this simplicity is RecastLang — a powerful and versatile language that drives RapidRecast.