Design a marketplace page for the project

[danielcdz]

Summary

• We want to have a first design of how it will look the marketplace page of SafeSwap
• Take into account that the main idea of the project is to have a Marketplace and trust In escrow contracts
• In the README we have some description of the main idea of the project
• Use any tool you feel more comfortable with to design the frontend
• Share links or screenshots
  • Add all the references in a root Markdown file well organized in the root of the project
  • Name the file DESIGN.md
  • Open a PR adding this new file to review the references to your work

[Jemiiah]

Hello @danielcdz I'm a front end web3 developer with great experience with documentation issue and quite a number of contribution to documentation issues can I work on the issue

Here's how intend to execute the issue :

Step 1: Review the Project Goals and README i. Since SafeSwap aims to create a marketplace with a focus on trust and escrow contracts, I'll start by reviewing the README for key information. ii. I’ll note down important details to highlight on the landing page, such as trust-based transactions, escrow functionality, and marketplace features.

Step 2 : Sketch an Initial Wireframe i. Tool Selection: I’ll use Figma (or any preferred design tool) to create a basic wireframe. This wireframe will map out the general layout, including sections for: ii. Hero Section: Highlighting SafeSwap's purpose with a bold headline, subtext explaining the trust and escrow aspect, and a call-to-action button. iii. Features Section: Detailing the benefits of SafeSwap, like marketplace functionality and secure escrow. iv. How It Works: A simple 3-step guide that explains the SafeSwap process for users. Tv. estimonials: Placeholder for feedback from beta users or quotes on the importance of secure, trust-based transactions. vi. Footer: Links to social media, contact information, and any related resources

Step 3: Design the Visual Layout i. Color Scheme and Fonts: I’ll select a clean, trustworthy color scheme (such as blues and whites) and a professional font to reinforce the secure and reliable nature of SafeSwap. ii. Adding Visual Elements: To make it visually engaging, I’ll add relevant icons, simple illustrations, and mock-ups. For example, a lock icon for security and handshake icons for trust. iii. CTA Buttons: The call-to-action buttons (e.g., "Get Started" or "Learn More") will be strategically placed to encourage user interaction.

Step 4 : Create a Functional Prototype i. Clickable Prototype: I’ll turn the wireframe into a clickable prototype, allowing stakeholders to visualize the user journey and interaction points. ii. Feedback Section: I’ll ensure there’s a way to quickly gather feedback on this prototype, either via comments in the design tool or by adding notes in the DESIGN.md file.

Step 5: Compile References and Add DESIGN.md i. Reference Collection: As I work, I’ll document any resources used, including design inspirations, icons, and any code snippets. ii. DESIGN.md File: iii. Introduction: Briefly describe the purpose of the landing page and the main design choices made. iv. Wireframe and Prototype: Embed screenshots and add a link to the Figma or design tool used for the prototype. v. References: List any external resources, such as icon libraries, color palettes, or font choices.

[ShantelPeters]

Hello @danielcdz Please can I be assigned to this issue.

I will create frontend designs based on the README using a preferred design tool. Then document all design references in a DESIGN.md file, include screenshots or links, and submit via a PR for review.

[0xdevcollins]

May I take care of this?

[deeseeker]

I'm a Frontend developer with two years of experience in React, JS, TS and crafting interactive and functional web apps. I also have a track record of delivering quality work. Kindly let me work on this task

[JosueBrenes]

Hi, I'm Josué Brenes and I'll be working on issue. I'm Dojo Coding member. ⛩️

I estimate this will take 1 day to complete.

Proposed Solution for Issue

I would resolve this issue in the following way:

1. Understand the Project Vision:

   • Since the project focuses on a marketplace and escrow contracts for SafeSwap, I would ensure that the landing page design reflects the theme of trust and secure transactions.

2. Create a Landing Page Mockup:

   • Use a design tool like Figma, Sketch, or Adobe XD to create an initial mockup for the landing page.
   • The design would feature sections such as:
     • Hero Section: A prominent header with the project name, a tagline reflecting "Marketplace & Trust in Escrow Contracts," and a CTA (Call to Action) button.
     • How It Works: A brief, visual representation of how SafeSwap and escrow contracts work, emphasizing trust and security.
     • Features: Highlight key features of the marketplace and escrow system.
     • Testimonials/Case Studies: Social proof to build user trust.
     • Contact and Footer: Contact details, social media links, and footer information.

