Import Flowbite block as beacon components

Overview

Currently Beacon provides a dozen components that are installed by default but they are essentially elements like HTML tags, forms, and table. We should also have "sections" which are bigger blocks composed by multiple components, for example hero sections, CTA sections, and others commonly used on marketing sites.

Instead of creating a component from scratch (which is not in the Beacon core scope) we will reuse Flowbite Blocks - a comprehensive set of high-quality components with a compatible license.

Technical details

The work to import such components is described below:

1 - Add a new entry in the Beacon.Content.blueprint_components/0 list

:name should be self explanatory, snake_case format, and prefixed by flowbite_. For eg: flowbite_cta
:description shouldn't be too long
:thumbnail can be "https://placehold.co/400x75?text={component_name}" for now (it will be replaced eventually but doesn't matter much now)
:template is the flowbite code itself - choose the "Neutral" color schema whenever available since Beacon components are generic
:example should be the exact same value as :template, for example

beacon/lib/beacon/content.ex

Lines 1207 to 1208 in f93f31e

template: "<div>block</div>",

example: "<div>block</div>",

Remember those components are regular Phoenix function components, so attrs, slots, and so on works in the same way if you feel any of those should be used.

Run beacon and beacon_live_admin to make sure the component was created and it can be used in the visual editor

Components to import

Below is a list of components we're looking to import into Beacon by order of priority:

And below some that are nice to have but not strictly necessary at this moment:

Notes

We can use the original images and SVG provided by Flowbite.

Closed by #567

	template: "<div>block</div>",
	example: "<div>block</div>",