New with salat color on homepage new photos

package-lock.json

@@ -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",

package.json

@@ -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",

src/components/Carusel.js

@@ -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;

src/components/Footer.js

@@ -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='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>&copy; 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>

src/components/Header.js

@@ -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">

src/components/MarqueeBrands.js

@@ -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;

src/components/Photoandtext.js

@@ -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;

src/components/Textandphoto.js

@@ -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;

src/pages/ContactPage.js

@@ -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> г. Новокузнецк, ул. Тольяти, д. 5Б, помещ. 10</p>
-        <p className="mb-2"><strong>Телефон:</strong> +7 (111) 222-43-23</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>

src/pages/HomePage.js

@@ -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 [email, setEmail] = useState('')
-  const [boxes, setBoxes] = useState('23')
+  // const [format, setFormat] = useState('Rail Freight')
-  const [shippingService, setShippingService] = useState('Rail Freight')
+  // const [boxes, setBoxes] = useState('23')
-  const [urgency, setUrgency] = useState('Basic')
+  // 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 className="absolute inset-0 flex flex-col justify-center p-6">
-              <div>
+              <div className="max-w-3xl">
-                <h1 className="text-white text-4xl font-bold mb-4">
+                {/* Контейнер для заголовка с белым фоном */}
-                  ECO TRANSPORTATION SOLUTIONS + AI TECHNOLOGY
+                <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>
-                <p className="text-white mb-4">
+                </div>
-                  For customized transport solutions, including managed logistics, oversized or heavy cargo, and direct distribution — explore our solutions & special expertise page.
+                
+                {/* Контейнер для текста с белым фоном */}
+                <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 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>
             </div>
           </div>
         </div>
       </div>      
-      <div className="bg-[#232323] py-16 px-4 sm:px-6 lg:px-8">
+      
+      <div className='mb-1'>
+        <MarqueeBrands />
+      </div>
+      
+      <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>
   )
 }

tailwind.config.js

@@ -27,3 +27,24 @@ 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: [],
+}