fulldev-ui 0.5.0-beta.8 → 0.6.0-beta-4

package/public/favicon/manifest.webmanifest

@@ -1,10 +1,14 @@
 {
   "name": "Fulldev UI",
   "short_name": "Fulldev UI",
-  "description": "A Multi-platform Favicon generator for Astro Project.",
+  "description": "Fulldev UI",
   "dir": "auto",
-  "lang": "en-US",
+  "lang": "en-GB",
   "display": "standalone",
+  "display_override": [
+    "window-controls-overlay",
+    "standalone"
+  ],
   "orientation": "any",
   "start_url": "/?homescreen=1",
   "background_color": "#fff",
@@ -20,7 +24,7 @@
       "src": "/favicon/android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any"
+      "purpose": "maskable"
     }
   ]
 }

package/src/blocks/Banner.astro

@@ -1,47 +1,32 @@
 ---
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.astro'
 import Element from 'fulldev-ui/components/Element.astro'
-import Text from 'fulldev-ui/components/Text.astro'
+import type { BannerSchema } from 'fulldev-ui/schemas/blocks/banner'
 
-type Props = {
-  color?: 'base' | 'brand' | undefined
-  size?: 'sm' | 'md' | 'lg' | undefined
-  text?: string | undefined
+interface Props extends HTMLAttributes<'header'>, BannerSchema {
+  as?: HTMLTag
 }
 
-const { color = 'brand', size = 'sm', text, ...rest } = Astro.props
+const { as = 'header', text, ...rest } = Astro.props
 ---
 
 <Element
-  class:list={'banner'}
-  as="header"
-  {size}
-  {color}
+  class:list="banner"
   {...rest}
 >
-  <Text text={text} />
+  <Container>
+    <Fragment set:html={text} />
+  </Container>
 </Element>
 
-<style lang="scss" is:global>
+<style is:global>
   @layer fulldev {
     .banner {
-      display: flex;
-      position: relative;
-      justify-content: center;
-      align-items: center;
-      background-color: var(--color-9);
-      padding: 0 var(--gutter);
-      width: 100%;
-      min-height: var(--banner-height);
-      overflow: hidden;
-      text-align: center;
+      @apply relative flex w-full items-center bg-primary py-3 text-primary-foreground;
 
-      .text {
-        color: var(--color-contrast);
-      }
-
-      &,
-      & ~ * {
-        --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/Contact1.astro

@@ -0,0 +1,92 @@
+---
+import type { ComponentProps } from 'astro/types'
+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 Section from 'fulldev-ui/components/Section.astro'
+import Social from 'fulldev-ui/components/Social.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { ContactSchema } from 'fulldev-ui/schemas/blocks/contact'
+
+interface Props extends ComponentProps<typeof Section>, ContactSchema {}
+
+const {
+  heading,
+  form,
+  text,
+  tagline,
+  googleMaps,
+  paragraph,
+  buttons,
+  socials,
+  position,
+  image,
+  channels,
+  level = 1,
+  ...rest
+} = Astro.props
+---
+
+<Section
+  class:list="contact-1"
+  {...rest}
+>
+  <Element>
+    <Element class:list="contact-1-segment">
+      <Element class:list="contact-1-content">
+        <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
+      {position}
+      {...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/Cta1.astro

@@ -0,0 +1,72 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+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 Panel from 'fulldev-ui/components/Panel.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { CtaSchema } from 'fulldev-ui/schemas/blocks/cta.ts'
+
+interface Props extends ComponentProps<typeof Section>, CtaSchema {}
+
+const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
+---
+
+<Section
+  class:list="cta-1"
+  {...rest}
+>
+  <Container>
+    <Panel>
+      <Element class="cta-1-segment">
+        <Element class="cta-1-content">
+          <Tagline text={tagline} />
+          <Heading
+            size="4xl"
+            as="h2"
+            text={heading}
+          />
+          <Paragraph
+            size="lg"
+            text={paragraph}
+          />
+        </Element>
+        <Buttons
+          {buttons}
+          size="lg"
+        />
+      </Element>
+      <Image {...image} />
+    </Panel>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .cta-1 {
+      .panel {
+        @apply flex flex-col items-center gap-16;
+      }
+
+      .cta-1-segment {
+        @apply z-10 flex flex-col items-center gap-8 text-center;
+      }
+
+      .cta-1-content {
+        @apply flex max-w-screen-md flex-col items-center gap-4 text-center;
+      }
+
+      .text {
+        @apply text-balance;
+      }
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Feature1.astro

@@ -0,0 +1,67 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Buttons from 'fulldev-ui/components/Buttons.astro'
+import Container from 'fulldev-ui/components/Container.astro'
+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 Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { FeatureSchema } from 'fulldev-ui/schemas/blocks/feature'
+
+interface Props extends ComponentProps<typeof Section>, FeatureSchema {}
+
+const { tagline, heading, paragraph, buttons, image, ...rest } = Astro.props
+---
+
+<Section
+  class:list="feature-1"
+  {...rest}
+>
+  <Container>
+    <Element class="feature-1-segment">
+      <Element class="feature-1-content">
+        <Tagline
+          size="sm"
+          text={tagline}
+        />
+        <Heading
+          size="3xl"
+          text={heading}
+        />
+        <Paragraph
+          size="lg"
+          text={paragraph}
+        />
+      </Element>
+      <Buttons
+        variant="secondary"
+        {buttons}
+      />
+    </Element>
+    <Image {...image} />
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .feature-1 {
+      .container {
+        @apply gap-x-gutter gap-y-12 lg:grid lg:grid-cols-2 lg:items-center;
+      }
+
+      .feature-1-segment {
+        @apply flex flex-col items-start gap-6 lg:max-w-xl;
+      }
+
+      .feature-1-content {
+        @apply flex max-w-screen-md flex-col items-start gap-3;
+      }
+
+      .image {
+        @apply rounded-lg;
+      }
+    }
+  }
+</style>

package/src/blocks/Features1.astro

@@ -0,0 +1,75 @@
+---
+import type { ComponentProps } from 'astro/types'
+import Container from 'fulldev-ui/components/Container.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Icon from 'fulldev-ui/components/Icon.astro'
+import Paragraph from 'fulldev-ui/components/Paragraph.astro'
+import Section from 'fulldev-ui/components/Section.astro'
+import Tagline from 'fulldev-ui/components/Tagline.astro'
+import type { FeaturesSchema } from 'fulldev-ui/schemas/blocks/features'
+
+interface Props extends ComponentProps<typeof Section>, FeaturesSchema {}
+
+const { tagline, heading, paragraph, cards, ...rest } = Astro.props
+---
+
+<Section
+  class:list="features-1"
+  {...rest}
+>
+  <Container>
+    <Element class="features-1-segment">
+      <Element class="features-1-content">
+        <Tagline
+          size="sm"
+          text={tagline}
+        />
+        <Heading
+          size="3xl"
+          text={heading}
+        />
+        <Paragraph
+          size="lg"
+          text={paragraph}
+        />
+      </Element>
+    </Element>
+    <Element class:list="features-1-cards">
+      {
+        cards?.map(({ icon, heading, paragraph }) => (
+          <Element class="features-1-card">
+            <Icon
+              size="lg"
+              name={icon}
+            />
+            <Heading
+              as="h3"
+              size="lg"
+              text={heading}
+            />
+            <Paragraph text={paragraph} />
+          </Element>
+        ))
+      }
+    </Element>
+  </Container>
+</Section>
+
+<style is:global>
+  @layer fulldev {
+    .features-1 {
+      .features-1-cards {
+        @apply grid grid-cols-1 gap-6 lg:grid-cols-3;
+      }
+
+      .features-1-card {
+        @apply flex flex-col gap-3;
+      }
+
+      .icon {
+        @apply text-primary;
+      }
+    }
+  }
+</style>

package/src/blocks/Footer.astro

@@ -1,7 +1,104 @@
 ---
-import FooterComponent from 'fulldev-ui/components/Footer.astro'
+import type { HTMLAttributes, HTMLTag } from 'astro/types'
+import Channel from 'fulldev-ui/components/Channel.astro'
+import Element from 'fulldev-ui/components/Element.astro'
+import Heading from 'fulldev-ui/components/Heading.astro'
+import Logo from 'fulldev-ui/components/Logo.astro'
+import Menu from 'fulldev-ui/components/Menu.astro'
+import { default as Paragraph } from 'fulldev-ui/components/Paragraph.astro'
+import Social from 'fulldev-ui/components/Social.astro'
+import type { FooterSchema } from 'fulldev-ui/schemas/components/footer'
 
-const { ...rest } = Astro.props
+interface Props extends HTMLAttributes<'footer'>, FooterSchema {
+  as?: HTMLTag
+}
+
+const {
+  as = 'footer',
+  logo,
+  heading,
+  paragraph,
+  socials,
+  channels,
+  menus,
+  // hours,
+  // html,
+  ...rest
+} = Astro.props
 ---
 
-<FooterComponent {...rest} />
+<Element
+  class:list="footer"
+  {as}
+  {...rest}
+>
+  <Element class:list="footer-container">
+    <Element class:list="footer-content">
+      <Logo
+        size="sm"
+        {...logo}
+      />
+      <Paragraph
+        size="sm"
+        text={paragraph}
+      />
+      <Element class:list="footer-socials">
+        {
+          socials?.map((social) => (
+            <Social
+              variant="secondary"
+              size="sm"
+              href={social}
+            />
+          ))
+        }
+      </Element>
+    </Element>
+    <Element class:list="footer-channels">
+      {channels?.map((channel) => <Channel {...channel} />)}
+    </Element>
+  </Element>
+  <!-- <Fragment set:html={html} /> -->
+  <!-- <Hours {hours} /> -->
+  <!-- <Menu
+    direction="row"
+    groups={menu}
+    {size}
+  /> -->
+  <!-- <Element class:list="hours column">
+    <Heading
+      text={hours?.heading}
+      as="h5"
+    />
+    <Element>
+      {
+        Object.entries(hours?.days ?? {})?.map(([key, value]: any) => (
+          <Element class:list="spread">
+            <Paragraph text={key} />
+            <Paragraph text={value} />
+          </Element>
+        ))
+      }
+    </Element>
+  </Element> -->
+</Element>
+
+<style is:global>
+  @layer fulldev {
+    .footer {
+      @apply relative mt-auto w-full border-t bg-background;
+
+      &.dark {
+        @apply bg-background;
+      }
+
+      .footer-container {
+        @apply container flex flex-wrap justify-between gap-12 py-12;
+      }
+
+      .footer-content {
+        @apply flex max-w-60 flex-col gap-4;
+      }
+    }
+  }
+</style>