Footer — Call to Action

1import type * as React from 'react'
2 
3import { ButtonLink } from '@/components/button'
4import { Footer, FooterNav, FooterNavColumn } from '@/components/footer'
5import { IconArrowForward } from '@/icons/arrow-forward'
6 
7// ── Sample content — replace with your service's own ────────────────────────
8const ctaSample = {
9  heading: 'Need help with your application?',
10  description: 'Our team can talk you through the steps and check what you need before you start.',
11  action: { label: 'Contact us', href: '#contact' },
12}
13 
14const columnsSample = [
15  {
16    heading: 'Services',
17    links: [
18      { name: 'Apply for a licence', href: '#licence' },
19      { name: 'Pay a fine', href: '#fine' },
20      { name: 'Book an appointment', href: '#appointment' },
21    ],
22  },
23  {
24    heading: 'About',
25    links: [
26      { name: 'Who we are', href: '#about' },
27      { name: 'Our strategy', href: '#strategy' },
28      { name: 'Careers', href: '#careers' },
29    ],
30  },
31  {
32    heading: 'Help',
33    links: [
34      { name: 'Accessibility help', href: '#accessibility-help' },
35      { name: 'Give feedback', href: '#feedback' },
36      { name: 'Report a problem', href: '#report' },
37    ],
38  },
39]
40 
41const legalLinksSample = [
42  { name: 'Accessibility', href: '#accessibility' },
43  { name: 'Privacy', href: '#privacy' },
44  { name: 'Copyright', href: '#copyright' },
45]
46 
47const departmentSample = 'Digital NSW, Department of Customer Service'
48 
49/**
50 * Repoints the button's colour tokens at the footer's ink, so the action reads
51 * correctly on all thirteen surfaces and in both themes. `outline` rather than
52 * `solid` because a solid button needs an inverse text colour, and the footer
53 * exposes its ink but not its surface — outline needs only the one token. It is
54 * also the right emphasis: the page's primary action belongs above the footer,
55 * not in it.
56 */
57const ctaActionClassName = [
58  // The `dark:` repeat is load-bearing — see the note on
59  // `footerSocialLinkClassName` in footer.tsx.
60  '[--btn-bg:var(--footer-ink)] dark:[--btn-bg:var(--footer-ink)]',
61  '[--btn-icon:var(--footer-ink)]',
62  '[--btn-hover-overlay:var(--footer-halo)]',
63  '[--btn-active-overlay:var(--footer-halo-active)]',
64].join(' ')
65 
66type FooterCtaProps = Omit<React.ComponentProps<typeof Footer>, 'children'> & {
67  columns?: typeof columnsSample
68  cta?: typeof ctaSample
69}
70 
71/**
72 * A call-to-action band above the site map, for the one thing you most want
73// … truncated