271 lines
8.3 KiB
TypeScript
271 lines
8.3 KiB
TypeScript
"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;
|