Design the Blog Details Page

[0xdevcollins]

Overview

We need to design a new Blog Details Page following the provided Figma design. This page will be part of the Boundless platform and should align with the overall look and feel of the project.

Details

• Design Reference: Please use the Figma design available here: Figma Design 🎨
• Content Handling:

  • The blog content will be in Markdown format. Please use the marked library for converting Markdown to HTML. Install it using npm install marked.

  • Markdown Processing: Custom useMarkdown hook with comprehensive styling

  • Use the blog data located at lib/data/blog.ts for testing purposes.

• Design Requirements:
  • Implement the layout and visual style as per the Figma design.
  • Ensure that all key components are visually represented: a header, blog content, author information, and any other blog-related elements.
  • Maintain consistency with the Boundless branding and UI components.
  • Ensure accessibility and a responsive design for different screen sizes (mobile, tablet, and desktop).

Technical Considerations

• Confirm that the design integrates smoothly with the current Next.js and Tailwind CSS setup.
• Verify that the Markdown conversion works correctly with the provided testing data.

🎯 How to Use the useMarkdown Hook

Basic Usage:

import { useMarkdown } from '@/hooks/use-markdown';

const MyComponent = ({ markdownText }) => {
  const { loading, error, styledContent } = useMarkdown(markdownText);
  
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;
  
  return <div>{styledContent}</div>;
};

Next Steps

1. Review the Figma design and gather any additional feedback if necessary.
2. Implement the page design and integrate the Markdown conversion for the blog content.
3. Test the page with the provided sample data from lib/data/blog.ts.
4. Validate accessibility and responsiveness across devices.

[0xDeon]

Good day, My name is Deon and I would like to get work on this issue
I have a great track record in building clean UI and sure i can get this done

Recommended by OnlyDust for exceptional experience, quality, and reliability.