first commit

src/components/news/InfoNews.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+const InfoNews = () => (
+  <section className="section-info">
+    <div className="w-layout-blockcontainer container info w-container">
+      <div className="w-layout-vflex flex-block-9">
+        <div className="w-layout-hflex flex-block-7">
+          <a href="/" className="link-block w-inline-block">
+            <div>Главная</div>
+          </a>
+          <div className="text-block-3">→</div>
+          <a href="#" className="link-block-2 w-inline-block">
+            <div>Новости</div>
+          </a>
+        </div>
+        <div className="w-layout-hflex flex-block-8">
+          <div className="w-layout-hflex flex-block-10">
+            <h1 className="heading">Новости</h1>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+);
+
+export default InfoNews; 

src/components/news/NewsCard.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+type NewsCardProps = {
+  title: string;
+  description: string;
+  category: string;
+  date: string;
+  image: string;
+};
+
+const NewsCard = ({ title, description, category, date, image }: NewsCardProps) => (
+  <div className="news">
+    <h3 className="heading_news">{title}</h3>
+    <div className="text-block-20">{description}</div>
+    <div className="w-layout-hflex flex-block-33">
+      <div className="w-layout-hflex flex-block-32">
+        <div className="div-block-13"></div>
+        <div className="text-block-20">{category}</div>
+      </div>
+      <div className="w-layout-hflex flex-block-34">
+        <div className="div-block-14"></div>
+        <img src="/images/time-line.svg" loading="lazy" alt="" className="image-6" />
+        <div className="text-block-20">{date}</div>
+      </div>
+    </div>
+    <div className="div-block-15">
+      <img src={image} loading="lazy" alt="" height="Auto" className="image-7" />
+    </div>
+  </div>
+);
+
+export default NewsCard; 

src/components/news/NewsMenu.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from "react";
+
+const categories = [
+  "Все",
+  "Новости компании",
+  "Новые поступления",
+  "Другое"
+];
+
+const NewsMenu = () => {
+  const [active, setActive] = useState<number | null>(0);
+
+  const handleClick = (idx: number) => {
+    setActive(active === idx ? null : idx);
+  };
+
+  return (
+    <div className="w-layout-hflex menu-category">
+      {categories.map((cat, idx) => (
+        <div
+          key={cat}
+          className={
+            idx === active
+              ? "tab-menu-category-activ"
+              : "tab-menu-category"
+          }
+          onClick={() => handleClick(idx)}
+          style={{ cursor: "pointer" }}
+        >
+          {cat}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default NewsMenu;