@grantcodes/ui 2.0.2 → 2.1.0

package/src/pages/blog-post.stories.js

@@ -0,0 +1,381 @@
+import { html } from "lit";
+import "../components/app-bar/app-bar.js";
+import "../components/button/button.js";
+import "../components/breadcrumb/breadcrumb.js";
+import "../components/container/container.js";
+import "../components/badge/badge.js";
+import "../components/avatar/avatar.js";
+import "../components/card/card.js";
+import "../components/cta/cta.js";
+import "../components/footer/footer.js";
+
+const meta = {
+	title: "Pages/Blog Post",
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+const relatedPosts = [
+	{
+		category: "Engineering",
+		title: "How we cut our build times by 60% with better caching",
+		excerpt:
+			"A deep dive into the caching strategies we adopted across our CI pipeline and how they compound over time.",
+		author: { name: "Priya Nair", avatar: "https://i.pravatar.cc/80?img=32" },
+		date: "Feb 28, 2025",
+		href: "/blog/build-cache",
+	},
+	{
+		category: "Design",
+		title: "Writing design tokens that scale across themes",
+		excerpt:
+			"Tokens are only as good as the naming conventions behind them. Here's what we learned from three rewrites.",
+		author: { name: "Leo Hartmann", avatar: "https://i.pravatar.cc/80?img=53" },
+		date: "Feb 14, 2025",
+		href: "/blog/design-tokens",
+	},
+	{
+		category: "Culture",
+		title: "Small teams ship better software — here's why",
+		excerpt:
+			"Coordination cost grows faster than headcount. We explore the research and what it means for how we hire.",
+		author: {
+			name: "Chloe Bergstrom",
+			avatar: "https://i.pravatar.cc/80?img=25",
+		},
+		date: "Jan 30, 2025",
+		href: "/blog/small-teams",
+	},
+];
+
+const footerContent = html`
+  <grantcodes-footer-column>
+    <h3>Flowbase</h3>
+    <p>The modern platform for teams that move fast and ship great software.</p>
+  </grantcodes-footer-column>
+
+  <grantcodes-footer-column>
+    <h3>Product</h3>
+    <ul>
+      <li><a href="/features">Features</a></li>
+      <li><a href="/pricing">Pricing</a></li>
+      <li><a href="/changelog">Changelog</a></li>
+    </ul>
+  </grantcodes-footer-column>
+
+  <grantcodes-footer-column>
+    <h3>Company</h3>
+    <ul>
+      <li><a href="/blog">Blog</a></li>
+      <li><a href="/about">About</a></li>
+      <li><a href="/careers">Careers</a></li>
+    </ul>
+  </grantcodes-footer-column>
+`;
+
+/**
+ * A full blog post page. Demonstrates a reading-focused layout using the
+ * container component for column width control, breadcrumb for navigation
+ * context, badge for category tagging, avatar for the author byline, and
+ * cards for related posts at the bottom.
+ */
+export const Default = {
+	render: () => html`
+    <grantcodes-app-bar sticky>
+      <a
+        slot="logo"
+        href="/"
+        style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: inherit;"
+      >
+        Flowbase
+      </a>
+      <div slot="nav" style="display: flex; gap: 0.5rem;">
+        <a href="/">Home</a>
+        <a href="/features">Features</a>
+        <a href="/blog">Blog</a>
+        <a href="/pricing">Pricing</a>
+      </div>
+      <div slot="actions" style="display: flex; gap: 0.5rem;">
+        <grantcodes-button variant="ghost">Sign in</grantcodes-button>
+        <grantcodes-button>Get started</grantcodes-button>
+      </div>
+    </grantcodes-app-bar>
+
+    <!-- Article header -->
+    <grantcodes-container
+      style="padding-block-start: var(--g-theme-spacing-xl);"
+    >
+      <div style="max-inline-size: 48rem; margin-inline: auto;">
+        <grantcodes-breadcrumb>
+          <grantcodes-breadcrumb-item href="/">Home</grantcodes-breadcrumb-item>
+          <grantcodes-breadcrumb-item href="/blog"
+            >Blog</grantcodes-breadcrumb-item
+          >
+          <grantcodes-breadcrumb-item current
+            >Shipping faster with async-first teams</grantcodes-breadcrumb-item
+          >
+        </grantcodes-breadcrumb>
+
+        <div
+          style="margin-block-start: var(--g-theme-spacing-lg); display: flex; flex-direction: column; gap: var(--g-theme-spacing-md);"
+        >
+          <grantcodes-badge variant="primary">Engineering</grantcodes-badge>
+
+          <h1
+            style="margin: 0; font-size: var(--g-theme-typography-display-default-font-size); font-weight: var(--g-theme-typography-display-default-font-weight); line-height: 1.15; color: var(--g-theme-color-content-default);"
+          >
+            Shipping faster with async-first teams
+          </h1>
+
+          <p
+            style="margin: 0; font-size: var(--g-theme-typography-body-lg-font-size); color: var(--g-theme-color-content-secondary); line-height: 1.6;"
+          >
+            How we restructured communication to remove the hidden cost of
+            synchronous coordination — and what we shipped as a result.
+          </p>
+
+          <div
+            style="display: flex; align-items: center; gap: var(--g-theme-spacing-sm); padding-block: var(--g-theme-spacing-md); border-block: 1px solid var(--g-theme-color-border-default);"
+          >
+            <grantcodes-avatar
+              src="https://i.pravatar.cc/80?img=12"
+              name="Sam Torres"
+              size="small"
+            ></grantcodes-avatar>
+            <div>
+              <p
+                style="margin: 0; font-weight: var(--g-typography-font-weight-600); color: var(--g-theme-color-content-default); font-size: var(--g-theme-typography-label-default-font-size);"
+              >
+                Sam Torres
+              </p>
+              <p
+                style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-label-sm-font-size);"
+              >
+                March 12, 2025 · 8 min read
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </grantcodes-container>
+
+    <!-- Featured image -->
+    <grantcodes-container
+      nopad
+      style="margin-block: var(--g-theme-spacing-lg);"
+    >
+      <img
+        src="https://placehold.co/1200x500?text=Featured+Image"
+        alt="An abstract illustration of async communication flows"
+        style="display: block; width: 100%; height: auto; border-radius: var(--g-theme-border-radius-md);"
+      />
+    </grantcodes-container>
+
+    <!-- Article body -->
+    <grantcodes-container
+      align="prose"
+      style="padding-block-end: var(--g-theme-spacing-2xl);"
+    >
+      <article>
+        <p>
+          Every team I've worked on has had the same default: when in doubt,
+          schedule a meeting. It feels productive. You get everyone in the room,
+          align on something, and leave with decisions. But the cost is
+          invisible — it shows up later, in the form of engineers who can't
+          reach a flow state, PMs who spend half their week in Zoom, and
+          decisions that only one person truly understands.
+        </p>
+
+        <p>
+          When we went async-first eighteen months ago, I expected some
+          friction. What I didn't expect was how much <em>clarity</em> it would
+          force.
+        </p>
+
+        <h2>What async-first actually means</h2>
+
+        <p>
+          Async-first doesn't mean no meetings. It means every meeting has to
+          earn its place. Before we schedule time, we ask: can this be a
+          document? Can this be a comment thread? Can this decision be made by
+          one person and communicated to the rest?
+        </p>
+
+        <p>
+          The answer is yes more often than you'd think. Most "alignment
+          meetings" are actually announcements. Most "brainstorms" are better
+          done in writing first, then refined synchronously if needed.
+        </p>
+
+        <blockquote>
+          <p>
+            Writing forces clarity. If you can't explain your proposal in a
+            document, you don't understand it well enough to decide on it yet.
+          </p>
+        </blockquote>
+
+        <h2>The three tools we leaned on</h2>
+
+        <p>
+          We standardised on three artefacts that replaced most of our recurring
+          meetings:
+        </p>
+
+        <ol>
+          <li>
+            <strong>Weekly written updates.</strong> Each team member posts a
+            short update every Monday: what shipped, what's in progress, what's
+            blocked. No meeting required.
+          </li>
+          <li>
+            <strong>Decision documents.</strong> Any significant technical or
+            product decision gets a one-pager. Context, options, recommendation,
+            decision. It lives in the repo, not in someone's memory.
+          </li>
+          <li>
+            <strong>Structured async reviews.</strong> Design and code reviews
+            happen in writing first. We only meet if the written discussion
+            reaches an impasse after 48 hours.
+          </li>
+        </ol>
+
+        <h2>What we shipped as a result</h2>
+
+        <p>
+          In the six months after the shift, our cycle time dropped by 40%. Not
+          because we worked more hours — we actually worked fewer. The
+          difference was that engineers had longer uninterrupted stretches,
+          decisions were made and recorded clearly, and we stopped relitigating
+          things we'd already decided in a meeting no one documented.
+        </p>
+
+        <p>
+          The compounding effect of async-first is slow but real. Each decision
+          document becomes a reference for the next one. Each written update
+          builds a log that onboards new hires in days rather than weeks. The
+          knowledge stops living in people's heads and starts living in the
+          system.
+        </p>
+
+        <div
+          style="margin-block-start: var(--g-theme-spacing-xl); padding: var(--g-theme-spacing-md); background: var(--g-theme-color-background-subtle); border-radius: var(--g-theme-border-radius-md); display: flex; align-items: center; gap: var(--g-theme-spacing-md);"
+        >
+          <grantcodes-avatar
+            src="https://i.pravatar.cc/80?img=12"
+            name="Sam Torres"
+            size="medium"
+          ></grantcodes-avatar>
+          <div>
+            <p
+              style="margin: 0; font-weight: var(--g-typography-font-weight-600); color: var(--g-theme-color-content-default);"
+            >
+              Sam Torres
+            </p>
+            <p
+              style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-sm-font-size);"
+            >
+              CTO at Flowbase. Writes about engineering culture, distributed
+              teams, and systems thinking.
+            </p>
+          </div>
+        </div>
+      </article>
+    </grantcodes-container>
+
+    <!-- Related posts -->
+    <div
+      style="background: var(--g-theme-color-background-subtle); padding-block: var(--g-theme-spacing-2xl);"
+    >
+      <grantcodes-container>
+        <h2
+          style="margin: 0 0 var(--g-theme-spacing-lg); font-size: var(--g-theme-typography-headline-default-font-size); font-weight: var(--g-theme-typography-headline-default-font-weight); color: var(--g-theme-color-content-default);"
+        >
+          More from the blog
+        </h2>
+        <div
+          style="display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: var(--g-theme-spacing-lg);"
+        >
+          ${relatedPosts.map(
+						(post) => html`
+              <grantcodes-card>
+                <div
+                  slot="header"
+                  style="display: flex; align-items: center; justify-content: space-between;"
+                >
+                  <grantcodes-badge variant="neutral"
+                    >${post.category}</grantcodes-badge
+                  >
+                  <span
+                    style="font-size: var(--g-theme-typography-label-sm-font-size); color: var(--g-theme-color-content-secondary);"
+                    >${post.date}</span
+                  >
+                </div>
+                <div
+                  style="display: flex; flex-direction: column; gap: var(--g-theme-spacing-sm);"
+                >
+                  <h3
+                    style="margin: 0; font-size: var(--g-theme-typography-title-default-font-size); font-weight: var(--g-theme-typography-title-default-font-weight); color: var(--g-theme-color-content-default); line-height: 1.3;"
+                  >
+                    <a
+                      href="${post.href}"
+                      style="color: inherit; text-decoration: none;"
+                      >${post.title}</a
+                    >
+                  </h3>
+                  <p
+                    style="margin: 0; color: var(--g-theme-color-content-secondary); font-size: var(--g-theme-typography-body-sm-font-size); line-height: 1.6;"
+                  >
+                    ${post.excerpt}
+                  </p>
+                </div>
+                <div
+                  slot="footer"
+                  style="display: flex; align-items: center; gap: var(--g-theme-spacing-sm);"
+                >
+                  <grantcodes-avatar
+                    src="${post.author.avatar}"
+                    name="${post.author.name}"
+                    size="small"
+                  ></grantcodes-avatar>
+                  <span
+                    style="font-size: var(--g-theme-typography-label-sm-font-size); color: var(--g-theme-color-content-secondary);"
+                    >${post.author.name}</span
+                  >
+                </div>
+              </grantcodes-card>
+            `,
+					)}
+        </div>
+      </grantcodes-container>
+    </div>
+
+    <grantcodes-cta
+      eyebrow="Ready to try it?"
+      title="See how Flowbase keeps your team in flow"
+      text="Join thousands of teams who've replaced their meeting-heavy workflows with a calmer, more productive way of working."
+      primary-action=${JSON.stringify({
+				label: "Start for free",
+				href: "/signup",
+			})}
+      secondary-action=${JSON.stringify({
+				label: "See all features",
+				href: "/features",
+			})}
+      align="center"
+    ></grantcodes-cta>
+
+    <grantcodes-footer columns="3">
+      ${footerContent}
+      <div slot="bottom">
+        <p>&copy; 2025 Flowbase, Inc. All rights reserved.</p>
+      </div>
+      <div slot="bottom" style="display: flex; gap: var(--g-theme-spacing-md);">
+        <a href="/privacy">Privacy</a>
+        <a href="/terms">Terms</a>
+      </div>
+    </grantcodes-footer>
+  `,
+};

package/src/pages/saas-landing.stories.js

@@ -0,0 +1,307 @@
+import { html } from "lit";
+import "../components/app-bar/app-bar.js";
+import "../components/button/button.js";
+import "../components/hero/hero.js";
+import "../components/logo-cloud/logo-cloud.js";
+import "../components/feature-list/feature-list.js";
+import "../components/stats/stats.js";
+import "../components/testimonials/testimonials.js";
+import "../components/pricing/pricing.js";
+import "../components/newsletter/newsletter.js";
+import "../components/footer/footer.js";
+
+const meta = {
+	title: "Pages/SaaS Landing",
+	parameters: {
+		layout: "fullscreen",
+	},
+};
+
+export default meta;
+
+const navLinks = html`
+	<a href="/">Home</a>
+	<a href="/features">Features</a>
+	<a href="/pricing">Pricing</a>
+	<a href="/about">About</a>
+`;
+
+const footerContent = html`
+	<grantcodes-footer-column>
+		<h3>Flowbase</h3>
+		<p>The modern platform for teams that move fast and ship great software.</p>
+	</grantcodes-footer-column>
+
+	<grantcodes-footer-column>
+		<h3>Product</h3>
+		<ul>
+			<li><a href="/features">Features</a></li>
+			<li><a href="/pricing">Pricing</a></li>
+			<li><a href="/changelog">Changelog</a></li>
+			<li><a href="/roadmap">Roadmap</a></li>
+		</ul>
+	</grantcodes-footer-column>
+
+	<grantcodes-footer-column>
+		<h3>Company</h3>
+		<ul>
+			<li><a href="/about">About</a></li>
+			<li><a href="/blog">Blog</a></li>
+			<li><a href="/careers">Careers</a></li>
+			<li><a href="/press">Press</a></li>
+		</ul>
+	</grantcodes-footer-column>
+
+	<grantcodes-footer-column>
+		<h3>Legal</h3>
+		<ul>
+			<li><a href="/privacy">Privacy Policy</a></li>
+			<li><a href="/terms">Terms of Service</a></li>
+			<li><a href="/security">Security</a></li>
+			<li><a href="/cookies">Cookie Policy</a></li>
+		</ul>
+	</grantcodes-footer-column>
+`;
+
+/**
+ * Full SaaS product landing page. Demonstrates a realistic composition of
+ * all block components from top to bottom: app-bar, hero, logo-cloud,
+ * feature-list, stats, testimonials, pricing, newsletter, and footer.
+ */
+export const Default = {
+	render: () => html`
+		<grantcodes-app-bar sticky>
+			<a slot="logo" href="/" style="font-weight: 700; font-size: 1.25rem; text-decoration: none; color: inherit;">
+				Flowbase
+			</a>
+			<div slot="nav" style="display: flex; gap: 0.5rem;">
+				${navLinks}
+			</div>
+			<div slot="actions" style="display: flex; gap: 0.5rem;">
+				<grantcodes-button variant="ghost">Sign in</grantcodes-button>
+				<grantcodes-button>Get started</grantcodes-button>
+			</div>
+		</grantcodes-app-bar>
+
+		<grantcodes-hero
+			title="Ship faster without the chaos"
+			subtitle="Flowbase brings your team's tasks, docs, and deploys into one calm, focused workspace. No more tab-switching. No more dropped balls."
+			button="Start for free"
+			href="/signup"
+			size="lg"
+		></grantcodes-hero>
+
+		<grantcodes-logo-cloud
+			title="Trusted by teams at"
+			logos=${JSON.stringify([
+				{
+					name: "Vercel",
+					src: "https://placehold.co/120x40?text=Vercel",
+					alt: "Vercel",
+				},
+				{
+					name: "Linear",
+					src: "https://placehold.co/120x40?text=Linear",
+					alt: "Linear",
+				},
+				{
+					name: "Stripe",
+					src: "https://placehold.co/120x40?text=Stripe",
+					alt: "Stripe",
+				},
+				{
+					name: "Notion",
+					src: "https://placehold.co/120x40?text=Notion",
+					alt: "Notion",
+				},
+				{
+					name: "Figma",
+					src: "https://placehold.co/120x40?text=Figma",
+					alt: "Figma",
+				},
+				{
+					name: "Loom",
+					src: "https://placehold.co/120x40?text=Loom",
+					alt: "Loom",
+				},
+			])}
+		></grantcodes-logo-cloud>
+
+		<grantcodes-feature-list
+			title="Everything your team needs"
+			subtitle="Flowbase combines the tools you already love into a single, cohesive experience — so your team stays in flow."
+			columns="3"
+			items=${JSON.stringify([
+				{
+					title: "Task management",
+					description:
+						"Create, assign, and track work across your entire team with a simple, powerful interface.",
+					icon: "check-square",
+				},
+				{
+					title: "Real-time docs",
+					description:
+						"Write collaboratively without conflicts. Docs live next to the tasks they belong to.",
+					icon: "file-text",
+				},
+				{
+					title: "CI/CD pipelines",
+					description:
+						"Trigger builds, run tests, and deploy to production without leaving your workspace.",
+					icon: "git-branch",
+				},
+				{
+					title: "Team inbox",
+					description:
+						"Pull in Slack, email, and GitHub notifications into one shared inbox your team can triage together.",
+					icon: "inbox",
+				},
+				{
+					title: "Analytics",
+					description:
+						"Understand velocity, cycle time, and deployment frequency with built-in engineering metrics.",
+					icon: "bar-chart-2",
+				},
+				{
+					title: "Access controls",
+					description:
+						"Fine-grained roles and SSO keep your data secure without slowing your team down.",
+					icon: "shield",
+				},
+			])}
+		></grantcodes-feature-list>
+
+		<grantcodes-stats
+			title="Built for teams that care about output"
+			columns="4"
+			items=${JSON.stringify([
+				{
+					value: "12×",
+					label: "Faster shipping",
+					context: "compared to teams using 4+ separate tools",
+				},
+				{
+					value: "98%",
+					label: "Uptime SLA",
+					context: "backed by our enterprise plan",
+				},
+				{
+					value: "50k+",
+					label: "Active teams",
+					context: "across 80 countries",
+				},
+				{
+					value: "4.9 / 5",
+					label: "Customer rating",
+					context: "across G2, Capterra, and Product Hunt",
+				},
+			])}
+		></grantcodes-stats>
+
+		<grantcodes-testimonials
+			title="What teams are saying"
+			layout="cards"
+			items=${JSON.stringify([
+				{
+					quote:
+						"We cut our weekly planning meeting from 90 minutes to 15. Flowbase just… makes it obvious what needs to happen next.",
+					name: "Maya Okafor",
+					role: "Engineering Lead",
+					company: "Pulse Labs",
+					avatar: "https://i.pravatar.cc/80?img=47",
+				},
+				{
+					quote:
+						"I've tried every project tool out there. Flowbase is the first one that didn't need a dedicated Ops person to keep it clean.",
+					name: "Sam Torres",
+					role: "CTO",
+					company: "Stackform",
+					avatar: "https://i.pravatar.cc/80?img=12",
+				},
+				{
+					quote:
+						"The CI integration alone saved us four hours a week. The rest is just a bonus at this point.",
+					name: "Priya Nair",
+					role: "Senior Developer",
+					company: "Mintcode",
+					avatar: "https://i.pravatar.cc/80?img=32",
+				},
+			])}
+		></grantcodes-testimonials>
+
+		<grantcodes-pricing
+			title="Simple, honest pricing"
+			subtitle="No per-seat surprises. No feature gating. Pick the plan that fits your team size."
+			tiers=${JSON.stringify([
+				{
+					name: "Starter",
+					price: "Free",
+					period: "",
+					description: "For solo developers and small side projects.",
+					features: [
+						{ text: "Up to 3 team members", included: true },
+						{ text: "Unlimited tasks", included: true },
+						{ text: "5 GB storage", included: true },
+						{ text: "CI/CD pipelines", included: false },
+						{ text: "SSO", included: false },
+						{ text: "Priority support", included: false },
+					],
+					cta: { label: "Get started free", href: "/signup" },
+					highlighted: false,
+				},
+				{
+					name: "Team",
+					price: "$49",
+					period: "/ month",
+					description: "For growing teams that need to move fast.",
+					features: [
+						{ text: "Up to 20 team members", included: true },
+						{ text: "Unlimited tasks", included: true },
+						{ text: "50 GB storage", included: true },
+						{ text: "CI/CD pipelines", included: true },
+						{ text: "SSO", included: false },
+						{ text: "Priority support", included: false },
+					],
+					cta: { label: "Start free trial", href: "/signup?plan=team" },
+					highlighted: true,
+				},
+				{
+					name: "Enterprise",
+					price: "$149",
+					period: "/ month",
+					description: "For large teams with advanced security needs.",
+					features: [
+						{ text: "Unlimited team members", included: true },
+						{ text: "Unlimited tasks", included: true },
+						{ text: "500 GB storage", included: true },
+						{ text: "CI/CD pipelines", included: true },
+						{ text: "SSO", included: true },
+						{ text: "Priority support", included: true },
+					],
+					cta: { label: "Contact sales", href: "/contact" },
+					highlighted: false,
+				},
+			])}
+		></grantcodes-pricing>
+
+		<grantcodes-newsletter
+			title="Stay in the loop"
+			text="Get product updates, engineering articles, and early access to new features. One email a week, no spam."
+			button-label="Subscribe"
+			placeholder="you@company.com"
+			disclaimer="Unsubscribe any time. We never sell your data."
+		></grantcodes-newsletter>
+
+		<grantcodes-footer columns="4">
+			${footerContent}
+			<div slot="bottom">
+				<p>&copy; 2025 Flowbase, Inc. All rights reserved.</p>
+			</div>
+			<div slot="bottom" style="display: flex; gap: var(--g-theme-spacing-md);">
+				<a href="/privacy">Privacy</a>
+				<a href="/terms">Terms</a>
+				<a href="/security">Security</a>
+			</div>
+		</grantcodes-footer>
+	`,
+};