закончил адаптацию стилей

src/components/Banner/Banner.module.css

@@ -66,6 +66,26 @@ filter: brightness(0.5)
 }
 
 /* --- Mobile Adaptive --- */
+
+@media (max-width: 890px){
+    .slide {
+        height: 600px;
+
+    }
+}
+
+@media (max-width: 665px){
+    .textBlock h1 {
+    font-size: 28px;
+}
+
+
+.textBlock h2 {
+font-size: 20px;
+
+}
+}
+
 @media (max-width: 768px) {
 .slide {
 height: 500px;

src/components/Button/Button.module.css

@@ -19,4 +19,12 @@ background: #ffe667;
 
 .button:active {
 transform: scale(0.97);
+}
+
+@media (max-width: 768px){
+    .button{
+        padding: 0 30px;
+        font-size: 12px;
+        height: 40px;
+    }
 }

src/components/Categories/Categories.module.css

@@ -115,6 +115,24 @@ grid-column: span 2;
 }
 }
 
+@media (max-width: 665px){
+    .header {
+    font-size: 20px;
+    
+    }
+
+    .overlay h3 {
+font-size: 16px;
+
+}
+
+
+.overlay h4 {
+margin-top: 4px;
+font-size: 14px;
+
+}
+}
 
 @media (max-width: 600px) {
 .grid {

src/components/ContactProduct/ContactProduct.module.css

@@ -19,6 +19,14 @@
   max-height: 600px;
 }
 
+.title{
+  font-size: 20px;
+}
+
+.subtitle{
+  font-size: 28px;
+}
+
 .carousel {
   width: 100%;
   height: 100%; /* Добавьте высоту 100% */
@@ -78,4 +86,10 @@ position: relative;
     height: 300px; /* Меньшая высота для мобильных */
     width: 100%;
   }
+}
+
+@media (max-width: 665px){
+  .arrow {
+  font-size: 20px;
+}
 }

src/components/Footer/Footer.module.css

@@ -83,7 +83,7 @@ color: #fff;
 /* Mobile */
 @media (max-width: 900px) {
 .container {
-flex-direction: column;
+
 gap: 40px;
 text-align: center;
 }
@@ -92,4 +92,122 @@ text-align: center;
 .right {
 text-align: center;
 }
+}
+
+@media (max-width: 700px){
+    .logo {
+        width: 40px;
+        opacity: 0.9;
+        border-radius: 100%;
+    }
+
+    .center {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 10px;
+    }
+
+    .footer {
+padding: 20px 0;
+}
+
+
+.left {
+gap: 10px;
+}
+
+.copy {
+font-size: 10px;
+
+}
+
+
+.center a:hover {
+color: #fff;
+}
+
+
+.right {
+text-align: right;
+}
+
+
+.phone {
+color: #fff;
+font-size: 14px;
+font-weight: 400;
+}
+
+
+.mail {
+margin-top: 6px;
+display: inline-block;
+font-size: 10px;
+color: #bfbfbf;
+}
+
+
+.mail:hover {
+color: #fff;
+}
+}
+
+@media (max-width: 460px){
+    .logo {
+        width: 40px;
+        opacity: 0.9;
+        border-radius: 100%;
+    }
+
+    .center {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 10px;
+    }
+
+    .footer {
+padding: 20px 0;
+}
+
+
+.left {
+gap: 10px;
+}
+
+.copy {
+font-size: 10px;
+
+}
+
+
+.center a:hover {
+color: #fff;
+}
+
+
+.right {
+text-align: right;
+}
+
+
+.phone {
+color: #fff;
+font-size: 14px;
+font-weight: 400;
+}
+
+
+.mail {
+margin-top: 6px;
+display: inline-block;
+font-size: 10px;
+color: #bfbfbf;
+}
+
+
+.mail:hover {
+color: #fff;
+}
 }

src/components/Footer/Footer.tsx

@@ -1,33 +1,30 @@
 import React from "react";
 import styles from "./Footer.module.css";
 import { NavLink } from "react-router-dom";
