style: update component layout, add quote styling, and improve responsiveness

- Adjusted padding and grid layout in HeroWithSlot component for better spacing
- Added a styled quote block with hover effects and responsive typography
- Enhanced quote container margins and max-width for clarity and mobile support
- Included styling for quote link hover states and attribution text
- Minor layout tweaks to improve visual separation and consistency across components

Author: jumski

pkgs/website/astro.config.mjs

@@ -121,29 +121,6 @@ export default defineConfig({
             content: 'website',
           },
         },
-        {
-          tag: 'script',
-          content: `
-            document.addEventListener('DOMContentLoaded', function() {
-              if (!window.location.pathname.startsWith('/author')) {
-                const sticker = document.createElement('a');
-                sticker.href = '/author/';
-                sticker.className = 'hire-sticker';
-                sticker.textContent = 'Chat with Author';
-                document.body.appendChild(sticker);
-
-                // Trigger one-time attention nudge after 5 seconds
-                setTimeout(function() {
-                  sticker.classList.add('nudge');
-                  // Remove the class after animation completes
-                  setTimeout(function() {
-                    sticker.classList.remove('nudge');
-                  }, 800);
-                }, 5000);
-              }
-            });
-          `,
-        },
       ],
       plugins: [
         starlightBlog({
@@ -468,6 +445,7 @@ export default defineConfig({
       ],
       components: {
         Hero: './src/components/ConditionalHero.astro',
+        PageFrame: './src/components/PageFrame.astro',
       },
     }),
     robotsTxt({

pkgs/website/src/assets/quote-left.svg

@@ -52,7 +52,7 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
 	order: 2;
 	justify-content: center;
 		}
-	
+
 		.stack {
 	order: 1;
 		flex-direction: column;
@@ -93,7 +93,8 @@ const { title = data.title, tagline, actions = [] } = data.hero || {};
 		.hero {
 			grid-template-columns: 4fr 5fr;
 			gap: 3%;
-			padding-block: clamp(1.5rem, calc(0.5rem + 8vmin), 8rem);
+			padding-top: clamp(1.5rem, calc(0.5rem + 8vmin), 8rem);
+			padding-bottom: 0;
 		}
 
 		.hero > .hero-html {

pkgs/website/src/assets/quote-right.svg

@@ -0,0 +1,18 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/PageFrame.astro';
+
+const isAuthorPage = Astro.url.pathname.startsWith('/author');
+---
+
+<Default {...Astro.props}>
+  <slot slot="header" name="header" />
+  <slot slot="sidebar" name="sidebar" />
+  <slot />
+</Default>
+
+{!isAuthorPage && (
+  <a href="/author/" class="hire-sticker">
+    Chat with Author
+  </a>
+)}

pkgs/website/src/components/HeroWithSlot.astro

@@ -11,10 +11,14 @@ hero:
       icon: right-arrow
       variant: primary
       attrs:
-        class: plausible-event-name=home:cta-get-started
-    - text: How It Works
+        class: call-to-action plausible-event-name=home:cta-get-started
+    - text: Try Demo
+      link: https://demo.pgflow.dev/
+      variant: secondary
+      attrs:
+        class: plausible-event-name=home:cta-try-demo
+    - text: How It Works?
       link: /concepts/how-pgflow-works/
-      icon: information
       variant: minimal
       attrs:
         class: plausible-event-name=home:cta-how-it-works
@@ -24,6 +28,19 @@ editUrl: false
 import { Card, CardGrid, LinkCard, Aside, Tabs, TabItem } from '@astrojs/starlight/components';
 import TestimonialCarousel from '../../components/TestimonialCarousel.astro';
 import CodeOverlay from '../../components/CodeOverlay.astro';
+import QuoteIcon from '../../assets/quote-left.svg';
+
+<div class="copplestone-quote">
+  <a href="https://x.com/kiwicopple/status/1990686524229181856" target="_blank" rel="noopener" class="quote-link plausible-event-name=home:copplestone-quote-click">
+    <div class="quote-content">
+      <img src={QuoteIcon.src} alt="" class="quote-icon" aria-hidden="true" />
+      <div class="quote-text-wrapper">
+        <p class="quote-text">"A workflow engine built on Supabase primitives."</p>
+        <p class="quote-attribution">— Paul Copplestone, CEO, Supabase <span class="quote-source">(via&nbsp;X)</span></p>
+      </div>
+    </div>
+  </a>
+</div>
 
 <div class="comparison-container">
 
@@ -408,6 +425,93 @@ Zero boilerplate required."
 </div>
 
 <style>{`
+  /* Copplestone quote styling */
+  .copplestone-quote {
+    margin-top: 3.25rem; /* 52px - clear separation from hero metadata */
+    margin-bottom: 4.25rem; /* 68px - increased ~40% for clear separation from comparison */
+    max-width: 640px; /* Expanded to fit quote on one line (~42-48 chars) */
+  }
+
+  .copplestone-quote .quote-link {
+    display: block;
+    text-decoration: none;
+    transition: opacity 0.2s ease;
+  }
+
+  .copplestone-quote .quote-link:hover .quote-text {
+    text-decoration: underline;
+    text-decoration-color: var(--sl-color-white);
+  }
+
+  .copplestone-quote .quote-content {
+    display: flex;
+    align-items: flex-start;
+    gap: 1.875rem; /* 30px - reduced 2px to keep icon connected */
+  }
+
+  .copplestone-quote .quote-icon {
+    width: 1.875rem; /* 30px - reduced 15% on desktop */
+    height: 1.875rem;
+    flex-shrink: 0;
+    margin-top: -0.6875rem; /* Shifted up ~3px to align center with x-height */
+    filter: brightness(0) saturate(100%) invert(100%);
+    opacity: 0.8; /* 80% - darker for more visibility */
+  }
+
+  .copplestone-quote .quote-text-wrapper {
+    flex: 1;
+  }
+
+  .copplestone-quote .quote-text {
+    font-size: 1.25rem; /* 20px on desktop */
+    font-style: italic;
+    font-weight: 550; /* Between medium and semibold */
+    line-height: 1.6;
+    margin: 0 0 0.75rem 0; /* 0.75-1rem gap to attribution */
+    color: var(--sl-color-white);
+  }
+
+  .copplestone-quote .quote-attribution {
+    font-size: 1rem; /* 16px */
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.6;
+    margin: 0;
+    color: var(--sl-color-white);
+    opacity: 0.8;
+  }
+
+  .copplestone-quote .quote-source {
+    opacity: 0.6; /* Further reduced opacity for "(via X)" */
+  }
+
+  @media (max-width: 768px) {
+    .copplestone-quote {
+      margin-top: 2.625rem; /* 42px - added 10px breathing room on mobile */
+      margin-bottom: 3rem; /* 48px on mobile - proportionally larger */
+      max-width: 100%;
+    }
+
+    .copplestone-quote .quote-content {
+      gap: 1.625rem; /* 26px - reduced 2px to keep icon connected to quote */
+    }
+
+    .copplestone-quote .quote-icon {
+      width: 1.6rem; /* 25.6px - reduced ~10% for better balance on mobile */
+      height: 1.6rem;
+      margin-top: -0.5rem; /* Shifted up ~3px to align center with x-height */
+    }
+
+    .copplestone-quote .quote-text {
+      font-size: 1.125rem; /* 18px on mobile */
+      margin-bottom: 0.625rem; /* Proportional spacing */
+    }
+
+    .copplestone-quote .quote-attribution {
+      font-size: 0.9375rem; /* 15px on mobile */
+    }
+  }
+
   .cta-card {
     transform: scale(1.35);
     margin-top: 3rem;

pkgs/website/src/components/PageFrame.astro

@@ -70,6 +70,7 @@ svg .secondary {
 }
 
 @keyframes breathing-glow {
+
   0%,
   100% {
     filter: drop-shadow(0 0 0 transparent);
@@ -84,7 +85,7 @@ svg .secondary {
 .call-to-action {
   font-weight: bold;
   box-shadow: 0 0 10px var(--logo-glow-color), 0 0 15px var(--logo-glow-color);
-  filter: brightness(1.15);
+  filter: brightness(1.05);
   transition: all 0.3s ease;
 
   &:hover {
@@ -93,6 +94,11 @@ svg .secondary {
   }
 }
 
+/* Bold hero primary CTA */
+.hero .actions .sl-link-button.primary {
+  font-weight: bold;
+}
+
 /* HERO QUICKSTART */
 .hero-quickstart {
   text-align: center;
@@ -329,10 +335,23 @@ svg .secondary {
   }
 }
 
-/* Hide on small screens */
+/* Mobile: Convert to fixed footer bar */
 @media (max-width: 768px) {
   .hire-sticker {
-    display: none;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    width: 100%;
+    border-radius: 0;
+    padding: 10px 20px;
+    text-align: center;
+    justify-content: center;
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+    font-size: 0.9rem;
+  }
+
+  .hire-sticker:hover {
+    transform: none;
   }
 }