Skip to content
Submitted over 2 years ago

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

accessibility, motion, lighthouse, react, tailwind-css
Melvin Aguilar 🧑🏻‍💻•61,020
@MelvinAguilar
A solution to the Fylo dark theme landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi there 👋, I’m Melvin and this is my solution for this challenge. 🚀

🎁 Features:

🛠️ Built With:

  • React JS. ⚛️
  • React Hook Form. 📝
  • Framer Motion. 🎬
  • TailwindCSS. 🎨
  • npm - prettier - prettier-plugin-tailwindcss. 📦

Any suggestions on how I can improve and reduce unnecessary code are welcome!

Thank you. 😊✌️

Code

Please log in to post a comment

Log in

Community feedback

  • Arseniy AI•170
    @ArseniyX

    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
  • Aruj Joshi•290
    @gtalin

    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
  • Kehinde•680
    @jonathan401

    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'?

  • Arman karimi•80
    @iArmanKarimi

    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.

  • cjrdelosreyes•40
    @cjroma0199

    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 :).

  • Dylan Guaquier•340
    @dylanguaquier

    Wow, that's impressive, congratulations

  • Nature Son•1,100
    @NatureSon22

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

  • Pouria Zamehran•260
    @pouripz

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

  • Lucas 👾•104,160
    @correlucas

    Keep going bro! You gotta won this year. 😎

  • Bilal Türkmen•340
    @bilalturkmen

    nice and meticulous work.

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

  • marko-zivanic•60
    @marko-zivanic

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

  • AbdulakhaD 💻•70
    @AbdulahadIKramov

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

  • Nelson Guiamba•140
    @NelsonGuiamba

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

  • SURU EMMANUEL•390
    @suruaino

    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?

  • Syed Bilal•260
    @syed-bilal205

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

  • Gerardo Roloff•20
    @groloff

    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?

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord