New with salat color on homepage new photos
This commit is contained in:
parent
4e6f1d027e
commit
9e601f96a6
10
package-lock.json
generated
10
package-lock.json
generated
@ -12,6 +12,7 @@
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"antd": "^5.21.2",
|
||||
"lucide-react": "^0.454.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.2",
|
||||
@ -13858,6 +13859,15 @@
|
||||
"yallist": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/lucide-react": {
|
||||
"version": "0.454.0",
|
||||
"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.454.0.tgz",
|
||||
"integrity": "sha512-hw7zMDwykCLnEzgncEEjHeA6+45aeEzRYuKHuyRSOPkhko+J3ySGjGIzu+mmMfDFG1vazHepMaYFYHbTFAZAAQ==",
|
||||
"license": "ISC",
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
|
||||
}
|
||||
},
|
||||
"node_modules/lz-string": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
|
||||
|
||||
@ -7,6 +7,7 @@
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"antd": "^5.21.2",
|
||||
"lucide-react": "^0.454.0",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-router-dom": "^6.26.2",
|
||||
|
||||
BIN
src/assets/images/sklad.jpg
Normal file
BIN
src/assets/images/sklad.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
56
src/components/Carusel.js
Normal file
56
src/components/Carusel.js
Normal file
@ -0,0 +1,56 @@
|
||||
// components/SimpleCarousel.jsx
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { ChevronLeft, ChevronRight } from 'lucide-react';
|
||||
|
||||
const SimpleCarousel = () => {
|
||||
const brands = [
|
||||
"Caterpillar", "Komatsu", "Cummins", "Hitachi", "Liebherr",
|
||||
"Shantui", "Shacman", "Shaanxi", "Howo", "Volvo",
|
||||
"John Deere", "Atlas Copco/Epiroc"
|
||||
];
|
||||
|
||||
const [current, setCurrent] = useState(0);
|
||||
|
||||
const next = () => {
|
||||
setCurrent(current === brands.length - 1 ? 0 : current + 1);
|
||||
};
|
||||
|
||||
const prev = () => {
|
||||
setCurrent(current === 0 ? brands.length - 1 : current - 1);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(next, 3000);
|
||||
return () => clearInterval(timer);
|
||||
}, [current]);
|
||||
|
||||
return (
|
||||
<div className="w-full bg-[#232323] py-16">
|
||||
<div className="max-w-4xl mx-auto px-4">
|
||||
<div className="relative flex items-center justify-center">
|
||||
<button
|
||||
onClick={prev}
|
||||
className="absolute left-0 text-white p-2 hover:bg-white/10 rounded-full"
|
||||
>
|
||||
<ChevronLeft size={24} />
|
||||
</button>
|
||||
|
||||
<div className="text-center px-12">
|
||||
<h3 className="text-white text-3xl font-bold transition-all duration-500">
|
||||
{brands[current]}
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={next}
|
||||
className="absolute right-0 text-white p-2 hover:bg-white/10 rounded-full"
|
||||
>
|
||||
<ChevronRight size={24} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SimpleCarousel;
|
||||
@ -4,12 +4,19 @@ function Footer() {
|
||||
return (
|
||||
<footer className="bg-white text-primary-foreground mt-auto">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
|
||||
<div className='mb-4'>
|
||||
<p>ООО «АНТХИЛЛ» </p>
|
||||
<p>ИНН: 8942384012938340 </p>
|
||||
<p>Контактный номер: Имя +7 213 432-43-23 </p>
|
||||
</div>
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<p>© 2023 Anthill. Все права защищены.</p>
|
||||
<div className="mt-4 md:mt-0">
|
||||
{/* <div className="mt-4 md:mt-0">
|
||||
<a href="#" className="hover:text-primary-foreground/80 transition-colors mr-4">Политика конфиденциальности</a>
|
||||
<a href="#" className="hover:text-primary-foreground/80 transition-colors">Условия использования</a>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
@ -5,9 +5,9 @@ import antlogo from '../assets/antlogo.webp';
|
||||
function Header() {
|
||||
return (
|
||||
<header className="bg-white text-primary-foreground">
|
||||
<div className="container mx-auto px-4 py-6">
|
||||
<div className="container text-2xl mx-auto px-4 py-8">
|
||||
<div className="flex justify-between items-center">
|
||||
<img src={antlogo} alt="Logo" className="w-14 h-14 rounded-full" />
|
||||
{/* <img src={antlogo} alt="Logo" className="w-14 h-14 rounded-full" /> */}
|
||||
<Link to="/" className="text-2xl text-black font-bold justify-left hover:text-primary-foreground/80 transition-colors">Anthill</Link>
|
||||
<nav>
|
||||
<ul className="flex space-x-6 text-black font-bold">
|
||||
|
||||
75
src/components/MarqueeBrands.js
Normal file
75
src/components/MarqueeBrands.js
Normal file
@ -0,0 +1,75 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
const MarqueeBrands = () => {
|
||||
const [isPaused, setIsPaused] = useState(false);
|
||||
|
||||
// Массив брендов
|
||||
const brands = [
|
||||
"Caterpillar",
|
||||
"Komatsu",
|
||||
"Cummins",
|
||||
"Hitachi",
|
||||
"Liebherr",
|
||||
"Shantui",
|
||||
"Shacman",
|
||||
"Shaanxi",
|
||||
"Howo",
|
||||
"Volvo",
|
||||
"John Deere",
|
||||
"Atlas Copco/Epiroc"
|
||||
];
|
||||
|
||||
// Обработчики событий для паузы
|
||||
const handleMouseEnter = () => setIsPaused(true);
|
||||
const handleMouseLeave = () => setIsPaused(false);
|
||||
// 232323
|
||||
// c1ff72
|
||||
return (
|
||||
<div className="w-full bg-[#ffffff] py-16 overflow-hidden">
|
||||
<div
|
||||
className="relative"
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{/* Градиент затухания слева */}
|
||||
<div className="absolute left-0 top-0 bottom-0 w-24 bg-gradient-to-r from-[#ffffff] to-transparent z-10" />
|
||||
|
||||
{/* Контейнер для анимации */}
|
||||
<div className={`flex whitespace-nowrap ${isPaused ? 'animate-marquee-pause' : 'animate-marquee'}`}>
|
||||
{/* Первая копия списка */}
|
||||
{brands.map((brand, index) => (
|
||||
<span
|
||||
key={`first-${index}`}
|
||||
className="text-black text-3xl font-bold mx-8 flex items-center"
|
||||
>
|
||||
{brand}
|
||||
{/* Разделитель (кроме последнего элемента) */}
|
||||
{index !== brands.length - 1 && (
|
||||
<span className="mx-8 text-white/20">|</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
|
||||
{/* Вторая копия списка для бесшовной анимации */}
|
||||
{brands.map((brand, index) => (
|
||||
<span
|
||||
key={`second-${index}`}
|
||||
className="text-white text-3xl font-bold mx-8 flex items-center"
|
||||
>
|
||||
{brand}
|
||||
{/* Разделитель (кроме последнего элемента) */}
|
||||
{index !== brands.length - 1 && (
|
||||
<span className="mx-8 text-black/20">|</span>
|
||||
)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Градиент затухания справа */}
|
||||
<div className="absolute right-0 top-0 bottom-0 w-24 bg-gradient-to-l from-[#ffffff] to-transparent z-10" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default MarqueeBrands;
|
||||
39
src/components/Photoandtext.js
Normal file
39
src/components/Photoandtext.js
Normal file
@ -0,0 +1,39 @@
|
||||
import React from 'react';
|
||||
import { Image } from 'antd';
|
||||
import sklad from '../assets/images/sklad.jpg'
|
||||
|
||||
const Photoandtext = () => {
|
||||
return (
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 h-full">
|
||||
{/* Правая колонка с изображением */}
|
||||
<div className="h-full">
|
||||
<Image
|
||||
src={sklad}
|
||||
alt="Фильтры WANLANDA"
|
||||
preview={false}
|
||||
className="w-full h-full rounded-3xl"
|
||||
style={{
|
||||
height: '100%',
|
||||
objectFit: 'cover',
|
||||
borderRadius: '1.5rem' // соответствует rounded-3xl
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Левая колонка с текстом */}
|
||||
<div className="bg-[#c1ff72] rounded-3xl p-8 flex flex-col justify-center h-full">
|
||||
<p className="text-black leading-relaxed text-xl font-bold mb-6">
|
||||
Фильтры подходят для широкой техники - от легковых автомобилей до карьерной спецтехники. По качеству сравнимы с оригиналами мировых производителей, таких как: Shantui, Shacman, Shaanxi, Howo, КАМАЗ.
|
||||
</p>
|
||||
{/* <p className="text-black text-lg">
|
||||
</p> */}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Photoandtext;
|
||||
137
src/components/Textandphoto.js
Normal file
137
src/components/Textandphoto.js
Normal file
@ -0,0 +1,137 @@
|
||||
// // import React, { useState } from 'react';
|
||||
|
||||
// // const Textandphoto = () => {
|
||||
// // // 232323
|
||||
// // // c1ff72
|
||||
// // return (
|
||||
// // <div className="w-full bg-[#c1ff72] rounded-3xl">
|
||||
// // <div className="w-full px-8 py-12">
|
||||
// // <p className="text-black leading-relaxed text-lg font-bold mb-4">
|
||||
// // Компания АНТХИЛЛ является первым официальным сертифицированным дилером завода-производителя фильтрующих элементов под брендом WANLANDA на территории Сибирского Федерального округа.
|
||||
// // </p>
|
||||
// // <p className="text-black text-lg">
|
||||
// // Фильтры подходят для широкой техники - от легковых автомобилей до карьерной спецтехники. По качеству сравнимы с оригиналами мировых производителей, таких как: Shantui, Shacman, Shaanxi, Howo, KAMA3.
|
||||
// // </p>
|
||||
// // </div>
|
||||
// // </div>
|
||||
// // );
|
||||
// // };
|
||||
|
||||
// // export default Textandphoto;
|
||||
|
||||
// import React from 'react';
|
||||
// import { Image } from 'antd';
|
||||
// import sklad from '../assets/images/sklad.jpg'
|
||||
|
||||
// const Textandphoto = () => {
|
||||
// return (
|
||||
// <div className="container mx-auto px-4 py-8">
|
||||
// <div className="grid grid-cols-1 md:grid-cols-2 gap-8 h-full">
|
||||
// {/* Левая колонка с текстом */}
|
||||
// <div className="bg-[#c1ff72] rounded-3xl p-8 flex flex-col justify-center h-full">
|
||||
// <p className="text-black leading-relaxed text-3xl font-bold mb-6">
|
||||
// Компания АНТХИЛЛ является первым официальным сертифицированным дилером завода-производителя фильтрующих элементов под брендом WANLANDA на территории Сибирского Федерального округа.
|
||||
// </p>
|
||||
// {/* <p className="text-black text-lg">
|
||||
// Фильтры подходят для широкой техники - от легковых автомобилей до карьерной спецтехники. По качеству сравнимы с оригиналами мировых производителей, таких как: Shantui, Shacman, Shaanxi, Howo, КАМАЗ.
|
||||
// </p> */}
|
||||
// </div>
|
||||
|
||||
// {/* Правая колонка с изображением */}
|
||||
// <div className="h-full">
|
||||
// <Image
|
||||
// src={sklad}
|
||||
// alt="Фильтры WANLANDA"
|
||||
// preview={false}
|
||||
// className="w-full h-full rounded-3xl"
|
||||
// style={{
|
||||
// height: '100%',
|
||||
// objectFit: 'cover',
|
||||
// borderRadius: '1.5rem' // соответствует rounded-3xl
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Textandphoto;
|
||||
|
||||
// import React from 'react';
|
||||
// import { Image } from 'antd';
|
||||
// import sklad from '../assets/images/sklad.jpg'
|
||||
|
||||
// const Textandphoto = () => {
|
||||
// return (
|
||||
// <div className="container mx-auto px-4 py-8">
|
||||
// <div className="grid grid-cols-1 md:grid-cols-2 gap-8" style={{ height: '320px' }}> {/* Уменьшенная высота */}
|
||||
// {/* Левая колонка с текстом */}
|
||||
// <div className="bg-[#c1ff72] rounded-3xl p-8 flex flex-col justify-center h-full">
|
||||
// <p className="text-black leading-relaxed text-xl font-bold mb-4">
|
||||
// Компания АНТХИЛЛ является первым официальным сертифицированным дилером завода-производителя фильтрующих элементов под брендом WANLANDA на территории Сибирского Федерального округа.
|
||||
// </p>
|
||||
// {/* <p className="text-black text-lg">
|
||||
// Фильтры подходят для широкой техники - от легковых автомобилей до карьерной спецтехники. По качеству сравнимы с оригиналами мировых производителей, таких как: Shantui, Shacman, Shaanxi, Howo, КАМАЗ.
|
||||
// </p> */}
|
||||
// </div>
|
||||
|
||||
// {/* Правая колонка с изображением */}
|
||||
// <div className="h-full">
|
||||
// <Image
|
||||
// src={sklad}
|
||||
// alt="Фильтры WANLANDA"
|
||||
// preview={false}
|
||||
// style={{
|
||||
// width: '100%',
|
||||
// height: '320px', // Такая же высота как и у контейнера
|
||||
// objectFit: 'cover',
|
||||
// borderRadius: '1.5rem'
|
||||
// }}
|
||||
// />
|
||||
// </div>
|
||||
// </div>
|
||||
// </div>
|
||||
// );
|
||||
// };
|
||||
|
||||
// export default Textandphoto;
|
||||
|
||||
import React from 'react';
|
||||
import { Image } from 'antd';
|
||||
import sklad from '../assets/images/sklad.jpg'
|
||||
|
||||
const Textandphoto = () => {
|
||||
return (
|
||||
<div className="w-full"> {/* Убрали container и паддинги */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8" style={{ height: '320px' }}>
|
||||
{/* Левая колонка с текстом */}
|
||||
<div className="bg-[#c1ff72] rounded-3xl p-8 flex flex-col justify-center h-full">
|
||||
<p className="text-black leading-relaxed text-xl font-bold mb-4">
|
||||
Компания АНТХИЛЛ является первым официальным сертифицированным дилером завода-производителя фильтрующих элементов под брендом WANLANDA на территории Сибирского Федерального округа.
|
||||
</p>
|
||||
<p className="text-black text-lg">
|
||||
Фильтры подходят для широкой техники - от легковых автомобилей до карьерной спецтехники. По качеству сравнимы с оригиналами мировых производителей, таких как: Shantui, Shacman, Shaanxi, Howo, КАМАЗ.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Правая колонка с изображением */}
|
||||
<div className="h-full">
|
||||
<Image
|
||||
src={sklad}
|
||||
alt="Фильтры WANLANDA"
|
||||
preview={false}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '320px',
|
||||
objectFit: 'cover',
|
||||
borderRadius: '1.5rem'
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Textandphoto;
|
||||
@ -26,8 +26,8 @@ function ContactPage() {
|
||||
|
||||
<div className="mt-12">
|
||||
<h2 className="text-2xl font-semibold mb-4">Наши контакты</h2>
|
||||
<p className="mb-2"><strong>Адрес:</strong> ул. Пушкина, д. Колотушкина</p>
|
||||
<p className="mb-2"><strong>Телефон:</strong> +7 (111) 222-43-23</p>
|
||||
<p className="mb-2"><strong>Адрес:</strong> г. Новокузнецк, ул. Тольяти, д. 5Б, помещ. 10</p>
|
||||
{/* <p className="mb-2"><strong>Телефон:</strong> +7 (111) 222-43-23</p> */}
|
||||
<p className="mb-2"><strong>Email:</strong> info@anthill.com</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -42,14 +42,19 @@
|
||||
import {Image} from 'antd'
|
||||
import { useState } from 'react'
|
||||
import truckhome from '../assets/images/truck_home_page.jpg'
|
||||
// import SimpleCarousel from '../components/Carusel.js'
|
||||
import MarqueeBrands from '../components/MarqueeBrands.js'
|
||||
import Textandphoto from '../components/Textandphoto.js'
|
||||
import Photoandtext from '../components/Photoandtext.js'
|
||||
|
||||
|
||||
export default function HomePage() {
|
||||
const [email, setEmail] = useState('')
|
||||
const [format, setFormat] = useState('Rail Freight')
|
||||
const [boxes, setBoxes] = useState('23')
|
||||
const [shippingService, setShippingService] = useState('Rail Freight')
|
||||
const [urgency, setUrgency] = useState('Basic')
|
||||
|
||||
// const [email, setEmail] = useState('')
|
||||
// const [format, setFormat] = useState('Rail Freight')
|
||||
// const [boxes, setBoxes] = useState('23')
|
||||
// const [shippingService, setShippingService] = useState('Rail Freight')
|
||||
// const [urgency, setUrgency] = useState('Basic')
|
||||
|
||||
return (
|
||||
<div className="w-full " style={{color:'#ffffff', backgroundColor:'#ffffff'}}>
|
||||
@ -59,29 +64,47 @@ export default function HomePage() {
|
||||
<Image
|
||||
src={truckhome}
|
||||
width={1200}
|
||||
height={600}
|
||||
height={700}
|
||||
alt="Truck on highway"
|
||||
className="w-full h-auto object-cover"
|
||||
/>
|
||||
<div className="absolute inset-0 bg- bg-opacity-50 flex flex-col justify-between p-8">
|
||||
<div>
|
||||
<h1 className="text-white text-4xl font-bold mb-4">
|
||||
ECO TRANSPORTATION SOLUTIONS + AI TECHNOLOGY
|
||||
</h1>
|
||||
<p className="text-white mb-4">
|
||||
For customized transport solutions, including managed logistics, oversized or heavy cargo, and direct distribution — explore our solutions & special expertise page.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<button className="bg-white text-black rounded-full px-6 py-2 font-semibold hover:bg-opacity-90 transition-colors">
|
||||
FIND OUT MORE
|
||||
</button>
|
||||
<div className="absolute inset-0 flex flex-col justify-center p-6">
|
||||
<div className="max-w-3xl">
|
||||
{/* Контейнер для заголовка с белым фоном */}
|
||||
<div className="bg-white/95 p-6 rounded-lg shadow-lg mb-4 backdrop-blur-sm">
|
||||
<h1 className="text-gray-900 text-4xl lg:text-5xl font-bold leading-tight">
|
||||
ООО «АНТХИЛЛ» молодая динамично развивающаяся компания.
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Контейнер для текста с белым фоном */}
|
||||
<div className="bg-white/95 p-6 rounded-lg shadow-lg backdrop-blur-sm">
|
||||
<p className="text-gray-800 text-lg text-2xl leading-relaxed">
|
||||
Мы обеспечиваем надежность и своевременную поставку качественных запчастей,
|
||||
способствуя качественной работе техники наших клиентов и развитию их бизнеса.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mb-1'>
|
||||
<MarqueeBrands />
|
||||
</div>
|
||||
<div className="bg-[#232323] py-16 px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<div className='mb-1'>
|
||||
<Textandphoto />
|
||||
</div>
|
||||
|
||||
<div className='mb-1'>
|
||||
<Photoandtext />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
{/* <div className="bg-[#232323] py-16 px-4 sm:px-6 lg:px-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="bg-white rounded-3xl p-8">
|
||||
<h2 className="text-4xl font-bold mb-8">GET A PRICE</h2>
|
||||
@ -165,7 +188,7 @@ export default function HomePage() {
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -26,4 +26,25 @@ module.exports = {
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
content: [
|
||||
"./src/**/*.{js,jsx,ts,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
animation: {
|
||||
'marquee': 'marquee 30s linear infinite',
|
||||
'marquee-pause': 'marquee 30s linear infinite paused',
|
||||
},
|
||||
keyframes: {
|
||||
marquee: {
|
||||
'0%': { transform: 'translateX(0)' },
|
||||
'100%': { transform: 'translateX(-50%)' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user