From 7f2ae842d2bc95890812526d68c89760e3380f4e Mon Sep 17 00:00:00 2001 From: Evdokia Date: Sat, 26 Apr 2025 00:27:24 +0300 Subject: [PATCH] footer? reviews --- package-lock.json | 23 ++-- package.json | 2 +- src/App.css | 14 ++- src/App.js | 41 ++++-- src/components/Footer/Footer.css | 108 ++++++++++++++++ src/components/Footer/Footer.js | 31 +++++ src/components/Header/Header.css | 149 ++++++++++++++++------ src/components/Header/Header.js | 31 +++-- src/components/Header/Logo.css | 51 +++++++- src/components/Reviews/Reviews.css | 48 +++++++ src/components/Reviews/Reviews.js | 53 ++++++++ src/img/logo.svg | 195 +++-------------------------- src/pages/AuthForms.css | 64 ++++++++++ src/pages/Login.js | 67 ++++++++++ src/pages/Register.js | 79 ++++++++++++ src/utils/greetings.js | 11 -- 16 files changed, 691 insertions(+), 276 deletions(-) create mode 100644 src/components/Footer/Footer.css create mode 100644 src/components/Footer/Footer.js create mode 100644 src/components/Reviews/Reviews.css create mode 100644 src/components/Reviews/Reviews.js create mode 100644 src/pages/AuthForms.css create mode 100644 src/pages/Login.js create mode 100644 src/pages/Register.js delete mode 100644 src/utils/greetings.js diff --git a/package-lock.json b/package-lock.json index a127535..9524ec0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,7 +16,7 @@ "react": "^18.2.0", "react-confetti": "^6.2.2", "react-dom": "^18.2.0", - "react-router-dom": "^7.4.0", + "react-router-dom": "^7.5.2", "react-scripts": "5.0.1", "react-transition-group": "^4.4.5", "web-vitals": "^4.2.4" @@ -3970,12 +3970,6 @@ "@types/node": "*" } }, - "node_modules/@types/cookie": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.6.0.tgz", - "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", - "license": "MIT" - }, "node_modules/@types/eslint": { "version": "8.56.12", "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz", @@ -14309,12 +14303,11 @@ } }, "node_modules/react-router": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz", - "integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.2.tgz", + "integrity": "sha512-9Rw8r199klMnlGZ8VAsV/I8WrIF6IyJ90JQUdboupx1cdkgYqwnrYjH+I/nY/7cA1X5zia4mDJqH36npP7sxGQ==", "license": "MIT", "dependencies": { - "@types/cookie": "^0.6.0", "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0", "turbo-stream": "2.4.0" @@ -14333,12 +14326,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.4.0", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz", - "integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==", + "version": "7.5.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.2.tgz", + "integrity": "sha512-yk1XW8Fj7gK7flpYBXF3yzd2NbX6P7Kxjvs2b5nu1M04rb5pg/Zc4fGdBNTeT4eDYL2bvzWNyKaIMJX/RKHTTg==", "license": "MIT", "dependencies": { - "react-router": "7.4.0" + "react-router": "7.5.2" }, "engines": { "node": ">=20.0.0" diff --git a/package.json b/package.json index 25cb4b0..a2fd093 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,7 @@ "react": "^18.2.0", "react-confetti": "^6.2.2", "react-dom": "^18.2.0", - "react-router-dom": "^7.4.0", + "react-router-dom": "^7.5.2", "react-scripts": "5.0.1", "react-transition-group": "^4.4.5", "web-vitals": "^4.2.4" diff --git a/src/App.css b/src/App.css index 946f29a..bfaf462 100644 --- a/src/App.css +++ b/src/App.css @@ -1,3 +1,11 @@ -.h1 { - align-items: center; -} \ No newline at end of file +.App { + display: flex; + flex-direction: column; + min-height: 100vh; + } + + main { + flex: 1; + padding-bottom: 40px; + } + \ No newline at end of file diff --git a/src/App.js b/src/App.js index 00aa6ea..d2c4fe5 100644 --- a/src/App.js +++ b/src/App.js @@ -1,23 +1,40 @@ import React from 'react'; +import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import Header from './components/Header/Header'; import SkinTypeQuiz from './components/SkinTypeQuiz/SkinTypeQuiz'; import PopularProducts from './components/PopularProducts/PopularProducts'; +import Reviews from './components/Reviews/Reviews'; +import Footer from './components/Footer/Footer'; +import Login from './pages/Login'; +import Register from './pages/Register'; import './App.css'; function App() { return ( -
-
-
-

- Добро пожаловать в SkinCare Advisor! -

-
- -
- -
-
+ +
+
+
+ + +

+ Добро пожаловать в SkinCare Advisor! +

+
+ +
+ + + + } /> + } /> + } /> + +
+
+
+ ); } diff --git a/src/components/Footer/Footer.css b/src/components/Footer/Footer.css new file mode 100644 index 0000000..5e312d2 --- /dev/null +++ b/src/components/Footer/Footer.css @@ -0,0 +1,108 @@ +.site-footer { + background-color: #2c3e50; + color: #ecf0f1; + padding: 40px 0 20px; + margin-top: 60px; + position: relative; + z-index: 10; + } + + .footer-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + justify-content: space-around; + flex-wrap: wrap; + padding: 0 20px; + gap: 30px; + } + + .footer-section { + margin: 15px; + min-width: 200px; + flex: 1 1 250px; + } + + .footer-section h3 { + font-size: 18px; + margin-bottom: 15px; + color: #ecf0f1; + position: relative; + padding-bottom: 10px; + } + + .footer-section h3::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 50px; + height: 2px; + background: #6C63FF; + } + + .footer-section p, + .footer-section a { + color: #bdc3c7; + margin: 8px 0; + display: block; + text-decoration: none; + transition: color 0.3s ease; + } + + .footer-section a:hover { + color: #6C63FF; + } + + .social-links { + display: flex; + gap: 15px; + margin-top: 15px; + } + + .social-links a { + color: #ecf0f1; + font-size: 20px; + } + + .copyright { + text-align: center; + margin-top: 40px; + padding-top: 20px; + border-top: 1px solid #34495e; + font-size: 14px; + color: #7f8c8d; + width: 100%; + } + + /* Адаптивность */ + @media (max-width: 768px) { + .footer-content { + flex-direction: column; + align-items: center; + text-align: center; + } + + .footer-section h3::after { + left: 50%; + transform: translateX(-50%); + } + + .social-links { + justify-content: center; + } + } + + /* Фиксированный футер (опционально) */ + /* + .App { + display: flex; + flex-direction: column; + min-height: 100vh; + } + + .site-footer { + margin-top: auto; + } + */ + \ No newline at end of file diff --git a/src/components/Footer/Footer.js b/src/components/Footer/Footer.js new file mode 100644 index 0000000..506aac9 --- /dev/null +++ b/src/components/Footer/Footer.js @@ -0,0 +1,31 @@ +import React from 'react'; +import './Footer.css'; + +function Footer() { + return ( + + ); +} + +export default Footer; diff --git a/src/components/Header/Header.css b/src/components/Header/Header.css index 923518a..b6cfeb2 100644 --- a/src/components/Header/Header.css +++ b/src/components/Header/Header.css @@ -1,44 +1,111 @@ -.navigation ul { - list-style: none; - padding: 0; - margin: 0; - display: flex; - } - - .navigation li { - margin-right: 20px; /* Расстояние между элементами меню */ - } - - .navigation a { - text-decoration: none; - color: #333; /* Цвет ссылок */ - font-weight: bold; - } - - .navigation a:hover { - color: #515151; /* Цвет при наведении */ - } +/* Основные стили шапки */ +.site-header { + background: white; + padding: 15px 0; + position: sticky; + top: 0; + z-index: 1000; + box-shadow: 0 2px 15px rgba(0,0,0,0.1); + border-bottom: 1px solid #f0f0f0; +} - -.header { - background-color: #f8f9fa; /* Светлый фон шапки */ - padding: 10px 20px; - display: flex; - align-items: center; - justify-content: space-between; /* Распределяем элементы по краям */ - border-bottom: 1px solid #dee2e6; /* Тонкая линия снизу */ - } +.header-content { + max-width: 1200px; + margin: 0 auto; + display: flex; + align-items: center; + padding: 0 20px; + gap: 30px; +} +/* Стили для логотипа */ +.logo-link { + text-decoration: none; + display: flex; + align-items: center; + transition: transform 0.3s ease; +} -.search-button { - background-color: #121212; - color: white; - border: none; - padding: 8px 16px; - border-radius: 5px; - cursor: pointer; - } - - .search-button:hover { - background-color: #2e2e2e; - } \ No newline at end of file +.logo-link:hover { + transform: translateY(-2px); +} + +/* Стили для поиска */ +.search-container { + display: flex; + flex-grow: 1; + max-width: 600px; + gap: 12px; +} + +.search-input { + flex: 1; + padding: 12px 25px; + border: 1px solid #e0e0e0; + border-radius: 30px; + background: white; + color: #333; + font-size: 16px; + transition: all 0.3s; + box-shadow: 0 2px 5px rgba(0,0,0,0.05); +} + +.search-input:focus { + border-color: #6C63FF; + box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.1); + outline: none; +} + +.search-input::placeholder { + color: #aaa; +} + +.search-btn { + padding: 0 30px; + background: #ffffff; + color: rgb(0, 0, 0); + border: none; + border-radius: 30px; + cursor: pointer; + font-size: 16px; + font-weight: 600; + transition: all 0.3s; + box-shadow: 0 2px 10px rgba(108, 99, 255, 0.2); +} + +.search-btn:hover { + background: #e2e2e2; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3); +} + +/* Стили для кнопок авторизации */ +.auth-buttons { + display: flex; + gap: 15px; +} + +.auth-link { + color: #555; + text-decoration: none; + padding: 10px 20px; + border-radius: 8px; + transition: all 0.3s; + font-weight: 500; +} + +.auth-link:hover { + color: #6C63FF; + background: rgba(108, 99, 255, 0.05); +} + +.auth-link.register { + background: #6C63FF; + color: white; + box-shadow: 0 2px 10px rgba(108, 99, 255, 0.2); +} + +.auth-link.register:hover { + background: #5a52d4; + box-shadow: 0 4px 12px rgba(108, 99, 255, 0.3); +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index 9297f44..0f52593 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -1,17 +1,32 @@ import React from 'react'; -import Logo from './Logo'; -import Navigation from './Navigation'; -import SearchButton from './SearchButton'; +import { Link } from 'react-router-dom'; +import Logo from './Logo'; // Убедитесь в правильности пути import './Header.css'; function Header() { return ( -
- - - +
+
+ + + + +
+ + +
+ +
+ Вход + Регистрация +
+
); } -export default Header; \ No newline at end of file +export default Header; diff --git a/src/components/Header/Logo.css b/src/components/Header/Logo.css index 4dad799..b9685ce 100644 --- a/src/components/Header/Logo.css +++ b/src/components/Header/Logo.css @@ -1,14 +1,53 @@ .logo { - display: flex; /* для гибкого распложения элементов */ - align-items: center; /* по центру и вертикали */ + display: flex; + align-items: center; + gap: 15px; + transition: all 0.3s ease; +} + +.logo:hover { + transform: translateY(-2px); } .logo-image { - height: 80px; /* высота */ - margin-right: 10px; /* отступ справа */ + height: 40px; + width: auto; + transition: transform 0.3s ease; +} + +.logo-image:hover { + transform: scale(1.05) rotate(-5deg); } .logo-text { - font-weight: bold; /* шрифт жирн */ - font-size: 1.2em; + font-size: 22px; + color: #333; /* Изменили на тёмный цвет */ + font-weight: 600; + margin: 0; + letter-spacing: 0.5px; + position: relative; +} + +.logo-text::after { + content: ""; + position: absolute; + bottom: -5px; + left: 0; + width: 0; + height: 2px; + background: #6C63FF; + transition: width 0.3s ease; +} + +.logo:hover .logo-text::after { + width: 100%; +} + +.logo-text span { + color: #6C63FF; + transition: color 0.3s ease; +} + +.logo:hover .logo-text span { + color: #5a52d4; } diff --git a/src/components/Reviews/Reviews.css b/src/components/Reviews/Reviews.css new file mode 100644 index 0000000..d76d031 --- /dev/null +++ b/src/components/Reviews/Reviews.css @@ -0,0 +1,48 @@ +.reviews-section { + max-width: 800px; + margin: 40px auto; + padding: 0 20px; + } + + .reviews-section h2 { + text-align: center; + margin-bottom: 32px; + font-size: 26px; + } + + .reviews-list { + display: flex; + flex-direction: column; + gap: 24px; + } + + .review-card { + border: 1px solid #eee; + border-radius: 10px; + background: #fafbfc; + padding: 20px 24px; + box-shadow: 0 2px 8px rgba(0,0,0,0.03); + } + + .review-text { + font-size: 16px; + margin-bottom: 12px; + color: #222; + } + + .review-meta { + display: flex; + align-items: center; + gap: 16px; + } + + .review-author { + font-weight: bold; + color: #6C63FF; + } + + .star-rating { + color: #FFD700; + font-size: 18px; + } + \ No newline at end of file diff --git a/src/components/Reviews/Reviews.js b/src/components/Reviews/Reviews.js new file mode 100644 index 0000000..55095ac --- /dev/null +++ b/src/components/Reviews/Reviews.js @@ -0,0 +1,53 @@ +import React from 'react'; +import './Reviews.css'; + +const reviews = [ + { + id: 1, + text: "Очень довольна сервисом и качеством продукции! Кожа стала заметно лучше.", + author: "Анна Петрова", + rating: 5 + }, + { + id: 2, + text: "Быстрая доставка, приятные цены. Закажу ещё!", + author: "Ирина Сидорова", + rating: 4 + }, + { + id: 3, + text: "Пользуюсь кремом уже месяц – результат отличный!", + author: "Мария Иванова", + rating: 5 + } +]; + +function StarRating({ rating }) { + return ( + + {'★'.repeat(rating)} + {'☆'.repeat(5 - rating)} + + ); +} + +function Reviews() { + return ( +
+

Отзывы пользователей

+
+ {reviews.map(review => ( +
+

"{review.text}"

+
+ {review.author} + +
+
+ ))} +
+
+ ); +} + +export default Reviews; diff --git a/src/img/logo.svg b/src/img/logo.svg index 7b2ba6a..9248696 100644 --- a/src/img/logo.svg +++ b/src/img/logo.svg @@ -1,190 +1,27 @@ - - + viewBox="0 0 2200 2200" style="enable-background:new 0 0 2200 2200;" xml:space="preserve"> + + -
+
+

