woedii/app/deliverables/page.tsx

"use client";

import { Button } from "@/components/ui/button";
import { ArrowLeft } from "lucide-react";
import React from "react";
import ReactMarkdown, { Components } from "react-markdown";
import remarkGfm from "remark-gfm";

const ReadmePage = () => {
  const readmeContent = `
## 📘 Project DPE Deliverables Overview

Welcome to your Project DPE UI/UX design package. This page provides everything your team needs to understand, preview, and implement the design assets developed for the Project DPE Publishing Ecosystem.

## 📂 What’s Included

Your deliverables include high-fidelity UI mockups, design system components, and documentation that collectively represent the full user journey across all major touchpoints within the Project DPE Prototype.

| Section               | Description                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------------------- |
| 01_Homepage           | The landing experience for www.Project DPE.books including hero sections, genre browsing, and ebook discovery |
| 02_Author Studio      | UI for authors to create, edit, preview, and publish multimedia ebooks                                  |
| 03_Reader App         | Reader-facing immersive interface with scroll & flip view modes                                         |
| 04_Artist Marketplace | Asset browsing, upload flow, and commission request screens                                             |
| 05_Advertiser Portal  | Campaign setup, keyword targeting, and performance dashboards                                           |
| 06_Project DPE_Wallet       | Revenue dashboard tracking ebook sales and ad earnings                                                  |
| 07_Design System      | Colors, typography, button states, spacing, and reusable components                                     |
| 08_Prototype_Flow     | Clickable user journey demo                                                                             |

## 🛠 How to Use These Files

Preview the Screens: Scroll through the design sections in logical flow

Download Assets: Use the "Download All Mockups" button to access the .zip file

## 🔗 How to Access Your Deliverables

[Your Interactive Project DPE Prototype](https://woedii.yoursoftwareengineers.com)

[View Your High-fidelity UI Mockups & Design System Components. Click the Download Icon to Save All Images to Your Device.](https://woedii.yoursoftwareengineers.com/slider)

[Project DPE Competitive Analysis](https://woedii.yoursoftwareengineers.com/deliverables/swot)

[Access the prototype codebase on gitea](http://35.207.46.142/Project DPE/woedii)

## 🤝 Support

If you need help integrating these designs into code or want to schedule a handoff session, please contact us at [info@yoursoftwareengineers.com](mailto:info@yoursoftwareengineers.com)`;

  const components: Components = {
    h1: ({ node, ...props }) => (
      <h1
        style={{
          fontSize: "2.2em",
          fontWeight: "600",
          marginTop: "1.2em",
          marginBottom: "0.6em",
          borderBottom: "1px solid #eaeaea",
          paddingBottom: "0.3em",
        }}
        {...props}
      />
    ),
    h2: ({ node, ...props }) => (
      <h2
        style={{
          fontSize: "1.8em",
          fontWeight: "600",
          marginTop: "1.2em",
          marginBottom: "0.6em",
          borderBottom: "1px solid #eaeaea",
          paddingBottom: "0.3em",
        }}
        {...props}
      />
    ),
    h3: ({ node, ...props }) => (
      <h3
        style={{
          fontSize: "1.5em",
          fontWeight: "600",
          marginTop: "1.2em",
          marginBottom: "0.6em",
        }}
        {...props}
      />
    ),
    p: ({ node, ...props }) => (
      <p style={{ marginBottom: "1.2em", lineHeight: "1.8" }} {...props} />
    ),
    a: ({ node, ...props }) => (
      <a
        style={{ color: "#0366d6", textDecoration: "none", fontWeight: "500" }}
        {...props}
      />
    ),
    ul: ({ node, ...props }) => (
      <ul
        style={{
          paddingLeft: "1.5em",
          marginBottom: "1.2em",
          listStyleType: "disc",
        }}
        {...props}
      />
    ),
    ol: ({ node, ...props }) => (
      <ol
        style={{
          paddingLeft: "1.5em",
          marginBottom: "1.2em",
          listStyleType: "decimal",
        }}
        {...props}
      />
    ),
    li: ({ node, ...props }) => (
      <li style={{ marginBottom: "0.4em" }} {...props} />
    ),
    table: ({ node, ...props }) => (
      <table
        style={{
          width: "100%",
          borderCollapse: "collapse",
          marginBottom: "1.2em",
          boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
          border: "1px solid #dfe2e5",
        }}
        {...props}
      />
    ),
    th: ({ node, ...props }) => (
      <th
        style={{
          border: "1px solid #dfe2e5",
          padding: "0.6em 0.8em",
          textAlign: "left",
          backgroundColor: "#f6f8fa",
          fontWeight: "600",
        }}
        {...props}
      />
    ),
    td: ({ node, ...props }) => (
      <td
        style={{
          border: "1px solid #dfe2e5",
          padding: "0.6em 0.8em",
          textAlign: "left",
        }}
        {...props}
      />
    ),
    pre: ({ node, children, ...props }) => (
      <pre
        style={{
          backgroundColor: "#f6f8fa",
          padding: "1em",
          borderRadius: "6px",
          overflowX: "auto",
          fontSize: "0.9em",
          lineHeight: "1.5",
        }}
        {...props}
      >
        {children}
      </pre>
    ),
    code: (props) => {
      // Using `props: any` and casting to bypass TypeScript error with `inline` prop.
      const {
        node,
        inline: isInline,
        className,
        children,
        // Destructure known non-HTML props from react-markdown to prevent them from being spread onto the <code> tag
        index,
        siblingCount,
        ordered,
        checked,
        style: _style, // if style is passed in props, avoid conflict with style object below
        ...htmlProps // Spread remaining props, assuming they are valid HTML attributes for <code>
      } = props as any;

      const codeStyleBase = {
        fontFamily:
          'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
      };

      if (isInline) {
        return (
          <code
            className={className}
            style={{
              ...codeStyleBase,
              backgroundColor: "rgba(27,31,35,0.07)", // Slightly adjusted for better visibility
              padding: "0.2em 0.4em",
              margin: "0 0.1em",
              fontSize: "85%",
              borderRadius: "3px",
            }}
            {...htmlProps}
          >
            {children}
          </code>
        );
      }

      // For block code (inside <pre>)
      return (
        <code
          className={className} // className might contain "language-js" etc.
          style={{
            ...codeStyleBase,
            // Most styling for block code is handled by the <pre> wrapper
            // However, ensure no extra padding/margin if pre handles it
            padding: 0,
            backgroundColor: "transparent", // Pre has the background
          }}
          {...htmlProps}
        >
          {children}
        </code>
      );
    },
  };

  return (
    <div className="container mx-auto px-4 py-8 max-w-4xl">
      <div className="bg-white p-8 rounded-lg shadow-md">
        <Button
          className="bg-gray-100 hover:bg-gray-50 shadow-md text-black"
          onClick={() => window.history.back()}
        >
          <ArrowLeft className="mr-2" />
        </Button>
        <ReactMarkdown components={components} remarkPlugins={[remarkGfm]}>
          {readmeContent}
        </ReactMarkdown>
      </div>
    </div>
  );
};

export default ReadmePage;