Merge pull request #58 from bzr-sys/diagrams

Add BaaS architecture comparison diagrams

src/components/AnyFramework.astro

@@ -7,7 +7,7 @@ import VueSVG from "./VueSVG.astro";
 
 <div class="px-4 py-28">
   <h2 class="pb-4 text-center text-4xl font-bold">
-    Use with your Framework of choice
+    Use with your Framework of Choice
   </h2>
   <div
     class="mx-auto grid max-w-screen-2xl gap-4 px-4 py-8 md:grid-cols-2 lg:grid-cols-3"

src/components/Diagrams.astro

@@ -0,0 +1,44 @@
+---
+import { Image } from "astro:assets";
+import architectureTraditionalImage from "../images/architecture-traditional.png";
+import architectureBazaarImage from "../images/architecture-bazaar.png";
+---
+
+<div class="px-4 pt-20">
+  <h2 class="pb-12 text-center text-4xl font-bold">Not your typical BaaS</h2>
+
+  <div
+    class="mx-auto grid max-w-screen-sm gap-12 lg:max-w-screen-lg lg:grid-cols-2"
+  >
+    <div class="card bg-base-200 p-8 text-center">
+      <h3 class="text-2xl font-bold">Traditional BaaS</h3>
+      <p class="pb-8 opacity-60">
+        The developer is responsible for the whole app: frontend, compute, and
+        database
+      </p>
+      <Image
+        class="mx-auto max-w-[273px]"
+        src={architectureTraditionalImage}
+        alt="Architecture diagram of a traditional Backend-as-a-service where the developer manages the database, compute, and frontend"
+      />
+    </div>
+    <div class="card bg-base-200 p-8 text-center">
+      <h3 class="text-2xl font-bold">Bazaar</h3>
+      <p class="pb-8 opacity-60">
+        The developer is only responsible for the frontend. Users have their own
+        compute and database
+      </p>
+      <Image
+        class="mx-auto max-w-[424px]"
+        src={architectureBazaarImage}
+        alt="Architecture diagram of the Bazaar Backend-as-a-service where the developer manages the frontend, and users get their own database and compute"
+      />
+    </div>
+  </div>
+  <p class="prose mx-auto pt-12 text-center">
+    With Bazaar, developers can create freely, without having to worry about
+    running costs. That's because users pay for the resources they need,
+    starting with a free plan, including compute and database resources, and can
+    upgrade for larger capacity as needed.
+  </p>
+</div>

src/pages/index.astro

@@ -5,11 +5,13 @@ import HomeFeatures from "../components/HomeFeatures.astro";
 import AnyFramework from "../components/AnyFramework.astro";
 import BuiltWith from "../components/BuiltWith.astro";
 import HomeGetStarted from "../components/HomeGetStarted.astro";
+import Diagrams from "../components/Diagrams.astro";
 ---
 
 <BaseLayout title="Bazaar: Build With Ease, Run Cost-Free">
   <Hero />
   <HomeFeatures />
+  <Diagrams />
   <AnyFramework />
   <HomeGetStarted />
   <!-- <BuiltWith /> -->