Create Characteristic - Landing Page component

[t0fudev]

Create the Characteristic - Landing Page component it should have the description and an icon. The component should receive the description and the icon. Please refer to the color palette for the accurate hex code colors.

Component image:

Color Palette:

[Joe-joe25]

I'll love to work on this ensuring i follow all the requirements

[0xdevcollins]

Could I try solving this?

My Background
I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions with 46 significant contributions spread over 12 OnlyDust projects.

[Benjtalkshow]

I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 49 contributions to over 17 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

I can handle this task.
ETA is 3days.

[Michaelkingsdev]

Hello @LazarusAA
I am a frontend developer with 4 years of experience. I would really love to work on this task. Can it be assigned to me?

[Pvsaint]

I’d love to work on this task please, I'm Victor Peter, a front-end and smart contract developer. I promise to write a pixel perfect code.

[Joe-joe25]

Can I try solving this issue?

[SudiptaPaul-31]

Would love to work on this issue

I am a fullstack and blockchain developer having experience for more than 1.5 years and had worked on many projects from previous odhack my profile: (https://app.onlydust.com/u/SudiptaPaul-31)

[7-falseparfait]

I am a Front-end dev with expertise in Tailwind CSS, Next.js, TypeScript, and JavaScript. I have experience building reusable components and ensuring responsive, functional UI elements. I would love to take on the task of creating this

[Kachimercy1]

Could I try solving this?

[Supa-mega]

Can I take care of this issue?

[3th-Enjay]

Let me try this one!

[martinvibes]

i'm a frontend dev and blockchain dev
i would love to work on this and get it done
I’m interested in this one.
kindly assign

[petersdt]

I’d love to work on this task.

[Luluameh]

Hi, I’m a frontend developer experienced with TypeScript and React. I’ve reviewed the requirements for the Characteristic Landing Page component and am confident I can implement it effectively.

Plan to Solve the Issue:

Component Creation:

Create a reusable Characteristic component that accepts two props: description (string) and icon (JSX element).
Display the description alongside the icon, following the design and layout requirements as shown in the image.
Styling:

Ensure the component follows the provided color palette for accurate styling.
Style the icon and description to be well-aligned, ensuring that the layout looks good across different screen sizes.
Color Palette:

Reference the provided color palette for hex codes to ensure the component’s colors are consistent with the overall design.
Responsiveness:

Ensure that the component is responsive and adjusts properly to different screen sizes, maintaining a clean and consistent design.
Testing and Validation:

Test the component for rendering the description and icon correctly with varying inputs.
Ensure the styling is aligned with the design and color palette, and that it functions smoothly on both mobile and desktop views.
Estimated Completion Time: 1 day

[zleypner]

Hi! I’m Anwar a Software Developer with +3 years of experience, and I would love
make a contribution to this project and contribute to the project's success.

I will create the "Characteristic - Landing Page" component, taking in mind the content provided setting properly icon as props. The component will be styled according to the color palette, using the correct hex code colors for consistency with the design.

[kayceeDev]

Hi,
I am a software engineer with over 3 years of experience in frontend and backend technologies.
After looking at the issues and reading through the requirements, here is how I will approach the issue.

• I will fork and clone the repository to my local machine.
• Then install the necessary dependencies.
• checkout to a new branch
• I will study the codebase to understand how files are linked and how routing is done on the app
• I will leverage my tailwind, Reatjs, typescript, CSS, and frontend skills to ensure that the landing page component is created
• Utilize my React and typescript skill to create a reusable component that will take dynamic props.
• Verify profile navigation still works
• Make sure the components are pixel perfect as in the figma.
• I will make sure they are responsive with proper alignment on all devices by testing extensively.
• I will add and commit my changes.
• Pull and rebase from upstream before pushing to my forked repository
• Lastly, create A pull request with a good summary and title as expected in the contribution guide.

This ensures that I can easily roll back if my branch is corrupted.

My ETA is 8hrs to 10hrs maximum.

Is it okay if I take this?

[Adedayo-Data]

Hi, I'm interested in taking on the this task. I've reviewed the requirements and I'm confident I can deliver. I'd love to discuss further and get started. Looking forward to hearing from you.

[derianrddev]

Hello SocialSphere team,

I’m Derian Rodríguez, a member of the Dojo Coding community ⛩️💻. I’m excited to contribute to your Stellar-based project during the Only Dust 11 hackathon 🚀.

As a full-stack developer, I have experience in:

• Frontend: JavaScript/TypeScript, TailwindCSS, React, Next.js, and shadcn/ui.
• Backend: Node.js (Express.js, Nest.js).
• Web3: Cairo.

Plan to resolve the issue

1. Design a functional React component that includes:
   • A dynamic description.
   • An icon associated with the description.
2. Ensure the component receives the description and icon parameters.
3. Use the provided color palette to ensure visual consistency.
4. Validate the final design using the reference image.
5. Test the component to ensure the parameters (description and icon) are rendered correctly.

Here are my profiles:

• GitHub
• OnlyDust

Thank you for considering my application.

[Shalomnze]

I am Nze Shalom, a full stack developer with strong foundation in modern web development frameworks and technologies. My expertise includes: Nuxt.js, Next.js and Tailwind CSS with a bit of knowledge in Cairo. I am Experienced in crafting responsive, visually appealing designs using Tailwind CSS, ensuring consistency and efficiency in the development process. I would love to contribute to this project.

I would love to contribute to this project. My approach towards this issue after forking the repo would be to first define the colours as in the colour scheme. I would create the new reusable component I would then create a div that would house the text and icon which would be on flex. i would type the text on the left and the icon on the right. I
would then do the neccessaey styling as required by the design. ETA is 2hrs

[Jagadeeshftw]

Hi,
I’d love to work on this issue as I have strong experience with front-end development. Please assign this to me, and I’ll deliver an efficient and secure PR within 12-24 hours.

[akintewe]

Hi, I'm interested in taking on the this task. I am a frontend/ UIUX developer and i have experience in working with detailed designs. I've reviewed the requirements and I'm confident I can deliver. I'd love to discuss further and get started. Looking forward to hearing from you. ETA 8hours :)

