главная страница

MyWebSite/App.jsx

@@ -2,13 +2,14 @@ import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import CatalogPage from './pages/CatalogPage';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min';
+import HomePage from './pages/HomePage';
 
 function App() {
   return (
     <Router>
       <Routes>
+        <Route path="/" element={<HomePage />} />
         <Route path="/catalog" element={<CatalogPage />} />
-        <Route path="/" element={<CatalogPage />} />
       </Routes>
     </Router>
   );

MyWebSite/components/Navbar.jsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 
-const Navbar = () => {
+const Navbar = ({ cartCount }) => {
-  return (
+    return (
-    <nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
+      <nav className="navbar navbar-expand-lg navbar-light bg-light fixed-top shadow-sm">
-      <div className="container">
+        <div className="container">
-        <Link className="navbar-brand d-flex align-items-center" to="/">
+          <Link className="navbar-brand d-flex align-items-center" to="/">
-          <img src="logo.png" alt="Логотип" className="logo me-2" />
+            <img src="/logo.png" alt="Логотип" className="logo me-2" />
-          <span className="d-none d-lg-block">Книжный магазин "Тома"</span>
+            <span className="d-none d-lg-block">Книжный магазин "Тома"</span>
-          <span className="d-lg-none">"Тома"</span>
+            <span className="d-lg-none">"Тома"</span>
-        </Link>
+          </Link>
         <div className="collapse navbar-collapse" id="navbarContent">
           <ul className="navbar-nav ms-auto">
             <li className="nav-item">
+                <Link className="nav-link" to="/">Главная страница</Link>
               <Link className="nav-link" to="/catalog">Каталог</Link>
             </li>
             <li className="nav-item">

MyWebSite/pages/HomePage.jsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Container, Row, Col, Card, Button } from 'react-bootstrap';
+import { BiCart } from 'react-icons/bi';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap/dist/js/bootstrap.bundle.min';
+
+const HomePage = () => {
+  const bestsellers = [
+    {
+      id: 1,
+      title: "Тимоти Брук «Шляпа Вермеера»",
+      image: "images/Book1.jpg"
+    },
+    {
+      id: 2,
+      title: "Пол Линч «Песнь пророка»",
+      image: "images/Book2.jpg"
+    },
+    {
+      id: 3,
+      title: "Яна Вагнер «Тоннель»",
+      image: "images/Book3.jpg"
+    }
+  ];
+
+  const handleAddToCart = (bookId) => {
+    // Здесь будет логика добавления в корзину
+    alert(`Книга ${bookId} добавлена в корзину`);
+  };
+
+  return (
+    <div className="home-page">
+      <Navbar cartCount={0} />
+      
+      <main className="container mt-5 pt-5">
+        {/* Блок с описанием */}
+        <section className="my-5">
+          <Row className="justify-content-center">
+            <Col lg={8} className="text-center">
+              <h2 className="mb-4">Описание:</h2>
+              <p className="lead">
+                Погрузитесь в незабываемые рукописные миры!<br />
+                Бесчисленные литературные направления ждут вас!<br />
+                Познакомьтесь с популярными работами известных<br />
+                писателей! Мы Вам рады!
+              </p>
+            </Col>
+          </Row>
+        </section>
+
+        {/* Блок хитов продаж */}
+        <section className="my-5">
+          <h2 className="text-center mb-4">Хиты продаж</h2>
+          <Row className="g-4 justify-content-center">
+            {bestsellers.map(book => (
+              <Col key={book.id} md={6} lg={4}>
+                <Card className="h-100 border-0 shadow-sm">
+                  <Card.Img 
+                    variant="top" 
+                    src={book.image} 
+                    className="p-3" 
+                    alt={book.title} 
+                    onError={(e) => { e.target.src = 'images/default-book.jpg' }}
+                  />
+                  <Card.Body className="text-center d-flex flex-column">
+                    <Card.Title>{book.title}</Card.Title>
+                    <Button 
+                      variant="primary" 
+                      className="mt-auto"
+                      onClick={() => handleAddToCart(book.id)}
+                    >
+                      <BiCart /> В корзину
+                    </Button>
+                  </Card.Body>
+                </Card>
+              </Col>
+            ))}
+          </Row>
+        </section>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default HomePage;