T3: Create UI 2/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

Create Page Components (Only Desktop Views):

• [x] Product Page
• [x] About Page
• [x] Team Page
• [x] Contact Page - (optionally, you can add Contact Form without functionality)

NOTE! There should be only ONE Header, Footer components for all pages, no color changes needed!

• [x] Activate React Router and Links

[sevvalyurtseven]

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

NOTE! There should be only ONE Header, Footer components for all pages, no color changes needed!**

NOTE! Please check CSS rules here to make product list responsively: MandaLina

• [ ] Create Shop Page Component Mobile View

• [ ] Create Shop Page Component Desktop View

• [ ] Activate React Router and Links for Shop Page

• [ ] the url should be /shop

[sevvalyurtseven]

Product Detail 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:

NOTE! There should be only ONE Header, Footer components for all pages, no color changes needed!**

• [ ] Create Product Detail Page Component Mobile

• [ ] Create Product Detail Page Component Desktop View

• [ ] Activate React Router and Links for Product Detail Page (Product card click should navigate to Product Detail)

[sevvalyurtseven]

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

NOTE! There should be only ONE Header, Footer components for all pages, no color changes needed!**

• [ ] Create Contact Page Component Mobile View
• [ ] Create Contact Page Component Desktop View
• [ ] Activate React Router and Links for Contact Page

[sevvalyurtseven]

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

NOTE! There should be only ONE Header, Footer components for all pages, no color changes needed!**

• [ ] Create Team Page Component Mobile View
• [ ] Create Team Page Component Desktop View
• [ ] Activate React Router and Links for Team Page
  • [ ] Add "Erhan FIRAT" as Project Owner (you can use linkedin profile image)
  • [ ] Add "Gökhan Özdemir" as Scrum Master (You can use linkedin profile image)
  • [ ] Add yourself as a Full Stack Developer
  • [ ] Add your team members

[sevvalyurtseven]

About Us 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:

NOTE! There should be only ONE Header, Footer components for all pages, no color changes needed!**

• [ ] Create About Us Page Component Mobile View
• [ ] Create About Us Page Component Desktop View
• [ ] Activate React Router and Links for About Us Page