T02: Home Page

[Acun9]

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

Tailwind is Mobile First in default. If you want to convert to Desktop first, you may follow this documentation: Tailwind switch breakpoints min to max responsive solution: NOT RECOMMENDED

Follow Mobile First approach

• Create Layout Components like: (Whats layout pattern from NextJS docs)

  • 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) Whats layout pattern from NextJS docs)
  • Footer

• Create Home Page Component Mobile View (Mobile First approach)

• Create Home Page Component Desktop 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 external icon library Lucide or download and save in your file directory Feather

Your folder tree should be like

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