fulldev-ui 0.6.0-beta.0 → 0.6.0-beta.10

package/src/blocks/Banner.astro

@@ -1,34 +1,32 @@
 ---
-import type { ComponentProps } from 'astro/types'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
 import Element from 'fulldev-ui/components/Element.astro'
-import Text from 'fulldev-ui/components/Text.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Container from 'fulldev-ui/structures/Container.astro'
 
-type Props = {
-  size?: 'sm' | 'md' | 'lg' | undefined
-  text?: ComponentProps<typeof Text>['text']
+interface Props extends HTMLAttributes<'header'>, BlockSchema {
+  as?: HTMLTag
 }
 
-const { size = 'sm', text, ...rest } = Astro.props
+const { as = 'header', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={'banner'}
-  as="header"
-  {size}
+  class:list="banner"
   {...rest}
 >
-  <Text text={text} />
+  <Container>
+    <Fragment set:html={text} />
+  </Container>
 </Element>
 
 <style is:global>
   @layer fulldev {
     .banner {
-      @apply relative z-50 flex w-full items-center justify-center overflow-hidden bg-primary px-gutter text-center text-sm text-primary-foreground;
-      height: var(--banner-height);
+      @apply relative flex w-full items-center bg-primary py-2.5 text-primary-foreground;
 
-      &,
-      & ~ * {
-        --banner-height: 32px;
+      .container {
+        @apply flex items-center justify-center overflow-hidden bg-primary text-center text-sm leading-none text-primary-foreground;
       }
     }
   }

package/src/blocks/Colleagues1.astro

@@ -0,0 +1,73 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Element from 'fulldev-ui/components/Element.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 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 Section from 'fulldev-ui/structures/Section.astro'
+import Writeup from 'fulldev-ui/structures/Writeup.astro'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="colleagues-1"
+  {...rest}
+>
+  <Container>
+    <Writeup align="center">
+      <Tagline
+        size="sm"
+        text={tagline}
+      />
+      <Heading
+        size="3xl"
+        text={heading}
+      />
+      <Paragraph text={paragraph} />
+    </Writeup>
+    <Matrix>
+      {
+        cards?.map(({ image, heading, paragraph }) => (
+          <Element class:list="colleagues-card">
+            <Image {...image} />
+            <Heading
+              as="h3"
+              size="xl"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Element>
+        ))
+      }
+    </Matrix>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .colleagues-1 {
+      .container {
+        @apply flex flex-col items-center gap-16;
+      }
+
+      .colleagues-cards {
+        @apply grid grid-cols-1 gap-8 lg:grid-cols-3;
+      }
+
+      .colleagues-card {
+        @apply flex flex-col items-center text-center;
+      }
+
+      .image {
+        @apply mb-4 aspect-square w-2/3 rounded-full object-cover;
+      }
+    }
+  }
+</style>

package/src/blocks/Contact1.astro

@@ -0,0 +1,95 @@
+---
+// @ts-nocheck
+import type { ComponentProps } from 'astro/types'
+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 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 Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { BlockSchema } from 'fulldev-ui/schemas/block'
+import Section from 'fulldev-ui/structures/Section.astro'
+
+interface Props extends ComponentProps<typeof Section>, BlockSchema {}
+
+const {
+  badge,
+  badges,
+  tagline,
+  heading,
+  text,
+  paragraph,
+  buttons,
+  socials,
+  form,
+  image,
+  channels,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="contact-1"
+  {...rest}
+>
+  <Element>
+    <Element class:list="contact-1-segment">
+      <Element class:list="contact-1-content">
+        <Badges
+          size="sm"
+          {badge}
+          {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>
+      <Form
+        action="/thank-you"
+        method="POST"
+        {...form}
+      />
+    </Element>
+    <Image {...image} />
+  </Element>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .contact-1 {
+      @apply relative w-full;
+
+      .container {
+        @apply flex flex-col gap-16;
+      }
+
+      .contact-1-segment {
+        @apply flex flex-col items-start gap-8;
+      }
+
+      .contact-1-content {
+        @apply flex max-w-screen-md flex-col gap-4;
+      }
+
+      .image {
+        @apply rounded-md;
+      }
+    }
+  }
+</style>

package/src/blocks/Content1.astro

@@ -0,0 +1,56 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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 {
+  depth?: 1 | 2 | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+} = Astro.props
+---
+
+<Section class="content-1">
+  <Container>
+    <Prose>
+      <Tagline text={tagline} />
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+</Section>

package/src/blocks/Content2.astro

@@ -0,0 +1,63 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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 {
+  depth?: 1 | 2 | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class="content-2"
+  {...rest}
+>
+  <Container>
+    <Split class="items-center">
+      <Prose>
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <slot />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Image {...image} />
+    </Split>
+  </Container>
+</Section>

package/src/blocks/Content3.astro

@@ -0,0 +1,66 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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 {
+  depth?: 1 | 2 | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class="content-3"
+  {...rest}
+>
+  <Container>
+    <Split class="items-start">
+      <Prose class="lg:sticky lg:top-sticky-16">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Fragment set:html={content} />
+        <slot />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Image
+        class="lg:sticky lg:top-sticky-16"
+        {...image}
+      />
+    </Split>
+  </Container>
+</Section>

package/src/blocks/Content4.astro

@@ -0,0 +1,61 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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 {
+  depth?: 1 | 2 | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+} = Astro.props
+---
+
+<Section class="content-4">
+  <Container>
+    <Split class="items-start">
+      <Prose class="lg:sticky lg:top-sticky-16">
+        <Tagline text={tagline} />
+        <Heading
+          size="4xl"
+          text={heading}
+          {depth}
+        />
+        <Paragraph
+          muted
+          size="lg"
+          text={paragraph}
+        />
+        <Group>
+          <Buttons {buttons} />
+        </Group>
+      </Prose>
+      <Prose>
+        <Image {...image} />
+        <Fragment set:html={content} />
+        <slot />
+      </Prose>
+    </Split>
+  </Container>
+</Section>

package/src/blocks/Content5.astro

@@ -0,0 +1,58 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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 {
+  depth?: 1 | 2 | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+} = Astro.props
+---
+
+<Section class="content-5">
+  <Container class="flex flex-col items-start gap-8">
+    <Prose>
+      <Tagline text={tagline} />
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+    </Prose>
+    <Prose class="max-w-none break-inside-avoid gap-x-gutter lg:columns-2">
+      <Fragment set:html={content} />
+      <slot />
+    </Prose>
+    <Group>
+      <Buttons {buttons} />
+    </Group>
+    <Image {...image} />
+  </Container>
+</Section>

package/src/blocks/Content6.astro

@@ -0,0 +1,66 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Menu from 'fulldev-ui/components/Menu.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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 Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props {
+  depth?: 1 | 2 | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  toc?: ComponentProps<typeof Menu> | undefined
+}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  toc,
+} = Astro.props
+---
+
+<Container class="content-6 flex items-start justify-between px-0">
+  <Container class="lg:!max-w-[calc(100%-var(--sidebar-width))]">
+    <Prose class="mx-auto py-8">
+      <Tagline text={tagline} />
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+  <Sidebar>
+    <Menu
+      size="sm"
+      heading={toc?.heading}
+      links={toc?.links}
+    />
+  </Sidebar>
+</Container>

package/src/blocks/Content7.astro

@@ -0,0 +1,75 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Menu from 'fulldev-ui/components/Menu.astro'
+import Menus from 'fulldev-ui/components/Menus.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+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 Sidebar from 'fulldev-ui/structures/Sidebar.astro'
+
+interface Props {
+  depth?: 1 | 2 | undefined
+  tagline?: string | undefined
+  heading?: string | undefined
+  paragraph?: string | undefined
+  content?: string | undefined
+  image?: ComponentProps<typeof Image> | undefined
+  buttons?: ComponentProps<typeof Buttons>['buttons']
+  toc?: ComponentProps<typeof Menu> | undefined
+  sidebar?: ComponentProps<typeof Menus>['menus']
+}
+
+const {
+  depth = 2,
+  tagline,
+  heading,
+  paragraph,
+  buttons,
+  image,
+  content,
+  sidebar,
+  toc,
+} = Astro.props
+---
+
+<Container class="content-7 flex items-start justify-between px-0">
+  <Sidebar>
+    <Menus
+      size="sm"
+      menus={sidebar}
+    />
+  </Sidebar>
+  <Container class="lg:!max-w-[calc(100%-(2*var(--sidebar-width)))]">
+    <Prose class="mx-auto py-8">
+      <Tagline text={tagline} />
+      <Heading
+        size="5xl"
+        text={heading}
+        {depth}
+      />
+      <Paragraph
+        muted
+        size="lg"
+        text={paragraph}
+      />
+      <Image {...image} />
+      <Fragment set:html={content} />
+      <slot />
+      <Group>
+        <Buttons {buttons} />
+      </Group>
+    </Prose>
+  </Container>
+  <Sidebar>
+    <Menu
+      size="sm"
+      heading={toc?.heading}
+      links={toc?.links}
+    />
+  </Sidebar>
+</Container>