woedii/app/docs/page.tsx

"use client";

import React from "react";
import ReactMarkdown, { Components } from "react-markdown";
import remarkGfm from "remark-gfm";

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

Welcome to your WODEY UI/UX design package. This page provides everything your team needs to understand, preview, and implement the design assets developed for the WODEY 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 WODEY touchpoints.

| Section               | Description                                                                                             |
| --------------------- | ------------------------------------------------------------------------------------------------------- |
| 01_Homepage           | The landing experience for www.wodey.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_WODEY_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

## 🔗 Links

[Live Preview URL](https://woedii.yoursoftwareengineers.com)

[Download Full Zip File by clicking on the download icon](https://woedii.yoursoftwareengineers.com/slider)

## 🤝 Support

If you need help integrating these designs into code or want to schedule a handoff session, please contact:

UI/UX Design Lead: Daphne Augustine ([daphne@yoursoftwareengineers.com](mailto:daphne@yoursoftwareengineers.com))

Development Lead: Yussif Yahuza ([yussif@yoursoftwareengineers.com](mailto:yussif@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
      style={{
        padding: "2rem",
        fontFamily:
          '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
        lineHeight: "1.7",
        color: "#24292e",
        backgroundColor: "#ffffff",
        maxWidth: "800px",
        margin: "40px auto",
        boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
        borderRadius: "8px",
      }}
    >
      <ReactMarkdown components={components} remarkPlugins={[remarkGfm]}>
        {readmeContent}
      </ReactMarkdown>
      <a
        href="http://35.207.46.142/Wodey/wodey-prototype"
        target="_blank"
        rel="noopener noreferrer"
        style={{
          display: "inline-block",
          marginTop: "2.5rem",
          padding: "0.8rem 1.6rem",
          backgroundColor: "#0366d6",
          color: "white",
          textDecoration: "none",
          borderRadius: "6px",
          fontWeight: "600",
          textAlign: "center",
          transition: "background-color 0.2s ease-in-out",
        }}
        onMouseOver={(e) => (e.currentTarget.style.backgroundColor = "#005cc5")}
        onMouseOut={(e) => (e.currentTarget.style.backgroundColor = "#0366d6")}
      >
        Go to Project Repo
      </a>
    </div>
  );
};

export default ReadmePage;