Laravel Test Project using Tailwind CSS, Livewire, and Alpine JS
Budget: $10 – $30 USD
In this email you will find attached a .fig file that you can import into Figma. It's a google drive link so let me know if there are any issues with it.
It contains a single page, for desktop and mobile (no need to worry about intermediate screens).
Requirements:
Turn the design into front end code, for desktop and mobile versions.
It needs to be a Laravel 11 project using Livewire, Alpine JS and TailwindCSS
The page needs to be a Livewire component.
The styling needs to be as close as possible to the design, using only TailwindCSS. You are free to extend the tailwind config file as you see fit to accommodate for unique things like colors.
The header part (with the three elements) needs to be sticky, disappearing after you scroll down a little bit and reappearing anytime you scroll up.
The accordions in the FAQs section need to open and close (ideally with a transition). If one accordion is open and you click another one, the open one needs to close, so that only one accordion is open at any time. Use Alpine JS for this.
All images and SVG icons from the design need to be in. Group them as you see fit and export them. Don't worry about them having the exact pixel size as the design. They only need to look close.
The content for the FAQs needs to come from the back end Livewire class and render properly in the livewire blade file. Use the questions that you see in the design and feel free to use lorem ipsum for all the answers.
Deliverables from you:
A Bitbucket repository with your work, shared with me using this email of mine.
Technical qualities we are looking for:
Speed of delivery
Using as few elements as possible (clean code)
Using comments when and where necessary
Use of components is encouraged if it saves lines of code and improves maintainability, but not mandatory.
It contains a single page, for desktop and mobile (no need to worry about intermediate screens).
Requirements:
Turn the design into front end code, for desktop and mobile versions.
It needs to be a Laravel 11 project using Livewire, Alpine JS and TailwindCSS
The page needs to be a Livewire component.
The styling needs to be as close as possible to the design, using only TailwindCSS. You are free to extend the tailwind config file as you see fit to accommodate for unique things like colors.
The header part (with the three elements) needs to be sticky, disappearing after you scroll down a little bit and reappearing anytime you scroll up.
The accordions in the FAQs section need to open and close (ideally with a transition). If one accordion is open and you click another one, the open one needs to close, so that only one accordion is open at any time. Use Alpine JS for this.
All images and SVG icons from the design need to be in. Group them as you see fit and export them. Don't worry about them having the exact pixel size as the design. They only need to look close.
The content for the FAQs needs to come from the back end Livewire class and render properly in the livewire blade file. Use the questions that you see in the design and feel free to use lorem ipsum for all the answers.
Deliverables from you:
A Bitbucket repository with your work, shared with me using this email of mine.
Technical qualities we are looking for:
Speed of delivery
Using as few elements as possible (clean code)
Using comments when and where necessary
Use of components is encouraged if it saves lines of code and improves maintainability, but not mandatory.