fixes

src/Pages/main-page/main-page.tsx

@@ -24,7 +24,7 @@ export function MainPage(): React.JSX.Element {
     : `${pluralizeAndCombine('place', offers.length)} to stay in ${city.name}`;
   return (
     <div className="page page--gray page--main">
-      <Layout showFooter>
+      <Layout>
         <main className="page__main page__main--index">
           <Helmet>6 cities</Helmet>
           <h1 className="visually-hidden">Cities</h1>

src/components/offer/offer-card.tsx

@@ -4,6 +4,7 @@ import { AppRoutes } from '../../dataTypes/enums/app-routes.ts';
 import cn from 'classnames';
 import { Rating } from '../rating.tsx';
 import { BookmarkButton } from '../bookmark-button.tsx';
+import { capitalize } from '../../utils/string-utils.ts';
 
 interface PlaceCardProps {
   id: string;
@@ -82,7 +83,7 @@ export function OfferCard({
         <h2 className="place-card__name">
           <Link to={`${AppRoutes.Offer}/${id}`}>{title}</Link>
         </h2>
-        <p className="place-card__type">{type}</p>
+        <p className="place-card__type">{capitalize(type)}</p>
       </div>
     </article>
   );

src/components/offer/offer-gallery.tsx

@@ -10,7 +10,7 @@ export function OfferGallery({
   return (
     <div className="offer__gallery-container container">
       <div className="offer__gallery">
-        {imageSources.map((src) => (
+        {imageSources.slice(0, 6).map((src) => (
           <div key={`${src}`} className="offer__image-wrapper">
             <img className="offer__image" src={src} alt="Photo studio" />
           </div>

src/components/offer/offer-host.tsx

@@ -11,15 +11,25 @@ export function OfferHost({ host }: OfferHostProps): React.JSX.Element {
     <>
       <h2 className="offer__host-title">Meet the host</h2>
       <div className="offer__host-user user">
-        <div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
+        {host.isPro ? (
+          <div className="offer__avatar-wrapper offer__avatar-wrapper--pro user__avatar-wrapper">
+            <img
+              className="offer__avatar user__avatar"
+              src={host.avatarUrl}
+              width="74"
+              height="74"
+              alt="Host avatar"
+            />
+          </div>
+        ) : (
           <img
             className="offer__avatar user__avatar"
             src={host.avatarUrl}
             width="74"
             height="74"
             alt="Host avatar"
           />
-        </div>
+        )}
         <span className="offer__user-name">{getFirstName(host.name)}</span>
         {host.isPro && <span className="offer__user-status">Pro</span>}
       </div>

src/components/rating.tsx

@@ -14,7 +14,7 @@ export function Rating({
   return (
     <div className={`${usePlace}__rating rating`}>
       <div className={`${usePlace}__stars rating__stars`}>
-        <span style={{ width: `${rating * 20}%` }}></span>
+        <span style={{ width: `${Math.round(rating) * 20}%` }}></span>
         <span className="visually-hidden">Rating</span>
       </div>
       {isInOffer && (

src/components/reviews/reviews.tsx

@@ -9,14 +9,17 @@ interface ReviewsProps {
 }
 
 export function Reviews({ reviews }: ReviewsProps): React.JSX.Element {
+  const sortedReviews = reviews
+    .toSorted((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+    .slice(0, 10);
   const isAuthorized =
     useAppSelector((state) => state.authorizationStatus) ===
     AuthorizationStatus.Authorized;
   const reviewsAvailable = reviews && reviews.length !== 0;
   return (
     <section className="offer__reviews reviews">
       {reviewsAvailable ? (
-        <ReviewsList reviews={reviews} />
+        <ReviewsList reviews={sortedReviews} />
       ) : (
         <span
           className="reviews__item"

src/dataTypes/enums/room-type.ts

@@ -1,4 +1,6 @@
 export enum RoomType {
   Apartment = 'Apartment',
   Room = 'Room',
+  Hotel = 'Hotel',
+  House = 'House',
 }