diff --git a/keynest/package-lock.json b/keynest/package-lock.json index 23a4256..001bd43 100644 --- a/keynest/package-lock.json +++ b/keynest/package-lock.json @@ -12,9 +12,11 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.2.0", "@testing-library/user-event": "^13.5.0", + "lorem-ipsum": "^2.0.8", "react": "^19.1.0", "react-dom": "^19.1.0", - "react-router-dom": "^7.4.1", + "react-modal": "^3.16.3", + "react-router-dom": "^7.5.1", "react-scripts": "5.0.1", "styled-components": "^6.1.16", "web-vitals": "^2.1.4" @@ -3674,12 +3676,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", @@ -7902,6 +7898,12 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==", + "license": "BSD-3-Clause" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -11272,6 +11274,31 @@ "loose-envify": "cli.js" } }, + "node_modules/lorem-ipsum": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/lorem-ipsum/-/lorem-ipsum-2.0.8.tgz", + "integrity": "sha512-5RIwHuCb979RASgCJH0VKERn9cQo/+NcAi2BMe9ddj+gp7hujl6BI+qdOG4nVsLDpwWEJwTVYXNKP6BGgbcoGA==", + "license": "ISC", + "dependencies": { + "commander": "^9.3.0" + }, + "bin": { + "lorem-ipsum": "dist/bin/lorem-ipsum.bin.js" + }, + "engines": { + "node": ">= 8.x", + "npm": ">= 5.x" + } + }, + "node_modules/lorem-ipsum/node_modules/commander": { + "version": "9.5.0", + "resolved": "https://registry.npmjs.org/commander/-/commander-9.5.0.tgz", + "integrity": "sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==", + "license": "MIT", + "engines": { + "node": "^12.20.0 || >=14" + } + }, "node_modules/lower-case": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", @@ -13987,6 +14014,28 @@ "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "license": "MIT" }, + "node_modules/react-lifecycles-compat": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", + "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", + "license": "MIT" + }, + "node_modules/react-modal": { + "version": "3.16.3", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.16.3.tgz", + "integrity": "sha512-yCYRJB5YkeQDQlTt17WGAgFJ7jr2QYcWa1SHqZ3PluDmnKJ/7+tVU+E6uKyZ0nODaeEj+xCpK4LcSnKXLMC0Nw==", + "license": "MIT", + "dependencies": { + "exenv": "^1.2.0", + "prop-types": "^15.7.2", + "react-lifecycles-compat": "^3.0.0", + "warning": "^4.0.3" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19", + "react-dom": "^0.14.0 || ^15.0.0 || ^16 || ^17 || ^18 || ^19" + } + }, "node_modules/react-refresh": { "version": "0.11.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz", @@ -13997,12 +14046,11 @@ } }, "node_modules/react-router": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.4.1.tgz", - "integrity": "sha512-Vmizn9ZNzxfh3cumddqv3kLOKvc7AskUT0dC1prTabhiEi0U4A33LmkDOJ79tXaeSqCqMBXBU/ySX88W85+EUg==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.1.tgz", + "integrity": "sha512-/jjU3fcYNd2bwz9Q0xt5TwyiyoO8XjSEFXJY4O/lMAlkGTHWuHRAbR9Etik+lSDqMC7A7mz3UlXzgYT6Vl58sA==", "license": "MIT", "dependencies": { - "@types/cookie": "^0.6.0", "cookie": "^1.0.1", "set-cookie-parser": "^2.6.0", "turbo-stream": "2.4.0" @@ -14021,12 +14069,12 @@ } }, "node_modules/react-router-dom": { - "version": "7.4.1", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.4.1.tgz", - "integrity": "sha512-L3/4tig0Lvs6m6THK0HRV4eHUdpx0dlJasgCxXKnavwhh4tKYgpuZk75HRYNoRKDyDWi9QgzGXsQ1oQSBlWpAA==", + "version": "7.5.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.1.tgz", + "integrity": "sha512-5DPSPc7ENrt2tlKPq0FtpG80ZbqA9aIKEyqX6hSNJDlol/tr6iqCK4crqdsusmOSSotq6zDsn0y3urX9TuTNmA==", "license": "MIT", "dependencies": { - "react-router": "7.4.1" + "react-router": "7.5.1" }, "engines": { "node": ">=20.0.0" @@ -16837,6 +16885,15 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "license": "MIT", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/watchpack": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.2.tgz", diff --git a/keynest/package.json b/keynest/package.json index 77c0413..f1a5563 100644 --- a/keynest/package.json +++ b/keynest/package.json @@ -7,9 +7,11 @@ "@testing-library/jest-dom": "^6.6.3", "@testing-library/react": "^16.2.0", "@testing-library/user-event": "^13.5.0", + "lorem-ipsum": "^2.0.8", "react": "^19.1.0", "react-dom": "^19.1.0", - "react-router-dom": "^7.4.1", + "react-modal": "^3.16.3", + "react-router-dom": "^7.5.1", "react-scripts": "5.0.1", "styled-components": "^6.1.16", "web-vitals": "^2.1.4" diff --git a/keynest/src/App.js b/keynest/src/App.js index 4bd2d15..5b8a7df 100644 --- a/keynest/src/App.js +++ b/keynest/src/App.js @@ -1,25 +1,50 @@ import React from 'react'; import './App.css'; +import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'; import Header from './components/Header'; import ApartmentRentals from './components/ApartmentRentals'; import ApartmentOptions from './components/ApartmentOptions'; -import ApartmentAmenities from './components/ApartmentAmenities'; -import NearbyAttractions from './components/NearbyAttractions'; -import FlexibleLeasing from './components/FlexibleLeasing'; -import UnparalleledConvenience from './components/UnparalleledConvenience'; +import { AuthProvider, useAuth } from './components/AuthContext'; +import BookingPage from './components/BookingPage'; +import MyRentals from './components/MyRentals'; +import Footer from './components/Footer'; + +function AppContent() { + const { isLoggedIn, logout, user } = useAuth(); -function App() { return (
- - - - - - + {isLoggedIn ? ( + <> + + +
); } -export default App; +function App() { + return ( + + + + } /> + } /> + } /> + } /> + + + + ); +} + +export default App; \ No newline at end of file diff --git a/keynest/src/components/ApartmentAmenities.css b/keynest/src/components/ApartmentAmenities.css deleted file mode 100644 index 4e6d61b..0000000 --- a/keynest/src/components/ApartmentAmenities.css +++ /dev/null @@ -1,83 +0,0 @@ -.apartment_header{ - background-color: #FCFBFC; -} -.apartment__Amenities{ - position: absolute; - width: 1290px; - height: 187px; - top: 800px; - text-align: center; - left: 290px; - margin-bottom: 30px; -} -.icon__Amenities{ - position: absolute; - width: 43px; - height: 44px; - left: 624px; -} -.heading__Amenities{ - position: absolute; - width: 1290px; - height: 56px; - top: 61px; - font-family: 'Instrument Serif'; - font-style: italic; - font-weight: 400; - font-size: 46px; - line-height: 120%; - text-align: center; - color: #1F1E1F; -} -.info__Amenities{ - position: absolute; - width: 608px; - height: 54px; - left: 341px; - top: 131px; - font-family: 'Nunito'; - font-style: normal; - font-weight: 500; - font-size: 18px; - line-height: 150%; - text-align: center; - color: #999798; -} -.img__Amenitiess{ - position: absolute; - width: 1281px; - height: 587px; - left: 379px; - top: 1000px; - display: flex; - text-align: center; -} -.img__Amenities{ - width: 377px; - height: 506px; - align-self: stretch; - padding-right: 25px; -} -.img__Amenities1{ - width: 779px; - height: 506px; - border-radius: 0px; - align-self: stretch; -} -.img_name{ - font-family: 'Nunito'; - font-style: normal; - font-weight: 500; - font-size: 19px; - line-height: 120%; - color: #666464; - flex: none; -} -.img_info{ - font-family: 'Nunito'; - font-style: normal; - font-weight: 400; - font-size: 17px; - line-height: 120%; - color: #727174; -} \ No newline at end of file diff --git a/keynest/src/components/ApartmentAmenities.js b/keynest/src/components/ApartmentAmenities.js deleted file mode 100644 index ce88e49..0000000 --- a/keynest/src/components/ApartmentAmenities.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import './ApartmentAmenities.css'; - -function ApartmentAmenities(){ - return( -
-
-
- изображение -

Apartment Amenities

-

Enjoy a range of modern amenities in our apartments, from fully-equipped kitchens to en-suite laundry facilities, ensuring your comfort and convenience

-
-
-
- изображение -

Stunning Views

-

Natural Lighting

-
-
- изображение -

Relaxing Atmosphere

-

Cozy Interiors

-
-
-
-
- ) -} - -export default ApartmentAmenities; \ No newline at end of file diff --git a/keynest/src/components/ApartmentRentals.js b/keynest/src/components/ApartmentRentals.js index 31a7795..1f30566 100644 --- a/keynest/src/components/ApartmentRentals.js +++ b/keynest/src/components/ApartmentRentals.js @@ -1,18 +1,41 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; import './ApartmentRentals.css'; -function ApartmentRentals(){ - return( +function ApartmentRentals() { + const [loading, setLoading] = useState(false); + const navigate = useNavigate(); + + const handleBookNowClick = () => { + setLoading(true); + // Simulate loading delay + setTimeout(() => { + setLoading(false); + // Redirect to the booking page using navigate + navigate('/booking'); + }, 2000); + }; + + return (
- изображение + изображение

Short-term and Long-term Apartment Rentals

Discover the perfect apartment for your needs, whether it's a quick stay or a long-term investment

- +
- ) + ); } export default ApartmentRentals; \ No newline at end of file diff --git a/keynest/src/components/AuthContext.js b/keynest/src/components/AuthContext.js new file mode 100644 index 0000000..829dfae --- /dev/null +++ b/keynest/src/components/AuthContext.js @@ -0,0 +1,57 @@ +import React, { createContext, useState, useContext } from 'react'; + +const AuthContext = createContext(); + +export const AuthProvider = ({ children }) => { // ONE declaration of AuthProvider + const [isLoggedIn, setIsLoggedIn] = useState(false); + const [user, setUser] = useState(null); + + const login = async (credentials) => { + // Mock authentication logic + if (credentials.username === 'user' && credentials.password === 'password') { + setIsLoggedIn(true); + setUser({ username: credentials.username }); + return Promise.resolve(); // Resolve promise on successful login + } else { + setIsLoggedIn(false); + setUser(null); + return Promise.reject(new Error('Invalid credentials')); // Reject promise on invalid credentials + } + }; + + const register = async (credentials) => { + // Mock registration logic + if (credentials.username && credentials.password) { + setIsLoggedIn(true); + setUser({ username: credentials.username }); + return Promise.resolve(); // Resolve promise on successful registration + } else { + setIsLoggedIn(false); + setUser(null); + return Promise.reject(new Error('Registration failed')); // Reject promise on failed registration + } + }; + + const logout = () => { + setIsLoggedIn(false); + setUser(null); + }; + + const value = { + isLoggedIn, + user, + login, + register, + logout + }; + + return ( + + {children} + + ); +}; + +export const useAuth = () => { + return useContext(AuthContext); +}; \ No newline at end of file diff --git a/keynest/src/components/AuthModal.js b/keynest/src/components/AuthModal.js new file mode 100644 index 0000000..5256905 --- /dev/null +++ b/keynest/src/components/AuthModal.js @@ -0,0 +1,128 @@ +import React, { useState } from 'react'; +import Modal from 'react-modal'; +import { useAuth } from './AuthContext'; + +Modal.setAppElement('#root'); + +const AuthModal = ({ isOpen, onRequestClose }) => { + const [isLogin, setIsLogin] = useState(true); + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const { login, register } = useAuth(); + const [error, setError] = useState(''); + + const handleSubmit = async (e) => { + e.preventDefault(); + setError(''); + try { + if (isLogin) { + await login({ username, password }); + } else { + await register({ username, password }); + } + onRequestClose(); + } catch (err) { + setError(err.message); + } + }; + + const toggleAuthMode = () => { + setIsLogin(!isLogin); + setUsername(''); + setPassword(''); + setError(''); + }; + + const modalStyles = { + overlay: { + backgroundColor: 'rgba(0, 0, 0, 0.5)' + }, + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)', + padding: '20px', + width: '300px', + borderRadius: '8px', + boxShadow: '0 4px 8px rgba(0, 0, 0, 0.1)', + border: 'none' + } + }; + + const formStyles = { + display: 'flex', + flexDirection: 'column', + gap: '15px' + }; + + const inputStyles = { + padding: '10px', + borderRadius: '4px', + border: '1px solid #ccc', + fontSize: '16px' + }; + + const buttonStyles = { + padding: '12px', + borderRadius: '4px', + border: 'none', + backgroundColor: '#242323', + color: 'white', + fontSize: '16px', + cursor: 'pointer', + ':hover': { + backgroundColor: '#0056b3' + } + }; + + const toggleButtonStyles = { + background: 'none', + border: 'none', + color: '#007bff', + cursor: 'pointer', + fontSize: '14px', + textDecoration: 'underline' + }; + + return ( + +

{isLogin ? 'Login' : 'Register'}

+ {error &&

{error}

} +
+
+ + setUsername(e.target.value)} + style={inputStyles} + /> +
+
+ + setPassword(e.target.value)} + style={inputStyles} + /> +
+ +
+ + + ); +}; + +export default AuthModal; \ No newline at end of file diff --git a/keynest/src/components/BookingPage.css b/keynest/src/components/BookingPage.css new file mode 100644 index 0000000..3b8c3fd --- /dev/null +++ b/keynest/src/components/BookingPage.css @@ -0,0 +1,122 @@ + +.dark-theme { + background-color: #fff; + color: #000; + font-family: 'Nunito'; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; +} + +.dark-theme h1 { + color: #242323; + margin-bottom: 20px; + text-align: center; +} + +.dark-theme p { + color: #333; + margin-bottom: 30px; + text-align: center; +} + + +.booking-form { + width: 90%; + max-width: 600px; + padding: 30px; + background-color: #000; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); +} + +.form-group { + display: flex; + flex-direction: column; + margin-bottom: 20px; +} + +.form-group label { + color: #c6c3c3; + margin-bottom: 8px; + font-weight: normal; +} + +.form-group input { + padding: 12px; + border: none; + border-radius: 5px; + background-color: #fff; + color: #000; + font-size: 16px; + transition: background-color 0.3s ease; +} + +.form-group input:focus { + background-color: #eee; + outline: none; + box-shadow: 0 0 0 2px #242323; +} + + +.submit-button { + background-color: #242323; + color: #fff; + padding: 14px 24px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 18px; + transition: background-color 0.3s ease; + width: 100%; + text-align: center; +} + +.submit-button:hover { + background-color: #242323; +} + +.submit-button:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(217, 217, 217, 0.5); +} +.message { + margin-top: 20px; + padding: 15px; + border-radius: 5px; + text-align: center; +} + +.success { + background-color: #4CAF50; + color: white; +} + +.error { + background-color: #F44336; + color: white; +} +.back-to-home-button { + background-color: #242323; + color: #fff; + padding: 10px 15px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + position: absolute; + top: 20px; + left: 20px; + transition: background-color 0.3s ease; +} + +.back-to-home-button:hover { + background-color: #242323; +} + +.back-to-home-button:focus { + outline: none; + box-shadow: 0 0 0 3px rgba(220, 220, 220, 0.5); +} \ No newline at end of file diff --git a/keynest/src/components/BookingPage.js b/keynest/src/components/BookingPage.js new file mode 100644 index 0000000..f43b533 --- /dev/null +++ b/keynest/src/components/BookingPage.js @@ -0,0 +1,105 @@ +import React, { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import './BookingPage.css'; + +function BookingPage() { + const [formData, setFormData] = useState({ + name: '', + email: '', + checkin: '', + checkout: '' + }); + const [message, setMessage] = useState(''); + const [isSuccess, setIsSuccess] = useState(false); + const navigate = useNavigate(); + + const handleChange = (e) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); + }; + + const handleSubmit = async (e) => { + e.preventDefault(); + + const checkinDate = new Date(formData.checkin); + const checkoutDate = new Date(formData.checkout); + const today = new Date(); + today.setHours(0, 0, 0, 0); + + if (checkinDate < today) { + setMessage('Check-in date cannot be in the past.'); + setIsSuccess(false); + return; + } + + if (checkoutDate <= checkinDate) { + setMessage('Check-out date must be after check-in date.'); + setIsSuccess(false); + return; + } + + try { + await submitForm(formData); + setMessage('Booking successful!'); + setIsSuccess(true); + setFormData({ name: '', email: '', checkin: '', checkout: '' }); + } catch (error) { + setMessage('Booking failed. Please try again.'); + setIsSuccess(false); + } + }; + + const handleBackToHome = () => { + navigate('/'); + }; + + const submitForm = (data) => { + return new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, 2000); + }); + }; + + return ( +
+ + +

Book Your Apartment Now!

+

Please fill out the form below to complete your booking.

+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+ + {message && ( +
+ {message} +
+ )} +
+ ); +} + +export default BookingPage; \ No newline at end of file diff --git a/keynest/src/components/FlexibleLeasing.css b/keynest/src/components/FlexibleLeasing.css deleted file mode 100644 index 0b6da5d..0000000 --- a/keynest/src/components/FlexibleLeasing.css +++ /dev/null @@ -1,16 +0,0 @@ -.Flexible2{ - left: 341px; - top: 2330px; -} -.Flexible{ - left: 290px; - top: 2375px; -} -.Flexible1{ - left: calc(50% - 660px/2 + 0.5px); - top: 2440px; -} -.Flexible3{ - left: 290px; - top: 2545px; -} \ No newline at end of file diff --git a/keynest/src/components/FlexibleLeasing.js b/keynest/src/components/FlexibleLeasing.js deleted file mode 100644 index e02a303..0000000 --- a/keynest/src/components/FlexibleLeasing.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import './FlexibleLeasing.css'; - -function FlexibleLeasing(){ - return( -
-
-
-

Flexible Leasing

-

Tailor-made Leases

-

Choose from a variety of flexible leasing options, whether you need a short-term stay or a long-term commitment, we have the perfect solution for you

-
-
-
- изображение -

Modern Designs

-

Sleek and stylish, our apartments feature contemporary designs that elevate your living experience

-
-
- изображение -

Cozy Retreats

-

Warm and inviting, our apartments offer a private sanctuary to unwind and recharge

-
-
- изображение -

Refined Elegance

-

Sophisticated and refined, our apartments exude an air of elegant sophistication

-
-
-
-
- ) -} - -export default FlexibleLeasing; \ No newline at end of file diff --git a/keynest/src/components/Footer.css b/keynest/src/components/Footer.css new file mode 100644 index 0000000..49f893c --- /dev/null +++ b/keynest/src/components/Footer.css @@ -0,0 +1,66 @@ +.footer { + background-color: #333; + color: #fff; + padding: 40px 0; + font-family: 'Nunito', sans-serif; + margin-top: 800px; +} + +.footer-container { + width: 90%; + max-width: 1200px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-around; + top: 1000px; +} + +.footer-section { + margin-bottom: 30px; + flex: 1; + min-width: 250px; + text-align: left; +} + +.footer-section h3 { + color: #a6a5a8; + margin-bottom: 15px; +} + +.footer-section p { + line-height: 1.6; +} + +.social-links a { + color: #fff; + text-decoration: none; + margin-right: 15px; + transition: color 0.3s ease; +} + +.social-links a:hover { + color: #bb86fc; +} + +.footer-bottom { + text-align: center; + margin-top: 20px; + width: 100%; + padding-top: 20px; + border-top: 1px solid #555; +} + +.footer-bottom p { + margin-bottom: 5px; +} + +.footer-bottom a { + color: #fff; + text-decoration: none; + transition: color 0.3s ease; +} + +.footer-bottom a:hover { + color: #bb86fc; +} \ No newline at end of file diff --git a/keynest/src/components/Footer.js b/keynest/src/components/Footer.js new file mode 100644 index 0000000..ee23909 --- /dev/null +++ b/keynest/src/components/Footer.js @@ -0,0 +1,35 @@ +import React from 'react'; +import './Footer.css'; + +function Footer() { + return ( + + ); +} + +export default Footer; \ No newline at end of file diff --git a/keynest/src/components/Header.css b/keynest/src/components/Header.css index b1cb6ad..5bc93eb 100644 --- a/keynest/src/components/Header.css +++ b/keynest/src/components/Header.css @@ -21,11 +21,14 @@ body{ } .menu { margin: auto; + text-decoration: none; } .menu a{ margin-right: 158px; + text-decoration: none; + color: #242323; } -.login-button{ +.button{ display: flex; margin-top: 15px; margin-right: 300px; @@ -37,6 +40,7 @@ body{ color: aliceblue; padding-left: 39px; } + .logo{ margin-bottom: 15px; display: flex; diff --git a/keynest/src/components/Header.js b/keynest/src/components/Header.js index bd7d886..7a7c8ab 100644 --- a/keynest/src/components/Header.js +++ b/keynest/src/components/Header.js @@ -1,25 +1,47 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; import './Header.css'; +import AuthModal from './AuthModal'; +import { useAuth } from './AuthContext'; -function Header(){ - return( +function Header() { + const [isModalOpen, setIsModalOpen] = useState(false); + const { isLoggedIn, logout } = useAuth(); + + const openModal = () => { + setIsModalOpen(true); + }; + + const closeModal = () => { + setIsModalOpen(false); + }; + + const handleLogout = () => { + logout(); + }; + + return (
-
-
- изображение +
+
+ изображение KeyNest
-
- ) + ); } export default Header; \ No newline at end of file diff --git a/keynest/src/components/MyRentals.css b/keynest/src/components/MyRentals.css new file mode 100644 index 0000000..0cc37a9 --- /dev/null +++ b/keynest/src/components/MyRentals.css @@ -0,0 +1,63 @@ +.my-rentals-page { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + padding: 20px; + display: flex; + flex-direction: column; + align-items: center; + min-height: 100vh; + background-color: #f4f4f4; +} + +.my-rentals-page h1 { + color: #333; + margin-bottom: 20px; + text-align: center; +} + +.rentals-list { + width: 90%; + max-width: 800px; + display: flex; + flex-direction: column; +} + +.rental-item { + background-color: #fff; + border-radius: 8px; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + padding: 20px; + margin-bottom: 20px; + transition: transform 0.3s ease; +} + +.rental-item:hover { + transform: translateY(-5px); +} + +.rental-item h3 { + color: #242324; + margin-bottom: 10px; +} + +.rental-item p { + color: #555; + margin-bottom: 5px; +} +.back-to-home-button { + background-color: #242323; + color: #fff; + padding: 10px 15px; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 16px; + position: absolute; + top: 20px; + left: 20px; + text-decoration: none; + transition: background-color 0.3s ease; +} + +.back-to-home-button:hover { + background-color: #242323; +} \ No newline at end of file diff --git a/keynest/src/components/MyRentals.js b/keynest/src/components/MyRentals.js new file mode 100644 index 0000000..052ca02 --- /dev/null +++ b/keynest/src/components/MyRentals.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; // Import Link +import './MyRentals.css'; + +function MyRentals() { + const rentals = [ + { + id: 1, + title: 'Cozy Apartment in Downtown', + location: '123 Main St, Cityville', + checkin: '2024-05-01', + checkout: '2024-05-07', + status: 'Confirmed' + }, + { + id: 2, + title: 'Luxury Condo with Ocean View', + location: '456 Ocean Ave, Beach City', + checkin: '2024-06-10', + checkout: '2024-06-17', + status: 'Pending' + }, + { + id: 3, + title: 'Modern Loft in Arts District', + location: '789 Art Lane, Culturetown', + checkin: '2024-07-01', + checkout: '2024-07-08', + status: 'Completed' + } + ]; + + return ( +
+ + Back to Home + +

My Rentals

+
+ {rentals.map((rental) => ( +
+

{rental.title}

+

Location: {rental.location}

+

Check-in: {rental.checkin}

+

Check-out: {rental.checkout}

+

Status: {rental.status}

+
+ ))} +
+
+ ); +} + +export default MyRentals; \ No newline at end of file diff --git a/keynest/src/components/NearbyAttractions.css b/keynest/src/components/NearbyAttractions.css deleted file mode 100644 index 4621a21..0000000 --- a/keynest/src/components/NearbyAttractions.css +++ /dev/null @@ -1,47 +0,0 @@ -.the__subtitle{ - position: absolute; - width: 1180px; - height: 20px; - font-family: 'Nunito'; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 120%; - text-align: center; - color: #B8B7B9; -} -.Attractions2{ - left: 341px; - top: 1610px; -} -.Attractions__header{ - text-align: center; -} -.Attractions{ - width: 1180px; - height: 56px; - left: 347px; - top: 1645px; - color: #292729; - - -} -.Attractions1{ - padding-top: 10px; - width: 711px; - height: 81px; - left: calc(50% - 760px/2 + 0.5px); - top: 1700px; -} -.img__Amenitiess1{ - position: absolute; - width: 1281px; - height: 587px; - display: flex; - text-align: center; - -} -.Attractions3{ - left: 300px; - top: 1800px; -} \ No newline at end of file diff --git a/keynest/src/components/NearbyAttractions.js b/keynest/src/components/NearbyAttractions.js deleted file mode 100644 index a65231a..0000000 --- a/keynest/src/components/NearbyAttractions.js +++ /dev/null @@ -1,36 +0,0 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import './NearbyAttractions.css'; - -function NearbyAttractions(){ - return( -
-
-
-

Nearby Attractions

-

Explore the City

-

Discover the best of urban living with our centrally located apartments, offering easy access to top restaurants, entertainment, and cultural destinations

-
-
-
- изображение -

Workspace Ready

-

Maximize productivity with our well-appointed workspaces, perfect for remote work or studying

-
-
- изображение -

Peaceful Retreats

-

Unwind in the comfort of your own private oasis, surrounded by serene natural elements

-
-
- изображение -

Luxurious Comforts

-

Indulge in the ultimate in comfort and style with our premium bedding and furnishings

-
-
-
-
- ) -} - -export default NearbyAttractions; \ No newline at end of file diff --git a/keynest/src/components/UnparalleledConvenience.css b/keynest/src/components/UnparalleledConvenience.css deleted file mode 100644 index 2cf284e..0000000 --- a/keynest/src/components/UnparalleledConvenience.css +++ /dev/null @@ -1,19 +0,0 @@ -.Convenience4{ - background-color: #E4E4E4; -} -.Convenience2{ - left: 341px; - top: 2330px; -} -.Convenience{ - left: 290px; - top: 3220px; -} -.Convenience1{ - left: calc(50% - 660px/2 + 0.5px); - top: 3300px; -} -.Convenience3{ - left: 290px; - top: 3445px; -} \ No newline at end of file diff --git a/keynest/src/components/UnparalleledConvenience.js b/keynest/src/components/UnparalleledConvenience.js deleted file mode 100644 index 9491cfa..0000000 --- a/keynest/src/components/UnparalleledConvenience.js +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react'; -import { Link, useNavigate } from 'react-router-dom'; -import './UnparalleledConvenience.css'; - -function UnparalleledConvenience(){ - return( -
-
-
-

Unparalleled Convenience

-

Centrally located and well-connected, our apartments provide easy access to the city's top attractions, transportation hubs, and essential amenities

-
-
-
- изображение -

Peaceful Oasis

-

Escape the hustle and bustle of the city in the comfort of your own private retreat

-
-
- изображение -

Stylish Sanctuaries

-

Immerse yourself in the tranquility of our beautifully designed apartments

-
-
- изображение -

Urban Sanctuaries

-

Discover the perfect balance of urban living and serene relaxation

-
-
-
-
- ) -} - -export default UnparalleledConvenience; \ No newline at end of file