Footer

import { AppDownloadButton, Button, Link, Typography } from "@krakentech/coral/atoms";
 
import {
	Footer,
	FooterAppDownloadContainer,
	FooterCountryList,
	FooterList,
	FooterListContainer,
	FooterSocialLink,
	FooterSocialList,
	FooterText,
} from "@krakentech/coral/organisms";
 
import {
	IconFacebook,
	IconInstagram,
	IconX,
	IconLinkedIn,
	IconYouTube
} from "@krakentech/icons";
 
const menus = [
    {
        title: 'The Octoverse',
        items: [
            { text: 'About us', href: '/about' },
            { text: 'Blog', href: '/blog' },
            { text: 'Awards', href: '/awards' },
            { text: 'A greener future', href: '/a-greener-future' },
            { text: 'Octoplus', href: '/octoplus' },
            { text: 'Get your plushie', href: '/get-your-plushie' },
            { text: 'Careers', href: '/careers' },
        ],
    },
    {
        title: 'Smart home',
        items: [
            { text: 'Smart tariffs', href: '/smart-tariffs' },
            { text: 'Electric vehicles', href: '/electric-vehicles' },
            { text: 'Solar panels', href: '/solar-panels' },
            { text: 'Home batteries', href: '/home-batteries' },
            { text: 'Heat pumps', href: '/heat-pumps' },
            { text: 'Zero Bills Homes', href: '/zero-bills-homes' },
            { text: 'Business energy', href: '/business-energy' },
        ],
    },
    {
        title: 'Useful links',
        items: [
            { text: 'Sitemap', href: '/sitemap' },
            { text: 'Get a quote', href: '/quote' },
            { text: 'Help & FAQs', href: '/faqs' },
            { text: 'Guides', href: '/guides' },
            { text: 'Octo Assist', href: '/octo-assist' },
            { text: 'Newsroom', href: '/newsroom' },
            { text: 'Cookies', href: '/cookies' },
            { text: 'Accessibility', href: '/accessibility' },
        ],
    },
    {
        title: 'Support',
        items: [
            { text: 'Contact us', href: '/contact-us' },
            { text: 'Complaints', href: '/complaints' },
            { text: 'The legal stuff', href: '/legal' },
            {
                text: 'Modern Slavery Statement',
                href: '/modern-slavery-statement',
            },
        ],
    },
];
 
const socialLinks: Array<{
    icon: React.ReactNode;
    label: string;
    href: string;
}> = [
    {
        icon: <IconFacebook size={32} color="inherit" />,
        label: 'Find Octopus Energy on Facebook',
        href: 'https://www.facebook.com/octopusenergy',
    },
    {
        icon: <IconX size={32} color="inherit" />,
        label: 'Find Octopus Energy on X (formerly Twitter)',
        href: 'https://x.com/octopusenergy',
    },
    {
        icon: <IconLinkedIn size={32} color="inherit" />,
        label: 'Find Octopus Energy on LinkedIn',
        href: 'https://www.linkedin.com/company/octopus-energy/',
    },
    {
        icon: <IconInstagram size={32} color="inherit" />,
        label: 'Find Octopus Energy on Instagram',
        href: 'https://www.instagram.com/octopusenergy/',
    },
    {
        icon: <IconYouTube size={32} color="inherit" />,
        label: 'Find Octopus Energy on YouTube',
        href: 'https://www.youtube.com/c/OctopusEnergy',
    },
];
 
<Footer>
	<FooterListContainer>
		{menus.map((menu) => (
			<FooterList key={menu.title}>
				<Typography textStyle="h5">{menu.title}</Typography>
				{menu.items.map((menuItem, i) => (
					<Button
						color="base100"
						variant="text"
						href="#!"
						key={`${menuItem.text}-${i}`}
					>
						<Typography
							color="inherit"
							component="span"
							textStyle="h6"
							textAlign="left"
						>
							{menuItem.text}
						</Typography>
					</Button>
				))}
			</FooterList>
		))}
 
		<Stack flexDirection="column">
			<Typography textStyle="h5">Around the world</Typography>
			<FooterCountryList currentCountry="GB" omit />
		</Stack>
	</FooterListContainer>
 
	<FooterSocialList>
		{socialLinks.map((link, i) => (
			<FooterSocialLink
				href="#!"
				icon={link.icon}
				label={link.label}
				key={`${link.label}-${i}`}
			/>
		))}
	</FooterSocialList>
 
	<FooterAppDownloadContainer>
		<AppDownloadButton />
		<AppDownloadButton platform="android" />
	</FooterAppDownloadContainer>
	
	<FooterText>
		<Typography textStyle="caption">
			Octopus Energy Ltd is a company registered in England and
			Wales. Company number: 09263424. Octopus Energy Services Ltd
			is authorised and regulated by the Financial Conduct
			Authority as a credit broker and not a lender, firm
			reference number 1033722. Company number: 10434397.
		</Typography>
		<Typography textStyle="caption">
			Registered address: UK House, 5th floor, 164-182 Oxford
			Street, London, W1D 1NN.
		</Typography>
	</FooterText>
</Footer>

<Footer maxWidth="full">...</Footer>

import { defineConfig } from "@pandacss/dev";
import { createCoralPreset, partsList } from "@krakentech/coral-design";
 
export default defineConfig({
	presets: [createCoralPreset({})],
	theme: {
		extend: {
			recipes: {
				StyledFooter: {
					base: partsList.footerParts({
						root: {
							backgroundColor: "pink",
 
							'& [data-part="button-root"]': {
								color: "black",
							},
 
							'& [data-part="link-root"]': {
								color: "black",
							},
 
							"& p": {
								color: "black",
							},
						},
					}),
				},
			},
		},
	},
});