[1nonlypiece]

I’d like to work on this issue as I have experience in building frontend interfaces using frameworks like React and Next.js.

ETA:
I estimate completing this task in about 12-24 hours. Let me know if I can get started!Can I tackle this one?

[ShantelPeters]

May I pick this up?

I am a full stack blockchain developer with experience in Cairo , typescript, react , JavaScript, solidity, HTML, and python.. and also UI/UX I have worked on different projects having over 31 contributions ..
please let me give this a go …

[brolag]

I'd like to work on this issue. I have more than ten years of experience working with web technologies.

My plan is:

1. Figure out if there's a color theme, if there's not I can help with that.
2. Create the reusable component following the design standards.
3. Make it responsive if needed.

Thanks!

[Shukazuby]

I am Zubaidat, a frontend developer experienced in building responsive and user-friendly components.

ETA:
I estimate completing this task in 24 - 48hrs.

Thank you

[therealemino]

Can take on this task?

[mimisavage]

Let me handle this issue!

[vestor-dev]

hey sir i would love to work on this issue
i'm a blockchain dev and i would love to handle this issue
assign me and i'll get to work

[Jemiiah]

Hello Jeremiah I'm a frontend developer in web3 I have contributed to previous OD hacks. i have made over 85+ contribution in past OD Hacks Here's my OD Hack profile: https://app.onlydust.com/Jemiiah I intend to solving this issue with the following approach :

To implement the Characteristic-Landing Page component, I will solve the issue:

1. Analyze the Requirements
   From the issue description and the attached color palette:

The component will include:

1. An icon.

2. A description of the feature.
   The component should receive the icon and description as props.
   The design needs to follow the provided color palette, ensuring accurate hex codes for the background, text, and other UI elements.

3. Define the Component Props
   I will structure the component to accept these props:
   icon (ReactNode): The visual representation (e.g., an SVG or React icon).
   description (string): The textual content for the feature.

4. Implement the Component
   I will implement the component using React and Tailwind CSS (or styled-components if specified).

5. Styling
   I will apply the provided color palette:
   Background color: #4ECCA3 (for the card).
   Icon background: #FFFFFF (white circle).
   Text color: #EEEEEE (light white/gray text for descriptions).
   Shadow and other styles: following the rounded design in the reference image.

