fulldev-ui 0.3.35 → 0.4.0-beta.0

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

@@ -0,0 +1,192 @@
+---
+_layout: BlockLayout
+
+title: Header
+image: /images/blocks/header.png
+---
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  links={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+    },
+    {
+      text: 'Github',
+      href: 'https://github.com/fulldotdev/ui',
+    },
+  ]}
+  buttons={[
+    {
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+  drawer={[
+    {
+      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' },
+  ]}
+/>
+```
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  links={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+    },
+    {
+      text: 'Github',
+      href: 'https://github.com/fulldotdev/ui',
+    },
+  ]}
+  buttons={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+    },
+    {
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+    },
+  ]}
+  frame="fill"
+  position="relative"
+/>
+```
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  links={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+    },
+    {
+      text: 'Github',
+      href: 'https://github.com/fulldotdev/ui',
+    },
+  ]}
+  buttons={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+      contrast: true,
+    },
+    {
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="panel"
+  position="relative"
+/>
+```
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  links={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+    },
+    {
+      text: 'Github',
+      href: 'https://github.com/fulldotdev/ui',
+    },
+  ]}
+  buttons={[
+    {
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+  color="brand"
+/>
+```
+
+```astro live
+---
+import Header from 'fulldev-ui/components/Header.astro'
+---
+
+<Header
+  heading="Fulldev UI"
+  links={[
+    {
+      text: 'Docs',
+      href: '/overview/introduction/',
+    },
+    {
+      text: 'Github',
+      href: 'https://github.com/fulldotdev/ui',
+    },
+  ]}
+  buttons={[
+    {
+      title: 'X / Twitter',
+      icon: 'brand-x',
+      href: 'https://x.com/silveltm',
+      target: '_blank',
+      contrast: true,
+    },
+  ]}
+  frame="fill"
+  position="relative"
+  color="brand"
+/>
+```

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

@@ -0,0 +1,97 @@
+---
+_layout: BlockLayout
+
+title: Hero
+image: /images/blocks/hero.png
+---
+
+```astro live
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+---
+
+<Hero
+  badge="Lorem ipsum dolor"
+  heading="Lorem ipsum dolor sit"
+  text="Lorem ipsum dolor sit amet consectetur adipisicing elit"
+  buttons={[
+    { text: 'Lorem ipsum', href: '' },
+    { text: 'Lorem ipsum', href: '' },
+  ]}
+  image="/images/placeholder-landscape.webp"
+/>
+```
+
+```astro live
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+---
+
+<Hero
+  heading="Lorem ipsum dolor sit"
+  text="Lorem ipsum dolor sit amet consectetur adipisicing elit"
+  buttons={[
+    { text: 'Lorem ipsum', href: '' },
+    { text: 'Lorem ipsum', href: '' },
+  ]}
+  structure="spread"
+  image="/images/placeholder-landscape.webp"
+/>
+```
+
+```astro live
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+---
+
+<Hero
+  badge="Lorem ipsum dolor"
+  heading="Lorem ipsum dolor consectetur amet"
+  text="Lorem ipsum dolor sit amet consectetur aler"
+  buttons={[
+    { text: 'Lorem ipsum', href: '' },
+    { text: 'Lorem ipsum', href: '' },
+  ]}
+  structure="split"
+  image="/images/placeholder-landscape.webp"
+/>
+```
+
+```astro live
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+---
+
+<Hero
+  badge="Lorem ipsum dolor"
+  heading="Lorem ipsum dolor consectetur amet"
+  text="Lorem ipsum dolor sit amet consectetur aler"
+  buttons={[
+    { text: 'Lorem ipsum', href: '' },
+    { text: 'Lorem ipsum', href: '' },
+  ]}
+  structure="split"
+  position="inset"
+  image="/images/placeholder-landscape.webp"
+/>
+```
+
+```astro live
+---
+import Hero from 'fulldev-ui/blocks/Hero.astro'
+---
+
+<Hero
+  heading="Lorem ipsum dolor sit"
+  text="Lorem ipsum dolor sit amet consectetur adipisicing elit"
+  buttons={[
+    { text: 'Lorem ipsum', href: '' },
+    { text: 'Lorem ipsum', href: '' },
+  ]}
+  image="/images/placeholder-landscape-dark.png"
+  position="background"
+  align="center"
+  frame="viewport"
+  justify="center"
+/>
+```

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

@@ -0,0 +1,132 @@
+---
+_layout: BlockLayout
+
+title: Intro
+image: /images/blocks/intro.png
+---
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  heading="Lorem ipsum dolor sit amet"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[
+    { text: 'Get Started', href: '', contrast: true },
+    { text: 'View Components', href: '', contrast: true },
+  ]}
+/>
+```
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  heading="Lorem ipsum dolor sit amet"
+  align="center"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+/>
+```
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  heading="Lorem ipsum dolor sit amet"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[
+    { text: 'Get Started', href: '' },
+    { text: 'View Components', href: '' },
+  ]}
+/>
+```
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  color="brand"
+  heading="Lorem ipsum dolor sit amet"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[
+    { text: 'Get Started', href: '' },
+    { text: 'View Components', href: '' },
+  ]}
+/>
+```
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  variant="primary"
+  color="brand"
+  heading="Lorem ipsum dolor sit amet"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[
+    { text: 'Get Started', href: '' },
+    { text: 'View Components', href: '' },
+  ]}
+/>
+```
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  frame="fill"
+  variant="primary"
+  heading="Lorem ipsum dolor sit amet"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[
+    { text: 'Get Started', href: '' },
+    { text: 'View Components', href: '' },
+  ]}
+/>
+```
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  frame="fill"
+  variant="primary"
+  heading="Lorem ipsum dolor sit amet"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[
+    { text: 'Get Started', href: '', contrast: true },
+    { text: 'View Components', href: '', contrast: true },
+  ]}
+/>
+```
+
+```astro live
+---
+import Intro from 'fulldev-ui/blocks/Intro.astro'
+---
+
+<Intro
+  frame="panel"
+  variant="primary"
+  heading="Lorem ipsum dolor sit amet"
+  text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Nulla facilisi. Nulla facilisi. Sed do eiusmod tempor."
+  buttons={[
+    { text: 'Get Started', href: '', contrast: true },
+    { text: 'View Components', href: '', contrast: true },
+  ]}
+/>
+```

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

@@ -0,0 +1,40 @@
+---
+_layout: BlockLayout
+
+title: Posts
+image: /images/blocks/posts.png
+---
+
+```astro live
+---
+import Posts from 'fulldev-ui/blocks/Posts.astro'
+---
+
+<Posts
+  heading="Latest posts"
+  text="Read the latest articles from our blog."
+  cards={[
+    {
+      tagline: '2024-03-15',
+      heading: 'Lorem ipsum dolor sit amet consectetur',
+      text: 'Introducing our versatile Hero component with multiple layout options including centered, spread, split, and background styles. Perfect for creating impactful page headers.',
+      image: '/images/placeholder-landscape.webp',
+      href: '',
+    },
+    {
+      tagline: '2024-03-10',
+      heading: 'Lorem ipsum dolor sit amet consectetur',
+      text: "Check out our new Features block with customizable layouts. Great for showcasing your product's key features or services.",
+      image: '/images/placeholder-landscape.webp',
+      href: '',
+    },
+    {
+      tagline: '2024-03-05',
+      heading: 'Lorem ipsum dolor sit amet consectetur',
+      text: 'Discover our flexible Content block with split layout and panel options. Ideal for presenting detailed information about your products or services.',
+      image: '/images/placeholder-landscape.webp',
+      href: '',
+    },
+  ]}
+/>
+```

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

@@ -0,0 +1,126 @@
+---
+_layout: BlockLayout
+
+title: Prices
+image: /images/blocks/prices.png
+---
+
+```astro live
+---
+import Prices from 'fulldev-ui/blocks/Prices.astro'
+---
+
+<Prices
+  variant="subtle"
+  heading="Choose the plan that suits you"
+  text="Our plans are designed to meet the requirements of both beginners and advanced users."
+  cards={[
+    {
+      heading: 'Free',
+      text: 'A free plan to help you get started',
+      price: 10,
+      list: ['1 GB of space', 'Support at $0', '1 email', '1 domain'],
+      buttons: [{ text: 'Get started', variant: 'secondary' }],
+    },
+    {
+      label: 'Best value',
+      color: 'brand',
+      heading: 'Premium',
+      text: 'Suitable for small to medium businesses with a larger team',
+      price: 25,
+      list: ['10 GB of space', 'Support at $29', '10 email', '10 domain'],
+      buttons: [{ text: 'Get started' }],
+    },
+    {
+      heading: 'Enterprise',
+      text: 'Our best plan for large companies with larger teams',
+      price: 100,
+      list: ['100 GB of space', 'Support at $99', '100 email', '100 domain'],
+      buttons: [{ text: 'Get started', variant: 'secondary' }],
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Prices from 'fulldev-ui/blocks/Prices.astro'
+---
+
+<Prices
+  rating={{
+    value: 5,
+    label: '100+ happy customers',
+    avatars: [
+      '/images/avatars/1.jpeg',
+      '/images/avatars/2.jpeg',
+      '/images/avatars/3.jpeg',
+      '/images/avatars/4.jpeg',
+    ],
+  }}
+  heading="Flexible Pricing Options"
+  text="Choose between monthly or annual billing. Switch anytime."
+  cards={[
+    {
+      heading: 'Basic',
+      text: 'Essential features for small teams',
+      price: 15,
+      list: ['5 projects', '10 GB storage', 'Basic reporting'],
+      button: { text: 'Get started', variant: 'primary', contrast: true },
+    },
+    {
+      heading: 'Pro',
+      text: 'Advanced features for growing businesses',
+      price: 49,
+      list: [
+        'Unlimited projects',
+        '100 GB storage',
+        'Advanced reporting',
+        'Team collaboration',
+      ],
+      button: { text: 'Get started', variant: 'primary', contrast: true },
+    },
+  ]}
+/>
+```
+
+```astro live
+---
+import Prices from 'fulldev-ui/blocks/Prices.astro'
+---
+
+<Prices
+  heading="Flexible Pricing Options"
+  text="Choose between monthly or annual billing. Switch anytime."
+  cards={[
+    {
+      heading: 'Basic',
+      text: 'Essential features for small teams',
+      price: 15,
+      list: ['5 projects', '10 GB storage', 'Basic reporting'],
+      button: { text: 'Get started', variant: 'primary', contrast: true },
+    },
+    {
+      heading: 'Pro',
+      text: 'Advanced features for growing businesses',
+      price: 49,
+      list: [
+        'Unlimited projects',
+        '100 GB storage',
+        'Advanced reporting',
+        'Team collaboration',
+      ],
+      button: { text: 'Get started', variant: 'primary', contrast: true },
+    },
+  ]}
+  table={{
+    header: ['Features', 'Basic', 'Pro'],
+    body: [
+      ['Amount of storage', '10 GB', '100 GB'],
+      ['Amount of projects', '5', 'Unlimited'],
+      ['Advanced reporting', 'No', 'Yes'],
+      ['Team collaboration', 'No', 'Yes'],
+    ],
+  }}
+/>
+```