UI feature commit - item advertising sections

[Damienb123]

Item Advertising

:notebook_with_decorative_cover: Table of Contents

• Plan of Action
• Code Breakdown
• Visuals

:bangbang: Plan of Action

• Starting the front-end phase of the project development.
• Prior to developing code, the goal is to take ideas from the created Figma prototype and other resources like DaisyUI Components to create 4 sections of item advertising.
  • Sections include - Top Sold, Top Rated, Trending Items, Recently Added.
  • Using DaisyUI, cards were used to display item images, descriptions of each item, badges for item identification.
  • (In Current Development) Responsive buttons will be added stating "Add to Cart", to allow users to add these items to there existing cart.

:space_invader: Code Breakdown

1 example of the Recently Added Section for Belvoir Farm - Organic Elderflower Lemonade.

• Parent div:

  • Class names: flex space-x-4.
  • Purpose: Creates a flex container with horizontal spacing between its child elements.

• Child div (Card Container):

  Class names: card bg-base-100 w-96 shadow-xl. Purpose: Acts as a card with a background color, width, and shadow effect.

• Figure:

  • Contains an image.
  • Image source: URL "https://contenthandler-raleys.fieldera.com/prod/45777/1/0/0/80060414-Main.jpg".
  • Image alt text: "Belvoir Farm - Organic Elderflower Lemonade".

• Card Body div:

  • Contains the main content of the card.

• Card Title h2:

  • Text: "Belvoir Farm - Organic Elderflower Lemonade".
  • Contains a nested div for a badge.

• Badge div (Inside Title):

  • Class name: bg-success.
  • Text: "NEW".
  • Purpose: Indicates the item is new.

• Description p:

  • Text: "A Refreshing, floral, lemony, sparkling, natural goodness taste of Elderflower lemonade.".
  • Purpose: Provides a brief description of the item.

• Card Actions div:

  • Class names: card-actions justify-end.
  • Purpose: Contains action elements, aligned to the right.

• Badge div (Inside Actions):

  • Class names: badge badge-outline.
  • Text: "Organic".
  • Purpose: Indicates the item is organic.

<div className="flex space-x-4">
          <div className="card bg-base-100 w-96 shadow-xl">
            {/*Image of Item*/}
            <figure>
              <img
                src="https://contenthandler-raleys.fieldera.com/prod/45777/1/0/0/80060414-Main.jpg"
                alt="Belvoir Farm - Organic Elderflower Lemonade" />
            </figure>
            <div className="card-body">
              <h2 className="card-title">
                Belvoir Farm - Organic Elderflower Lemonade
                <div className="badge bg-success">NEW</div>
              </h2>
              <p>A Refreshing, floral, lemony, sparkling, natural goodness taste of Elderflower lemonade.</p>
              <div className="card-actions justify-end">
                <div className="badge badge-outline">Organic</div>
              </div>
            </div>
          </div>

:eyes: Visuals