From b96d8000057f496eebffc2e06df82150b13de84e Mon Sep 17 00:00:00 2001 From: Yussif Yahuza Date: Fri, 9 May 2025 19:23:41 +0000 Subject: [PATCH 1/2] Added image slider and docs to the prototype --- app/docs/page.tsx | 270 +++++++ app/slider/page.tsx | 64 ++ components/custom/ImageSlider.tsx | 176 ++++ components/custom/Nav_bar.tsx | 26 +- components/custom/marketplace_Navbar.tsx | 90 ++- docs/deliverables.md | 38 + package.json | 5 + pnpm-lock.yaml | 975 +++++++++++++++++++++++ public/assets/1.png | Bin 0 -> 338637 bytes public/assets/10.png | Bin 0 -> 231079 bytes public/assets/11.png | Bin 0 -> 463360 bytes public/assets/12.png | Bin 0 -> 241758 bytes public/assets/13.png | Bin 0 -> 210469 bytes public/assets/14.png | Bin 0 -> 236849 bytes public/assets/15.png | Bin 0 -> 603945 bytes public/assets/16.png | Bin 0 -> 589595 bytes public/assets/17.png | Bin 0 -> 267267 bytes public/assets/18.png | Bin 0 -> 328929 bytes public/assets/19.png | Bin 0 -> 320570 bytes public/assets/2.png | Bin 0 -> 89565 bytes public/assets/20.png | Bin 0 -> 369088 bytes public/assets/21.png | Bin 0 -> 253732 bytes public/assets/22.png | Bin 0 -> 229029 bytes public/assets/23.png | Bin 0 -> 232653 bytes public/assets/24.png | Bin 0 -> 259920 bytes public/assets/25.png | Bin 0 -> 230281 bytes public/assets/26.png | Bin 0 -> 231874 bytes public/assets/27.png | Bin 0 -> 230245 bytes public/assets/28.png | Bin 0 -> 230522 bytes public/assets/29.png | Bin 0 -> 229432 bytes public/assets/3.png | Bin 0 -> 363704 bytes public/assets/30.png | Bin 0 -> 234178 bytes public/assets/31.png | Bin 0 -> 231221 bytes public/assets/32.png | Bin 0 -> 227915 bytes public/assets/33.png | Bin 0 -> 238733 bytes public/assets/34.png | Bin 0 -> 230080 bytes public/assets/35.png | Bin 0 -> 231176 bytes public/assets/36.png | Bin 0 -> 233137 bytes public/assets/37.png | Bin 0 -> 232424 bytes public/assets/38.png | Bin 0 -> 232431 bytes public/assets/39.png | Bin 0 -> 229715 bytes public/assets/4.png | Bin 0 -> 83039 bytes public/assets/40.png | Bin 0 -> 230788 bytes public/assets/41.png | Bin 0 -> 229156 bytes public/assets/42.png | Bin 0 -> 229178 bytes public/assets/43.png | Bin 0 -> 230773 bytes public/assets/44.png | Bin 0 -> 1458264 bytes public/assets/45.png | Bin 0 -> 671089 bytes public/assets/46.png | Bin 0 -> 328876 bytes public/assets/47.png | Bin 0 -> 1060657 bytes public/assets/48.png | Bin 0 -> 696641 bytes public/assets/49.png | Bin 0 -> 1057008 bytes public/assets/5.png | Bin 0 -> 75757 bytes public/assets/6.png | Bin 0 -> 361012 bytes public/assets/7.png | Bin 0 -> 237266 bytes public/assets/8.png | Bin 0 -> 253935 bytes public/assets/9.png | Bin 0 -> 273092 bytes 57 files changed, 1621 insertions(+), 23 deletions(-) create mode 100644 app/docs/page.tsx create mode 100644 app/slider/page.tsx create mode 100644 components/custom/ImageSlider.tsx create mode 100644 docs/deliverables.md create mode 100644 public/assets/1.png create mode 100644 public/assets/10.png create mode 100644 public/assets/11.png create mode 100644 public/assets/12.png create mode 100644 public/assets/13.png create mode 100644 public/assets/14.png create mode 100644 public/assets/15.png create mode 100644 public/assets/16.png create mode 100644 public/assets/17.png create mode 100644 public/assets/18.png create mode 100644 public/assets/19.png create mode 100644 public/assets/2.png create mode 100644 public/assets/20.png create mode 100644 public/assets/21.png create mode 100644 public/assets/22.png create mode 100644 public/assets/23.png create mode 100644 public/assets/24.png create mode 100644 public/assets/25.png create mode 100644 public/assets/26.png create mode 100644 public/assets/27.png create mode 100644 public/assets/28.png create mode 100644 public/assets/29.png create mode 100644 public/assets/3.png create mode 100644 public/assets/30.png create mode 100644 public/assets/31.png create mode 100644 public/assets/32.png create mode 100644 public/assets/33.png create mode 100644 public/assets/34.png create mode 100644 public/assets/35.png create mode 100644 public/assets/36.png create mode 100644 public/assets/37.png create mode 100644 public/assets/38.png create mode 100644 public/assets/39.png create mode 100644 public/assets/4.png create mode 100644 public/assets/40.png create mode 100644 public/assets/41.png create mode 100644 public/assets/42.png create mode 100644 public/assets/43.png create mode 100644 public/assets/44.png create mode 100644 public/assets/45.png create mode 100644 public/assets/46.png create mode 100644 public/assets/47.png create mode 100644 public/assets/48.png create mode 100644 public/assets/49.png create mode 100644 public/assets/5.png create mode 100644 public/assets/6.png create mode 100644 public/assets/7.png create mode 100644 public/assets/8.png create mode 100644 public/assets/9.png diff --git a/app/docs/page.tsx b/app/docs/page.tsx new file mode 100644 index 0000000..973e76f --- /dev/null +++ b/app/docs/page.tsx @@ -0,0 +1,270 @@ +"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 }) => ( +

+ ), + h2: ({ node, ...props }) => ( +

+ ), + h3: ({ node, ...props }) => ( +

+ ), + p: ({ node, ...props }) => ( +

+ ), + a: ({ node, ...props }) => ( + + ), + ul: ({ node, ...props }) => ( +