[Agbeleshe]

About Me
I am a diligent frontend developer with over 3 years of experience specializing in creating reusable, responsive components and implementing designs based on project guidelines and color palettes.

My Approach to Solving This Issue
I will create a reusable Characteristic component for the landing page that receives two props: description (a text string) and icon (an SVG or icon component). This component will be designed to:

• Display the icon prominently alongside the description.
• Use the provided color palette for accurate styling with the specified hex codes.
• Ensure the component is responsive, maintaining consistency across various devices.
• Integrate seamlessly with the existing design system and layout.

The implementation will include testing for proper alignment, responsive behavior, and accessibility to ensure it meets design standards.

ETA
My estimated time to complete this task is 1–12 hours.

[BrunoAmbricca]

I would like to work on this issue

[Yunusabdul38]

I’d like to help with this.

[portableDD]

Hi. I am Emmanuel Dorcas, a software developer with React js and typescript, i will like to tackle this issue. My estimated day is 1 day

how will I tackle this:
making this a reusable component asking it to take in text and icons as props, and I will be using Tailwind CSS for the styling.

thanks

[respp]

Hello, I am Renzo Barcos, and I am confident that I can bring valuable contributions to applications focused on component design. As an active member of the Dojo community, I am excited about the opportunity to make my first contributions to SocialSphere and help enhance its user experience.

With a solid understanding of UI/UX principles, I am well-equipped to design and implement the landing page component, ensuring it meets all necessary requirements while delivering both visual appeal and an outstanding user experience.

[SimplementeCao]

Hi, I'm Leandro, Front-end developer.
I would solve the problem by first reviewing the image design as a guideline and adjusting to component-based development to maintain consistency and scalability of the project.
Estimated delivery time: 24 hours.

I have contributed before to other projects like:
Cairo Book
Starknet Book
Starknet Docs
Starknet Security Challenges Factory
Starkane
Can I work on this issue?

Check my OnlyDust, I've contributed to many projects: OnlyDust Profile,
and my GitHub

[caxtonacollins]

Mind if I take this issue?

[Emmanex01]

I'm Emmanuel Tochukwu,
A Frontend developer, proficient in Reactjs, tailwindcss, typescript, Cairo Programming Languages.
I'd like to handle this task.

[khayss]

I'm a full-stack developer. I can build responsive and smooth frontend UI with optimal UX.

I'll solve this issue by:

• Creating a component which will render the desired UI base on the project structure.
• Style and design the component to meet the requirement paying attention to the colors.
• Integrate the component into the appropriate section.
• Test the component to ensure it integrates with the overall UI and does not create issues.

Hopefully, this is assigned to me.

[Bran18]

Hello Team,

My name is Brandon Andrey Fernandez, and I am part of the Dojo Coding Community ⛩️💻 KindFi and https://bitcash.org/en. I’m excited about the opportunity to contribute to your project during Only Dust Hackathon #11! 🚀

I am a full-stack developer with experience in Web3 and blockchain technologies, particularly in projects involving smart contracts, AI integration, and decentralized solutions. I have worked on a large number of web3 projects and solutions as for example:

https://masterbots.ai/
https://bitlauncher.ai/en

I am interested in this specific issue because it combines my passions: blockchain, AI technology, and modern web development. I am motivated by the opportunity to improve my skills and contribute to the project. I have participated in hackathons like ODH and other web2 hacks.

During the hackathon, I can dedicate approximately 5h min hours per day to working on this issue. I am committed to active collaboration, delivering high-quality code, and maintaining open communication with the team.

You can find my profiles and links here:

• GitHub: https://github.com/Bran18?tab=repositories
• OnlyDust: https://app.onlydust.com/u/Bran18
• X https://x.com/branfdez_18
• LinkedIn: https://www.linkedin.com/in/brandonfdez18/

Thank you for considering my application. Please let me know if you have any questions or need any additional information.

[Dorcas18]

Is it okay if I take this?

[Nityam573]

I’d like to help with this.
I will create the "Characteristic - Landing Page" component, taking in mind the content provided setting properly icon as props. The component will be styled according to the color palette, using the correct hex code colors for consistency with the design.