"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 }) => (
), h2: ({ node, ...props }) => ( ), h3: ({ node, ...props }) => ( ), p: ({ node, ...props }) => ( ), a: ({ node, ...props }) => ( ), ul: ({ node, ...props }) => (
{children}
),
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 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
} = props as any;
const codeStyleBase = {
fontFamily:
'SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace',
};
if (isInline) {
return (
{children}
);
}
// For block code (inside )
return (
wrapper
// However, ensure no extra padding/margin if pre handles it
padding: 0,
backgroundColor: "transparent", // Pre has the background
}}
{...htmlProps}
>
{children}
);
},
};
return (
{readmeContent}
);
};
export default ReadmePage;