(MFE) Global Footer Implementation — Layout, Branding & Link Structure

[MTsomo]

Global Footer Implementation — Layout, Branding & Link Structure

As a WeBuddhist Academy Site Visitor,
I need an updated global dark footer across all pages,
So that I can access company resources, explore learning tracks, locate partner links, and access mobile app store downloads.

Description

This ticket covers the complete overhaul of the Global Footer shell across all site views (Home Signed-Out & Home Logged-In). It updates the color palette to the dark brand identity (#1C0A00), updates typography to Cormorant Garamond for display headers, introduces the "Become a Course Partner" link, replaces legacy copyright notices, and updates social and store buttons.

Design System Tokens:
Background: #1C0A00 · Primary Text: #FDF6EC · Muted Text: #FDF6EC80 / #FDF6EC99
Accent / Headings: #E8873A · Borders: #FDF6EC18 / #FDF6EC70
Display Font: Cormorant Garamond · Body Font: Inter

Scope of Work & Component Specs

1. Footer Container Shell

• Background #1C0A00, text #FDF6EC, padding 64px 40px 28px, inner max-width 1200px centered.

2. Upper Region (4-Column Layout)

• Grid layout: 1.6fr 1fr 1fr 1.3fr, gap 56px, bottom padding 48px.
• Column 1 — Brand:
• Logo (assets/logo.svg, 32x32) + Wordmark "WeBuddhist Academy" (Cormorant Garamond 500, 22px, #FDF6EC, letter-spacing: 0.2px, gap 10px).
• Entire lockup links to the page's home page (replaces legacy external sherab.org link).
• Description text: 13px, #FDF6EC80, line-height: 1.7, max-width 270px.
• Column 2 — Company:
• Heading: "COMPANY" (10px, letter-spacing: 2.5px, weight 700, #E8873A).
• Links: About Us · Contact Us · Privacy Policy (Inter 13px #FDF6EC85, hover #E8873A).
• Column 3 — Learn:
• Heading: "LEARN" (10px, letter-spacing: 2.5px, weight 700, #E8873A).
• Links: Explore Courses · Schools & Partners · Become a Course Partner (New link pointing to partner page).
• Column 4 — Download Our App:
• Heading: "DOWNLOAD OUR APP" (10px, letter-spacing: 2.5px, weight 700, #E8873A).
• Buttons (.ft-store): Google Play and App Store outline cards (padding: 9px 16px 9px 13px, border 1px solid #FDF6EC70, radius 9px, min-width 170px). Hover bg #E8873A12, border #E8873A.

3. Lower Bar

• Top border 1px solid #FDF6EC18, padding-top 24px, flex justify-content: space-between, responsive wrapping.
• Left Text: "© 2026 WeBuddhist Academy. All rights reserved." (12px, #FDF6EC99). (Updated from Sherab).
• Right Social Icons (.ft-social): 34px circles, border 1px solid #FDF6EC70, icons for Facebook, Instagram, X (Twitter), and YouTube (#FDF6EC85). Hover border & icon #E8873A, bg #E8873A12.

Acceptance Criteria

• Footer background and text tokens match the dark #1C0A00 and cream #FDF6EC color specification.
• Brand heading uses Cormorant Garamond 22px and reads "WeBuddhist Academy".
• Brand lockup links internally to the home page rather than an external sherab.org URL.
• "Become a Course Partner" link is present under the "Learn" column.
• Copyright string reads "© 2026 WeBuddhist Academy. All rights reserved."
• Store download buttons and social media circles transition smoothly on hover using #E8873A accent colors.
• Layout scales and wraps gracefully on narrow tablet and mobile viewports.

Definition of Done

• Visual Inspection: Confirmed layout parity with design specs across desktop and mobile screens.
• Link Audit: Verified all links have valid href attributes (or placeholder routes where backends are pending).

[choeying-10]

import line added PRs for mfes:

• Added import line for footer style frontend-app-catalog#5
• Added import line for footer style frontend-app-account#3
• feat: import line for footer styling frontend-app-learning#17
• feat:import line for footer style frontend-app-learner-dashboard#17
• feat:footer import line added for footer styling frontend-app-discussions#1
• feat: import brand footer styles frontend-app-profile#1

main code file changes brand-openedx and frontend-component-footer:

• feat/redirect schools and partners alignment and mfe footer scss brand-openedx#3
• feat/Rebrand learner MFE footer for WeBuddhist Academy and rebuild dist. frontend-component-footer#23

[choeying-10]

placeholder url for become a course partner

[yogeshbhagatcode]

@choeying-10
Please go through the following items, so that we can make sure we are not missing anything.

• Check the list of mfes that we get in ulmo
• Test all of those pages in your local for footer rebranding
• Check which ones are not forked in our openpecha
• Check if any of them are user facing? Do we need to rebrand those pages? Share this info with Menla for her to take the decision.
  cc: @MTsomo

[choeying-10]

Tutor 21 + Open edX Ulmo, The default/core MFEs are:

• learning
• authn
• authoring
• learner dashboard
• gradebook
• profile
• discussions
• account
• communications
• administrative console (not user facing, studio site for site administrators, operators or library/course authors)

NOTE: Gradebook, Administrative console and communications not forked in OpenPecha. There is an MFE frontend-app-instructor-dashboard forked in OpenPecha

2 additions in ULMO:

• catalog <- not default in Ulmo

MFEs with user facing and admin/creator facing:

User-facing	Admin/Creator-facing
Authn	Authoring
Learner Dashboard	Communications
Learning	Gradebook
Discussions	ORA Grading
Account	Administrator Console
Profile

Test mfes in local for footer rebranding:

Webuddhist-tech/frontend-component-footer#24 - fix

[yogeshbhagatcode]

core mfes:

• learning
• authn
• authoring
• learner dashboard
• gradebook
• profile
• discussions
• account

@choeying-10 Can you please verify your list for ulmo version?

[choeying-10]

updated the comment #405 (comment)

[choeying-10]

catalog_mfe.py - update the config for catalog to define the CATALOG_MICROFRONTEND_URL in MFE_CONFIG

[choeying-10]

Webuddhist-tech/brand-openedx#5
Webuddhist-tech/brand-openedx#9

• finalised

[yogeshbhagatcode]

catalog_mfe.py - update the config for catalog to define the CATALOG_MICROFRONTEND_URL in MFE_CONFIG

@choeying-10 can you please move MFE_CONFIG["CATALOG_MICROFRONTEND_URL"] from the catalog_mfe.py file?
I checked in the new openedx release and we do not have this available.

As per our initial decision, we want to keep catalog_mfe.py only to be able to install catalog mfe in ulmo version. In future release, we will be dropping this plugin entirely as it will be included in tutor out of the box.

But as per your changes we will still need MFE_CONFIG["CATALOG_MICROFRONTEND_URL"] in future too.

So, please keep only the default installation things in catalog_mfe.py as per this official document reference.

And we can move MFE_CONFIG["CATALOG_MICROFRONTEND_URL"] to this plugin instead : configuration_plugin.
Because we have all the general configurations here.

Please do a sanity check once you have moved this to make sure everything is working as expected.