About Us/Company UI Bugs

mercykolapo commented 1 month ago

[ ] The hero section has not been cleaned up
[ ] This heading is quite big as compared to what we have in the figma design. The ring should bounce slightly too
[x] The ring should slightly bounce, the texts should be center-aligned

mercykolapo commented 1 month ago

The copy on the about us hero section is incorrect. It should be "We are building a safe on the blockchain for your assets" instead of "We are building the safest blockchain for your assets"

mercykolapo commented 1 month ago

Clicking on "company" from the landing page is not working at all. I had to access it from the footer.

evgongora commented 4 weeks ago

Hello my name is Erick, i'm a systems engineer student focusing on fullstack web development part of Dojo Coding, I would love to contribute to this project this is my OD profile! https://app.onlydust.com/u/evgongora

mercykolapo commented 3 weeks ago

Hello my name is Erick, i'm a systems engineer student focusing on fullstack web development part of Dojo Coding, I would love to contribute to this project this is my OD profile! https://app.onlydust.com/u/evgongora

Hello Eric. Thank you for indicating your interest in contributing to Custos. We will be participating in the upcoming ODHack 9.0 which will begin 24th October. We'll take note of your interest pending then. Thank you.

martinvibes commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @ i'm an experienced frontend developer and a blockchain developer i would love to work on this issue Pleasee kindly assign :)

How I plan on tackling this issue

i would make sure to follow the instructions and apply the requested changes to pixel perfect ETA: 24hrs

jedstroke commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a seasoned fullstack web3 developer with a knack for crafting pixel-perfect UI designs. Here's my lil' portfolio: https://www.jedshock.com

How I plan on tackling this issue

I will ensure the existing UI adheres to good UX principles, focusing on key elements such as consistency, accessibility, and intuitive design. Consistency will be maintained throughout the interface by using uniform elements, layouts, and behaviors across all screens, ensuring a cohesive user experience. Accessibility will be prioritized by following standards that accommodate diverse users, including those with disabilities, by implementing features like proper color contrast, screen reader compatibility, and keyboard navigation. Additionally, I'll ensure the UI is intuitive, allowing users to easily navigate and interact with the app without confusion, creating a seamless and enjoyable experience.

josephchimebuka commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Joseph I am a frontend developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/

How I plan on tackling this issue

I will ensure that all the criteria on the desciption ar met by centeringg the text and adding bouncing to the ring 1-2 days

SudiptaPaul-31 commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I’m Sudipta Paul, a full-stack developer with 1.5 years of experience in blockchain and web development. I would like to help with the about us/company ui bug fixes.

How I plan on tackling this issue

My approach: Ensure that the text in the hero section is vertically and horizontally centered. Use css Flexbox or Grid for easy alignment and responsiveness across different screen sizes.

Compare the current heading size with the Figma design and reduce the size using relative units (rem or em) to maintain consistency across devices.

Add a keyframe animation to the ring element to achieve a subtle bounce effect. Use CSS transform: scale() with a smooth easing function (e.g., ease-in-out) to create a continuous bounce. Example to somewhat get an idea to solve this issue

@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.ring { animation: bounce 2s infinite; }

Once the styling and animations are added, test the responsiveness and functionality across different browsers and screen sizes.

Pvsaint commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Victor, a front-end and blockchain developer with about 3 years experience in react.

How I plan on tackling this issue

I'll add animation for the ring to slightly bounce, center align the text and reduce the header to match the figma design.

abdegenius commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a fullstack developer worked with various frontend frameworks over the years as well as different backend languages. currently transitioning into the web3 space.

How I plan on tackling this issue

I will create a well documented and written codebase that will capture every bit of detail of the figma design and bring it to live, with the animations, mobile responsiveness, dark and light mode features as well as componentization for reusability across other pages, ican very much handle this task!

Ayoazeez26 commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a software developer with 6 years experience building applications

How I plan on tackling this issue

Clean up hero section Fix heading to look like what is on the figma design and add bounce to the ring Align text to center and add bounce to the ring ETA - 3 days

Benjtalkshow commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, and Rust. With over 31 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.

How I plan on tackling this issue

To improve the "About Us/Company" section of the application, I will address several UI bugs to ensure the design aligns with our Figma specifications.

First, I will clean up the hero section to eliminate any unnecessary elements or inconsistencies, enhancing the overall visual appeal and functionality.

Next, I will adjust the heading size, making it smaller to match the dimensions outlined in the Figma design. This will create a more balanced appearance within the section.

Additionally, I will implement a subtle bouncing animation for the ring, as specified. This animation will add a dynamic touch to the design and enhance user engagement.

Finally, I will ensure that all text within the section is center-aligned. This alignment will provide a more polished look and improve readability.

By addressing these UI bugs, the "About Us/Company" section will offer a more cohesive and visually appealing experience for users.

KevinLatino commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

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 have been working on a project for Base LATAM's Buildathon, where I am gaining hands-on experience in building decentralized applications. 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.

Some frontend projects that i have:
https://buildmyevent.xyz/ https://peritazgo-website.vercel.app/

How I plan on tackling this issue

To effectively resolve the issue with the hero section, we should focus on a few key adjustments while adhering to best practices.

First, we need to reduce the size of the heading to match the Figma design. This will improve the overall visual hierarchy and make the section more appealing.

Next, center-aligning the text will create a balanced look, guiding users' attention to the main message and enhancing readability. This is a common practice for hero sections.

Lastly, we should add a slight bounce effect to the ring. A subtle animation can make the interface feel more dynamic and engaging without being distracting.

By implementing these changes, we can create a polished and inviting hero section that aligns with the design while enhancing user experience.

@Khauthymo I hope you give me the opportunity to contribute to this amazing project; I would be very grateful.

