Initial commit

components/Projects.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+import { groupProjectsByCategory } from '../constants';
+import { MapPin, ChevronDown } from 'lucide-react';
+import { Link } from 'react-router-dom';
+
+const Projects: React.FC = () => {
+  const categories = groupProjectsByCategory().slice(0, 3); // Показываем только 3 категории
+  const [openCategories, setOpenCategories] = useState<{ [key: string]: boolean }>({
+    [categories[0]?.name]: true // Открываем первую категорию по умолчанию
+  });
+
+  const toggleCategory = (categoryName: string) => {
+    setOpenCategories(prev => ({
+      ...prev,
+      [categoryName]: !prev[categoryName]
+    }));
+  };
+
+  return (
+    <div className="py-24 bg-white" id="projects">
+      <div className="container mx-auto px-6">
+        <div className="flex flex-col md:flex-row justify-between items-start md:items-end mb-16 gap-8">
+          <h2 className="text-4xl font-bold text-gray-900 max-w-xs leading-tight">
+            Наши недавние проекты
+          </h2>
+          <p className="text-gray-600 max-w-md text-sm leading-relaxed">
+            Наша команда всегда ответственно относится к проектам, которые вы нам доверили. 
+            Спасибо, что вы рядом.
+          </p>
+        </div>
+
+        <div className="space-y-4 mb-8">
+          {categories.map((category) => (
+            <div key={category.name} className="border border-gray-200 rounded-xl overflow-hidden">
+              {/* Заголовок категории */}
+              <button
+                onClick={() => toggleCategory(category.name)}
+                className="w-full flex items-center justify-between p-6 bg-gray-50 hover:bg-gray-100 transition-colors"
+              >
+                <div className="flex items-center gap-4">
+                  <div className="flex-shrink-0 w-12 h-12 bg-brand-orange text-white rounded-lg flex items-center justify-center font-bold text-lg">
+                    {category.projects.length}
+                  </div>
+                  <h3 className="text-xl font-bold text-gray-900">{category.name}</h3>
+                </div>
+                <ChevronDown 
+                  size={24} 
+                  className={`text-brand-orange transition-transform duration-300 ${
+                    openCategories[category.name] ? 'rotate-180' : ''
+                  }`}
+                />
+              </button>
+
+              {/* Список проектов (показываем только первые 3) */}
+              <div
+                className={`transition-all duration-300 ${
+                  openCategories[category.name] 
+                    ? 'max-h-[2000px] opacity-100' 
+                    : 'max-h-0 opacity-0 overflow-hidden'
+                }`}
+              >
+                <div className="p-4 space-y-3 bg-white">
+                  {category.projects.slice(0, 3).map((project, index) => (
+                    <div 
+                      key={project.id} 
+                      className="group cursor-pointer bg-gray-50 hover:bg-gray-100 rounded-lg p-5 transition-all duration-300 border border-gray-200 hover:border-brand-orange"
+                    >
+                      <div className="flex items-start gap-4">
+                        <div className="flex-shrink-0 w-10 h-10 bg-white border-2 border-brand-orange text-brand-orange rounded-lg flex items-center justify-center font-bold text-sm">
+                          {index + 1}
+                        </div>
+                        <div className="flex-1">
+                          <h4 className="text-base font-bold text-gray-900 mb-2 group-hover:text-brand-orange transition-colors">
+                            {project.title}
+                          </h4>
+                          <div className="flex items-start gap-2 text-gray-600 text-sm">
+                            <MapPin size={14} className="mt-1 flex-shrink-0 text-brand-orange" />
+                            <span className="leading-relaxed line-clamp-2">{project.description}</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="text-center">
+          <Link 
+            to="/projects" 
+            className="inline-block px-8 py-3 bg-brand-orange text-white font-bold rounded-lg hover:bg-orange-600 transition-colors"
+          >
+            Смотреть все проекты
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Projects;