import React from 'react';
import AddressBookIcon from '~icons/tabler/address-book.tsx';
import ParkingIcon from '~icons/tabler/parking.tsx';
import SmokingIcon from '~icons/tabler/smoking.tsx';
import WifiIcon from '~icons/tabler/wifi.tsx';
const benefits = [
{
id: 'working-space',
icon: <WifiIcon />,
title: 'Working space',
},
{
id: 'affordable-price',
icon: <WifiIcon />,
title: 'Affordable price',
},
{
id: 'high-speed-internet',
icon: <WifiIcon />,
title: 'High speed internet',
},
{
id: 'smoking-area',
icon: <SmokingIcon />,
title: 'Smoking area',
},
{
id: 'meeting-room',
icon: <AddressBookIcon />,
title: 'Meeting room',
},
{
id: 'huge-parking-lot',
icon: <ParkingIcon />,
title: 'Huge parking lot',
},
];
export default function DescriptiveCards() {
return (
<section className="container mx-auto px-8 py-28 sm:px-12">
<h1 className="sm:mb-18 mb-24 w-full text-center text-4xl font-bold dark:text-slate-50 sm:mx-auto sm:w-4/5">
Your favorite cafe in town
</h1>
<div className="grid grid-cols-2 gap-4 md:grid-cols-3 ">
{benefits.map(({ icon, id, title }) => (
<div
className={`
flex cursor-pointer flex-col items-center justify-start rounded-lg bg-slate-50 py-5 px-6 text-center text-slate-800 shadow-slate-200 transition hover:bg-white
hover:shadow-lg hover:shadow-slate-200 dark:bg-slate-800 dark:text-slate-200 dark:shadow-slate-700 dark:hover:shadow-slate-800
`}
key={id}
>
{React.cloneElement(icon, {
className: 'h-8 w-8',
})}
<div className="mt-3 text-sm font-semibold">{title}</div>
</div>
))}
</div>
</section>
);
}
import ArrowNarrowRightIcon from '~icons/tabler/arrow-narrow-right.tsx';
interface Benefit {
imageUrl: string;
title: string;
description: string;
href?: string;
}
const benefits: Benefit[] = [
{
imageUrl: '/illustrations/undraw_security_on_re_e491.svg',
title: 'Trusted and secured',
description:
'Each transaction is guarded by advanced and certified security system.',
href: '#',
},
{
imageUrl: '/illustrations/undraw_fingerprint_re_uf3f.svg',
title: 'Multi layer security',
description:
'Support fingerprint and face recognition for any transaction. More options coming soon.',
href: '#',
},
{
imageUrl: '/illustrations/undraw_all_the_data_re_hh4w.svg',
title: 'Meaningful insight',
description:
'Visualize transactions with multiple chart option to get insight as you need.',
href: '#',
},
];
export default function ThreeColumns() {
return (
<section className="container mx-auto px-12 py-28">
<h1 className="mb-24 w-full text-center text-4xl font-extrabold dark:text-slate-50 sm:mx-auto sm:mb-20 sm:w-4/5">
<span className="text-violet-500">Best benefits</span> for small and
medium businesses
</h1>
<div className="flex flex-col space-y-24 sm:flex-row sm:space-y-0 sm:space-x-8 ">
{benefits.map(({ imageUrl, title, description, href }, index) => (
<div
className="flex w-full flex-col justify-between sm:mb-0 sm:w-1/3"
key={index}
>
<div className="w-full text-center">
<img
alt={title}
className="mx-auto mb-4 h-16 dark:contrast-200 dark:invert"
src={imageUrl}
/>
<h2 className="mb-2 text-xl font-bold leading-tight dark:text-slate-50 md:text-xl">
{title}
</h2>
<p className="mb-4 leading-relaxed text-slate-700 dark:text-slate-400">
{description}
</p>
</div>
{href && (
<div className="text-center">
<a
className="group relative mx-auto inline-block text-sm font-semibold text-slate-900 underline decoration-violet-300 decoration-2 underline-offset-8 transition hover:decoration-slate-700 dark:text-slate-200 dark:hover:decoration-slate-200 sm:m-0"
href={href}
>
Read more{' '}
<ArrowNarrowRightIcon className="absolute bottom-0 -right-6 scale-x-0 transition group-hover:scale-x-100" />
</a>
</div>
)}
</div>
))}
</div>
</section>
);
}
import ArrowNarrowRightIcon from '~icons/tabler/arrow-narrow-right.tsx';
interface Benefit {
imageUrl: string;
title: string;
description: string;
href?: string;
actionText?: string;
}
const benefits: Benefit[] = [
{
imageUrl: '/illustrations/undraw_security_on_re_e491.svg',
title: 'Trusted and secured',
description:
'Each transaction is guarded by advanced and certified security system.',
href: '#',
actionText: 'View certifications',
},
{
imageUrl: '/illustrations/undraw_fingerprint_re_uf3f.svg',
title: 'Multi layer security',
description:
'Support fingerprint and face recognition for any transaction. More options coming soon.',
href: '#',
actionText: 'Supported authentication',
},
{
imageUrl: '/illustrations/undraw_all_the_data_re_hh4w.svg',
title: 'Meaningful insight',
description:
'Visualize transactions with multiple chart option to get insight as you need.',
},
];
export default function TwoColumnsZigZag() {
return (
<>
{benefits.map(
({ imageUrl, title, description, href, actionText }, index) => (
<section
className={`container mx-auto flex flex-col items-center px-12 py-28 ${
index % 2 ? 'sm:flex-row-reverse' : 'sm:flex-row'
}`}
key={index}
>
<img
alt="Security"
className={`mb-10 h-24 w-full pr-16 pl-16 dark:contrast-200 dark:invert sm:mb-0 sm:h-fit sm:w-1/2 ${
index % 2 ? 'sm:pl-24 sm:pr-0' : 'sm:pr-24 sm:pl-0'
}`}
src={imageUrl}
/>
<div className="mr-4 w-full text-center sm:w-1/2 sm:text-left">
<h2 className="mb-4 text-3xl font-bold leading-tight dark:text-slate-50 md:text-4xl">
{title}
</h2>
<p className="leading-relaxed text-slate-700 dark:text-slate-400">
{description}
</p>
{href && (
<a
className="group relative mx-auto mt-8 inline-block font-semibold text-slate-900 underline decoration-violet-300 decoration-2 underline-offset-8 transition hover:decoration-slate-700 dark:text-slate-200 dark:hover:decoration-slate-200 sm:mx-0"
href={href}
>
{actionText}{' '}
<ArrowNarrowRightIcon className="absolute bottom-0 -right-6 scale-x-0 transition group-hover:scale-x-100" />
</a>
)}
</div>
</section>
),
)}
</>
);
}