Вход

+
+
+ + +
+ +
+ + +
+ + +
+ +
+ Нет аккаунта? Создать +
+
+
+ ); +} + +export default Login; diff --git a/src/pages/Register.js b/src/pages/Register.js new file mode 100644 index 0000000..9650cfb --- /dev/null +++ b/src/pages/Register.js @@ -0,0 +1,79 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import './AuthForms.css'; + +function Register() { + const [formData, setFormData] = useState({ + name: '', + email: '', + password: '' + }); + + const navigate = useNavigate(); + + const handleChange = (e) => { + const { name, value } = e.target; + setFormData(prev => ({ + ...prev, + [name]: value + })); + }; + + const handleSubmit = (e) => { + e.preventDefault(); + console.log('Регистрация:', formData); + navigate('/'); + }; + + return ( +
+
+

Регистрация

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ +
+ Уже есть аккаунт? Войти +
+
+
+ ); +} + +export default Register; diff --git a/src/utils/greetings.js b/src/utils/greetings.js deleted file mode 100644 index a95e4ba..0000000 --- a/src/utils/greetings.js +++ /dev/null @@ -1,11 +0,0 @@ -const greetings = [ - "С Днем Рождения! Желаю счастья, здоровья и успехов во всех начинаниях!", - "Поздравляю! Пусть каждый день будет полон радости и улыбок!", - "С праздником! Желаю исполнения всех желаний и ярких впечатлений!", - "От всей души поздравляю! Пусть жизнь будет прекрасной!", -]; - -export function getRandomGreeting() { - const randomIndex = Math.floor(Math.random() * greetings.length); - return greetings[randomIndex]; -} \ No newline at end of file