export function WeeklyHero()

in support-frontend/assets/pages/weekly-subscription-landing/components/hero/hero.tsx [125:195]
70 lines of code
3 McCabe index (conditional complexity)

export function WeeklyHero({
	orderIsAGift,
	promotionCopy,
}: WeeklyHeroPropTypes): JSX.Element {
	const defaultRoundelText = 'Save up to 35% a year';
	const defaultTitle = orderIsAGift
		? null
		: getRegionalCopyFor(CountryGroup.detect());
	const title = promotionCopy.title ?? defaultTitle;
	const copy = getFirstParagraph(promotionCopy, orderIsAGift);
	const roundelText = promotionCopy.roundel ?? defaultRoundelText;
	const containerColour = css`
		background-color: ${guardianWeeklyHeroBlue};
	`;
	const linkButtonColour = css`
		color: ${palette.neutral[7]};
		&:hover {
			background: ${'#AEBDC8'};
		}
	`;

	return (
		<PageTitle
			title={orderIsAGift ? 'Give the Guardian Weekly' : 'The Guardian Weekly'}
			theme="weekly"
		>
			<CentredContainer>
				<OfferStrapline
					fgCol={palette.neutral[7]}
					bgCol={brandAlt[400]}
					copy={roundelText}
					orderIsAGift={orderIsAGift}
				/>
				<Hero
					image={
						<GridImage
							gridId="weeklyCampaignHeroImg"
							srcSizes={[500, 140]}
							sizes="(max-width: 740px) 100%, 500px"
							imgType="png"
							altText="A collection of Guardian Weekly magazines"
						/>
					}
					roundelText={undefined}
					cssOverrides={containerColour}
				>
					<section css={styles.weeklyHeroCopy}>
						<h2 css={styles.weeklyHeroTitle}>{title}</h2>
						<p css={styles.weeklyHeroParagraph}>{copy}</p>
						<ThemeProvider theme={buttonThemeDefault}>
							<LinkButton
								onClick={sendTrackingEventsOnClick({
									id: 'options_cta_click',
									product: 'GuardianWeekly',
									componentType: 'ACQUISITIONS_BUTTON',
								})}
								priority="tertiary"
								iconSide="right"
								icon={<SvgArrowDownStraight />}
								cssOverrides={linkButtonColour}
								href="#subscribe"
							>
								See pricing options
							</LinkButton>
						</ThemeProvider>
					</section>
				</Hero>
			</CentredContainer>
		</PageTitle>
	);
}