implement ecommerce component structure for home page

[gkpty]

Involves implementing ecommerce components in the homepage.

The concept of ecommerce components is such that you can customize your code without interfering with any of the ecommerce componets. meaning you can customize the compoennts through props inside of the pages.

you can simply run npm upgrade and push, or git pull upstream. since the code of the pages will rarely change in master this shouldnt cause any issues.

if you want to seriously modify a component or create a new one, for example nav, you can create a new component called CoolerNav with a similar structure, and then make a pull request.

in your code you can change the pages (main things isnide app) without interfering with any other PR/ update. you shouldnt PR with changes to any of the pages.

The following ecommerce componets with the follwoing props should be created iniisde of components.

• this repository should be converted to a monorepo with turborepo. when pushing to master, it will deploy a new app, and publish a new version of ecommerce-components in npm

• SEO

• Nav

  • Description: Navigation component
  • Props:
    • Brand?: JSX | image
    • Products?: Product[]
    • Links: {type: ‘link’ | ‘dropdown’, label, url or options{ [key: string]: string | JSX}, id: string }
      • Blog: link
      • Support?: dropdown
    • Search?: boolean
    • User?: boolean
    • Languages?: string[]

• sections

  • Hero Section
    • Image
    • Content
    • padding
  • Centered Image section
    • Image: JSX
    • Padding
    • Content: string or JSX
  • Side Image section
    • Padding
    • Image
    • Content: string or JSX
  • Features Section
    • Elements:
      • Icon: JSX or image
      • Title: string
      • Description: string

• Carousel

  • Items: {image, title, description, price, url}[]
  • screens: { [xs, sm, .. ]: number }
  • Draggable: boolean
  • Speed: number

• Footer

  • Social media links: { [facebook | instagram | linkedin | twitter]: string URL
  • Elements: {title: string, links: {text, url}[] }
  • Icons: JSX[]
  • LegalLinks?: {text, url}[]
  • Copyright: boolean

Create a naming convention for css classes and generate all important css classes:

• Main color
• Secondary color
• Third color
• Default-padding