fulldev-ui 0.6.0-beta.6 → 0.6.0-beta.8

package/src/content/layouts/base.yml

@@ -1,6 +1,7 @@
 head:
   title: Fulldev UI - Astro component and block library, open-source
-  image: /images/og-image.png
+  image:
+    src: /images/og-image.png
   theme: system
   code: |
     <script is:inline>
@@ -14,18 +15,22 @@ banner:
 
 header:
   search: true
+  themer: true
   logo:
-    image: /src/images/favicon/android-chrome-512x512.png
+    image:
+      src: /favicon/android-chrome-512x512.png
     text: Fulldev UI
   links:
     - text: Docs
       href: /docs/
     - text: Components
       href: /docs/components/badge/
+    - text: Structures
+      href: /docs/structures/container/
     - text: Blocks
       href: /docs/blocks/banner/
-    - text: Showcase
-      href: /showcase/
+    - text: Layouts
+      href: /docs/layouts/page/
   socials:
     - https://github.com/fulldotdev/ui
     - https://discord.gg/vXZqMbadm8
@@ -40,24 +45,131 @@ sidebar:
           href: /docs/installation/
         - text: Customization
           href: /docs/customization/
-        - text: Frameworks
+        - text: Integrating frameworks
           href: /docs/frameworks/
-        - text: Components
+        - text: Using components
           href: /docs/components/
-        - text: Collections
-          href: /docs/collections/
+        - text: Using structures
+          href: /docs/structures/
+        - text: Using blocks
+          href: /docs/blocks/
+        - text: Using layouts
+          href: /docs/layouts/
 
-footer:
-  logo:
-    text: Fulldev UI
-  menus:
-    - heading: Docs
+    - heading: Components
       links:
-        - text: Docs
-          href: /docs/
-        - text: Components
+        - text: Badge
           href: /docs/components/badge/
-        - text: Blocks
+        - text: Badges
+          href: /docs/components/badges/
+        - text: Button
+          href: /docs/components/button/
+        - text: Buttons
+          href: /docs/components/buttons/
+        - text: Channel
+          href: /docs/components/channel/
+        - text: Channels
+          href: /docs/components/channels/
+        - text: Checkbox
+          href: /docs/components/checkbox/
+        - text: Heading
+          href: /docs/components/heading/
+        - text: Icon
+          href: /docs/components/icon/
+        - text: Image
+          href: /docs/components/image/
+        - text: Input
+          href: /docs/components/input/
+        - text: Label
+          href: /docs/components/label/
+        - text: Link
+          href: /docs/components/link/
+        - text: Links
+          href: /docs/components/links/
+        - text: List
+          href: /docs/components/list/
+        - text: Logo
+          href: /docs/components/logo/
+        - text: Menu
+          href: /docs/components/menu/
+        - text: Paragraph
+          href: /docs/components/paragraph/
+        - text: Rating
+          href: /docs/components/rating/
+        - text: Select
+          href: /docs/components/select/
+        - text: Social
+          href: /docs/components/social/
+        - text: Socials
+          href: /docs/components/socials/
+        - text: Switch
+          href: /docs/components/switch/
+        - text: Tagline
+          href: /docs/components/tagline/
+        - text: Textarea
+          href: /docs/components/textarea/
+
+    - heading: Structures
+      links:
+        - text: Container
+          href: /docs/structures/container/
+        - text: Section
+          href: /docs/structures/section/
+        - text: Card
+          href: /docs/structures/card/
+        - text: Matrix
+          href: /docs/structures/matrix/
+        - text: Stack
+          href: /docs/structures/stack/
+        - text: Group
+          href: /docs/structures/group/
+        - text: Masonry
+          href: /docs/structures/masonry/
+        - text: Prose
+          href: /docs/structures/prose/
+        - text: Writeup
+          href: /docs/structures/writeup/
+        - text: Layout
+          href: /docs/structures/layout/
+        - text: Code
+          href: /docs/structures/code/
+        - text: Drawer
+          href: /docs/structures/drawer/
+        - text: Panel
+          href: /docs/structures/panel/
+
+    - heading: Blocks
+      links:
+        - text: Banner
           href: /docs/blocks/banner/
