Please convert the CountryLanguageStepForm component to use Mantine UI components only — remove all Tailwind CSS usage. Use the same design system and styling approach I followed in the Header file.

The target design is shown in the image I attached. Please replicate it using only Mantine components and styling utilities.

'use client';

import type React from 'react'; import { useState } from 'react'; import { useFormContext } from 'react-hook-form'; import { ArrowRight } from 'lucide-react'; import { StepNavigation } from '@/features/job/components/step-navigation/step-navigation';

import { SearchIcon } from '@/assets/icons/SearchIcon'; import PlusIcon from '@/assets/icons/PlusIcon'; import type { JobCreationStep } from '../../new-job.resources'; import type { JobFormValues } from '../../form-schema'; import { Radio, Button } from '@/shared/components';

interface CountryLanguageStepFormProps { onNext: () => void; onBack: () => void; currentStep: JobCreationStep; }

export const CountryLanguageStepForm: React.FC< CountryLanguageStepFormProps

= ({ onNext, currentStep }) => { const { register, setValue, watch } = useFormContext<JobFormValues>(); const [searchTerm, setSearchTerm] = useState('');

// Get current values from form const hasPreference = watch('countryPreference.hasPreference'); const selectedCountries = watch('countryPreference.countries');

// Sample countries list - in a real app, this would come from an API const countries = [ 'Afghanistan', 'Albania', 'Algeria', 'Andorra', 'Angola', 'Argentina', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada', 'China', 'Denmark', 'Egypt', 'France', 'Germany', 'India', 'Italy', 'Japan', 'Mexico', 'Netherlands', 'New Zealand', 'Norway', 'Poland', 'Portugal', 'Russia', 'Spain', 'Sweden', 'Switzerland', 'United Kingdom', 'United States', ];

const filteredCountries = searchTerm ? countries.filter((country) => country.toLowerCase().includes(searchTerm.toLowerCase()) ) : countries;

const handlePreferenceChange = (hasPreference: boolean) => { setValue('countryPreference.hasPreference', hasPreference, { shouldValidate: true, }); };

const toggleCountry = (country: string) => { const updatedCountries = selectedCountries.includes(country) ? selectedCountries.filter((c) => c !== country) : [...selectedCountries, country];

setValue('countryPreference.countries', updatedCountries, {
  shouldValidate: true,
});

};

const handleAddNewCountry = () => { if (searchTerm && !countries.includes(searchTerm)) { setValue( 'countryPreference.countries', [...selectedCountries, searchTerm], { shouldValidate: true } ); setSearchTerm(''); } };

return ( <div className="w-full"> <div className="flex"> <div className="w-1/4 pr-6"> <StepNavigation currentStep={currentStep} /> </div>

    <div className="w-3/4 pl-8">
      <h1 className="text-3xl font-bold text-navy-900 mb-6">
        Do you have any specific preference for the country of specialist?
      </h1>

      <div className="flex space-x-4 mb-8">
        <Radio
          name="countryPreference.hasPreference"
          label="Yes"
          checked={hasPreference}
          onChange={() => handlePreferenceChange(true)}
        />
        <Radio
          name="countryPreference.hasPreference"
          label="No"
          checked={!hasPreference}
          onChange={() => handlePreferenceChange(false)}
        />
      </div>

      {hasPreference && (
        <>
          <p className="text-gray-600 mb-4">
            You can select multiple countries and add your own option if
            needed.
          </p>

          <div className="flex mb-6">
            <div className="relative flex-1 mr-4">
              <input
                type="text"
                placeholder="Start to enter the country"
                value={searchTerm}
                onChange={(e) => setSearchTerm(e.target.value)}
                className="w-full px-4 py-3 rounded-md bg-gray-100 border border-gray-200"
              />
              <button className="absolute right-3 top-1/2 transform -translate-y-1/2">
                <SearchIcon className="text-gray-400 w-4 h-4" />
              </button>
            </div>

            <Button
              onClick={handleAddNewCountry}
              variant="secondary"
              leftIcon={<PlusIcon />}
              className="border border-gray-200"
            >
              Add a new country
            </Button>
          </div>

          <div className="grid grid-cols-5 gap-4 mb-8">
            {filteredCountries.slice(0, 15).map((country) => (
              <label key={country} className="flex items-center">
                <input
                  type="checkbox"
                  checked={selectedCountries.includes(country)}
                  onChange={() => toggleCountry(country)}
                  className="mr-2 h-4 w-4"
                />
                <span className="text-sm">{country}</span>
              </label>
            ))}
          </div>
        </>
      )}

      <div className="flex justify-end mt-8">
        <Button
          onClick={onNext}
          variant="primary"
          rightIcon={<ArrowRight className="h-4 w-4" />}
        >
          Next
        </Button>
      </div>
    </div>
  </div>
</div>

); }; 'use client';

import { Avatar, Box, Container, Group, Menu, Text } from '@mantine/core';

import Image from 'next/image'; import Link from 'next/link';

import { Button } from '@/shared/components/button'; // Use your custom button

export default function Header() { return ( <Box component="header" py="sm"> <Container size="xl"> <Group justify="space-between" py="md"> <Group gap="xs"> <Link href="/"> <Image src="/images/logo.png" alt="Talentmos logo" width={150} height={36} /> </Link> </Group>

      <Group gap="lg">
        <Button variant="outline" px="lg">
          Talentmos Cluster
        </Button>

        <Link
          href="/specialist-login"
          style={{ textDecoration: 'none', color: '#1a1a2e' }}
        >
          <Text fw={500}>Log in as a Specialist</Text>
        </Link>

        <Link
          href="/my-jobs"
          style={{ textDecoration: 'none', color: '#1a1a2e' }}
        >
          <Text fw={500}>My Jobs</Text>
        </Link>

        <Menu withArrow position="bottom-end">
          <Menu.Target>
            <Button variant="outline" px="md">
              <Group gap="xs">
                <Avatar src="/images/avatar.png" size={24} radius="xl" />
                <Text size="sm">Name</Text>
              </Group>
            </Button>
          </Menu.Target>
        </Menu>
      </Group>
    </Group>
  </Container>
</Box>

); }