import { Reveal } from '@/components/shared/Reveal';
import { Card1 } from './Card1';
import { Card2 } from './Card2';
import { Card3 } from './Card3';

export const WeCardsDesktop = () => {
  return (
    <div className="show-on-desktop flex w-full flex-col gap-16">
      <Reveal direction="left">
        <div className="px-4 lg:px-50">
          <Card1 />
        </div>
      </Reveal>

      <Reveal direction="right">
        <div className="flex justify-end md:px-10 lg:px-28 2xl:px-36">
          <Card2 />
        </div>
      </Reveal>

      <Reveal direction="left">
        <div className="px-4 lg:px-50">
          <Card3 />
        </div>
      </Reveal>
    </div>
  );
};