Redesign New Storefront for Dynamic CSS Editing

[John-zaviago]

Issue Title: Redesign New Storefront for Dynamic CSS Editing

Issue Description: The objective is to redesign the new storefront with a focus on structured CSS, specifically defining primary and secondary colors, button colors, and heading styles (H1, H2, H3). The design should facilitate dynamic changes through a Vue setting page connected to a CSS master.

Instructions:

• Follow Adam's specific instructions regarding color schemes and CSS structure.
• Ensure that primary, secondary, button colors, and heading styles are clearly defined in the CSS.
• Implement a design system that allows users to dynamically adjust these styles through a Vue setting page.

Considerations:

• Keep the design clean and user-friendly.
• Prioritize flexibility for users to modify CSS dynamically.

Implementation Steps:

1. Define primary and secondary colors in the CSS.
2. Set button colors and styles according to the design specifications.
3. Structure heading styles (H1, H2, H3) with clear distinctions.
4. Implement Vue components for the setting page.
5. Connect Vue setting page to the CSS master for dynamic editing.

Communication:

• Update Adam on the progress and seek feedback during the design process.
• Clearly document the CSS structure for reference.