четвертое сохранение

keynest/src/App.js

@@ -5,6 +5,8 @@ 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';
 
 function App() {
   return (
@@ -14,6 +16,8 @@ function App() {
       <ApartmentOptions />
       <ApartmentAmenities />
       <NearbyAttractions />
+      <FlexibleLeasing />
+      <UnparalleledConvenience />
     </div>
   );
 }

keynest/src/components/FlexibleLeasing.css

@@ -0,0 +1,16 @@
+.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;
+}

keynest/src/components/FlexibleLeasing.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import './FlexibleLeasing.css';
+
+function FlexibleLeasing(){
+    return(
+        <header className='apartment'>
+            <div className='Attractions__header'>
+                <div className='Attractions__content'>
+                    <p className='the__subtitle Flexible2' >Flexible Leasing</p>
+                    <p className='heading__Amenities Flexible'>Tailor-made Leases</p>
+                    <p className='info__Amenities Flexible1'>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</p>
+                </div>
+                <div className='img__Amenitiess1 Flexible3'>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image7.png'} alt='изображение' />
+                        <p className='img_name'>Modern Designs</p>
+                        <p className='img_info'>Sleek and stylish, our apartments feature contemporary designs that elevate your living experience</p>
+                    </div>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image8.png'} alt='изображение' />
+                        <p className='img_name'>Cozy Retreats</p>
+                        <p className='img_info'>Warm and inviting, our apartments offer a private sanctuary to unwind and recharge</p>
+                    </div>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image9.png'} alt='изображение' />
+                        <p className='img_name'>Refined Elegance</p>
+                        <p className='img_info'>Sophisticated and refined, our apartments exude an air of elegant sophistication</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default FlexibleLeasing;

keynest/src/components/NearbyAttractions.css

@@ -2,8 +2,6 @@
     position: absolute;
     width: 1180px;
     height: 20px;
-    left: 341px;
-    top: 1600px;
     font-family: 'Nunito';
     font-style: normal;
     font-weight: 400;
@@ -12,6 +10,10 @@
     text-align: center;
     color: #B8B7B9;
 }
+.Attractions2{
+    left: 341px;
+    top: 1610px;
+}
 .Attractions__header{
     text-align: center;
 }
@@ -31,3 +33,15 @@
     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;
+}

keynest/src/components/NearbyAttractions.js

@@ -7,12 +7,26 @@ function NearbyAttractions(){
         <header className='apartment'>
             <div className='Attractions__header'>
                 <div className='Attractions__content'>
-                    <p className='the__subtitle'>Nearby Attractions</p>
+                    <p className='the__subtitle Attractions2'>Nearby Attractions</p>
                     <p className='heading__Amenities Attractions'>Explore the City</p>
                     <p className='info__Amenities Attractions1'>Discover the best of urban living with our centrally located apartments, offering easy access to top restaurants, entertainment, and cultural destinations</p>
                 </div>
-                <div>
-                    
+                <div className='img__Amenitiess1 Attractions3'>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image4.png'} alt='изображение' />
+                        <p className='img_name'>Workspace Ready</p>
+                        <p className='img_info'>Maximize productivity with our well-appointed workspaces, perfect for remote work or studying</p>
+                    </div>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image5.png'} alt='изображение' />
+                        <p className='img_name'>Peaceful Retreats</p>
+                        <p className='img_info'>Unwind in the comfort of your own private oasis, surrounded by serene natural elements</p>
+                    </div>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image6.png'} alt='изображение' />
+                        <p className='img_name'>Luxurious Comforts</p>
+                        <p className='img_info'>Indulge in the ultimate in comfort and style with our premium bedding and furnishings</p>
+                    </div>
                 </div>
             </div>
         </header>

keynest/src/components/UnparalleledConvenience.css

@@ -0,0 +1,19 @@
+.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;
+}

keynest/src/components/UnparalleledConvenience.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import './UnparalleledConvenience.css';
+
+function UnparalleledConvenience(){
+    return(
+        <header className='apartment Convenience4'>
+            <div className='Attractions__header'>
+                <div className='Attractions__content'>
+                    <p className='heading__Amenities Convenience'>Unparalleled Convenience</p>
+                    <p className='info__Amenities Convenience1'>Centrally located and well-connected, our apartments provide easy access to the city's top attractions, transportation hubs, and essential amenities</p>
+                </div>
+                <div className='img__Amenitiess1 Convenience3'>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image10.png'} alt='изображение' />
+                        <p className='img_name'>Peaceful Oasis</p>
+                        <p className='img_info'>Escape the hustle and bustle of the city in the comfort of your own private retreat</p>
+                    </div>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image11.png'} alt='изображение' />
+                        <p className='img_name'>Stylish Sanctuaries</p>
+                        <p className='img_info'>Immerse yourself in the tranquility of our beautifully designed apartments</p>
+                    </div>
+                    <div>
+                        <img className ='img__Nearby' src={process.env.PUBLIC_URL + '/images/Image12.png'} alt='изображение' />
+                        <p className='img_name'>Urban Sanctuaries</p>
+                        <p className='img_info'>Discover the perfect balance of urban living and serene relaxation</p>
+                    </div>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default UnparalleledConvenience;