T2: Create UI 1/2

[sevvalyurtseven]

• Create 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

• [x] Create Layout Components like: Header, PageContent, Footer NOTE! There should be only ONE Header, Footer components for all pages, no color changes needed!

Create Page Components (Only Desktop Views): Home, Product List

• [x] Create repetitive Components like: ProductCard, CategoryCard
• [x] Home Page: Slider component
  • [x] Find a slider component can be used in React JS
• [x] Activate React Router and Links for Home and Shopping links
• [x] Use an Icon Library like: FontAwesome (CDN is recommended)

[sevvalyurtseven]

@gokhanozdemir slider'im da bir sorun vaaar. mainslider componentinde olusturdum kendisini

[sevvalyurtseven]

https://github.com/sevvalyurtseven/E-Commerce-Project/blob/main/my-react-project/src/components/MainSlider.js

[gokhanozdemir]

can not recreate issue. Chrome (Version 120.0.6099.109 (Official Build) (arm64)) ve Safari (119.0 (64-bit)) çözüm önerisi olarak node modules kaldırıp yeniden kurmayı önerebilirim. Arada slide için kurulan bazı paketlerin sürümleri bir şekilde çakışmış olabilir.

[sevvalyurtseven]

Home Page:

• 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:

• [ ] Create Layout Components like:

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

• [ ] Create Home Page Component Desktop View

• [ ] Create Home Page Component Mobile View

• [ ] Create repetitive Components like: ProductCard

• [ ] Slider component

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

• [ ] Activate React Router and Links for Home Page

• [ ] 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
       ...