import React from 'react';
import { motion } from 'framer-motion';
import ContactForm from './ContactForm';

const ContactBottom = () => {
  return (
    <div className="my-[30px]">
      <motion.div
        initial={{ opacity: 0, top: '-20px' }}
        whileInView={{ opacity: 1, top: 0 }}
        transition={{ duration: 0.5 }}
        viewport={{ amount: 0.1, once: true }}
        className="relative"
      >
        <p className="text-center font-extrabold text-primary font-caveat text-[24px]">
          Написать сообщение
        </p>
        <h4 className="text-center font-extrabold text-[32px] text-accent tracking-tighter">
          Мы всегда готовы помочь вам
        </h4>
      </motion.div>
      <motion.div
        initial={{ opacity: 0, top: '20px' }}
        whileInView={{ opacity: 1, top: 0 }}
        transition={{ duration: 0.5 }}
        viewport={{ amount: 0.1, once: true }}
        className="relative"
      >
        <ContactForm />
      </motion.div>
    </div>
  );
};

export default ContactBottom;
