gistfile1.txt

import React from 'react';
import clsx from 'clsx';
import becomeALugger from '@/public/images/luggers-small-01_2x.jpg';
import Image from 'next/image';
import { Button } from '@/components/ui/core/button';
import { Link } from '@/components/ui/core/link';
import { Box } from '@/components/ui/core/box';

export type BecomeALuggerProps = React.ComponentProps<'section'>;

export function BecomeALugger({ className, ...rest }: BecomeALuggerProps) {
  return (
    <section className={clsx(className)} {...rest}>
      <div className='container py-fluid-20'>
        <Box
          cornerRadius='rounded-2xl'
          className='flex flex-col overflow-hidden md:flex-row-reverse'
          background='gradient-radial-brand'
        >
          <div className='flex-1'>
            <Image
              src={becomeALugger}
              alt='Become A Lugger'
              className='gradient-mask-become-a-lugger-alt md:gradient-mask-become-a-lugger h-full w-full object-cover md:max-w-[481px]'
            />
          </div>
          <div className='flex flex-1 flex-col items-center justify-center p-fluid-16 md:items-start md:pl-fluid-16'>
            <div className='max-w-[25rem] space-y-6'>
              <div className='space-y-4'>
                <h2 className='text-fluid-heading-1 font-bold text-white'>
                  Earn money with your truck
                </h2>
                <p className='text-paragraph-1 text-gray-300'>
                  Be active, meet new people & make up to $2,500 a week!
                </p>
              </div>
              <Button
                color='white-outline'
                as={Link}
                href='/become-a-lugger'
                className='w-full md:max-w-[17.5rem]'
              >
                Apply now
              </Button>
            </div>
          </div>
        </Box>
      </div>
    </section>
  );
}