The functionality of the website needs some changes both in frontend and backend.

The website’s
framework was written in core PHP with JavaScript, sass CSS, bootstrap, j query, Ajax, and more that
I can’t remember now.

I need someone with the following qualities:

- You must be very skilled in the areas needed.

- You must be a great communicator. You must write and speak English very well. If you argue
unnecessarily, this job isn’t for you.

- You must be very patient. I know what I want done so if you don’t get it right, you would have to
keep trying till it works. If on the other hand you get it right first time, I will be pleased and the work
is done.

- You must be able to work with the US time zone and not wake me up in the middle of the night.

- You must agree on a one-time payment before starting the job. So, you would need to study the
website and understand how much effort it will take you. Once we agree on a price, it is final!

- You must work as fast as you can.

The CSS for the button on the Details page need to be fixed. The next 5 pages
show exactly how they should look and work.

In desktop mode, the buttons should have a minimum width and height for
when texts and images are not too tall or wide to keep things looking good.

In responsive modes, the buttons should be long and tall enough to contain
the longest/tallest text or image. Therefore the longest/tallest text or image
should determine the size of all buttons. This also means that all button must
have equal lengths and height with slider positioned correct as the page
width scales down. Keep contents aligned with equal left/right padding.
Make buttons responsive for viewports down to 320 px.

Leave the details part for “What color is it?” unchanged. That is the large
radio buttons.
Button should be able to scale down from desktop mode to responsive mode (down to 320
px) as shown here. If text is too long for width of the button, the text breaks into a new line
which would increase the height for all button, with the slider staying centered.
The “GET QUOTE NOW!” button needs to be changed to make it more
fun and interesting.

I want it to act and behave like the one here:

https://codepen.io/emmanuel-onyema/pen/QedeXq

I also have the new button

in a zip folder I can send to
You.
From the picture, you can see that
the emails that are sent to my
clients needs some CSS so that it
matches my website theme. They
are currently very boring and I
want to change that.
Also, I need all emails sent from
my system to have my logo (image
only) on the icon in user inbox so
that customer will now the email
is from my brand.
I need a favicon to be added to my website. I will provided the design.

I need a live chat interface for customers to chat with us on the website in the
frontend.

My website current has zero or very poor SEO ranking. I want it to have a good
SEO ranking and to be high up in the google search ranking.

I’m also interested in digital advertising and reach if you know how to get it
done.
The diamond honey comb structure was implemented statically. That means that the
current CSS breaks if I add new brand (e.g Blackberry) from the backend (Adding a new
brand adds one new diamond to the structure)

Also, the diamond does not scale responsively as the width of the website changes. Ideally,
the diamond structure should go from a 4-3-4-3, to a 3-3-3-3, to a 3-2-3-2, to a 2-2-2-2
structure as the width of the page changes.

Spacings between the diamonds need to remain

Uniform in every viewport.
 Dependency of fields
From the backend as we will see that there are fields that determine what other fields will be. This relationship is one that
we need to think about. For Example, MacBook Air has been in sale since 2009. The 2009 MacBook air has a core 2 duo
processor while that of 2018 for instance has Core i5 or i7. This means that a 2009 version can never have any other kind
of processor other than Core 2 duo. Also, the screen sizes for 2009 and 2010 are slightly different. 2009 model only has 13
inches screen while 2010 model has 11 inch as well as 13 inch screens. Depending on the processor type, some model
years have RAM and Hard Disk Capacities that depend on the Screen Size. If this dependence is not treated, we will have a
lot or redundant options that will confuse user. This means that for example:

Let’s assume that the user is selling 2009 MacBook Air. The current backend does not have a way of knowing the right
options for the fields to be presented to the user, so it will just shows everything including options that are no practical or
don’t exist

What year model is it? Early 2009, Late 2010, Early 2011 (User selects Early 2009)
What is the display size? (11”, 13”, 15”, 17” …..) (But 2009 model only 13”)
What Is the Processor spec? (Core Duo, Intel core i5, intel core i7) (But 2009 only has Core Duo Processor)

The solution needs to be a generalized one that can handle such dependencies and not be hard coded so that the solution
can be applied to other categories like mobile where for instance for iPhone there is a dependency between color and the
storage capacity iPhone 7 plus. A red iPhone 7 plus only comes in 128 GB and 256 GB while other colors come in 32, 128
and 256 GB. I will explain further if you are confused.