MHRT Milestone 1 – Website Design & Development

MHRT Milestone 1 – Website Design & Development Payment: $400.00 Date: July 7, 2026 Version: v4 ________________________________________ Payment Terms Payment will be released only after all deliverables included in this milestone have been completed, reviewed, tested, approved by MHRT, and all requested revisions have been incorporated. Approval of Figma designs alone does not constitute completion of this milestone. A page shall be considered complete only after the corresponding Breakdance implementation has been developed within the MHRT WordPress development environment, tested, verified to function correctly, and approved by MHRT. ________________________________________ Objective Develop the first group of MHRT website pages by converting the approved AI-generated layouts into professional, production-ready Figma designs and fully functional Breakdance pages. This milestone establishes the visual identity, design standards, reusable components, and development practices that will be used throughout the remainder of the website. The AI layouts, branding, copy, content structure, and design direction have already been established by MHRT. The purpose of this milestone is to accurately translate those approved concepts into editable Figma designs and production-ready Breakdance pages while maintaining visual consistency, usability, responsiveness, and development best practices. ________________________________________ Scope of Work This milestone includes the design and development of the following MHRT foundation and core pages. All pages listed below shall be fully completed in both Figma and Breakdance. Foundation & Core Pages • MHRT Landing Page • Coming Soon – Mobile App • SAG Platforms • About SAG Platforms • Share Your Story • Advertise With Us • Talk Tuesday • Relationship Talk • Daily Dose • Events Page • Community Feed Each page included in this milestone shall be fully designed in Figma, developed in Breakdance within the MHRT WordPress development environment, tested for functionality and responsiveness, and approved by MHRT prior to milestone completion and payment. ________________________________________ Project Environment The designer/developer will be provided administrator access to the MHRT WordPress development environment. All website development shall be completed directly within the provided WordPress development environment using the Breakdance Builder. Development shall not be completed solely within a local environment or separate staging environment unless approved by MHRT. All pages, reusable components, styling, responsiveness, navigation, buttons, links, forms, images, icons, animations (if applicable), advertising placements, and interactive elements shall function properly within the WordPress environment before milestone approval. ________________________________________ Figma Design Requirements The designer shall: • Create fully editable Figma designs. • Organize all pages into a logical project structure. • Properly name all pages, frames, components, layers, styles, and assets. • Utilize reusable Figma components whenever possible. • Maintain consistent typography, spacing, colors, icons, branding, and user experience throughout the project. • Create desktop Figma layouts for every page. Responsive tablet and mobile layouts shall be developed and optimized during the Breakdance implementation phase. The final website must provide a consistent user experience and be fully responsive across desktop, tablet, and mobile devices. (v4) The Landing Page shall replace placeholder device mockups with: • BuddyBoss Sandbox screenshots using MHRT branding, or • BuddyBoss platform screenshots branded with the MHRT logo. ________________________________________ Breakdance Development Requirements Every approved Figma page shall be fully developed within the MHRT WordPress development environment using Breakdance Builder. The Breakdance implementation shall: • Match the approved Figma design with pixel-perfect accuracy. • Utilize reusable Breakdance components. • Utilize reusable global styles. • Utilize reusable containers where appropriate. • Follow Breakdance development best practices. • Be fully responsive across desktop, tablet, and mobile devices. • Function properly across supported browsers. All interactive elements shall function correctly, including: • Navigation • Buttons • Links • Forms • Accordions • Tabs • Image elements • Icons • Responsive layouts • Animations (if applicable) The developer shall avoid unnecessary duplication of sections or page-specific structures that reduce maintainability. Reusable Breakdance elements shall be created wherever practical to support future development. ________________________________________ Design-to-Development Revisions The Figma designs represent the approved visual direction for each page. During Breakdance development, minor design refinements or technical adjustments may be necessary to ensure proper functionality, responsiveness, browser compatibility, accessibility, or compatibility with Breakdance, WordPress, and BuddyBoss. Any reasonable modifications required during Breakdance development to accurately implement the approved Figma designs are considered part of this milestone and shall not constitute a change request or additional billable work, provided they remain within the approved page scope and functionality. Examples include, but are not limited to: • Responsive layout adjustments • Spacing and alignment refinements • Typography adjustments for responsive viewing • Image sizing and positioning • Breakdance component optimization • BuddyBoss compatibility adjustments • Navigation refinements • Advertising placement adjustments • Minor UI/UX improvements required for implementation Any requested changes that significantly alter the approved design, add new functionality, introduce additional pages, or expand the agreed-upon scope of work shall be treated as a separate change request and approved by both parties before additional work is performed. ________________________________________ Advertising & Monetization Requirements All applicable pages shall be designed and developed to support future website monetization. Where appropriate, page layouts shall include reusable, responsive advertising locations compatible with: • Google AdSense • Advanced Ads WordPress Plugin • Sponsored advertisements • Affiliate marketing banners • MHRT promotional campaigns • Future advertising platforms The Breakdance implementation shall include reusable advertising sections where appropriate, including: • Leaderboard banner areas • In-content advertisement locations • Sidebar advertisement areas (where applicable) • Promotional call-to-action sections • Footer advertisement sections (where appropriate) • Reusable Advanced Ads containers • Google AdSense-ready placement areas All advertising locations shall remain responsive and maintain proper spacing and layout consistency regardless of whether advertisements are displayed. The developer shall create reusable Breakdance elements, widget areas, shortcode containers, or other appropriate integration points that allow advertisements to be easily managed through the Advanced Ads WordPress plugin without requiring future page redesign. Actual Google AdSense account setup, ad approval, advertising code implementation, campaign management, or advertising optimization is not included unless specifically requested under a separate scope of work. ________________________________________ Reusable Components The designer/developer shall establish reusable components to support future website development. Figma • Typography styles • Color styles • Buttons • Cards • Navigation • Icons • Section layouts • Design system • Reusable components Breakdance • Global styles • Reusable containers • Reusable sections • CTA sections • Advertising sections • Widget-ready containers • Advanced Ads-ready containers • Global buttons • Global typography • Global color system ________________________________________ Deliverables The following pages shall be fully completed in both Figma and Breakdance: Foundation & Core Pages • MHRT Landing Page • Coming Soon – Mobile App • SAG Platforms • About SAG Platforms • Share Your Story • Advertise With Us • Talk Tuesday • Relationship Talk • Daily Dose • Events Page • Community Feed Each page shall include: • Final approved Figma design • Desktop layout • Tablet layout • Mobile layout • Fully functional Breakdance implementation • Responsive design • Working navigation, links, buttons, and interactive elements • Advertising-ready sections where applicable • Final approval by MHRT ________________________________________ Files to Deliver Upon completion of this milestone, provide: • Fully editable Figma source files. • Organized Figma project. • Properly named pages. • Properly named frames. • Properly named layers. • Properly named components. • Properly named styles. • All graphics and design assets created during this milestone. • Completed Breakdance implementation within the MHRT WordPress development environment. Providing exported images, screenshots, PDFs, or view-only Figma prototypes does not satisfy this requirement. ________________________________________ Acceptance Criteria This milestone shall be considered complete only when: • Every required page has been completed in Figma. • Every required page has been fully developed in Breakdance. • Every page has been developed directly within the MHRT WordPress development environment using Breakdance Builder. • Every page accurately matches the approved Figma design. • Desktop Figma designs have been completed for all pages, and the corresponding Breakdance implementation has been optimized for desktop, tablet, and mobile devices. (V4) • Prior to milestone approval, the designer/developer shall provide responsive previews of each completed page demonstrating the desktop, tablet, and mobile implementations as developed within the MHRT WordPress development environment. Responsive previews may be provided through a live development/staging link or by supplying desktop, tablet, and mobile screenshots for each completed page. (v4) • All navigation, buttons, links, forms, widgets, images, and interactive elements function correctly. • All pages have been tested and approved on desktop, tablet, and mobile devices. Responsive layouts have been optimized for usability, readability, spacing, typography, images, navigation, and interactive elements across supported screen sizes. (v4) • Advertising placeholder areas and reusable advertising components have been implemented where applicable. • Google AdSense-ready placement areas and Advanced Ads-compatible containers have been incorporated into applicable page layouts. • All reusable Figma and Breakdance components have been created. • All requested revisions have been completed. • All Figma source files have been delivered in an organized structure. • MHRT has reviewed, tested, and approved all deliverables.