change package managers
This commit is contained in:
azizziy
142
src/widgets/about/GetToKnow.tsx
Normal file
142
src/widgets/about/GetToKnow.tsx
Normal file
@@ -0,0 +1,142 @@
|
||||
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: 'linear',
|
||||
}}
|
||||
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: 'linear',
|
||||
}}
|
||||
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;
|
||||
Reference in New Issue
Block a user