-import blackLogo from '../../assets/images/BlackLogo.jpg'
+import blackLogo from "../../assets/images/BlackLogo.jpg";
 
 const Footer: React.FC = () => {
-return (
+  return (
-<footer className={styles.footer}>
+    <footer className={styles.footer}>
-<div className={styles.container}>
+      <div className={styles.container}>
-<div className={styles.left}>
+        <div className={styles.left}>
-<img src={blackLogo} alt="logo" className={styles.logo} />
+          <img src={blackLogo} alt="logo" className={styles.logo} />
-<span className={styles.copy}>РК Plastic. 2015-2026 ©</span>
+          <span className={styles.copy}>РК Plastic. 2015-2026 ©</span>
-</div>
+        </div>
 
+        <div className={styles.center}>
+          <NavLink to="about">O КОМПАНИИ</NavLink>
+          <NavLink to="products">ПРОДУКЦИЯ</NavLink>
+          <NavLink to="products">ПРАЙС-ЛИСТ</NavLink>
+        </div>
 
-<div className={styles.center}>
+        <div className={styles.right}>
-<NavLink to="about">O КОМПАНИИ</NavLink>
+          <div className={styles.phone}>+7 910 121 09 62</div>
-<NavLink to="products">ПРОДУКЦИЯ</NavLink>
+          <a className={styles.mail}>rkplastic@mail.ru</a>
-<NavLink to="products">ПРАЙС-ЛИСТ</NavLink>
+        </div>
-</div>
+      </div>
-
+    </footer>
-
+  );
-<div className={styles.right}>
-<div className={styles.phone}>+7 910 121 09 62</div>
-<a className={styles.mail}>rkplastic@mail.ru</a>
-</div>
-</div>
-</footer>
-);
 };
 
-
+export default Footer;
-export default Footer;

src/components/Header/Header.module.css

@@ -213,4 +213,14 @@
   .phoneBlock {
     display: none;
   }
+}
+
+@media (max-width: 500px){
+  .logoImage {
+  height: 60px;
+  border-radius: 8px;
+  object-fit: contain;
+  transition: all 0.3s ease;
+  /*filter: brightness(0) invert(1);*/
+}
 }

src/components/QuestionsBlock/QuestionsBlock.module.css

@@ -91,6 +91,19 @@
 
 /* --- MOBILE --- */
 
