Added styles for usp section and started on reusable section

This commit is contained in:
Henrik Larsson
2023-05-15 16:36:57 +02:00
parent f9aa17c0ae
commit a740f19f8a
7 changed files with 78 additions and 50 deletions

View File

@@ -0,0 +1 @@
export { default } from './reusable-section';

View File

@@ -0,0 +1,20 @@
'use client'
interface ReusableSectionProps {
section: any
}
const ReusableSection = ({ section }: ReusableSectionProps) => {
console.log(section)
return (
<div className="px-4 lg:px-8 2xl:px-16">
<div>
Reusable section
</div>
</div>
)
}
export default ReusableSection

View File

@@ -0,0 +1 @@
export { default } from './usp-section';

View File

@@ -0,0 +1,46 @@
'use client'
import SanityImage from '../../ui/sanity-image';
interface USPSectionProps {
usps: [] | any
}
const USPSection = ({ usps }: USPSectionProps) => {
const desktopGridLayout = usps.length === 4 ? 'lg:grid-cols-4' : 'lg:grid-cols-3';
return (
<div className="px-4 lg:px-8 2xl:px-16">
<div
className={`w-full grid grid-cols-2 gap-x-4 gap-y-6 lg:gap-8 2xl:gap-x-16 ${desktopGridLayout}`}
>
{usps.map((usp: any, index: number) => (
<div
key={index}
className={`w-full flex flex-col items-center text-center`}
>
<div className="w-20 h-20 lg:w-24 lg:h-24">
<SanityImage
className="object-cover"
image={usp?.image}
alt={usp.name || 'USP image'}
width={96}
height={96}
sizes="96px"
/>
</div>
<h2 className="text-xl mt-4 lg:mt-8 lg:text-2xl">{usp.title}</h2>
{usp.text && (
<p className="text-sm mt-2 text-low-contrast max-w-xs lg:text-base lg:mt-4">
{usp.text}
</p>
)}
</div>
))}
</div>
</div>
)
}
export default USPSection