Add Marketing Content Blocks

[AyabongaQwabi]

** Task: Convert Flowbite Marketing Content Blocks to Dynamic React Components**

---

Task Description

The developer should visit [Flowbite Marketing Content Blocks](https://flowbite.com/blocks/marketing/content/) to inspect available Tailwind blocks. Using these blocks, create React components with dynamic theming and data properties.

---

Checklist

1. Inspect Flowbite Components

• Visit the URL and review the HTML structure of the marketing content blocks.
• Identify two blocks to implement: FlowBiteMarketingContent1 and FlowbiteCtaMarketingContent2.

2. Create marketingContent.js

• Create a new file: src/components/content/marketingContent.js.
• Define the components FlowBiteMarketingContent1 and FlowbiteCtaMarketingContent2.

3. Convert HTML to React Components

• Convert Flowbite HTML blocks to React components.
• Components should accept the following props:
  • theme: Dynamic theming data loaded from RenderPageComponents (refer to public/theme.json for structure).
  • data: Data fields for the component, e.g., user input or dynamic values.
  • ...rest: Additional configuration props.

4. Add Props and Theme Support

• Use theme to style the components (e.g., primary colors, background colors).
• Use data for dynamic fields like form inputs or user interactions.

5. Update componentBuilders Map

• Add FlowBiteMarketingContent1 and FlowbiteCtaMarketingContent2 to the componentBuilders map in src/components/content/generator.js.

6. Test Components

• Add examples of these components to src/pages/artifacts.js.
• Ensure components render correctly with dynamic configuration.

---

Code Examples

Component Example

import React from 'react';

export const FlowBiteMarketingContent1 = ({ theme, data, ...rest }) => {
  const { colors } = theme || {};
  const { title, description, link } = rest;

  return (
    <div className={`bg-${colors?.background || 'white'} p-6 rounded-lg shadow`}>
      <h2 className={`text-${colors?.primaryText || 'gray-800'}`}>{title}</h2>
      <p className={`text-${colors?.secondaryText || 'gray-600'}`}>{description}</p>
      <a
        href={link}
        className={`mt-4 inline-block bg-${colors?.primary || 'blue-500'} text-${colors?.buttonText || 'white'} px-4 py-2 rounded`}
      >
        Learn More
      </a>
    </div>
  );
};

---

Adding to componentBuilders

In src/components/content/generator.js:

import { FlowBiteMarketingContent1 } from './marketingContent';
import { FlowbiteCtaMarketingContent2 } from './marketingContent';

export const componentBuilders = {
  FlowBiteMarketingContent1,
  FlowbiteCtaMarketingContent2,
  // other components...
};

---

Configuration Example in artifacts.js

import React from 'react';
import { componentBuilders } from '@/components/content/generator';

const components = [
  {
    type: 'FlowBiteMarketingContent1',
    data: {},
    title: 'Dynamic Marketing Title',
    description: 'This is a dynamic description.',
    link: '/learn-more',
  },
];

const Artifacts = () => (
  <div>
    <RenderPageComponents items={components} />
  </div>
);

export default Artifacts;

---

Expected Deliverables

1. React components FlowBiteMarketingContent1 and FlowbiteCtaMarketingContent2 in src/components/content/marketingContent.js.
2. Updated componentBuilders map in src/components/content/generator.js.
3. Example configuration in artifacts.js to showcase usage and rendering.

Let me know if further clarification is needed!