refactor(legal): extract MarketingFooter, mount on /pricing and /contact-sales
Pulls the existing /landing footer markup into `components/common/MarketingFooter.tsx` and mounts it on PricingPage and ContactSalesPage so the Privacy / Terms / Policies / Contact links are reachable from every marketing surface (including the page Stripe's reviewer spends the most time on during live-mode activation). All three current call sites wrap in `.landing-page`, so the existing `landing-footer` CSS — and its `--lp-*` variables — resolve without change. Landing renders pixel-identically; Pricing and ContactSales now match. A JSX comment on the component documents the `.landing-page` scoping requirement so future authors don't drop it on a non-marketing route and see it render unstyled. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
35
frontend/src/components/common/MarketingFooter.tsx
Normal file
35
frontend/src/components/common/MarketingFooter.tsx
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
|
||||||
|
// Styles live in src/styles/landing.css under `.landing-footer*`. The component
|
||||||
|
// must be rendered inside a `.landing-page` wrapper so the `--lp-*` CSS
|
||||||
|
// variables resolve. All current marketing surfaces (LandingPage,
|
||||||
|
// PricingPage, ContactSalesPage) already provide that wrapper.
|
||||||
|
export function MarketingFooter() {
|
||||||
|
return (
|
||||||
|
<footer className="landing-footer">
|
||||||
|
<div className="landing-footer-inner">
|
||||||
|
<div className="landing-footer-left">
|
||||||
|
<div className="landing-nav-logo-icon" style={{ width: 24, height: 24, borderRadius: 6 }}>
|
||||||
|
<svg viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
|
||||||
|
<circle cx="12" cy="5" r="2" />
|
||||||
|
<line x1="12" y1="7" x2="12" y2="11" />
|
||||||
|
<circle cx="6" cy="15" r="2" />
|
||||||
|
<circle cx="18" cy="15" r="2" />
|
||||||
|
<line x1="12" y1="11" x2="6" y2="13" />
|
||||||
|
<line x1="12" y1="11" x2="18" y2="13" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<span className="landing-footer-copy">© 2026 ResolutionFlow</span>
|
||||||
|
</div>
|
||||||
|
<ul className="landing-footer-links">
|
||||||
|
<li><Link to="/privacy">Privacy</Link></li>
|
||||||
|
<li><Link to="/terms">Terms</Link></li>
|
||||||
|
<li><Link to="/policies">Policies</Link></li>
|
||||||
|
<li><Link to="/contact">Contact</Link></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default MarketingFooter
|
||||||
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
|
|||||||
|
|
||||||
import { salesApi, type SalesLeadSource } from '@/api/sales'
|
import { salesApi, type SalesLeadSource } from '@/api/sales'
|
||||||
import { PageMeta } from '@/components/common/PageMeta'
|
import { PageMeta } from '@/components/common/PageMeta'
|
||||||
|
import { MarketingFooter } from '@/components/common/MarketingFooter'
|
||||||
import { useAppConfig } from '@/hooks/useAppConfig'
|
import { useAppConfig } from '@/hooks/useAppConfig'
|
||||||
import '@/styles/landing.css'
|
import '@/styles/landing.css'
|
||||||
|
|
||||||
@@ -342,6 +343,8 @@ export function ContactSalesPage() {
|
|||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<MarketingFooter />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react'
|
|||||||
import { Link } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { PageMeta } from '@/components/common/PageMeta'
|
import { PageMeta } from '@/components/common/PageMeta'
|
||||||
import { useAppConfig } from '@/hooks/useAppConfig'
|
import { useAppConfig } from '@/hooks/useAppConfig'
|
||||||
|
import { MarketingFooter } from '@/components/common/MarketingFooter'
|
||||||
import '@/styles/landing.css'
|
import '@/styles/landing.css'
|
||||||
|
|
||||||
const FAQ_ITEMS = [
|
const FAQ_ITEMS = [
|
||||||
@@ -410,30 +411,7 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{/* Footer */}
|
<MarketingFooter />
|
||||||
<footer className="landing-footer">
|
|
||||||
<div className="landing-footer-inner">
|
|
||||||
<div className="landing-footer-left">
|
|
||||||
<div className="landing-nav-logo-icon" style={{ width: 24, height: 24, borderRadius: 6 }}>
|
|
||||||
<svg viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ width: 14, height: 14 }}>
|
|
||||||
<circle cx="12" cy="5" r="2" />
|
|
||||||
<line x1="12" y1="7" x2="12" y2="11" />
|
|
||||||
<circle cx="6" cy="15" r="2" />
|
|
||||||
<circle cx="18" cy="15" r="2" />
|
|
||||||
<line x1="12" y1="11" x2="6" y2="13" />
|
|
||||||
<line x1="12" y1="11" x2="18" y2="13" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<span className="landing-footer-copy">© 2026 ResolutionFlow</span>
|
|
||||||
</div>
|
|
||||||
<ul className="landing-footer-links">
|
|
||||||
<li><Link to="/privacy">Privacy</Link></li>
|
|
||||||
<li><Link to="/terms">Terms</Link></li>
|
|
||||||
<li><Link to="/policies">Policies</Link></li>
|
|
||||||
<li><Link to="/contact">Contact</Link></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom'
|
|||||||
|
|
||||||
import { plansApi, type PublicPlanResponse } from '@/api/plans'
|
import { plansApi, type PublicPlanResponse } from '@/api/plans'
|
||||||
import { PageMeta } from '@/components/common/PageMeta'
|
import { PageMeta } from '@/components/common/PageMeta'
|
||||||
|
import { MarketingFooter } from '@/components/common/MarketingFooter'
|
||||||
import { useAppConfig } from '@/hooks/useAppConfig'
|
import { useAppConfig } from '@/hooks/useAppConfig'
|
||||||
import '@/styles/landing.css'
|
import '@/styles/landing.css'
|
||||||
|
|
||||||
@@ -431,6 +432,8 @@ export function PricingPage() {
|
|||||||
>
|
>
|
||||||
Built on Stripe + AWS · Encrypted in transit and at rest
|
Built on Stripe + AWS · Encrypted in transit and at rest
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<MarketingFooter />
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user