zt-food/src/widgets/about/GetToKnow.tsx

import { PRODUCT_INFO } from '@/shared/constants/data';
import Image from 'next/image';
import React from 'react';
import { motion } from 'framer-motion';

const GetToKnow = () => {
  return (
    <div className="my-[40px]">
      <div className="custom-container flex-col lg:flex-row flex justify-between gap-4">
        <div className="flex-1 relative flex flex-col justify-between gap-3">
          <div>
            <p className="font-caveat text-primary font-extrabold text-[20px]">
              Познакомьтесь с нами
            </p>
            <h4 className="text-[34px] font-extrabold text-accent leading-[40px]">
              Добро пожаловать в ZhenTian Food!
            </h4>
          </div>
          <div className="my-[10px] flex flex-col gap-3">
            <p className="text-primary text-[14px] font-bold">
              Zhangzhou ZhenTian Food Co., Ltd. — ведущий экспортер
              консервированных продуктов и сырья в Китае, предлагающий
              потребителям продукцию с высоким вкусом и качеством.
            </p>
            <p className="text-muted text-[14px] font-medium">
              Наш завод — Shandong Tianqi Food Co., Ltd. Мы поставляем сырьё
              грибов другим производителям. У нас крупная производственная база
              по маринованным грибам, которые мы экспортируем в Сирию, Бразилию,
              Кабо-Верде, Узбекистан, Эквадор, Турцию, Марокко, Вьетнам, Италию,
              Алжир и другие страны. Мы также поставляем высококачественный
              очищенный чеснок в бочках на рынки Европы, Америки, Ближнего
              Востока и Азии.
            </p>
            <p className="text-muted text-[14px] font-medium">
              Наш чеснок выращивается в Цзинсяне — всемирно известном регионе №1
              в Китае. Здесь самая большая площадь посадки, высокая урожайность,
              наилучшее качество, и крупнейший объем экспорта. Культивирование
              чеснока в Цзинсяне насчитывает более 2000 лет истории.
            </p>
          </div>
          <div className="flex justify-between items-start gap-3">
            <div className="flex-1">
              <div className="text-[14px] font-bold text-accent flex justify-start items-center gap-1">
                <div className="w-[30px] h-[30px] rounded-full bg-secondary text-white flex justify-center items-center">
                  01
                </div>
                <span>Местное выращивание</span>
              </div>
              <p className="text-[14px] text-muted font-medium">
                Мы поддерживаем местных фермеров и закупаем только качественные
                продукты.
              </p>
            </div>
            <div className="flex-1">
              <h6 className="text-[14px] font-bold text-accent flex justify-start items-center gap-1">
                <div className="w-[30px] h-[30px] rounded-full bg-secondary text-white flex justify-center items-center">
                  02
                </div>
                <span>Современные технологии</span>
              </h6>
              <p className="text-[14px] text-muted font-medium">
                Наши заводы оснащены новейшим оборудованием для обеспечения
                безопасности и качества.
              </p>
            </div>
          </div>
        </div>
        <div className="flex-[1.2] relative max-lg:min-h-[500px] max-lg:my-[20px]">
          <motion.div
            initial={{ left: '0' }}
            animate={{ left: '20px' }}
            transition={{
              duration: 2,
              repeat: Infinity,
              repeatType: 'reverse',
              ease: [0, 0, 1, 1] as const,
            }}
            className="absolute left-0 top-0 h-[50%] w-[50%]"
          >
            <Image
              className="w-full h-full object-contain"
              src={'/images/home-about/about-bg-shape1.webp'}
              alt={PRODUCT_INFO.name}
              width={500}
              height={500}
            />
          </motion.div>
          <div className="absolute right-0 top-[20px] w-[40px] h-[70%] bg-gradient-to-b from-primary to-secondary rounded-sm"></div>
          <div className="absolute right-[15px] top-0 w-[80%] h-[90%]">
            <Image
              className="w-full h-full object-cover rounded-md shadow"
              src={'/images/about-us/about-img-1.webp'}
              alt={PRODUCT_INFO.name}
              width={500}
              height={500}
            />
          </div>
          <div className="absolute left-0 bottom-0 w-[40%] h-[60%]">
            <Image
              className="w-full h-full object-cover rounded-md shadow"
              src={'/images/about-us/about-img-2.jpg'}
              alt={PRODUCT_INFO.name}
              width={300}
              height={200}
            />
          </div>
          <motion.div className="absolute max-sm:right-[-10px] right-[-30px] bottom-[10px] w-[40%] h-[30%] border bg-white rounded-sm p-[10px] shadow-sm">
            <div className="flex flex-col justify-center items-center h-full rounded-md border-[3px] border-primary">
              <div className="font-extrabold text-accent max-sm:text-[40px] text-[50px] leading-[50px]">
                30
              </div>
              <div className="text-muted font-bold max-sm:text-[16px] text-[18px] text-center">
                Лет опыта
              </div>
            </div>
          </motion.div>
          <motion.div
            initial={{ rotate: 0, top: '-40px' }}
            animate={{ rotate: 5, top: '-20px' }}
            transition={{
              duration: 1,
              repeat: Infinity,
              repeatType: 'reverse',
              ease: [0, 0, 1, 1] as const,
            }}
            className="absolute right-[-10%] top-[-40px] w-[35%] h-[30%]"
          >
            <Image
              className="w-full h-full object-contain"
              src={'/images/home-about/about-bg-shape2.webp'}
              alt={PRODUCT_INFO.name}
              width={200}
              height={200}
            />
          </motion.div>
        </div>
      </div>
    </div>
  );
};

export default GetToKnow;