T2: Home Page

[imunirbesye]

• Figma Designs: Figma-Ecommerce-UI-Kit-(Demo-Version)-(Community)

• Use only Flex Layout

• Use only Tailwind classes, no custom classes allowed!

  • Check Customizing Theme and Arbitrary values on Tailwind
  • Check @apply directive usage on Tailwind
  • Check Tailwind responsive solution:
  • Check Tailwind switch breakpoints min to max responsive solution:

• [x] Create Layout Components like:

  • [x] Header NOTE! There should be only ONE HEADER COMPONENT and ONE MENU for all pages, no color changes needed!
  • [x] PageContent (PageContent means a layout container that holds page components and routing definitions)
  • [x] Footer

• [x] Create Home Page Component Desktop View

• [x] Create Home Page Component Mobile View

• [x] Create repetitive Components like: ProductCard

• [x] Slider component

  • [x] Find a slider component can be used in React JS
  • [x] Implement it to Home Page

• [x] Activate React Router and Links for Home Page

• [x] Use an Icon Library like: FontAwesome (CDN is recommended)

Your folder tree should be like

src/
   components/
       ProductCard.js
   layout/
       Header.js
       PageContent.js
       Footer.js
   pages/
       HomePage.js
       ...

[imunirbesye]

I've completed most of the tasks as much as I can. I did get problems time to time but most of them are solved now. I just couldn't put local images background dynamically, I need help about that.

[gokhanozdemir]

The images will be provided via API in the later stages.

[imunirbesye]

I had a small problem about background images btu I fixed it with inline CSS.