Skip to content

Commit

Permalink
feat(SLB-410): adjust alignment on PageHero and BlockImageTeasers
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattiasimonato
mattiasimonato committed May 30, 2024
1 parent b8b9024 commit 28b57ed
Show file tree
Hide file tree
Showing 2 changed files with 64 additions and 56 deletions.
2 changes: 1 addition & 1 deletion packages/ui/src/components/Organisms/PageContent/BlockImageTeasers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export function BlockImageTeaser(
props: BlockImageTeasersFragment['teasers'][0],
) {
return (
<div className="p-8 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
<div className="p-8 pl-5 md:pl-14 lg:pl-20 col-span-2 lg:col-span-1 text-left h-72 lg:h-96 relative bg-gray-900">
{props.image ? (
<Image
className="object-cover w-full h-72 lg:h-96 absolute top-0 left-0"
Expand Down
118 changes: 63 additions & 55 deletions packages/ui/src/components/Organisms/PageHero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function PageHero(props: NonNullable<PageFragment['hero']>) {
function DefaultHero(props: NonNullable<PageFragment['hero']>) {
return (
<>
<section className="default-hero relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem]">
<section className="default-hero relative isolate overflow-hidden bg-gray-900 pt-12 pb-24 min-h-[20rem] lg:min-h-[33rem] container-page">
{props.image ? (
<Image
alt={props.image.alt}
Expand All @@ -27,7 +27,7 @@ function DefaultHero(props: NonNullable<PageFragment['hero']>) {
data-test-id={'hero-image'}
/>
) : null}
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="container-content">
<div className="mx-auto max-w-2xl lg:mx-0">
<h1 className="text-5xl font-extrabold tracking-tight leading-tight text-white drop-shadow-md">
{props.headline}
Expand Down Expand Up @@ -82,33 +82,37 @@ function FormHero(props: NonNullable<PageFragment['hero']>) {
</>
) : null}

<div className="px-4 pb-[22rem] lg:pb-96 mx-auto max-w-screen-sm text-center lg:px-6 relative">
<h1 className="text-4xl tracking-tight font-extrabold text-white drop-shadow-md">
{props.headline}
</h1>
{props.lead ? (
<p className="mt-6 text-lg leading-4 text-gray-300">{props.lead}</p>
) : null}
{props.ctaText && props.ctaUrl ? (
<Link
href={props.ctaUrl}
className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
<svg
className="mr-2 -ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
<div className="px-4 pb-[22rem] lg:pb-96 container-page text-center lg:px-6 relative">
<div className="max-w-screen-xl mx-auto">
<h1 className="text-4xl tracking-tight font-extrabold text-white drop-shadow-md">
{props.headline}
</h1>
{props.lead ? (
<p className="mt-6 text-lg leading-4 text-gray-300">
{props.lead}
</p>
) : null}
{props.ctaText && props.ctaUrl ? (
<Link
href={props.ctaUrl}
className="mt-7 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
></path>
</svg>
{props.ctaText}
</Link>
) : null}
<svg
className="mr-2 -ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
></path>
</svg>
{props.ctaText}
</Link>
) : null}
</div>
</div>
</div>
{props.formUrl ? (
Expand All @@ -126,34 +130,38 @@ function NoImageHero(props: NonNullable<PageFragment['hero']>) {
return (
<>
<BreadCrumbs />
<section className="relative isolate overflow-hidden pt-12 sm:pt-20 px-6 lg:px-8">
<div className="mx-auto max-w-3xl">
<h1 className="text-4xl font-extrabold tracking-tight leading-tight">
{props.headline}
</h1>
{props.lead ? (
<p className="mt-4 text-lg leading-8 text-gray-500">{props.lead}</p>
) : null}
{props.ctaText && props.ctaUrl ? (
<Link
href={props.ctaUrl}
className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
<svg
className="mr-2 -ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
<section className="relative isolate overflow-hidden pt-12 sm:pt-20 container-page">
<div className="container-content">
<div className="container-text">
<h1 className="text-4xl font-extrabold tracking-tight leading-tight">
{props.headline}
</h1>
{props.lead ? (
<p className="mt-4 text-lg leading-8 text-gray-500">
{props.lead}
</p>
) : null}
{props.ctaText && props.ctaUrl ? (
<Link
href={props.ctaUrl}
className="mt-5 px-5 py-2.5 text-sm font-medium text-white inline-flex items-center bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-lg text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
></path>
</svg>
{props.ctaText}
</Link>
) : null}
<svg
className="mr-2 -ml-1 w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fillRule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clipRule="evenodd"
></path>
</svg>
{props.ctaText}
</Link>
) : null}
</div>
</div>
</section>
</>
Expand Down

0 comments on commit 28b57ed

Please sign in to comment.