From acaf65b0662a5c4cfebd1e1775a141b1873c0fe1 Mon Sep 17 00:00:00 2001 From: Oleg Urin Date: Sat, 11 Apr 2026 16:17:01 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B7=D0=B0=D0=BA=D0=BE=D0=BD=D1=87=D0=B8?= =?UTF-8?q?=D0=BB=20=D0=B0=D0=B4=D0=B0=D0=BF=D1=82=D0=B0=D1=86=D0=B8=D1=8E?= =?UTF-8?q?=20=D1=81=D1=82=D0=B8=D0=BB=D0=B5=D0=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Banner/Banner.module.css | 20 ++ src/components/Button/Button.module.css | 8 + .../Categories/Categories.module.css | 18 ++ .../ContactProduct/ContactProduct.module.css | 14 + src/components/Footer/Footer.module.css | 120 +++++++- src/components/Footer/Footer.tsx | 45 ++- src/components/Header/Header.module.css | 10 + .../QuestionsBlock/QuestionsBlock.module.css | 45 +++ src/features/catalog/Catalog.module.css | 260 +++++++++++++++--- src/features/catalog/ProductCard.tsx | 3 + src/index.css | 1 + src/pages/ItemPage/ItemPage.module.css | 171 +++++++++++- src/pages/ItemPage/ItemPage.tsx | 4 +- src/pages/Products/Products.module.css | 12 +- 14 files changed, 662 insertions(+), 69 deletions(-) diff --git a/src/components/Banner/Banner.module.css b/src/components/Banner/Banner.module.css index fa457b6..7d2835d 100644 --- a/src/components/Banner/Banner.module.css +++ b/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; diff --git a/src/components/Button/Button.module.css b/src/components/Button/Button.module.css index 17a10f6..390f6d0 100644 --- a/src/components/Button/Button.module.css +++ b/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; + } } \ No newline at end of file diff --git a/src/components/Categories/Categories.module.css b/src/components/Categories/Categories.module.css index 753bbab..1347134 100644 --- a/src/components/Categories/Categories.module.css +++ b/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 { diff --git a/src/components/ContactProduct/ContactProduct.module.css b/src/components/ContactProduct/ContactProduct.module.css index c25e673..bcc2f9d 100644 --- a/src/components/ContactProduct/ContactProduct.module.css +++ b/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; +} } \ No newline at end of file diff --git a/src/components/Footer/Footer.module.css b/src/components/Footer/Footer.module.css index 5366d18..729bd41 100644 --- a/src/components/Footer/Footer.module.css +++ b/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; +} } \ No newline at end of file diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx index 9d79279..b8a4790 100644 --- a/src/components/Footer/Footer.tsx +++ b/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 ( - + ); }; - -export default Footer; \ No newline at end of file +export default Footer; diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css index fb3ae7f..e3fd95c 100644 --- a/src/components/Header/Header.module.css +++ b/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);*/ +} } \ No newline at end of file diff --git a/src/components/QuestionsBlock/QuestionsBlock.module.css b/src/components/QuestionsBlock/QuestionsBlock.module.css index 9372ded..e5f8512 100644 --- a/src/components/QuestionsBlock/QuestionsBlock.module.css +++ b/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; +} + } \ No newline at end of file diff --git a/src/features/catalog/Catalog.module.css b/src/features/catalog/Catalog.module.css index 2720ff7..284e1ea 100644 --- a/src/features/catalog/Catalog.module.css +++ b/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; } -.title { 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 .15s; } -.item:hover { color:#000; } -.activeCat { color:#000; font-weight:700; } +.sidebar { + width: 260px; + padding: 20px 0; +} +.title { + 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;} -.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:.5; cursor:default;} +.wrap { + display: flex; + gap: 12px; + align-items: center; + justify-content: center; + 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; } -.title { font-weight:700; margin-bottom:12px; } -.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;} +.filtersWrap { + margin: 24px 0; +} +.title { + font-weight: 700; + margin-bottom: 12px; +} +.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; } -.categoryCard { border:1px solid #e7e7e7; padding:26px; text-align:center; cursor:pointer; transition:box-shadow .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{grid-template-columns:repeat(2,1fr)} } - -@media(max-width:600px){ .grid{grid-template-columns:1fr} } - -@media (max-width: 1300px){ +.categoryGrid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 20px; +} +.categoryCard { + border: 1px solid #e7e7e7; + padding: 26px; + text-align: center; + 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%; + } } diff --git a/src/features/catalog/ProductCard.tsx b/src/features/catalog/ProductCard.tsx index 83a2034..46c2a69 100644 --- a/src/features/catalog/ProductCard.tsx +++ b/src/features/catalog/ProductCard.tsx @@ -21,9 +21,12 @@ const ProductCard: React.FC = ({ product }) => { className={styles.card} onClick={() => onSelect(product.id)} > + {product.name} +

{product.name}

+
); }; diff --git a/src/index.css b/src/index.css index f5613a3..849d666 100644 --- a/src/index.css +++ b/src/index.css @@ -76,3 +76,4 @@ button:focus-visible { background-color: #f9f9f9; } } + diff --git a/src/pages/ItemPage/ItemPage.module.css b/src/pages/ItemPage/ItemPage.module.css index 72830c2..65af72d 100644 --- a/src/pages/ItemPage/ItemPage.module.css +++ b/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; -} \ No newline at end of file +} + +.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; + } +} + diff --git a/src/pages/ItemPage/ItemPage.tsx b/src/pages/ItemPage/ItemPage.tsx index 0c905cd..f14c61a 100644 --- a/src/pages/ItemPage/ItemPage.tsx +++ b/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} -

{product.name}

+

{product.name}

{product.description}