Benefits

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>
        ),
      )}
    </>
  );
}