Dynamic Food Attribute in Homepage Heading

[TanishqAswar]

Description

We would like to enhance the user experience on the homepage by displaying a dynamic heading that reflects various food attributes. The heading will change every 2 seconds, providing a more engaging and interactive experience for users.

Current Implementation

Currently, the homepage displays a static heading:

We want to replace this with a dynamic heading that incorporates various food-related attributes.

Proposed Changes

Dynamic Heading: Change the current static heading to display: {currentAttribute)

where {currentAttribute} cycles through a list of attributes, such as:

• Delicious

• Savory

• Crunchy

• Juicy

• Flavorful

• Mouthwatering

• Cheesy

• Spicy

• Tender

• Zesty

• Sweet

• Hearty

• Fresh

• Decadent

• Satisfying

• Rich

• Classic

• Implementation Details:

  • Use a state variable to hold the current attribute and an index to track the current position in the attributes array.
  • Implement a setInterval to update the current attribute every 2 seconds.
  • Ensure the heading is styled appropriately for dark and light modes.

Benefits

• Improves user engagement by creating a more dynamic and appealing user interface.
• Encourages users to connect with the content by highlighting the deliciousness of the offerings.

Additional Notes

Please let me know if any further details are required or if there are any concerns regarding this implementation.

[TanishqAswar]

Hi! @M-ayank2005 I created this issue and would love to work on it. Could you please assign it to me?

[M-ayank2005]

@TanishqAswar you are assigned this issue go ahead

[TanishqAswar]

Thanks For assigning