+@media (max-width: 1300px){
+  .phoneInfo {
+  margin-left: 0;
+  margin-top: 0;
+  
+}
+
+.phoneNumber {
+  font-size: 15px;
+  font-weight: 500;
+}
+}
+
 @media (max-width: 992px) {
   .inner {
     flex-direction: column;
@@ -122,4 +135,36 @@
   .button {
     width: 100%;
   }
+}
+
+@media (max-width: 665px){
+  .title {
+  font-size: 28px;
+  
+}
+
+.text {
+  font-size: 14px;
+  line-height: 1.6;
+  color: #2a2a2a;
+}
+
+.phoneNumber {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.phoneInfo {
+  margin-left: 44px;
+  margin-top: -5px;
+  font-size: 10px;
+  color: #555;
+}
+
+.formLabel {
+  margin-top: 40px;
+  font-size: 14px;
+  color: #333;
+}
+
 }

src/features/catalog/Catalog.module.css

@@ -18,6 +18,12 @@
   gap: 24px;
 }
 
+.cardContent{
+  display: flex;
+  flex-direction: column;
+  
+}
+
 .card {
   background: #fff;
   border: 1px solid #e5e5e5;
@@ -25,7 +31,6 @@
   position: relative;
   transition: all 0.3s;
   text-align: center;
-  
 }
 
 .card:hover {
@@ -45,66 +50,245 @@
 }
 
 .plus {
-  position: absolute;
+  
-  right: 20px;
-  bottom: 20px;
   font-size: 22px;
   background: none;
   border: none;
   cursor: pointer;
   color: #ffcc00;
+  align-self: flex-end;
 }
 
 /*SidebarCategories*/
-.sidebar { width: 260px; padding: 20px 0; }
+.sidebar {
-.title { font-weight:700; font-size:14px; margin-bottom:16px; }
+  width: 260px;
-.list { list-style:none; padding:0; margin:0; }
+  padding: 20px 0;
-.item { padding:8px 0; color:#666; cursor:pointer; transition:color .15s; }
+}
-.item:hover { color:#000; }
+.title {
-.activeCat { color:#000; font-weight:700; }
+  font-weight: 700;
+  font-size: 14px;
+  margin-bottom: 16px;
+}
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.item {
+  padding: 8px 0;
+  color: #666;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.item:hover {
+  color: #000;
+}
+.activeCat {
+  color: #000;
+  font-weight: 700;
+}
 /*SidebarCategories*/
 
 /*Pagination*/
-.wrap{ display:flex; gap:12px; align-items:center; justify-content:center; margin:30px 0;}
+.wrap {
-.go{ padding:8px 14px; background:#fff;border:1px solid #ddd; cursor:pointer;}
+  display: flex;
-.pages{ display:flex; gap:8px;}
+  gap: 12px;
-.page{ padding:8px 12px; background:#fff;border:1px solid #ddd; cursor:pointer;}
+  align-items: center;
-.active{ background:#ffd400; font-weight:700; border-color:#ffd400;}
+  justify-content: center;
-button:disabled{ opacity:.5; cursor:default;}
+  margin: 30px 0;
+}
+.go {
+  padding: 8px 14px;
+  background: #fff;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+.pages {
+  display: flex;
+  gap: 8px;
+}
+.page {
+  padding: 8px 12px;
+  background: #fff;
+  border: 1px solid #ddd;
+  cursor: pointer;
+}
+.active {
+  background: #ffd400;
+  font-weight: 700;
+  border-color: #ffd400;
+}
+button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
 /*Pagination*/
 
 /*CategoryFilters*/
-.filtersWrap { margin:24px 0; }
+.filtersWrap {
-.title { font-weight:700; margin-bottom:12px; }
+  margin: 24px 0;
-.block { margin-bottom:16px; }
+}
-.blockTitle{ font-weight:600; margin-bottom:8px; }
+.title {
-.opt { display:block; margin:6px 0; font-size:14px; }
+  font-weight: 700;
-.actions { margin-top:12px; display:flex; gap:12px; }
+  margin-bottom: 12px;
-.apply { background:#ffd400; border:none; padding:10px 22px; border-radius:26px; cursor:pointer;}
+}
-.reset { background:#fff; border:1px solid #ddd; padding:8px 16px; cursor:pointer;}
+.block {
+  margin-bottom: 16px;
+}
+.blockTitle {
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+.opt {
+  display: block;
+  margin: 6px 0;
+  font-size: 14px;
+}
+.actions {
+  margin-top: 12px;
+  display: flex;
+  gap: 12px;
+}
+.apply {
+  background: #ffd400;
+  border: none;
+  padding: 10px 22px;
+  border-radius: 26px;
+  cursor: pointer;
+}
+.reset {
+  background: #fff;
+  border: 1px solid #ddd;
+  padding: 8px 16px;
+  cursor: pointer;
+}
 /*CategoryFilters*/
 
-.categoryGrid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
+.categoryGrid {
-.categoryCard { border:1px solid #e7e7e7; padding:26px; text-align:center; cursor:pointer; transition:box-shadow .15s; }
+  display: grid;
-.categoryCard:hover { box-shadow:0 6px 18px rgba(0,0,0,0.06); }
+  grid-template-columns: repeat(3, 1fr);
-.categoryImg { max-width:160px; height:auto; display:block; margin:0 auto 14px; }
+  gap: 20px;
-.categoryName { font-weight:700; }
+}
-@media(max-width:1090px){ .grid{grid-template-columns:repeat(2,1fr)} }
+.categoryCard {
-
+  border: 1px solid #e7e7e7;
-@media(max-width:600px){ .grid{grid-template-columns:1fr} }
+  padding: 26px;
-
+  text-align: center;
-@media (max-width: 1300px){
+  cursor: pointer;
+  transition: box-shadow 0.15s;
+}
+.categoryCard:hover {
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
+}
+.categoryImg {
+  max-width: 160px;
+  height: auto;
+  display: block;
+  margin: 0 auto 14px;
+}
+.categoryName {
+  font-weight: 700;
+}
+@media (max-width: 1090px) {
   .grid {
-  gap: 0;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 664px){
+  .card {
+  padding: 15px;
+}
+
+.name{
+  font-size: 10px;
+}
+
+.card:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.card img {
+  max-width: 130px;
+  margin: 0 auto;
+}
+.title {
+  font-weight: 500;
+  
+}
+
+.blockTitle {
+  font-weight: 500;
+  
+}
+.opt {
+  font-size: 10px;
+}
+.actions {
+  gap: 10px;
+}
+.apply {
+  padding: 8px 18px;
+  border-radius: 20px;
+}
+
+.reset {
+  padding: 6px 14px;
+}
+/*CategoryFilters*/
+
+
+
+.categoryGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+}
+.categoryCard {
+  border: 1px solid #e7e7e7;
+  padding: 26px;
+  text-align: center;
+  cursor: pointer;
+  transition: box-shadow 0.15s;
+}
+
+.categoryImg {
+  max-width: 160px;
+  height: auto;
+  display: block;
+  margin: 0 auto 14px;
+}
+.categoryName {
+  font-weight: 700;
 }
 }
 
-@media (max-width: 1254px){
+@media (max-width: 600px) {
+  .grid {
+    grid-template-columns: 1fr;
+  }
+
+  .wrap{
+    margin: 0;
+    padding-bottom: 10px;
+  }
+
+  .go {
+  display: none;
+}
   
 }
 
+@media (max-width: 1300px) {
+  .grid {
+    gap: 0;
+  }
+}
+
+@media (max-width: 1254px) {
+}
+
 @media (max-width: 1045px) {
-  
 }
 
 @media (max-width: 900px) {
@@ -112,6 +296,6 @@ button:disabled{ opacity:.5; cursor:default;}
     flex-direction: column;
   }
   .sidebar {
-    width: 100%;
+    
   }
 }

src/features/catalog/ProductCard.tsx

@@ -21,9 +21,12 @@ const ProductCard: React.FC<Props> = ({ product }) => {
       className={styles.card}
       onClick={() => onSelect(product.id)}
     >
+      
       <img src={product.images[0]} alt={product.name} />
+      <div className={styles.cardContent}>
       <p className={styles.name}>{product.name}</p>
       <button className={styles.plus}>+</button>
+      </div>
     </div>
   );
 };

src/index.css

@@ -76,3 +76,4 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+

src/pages/ItemPage/ItemPage.module.css

@@ -10,6 +10,7 @@
 }
 
 .short{
+  font-size: 14px;
   margin-top: 30px;
   margin-bottom: 40px;
 }
@@ -59,6 +60,7 @@
 }
 
 .breadcrumbs {
+  font-size: 16px;
   color: #f5c400;
   margin-bottom: 20px;
 }
@@ -101,4 +103,171 @@
   justify-content: space-between;
   padding: 10px 0;
   border-bottom: 1px solid #eee;
-}
+}
+
+.title{
+  font-size: 28px;
+}
+
+@media (max-width: 1024px) {
+  .hero {
+    flex-direction: column-reverse;
+  }
+
+  .top {
+    padding: 20px;
+    padding-top: 100px;
+  }
+
+  .right {
+    padding: 50px;
+  }
+
+  .rightContent {
+    padding-right: 100px;
+  }
+
+  .left img {
+    max-width: 300px;
+  }
+
+  .left{
+    padding: 20px;
+  }
+}
+
+/* ================= MOBILE ================= */
+
+@media (max-width: 768px) {
+  .top {
+    padding: 15px 20px;
+    padding-top: 100px;
+    
+  }
+
+  .hero {
+    flex-direction: column-reverse;
+  }
+
+  .left {
+    padding: 20px;
+  }
+
+  .left img {
+    max-width: 250px;
+  }
+
+  .right {
+    padding: 30px 20px;
+  }
+
+  .breadcrumbs{
+    font-size: 14px;
+  }
+
+  .title{
+    font-size: 20px;
+  }
+
+  .short {
+    margin-top: 20px;
+    margin-bottom: 25px;
+    font-size: 10px;
+  }
+
+  .download {
+    width: 100%;
+    padding: 14px;
+    text-align: center;
+  }
+
+  .tabs {
+    flex-direction: column;
+  }
+
+  .tabs button {
+    padding: 14px;
+    font-size: 14px;
+  }
+
+  .content {
+    padding: 20px;
+  }
+
+  .attrRow {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 4px;
+  }
+}
+
+@media (max-width: 665){
+  .download {
+    font-size: 14px;
+  }
+
+  .tabs button {
+    font-size: 14px;
+  }
+
+  .short{
+  margin-top: 30px;
+  margin-bottom: 40px;
+}
+
+.back {
+  color: white;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 600;
+}
+
+.hero {
+  display: flex;
+  min-height: 500px;
+}
+
+.left {
+  flex: 1;
+  background: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.left img {
+  max-width: 400px;
+}
+
+.rightContent{
+  padding-right: 100px;
+  
+}
+
+}
+
+/* ================= SMALL MOBILE ================= */
+
+@media (max-width: 480px) {
+  .top {
+    padding-top: 100px;
+  }
+
+  .left img {
+    max-width: 200px;
+  }
+
+  .right {
+    padding: 20px 15px;
+  }
+
+  .download {
+    font-size: 14px;
+  }
+
+  .tabs button {
+    font-size: 13px;
+  }
+}
+

src/pages/ItemPage/ItemPage.tsx

@@ -7,7 +7,7 @@ import type { CategoryAtributes, CategoryAtrVals } from "../../types/categories"
 import Button from "../../components/Button/Button";
 import PriceLisForm from "../../components/PriceLisForm/PriceLisForm";
 import ProductAttributes from "../../components/Table/ProducTable";
-import { p } from "framer-motion/client";
+import { p, title } from "framer-motion/client";
 
 const ItemPage = () => {
   const { id } = useParams();
@@ -50,7 +50,7 @@ const ItemPage = () => {
             ГЛАВНАЯ / {category?.name} / {product.name}
           </div>
 
-          <h1>{product.name}</h1>
+          <h1 className={styles.title}>{product.name}</h1>
 
           <p className={styles.short}>{product.description}</p>
           <Button

src/pages/Products/Products.module.css

@@ -214,9 +214,7 @@
     flex-direction: column;
   }
 
-  .sidebar {
+  
-    width: 100%;
-  }
 
   .catalogLayout {
     flex-direction: column;
@@ -229,4 +227,12 @@
   .grid {
     grid-template-columns: 1fr;
   }
+}
+
+@media (max-width: 600px){
+  .products {
+    width: 150px;
+}
+
+
 }