create-vexcms 0.1.0-alpha.2 → 0.1.0-alpha.21

package/templates/marketing-site/src/vexcms/blocks/FAQ/index.tsx

@@ -1,71 +1,84 @@
 import type { BlockComponentProps } from "@vexcms/react"
 
-import Link from "next/link"
-
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
+  buttonVariants,
+  cn,
 } from "@vexcms/react"
+import { ArrowRight } from "lucide-react"
+import Link from "next/link"
 
-export { faqBlock } from "./config"
+import type { FaqBlock } from "~/vex.types"
 
-export default function FAQBlock({ block }: BlockComponentProps) {
-  const { heading, subheading, supportLink, items } = block as unknown as {
-    heading: string
-    subheading?: string
-    supportLink?: string
-    items?: Array<{ question: string; answer: string }>
-  }
+import { Container } from "~/components/Container"
 
-  return (
-    <section className="py-16 md:py-24">
-      <div className="mx-auto max-w-5xl px-4 md:px-6">
-        <div className="mx-auto max-w-xl text-center">
-          <h2 className="text-3xl font-bold text-balance md:text-4xl lg:text-5xl">
-            {heading}
-          </h2>
-          {subheading && (
-            <p className="text-muted-foreground mt-4 text-balance">
-              {subheading}
-            </p>
-          )}
-        </div>
+export { faqBlock } from "./config"
 
-        <div className="mx-auto mt-12 max-w-xl">
-          <Accordion className="bg-muted dark:bg-muted/50 w-full rounded-2xl p-1">
-            {(items ?? []).map((faq, index) => (
-              <div className="group" key={index}>
-                <AccordionItem
-                  className="data-open:bg-card dark:data-open:bg-muted rounded-xl border-none px-7 py-1 data-open:border-none data-open:shadow-sm"
-                  value={`${index}`}
-                >
-                  <AccordionTrigger className="cursor-pointer text-base hover:no-underline">
-                    {faq.question}
-                  </AccordionTrigger>
-                  <AccordionContent>
-                    <p className="text-base">{faq.answer}</p>
-                  </AccordionContent>
-                </AccordionItem>
-                <hr className="mx-7 border-dashed group-last:hidden" />
-              </div>
-            ))}
-          </Accordion>
+/**
+ * FAQ — question left, answer under it.
+ *
+ * Two columns rather than the sourced centred layout: it gives the support
+ * link a home, holds answers at a 68ch measure instead of 90ch, and stops the
+ * centred-heading pattern appearing three times on one page.
+ *
+ * Items are rules, not cards — no radius, no background, no shadow, which is
+ * the only treatment that reads the same in both themes.
+ */
+export default function FAQBlockRenderer({ block }: BlockComponentProps) {
+  const { heading, items, subheading, supportLink } = block as FaqBlock
+  const faqs = items ?? []
+
+  if (faqs.length === 0) {return null}
 
-          {supportLink && (
-            <p className="text-muted-foreground mt-6 px-8">
-              {"Can't find what you're looking for? Contact our "}
+  return (
+    <section className="py-14 md:py-20 xl:py-28">
+      <Container>
+        <div className="grid gap-8 xl:grid-cols-[4fr_7fr] xl:items-start xl:gap-14">
+          <div>
+            <h2 className="text-[26px] leading-[1.18] font-bold tracking-[-0.025em] text-balance text-foreground md:text-3xl xl:text-4xl">
+              {heading}
+            </h2>
+            {subheading ? (
+              <p className="mt-4 text-[17px] leading-[1.6] text-pretty text-muted-foreground">
+                {subheading}
+              </p>
+            ) : null}
+            {supportLink ? (
+              // Fixed copy in the renderer: the field stores only an href.
               <Link
-                className="text-primary font-medium hover:underline"
+                className={cn(
+                  buttonVariants({ variant: "link" }),
+                  "mt-5 h-auto gap-1.5 p-0 text-[15px] font-medium text-primary no-underline hover:underline"
+                )}
                 href={supportLink}
               >
-                support team
+                Open an issue
+                <ArrowRight className="size-4" />
               </Link>
-            </p>
-          )}
+            ) : null}
+          </div>
+
+          <Accordion className="border-t border-border" defaultValue={["faq-0"]}>
+            {faqs.map((faq, index) => (
+              <AccordionItem
+                className="border-b border-border"
+                key={`${faq.question}-${index}`}
+                value={`faq-${index}`}
+              >
+                <AccordionTrigger className="flex min-h-[52px] w-full items-start justify-between gap-6 py-[18px] text-left text-base font-medium text-foreground">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent className="max-w-[68ch] pt-3 pb-[18px] text-[15px] leading-[1.65] text-muted-foreground">
+                  {faq.answer}
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
         </div>
-      </div>
+      </Container>
     </section>
   )
 }

package/templates/marketing-site/src/vexcms/blocks/Features/config.ts

@@ -20,6 +20,7 @@ export const featuresBlock = defineBlock({
       label: "Features",
       required: true,
       items: group({
+        label: "Feature",
         fields: {
           title: text({ label: "Title", required: true }),
           description: text({ label: "Description", required: true }),

package/templates/marketing-site/src/vexcms/blocks/Features/index.tsx

@@ -1,73 +1,58 @@
 import type { BlockComponentProps } from "@vexcms/react"
-import type { ComponentPropsWithRef } from "react"
 
 import { icons } from "lucide-react"
 
-import { Card, CardContent, CardHeader } from "@vexcms/react"
+import type { FeaturesBlock } from "~/vex.types"
 
-export { featuresBlock } from "./config"
+import { Container } from "~/components/Container"
+import { SectionHeader } from "~/components/SectionHeader"
 
-function LucideIcon({ name }: { name: string }) {
-  const Icon = icons[name as keyof typeof icons]
-  if (!Icon) return null
-  return <Icon className="size-4" />
-}
+export { featuresBlock } from "./config"
 
-function CardDecorator({ children, ...divProps }: ComponentPropsWithRef<"div">) {
-  return (
-    <div
-      className="relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-zinc-950)10%,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-zinc-950)20%,transparent)] dark:[--color-border:color-mix(in_oklab,var(--color-white)15%,transparent)] dark:group-hover:bg-white/5 dark:group-hover:[--color-border:color-mix(in_oklab,var(--color-white)20%,transparent)]"
-      {...divProps}
-    >
-      <div
-        aria-hidden
-        className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px]"
-      />
-      <div
-        aria-hidden
-        className="to-background absolute inset-0 bg-radial from-transparent to-75%"
-      />
-      <div className="bg-background absolute inset-0 m-auto flex size-12 items-center justify-center border-t border-l">
-        {children}
-      </div>
-    </div>
-  )
-}
 
+/**
+ * Features — six cards, hairline-joined.
+ *
+ * The grid is a 1px mesh (`gap-px` over a `bg-border` wrapper) rather than
+ * gapped cards with shadows. Dark mode has no box-shadow at all, so gapped
+ * cards would lose their separation there; the mesh reads identically in both
+ * modes and suits the sharp radius.
+ */
 export default function FeaturesBlock({ block }: BlockComponentProps) {
-  const { heading, subheading, features } = block as unknown as {
-    heading: string
-    subheading?: string
-    features?: Array<{ title: string; description: string; icon?: string }>
-  }
+  const { features, heading, subheading } = block as FeaturesBlock
+  const items = features ?? []
+
+  if (items.length === 0) {return null}
 
   return (
-    <section className="bg-zinc-50 py-16 md:py-32 dark:bg-transparent">
-      <div className="@container mx-auto max-w-5xl px-6">
-        <div className="text-center">
-          <h2 className="text-4xl font-semibold text-balance lg:text-5xl">
-            {heading}
-          </h2>
-          {subheading && <p className="mt-4">{subheading}</p>}
+    <section className="py-14 md:py-20 xl:py-28">
+      <Container>
+        <SectionHeader heading={heading} subheading={subheading} />
+
+        <div className="grid gap-px overflow-hidden rounded-md border border-border bg-border md:grid-cols-2 xl:grid-cols-3">
+          {items.map((feature, index) => {
+            const Glyph = feature.icon ? icons[feature.icon as keyof typeof icons] : undefined
+            return (
+              <div className="bg-background p-6" key={`${feature.title}-${index}`}>
+                {/* An unresolvable icon drops the frame entirely rather than
+                    leaving an empty square; the title then starts the cell and
+                    a mixed array still reads as intentional. */}
+                {Glyph ? (
+                  <span className="mb-4 flex size-8 items-center justify-center rounded-sm border border-border">
+                    <Glyph className="size-4 text-primary" />
+                  </span>
+                ) : null}
+                <h3 className="text-[17px] leading-[1.35] font-semibold tracking-[-0.01em] text-foreground xl:text-lg">
+                  {feature.title}
+                </h3>
+                <p className="mt-2 text-sm leading-[1.6] text-pretty text-muted-foreground">
+                  {feature.description}
+                </p>
+              </div>
+            )
+          })}
         </div>
-        <Card className="mx-auto mt-8 grid max-w-sm divide-y overflow-hidden shadow-zinc-950/5 *:text-center md:mt-16 @min-4xl:max-w-full @min-4xl:grid-cols-3 @min-4xl:divide-x @min-4xl:divide-y-0">
-          {(features ?? []).map((feature, index) => (
-            <div className="group shadow-zinc-950/5" key={index}>
-              <CardHeader className="pb-3">
-                {feature.icon && (
-                  <CardDecorator>
-                    <LucideIcon name={feature.icon} />
-                  </CardDecorator>
-                )}
-                <h3 className="mt-6 font-medium">{feature.title}</h3>
-              </CardHeader>
-              <CardContent>
-                <p className="text-sm">{feature.description}</p>
-              </CardContent>
-            </div>
-          ))}
-        </Card>
-      </div>
+      </Container>
     </section>
   )
 }

package/templates/marketing-site/src/vexcms/blocks/Footer/config.ts

@@ -1,6 +1,7 @@
 import { array, defineBlock, group, text, upload } from "@vexcms/core"
 
 import { TABLE_SLUG_IMAGES } from "~/db/constants"
+
 import { BLOCK_SLUG_FOOTER } from "../constants"
 
 export const footerBlock = defineBlock({
@@ -22,6 +23,7 @@ export const footerBlock = defineBlock({
     links: array({
       label: "Links",
       items: group({
+        label: "Link",
         fields: {
           label: text({ label: "Label", required: true }),
           href: text({ label: "Link", required: true }),
@@ -31,8 +33,8 @@ export const footerBlock = defineBlock({
         { label: "Features", href: "/features" },
         { label: "Pricing", href: "/pricing" },
         { label: "Roadmap", href: "/roadmap" },
-        { label: "Documentation", href: "/docs" },
-        { label: "GitHub", href: "https://github.com/vexcms/vex" },
+        { label: "Documentation", href: "https://docs.vexcms.dev" },
+        { label: "GitHub", href: "https://github.com/ianyimi/vex" },
         { label: "npm", href: "https://www.npmjs.com/package/@vexcms/core" },
         { label: "Convex", href: "https://convex.dev" },
       ],
@@ -40,6 +42,7 @@ export const footerBlock = defineBlock({
     socialLinks: array({
       label: "Social Links",
       items: group({
+        label: "Social Link",
         fields: {
           platform: text({ label: "Platform", required: true }),
           href: text({ label: "URL", required: true }),
@@ -50,7 +53,7 @@ export const footerBlock = defineBlock({
         },
       }),
       defaultValue: [
-        { platform: "GitHub", href: "https://github.com/vexcms/vex", icon: "Github" },
+        { platform: "GitHub", href: "https://github.com/ianyimi/vex", icon: "Github" },
         { platform: "X", href: "https://x.com/vexcms", icon: "Twitter" },
       ],
     }),

package/templates/marketing-site/src/vexcms/blocks/Footer/index.tsx

@@ -1,71 +1,108 @@
 import type { BlockComponentProps } from "@vexcms/react"
 
+import { buttonVariants, cn } from "@vexcms/react"
 import { icons } from "lucide-react"
 import Link from "next/link"
 
+import type { FooterBlock } from "~/vex.types"
+
+import { BrandMark } from "~/components/BrandMark"
+import { Container } from "~/components/Container"
+import { MediaImage } from "~/components/MediaImage"
+
 export { footerBlock } from "./config"
 
-function SocialIcon({ name }: { name: string }) {
-  const Icon = icons[name as keyof typeof icons]
-  if (!Icon) return null
-  return <Icon className="size-5" />
-}
+/**
+ * Site footer — one rule, one row of links, one line of law.
+ *
+ * Deliberately not a four-column sitemap: `links` is a flat array with no
+ * group field, so column headings would be content the CMS cannot store. A
+ * single wrapping row is the shape the data actually has.
+ */
+export default function FooterBlockRenderer({ block }: BlockComponentProps) {
+  const { copyright, links, logoImage, logoText, socialLinks } = block as FooterBlock
 
-export default function FooterBlock({ block }: BlockComponentProps) {
-  const { logoText, copyright, links, socialLinks } = block as {
-    logoText?: string
-    logoImage?: string
-    copyright?: string
-    links?: Array<{ label: string; href: string }>
-    socialLinks?: Array<{ platform: string; href: string; icon?: string }>
-  }
+  const items = links ?? []
+  const socials = socialLinks ?? []
 
   return (
-    <footer>
-      <div className="mx-auto max-w-5xl px-6 py-8 md:py-16">
-        <Link
-          aria-label="go home"
-          className="mx-auto block w-fit text-lg font-semibold"
-          href="/"
+    <footer className="py-12 md:py-14">
+      <Container>
+        <div
+          className={cn(
+            "flex flex-col items-start justify-between gap-8 md:flex-row md:gap-12",
+            // The rule only exists to separate the links from the legal line.
+            items.length > 0 && "border-b border-border pb-8"
+          )}
         >
-          {logoText ?? "Vex CMS"}
-        </Link>
+          <div className="flex shrink-0 items-center gap-2 text-foreground">
+            {logoImage?.length ? (
+              <MediaImage alt={logoText ?? ""} className="h-5 w-auto" height={20} value={logoImage} width={96} />
+            ) : (
+              <>
+                <BrandMark className="size-4 text-primary" />
+                {logoText ? (
+                  <span className="text-[15px] font-extrabold tracking-[-0.03em]">{logoText}</span>
+                ) : null}
+              </>
+            )}
+          </div>
 
-        <div className="mt-6 flex flex-wrap justify-center gap-6 text-sm">
-          {(links ?? []).map((link, index) => (
-            <Link
-              className="text-muted-foreground hover:text-primary block duration-150"
-              href={link.href}
-              key={index}
-            >
-              <span>{link.label}</span>
-            </Link>
-          ))}
+          {items.length > 0 ? (
+            <ul className="grid w-full grid-cols-2 gap-x-7 gap-y-2 md:flex md:w-auto md:max-w-[640px] md:flex-wrap md:justify-end">
+              {items.map((link) => (
+                <li key={`${link.label}-${link.href}`}>
+                  <Link
+                    className="text-sm text-muted-foreground transition-colors duration-[180ms] ease-[var(--ease-emphasized)] hover:text-foreground"
+                    href={link.href}
+                  >
+                    {link.label}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : null}
         </div>
 
-        {socialLinks && socialLinks.length > 0 && (
-          <div className="my-8 flex flex-wrap justify-center gap-6 text-sm">
-            {socialLinks.map((social, index) => (
-              <Link
-                key={index}
-                href={social.href}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                aria-label={social.platform}
-              >
-                {social.icon ? (
-                  <SocialIcon name={social.icon} />
-                ) : (
-                  <span className="text-sm">{social.platform}</span>
-                )}
-              </Link>
-            ))}
-          </div>
-        )}
+        <div className="flex flex-col items-start justify-between gap-5 pt-5 md:flex-row md:items-center">
+          {copyright ? (
+            <p className="text-[13px] text-muted-foreground">
+              © {new Date().getFullYear()} {copyright}
+            </p>
+          ) : null}
 
-        <span className="text-muted-foreground block text-center text-sm">
-          &copy; {new Date().getFullYear()} {copyright ?? "All rights reserved"}
-        </span>
-      </div>
+          {socials.length > 0 ? (
+            <ul className="flex items-center gap-2">
+              {socials.map((social) => {
+                // An unresolvable lucide name must not render an empty square —
+                // fall back to the platform name as a text link.
+                const Glyph = social.icon ? icons[social.icon as keyof typeof icons] : undefined
+                return (
+                  <li key={`${social.platform}-${social.href}`}>
+                    <Link
+                      aria-label={social.platform}
+                      className={cn(
+                        Glyph
+                          ? cn(
+                              buttonVariants({ size: "icon-sm", variant: "ghost" }),
+                              "border border-border"
+                            )
+                          : "text-[13px] text-muted-foreground hover:text-foreground",
+                        "transition-colors duration-[180ms] ease-[var(--ease-emphasized)] active:translate-y-px"
+                      )}
+                      href={social.href}
+                      rel="noreferrer"
+                      target="_blank"
+                    >
+                      {Glyph ? <Glyph className="size-4" /> : social.platform}
+                    </Link>
+                  </li>
+                )
+              })}
+            </ul>
+          ) : null}
+        </div>
+      </Container>
     </footer>
   )
 }

package/templates/marketing-site/src/vexcms/blocks/Header/config.ts

@@ -1,6 +1,7 @@
 import { array, defineBlock, group, select, text, upload } from "@vexcms/core"
 
 import { TABLE_SLUG_IMAGES } from "~/db/constants"
+
 import { BLOCK_SLUG_HEADER } from "../constants"
 
 export const headerBlock = defineBlock({
@@ -24,6 +25,7 @@ export const headerBlock = defineBlock({
     menuItems: array({
       label: "Menu Items",
       items: group({
+        label: "Menu Item",
         fields: {
           label: text({ label: "Label", required: true }),
           href: text({ label: "Link", required: true }),
@@ -33,12 +35,13 @@ export const headerBlock = defineBlock({
         { label: "Features", href: "/features" },
         { label: "Pricing", href: "/pricing" },
         { label: "Roadmap", href: "/roadmap" },
-        { label: "Docs", href: "/docs" },
+        { label: "Docs", href: "https://docs.vexcms.dev" },
       ],
     }),
     actionButtons: array({
       label: "Action Buttons",
       items: group({
+        label: "Action Button",
         fields: {
           label: text({ label: "Button Label", required: true }),
           href: text({ label: "Button Link", required: true }),
@@ -54,8 +57,12 @@ export const headerBlock = defineBlock({
         },
       }),
       defaultValue: [
-        { label: "GitHub", href: "https://github.com/vexcms/vex", variant: "ghost" },
-        { label: "Get Started", href: "/docs", variant: "default" },
+        { label: "GitHub", href: "https://github.com/ianyimi/vex", variant: "ghost" },
+        {
+          label: "Get Started",
+          href: "https://docs.vexcms.dev/guides/quickstart/",
+          variant: "default",
+        },
       ],
     }),
   },