3. Reference the README:

   • Refer to the README file for any additional project description or features that should be reflected in the design.

4. Add References in DESIGN.md:

   • Create a Markdown file named DESIGN.md in the root of the project. This file will include all relevant links to the design tool, screenshots, and any reference materials that influenced the design.

   • Example content for DESIGN.md:

     # Design References for SafeSwap Landing Page
     
     ## Project Overview
     SafeSwap is designed as a secure marketplace with a focus on escrow contracts.
     
     ## Design Mockup Link
     - [Figma/Adobe XD Link to Landing Page Design](#)
     
     ## Screenshots
     ![Screenshot of Hero Section](#)
     ![Screenshot of Features Section](#)
     
     ## Additional References
     - Links to inspiration or similar designs for marketplaces and escrow-based platforms.

5. Open a Pull Request (PR):

   • Once DESIGN.md and the mockups are ready, open a PR to include this file in the repository. This PR will allow team members to review and provide feedback on the landing page design.

[Benjtalkshow]

I'd like to take this issue.

[Villarley]

Hey @danielcdz !

I’m excited about the opportunity to contribute to the SafeSwap project by working on the initial design for the landing page! I’m an 18-year-old software engineer, recent Buildathon winner, and member of the Dojo coding community. I’m experienced in creating clean, functional interfaces, and I’m especially drawn to projects centered around trust and secure transactions, like this one. Plus, this would be my first open-source contribution, and I’d love to bring my skills in Next.js and design to make a real impact.

For the landing page, I’ll ensure the design highlights SafeSwap’s core values: marketplace functionality and trust through escrow contracts. I’ll work with design tools I’m comfortable with to create a polished layout, and I’d also be ready to start the actual development of the landing page in Next.js after the design is approved.

Here’s my plan:

Create a design mockup with a focus on showcasing SafeSwap’s main features and values. Organize all design references, color palettes, and visual elements in a DESIGN.md file at the root of the project. Open a PR with DESIGN.md to review and discuss the design with the team. Once the design is finalized, I’m ready to start developing the landing page so we can see it in action as soon as possible. Please feel free to reach out if you have any questions, ideas, or feedback

[KevinLatino]

Hi @danielcdz

I have a deep passion for Web3 and I am currently working as a frontend developer intern at a Web2 company, focusing on Next.js. Additionally, I am an active member of Dojo Coding, a prominent Web3 community in LATAM, which has given me great exposure to decentralized technologies.

Recently, I won the Base LATAM's Buildathon. I am eager to continue growing and contributing, and see this as a fantastic opportunity to further develop my skills and make a significant impact.

This is my first OD Hack, so I will appreciate it if you give me the chance to contribute to this amazing project.

For this issue i will:

Design the Landing Page: Review the README for project goals, then use a design tool (like Figma) to create a layout focused on the marketplace and escrow features.

Document References: Gather all resources and references in a DESIGN.md file in the root.

Also, if you want, i can start coding it!

[omsant02]

i would like to take this issue

[mimisavage]

I would like to take this issue i am new to onlydust

[brolag]

Hi @KevinLatino , @Villarley please consider the front end tools we're adding https://github.com/KaizeNodeLabs/SafeSwap/pull/7

[KevinLatino]

Hi @brolag, I have worked with those technologies, but we are not going to code, we are just going to design, aren't we? @danielcdz

[brolag]

Hi @brolag, I have worked with those technologies, but we are not going to code, we are just going to design, aren't we? @danielcdz

Yes, that's correct, but I think you can consider Shadcn and RadixUI primitives for your design to make it easier to implement later.

https://www.radix-ui.com/primitives https://ui.shadcn.com/docs/components

[danielcdz]

@KevinLatino @Villarley I'll reach out to you via Telegram to discuss this and minor changes on the scope of this issue 🫡