contacts page

src/App.js

@@ -5,7 +5,8 @@ import HomePage from "./components/HomePage";
 import LoginPage from "./components/LoginPage";
 import RegisterPage from "./components/RegisterPage";
 import CategoriesPage from "./components/CategoriesPage";
-import AdminPage from "./components/AdminPage"; // 1. Импортируем компонент AdminPage
+import ContactPage from "./components/ContactPage";
+import AdminPage from "./components/AdminPage"; 
 import "./App.css";
 
 function App() {
@@ -18,7 +19,8 @@ function App() {
           <Route path="/login" element={<LoginPage />} />
           <Route path="/register" element={<RegisterPage />} />
           <Route path="/categories" element={<CategoriesPage />} />
-          <Route path="/admin" element={<AdminPage />} /> {/* 2. Добавляем Route для AdminPage */}
+          <Route path="/contact" element={<ContactPage />} />
+          <Route path="/admin" element={<AdminPage />} /> 
         </Routes>
       </div>
     </BrowserRouter>

src/components/ContactPage.css

@@ -0,0 +1,146 @@
+.contact-page {
+    font-family: "Arial", sans-serif;
+    margin: 0;
+    padding: 40px 20px;
+    background-color: #f9f5f0;
+    color: #543d2d;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 80vh;
+  }
+  
+  .contact-container {
+    max-width: 1000px;
+    margin: 0 auto;
+    background-color: #fff;
+    border-radius: 12px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    padding: 40px;
+  }
+  
+  .contact-container h1 {
+    text-align: center;
+    margin-bottom: 30px;
+    color: #8b4513;
+    font-size: 2.5em;
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  
+  .contact-info {
+    margin-bottom: 30px;
+  }
+  
+  .contact-details {
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .contact-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+  }
+  
+  .contact-item i {
+    margin-right: 15px;
+    font-size: 1.5em;
+    color: #a8571d;
+  }
+  
+  .contact-item p {
+    line-height: 1.6;
+    margin: 0;
+    font-size: 1.1em;
+  }
+  
+  .contact-form h2 {
+    font-size: 2em;
+    margin-bottom: 20px;
+    color: #8b4513;
+  }
+  
+  .form-group {
+    margin-bottom: 20px;
+  }
+  
+  .form-group label {
+    display: block;
+    font-size: 1.2em;
+    margin-bottom: 8px;
+    color: #543d2d;
+  }
+  
+  .form-group input,
+  .form-group textarea {
+    width: 100%;
+    padding: 12px;
+    border: 1px solid #d3b48c;
+    border-radius: 7px;
+    font-size: 1em;
+    color: #543d2d;
+    background-color: #fff8f0;
+  }
+  
+  .form-group textarea {
+    resize: vertical;
+    min-height: 150px;
+  }
+  
+  .form-group input:focus,
+  .form-group textarea:focus {
+    outline: none;
+    border-color: #a8571d;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
+  
+  .contact-form button {
+    display: inline-block;
+    padding: 14px 28px;
+    background-color: #a8571d;
+    color: white;
+    text-decoration: none;
+    border-radius: 7px;
+    font-weight: bold;
+    transition: background-color 0.3s ease;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    border: none;
+    font-size: 1.1em;
+    width: 100%;
+  }
+  
+  .contact-form button:hover {
+    background-color: #70380e;
+  }
+  
+  @media (max-width: 768px) {
+    .contact-page {
+      padding: 20px 10px;
+    }
+  
+    .contact-container {
+      width: 95%;
+      padding: 20px;
+    }
+  
+    .contact-container h1 {
+      font-size: 2em;
+    }
+  
+    .contact-item {
+      flex-direction: column;
+      align-items: flex-start;
+    }
+  
+    .contact-item i {
+      margin-bottom: 5px;
+      margin-right: 0;
+    }
+  
+    .form-group label {
+      font-size: 1em;
+    }
+  }

src/components/ContactPage.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import './ContactPage.css'; 
+
+function ContactPage() {
+  return (
+    <div className="contact-page">
+      <div className="contact-container">
+        <h1>Свяжитесь с нами</h1>
+
+        <div className="contact-info">
+          <p>
+            Если у вас есть вопросы, предложения или вы хотите связаться с нами,
+            пожалуйста, используйте следующую информацию:
+          </p>
+
+          <div className="contact-details">
+            <div className="contact-item">
+              <i className="fas fa-envelope"></i>
+              <p>Email: <a href="mailto:recipe-arina@bk.com">recipe-arina@bk.com</a></p>
+            </div>
+
+            <div className="contact-item">
+              <i className="fas fa-phone"></i>
+              <p>Телефон: +7 (904) 783-43-67</p>
+            </div>
+
+            <div className="contact-item">
+              <i className="fas fa-map-marker-alt"></i>
+              <p>Адрес: Ухта, ул. Ленина, д. 10</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="contact-form">
+          <h2>Напишите нам</h2>
+          <form>
+            <div className="form-group">
+              <label htmlFor="name">Имя:</label>
+              <input type="text" id="name" name="name" required />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="email">Email:</label>
+              <input type="email" id="email" name="email" required />
+            </div>
+
+            <div className="form-group">
+              <label htmlFor="message">Сообщение:</label>
+              <textarea id="message" name="message" rows="5" required></textarea>
+            </div>
+
+            <button type="submit">Отправить</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ContactPage;