evgongora commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello my name is Erick! I am a systems engineering student with a focus on fullstack web development, currently working on various blockchain-based projects, including those utilizing Cairo and ZK proofs. My experience includes working with Next.JS, React for the frontend in multiple projects, and contributing to the open-source community through OnlyDust. My familiarity with these frameworks equips me to understand the nuances of these systems and ensure that the frontend is both correct and UX/UI driven.

I am part of Dojo Coding, and here is my OnlyDust profile: https://app.onlydust.com/u/evgongora.

How I plan on tackling this issue

Here's a step-by-step approach to implement these changes:

Hero Section: Locate the hero section in the codebase, likely in: hero.tsx Adjust the text size and styling of the main heading to match the Figma design.
About Custos Diretriz Section: Find the relevant section in app/about/page.jsx Center-align the text content using Tailwind classes like text-center. Add a bouncing animation to the ring image using CSS or Framer Motion.
Our Vision Section: Locate the vision section in the same file in app/about/page.jsx Center-align the text content using Tailwind classes. Implement a bouncing animation for the ring element. To implement the bouncing animations, we can use CSS keyframes or Framer Motion. Here's a simple CSS example that could be added to the global styles:

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.bounce {
  animation: bounce 2s infinite ease-in-out;
}

I would love to contribute to this project! :)

chibokaxavier commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I’m Chiboka Xavier, a full-stack developer with over 4 years of experience building applications that not only work well but feels great to use. I’m passionate about turning creative UI/UX designs into real, responsive user interfaces with tools like Next.js, React, and Tailwind CSS. On the backend, I use Express and MongoDB to make sure everything runs smoothly behind the scenes. I love exploring new technologies and finding ways to create seamless, enjoyable experiences for users, blending both the frontend and backend to bring ideas to life.

How I plan on tackling this issue

To fix the issues in the hero section, I’ll first reduce the heading size to match what’s in the Figma design by tweaking the CSS or Tailwind classes probably changing text-4xl to something like text-3xl. Then, I’ll add a little bounce to the ring by creating a keyframe animation in CSS and applying it to the ring or i can just use the animate bouce that comes with tailwind. Finally, I’ll make sure all the text is center-aligned by using tailwind’s text-center class and adjusting the parent container to have flex and justify-center classes so everything lines up nicely.

od-hunter commented 2 weeks ago

I am applying to this issue via OnlyDust plateform

My background and how it can be leveraged Hi, please can I be assigned this please? This would be my first time contributing to this project and I would love to be the given the opportunity to contribute. I have experience in html, css, JavaScript,TypeScript and solidity, and Cairo.

How I plan on tackling this issue To solve this issue, I’ll take the following the steps:

1.⁠ ⁠I’ll ensure the heading's font size matches the figma design by adjusting the css with the correct font-size, font-weight, and responsive values. 2.⁠ ⁠Next, I’ll add bounce animation to the ring using my css 'keyframes' of course to create a subtle bounce effect, moving the ring slightly up and down for a dynamic feel. 3.⁠ ⁠I’ll either apply Flexbox or CSS Grid to the hero section to center-align the text both vertically and horizontally for proper alignment according to the figma design.

Please assign me, I’m ready to work.

ridwanalaps commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

make hamburger icon cover entire screen

How I plan on tackling this issue

Cleanup hero section, fix heading to be exact with what was specified in the design and add bounce to the ring, center the text as well ETA - 3 days

Dprof-in-tech commented 2 weeks ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Dprof-in-tech, a seasoned Full Stack Blockchain Developer, and I'm excited to be part of ODHACK 9! I have a strong foundation in technologies such as Next.js, TypeScript, JavaScript, React, Node.js, Rust, and Cairo, I've built extensive experience across the blockchain development landscape.

I first got involved with OnlyDust during Edition 2, and since then, I've made 39 contributions across 11 different projects. Working on the platform has really helped me sharpen my skills, especially when it comes to delivering great solutions under tight deadlines. I love combining technical know-how with a user-focused approach, whether it's building immersive 3D experiences or crafting smart contracts that solve real-world problems.

Throughout, I've consistently demonstrated the ability to adapt and contribute effectively to diverse challenges. I'm confident in my ability to tackle new problems and drive innovation within the blockchain space. As we kick off ODHACK 9, I'm eager to apply my previous experience and technical expertise to push the boundaries of what's possible.

You can view my public profile on OnlyDust here: https://app.onlydust.com/u/Dprof-in-tech

How I plan on tackling this issue

Here's my approach to fixing the About Us/Company UI bugs:

Hero Section Cleanup:
- I'll start by auditing and cleaning up the entire hero section code
- Remove any redundant styles and optimize existing CSS
- Match layout exactly to Figma specs
- Implement proper responsive breakpoints
Heading Size Adjustment and Ring Animation:
- Fix heading font size to match Figma design
- Add a subtle bounce animation to the ring using tailwind animation classes for a basic animation and framer motion for a more sophisticated animation
- Ensure animation is performant (using transform instead of top/bottom)
- Add proper easing for natural movement
- Make animation subtle enough not to distract from content
Text Alignment:
- Center-align all text content
- Ensure proper content flow and hierarchy
- Match text spacing to Figma design
- Verify alignment across all breakpoints

Implementation Plan:

Day 1 Morning: Hero section cleanup and heading size fixes
Day 1 Afternoon: Ring animation implementation
Day 2: Text alignment and final polish

Testing:

Animation performance testing
Cross-browser compatibility check
Responsive design verification
Compare against Figma specs

Expected completion: 1-2 days

evgongora commented 2 weeks ago

Thank you so much, I will start working on this ASAP!

Custos-Diretriz / Custos-Dapp