-        - text: Showcase
-          href: /showcase/
+        - text: Colleagues
+          href: /docs/blocks/colleagues/
+        - text: Content
+          href: /docs/blocks/content/
+        - text: Cta
+          href: /docs/blocks/cta/
+        - text: Feature
+          href: /docs/blocks/feature/
+        - text: Features
+          href: /docs/blocks/features/
+        - text: Footer
+          href: /docs/blocks/footer/
+        - text: Header
+          href: /docs/blocks/header/
+        - text: Hero
+          href: /docs/blocks/hero/
+        - text: Intro
+          href: /docs/blocks/intro/
+        - text: Logos
+          href: /docs/blocks/logos/
+        - text: Reviews
+          href: /docs/blocks/reviews/
+        - text: Projects
+          href: /docs/blocks/projects/
+
+    - heading: Layouts
+      links:
+        - text: Doc
+          href: /docs/layouts/doc/
+        - text: Page
+          href: /docs/layouts/page/

package/src/content/pages/base/toggle.mdx

@@ -0,0 +1,28 @@
+---
+_layout: doc
+title: Toggle
+---
+
+import Props from 'fulldev-ui/components/docs/Props.astro'
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle text="Click me" icon="click" />
+```
+
+## Props
+
+<Props />
+
+## Examples
+
+```astro live
+---
+import Toggle from 'fulldev-ui/components/Toggle.astro'
+---
+
+<Toggle icon={'code'} text="Auto save" toggled={true} />
+```

package/src/content/pages/{blocks → docs/blocks}/banner.mdx

@@ -1,4 +1,5 @@
 ---
+_layout: block
 title: Banner
 ---
 

package/src/content/pages/docs/blocks/colleagues.mdx

@@ -0,0 +1,49 @@
+---
+_layout: block
+title: Colleagues
+---
+
+```astro live
+---
+import Colleagues1 from 'fulldev-ui/blocks/Colleagues1.astro'
+---
+
+<Colleagues1
+  heading="Meet the team"
+  paragraph="Our team is made up of experienced professionals."
+  cards={[
+    {
+      image: {
+        src: '/images/avatar-1.jpeg',
+        alt: 'John Doe',
+      },
+      heading: 'John Doe',
+      paragraph: 'Ceo & Founder',
+    },
+    {
+      image: {
+        src: '/images/avatar-2.jpeg',
+        alt: 'Jane Doe',
+      },
+      heading: 'Jane Doe',
+      paragraph: 'Manager',
+    },
+    {
+      image: {
+        src: '/images/avatar-3.jpeg',
+        alt: 'John Smith',
+      },
+      heading: 'John Smith',
+      paragraph: 'Developer',
+    },
+    {
+      image: {
+        src: '/images/avatar-4.jpeg',
+        alt: 'Jane Smith',
+      },
+      heading: 'Jane Smith',
+      paragraph: 'Developer',
+    },
+  ]}
+/>
+```

package/src/content/pages/docs/blocks/content.mdx

@@ -0,0 +1,155 @@
+---
+_layout: block
+title: Content
+---
+
+## Content1
+
+```astro live
+---
+import Content1 from 'fulldev-ui/blocks/Content1.astro'
+---
+
+<Content1
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <h3>HTML Content Example</h3>
+    <p>This is an example of HTML content inserted into the Content block.</p>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+    </ul>
+  `
+/>
+```
+
+## Content2
+
+```astro live
+---
+import Content2 from 'fulldev-ui/blocks/Content2.astro'
+---
+
+<Content2
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <h3>HTML Content Example</h3>
+    <p>This is an example of HTML content inserted into the Content2 block. It demonstrates how you can use HTML to structure your content within the block.</p>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Fourth item</li>
+      <li>Fifth item</li>
+    </ul>
+    <p>Adding more content to make it longer. You can include various HTML elements such as headings, paragraphs, lists, images, and more to enrich your content.</p>
+    <p>Here is another paragraph to further extend the content. This allows you to provide more information and details within the Content2 block.</p>
+  `
+/>
+```
+
+## Content3
+
+```astro live
+---
+import Content3 from 'fulldev-ui/blocks/Content3.astro'
+---
+
+<Content3
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <h3>HTML Content Example</h3>
+    <p>This is an example of HTML content inserted into the Content2 block. It demonstrates how you can use HTML to structure your content within the block.</p>
+    <ul>
+      <li>First item</li>
+      <li>Second item</li>
+      <li>Third item</li>
+      <li>Fourth item</li>
+      <li>Fifth item</li>
+    </ul>
+    <p>Adding more content to make it longer. You can include various HTML elements such as headings, paragraphs, lists, images, and more to enrich your content.</p>
+    <p>Here is another paragraph to further extend the content. This allows you to provide more information and details within the Content2 block.</p>
+  `
+/>
+```
+
+## Content4
+
+```astro live
+---
+import Content4 from 'fulldev-ui/blocks/Content4.astro'
+---
+
+<Content4
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+  `
+/>
+```
+
+## Content5
+
+```astro live
+---
+import Content5 from 'fulldev-ui/blocks/Content5.astro'
+---
+
+<Content5
+  tagline="Lorem ipsum"
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil."
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+  content=`
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+    <p>
+      This is an example of HTML content inserted into the Content4 block. Lorem
+      ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quia, nulla!
+      Maiores et perferendis eaque, exercitationem praesentium nihil. Lorem ipsum
+      dolor sit amet consectetur adipisicing elit. Praesent sapien massa,
+      convallis a pellentesque nec, egestas non nisi. Donec rutrum congue leo eget
+      malesuada.
+    </p>
+  `
+/>
+```

package/src/content/pages/docs/blocks/cta.mdx

@@ -0,0 +1,16 @@
+---
+_layout: block
+title: Cta
+---
+
+```astro live
+---
+import Cta1 from 'fulldev-ui/blocks/Cta1.astro'
+---
+
+<Cta1
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur ades"
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+/>
+```

package/src/content/pages/docs/blocks/feature.mdx

@@ -0,0 +1,17 @@
+---
+_layout: block
+title: Feature
+---
+
+```astro live
+---
+import Feature1 from 'fulldev-ui/blocks/Feature1.astro'
+---
+
+<Feature1
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur ades"
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+/>
+```

package/src/content/pages/docs/blocks/features.mdx

@@ -0,0 +1,35 @@
+---
+_layout: block
+title: Features
+---
+
+```astro live
+---
+import Features1 from 'fulldev-ui/blocks/Features1.astro'
+---
+
+<Features1
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+  cards={[
+    {
+      icon: 'rocket',
+      heading: 'Lorem ipsum',
+      paragraph: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+      button: { text: 'Lorem ipsum', href: '' },
+    },
+    {
+      icon: 'pencil',
+      heading: 'Lorem ipsum',
+      paragraph: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+      button: { text: 'Lorem ipsum', href: '' },
+    },
+    {
+      icon: 'typography',
+      heading: 'Lorem ipsum',
+      paragraph: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
+      button: { text: 'Lorem ipsum', href: '' },
+    },
+  ]}
+/>
+```

package/src/content/pages/docs/blocks/footer.mdx

@@ -0,0 +1,46 @@
+---
+_layout: block
+title: Footer
+---
+
+```astro live
+---
+import Footer from 'fulldev-ui/blocks/Footer.astro'
+---
+
+<Footer
+  logo={{
+    image: { src: '/favicon/android-chrome-512x512.png' },
+    text: 'Fulldev UI',
+  }}
+  paragraph="Rapidly build content-driven websites."
+  socials={[
+    'https://github.com/fulldotdev/ui',
+    'https://discord.gg/vXZqMbadm8',
+  ]}
+  channels={[
+    { heading: 'Email', icon: 'mail', text: 'contact@full.dev' },
+    { heading: 'Phone', icon: 'phone', text: '+316 83485163' },
+  ]}
+  menus={[
+    {
+      heading: 'Get Started',
+      links: [
+        { href: '/docs/', text: 'Introduction' },
+        { href: '/docs/installation/', text: 'Installation' },
+        { href: '/docs/customization/', text: 'Customization' },
+        { href: '/docs/frameworks/', text: 'Frameworks' },
+      ],
+    },
+    {
+      heading: 'Docs',
+      links: [
+        { href: '/docs/components/badge/', text: 'Components' },
+        { href: '/docs/structures/Container/', text: 'Wrappers' },
+        { href: '/docs/blocks/banner/', text: 'Blocks' },
+        { href: '/docs/layouts/page/', text: 'Layouts' },
+      ],
+    },
+  ]}
+/>
+```

package/src/content/pages/docs/blocks/header.mdx

@@ -0,0 +1,60 @@
+---
+_layout: block
+title: Header
+---
+
+```astro live
+---
+import Header from 'fulldev-ui/blocks/Header.astro'
+---
+
+<Header
+  logo={{
+    image: { src: '/favicon/android-chrome-512x512.png' },
+    text: 'Fulldev UI',
+  }}
+  links={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+    },
+    {
+      text: 'Github',
+      href: 'https://github.com/fulldotdev/ui',
+    },
+  ]}
+  search
+  themer
+  socials={[
+    'https://github.com/fulldotdev/ui',
+    'https://discord.gg/vXZqMbadm8',
+  ]}
+  buttons={[
+    {
+      text: 'Contact',
+      variant: 'outline',
+    },
+  ]}
+  menus={[
+    {
+      links: [
+        { text: 'Docs', href: '/overview/introduction' },
+        { text: 'Components', href: '/typography/heading' },
+        { text: 'Blocks', href: '/blocks' },
+      ],
+    },
+    {
+      heading: 'Overview',
+      links: [
+        { text: 'Installation', href: '/overview/installation' },
+        { text: 'Integration', href: '/overview/integration' },
+        { text: 'Theming', href: '/overview/theming' },
+        { text: 'Frameworks', href: '/overview/frameworks' },
+      ],
+    },
+    { heading: 'Structure', folder: 'structure' },
+    { heading: 'Typography', folder: 'typography' },
+    { heading: 'Base', folder: 'base' },
+  ]}
+/>
+```

package/src/content/pages/docs/blocks/hero.mdx

@@ -0,0 +1,18 @@
+---
+_layout: block
+title: Hero
+---
+
+```astro live
+---
+import Hero1 from 'fulldev-ui/blocks/Hero1.astro'
+---
+
+<Hero1
+  badge={{ text: 'Lorem ipsum dolor' }}
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit"
+  buttons={[{ text: 'Lorem ipsum' }, { text: 'Lorem ipsum' }]}
+  image={{ src: '/images/placeholder-landscape.webp' }}
+/>
+```

package/src/content/pages/docs/blocks/intro.mdx

@@ -0,0 +1,16 @@
+---
+_layout: block
+title: Intro1
+---
+
+```astro live
+---
+import Intro1 from 'fulldev-ui/blocks/Intro1.astro'
+---
+
+<Intro1
+  heading="Lorem ipsum dolor sit amet"
+  paragraph="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[{ text: 'Get Started' }, { text: 'View Components' }]}
+/>
+```

package/src/content/pages/docs/blocks/logos.mdx

@@ -0,0 +1,37 @@
+---
+_layout: block
+title: Logos
+---
+
+```astro live
+---
+import Logos1 from 'fulldev-ui/blocks/Logos1.astro'
+---
+
+<Logos1
+  heading="Lorem ipsum dolor sit"
+  paragraph="Lorem ipsum dolor sit amet consectetur adipisicing elit."
+  images={[
+    {
+      src: '/images/placeholder-landscape.webp',
+      alt: 'Lorem ipsum',
+    },
+    {
+      src: '/images/placeholder-landscape.webp',
+      alt: 'Lorem ipsum',
+    },
+    {
+      src: '/images/placeholder-landscape.webp',
+      alt: 'Lorem ipsum',
+    },
+    {
+      src: '/images/placeholder-landscape.webp',
+      alt: 'Lorem ipsum',
+    },
+    {
+      src: '/images/placeholder-landscape.webp',
+      alt: 'Lorem ipsum',
+    },
+  ]}
+/>
+```