footer? reviews
This commit is contained in:
Evdokia
23
package-lock.json
generated
23
package-lock.json
generated
@@ -16,7 +16,7 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-confetti": "^6.2.2",
|
"react-confetti": "^6.2.2",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^7.4.0",
|
"react-router-dom": "^7.5.2",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"react-transition-group": "^4.4.5",
|
"react-transition-group": "^4.4.5",
|
||||||
"web-vitals": "^4.2.4"
|
"web-vitals": "^4.2.4"
|
||||||
@@ -3970,12 +3970,6 @@
|
|||||||
"@types/node": "*"
|
"@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": {
|
"node_modules/@types/eslint": {
|
||||||
"version": "8.56.12",
|
"version": "8.56.12",
|
||||||
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
|
"resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.56.12.tgz",
|
||||||
@@ -14309,12 +14303,11 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router": {
|
"node_modules/react-router": {
|
||||||
"version": "7.4.0",
|
"version": "7.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.2.tgz",
|
||||||
"integrity": "sha512-Y2g5ObjkvX3VFeVt+0CIPuYd9PpgqCslG7ASSIdN73LwA1nNWzcMLaoMRJfP3prZFI92svxFwbn7XkLJ+UPQ6A==",
|
"integrity": "sha512-9Rw8r199klMnlGZ8VAsV/I8WrIF6IyJ90JQUdboupx1cdkgYqwnrYjH+I/nY/7cA1X5zia4mDJqH36npP7sxGQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/cookie": "^0.6.0",
|
|
||||||
"cookie": "^1.0.1",
|
"cookie": "^1.0.1",
|
||||||
"set-cookie-parser": "^2.6.0",
|
"set-cookie-parser": "^2.6.0",
|
||||||
"turbo-stream": "2.4.0"
|
"turbo-stream": "2.4.0"
|
||||||
@@ -14333,12 +14326,12 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/react-router-dom": {
|
"node_modules/react-router-dom": {
|
||||||
"version": "7.4.0",
|
"version": "7.5.2",
|
||||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.2.tgz",
|
||||||
"integrity": "sha512-VlksBPf3n2bijPvnA7nkTsXxMAKOj+bWp4R9c3i+bnwlSOFAGOkJkKhzy/OsRkWaBMICqcAl1JDzh9ZSOze9CA==",
|
"integrity": "sha512-yk1XW8Fj7gK7flpYBXF3yzd2NbX6P7Kxjvs2b5nu1M04rb5pg/Zc4fGdBNTeT4eDYL2bvzWNyKaIMJX/RKHTTg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"react-router": "7.4.0"
|
"react-router": "7.5.2"
|
||||||
},
|
},
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=20.0.0"
|
"node": ">=20.0.0"
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-confetti": "^6.2.2",
|
"react-confetti": "^6.2.2",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-router-dom": "^7.4.0",
|
"react-router-dom": "^7.5.2",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"react-transition-group": "^4.4.5",
|
"react-transition-group": "^4.4.5",
|
||||||
"web-vitals": "^4.2.4"
|
"web-vitals": "^4.2.4"
|
||||||
|
|||||||
14
src/App.css
14
src/App.css
@@ -1,3 +1,11 @@
|
|||||||
.h1 {
|
.App {
|
||||||
align-items: center;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
flex: 1;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
41
src/App.js
41
src/App.js
@@ -1,23 +1,40 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
import Header from './components/Header/Header';
|
import Header from './components/Header/Header';
|
||||||
import SkinTypeQuiz from './components/SkinTypeQuiz/SkinTypeQuiz';
|
import SkinTypeQuiz from './components/SkinTypeQuiz/SkinTypeQuiz';
|
||||||
import PopularProducts from './components/PopularProducts/PopularProducts';
|
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';
|
import './App.css';
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<Router>
|
||||||
<Header />
|
<div className="App">
|
||||||
<main>
|
<Header />
|
||||||
<h1 style={{ textAlign: 'center', marginTop: '20px' }}>
|
<main>
|
||||||
Добро пожаловать в SkinCare Advisor!
|
<Routes>
|
||||||
</h1>
|
<Route path="/" element={
|
||||||
<section style={{ maxWidth: '700px', margin: '40px auto', padding: '0 20px' }}>
|
<>
|
||||||
<SkinTypeQuiz />
|
<h1 style={{ textAlign: 'center', marginTop: '20px' }}>
|
||||||
</section>
|
Добро пожаловать в SkinCare Advisor!
|
||||||
<PopularProducts />
|
</h1>
|
||||||
</main>
|
<section style={{ maxWidth: '700px', margin: '40px auto', padding: '0 20px' }}>
|
||||||
</div>
|
<SkinTypeQuiz />
|
||||||
|
</section>
|
||||||
|
<PopularProducts />
|
||||||
|
<Reviews />
|
||||||
|
</>
|
||||||
|
} />
|
||||||
|
<Route path="/login" element={<Login />} />
|
||||||
|
<Route path="/register" element={<Register />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
108
src/components/Footer/Footer.css
Normal file
108
src/components/Footer/Footer.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
31
src/components/Footer/Footer.js
Normal file
31
src/components/Footer/Footer.js
Normal file
@@ -0,0 +1,31 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import './Footer.css';
|
||||||
|
|
||||||
|
function Footer() {
|
||||||
|
return (
|
||||||
|
<footer className="site-footer">
|
||||||
|
<div className="footer-content">
|
||||||
|
<div className="footer-section">
|
||||||
|
<h3>Контакты</h3>
|
||||||
|
<p>Email: info@skincareadvisor.ru</p>
|
||||||
|
<p>Телефон: +7 (999) 123-45-67</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="footer-section">
|
||||||
|
<h3>Соцсети</h3>
|
||||||
|
<div className="social-links">
|
||||||
|
<a href="#">Instagram</a>
|
||||||
|
<a href="#">VK</a>
|
||||||
|
<a href="#">Telegram</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="copyright">
|
||||||
|
© {new Date().getFullYear()} SkinCare Advisor. Все права защищены.
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
@@ -1,44 +1,111 @@
|
|||||||
.navigation ul {
|
/* Основные стили шапки */
|
||||||
list-style: none;
|
.site-header {
|
||||||
padding: 0;
|
background: white;
|
||||||
margin: 0;
|
padding: 15px 0;
|
||||||
display: flex;
|
position: sticky;
|
||||||
}
|
top: 0;
|
||||||
|
z-index: 1000;
|
||||||
|
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
.navigation li {
|
.header-content {
|
||||||
margin-right: 20px; /* Расстояние между элементами меню */
|
max-width: 1200px;
|
||||||
}
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 20px;
|
||||||
|
gap: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.navigation a {
|
/* Стили для логотипа */
|
||||||
text-decoration: none;
|
.logo-link {
|
||||||
color: #333; /* Цвет ссылок */
|
text-decoration: none;
|
||||||
font-weight: bold;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
.navigation a:hover {
|
.logo-link:hover {
|
||||||
color: #515151; /* Цвет при наведении */
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Стили для поиска */
|
||||||
|
.search-container {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
max-width: 600px;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
.header {
|
.search-input {
|
||||||
background-color: #f8f9fa; /* Светлый фон шапки */
|
flex: 1;
|
||||||
padding: 10px 20px;
|
padding: 12px 25px;
|
||||||
display: flex;
|
border: 1px solid #e0e0e0;
|
||||||
align-items: center;
|
border-radius: 30px;
|
||||||
justify-content: space-between; /* Распределяем элементы по краям */
|
background: white;
|
||||||
border-bottom: 1px solid #dee2e6; /* Тонкая линия снизу */
|
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-button {
|
.search-input::placeholder {
|
||||||
background-color: #121212;
|
color: #aaa;
|
||||||
color: white;
|
}
|
||||||
border: none;
|
|
||||||
padding: 8px 16px;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-button:hover {
|
.search-btn {
|
||||||
background-color: #2e2e2e;
|
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);
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,15 +1,30 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Logo from './Logo';
|
import { Link } from 'react-router-dom';
|
||||||
import Navigation from './Navigation';
|
import Logo from './Logo'; // Убедитесь в правильности пути
|
||||||
import SearchButton from './SearchButton';
|
|
||||||
import './Header.css';
|
import './Header.css';
|
||||||
|
|
||||||
function Header() {
|
function Header() {
|
||||||
return (
|
return (
|
||||||
<header className="header">
|
<header className="site-header">
|
||||||
<Logo />
|
<div className="header-content">
|
||||||
<Navigation />
|
<Link to="/" className="logo-link">
|
||||||
<SearchButton />
|
<Logo />
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="search-container">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder="Поиск продуктов..."
|
||||||
|
className="search-input"
|
||||||
|
/>
|
||||||
|
<button className="search-btn">Поиск</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="auth-buttons">
|
||||||
|
<Link to="/login" className="auth-link">Вход</Link>
|
||||||
|
<Link to="/register" className="auth-link register">Регистрация</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,53 @@
|
|||||||
.logo {
|
.logo {
|
||||||
display: flex; /* для гибкого распложения элементов */
|
display: flex;
|
||||||
align-items: center; /* по центру и вертикали */
|
align-items: center;
|
||||||
|
gap: 15px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo:hover {
|
||||||
|
transform: translateY(-2px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-image {
|
.logo-image {
|
||||||
height: 80px; /* высота */
|
height: 40px;
|
||||||
margin-right: 10px; /* отступ справа */
|
width: auto;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo-image:hover {
|
||||||
|
transform: scale(1.05) rotate(-5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
font-weight: bold; /* шрифт жирн */
|
font-size: 22px;
|
||||||
font-size: 1.2em;
|
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;
|
||||||
}
|
}
|
||||||
|
|||||||
48
src/components/Reviews/Reviews.css
Normal file
48
src/components/Reviews/Reviews.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
53
src/components/Reviews/Reviews.js
Normal file
53
src/components/Reviews/Reviews.js
Normal file
@@ -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 (
|
||||||
|
<span className="star-rating">
|
||||||
|
{'★'.repeat(rating)}
|
||||||
|
{'☆'.repeat(5 - rating)}
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Reviews() {
|
||||||
|
return (
|
||||||
|
<section className="reviews-section">
|
||||||
|
<h2>Отзывы пользователей</h2>
|
||||||
|
<div className="reviews-list">
|
||||||
|
{reviews.map(review => (
|
||||||
|
<div key={review.id} className="review-card">
|
||||||
|
<p className="review-text">"{review.text}"</p>
|
||||||
|
<div className="review-meta">
|
||||||
|
<span className="review-author">{review.author}</span>
|
||||||
|
<StarRating rating={review.rating} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Reviews;
|
||||||
195
src/img/logo.svg
195
src/img/logo.svg
@@ -1,190 +1,27 @@
|
|||||||
<?xml version="1.0" encoding="utf-8"?>
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
<!-- Generator: Adobe Illustrator 27.5.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
|
viewBox="0 0 2200 2200" style="enable-background:new 0 0 2200 2200;" xml:space="preserve">
|
||||||
<g id="bg">
|
<g id="background">
|
||||||
<rect style="fill:#FFFFFF;" width="1000" height="1000"/>
|
<rect style="fill:#FFFFFF;" width="2200" height="2200"/>
|
||||||
</g>
|
</g>
|
||||||
<g id="logo">
|
<g id="Objects">
|
||||||
<g>
|
<g>
|
||||||
<g>
|
<g>
|
||||||
<path d="M500.013,315.878c33.699,19.284,59.502,60.881,69.892,109.532c3.641-3.719,7.398-7.284,11.232-10.62
|
<path style="fill:#1C2C44;" d="M439.903,885.653c1.588,212.009,75.289,422.838,206.146,589.662
|
||||||
c-12.69-50.568-41.29-93.276-78.018-112.521l-3.106-1.649l-3.104,1.649c-36.728,19.246-65.367,61.992-78.018,112.56
|
c110.565,140.941,259.501,265.147,427.004,331.668c-294.913,90.382-531.489-2.104-662.386-156.672
|
||||||
c3.834,3.336,7.591,6.901,11.234,10.62C440.475,376.798,466.276,335.162,500.013,315.878z"/>
|
c-135.064-159.523-194.609-374.124-190.74-583.107c3.882-208.969,67.077-413.228,154.528-603.059
|
||||||
<path d="M536.857,406.586c0.614,1.763,1.226,3.527,1.763,5.29c0.268,0.805,0.498,1.61,0.768,2.416
|
c140.792,318.109,638.973,265.582,844.413,555.961c148.759,210.285,110.036,518.852-43.325,704.788
|
||||||
c1.494,4.907,2.836,9.929,3.948,15.067c0.268,1.265,0.575,2.568,0.805,3.834c0.191,0.958,0.384,1.917,0.575,2.875l0.691,4.141
|
C918.322,1666.151,575.524,1440.623,439.903,885.653z"/>
|
||||||
c0.268,1.495,0.498,2.99,0.691,4.485c0.382,2.76,0.728,5.482,0.996,8.281c3.643-5.213,7.477-10.236,11.501-15.028
|
|
||||||
c-7.514-45.546-29.328-85.801-58.581-106.196c-29.251,20.395-51.065,60.65-58.579,106.196c4.027,4.792,7.86,9.815,11.501,15.067
|
|
||||||
c0.805-8.242,2.11-16.37,3.911-24.268c0.23-1.073,0.46-2.108,0.728-3.181c0.307-1.265,0.614-2.53,0.958-3.795
|
|
||||||
c1.84-7.016,4.027-13.802,6.595-20.358c0.535-1.342,1.073-2.684,1.61-3.987c0.537-1.303,1.112-2.607,1.687-3.911
|
|
||||||
c1.226-2.722,2.492-5.367,3.834-7.974c0.575-1.112,1.149-2.224,1.763-3.297c0.651-1.189,1.303-2.377,1.994-3.565
|
|
||||||
c0.691-1.189,1.38-2.339,2.108-3.488c0.691-1.15,1.419-2.262,2.147-3.374c5.867-8.895,12.499-16.676,19.744-23.041
|
|
||||||
c10.315,9.047,19.362,20.932,26.722,34.773c1.073,1.994,2.11,4.063,3.106,6.133c2.147,4.448,4.102,9.048,5.865,13.802
|
|
||||||
C536.089,404.516,536.473,405.551,536.857,406.586z"/>
|
|
||||||
<path d="M534.633,472.604c0-40.6-13.304-80.164-34.62-104.816c-21.314,24.652-34.618,64.216-34.618,104.816v0.69
|
|
||||||
c14.914,27.45,22.889,56.702,23.77,84.574c3.334,5.022,6.939,9.661,10.848,13.839c3.873-4.178,7.477-8.779,10.813-13.763v-0.038
|
|
||||||
c0.882-27.833,8.894-57.201,23.808-84.689V472.604z M500.013,549.931c-13.456-20.55-21.2-48.345-21.2-77.327
|
|
||||||
c0-29.904,7.898-59.769,21.2-81.89c13.304,22.121,21.202,51.986,21.202,81.89C521.215,501.587,513.47,529.382,500.013,549.931z"
|
|
||||||
/>
|
|
||||||
<path d="M492.231,472.604c0,16.37,2.722,32.549,7.782,46.887c5.062-14.338,7.784-30.517,7.784-46.887
|
|
||||||
c0-17.023-2.722-34.082-7.784-49.456C494.953,438.522,492.231,455.581,492.231,472.604z"/>
|
|
||||||
<path d="M457.804,605.023c-0.345,0.958-0.728,1.917-1.149,2.875c-0.346,0.882-0.73,1.802-1.151,2.684
|
|
||||||
c-0.421,0.958-0.842,1.878-1.303,2.799c-40.829-2.722-82.887-32.434-108.842-77.366
|
|
||||||
c-26.683-46.197-32.664-101.672-15.566-138.132c1.266,0.115,2.531,0.23,3.757,0.421c1.228,0.154,2.454,0.345,3.643,0.537
|
|
||||||
c3.948,0.69,7.935,1.61,11.885,2.837c1.226,0.345,2.415,0.728,3.641,1.15c1.074,0.345,2.147,0.728,3.222,1.149
|
|
||||||
c1.494,0.537,3.029,1.15,4.523,1.763c1.228,0.537,2.454,1.074,3.72,1.649c1.112,0.498,2.224,0.997,3.336,1.572
|
|
||||||
c0.842,0.384,1.687,0.806,2.529,1.266c1.151,0.575,2.34,1.227,3.489,1.878c1.496,0.805,2.952,1.648,4.409,2.53
|
|
||||||
c0.154,0.077,0.307,0.154,0.461,0.269c1.496,0.882,2.99,1.802,4.448,2.76c0.382,0.269,0.805,0.536,1.187,0.767
|
|
||||||
c1.612,1.074,3.145,2.147,4.717,3.259c1.724,1.227,3.45,2.492,5.174,3.834c2.033,1.572,4.064,3.22,6.058,4.946
|
|
||||||
c1.265,1.035,2.492,2.108,3.72,3.22c1.724,1.534,3.45,3.144,5.137,4.755c1.419,1.38,2.838,2.759,4.217,4.217l0.537,0.536
|
|
||||||
c0.575-4.983,1.38-9.929,2.299-14.798c-8.51-8.089-17.52-15.182-26.837-21.163c-1.417-0.92-2.875-1.802-4.292-2.684
|
|
||||||
c-2.684-1.611-5.369-3.144-8.051-4.524c-1.112-0.576-2.224-1.15-3.336-1.688c-9.699-4.831-19.553-8.357-29.291-10.504
|
|
||||||
c-1.61-0.344-3.22-0.651-4.83-0.92c-0.767-0.152-1.533-0.269-2.301-0.383c-0.766-0.115-1.533-0.23-2.301-0.307
|
|
||||||
c-0.996-0.154-1.994-0.269-2.952-0.345c-1.456-0.152-2.913-0.229-4.369-0.306c-1.612-0.077-3.145-0.115-4.715-0.115
|
|
||||||
c-23.233,39.833-18.403,103.628,12.23,156.61c29.789,51.603,79.128,84.076,126.476,83.654c2.11-3.565,3.987-7.284,5.674-11.156
|
|
||||||
C463.822,611.579,460.756,608.397,457.804,605.023z"/>
|
|
||||||
<path d="M477.01,570.595c0.116-2.185,0.154-4.409,0.193-6.67v-0.691c0-1.802-0.039-3.604-0.114-5.405
|
|
||||||
c-0.039-1.611-0.116-3.182-0.23-4.792c-0.46-6.939-1.419-13.955-2.799-21.047c-0.23-1.074-0.423-2.109-0.653-3.182
|
|
||||||
c-1.533-7.054-3.527-14.146-6.018-21.239c-0.652-1.879-1.342-3.757-2.07-5.636c-1.342-3.488-2.799-6.938-4.371-10.428
|
|
||||||
c-0.498-1.15-1.035-2.261-1.571-3.373c-2.224-4.639-4.639-9.24-7.246-13.764c-0.039-0.077-0.114-0.192-0.154-0.269
|
|
||||||
c-2.185-3.795-4.485-7.476-6.9-11.041c-0.768-1.189-1.573-2.377-2.417-3.566c-1.073-1.572-2.185-3.105-3.334-4.639
|
|
||||||
c-0.346-0.46-0.691-0.92-1.035-1.38c-0.652-0.882-1.305-1.726-1.994-2.568c-2.838-3.681-5.751-7.208-8.819-10.582
|
|
||||||
c-0.805,5.521-1.417,11.08-1.763,16.716c2.34,2.952,4.601,6.019,6.786,9.125c1.074,1.456,2.07,2.952,3.068,4.485
|
|
||||||
c1.035,1.533,2.031,3.143,3.029,4.754c1.033,1.648,2.031,3.335,3.029,5.022c1.571,2.684,3.027,5.405,4.409,8.127
|
|
||||||
c0.612,1.189,1.226,2.339,1.763,3.527c2.375,4.908,4.523,9.815,6.402,14.799c0.461,1.189,0.919,2.416,1.342,3.604
|
|
||||||
c0.345,0.958,0.651,1.878,0.958,2.799c0,0.037,0,0.076,0,0.076c1.265,5.598,2.799,11.08,4.599,16.409
|
|
||||||
c0.077,0.154,0.116,0.307,0.116,0.46c0.077,0.038,0.077,0.077,0.037,0.114c0.307,1.419,0.614,2.799,0.882,4.179
|
|
||||||
c0.27,1.419,0.537,2.799,0.767,4.179c0.614,3.488,1.073,6.977,1.419,10.428c0.114,1.227,0.228,2.492,0.307,3.719
|
|
||||||
c0.037,0.192,0.037,0.384,0.037,0.575c0.114,1.035,0.154,2.07,0.191,3.106c0.077,0.92,0.116,1.878,0.116,2.799
|
|
||||||
c0.114,3.528,0.077,7.016-0.077,10.466c-0.077,1.227-0.154,2.454-0.23,3.643c-0.191,2.415-0.421,4.83-0.767,7.207
|
|
||||||
c-0.191,1.381-0.421,2.722-0.651,4.102c-0.268,1.61-0.575,3.221-0.919,4.831c0,0,0.038,0.038,0,0.077
|
|
||||||
c1.61,1.955,3.143,3.795,4.753,5.635c0,0.038,0,0.038,0,0.038c1.649,1.84,3.259,3.642,4.946,5.405
|
|
||||||
c0.421-1.381,0.805-2.799,1.149-4.217c0.307-1.227,0.614-2.492,0.884-3.72c0.305-1.38,0.575-2.722,0.842-4.102
|
|
||||||
c0.27-1.342,0.498-2.722,0.728-4.102c0.307-2.185,0.575-4.37,0.805-6.632c0.154-1.189,0.27-2.377,0.346-3.565
|
|
||||||
C476.896,573.126,476.935,571.86,477.01,570.595z"/>
|
|
||||||
<path d="M337.5,411.225c-11.234,33.048-4.332,79.436,18.364,118.732c21.814,37.762,56.702,64.561,90.783,70.312
|
|
||||||
c0.805-2.147,1.496-4.333,2.147-6.556c-3.334-4.525-6.44-9.202-9.315-14.109c-0.154,1.073-0.346,2.109-0.537,3.144
|
|
||||||
c-0.191,1.035-0.421,2.07-0.651,3.106c-27.374-8.434-54.21-31.323-71.923-61.993c-18.364-31.782-25.839-68.778-20.281-97.762
|
|
||||||
c1.458,0.499,2.875,1.035,4.334,1.649c0.305,0.114,0.612,0.23,0.882,0.344c1.189,0.499,2.338,0.997,3.527,1.534
|
|
||||||
c1.724,0.805,3.413,1.648,5.099,2.53c1.189,0.614,2.338,1.265,3.527,1.955c0.307,0.115,0.575,0.307,0.842,0.46
|
|
||||||
c1.305,0.767,2.608,1.573,3.95,2.377c1.456,0.92,2.875,1.879,4.332,2.875c1.456,0.997,2.875,1.994,4.294,3.067
|
|
||||||
c0.077,0,0.114,0.077,0.191,0.115c1.38,1.035,2.722,2.108,4.064,3.182c1.419,1.111,2.799,2.3,4.178,3.488
|
|
||||||
c0.958,0.843,1.917,1.687,2.875,2.53c0.882,0.805,1.763,1.649,2.647,2.492c0.498,0.422,0.958,0.882,1.456,1.381
|
|
||||||
c1.226,1.189,2.452,2.416,3.641,3.68c0.193,0.154,0.346,0.345,0.537,0.537c0.958,0.997,1.917,2.032,2.838,3.105
|
|
||||||
c0.651,0.652,1.264,1.342,1.84,2.032c2.452,2.799,4.83,5.675,7.091,8.664c0.116,0.077,0.193,0.192,0.23,0.269
|
|
||||||
c0.958,1.304,1.917,2.607,2.875,3.911c0.193,0.23,0.384,0.46,0.498,0.69c-0.075-2.108-0.114-4.217-0.114-6.364
|
|
||||||
c0-4.37,0.114-8.703,0.384-13.035C390.559,434.228,363.378,416.362,337.5,411.225z"/>
|
|
||||||
<path d="M431.121,486.482c-1.879-3.258-3.871-6.44-5.942-9.546c0.191,10.16,1.112,20.089,2.645,29.75v0.038
|
|
||||||
c2.452,15.45,6.593,30.211,12.19,43.82l0.039,0.039c3.45,8.587,7.551,16.715,12.229,24.306
|
|
||||||
c0.996-10.543,0.575-21.622-1.226-32.932c0-0.039,0-0.077-0.039-0.154c-1.763-11.08-4.869-22.313-9.277-33.355
|
|
||||||
c0-0.038,0-0.038,0-0.038C438.788,500.974,435.222,493.613,431.121,486.482z"/>
|
|
||||||
<path d="M356.438,444.08c-0.384,23.348,6.9,50.3,20.434,73.725c13.111,22.696,31.743,40.983,51.603,50.99
|
|
||||||
c0.191-3.681,0.191-7.438-0.039-11.272c-6.746-15.833-11.578-33.124-14.261-51.257c-1.266-2.568-2.645-5.099-4.103-7.629
|
|
||||||
C396.579,475.211,376.873,455.39,356.438,444.08z M414.673,544.947c-10.427-8.932-19.897-20.395-27.297-33.2
|
|
||||||
c-7.668-13.341-13.265-27.948-16.254-42.287c10.927,9.776,20.779,21.891,28.446,35.232
|
|
||||||
C406.969,517.536,412.182,531.415,414.673,544.947z"/>
|
|
||||||
<path d="M677.404,385.462c-1.573,0-3.145,0.038-4.717,0.115c-1.456,0.077-2.913,0.154-4.369,0.306
|
|
||||||
c-2.608,0.23-5.253,0.614-7.898,1.074c-0.346,0.038-0.691,0.115-0.998,0.192c-0.498,0.077-0.996,0.153-1.533,0.307
|
|
||||||
c-0.882,0.152-1.801,0.344-2.682,0.536c-0.077,0.038-0.193,0.038-0.27,0.077c-1.456,0.307-2.875,0.69-4.294,1.074
|
|
||||||
c-2.452,0.651-4.867,1.381-7.321,2.223c-1.075,0.345-2.147,0.729-3.222,1.151c-5.444,1.993-10.887,4.408-16.254,7.207
|
|
||||||
c-1.419,0.728-2.838,1.495-4.255,2.301c-3.796,2.108-7.553,4.447-11.273,6.938c-0.728,0.46-1.417,0.958-2.145,1.457
|
|
||||||
c-1.265,0.843-2.531,1.763-3.757,2.683c-1.382,0.997-2.761,2.032-4.103,3.067c-2.836,2.185-5.597,4.485-8.319,6.863
|
|
||||||
c-0.996,0.882-1.994,1.763-2.99,2.684c-0.958,0.843-1.917,1.763-2.875,2.683c0.919,4.869,1.724,9.815,2.299,14.798
|
|
||||||
c0.154-0.191,0.307-0.344,0.537-0.536c1.38-1.457,2.799-2.837,4.218-4.217c1.61-1.534,3.22-3.067,4.869-4.525
|
|
||||||
c1.649-1.495,3.297-2.914,4.983-4.332c1.496-1.265,3.029-2.492,4.601-3.72c0.154-0.114,0.307-0.229,0.461-0.344
|
|
||||||
c1.724-1.342,3.411-2.607,5.176-3.834c1.264-0.92,2.568-1.802,3.871-2.684c0.537-0.345,1.035-0.69,1.572-1.035
|
|
||||||
c2.031-1.342,4.102-2.646,6.209-3.834c1.151-0.69,2.263-1.342,3.413-1.955c1.189-0.691,2.415-1.342,3.643-1.955
|
|
||||||
c0.842-0.46,1.687-0.882,2.529-1.266c1.112-0.575,2.224-1.074,3.336-1.572c1.265-0.575,2.492-1.112,3.72-1.649
|
|
||||||
c1.494-0.613,3.029-1.226,4.523-1.763c1.075-0.421,2.147-0.805,3.222-1.149c1.226-0.422,2.415-0.805,3.641-1.15
|
|
||||||
c3.95-1.227,7.937-2.147,11.885-2.837c1.189-0.192,2.415-0.384,3.643-0.537c1.226-0.191,2.492-0.306,3.757-0.421
|
|
||||||
c17.059,36.459,11.078,91.934-15.565,138.132c-25.955,44.932-68.05,74.644-108.879,77.366c-0.46-0.92-0.882-1.84-1.305-2.799
|
|
||||||
c-0.421-0.882-0.805-1.802-1.149-2.684c-0.421-0.958-0.805-1.917-1.151-2.875c-2.913,3.373-5.979,6.556-9.161,9.546
|
|
||||||
c1.647,3.872,3.564,7.591,5.674,11.156c47.348,0.422,96.687-32.051,126.476-83.654
|
|
||||||
C695.766,489.09,700.598,425.295,677.404,385.462z"/>
|
|
||||||
<path d="M537.662,589.612c-0.345-1.611-0.652-3.259-0.921-4.907c-0.268-1.342-0.459-2.683-0.651-4.064
|
|
||||||
c-0.077-0.536-0.154-1.112-0.191-1.687c-0.193-1.342-0.307-2.722-0.423-4.102c-0.152-1.687-0.268-3.373-0.344-5.061
|
|
||||||
c-0.191-3.45-0.191-6.938-0.077-10.466c0-0.882,0.039-1.802,0.116-2.722c0.037-1.112,0.077-2.224,0.191-3.335
|
|
||||||
c-0.037-0.038,0-0.115,0-0.192c0.114-1.419,0.23-2.837,0.384-4.256c0.307-3.335,0.768-6.709,1.38-10.082
|
|
||||||
c0.23-1.381,0.498-2.799,0.768-4.179c0.23-1.38,0.537-2.799,0.882-4.178c-0.039-0.077,0-0.115,0.037-0.154v-0.038v-0.038
|
|
||||||
c0-0.038,0.039-0.038,0.039-0.038c0.191-0.499,0.344-0.997,0.498-1.534c0.421-1.265,0.844-2.568,1.226-3.911
|
|
||||||
c0.691-2.3,1.342-4.639,1.917-7.015c0.346-1.342,0.651-2.683,0.958-4.064c0-0.077,0-0.154,0.039-0.192
|
|
||||||
c0.268-0.767,0.498-1.533,0.805-2.3c0.537-1.534,1.112-3.106,1.687-4.64c0.037-0.114,0.116-0.268,0.154-0.421
|
|
||||||
c0.421-1.074,0.882-2.186,1.342-3.259c0.766-1.994,1.647-4.025,2.568-6.018c0.614-1.381,1.265-2.761,1.917-4.141
|
|
||||||
c0.651-1.342,1.342-2.722,2.031-4.064c0.691-1.342,1.382-2.645,2.07-3.949c0.768-1.38,1.535-2.799,2.34-4.178
|
|
||||||
c0.996-1.725,1.992-3.413,3.029-5.061c1.11-1.802,2.261-3.565,3.411-5.329c0.844-1.264,1.687-2.53,2.568-3.794
|
|
||||||
c0.651-0.882,1.266-1.726,1.88-2.608c0.805-1.112,1.61-2.224,2.454-3.297c0.842-1.112,1.724-2.224,2.568-3.336
|
|
||||||
c-0.346-5.597-0.958-11.156-1.763-16.677c-4.141,4.601-8.091,9.432-11.848,14.493c-0.728,0.958-1.417,1.917-2.07,2.875
|
|
||||||
c-1.456,1.993-2.875,4.025-4.216,6.133c-1.151,1.725-2.263,3.451-3.375,5.252c-1.035,1.649-2.031,3.298-2.99,4.984v0.038
|
|
||||||
c-0.037,0.038-0.077,0.077-0.116,0.154c-0.037,0.038-0.037,0.077-0.075,0.115c-2.608,4.524-5.023,9.125-7.246,13.764
|
|
||||||
c-0.537,1.112-1.075,2.223-1.573,3.373c-1.571,3.45-3.029,6.939-4.371,10.428c-0.728,1.879-1.417,3.757-2.07,5.636
|
|
||||||
c-0.996,2.875-1.917,5.751-2.759,8.626c-0.575,1.994-1.149,3.987-1.649,5.981c-0.498,1.917-0.958,3.796-1.38,5.674
|
|
||||||
c-0.037,0.154-0.077,0.269-0.114,0.422c-1.765,7.936-2.915,15.871-3.489,23.654c-0.114,1.763-0.23,3.565-0.268,5.368
|
|
||||||
c-0.116,2.223-0.154,4.447-0.154,6.632c0,0.037,0,0.077,0,0.077c0.038,2.108,0.077,4.178,0.191,6.249
|
|
||||||
c0.037,0.958,0.077,1.879,0.154,2.799c0.154,2.415,0.384,4.754,0.651,7.093c0.191,1.495,0.384,2.99,0.614,4.485
|
|
||||||
c0.23,1.38,0.461,2.76,0.689,4.102c0.27,1.38,0.537,2.722,0.844,4.063c0.575,2.684,1.265,5.368,2.031,7.975
|
|
||||||
c1.689-1.763,3.336-3.565,4.946-5.444c1.61-1.84,3.182-3.719,4.755-5.674C537.662,589.612,537.662,589.612,537.662,589.612z"/>
|
|
||||||
<path d="M644.164,529.957c22.658-39.296,29.598-85.685,18.364-118.732c-25.839,5.099-53.059,23.003-74.605,48.306
|
|
||||||
c0.268,4.332,0.384,8.703,0.384,13.073c0,2.146-0.037,4.256-0.116,6.364c0.116-0.23,0.307-0.46,0.5-0.69
|
|
||||||
c0.958-1.304,1.917-2.607,2.875-3.911c0.038-0.077,0.114-0.192,0.23-0.269c2.261-2.989,4.639-5.865,7.091-8.664
|
|
||||||
c0.577-0.69,1.189-1.38,1.842-2.032c0.919-1.073,1.878-2.108,2.836-3.105c0.154-0.192,0.344-0.384,0.537-0.537
|
|
||||||
c1.189-1.264,2.415-2.492,3.641-3.68c0.461-0.499,0.958-0.958,1.458-1.381c0.958-0.958,1.992-1.917,2.99-2.799
|
|
||||||
c1.112-1.035,2.224-1.994,3.336-2.952c1.112-0.958,2.224-1.878,3.334-2.759c1.419-1.151,2.875-2.262,4.334-3.336
|
|
||||||
c1.38-1.074,2.799-2.07,4.218-3.029c1.456-0.997,2.875-1.955,4.369-2.875c1.305-0.805,2.608-1.61,3.911-2.377
|
|
||||||
c4.601-2.684,9.24-4.945,13.918-6.823c1.417-0.614,2.875-1.15,4.332-1.649c5.52,28.984-1.956,65.979-20.32,97.762
|
|
||||||
c-17.673,30.67-44.51,53.559-71.921,61.993c-0.346-1.457-0.614-2.914-0.882-4.371c-0.077-0.575-0.193-1.188-0.307-1.763v-0.115
|
|
||||||
c-2.875,4.907-5.942,9.623-9.277,14.109c0.651,2.223,1.342,4.408,2.147,6.556C587.462,594.519,622.35,567.72,644.164,529.957z"/>
|
|
||||||
<path d="M557.291,556.871c0.919-2.07,1.801-4.141,2.683-6.25c0-0.077,0-0.114,0.039-0.114
|
|
||||||
c5.635-13.648,9.738-28.409,12.19-43.898v-0.037c1.572-9.624,2.454-19.553,2.647-29.674c-2.07,3.106-4.064,6.326-5.943,9.585
|
|
||||||
c-4.102,7.131-7.668,14.492-10.62,21.93c0,0,0,0,0,0.038c-4.408,11.042-7.514,22.275-9.277,33.355
|
|
||||||
c-0.038,0.077-0.038,0.114-0.038,0.154c-1.803,11.31-2.224,22.389-1.228,32.932c1.074-1.725,2.108-3.488,3.106-5.29
|
|
||||||
c0.23-0.422,0.498-0.882,0.728-1.342c0.958-1.725,1.879-3.45,2.761-5.213C555.335,561.011,556.333,558.941,557.291,556.871z"/>
|
|
||||||
<path d="M585.891,506.111c-2.722,18.211-7.553,35.539-14.3,51.449c-0.039,0.038-0.039,0.038,0,0.077
|
|
||||||
c-0.039,0.038-0.039,0.077-0.039,0.077c-0.191,3.757-0.191,7.476,0,11.08c19.82-10.007,38.454-28.294,51.565-50.99
|
|
||||||
c13.532-23.425,20.856-50.377,20.434-73.725c-20.434,11.311-40.101,31.131-53.636,54.556c-1.419,2.453-2.759,4.945-4.025,7.437
|
|
||||||
C585.891,506.111,585.891,506.111,585.891,506.111z M600.422,504.692c7.705-13.342,17.559-25.456,28.446-35.232
|
|
||||||
c-2.952,14.338-8.549,28.945-16.256,42.287c-7.398,12.805-16.829,24.268-27.297,33.2
|
|
||||||
C587.846,531.415,593.022,517.536,600.422,504.692z"/>
|
|
||||||
</g>
|
</g>
|
||||||
<g>
|
<g>
|
||||||
<path d="M279.884,661.857h7.787c1.707,0,3.162,0.263,4.363,0.783c1.202,0.523,2.187,1.222,2.954,2.093
|
<path style="fill:#21BDED;" d="M1822.686,1336.356c-98.947,116.849-271.065,190.713-486.332,144.972
|
||||||
c0.766,0.87,1.314,1.873,1.646,3.003c0.331,1.133,0.496,2.309,0.496,3.529v1.358c0,1.01-0.079,1.865-0.235,2.562
|
c3.583-15.799,6.597-31.734,9.053-47.777c109.9-58.187,207.354-145.149,283.023-241.612
|
||||||
c-0.157,0.697-0.393,1.307-0.706,1.827c-0.314,0.523-0.698,0.985-1.151,1.386c-0.453,0.401-0.975,0.776-1.567,1.123
|
c108-137.684,168.82-311.675,170.123-486.644c-85.048,348.01-268.812,539.063-445.301,631.996
|
||||||
c1.254,0.595,2.177,1.472,2.77,2.641c0.592,1.166,0.888,2.725,0.888,4.677v2.09c0,3.274-0.794,5.782-2.378,7.525
|
c0.557-52.812-5.226-104.457-17.265-154.094c-16.654-68.693-44.872-131.481-83.881-186.614
|
||||||
c-1.586,1.743-4.12,2.613-7.603,2.613h-7.265V661.857z M285.215,677.116h2.404c1.777,0,2.97-0.444,3.58-1.332
|
c-36.063-50.966-79.917-91.889-128.631-126.12c9.243-18.758,19.952-36.891,32.208-54.21
|
||||||
c0.609-0.888,0.915-2.184,0.915-3.894c0-1.671-0.341-2.924-1.019-3.761c-0.679-0.837-1.908-1.255-3.685-1.255h-2.195V677.116z
|
c169.539-239.644,580.691-196.292,696.889-458.833c72.167,156.672,124.328,325.248,127.531,497.706
|
||||||
M285.215,693.736h2.299c1.079,0,1.925-0.156,2.535-0.469c0.609-0.314,1.071-0.75,1.384-1.307
|
C1983.294,1027.599,1934.16,1204.712,1822.686,1336.356z"/>
|
||||||
c0.314-0.559,0.505-1.22,0.575-1.988c0.069-0.766,0.105-1.6,0.105-2.508c0-0.939-0.052-1.758-0.157-2.455
|
|
||||||
c-0.105-0.697-0.323-1.281-0.653-1.75c-0.332-0.472-0.794-0.827-1.386-1.072c-0.592-0.242-1.377-0.365-2.351-0.365h-2.351
|
|
||||||
V693.736z"/>
|
|
||||||
<path d="M317.825,661.857h15.887v5.017h-10.557v10.924h9.198v5.017h-9.198v10.922h10.557v5.331h-15.887V661.857z"/>
|
|
||||||
<path d="M358.745,661.857h4.441l8.31,37.21h-5.331l-1.568-7.995h-7.263l-1.568,7.995h-5.331L358.745,661.857z M360.992,672.572
|
|
||||||
h-0.105l-2.613,13.481h5.331L360.992,672.572z"/>
|
|
||||||
<path d="M407.032,690.704c0,1.22-0.227,2.353-0.68,3.396c-0.453,1.046-1.07,1.96-1.855,2.746
|
|
||||||
c-0.783,0.783-1.698,1.401-2.743,1.855c-1.045,0.452-2.161,0.679-3.345,0.679c-1.184,0-2.299-0.227-3.344-0.679
|
|
||||||
c-1.045-0.454-1.96-1.072-2.743-1.855c-0.785-0.786-1.404-1.699-1.855-2.746c-0.454-1.044-0.68-2.177-0.68-3.396v-28.847h5.331
|
|
||||||
v28.324c0,1.324,0.314,2.302,0.94,2.927c0.628,0.628,1.411,0.942,2.352,0.942c0.941,0,1.725-0.314,2.353-0.942
|
|
||||||
c0.626-0.625,0.94-1.602,0.94-2.927v-28.324h5.331V690.704z"/>
|
|
||||||
<path d="M431.227,666.874h-6.166v-5.017h17.664v5.017h-6.168v32.193h-5.331V666.874z"/>
|
|
||||||
<path d="M465.718,683.338l-7.316-21.481h5.644l4.284,14.79h0.105l4.286-14.79h5.644l-7.317,21.481v15.729h-5.331V683.338z"/>
|
|
||||||
<path d="M539.037,690.758c0,1.148-0.218,2.246-0.653,3.292c-0.436,1.046-1.037,1.96-1.803,2.743
|
|
||||||
c-0.767,0.783-1.664,1.411-2.691,1.881c-1.028,0.472-2.135,0.707-3.319,0.707c-1.012,0-2.039-0.14-3.084-0.419
|
|
||||||
c-1.045-0.278-1.986-0.758-2.822-1.437c-0.836-0.679-1.525-1.577-2.064-2.692c-0.54-1.115-0.81-2.526-0.81-4.233v-20.485
|
|
||||||
c0-1.22,0.209-2.353,0.628-3.396c0.419-1.046,1.01-1.952,1.776-2.718c0.767-0.766,1.682-1.368,2.744-1.804
|
|
||||||
c1.063-0.434,2.238-0.653,3.528-0.653c1.218,0,2.351,0.219,3.396,0.653c1.045,0.436,1.951,1.046,2.718,1.83
|
|
||||||
c0.766,0.783,1.366,1.725,1.803,2.822c0.435,1.097,0.653,2.291,0.653,3.58v2.09h-5.331v-1.776c0-1.046-0.296-1.952-0.888-2.718
|
|
||||||
c-0.593-0.766-1.395-1.151-2.404-1.151c-1.324,0-2.205,0.411-2.64,1.23c-0.436,0.819-0.653,1.855-0.653,3.108v19.023
|
|
||||||
c0,1.079,0.236,1.985,0.706,2.718c0.471,0.732,1.315,1.097,2.535,1.097c0.347,0,0.722-0.061,1.123-0.184
|
|
||||||
c0.401-0.12,0.767-0.322,1.099-0.6c0.33-0.278,0.601-0.661,0.809-1.151c0.209-0.487,0.314-1.097,0.314-1.83v-1.827h5.331V690.758
|
|
||||||
z"/>
|
|
||||||
<path d="M559.053,661.857h15.887v5.017h-10.557v10.924h9.198v5.017h-9.198v10.922h10.557v5.331h-15.887V661.857z"/>
|
|
||||||
<path d="M593.858,661.857h5.121l8.048,22.42h0.105v-22.42h5.331v37.21h-5.017l-8.153-22.366h-0.105v22.366h-5.331V661.857z"/>
|
|
||||||
<path d="M636.448,666.874h-6.166v-5.017h17.664v5.017h-6.167v32.193h-5.331V666.874z"/>
|
|
||||||
<path d="M665.975,661.857h15.887v5.017h-10.557v10.924h9.198v5.017h-9.198v10.922h10.557v5.331h-15.887V661.857z"/>
|
|
||||||
<path d="M700.989,661.857h8.571c6.271,0,9.406,3.641,9.406,10.924c0,2.159-0.339,4.014-1.018,5.565
|
|
||||||
c-0.68,1.549-1.874,2.794-3.58,3.736l5.748,16.984h-5.643l-4.964-15.887h-3.188v15.887h-5.331V661.857z M706.32,678.476h3.031
|
|
||||||
c0.94,0,1.689-0.13,2.247-0.393c0.556-0.26,0.984-0.635,1.28-1.123c0.296-0.487,0.498-1.09,0.602-1.804
|
|
||||||
c0.103-0.712,0.156-1.541,0.156-2.48c0-0.942-0.052-1.768-0.156-2.483c-0.105-0.715-0.323-1.324-0.653-1.83
|
|
||||||
c-0.332-0.505-0.794-0.88-1.386-1.123c-0.593-0.245-1.377-0.367-2.351-0.367h-2.77V678.476z"/>
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 1.5 KiB |
64
src/pages/AuthForms.css
Normal file
64
src/pages/AuthForms.css
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
.auth-page {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-height: calc(100vh - 160px);
|
||||||
|
padding: 40px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-container {
|
||||||
|
background: white;
|
||||||
|
padding: 40px;
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||||
|
width: 400px;
|
||||||
|
max-width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-container h2 {
|
||||||
|
margin-top: 0;
|
||||||
|
color: #2c3e50;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group label {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-group input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 12px;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-btn {
|
||||||
|
width: 100%;
|
||||||
|
padding: 14px;
|
||||||
|
background: #6C63FF;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-switch {
|
||||||
|
margin-top: 25px;
|
||||||
|
text-align: center;
|
||||||
|
color: #7f8c8d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.auth-switch a {
|
||||||
|
color: #6C63FF;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
67
src/pages/Login.js
Normal file
67
src/pages/Login.js
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import './AuthForms.css';
|
||||||
|
|
||||||
|
function Login() {
|
||||||
|
const [formData, setFormData] = useState({
|
||||||
|
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 (
|
||||||
|
<div className="auth-page">
|
||||||
|
<div className="auth-container">
|
||||||
|
<h2>Вход</h2>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Пароль</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
value={formData.password}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="auth-btn">
|
||||||
|
Войти
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="auth-switch">
|
||||||
|
<span>Нет аккаунта? <a href="/register">Создать</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Login;
|
||||||
79
src/pages/Register.js
Normal file
79
src/pages/Register.js
Normal file
@@ -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 (
|
||||||
|
<div className="auth-page">
|
||||||
|
<div className="auth-container">
|
||||||
|
<h2>Регистрация</h2>
|
||||||
|
<form onSubmit={handleSubmit}>
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Имя</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Email</label>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
value={formData.email}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="form-group">
|
||||||
|
<label>Пароль</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
name="password"
|
||||||
|
value={formData.password}
|
||||||
|
onChange={handleChange}
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button type="submit" className="auth-btn">
|
||||||
|
Зарегистрироваться
|
||||||
|
</button>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<div className="auth-switch">
|
||||||
|
<span>Уже есть аккаунт? <a href="/login">Войти</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Register;
|
||||||
@@ -1,11 +0,0 @@
|
|||||||
const greetings = [
|
|
||||||
"С Днем Рождения! Желаю счастья, здоровья и успехов во всех начинаниях!",
|
|
||||||
"Поздравляю! Пусть каждый день будет полон радости и улыбок!",
|
|
||||||
"С праздником! Желаю исполнения всех желаний и ярких впечатлений!",
|
|
||||||
"От всей души поздравляю! Пусть жизнь будет прекрасной!",
|
|
||||||
];
|
|
||||||
|
|
||||||
export function getRandomGreeting() {
|
|
||||||
const randomIndex = Math.floor(Math.random() * greetings.length);
|
|
||||||
return greetings[randomIndex];
|
|
||||||
}
|
|
||||||
Reference in New Issue
Block a user