Merge pull request #21 from bzr-sys/tweaks

Add some visual touches to the home page, and tidy a few other small items

src/components/FeaturesSummary.astro

@@ -1,5 +1,6 @@
 ---
 import { getCollection } from "astro:content";
+import LogoOutlineSVG from "./LogoOutlineSVG.astro";
 
 const allFeatures = await getCollection("features");
 const orderedFeatures = allFeatures.sort((a, b) =>
@@ -12,6 +13,9 @@ const orderedFeatures = allFeatures.sort((a, b) =>
     orderedFeatures.map((f) => (
       <div class="card w-full bg-base-200 shadow-xl">
         <div class="card-body">
+          <div class="mx-auto">
+            <LogoOutlineSVG width="200px" />
+          </div>
           <h2 class="card-title">
             <a href={`/${f.collection}/${f.slug}`}>{f.data.title}</a>
           </h2>

src/components/Hero.astro

@@ -1,16 +1,32 @@
-<div class="hero">
-  <div class="hero-overlay"></div>
-  <div class="hero-content py-28 text-center text-neutral-content">
+---
+import poweredByBazaar from "../images/powered-by-bazaar.png";
+---
+
+<div
+  class="hero-bg hero relative"
+  style={`background-image: url(${poweredByBazaar.src})`}
+>
+  <div class="hero-content pb-40 pt-28 text-center text-neutral-content">
     <div class="max-w-md">
       <h1 class="mb-5 text-5xl font-bold">Build With Ease, Run Cost-Free</h1>
       <p class="mb-5">
         Bring your apps to life with zero running-costs. Bazaar provides
         authentication, document-orientated databases with realtime
-        capabilities, a powerful Sharing API, and more.
+        capabilities, a powerful permissions API, and more.
       </p>
-      <a href="/docs/start-here/getting-started/" class="btn btn-primary"
-        >Get Started</a
-      >
     </div>
   </div>
 </div>
+
+<style>
+  .hero-bg {
+    background: no-repeat bottom center;
+    background-size: 100%;
+  }
+
+  @media (min-width: 853px) {
+    .hero-bg {
+      background-size: auto;
+    }
+  }
+</style>

src/components/LogoOutlineSVG.astro

@@ -0,0 +1,28 @@
+---
+interface Props {
+  /** Set a width with any unit. e.g. 100px or 2rem */
+  width: string;
+}
+
+const { width } = Astro.props;
+---
+
+<svg
+  style={`width: ${width}`}
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 525 525"
+  aria-hidden="true"
+>
+  <path
+    fill="transparent"
+    stroke="#414551"
+    stroke-width="3"
+    d="M434.890,397.655 L260.977,397.655 L260.977,226.829 C260.977,212.972 249.744,201.738 235.887,201.738 L211.783,201.738 L211.783,149.596 C211.783,136.574 222.340,126.017 235.363,126.017 L434.890,126.017 C447.913,126.017 458.470,136.574 458.470,149.596 L458.470,374.076 C458.470,387.098 447.913,397.655 434.890,397.655 Z"
+  ></path>
+  <path
+    fill="transparent"
+    stroke="#414551"
+    stroke-width="3"
+    d="M211.783,397.655 L90.151,397.655 C76.294,397.655 65.061,386.421 65.061,372.564 L65.061,226.829 C65.061,212.972 76.294,201.738 90.151,201.738 L211.783,201.738 L211.783,397.655 Z"
+  ></path>
+</svg>

src/content/features/authentication.md

@@ -36,9 +36,9 @@ bzr.onLogin(async () => {
 
 Read the [Auth docs](/docs/features/auth).
 
-## Simplified Sharing
+## Simplified Permissions
 
-Leveraging Bazaar's database-per-user architecture, users gain immediate access to their databases, bypassing the need for complex access policies. For more refined control, the [Sharing API](/features/sharing) allows assigning permissions with precision.
+Leveraging Bazaar's database-per-user architecture, users gain immediate access to their databases, bypassing the need for complex access policies. For more refined control, the [Permissions API](/features/permissions) allows assigning permissions with precision.
 
 ## Technical Backbone
 

src/content/features/sharing.md → src/content/features/permissions.md

@@ -1,12 +1,14 @@
 ---
-title: Sharing
-summary: Bazaar's Sharing API offers powerful features for realtime collaboration, allowing precise control over database access and the ability to react to changes in shared content.
+title: Permissions
+summary: Bazaar permissions offers powerful features for realtime collaboration, allowing precise control over database access and the ability to react to changes in shared content.
 order: 7
 ---
 
-Bazaar comes with a powerful Sharing API, empowering developers to implement sharing and collaboration in their applications.
+TODO update.
 
-With the database-per-user architecture, users can interact with their data by default. The Sharing API facilitates granting access to other users. Permissions can be granted to docs and collections with filters to deliver precise control.
+Bazaar comes with a powerful permissions API, empowering developers to implement sharing and collaboration in their applications.
+
+With the database-per-user architecture, users can interact with their data by default. The Permissions API facilitates granting access to other users. Permissions can be granted to docs and collections with filters to deliver precise control.
 
 Share a document with a user with read permissions:
 
@@ -22,7 +24,7 @@ const newPermission = {
 const { id } = await bzr.permissions.create(newPermission);
 ```
 
-The Sharing API is simple to use but caters to complex scenarios. Subscribe to change events to react to granted permissions changes in realtime.
+The Permissions API is simple to use but caters to complex scenarios. Subscribe to change events to react to granted permissions changes in realtime.
 
 Subscribe to change events for a granted permission for a collection:
 

src/content/features/realtime-databases.md

@@ -36,4 +36,4 @@ Screenshot of the Bazaar admin dashboard for users
 
 The per-user-per-app database model provides simplified access management. It eliminates the need for configuring access policies, as users have automatic access to their databases.
 
-Granting access to an another user's data can be done conveniently with the [Sharing API](/features/sharing).
+Granting access to an another user's data can be done conveniently with the [Permissions API](/features/permissions).

src/pages/index.astro

@@ -4,7 +4,7 @@ import Hero from "../components/Hero.astro";
 import FeaturesSummary from "../components/FeaturesSummary.astro";
 ---
 
-<BaseLayout title="Homepage">
+<BaseLayout title="Bazaar: Build With Ease, Run Cost-Free">
   <Hero />
   <FeaturesSummary />
 </BaseLayout>