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

[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 #7