fulldev-ui 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fulldev-ui",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A component library built for Astro",
   "homepage": "https://ui.full.dev",
   "bugs": "https://github.com/fulldotdev/ui/issues",

package/src/blocks/{_Contact1.astro → Contact1.astro}

@@ -1,31 +1,31 @@
 ---
-// @ts-nocheck
-import Badges from 'fulldev-ui/components/Badges.astro'
-import Channel from 'fulldev-ui/components/Channel.astro'
-import Element from 'fulldev-ui/components/Element.astro'
+import Button from 'fulldev-ui/components/Button.astro'
+import Channels from 'fulldev-ui/components/Channels.astro'
+import Fields from 'fulldev-ui/components/Fields.astro'
 import Form from 'fulldev-ui/components/Form.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
-import Social from 'fulldev-ui/components/Social.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 
 interface Props extends BlockSchema {}
 
 const {
-  badge,
-  badges,
+  depth = 2,
   tagline,
   heading,
-  text,
   paragraph,
-  buttons,
+  content,
+  channels,
   socials,
   form,
   image,
-  channels,
   ...rest
 } = Astro.props
 ---
@@ -34,38 +34,40 @@ const {
   class:list="contact-1"
   {...rest}
 >
-  <Element>
-    <Element class:list="contact-1-segment">
-      <Element class:list="contact-1-content">
-        <Badges
-          size="sm"
-          {badges}
-        />
-        <Tagline
-          size="sm"
-          text={tagline}
-        />
-        <Heading
-          as="h1"
-          size="2xl"
-          text={heading}
-        />
-        <Paragraph text={paragraph} />
-      </Element>
-      <Element class:list="contact-1-channels">
-        {channels?.map((channel) => <Channel {...channel} />)}
-      </Element>
-      <Element class:list="contact-1-socials">
-        {socials?.map((social) => <Social href={social} />)}
-      </Element>
+  <Container>
+    <Prose
+      align="middle"
+      class="max-w-xl"
+    >
+      <Tagline text={tagline} />
+      <Heading
+        size="4xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Fragment set:html={content} />
+      <Channels {channels} />
+      <Group>
+        <Socials {socials} />
+      </Group>
       <Form
         action="/thank-you"
         method="POST"
-        {...form}
-      />
-    </Element>
-    <Image {...image} />
-  </Element>
+      >
+        <Fields fields={form?.fields} />
+        <Button
+          type="submit"
+          text={form?.submit}
+        />
+      </Form>
+      <Image {...image} />
+    </Prose>
+  </Container>
 </Section>
 
 <style is:global>

package/src/blocks/Contact2.astro

@@ -0,0 +1,98 @@
+---
+import Button from 'fulldev-ui/components/Button.astro'
+import Channels from 'fulldev-ui/components/Channels.astro'
+import Fields from 'fulldev-ui/components/Fields.astro'
+import Form from 'fulldev-ui/components/Form.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Image from 'fulldev-ui/components/Image.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Socials from 'fulldev-ui/components/Socials.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
+import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
+import Section from 'fulldev-ui/structures/Section.astro'
+import Split from 'fulldev-ui/structures/Split.astro'
+
+interface Props extends BlockSchema {}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  content,
+  channels,
+  socials,
+  form,
+  image,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="contact-2"
+  {...rest}
+>
+  <Container>
+    <Split>
+      <Prose
+        align="middle"
+        class="max-w-xl"
+      >
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <Channels {channels} />
+        <Group>
+          <Socials {socials} />
+        </Group>
+        <Form
+          action="/thank-you"
+          method="POST"
+        >
+          <Fields fields={form?.fields} />
+          <Button
+            type="submit"
+            text={form?.submit}
+          />
+        </Form>
+      </Prose>
+      <Image {...image} />
+    </Split>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .contact-2 {
+      @apply relative w-full;
+
+      .container {
+        @apply flex flex-col gap-16;
+      }
+
+      .contact-2-segment {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .contact-2-content {
+        @apply flex max-w-screen-md flex-col gap-4;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Content1.astro

@@ -21,6 +21,7 @@ const { depth, tagline, heading, paragraph, buttons, image, content } =
     <Prose align="middle">
       <Tagline text={tagline} />
       <Heading
+        size="5xl"
         text={heading}
         {depth}
       />

package/src/blocks/Content2.astro

@@ -26,6 +26,7 @@ const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
       <Prose>
         <Tagline text={tagline} />
         <Heading
+          size="4xl"
           text={heading}
           {depth}
         />

package/src/blocks/Content3.astro

@@ -26,6 +26,7 @@ const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
       <Prose>
         <Tagline text={tagline} />
         <Heading
+          size="4xl"
           text={heading}
           {depth}
         />

package/src/blocks/Content4.astro

@@ -2,6 +2,7 @@
 import Buttons from 'fulldev-ui/components/Buttons.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
+import List from 'fulldev-ui/components/List.astro'
 import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
@@ -13,16 +14,17 @@ import Split from 'fulldev-ui/structures/Split.astro'
 
 interface Props extends BlockSchema {}
 
-const { depth, tagline, heading, paragraph, buttons, image, content } =
+const { depth, tagline, heading, paragraph, buttons, image, content, list } =
   Astro.props
 ---
 
 <Section class="content-4">
   <Container>
     <Split align="sticky">
-      <Prose>
+      <Prose class="lg:max-w-xl">
         <Tagline text={tagline} />
         <Heading
+          size="4xl"
           text={heading}
           {depth}
         />
@@ -31,6 +33,7 @@ const { depth, tagline, heading, paragraph, buttons, image, content } =
           size="lg"
           text={paragraph}
         />
+        <List items={list} />
         <Group>
           <Buttons {buttons} />
         </Group>
@@ -39,6 +42,10 @@ const { depth, tagline, heading, paragraph, buttons, image, content } =
         <Image {...image} />
         <Fragment set:html={content} />
         <slot />
+        <Buttons
+          class="lg:hidden"
+          {buttons}
+        />
       </Prose>
     </Split>
   </Container>

package/src/blocks/Content5.astro

@@ -21,6 +21,7 @@ const { depth, tagline, heading, paragraph, buttons, image, content } =
     <Prose>
       <Tagline text={tagline} />
       <Heading
+        size="5xl"
         text={heading}
         {depth}
       />

package/src/blocks/Content6.astro

@@ -30,13 +30,14 @@ const {
     <Prose class="mx-auto py-8">
       <Tagline text={tagline} />
       <Heading
+        size="5xl"
         text={heading}
         {depth}
       />
       <Paragraph
-        muted
         size="lg"
         text={paragraph}
+        muted
       />
       <Image {...image} />
       <Fragment set:html={content} />

package/src/blocks/Content7.astro

@@ -38,6 +38,7 @@ const {
     <Prose class="mx-auto py-8">
       <Tagline text={tagline} />
       <Heading
+        size="4xl"
         text={heading}
         {depth}
       />

package/src/blocks/Content8.astro

@@ -28,6 +28,7 @@ const { depth, tagline, heading, paragraph, buttons, image, content, menus } =
     <Prose class="max-w-none py-8">
       <Tagline text={tagline} />
       <Heading
+        size="4xl"
         text={heading}
         {depth}
       />

package/src/blocks/Cta1.astro

@@ -8,8 +8,8 @@ import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
 import Panel from 'fulldev-ui/structures/Panel.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
-import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
 interface Props extends BlockSchema {}
 
@@ -28,7 +28,7 @@ const {
 <Section class:list="cta-1">
   <Container>
     <Panel>
-      <Writeup align="center">
+      <Prose align="center">
         <Tagline text={tagline} />
         <Heading
           size="5xl"
@@ -49,7 +49,7 @@ const {
             {buttons}
           />
         </Group>
-      </Writeup>
+      </Prose>
       <Image {...image} />
     </Panel>
   </Container>

package/src/blocks/Cta2.astro

@@ -24,7 +24,7 @@ const { depth, tagline, heading, paragraph, buttons, image, content, ...rest } =
 >
   <Container>
     <Panel class="p-0">
-      <Split class="items-center">
+      <Split align="center">
         <Prose class="px-4 sm:px-8 lg:px-16">
           <Tagline text={tagline} />
           <Heading

package/src/blocks/Features1.astro

@@ -5,6 +5,7 @@ import Paragraph from 'fulldev-ui/components/Paragraph.astro'
 import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Stack from 'fulldev-ui/structures/Stack.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
@@ -19,7 +20,7 @@ const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
   {...rest}
 >
   <Container>
-    <Writeup>
+    <Prose>
       <Tagline
         size="sm"
         text={tagline}
@@ -33,7 +34,7 @@ const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
         size="lg"
         text={paragraph}
       />
-    </Writeup>
+    </Prose>
     <Stack>
       {
         cards?.map(({ icon, heading, paragraph }) => (

package/src/blocks/Features2.astro

@@ -6,6 +6,7 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Matrix from 'fulldev-ui/structures/Matrix.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
 import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
@@ -19,7 +20,7 @@ const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
   {...rest}
 >
   <Container>
-    <Writeup>
+    <Prose>
       <Tagline
         size="sm"
         text={tagline}
@@ -33,7 +34,7 @@ const { depth = 2, tagline, heading, paragraph, cards, ...rest } = Astro.props
         size="lg"
         text={paragraph}
       />
-    </Writeup>
+    </Prose>
     <Matrix size="sm">
       {
         cards?.map(({ icon, heading, paragraph }) => (

package/src/blocks/Header.astro

@@ -65,6 +65,7 @@ const { logo, links, menus, socials, search, themer, button } = Astro.props
 
       <Button
         size="sm"
+        variant="outline"
         {...button}
       />
       <!-- <Button

package/src/blocks/Hero1.astro

@@ -33,7 +33,7 @@ const {
   {...rest}
 >
   <Container class="flex flex-col items-center gap-16">
-    <Prose class="flex flex-col items-center text-center">
+    <Prose align="center">
       <Proof {...proof} />
       <Chip
         size="lg"
@@ -62,7 +62,7 @@ const {
       </Group>
     </Prose>
     <Image
-      class="max-h-[700px] w-auto rounded-lg"
+      class="mx-auto max-h-[700px] w-auto rounded-lg"
       {...image}
     />
   </Container>

package/src/blocks/Intro1.astro

@@ -7,8 +7,8 @@ import Tagline from 'fulldev-ui/components/Tagline.astro'
 import type { BlockSchema } from 'fulldev-ui/schemas/block'
 import Container from 'fulldev-ui/structures/Container.astro'
 import Group from 'fulldev-ui/structures/Group.astro'
+import Prose from 'fulldev-ui/structures/Prose.astro'
 import Section from 'fulldev-ui/structures/Section.astro'
-import Writeup from 'fulldev-ui/structures/Writeup.astro'
 
 interface Props extends BlockSchema {}
 
@@ -30,7 +30,7 @@ const {
   {...rest}
 >
   <Container>
-    <Writeup>
+    <Prose>
       <Tagline
         size="sm"
         text={tagline}
@@ -49,7 +49,7 @@ const {
           {buttons}
         />
       </Group>
-    </Writeup>
+    </Prose>
     <Image {...image} />
   </Container>
 </Section>

package/src/blocks/JobCategory1.astro

@@ -1,6 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content'
-import { getCollection } from 'astro:content'
+import { getCollection, getEntries } from 'astro:content'
 import Heading from 'fulldev-ui/components/Heading.astro'
 import Image from 'fulldev-ui/components/Image.astro'
 import List from 'fulldev-ui/components/List.astro'
@@ -28,6 +28,8 @@ const jobs = await getCollection('pages', (page) =>
       category.slug == slug || pages?.some((p) => p.slug == category.slug)
   )
 )
+
+const pageEntries = pages && (await getEntries(pages))
 ---
 
 <Section
@@ -47,13 +49,13 @@ const jobs = await getCollection('pages', (page) =>
   <Container class="flex flex-col gap-12">
     <Matrix class="gap-2">
       {
-        pages?.map(({ slug, data: { title, image } }) => (
+        pageEntries?.map(({ slug, data: { title, image } }) => (
           <Card
             class="grid grid-cols-3 items-center bg-transparent p-0"
             href={getHref(slug)}
           >
             <Image
-              class="h-full w-auto rounded-sm object-cover"
+              class="h-auto w-full rounded-sm object-cover"
               {...image}
             />
             <Heading

package/src/blocks/Projects1.astro

@@ -28,19 +28,15 @@ const {
 
 <Section class="projects-1">
   <Container>
-    <Split class="items-start">
-      <Prose class="lg:sticky lg:top-sticky-16 lg:max-w-xl">
+    <Split align="sticky">
+      <Prose class="max-w-xl">
         <Tagline text={tagline} />
         <Heading
-          size="4xl"
+          size="3xl"
           text={heading}
           {depth}
         />
-        <Paragraph
-          muted
-          size="lg"
-          text={paragraph}
-        />
+        <Paragraph text={paragraph} />
         <Fragment set:html={content} />
         <Group>
           <Buttons
@@ -51,8 +47,12 @@ const {
       </Prose>
       <Element class="flex flex-col gap-8">
         {
-          cards?.map(({ image, badges, heading, paragraph }) => (
-            <Element class="flex flex-col gap-2">
+          cards?.map(({ href, image, badges, heading, paragraph }) => (
+            <Element
+              class="flex flex-col gap-2"
+              as="a"
+              {href}
+            >
               <Image
                 class="mb-4"
                 {...image}

package/src/components/Block.astro

@@ -25,8 +25,9 @@ cards = [
   })),
   ...(await getEntries(pages || [])).map(({ slug, data }) => ({
     href: getHref(slug),
-    ...data,
     heading: data.title,
+    paragraph: data.description,
+    ...data,
   })),
 ]
 ---

package/src/components/Channel.astro

@@ -3,6 +3,7 @@ import type { HTMLAttributes } from 'astro/types'
 import Button from 'fulldev-ui/components/Button.astro'
 import Element from 'fulldev-ui/components/Element.astro'
 import Heading from 'fulldev-ui/components/Heading.astro'
+import type { ComponentProps } from 'svelte'
 
 interface Props extends HTMLAttributes<'div'> {
   variant?: 'secondary' | 'outline' | undefined
@@ -11,6 +12,7 @@ interface Props extends HTMLAttributes<'div'> {
   text?: string | undefined
   href?: string | undefined
   icon?: string | undefined
+  target?: ComponentProps<typeof Button>['target']
 }
 
 const {
@@ -20,6 +22,7 @@ const {
   icon,
   heading,
   text,
+  target,
   ...rest
 } = Astro.props
 ---
@@ -34,6 +37,7 @@ const {
     {size}
     {href}
     {icon}
+    {target}
   />
   <Element class:list="channel-content">
     <Heading

package/src/components/Field.astro

@@ -0,0 +1,33 @@
+---
+import Input from 'fulldev-ui/components/Input.astro'
+import Select from 'fulldev-ui/components/Select.astro'
+import Textarea from 'fulldev-ui/components/Textarea.astro'
+
+interface Props {
+  label?: string | undefined
+  placeholder?: string | undefined
+  value?: string | undefined
+  required?: boolean | undefined
+  disabled?: boolean | undefined
+  type?: keyof typeof components | undefined
+}
+
+const { type = 'text', ...rest } = Astro.props
+
+const components = {
+  select: Select,
+  textarea: Textarea,
+  text: Input,
+  number: Input,
+  tel: Input,
+  email: Input,
+  password: Input,
+}
+
+const Component = components[type]
+---
+
+<Component
+  class:list="field"
+  {...rest}
+/>

package/src/components/Fields.astro

@@ -0,0 +1,20 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Field from 'fulldev-ui/components/Field.astro'
+
+interface Props extends ComponentProps<typeof Field> {
+  field?: ComponentProps<typeof Field> | undefined
+  fields?: ComponentProps<typeof Field>[] | undefined
+}
+
+const { field, fields, ...rest } = Astro.props
+---
+
+{
+  [field, ...(fields || [])].filter(Boolean).map((field) => (
+    <Field
+      {...rest}
+      {...field}
+    />
+  ))
+}

package/src/components/Heading.astro

@@ -75,7 +75,6 @@ const { depth = 2, as = `h${depth}`, text, ...rest } = Astro.props
       @apply text-3xl;
     }
 
-    &:where(.prose > h2:not(:is(h1 ~ h2))),
     &.size-4xl {
       @apply text-4xl;
     }

package/src/components/Select.astro

@@ -5,7 +5,7 @@ import Icon from 'fulldev-ui/components/Icon.astro'
 import Label from 'fulldev-ui/components/Label.astro'
 
 interface Props extends HTMLAttributes<'select'> {
-  show?: any
+  size?: 'sm' | 'md' | 'lg' | undefined
   label?: string | undefined
   placeholder?: string | undefined
   options?: string[] | undefined

package/src/components/Tagline.astro

@@ -23,26 +23,26 @@ const { text, ...rest } = Astro.props
 <style is:global>
   @layer fulldev {
     .tagline {
-      @apply font-semibold leading-tight text-primary;
+      @apply font-medium text-primary;
 
       &.size-xs {
-        @apply text-xs;
+        @apply text-xs leading-tight;
       }
 
       &.size-sm {
-        @apply text-sm;
+        @apply text-sm leading-tight;
       }
 
       &.size-md {
-        @apply text-base;
+        @apply text-base leading-tight;
       }
 
       &.size-lg {
-        @apply text-lg;
+        @apply text-lg leading-tight;
       }
 
       &.size-xl {
-        @apply text-xl;
+        @apply text-xl leading-tight;
       }
     }
   }

package/src/components/Toc.astro

@@ -2,7 +2,7 @@
 import type { MarkdownHeading } from 'astro'
 import type { HTMLAttributes } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Link from 'fulldev-ui/components/Link.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
 import Links from './Links.astro'
 
 interface Props extends HTMLAttributes<'div'> {
@@ -26,11 +26,15 @@ const links = filteredHeadings?.map((button: any) => ({
   class:list="toc"
   {...rest}
 >
-  <Link
-    text={heading}
-    href="#"
-    size="sm"
-  />
+  {
+    (links?.length || 0) > 0 && (
+      <Heading
+        as="h6"
+        text={heading}
+        size="sm"
+      />
+    )
+  }
   <Links
     {size}
     {links}

package/src/content/layouts/base.yml

@@ -163,3 +163,6 @@ menus:
         href: /docs/blocks/reviews/
       - text: Projects
         href: /docs/blocks/projects/
+
+footer:
+  menus: []

package/src/content/pages/index.mdx

@@ -4,8 +4,8 @@ _block: Hero1
 
 title: Fulldev UI - Astro component and block library, open-source
 description: Make websites rapidly with pre-built components and blocks.
-heading: Build complete websites with this Astro UI library
-paragraph: Everything you need to rapidly build content-driven websites. Components, blocks, layouts and complete page generation.
+heading: The Astro UI library for building content sites
+paragraph: Components and blocks to build content-driven websites.
 buttons:
   - text: Get Started
     href: /docs/

package/src/css/custom.css

@@ -1,5 +1,9 @@
 @import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900);
 
+* {
+  font-family: 'Inter', sans-serif;
+}
+
 mark {
   background-color: var(--brand-12) !important;
   color: var(--brand-1) !important;

package/src/integration/index.ts

@@ -50,6 +50,7 @@ export default function fulldevIntegration(
                 URL: envField.string({
                   context: 'client',
                   access: 'public',
+                  optional: true,
                 }),
                 STRIPE_RESTRICTED_KEY: envField.string({
                   context: 'client',

package/src/layouts/Page.astro

@@ -58,6 +58,7 @@ const { Content, headings } = await render()
   </Element>
   <Block
     _block="Footer"
+    {...rest}
     {...footer}
   />
 </Layout>

package/src/schemas/block.ts

@@ -17,6 +17,13 @@ export const blockSchema = cardSchema
     variants: z.record(z.string(), z.string().array()).optional(),
     categories: pathSchema('pages').array().optional(),
     menus: menuSchema.array().optional(),
+    form: z
+      .object({
+        fields: z.array(z.any()).optional(),
+        submit: z.string().optional(),
+      })
+      .strict()
+      .optional(),
     headings: z
       .array(
         z.object({

package/src/schemas/channel.ts

@@ -10,5 +10,6 @@ export const channelSchema = z
     href: z.string().optional(),
     size: z.enum(['sm', 'md', 'lg']).optional(),
     variant: z.enum(['secondary', 'outline']).optional(),
+    target: z.enum(['_blank', '_self', '_parent', '_top']).optional(),
   })
   .strict() satisfies z.ZodType<ComponentProps<typeof Channel>>

package/src/structures/Prose.astro

@@ -27,10 +27,14 @@ const { ...rest } = Astro.props
       }
 
       &.align-center {
-        @apply mx-auto flex max-w-screen-md;
+        @apply mx-auto flex max-w-screen-md flex-col items-center;
 
-        > *:not(* > *) {
+        > * {
           @apply text-center;
+
+          > * {
+            @apply text-left;
+          }
         }
       }
 
@@ -39,16 +43,25 @@ const { ...rest } = Astro.props
       }
 
       > *,
-      .tagline + * {
+      .tagline + *,
+      .proof + *,
+      .channel + .channel {
         @apply mt-4;
       }
 
       > .group,
       > .button,
-      > .buttons {
+      > .buttons,
+      > .channel {
         @apply mt-8;
       }
 
+      > .form,
+      > img,
+      > p > img {
+        @apply my-12;
+      }
+
       > h2 {
         @apply mt-10;
       }
@@ -71,11 +84,6 @@ const { ...rest } = Astro.props
         @apply rounded-md border border-destructive p-4 text-destructive;
       }
 
-      > img,
-      > p > img {
-        @apply my-12 rounded-md;
-      }
-
       blockquote > p + p {
         @apply !mt-1;
       }