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

Community feedback

• 

  Arseniy•170

  @ArseniyXPosted over 1 year ago

  Hello, its looks awesome! Design looks incredible so I don't have any suggestions

  Code improvements:

  1. You have hardcoded static data inside HeroSection.jsx and other components
  2. You have code comment in Illustration.jsx that need to be removed
  3. in utils you have file name motion.js its just animation utils not necessarily for motion so it need be renamed
  4. instead of doing {/* prettier-ignore */} you can make svg as component in this case you can put it like independent file .svg in assets

  Marked as helpful

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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.

  1

  

  Arseniy•170

  @ArseniyXPosted over 1 year ago

  @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

  Marked as helpful

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

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

  0

  

  Arseniy•170

  @ArseniyXPosted over 1 year ago

  @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

  Marked as helpful

  0

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

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

  0
• 

  Aruj Joshi•290

  @gtalinPosted over 1 year ago

  This is beautiful. You have matched the design perfectly.

  The subtle animations you have used are are just right. This must have taken hours of diligent work.

  Love the input field validation and how on typing a valid email the error message disappears.

  I have one small question/suggestion. Right now when the user submits the form, an error message is displayed. The error message then does not disappear when the user abandons the form and focuses away from the input field. Maybe the error message can be removed when a user focuses away from the input field. This is just a suggestion. And you might have consciously designed it that way.

  Marked as helpful

  0

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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

  1
• 

  Kehinde•660

  @jonathan401Posted over 1 year ago

  Wonderful solution as always 🎉🎉. Just curious though, how do you match the design exactly. It's always eluded me 😅. I'll like to make my solution match the design but since I'm a free subscriber, it's really hard achieving that 😅. Any tips on how I could match the mobile and desktop design 'perfectly'?

  4

  ---

  

  Ahmed Alharees•360

  @AhmedAlhareesPosted over 1 year ago

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

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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.

  4

  

  Kehinde•660

  @jonathan401Posted over 1 year ago

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

  0
• 

  Arman karimi•80

  @iArmanKarimiPosted over 1 year ago

  Great job on your solution. The design looks fantastic, and you've done an excellent job recreating it. The animations using Framer Motion add a nice touch, and your use of React JS, Tailwind CSS, and React Hook Form is impressive. It's also worth mentioning that your attention to performance optimization is commendable, as reflected in your high scores on the lighthouse report and PageSpeed Insights. Overall, your work is highly professional and visually appealing. Keep up the good work.

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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

  1
• 

  cjrdelosreyes•40

  @cjroma0199Posted over 1 year ago

  This is just fantastic, and it's pixel-perfect. I'm really loving it. It's inspiring me to work hard and reach this level of skill and talent too :).

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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. 🌟

  0
• 

  Dylan Guaquier•340

  @dylanguaquierPosted over 1 year ago

  Wow, that's impressive, congratulations

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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! 🙌🏼

  1
• 

  Nature Son•1,100

  @NatureSon22Posted over 1 year ago

  Wow, your works never fail to amaze me! I hope I can also be as good as you someday <3

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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! 😊

  0
• 

  Pouria Zamehran•260

  @pouripzPosted over 1 year ago

  How many days did it take you to make this? it is so beautiful 🤩

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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! 🌟

  0
• 

  Lucas 👾•104,340

  @correlucasPosted over 1 year ago

  Keep going bro! You gotta won this year. 😎

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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! 🌞

  0
• 

  Bilal Türkmen•340

  @bilalturkmenPosted over 1 year ago

  nice and meticulous work.

  Custom scrollbar is a nice detail. I liked framer motion, want to try too 🙂

  1

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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.

  1
• 

  marko-zivanic•60

  @marko-zivanicPosted 12 months ago

  you're amazing, do you have a personal website?

  0
• 

  AbdulakhaD 💻•70

  @AbdulahadIKramovPosted about 1 year ago

  Very cool you have completed the given assignments 1 = 1 How did you achieve this

  0
• 

  Nelson Guiamba•140

  @NelsonGuiambaPosted over 1 year ago

  Amazing job, how did you make it so pixel perfect I have some problems with font sizes and widths

  0
• 

  SURU EMMANUEL•390

  @suruainoPosted over 1 year ago

  Hello, I have no correction rather than a question. To me as an up-coming, you have done it perfectly well to match the given design.

  my question is; how did you manage to match it so well and almost perfectly?

  0

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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! 😊

  0

  

  SURU EMMANUEL•390

  @suruainoPosted over 1 year ago

  @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.

  0
• 

  Syed Bilal•260

  @syed-bilal205Posted over 1 year ago

  Your Work is fantastic from where did you all learn this any youtube channel for recommendations am also doing projects.....

  0

  ---

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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.

  1

  

  Uwd7xt•20

  @Uwd7xtPosted 11 months ago

  @MelvinAguilar this beautifull

  Marked as helpful

  0
• 

  Gerardo Roloff•20

  @groloffPosted over 1 year ago

  great job on this. very precise, to pixel perfection level one question: did you use React for any particular reason? I mean, what´s the advantage of using React instead of simple HTML, CSS and JS for this project?

  0

  ---

  

  Developer Matusala A.•170

  @matusalab-devPosted over 1 year ago

  @groloff I think for practice purpose on react

  1

  

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted over 1 year ago

  @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.

  2