Fylo dark theme landing page (React JS + Tailwind CSS + Framer Motion)

@ArseniyX Hello! Thank you very much for taking the time to review my solution. I really appreciate your feedback.

1. According to you, should all information be generated dynamically? Even the headings, or am I getting confused? Could you provide me with some reference to learn better?
2. I just deleted the comment. Thank you.
3. I used this project as a reference for the file name. Any suggestion for naming the file? "animation.js"?
4. Noted.

Once again, thank you very much for reviewing this solution. It is very helpful and I learn a lot.

@MelvinAguilar

1. Well its seems like landing page for company, right? For example if you give/sell this landing and the customer will want to make changes to the content. Its would be better if all content exist inside data.json or something, instead of .js files everywhere. JSON can be modified by no dev oriented person, so it's make it much better for the customer.
2. You can called animationUtils.js Always appreciate to give feedback

@ArseniyX Very comprehensive, thank you again for the wonderful comment. 😄

@MelvinAguilar btw, you can rewrite getMaxWith function like that:

const getMaxWidth = (index) => 
    ["max-w-card-1", "max-w-card-2"][index] || "max-w-card-default"

if you want

@ArseniyX Thank you, I will update it as soon as possible :)

@gtalin Hello,

Thank you for your suggestion regarding the behavior of error messages on my form. I appreciate your feedback and am always looking for ways to improve the user experience.

In regards to your suggestion, I have designed the error messages to remain visible even after the user has focused away from the input field, as this can serve as a helpful reminder to the user that there is an issue that needs to be addressed.

In my humble opinion, it can be detrimental if you have a form with multiple inputs like in this challenge. For example, let's say there are three input fields on the form, and the user has entered incorrect information in all three fields. If I were to remove the error messages when the user focused away from each input field, the user may not remember which fields had errors, and they may forget to correct one or more of the errors before submitting the form. By keeping the error messages visible, the user is reminded of all the errors that need to be addressed and can correct them before submitting the form.

However, I understand that different users may have different preferences and behaviors, and I appreciate your feedback on this matter. I will continue to evaluate and improve my form design to ensure the best possible user experience for all of my users.

Best regards, Melvin

@jonathan401 Honestly, it amazes me how can someone get the design pixel perfect like this!!😅

@jonathan401 Sure, I use an extension called PerfectPixel. That extension allow you to overlay an image of the design onto your website, so you can compare your implementation to the design and make adjustments accordingly.

Note: The shadow values are impossible to know exactly without a Premium account, and I have only used Figma in the last two projects. This is my first time as a subscriber.

Screenshot.

And I'm sorry for the late reply.

@MelvinAguilar Thank you!. And no need to apologize.

@iArmanKarimi Sorry for the late reply, and thank you so much for your kind words! I'm glad my efforts in performance optimization were noticeable. Thanks again

@cjroma0199 Sorry for the late reply. Thank you so much for the compliment! However, I still have so much to learn and improve on. It's all about continuous growth. I'm sure you have incredible talents too. 🌟

@Fullpacki Thank you for your kind words! I still have a lot to learn, though. Your encouragement means a lot. Apologies for the late response! 🙌🏼

@NatureSon22 Oh, thank you for your kind words! However, I must admit I'm still learning and have my own challenges to tackle. But that's the beauty of it - we're all on this journey of continuous improvement together! Happy coding! 😊

@pouripz Thank you for the compliment! It took me around 3 hours to set up the basic structure and appearance, but making it look just right and close to the design took a couple more hours of fine-tuning. Happy coding! 🌟

@correlucas Thank you so much for the reminder and encouragement! 😄 Despite having a few projects, I'll do my best to aim for a spot in the top 3. Apologies for the delayed response. Have a fantastic day! 🌞

@bilalturkmen Thank you for your comment! It's always great to hear positive feedback on one's work. Also, I have to say that I like your solutions because not only do you create them very similarly, but they also have incredible customization.

Good luck with trying out Framer Motion, it's a powerful animation library with a lot of possibilities!

And I'm sorry for the late reply.

@suruaino Thank you for your kind words! I apologize for the late response. I used the PerfectPixel browser extension and a lot of trial and error to get it as close as possible. Happy coding! 😊

@MelvinAguilar PerfectPixel, thanks for the clue. I am 100% happy to hear from you again, and I will be trying it in my next challenge. Just need to learn something quickly as my chosen challenge required.

Thanks once again.

@syed-bilal205 Thank you for your kind words about my work! In terms of learning resources, I personally enjoy creating custom solutions for challenges rather than relying solely on tutorials. However, if you're interested in some YouTube channels that may be helpful for you, I would recommend checking out the Kevin Powell channel. He covers a wide range of front-end development topics, including CSS and responsive design. If you're looking for more JavaScript-focused projects, the JavaScript Mastery channel might be a good fit.

Finally, if you're interested in learning more about creating inclusive and accessible components, I highly recommend checking out the Inclusive Components website. Also, you can read some tips from Grace Snow's article that may be helpful in building inclusive solutions.

@MelvinAguilar this beautifull

@groloff I think for practice purpose on react

@groloff Thank you for the compliment! To answer your question, No, I used React for this project because I wanted to practice using react-hook-form and frame-motion. I am not using simple JavaScript validations or @keyframes or any other library for animations because I am practicing to create much more complex animations with Framer Motion in new challenges. Regards.