Switch to version 2: added src/pages/HomePage/sections/Rooms.tsx

Merge version_3_1781905868363 into main

src/index.css

@@ -5,15 +5,15 @@
 
 :root {
   /* @colorThemes/darkTheme/luxury */
-  --background: #0f1010;
-  --card: #3d3d3d;
-  --foreground: #f5f0eb;
-  --primary-cta: #ffffff;
-  --primary-cta-text: #0a0a0a;
-  --secondary-cta: #1a1a1a;
-  --secondary-cta-text: #f5f0eb;
-  --accent: #d4b896;
-  --background-accent: #4f402d;
+  --background: #f5f1ea;
+  --card: #ffffff;
+  --foreground: #2d2d2d;
+  --primary-cta: #c8703d;
+  --primary-cta-text: #ffffff;
+  --secondary-cta: #e8e2d8;
+  --secondary-cta-text: #2d2d2d;
+  --accent: #c8703d;
+  --background-accent: #e8e2d8;
 
   /* @layout/border-radius/rounded */
   --radius: 1rem;

src/pages/HomePage.tsx

@@ -1,14 +1,20 @@
+// AUTO-GENERATED shell by per-section-migrate.
+// Section bodies live in ./<PageBase>/sections/<X>.tsx. Edit the section
+// files directly. Non-block content (wrappers, non-inlinable sections) is
+// preserved inline; extracted section blocks become <XSection/> refs.
+
 import { motion } from "motion/react";
 import { StyleProvider } from "@/components/ui/StyleProvider";
 import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
-import HeroVideoExpand from "@/components/sections/hero/HeroVideoExpand";
-import AboutParallax from "@/components/sections/about/AboutParallax";
-import FeaturesAttributeCards from "@/components/sections/features/FeaturesAttributeCards";
-import FeaturesMediaGrid from "@/components/sections/features/FeaturesMediaGrid";
-import FeaturesRevealCardsBento from "@/components/sections/features/FeaturesRevealCardsBento";
-import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+import React from 'react';
+import HeroSection from './HomePage/sections/Hero';
+import AboutSection from './HomePage/sections/About';
+import RoomsSection from './HomePage/sections/Rooms';
+import AmenitiesSection from './HomePage/sections/Amenities';
+import JourneysSection from './HomePage/sections/Journeys';
+import ContactSection from './HomePage/sections/Contact';
 
-export default function HomePage() {
+export default function HomePage(): React.JSX.Element {
   return (
 <StyleProvider siteBackground="none" heroBackground="none" buttonVariant="default">
         <SiteBackgroundSlot />
@@ -22,90 +28,17 @@ export default function HomePage() {
           
         </motion.div>
 
-        <div id="hero" data-section="hero">
-          <HeroVideoExpand
-            title="Aurion"
-            videoSrc="https://storage.googleapis.com/webild/default/templates/hotel/hero.mp4"
-            primaryButton={{ text: "Browse rooms", href: "#rooms" }}
-            secondaryButton={{ text: "Watch tour", href: "#tour" }}
-          />
-        </div>
+        <HeroSection />
 
-        <div id="about" data-section="about">
-          <AboutParallax
-            tag="About"
-            title="A Sanctuary for Wellness & Rejuvenation"
-            description="From private fitness studios to guided meditation sessions, our amenities are designed to enhance your well-being and foster a sense of harmony."
-            frontImageSrc="https://storage.googleapis.com/webild/default/templates/hotel/about/magnific_recreate-this-in-higher-q_te7wx9evnr.webp"
-            backImageSrc="https://storage.googleapis.com/webild/default/templates/hotel/amenities/pool.jpg"
-            badge="Est. 1844"
-          />
-        </div>
+        <AboutSection />
 
-        <div id="rooms" data-section="rooms">
-          <FeaturesAttributeCards
-            tag="Rooms & Suites"
-            title="Featured Rooms"
-            description="Each room is a sanctuary of refined comfort, designed with meticulous attention to detail."
-            items={[
-              { title: "The Grand Suite", tags: "Panoramic, Terrace, Italian", badge: "Guest Favourite", details: [{ icon: "Bed", label: "Beds", value: 2 }, { icon: "Bath", label: "Baths", value: 2 }, { icon: "Maximize2", label: "Sqft", value: 1450 }], imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/rooms/grandsuite.webp" },
-              { title: "Ocean Pavilion", tags: "Oceanfront, Serene, Bright", badge: null, details: [{ icon: "Bed", label: "Beds", value: 1 }, { icon: "Bath", label: "Baths", value: 1 }, { icon: "Maximize2", label: "Sqft", value: 980 }], imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/rooms/oceanpavillion.webp" },
-              { title: "Garden Villa", tags: "Garden, Pool, Outdoor Living", badge: "Most Popular", details: [{ icon: "Bed", label: "Beds", value: 3 }, { icon: "Bath", label: "Baths", value: 2 }, { icon: "Maximize2", label: "Sqft", value: 2200 }], imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/rooms/gardenvilla.webp" },
-              { title: "Presidential Suite", tags: "Expansive, Chef Kitchen, Butler", badge: "Guest Favourite", details: [{ icon: "Bed", label: "Beds", value: 3 }, { icon: "Bath", label: "Baths", value: 3 }, { icon: "Maximize2", label: "Sqft", value: 3400 }], imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/rooms/presidential-suite.webp" },
-              { title: "Heritage Room", tags: "Classic, Restored, Elegant", badge: null, details: [{ icon: "Bed", label: "Beds", value: 1 }, { icon: "Bath", label: "Baths", value: 1 }, { icon: "Maximize2", label: "Sqft", value: 850 }], imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/rooms/heritage-room.webp" },
-              { title: "Spa Retreat", tags: "Sauna, Soaking Tub, Wellness", badge: null, details: [{ icon: "Bed", label: "Beds", value: 2 }, { icon: "Bath", label: "Baths", value: 2 }, { icon: "Maximize2", label: "Sqft", value: 1600 }], imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/rooms/sparetreat.jpg" },
-            ]}
-          />
-        </div>
+        <RoomsSection />
 
-        <div id="experience" data-section="amenities">
-          <FeaturesMediaGrid
-            tag="Amenities"
-            title="World-Class Experiences"
-            description="Every detail has been considered to create moments of extraordinary comfort and indulgence."
-            items={[
-              { title: "Infinity Pool", description: "Heated oceanfront pool with panoramic sunset views", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/pool.jpg" },
-              { title: "Private Spa", description: "Full-service wellness centre with bespoke treatments", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/spa.webp" },
-              { title: "Fine Dining", description: "Michelin-starred cuisine with locally sourced ingredients", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/finedining.jpg" },
-              { title: "Fitness Studio", description: "State-of-the-art equipment and personal training", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/fitnessstudio.webp" },
-              { title: "Concierge", description: "24-hour dedicated service for every request", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/concierge.jpg" },
-            ]}
-          />
-        </div>
+        <AmenitiesSection />
 
-        <div id="journeys" data-section="journeys">
-          <FeaturesRevealCardsBento
-            tag="Journeys"
-            title="The Journeys"
-            description="Exclusive experiences curated for Aurion guests — from cloud forests to volcanic coastlines across Costa Rica's most breathtaking landscapes."
-            items={[
-              { title: "Cloud Forest Expedition", description: "A private guided trek through Monteverde's misty canopy — hanging bridges, rare wildlife encounters, and a chef-prepared dinner in a hidden clearing.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/cloudforestexpedition.jpg" },
-              { title: "Volcanic Hot Springs", description: "Exclusive access to secluded thermal pools fed by Arenal Volcano, paired with a volcanic mud ritual and open-air massage.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/volcanichotsprings.webp" },
-              { title: "Pacific Coast Sailing", description: "A full-day private catamaran journey along the Guanacaste coastline — snorkeling, whale watching, and sunset cocktails aboard.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/sailing.webp" },
-              { title: "Rainforest Immersion", description: "Descend into Osa Peninsula's pristine jungle for a two-day wildlife retreat with naturalist guides and a treehouse overnight stay.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/rainforestimmersion.webp" },
-              { title: "Coffee Origin Trail", description: "Travel to the highlands of the Central Valley for an intimate single-origin coffee experience — from harvest to private tasting.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/coffeetrail.webp" },
-              { title: "Sunset Safari", description: "An exclusive evening wildlife drive through private reserves, ending with a starlit dinner in the savanna.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/safari.webp" },
-              { title: "Marine Sanctuary", description: "Dive into crystal-clear waters for a guided snorkeling experience among vibrant coral reefs and sea turtles.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/marinesacntuary.webp" },
-            ]}
-          />
-        </div>
+        <JourneysSection />
 
-        <div id="contact" data-section="contact">
-          <ContactSplitForm
-            tag="Contact"
-            title="Book Your Stay"
-            description="Let us help you plan the perfect getaway. Our concierge team is available to assist with reservations and special requests."
-            inputs={[
-              { name: "name", type: "text", placeholder: "Full Name", required: true },
-              { name: "email", type: "email", placeholder: "Email Address", required: true },
-              { name: "phone", type: "tel", placeholder: "Phone Number" },
-              { name: "dates", type: "text", placeholder: "Preferred Dates" },
-            ]}
-            textarea={{ name: "message", placeholder: "Special Requests or Questions", rows: 4 }}
-            buttonText="Send Inquiry"
-            imageSrc="https://storage.googleapis.com/webild/default/templates/hotel/contact/bookyourstay.webp"
-          />
-        </div>
+        <ContactSection />
 
         
       </StyleProvider>

src/pages/HomePage/sections/About.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import { useRef } from "react";
+import { motion, useScroll, useTransform } from "motion/react";
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+
+type AboutParallaxProps = {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  badge?: string;
+} & ({ frontImageSrc: string; frontVideoSrc?: never } | { frontVideoSrc: string; frontImageSrc?: never }) &
+  ({ backImageSrc: string; backVideoSrc?: never } | { backVideoSrc: string; backImageSrc?: never });
+
+const AboutInline = () => {
+  const sectionRef = useRef<HTMLDivElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: sectionRef,
+    offset: ["start end", "end start"],
+  });
+
+  const fgY = useTransform(scrollYProgress, [0, 1], ["120px", "-120px"]);
+  const bgY = useTransform(scrollYProgress, [0, 1], ["-60px", "60px"]);
+  const bgScale = useTransform(scrollYProgress, [0, 1], [1, 1.15]);
+
+  return (
+    <section
+      ref={sectionRef}
+      aria-label="About section"
+      className="relative py-20"
+    >
+      <div className="mx-auto w-content-width">
+        <div className="flex flex-col md:flex-row items-center gap-8 md:gap-16">
+          <div className="w-full md:w-45/100 flex flex-col gap-3">
+            <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+              <p>{"О нас"}</p>
+            </div>
+            <TextAnimation
+              text={"История и современность"}
+              variant="slide-up"
+              gradientText={true}
+              tag="h2"
+              className="text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-balance"
+            />
+            <TextAnimation
+              text={"История здания неразрывно связана с историей города. Мы сохранили масштаб и величие советской архитектуры, наполнив её теплом, человечностью и современным комфортом. Это больше, чем отель — это ваш дом в центре Ростова."}
+              variant="slide-up"
+              gradientText={false}
+              tag="p"
+              className="md:max-w-8/10 text-lg md:text-xl leading-snug text-balance"
+            />
+            
+            <div className="space-y-6 mt-8 border-l-2 border-accent/20 pl-6">
+              <div className="relative">
+                <div className="absolute -left-[33px] top-1 w-4 h-4 rounded-full bg-primary-cta"></div>
+                <h3 className="text-xl font-serif text-foreground">1930-е</h3>
+                <p className="text-accent mt-1 text-sm">Основание и строительство знакового для города здания.</p>
+              </div>
+              <div className="relative">
+                <div className="absolute -left-[33px] top-1 w-4 h-4 rounded-full bg-primary-cta"></div>
+                <h3 className="text-xl font-serif text-foreground">1970-е</h3>
+                <p className="text-accent mt-1 text-sm">Масштабная реконструкция с сохранением исторического фасада.</p>
+              </div>
+              <div className="relative">
+                <div className="absolute -left-[33px] top-1 w-4 h-4 rounded-full bg-primary-cta"></div>
+                <h3 className="text-xl font-serif text-foreground">Наши дни</h3>
+                <p className="text-accent mt-1 text-sm">Современное гостеприимство в исторических стенах.</p>
+              </div>
+            </div>
+            {(undefined || undefined) && (
+              <div className="flex flex-wrap gap-3 mt-2 md:mt-3">
+                {undefined && <Button text={undefined.text} href={undefined.href} variant="primary"/>}
+                {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+              </div>
+            )}
+          </div>
+
+          <div className="w-full md:w-55/100 relative h-100 md:h-125 xl:h-150 2xl:h-175">
+            <div className="absolute top-0 right-0 w-75/100 h-full overflow-hidden rounded">
+              <motion.div className="w-full h-full" style={{ y: bgY, scale: bgScale }}>
+                <ImageOrVideo imageSrc={"https://images.unsplash.com/photo-1582719478250-c89400bb1536?auto=format&fit=crop&q=80&w=2070"} className="rounded" />
+              </motion.div>
+              {"С 1930-х годов" && (
+                <span className="absolute top-2 right-2 xl:top-3 xl:right-3 2xl:top-4 2xl:right-4 px-3 py-1.5 text-xs text-foreground font-medium card rounded">
+                  {"С 1930-х годов"}
+                </span>
+              )}
+            </div>
+
+            <motion.div
+              className="absolute top-15/100 left-0 w-65/100 h-70/100 z-10 overflow-hidden rounded"
+              style={{ y: fgY }}
+            >
+              <ImageOrVideo imageSrc={"https://images.unsplash.com/photo-1564501049412-61c2a3083791?auto=format&fit=crop&q=80&w=2070"} className="rounded" />
+            </motion.div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default function AboutSection() {
+  return (
+    <div data-webild-section="about" id="about">
+      <AboutInline />
+    </div>
+  );
+}

src/pages/HomePage/sections/Amenities.tsx

@@ -0,0 +1,24 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "amenities" section.
+
+import React from 'react';
+import FeaturesMediaGrid from "@/components/sections/features/FeaturesMediaGrid";
+
+export default function AmenitiesSection(): React.JSX.Element {
+  return (
+    <div id="experience" data-section="amenities">
+              <FeaturesMediaGrid
+                tag="Amenities"
+                title="World-Class Experiences"
+                description="Every detail has been considered to create moments of extraordinary comfort and indulgence."
+                items={[
+                  { title: "Infinity Pool", description: "Heated oceanfront pool with panoramic sunset views", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/pool.jpg" },
+                  { title: "Private Spa", description: "Full-service wellness centre with bespoke treatments", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/spa.webp" },
+                  { title: "Fine Dining", description: "Michelin-starred cuisine with locally sourced ingredients", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/finedining.jpg" },
+                  { title: "Fitness Studio", description: "State-of-the-art equipment and personal training", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/fitnessstudio.webp" },
+                  { title: "Concierge", description: "24-hour dedicated service for every request", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/amenities/concierge.jpg" },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Contact.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "contact" section.
+
+import React from 'react';
+import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
+
+export default function ContactSection(): React.JSX.Element {
+  return (
+    <div id="contact" data-section="contact">
+              <ContactSplitForm
+                tag="Contact"
+                title="Book Your Stay"
+                description="Let us help you plan the perfect getaway. Our concierge team is available to assist with reservations and special requests."
+                inputs={[
+                  { name: "name", type: "text", placeholder: "Full Name", required: true },
+                  { name: "email", type: "email", placeholder: "Email Address", required: true },
+                  { name: "phone", type: "tel", placeholder: "Phone Number" },
+                  { name: "dates", type: "text", placeholder: "Preferred Dates" },
+                ]}
+                textarea={{ name: "message", placeholder: "Special Requests or Questions", rows: 4 }}
+                buttonText="Send Inquiry"
+                imageSrc="https://storage.googleapis.com/webild/default/templates/hotel/contact/bookyourstay.webp"
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Hero.tsx

@@ -0,0 +1,19 @@
+// Created by add_section_from_catalog (HeroOverlay).
+
+import React from 'react';
+import HeroOverlay from '@/components/sections/hero/HeroOverlay';
+
+export default function HeroSection(): React.JSX.Element {
+  return (
+    <div data-webild-section="hero" id="hero">
+      <HeroOverlay
+        title="Сердце Ростова. С 1930-х"
+        imageSrc="https://picsum.photos/seed/7078637/1200/800"
+        secondaryButton={{"href":"#about","text":"О нас"}}
+        primaryButton={{"text":"Забронировать","href":"#rooms"}}
+        tag="Marins Park Hotel"
+        description="Крупнейший конгресс-отель Ростовской области. Современное гостеприимство в историческом здании."
+      />
+    </div>
+  );
+}

src/pages/HomePage/sections/Journeys.tsx

@@ -0,0 +1,26 @@
+// AUTO-GENERATED by per-section-migrate. Edit freely — Bob will treat this
+// file as the canonical source for the "journeys" section.
+
+import React from 'react';
+import FeaturesRevealCardsBento from "@/components/sections/features/FeaturesRevealCardsBento";
+
+export default function JourneysSection(): React.JSX.Element {
+  return (
+    <div id="journeys" data-section="journeys">
+              <FeaturesRevealCardsBento
+                tag="Journeys"
+                title="The Journeys"
+                description="Exclusive experiences curated for Aurion guests — from cloud forests to volcanic coastlines across Costa Rica's most breathtaking landscapes."
+                items={[
+                  { title: "Cloud Forest Expedition", description: "A private guided trek through Monteverde's misty canopy — hanging bridges, rare wildlife encounters, and a chef-prepared dinner in a hidden clearing.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/cloudforestexpedition.jpg" },
+                  { title: "Volcanic Hot Springs", description: "Exclusive access to secluded thermal pools fed by Arenal Volcano, paired with a volcanic mud ritual and open-air massage.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/volcanichotsprings.webp" },
+                  { title: "Pacific Coast Sailing", description: "A full-day private catamaran journey along the Guanacaste coastline — snorkeling, whale watching, and sunset cocktails aboard.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/sailing.webp" },
+                  { title: "Rainforest Immersion", description: "Descend into Osa Peninsula's pristine jungle for a two-day wildlife retreat with naturalist guides and a treehouse overnight stay.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/rainforestimmersion.webp" },
+                  { title: "Coffee Origin Trail", description: "Travel to the highlands of the Central Valley for an intimate single-origin coffee experience — from harvest to private tasting.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/coffeetrail.webp" },
+                  { title: "Sunset Safari", description: "An exclusive evening wildlife drive through private reserves, ending with a starlit dinner in the savanna.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/safari.webp" },
+                  { title: "Marine Sanctuary", description: "Dive into crystal-clear waters for a guided snorkeling experience among vibrant coral reefs and sea turtles.", href: "#", imageSrc: "https://storage.googleapis.com/webild/default/templates/hotel/journeys/marinesacntuary.webp" },
+                ]}
+              />
+            </div>
+  );
+}

src/pages/HomePage/sections/Rooms.tsx

@@ -0,0 +1,189 @@
+/* eslint-disable */
+// @ts-nocheck — generated by catalog-eject; runtime-correct but TS strict-mode false-positives on inlined catalog body
+import Button from "@/components/ui/Button";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { resolveIcon } from "@/utils/resolve-icon";
+import type { LucideIcon } from "lucide-react";
+
+const primaryButton = {
+  href: "#booking",
+  text: "Забронировать"
+};
+const items = [
+  {
+    tags: "Комфорт, Рабочая зона, Wi-Fi",
+    badge: "Популярный",
+    details: [
+      {
+        icon: "Bed",
+        value: "1 или 2",
+        label: "Кровати"
+      },
+      {
+        icon: "Maximize2",
+        value: "22 кв.м",
+        label: "Площадь"
+      }
+    ],
+    title: "Стандарт",
+    imageSrc: "https://picsum.photos/seed/1615501060/1200/800"
+  },
+  {
+    tags: "Панорамные окна, Зона отдыха",
+    imageSrc: "https://picsum.photos/seed/1852845633/1200/800",
+    details: [
+      {
+        value: "1 большая",
+        icon: "Bed",
+        label: "Кровати"
+      },
+      {
+        label: "Площадь",
+        value: "35 кв.м",
+        icon: "Maximize2"
+      }
+    ],
+    title: "Улучшенный",
+    badge: null
+  },
+  {
+    title: "Люкс",
+    details: [
+      {
+        icon: "Bed",
+        value: "1 King Size",
+        label: "Кровати"
+      },
+      {
+        label: "Площадь",
+        value: "55 кв.м",
+        icon: "Maximize2"
+      }
+    ],
+    imageSrc: "https://picsum.photos/seed/406048484/1200/800",
+    badge: "Выбор гостей",
+    tags: "Гостиная, Ванна, Премиум косметика"
+  },
+  {
+    tags: "Кухня, Кабинет, Вид на город",
+    badge: null,
+    details: [
+      {
+        label: "Кровати",
+        icon: "Bed",
+        value: "2 спальни"
+      },
+      {
+        label: "Площадь",
+        icon: "Maximize2",
+        value: "80 кв.м"
+      }
+    ],
+    title: "Апартаменты",
+    imageSrc: "https://picsum.photos/seed/1341155136/1200/800"
+  }
+];
+
+type AttributeDetail = {
+  icon: string | LucideIcon;
+  label: string;
+  value: string | number;
+};
+
+type FeatureItem = {
+  title: string;
+  tags: string;
+  badge?: string | null;
+  details: AttributeDetail[];
+} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never });
+
+interface FeaturesAttributeCardsProps {
+  tag: string;
+  title: string;
+  description: string;
+  primaryButton?: { text: string; href: string };
+  secondaryButton?: { text: string; href: string };
+  items: FeatureItem[];
+}
+
+const RoomsInline = () => {
+  return (
+    <section aria-label="Features attribute cards section" className="py-20">
+      <div className="flex flex-col gap-8 md:gap-10">
+        <div className="flex flex-col items-center w-content-width mx-auto gap-2">
+          <div className="px-3 py-1 mb-1 text-sm card rounded w-fit">
+            <p>{"Номера"}</p>
+          </div>
+
+          <TextAnimation
+            text={"Ваш дом в Ростове"}
+            variant="slide-up"
+            gradientText={true}
+            tag="h2"
+            className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance"
+          />
+
+          <TextAnimation
+            text={"Просторные номера с высокими потолками, большими окнами и современным дизайном. Идеально для отдыха и работы."}
+            variant="slide-up"
+            gradientText={false}
+            tag="p"
+            className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance"
+          />
+
+          {(primaryButton || undefined) && (
+            <div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3">
+              {primaryButton && <Button text={primaryButton.text} href={primaryButton.href} variant="primary"/>}
+              {undefined && <Button text={undefined.text} href={undefined.href} variant="secondary" animationDelay={0.1} />}
+            </div>
+          )}
+        </div>
+
+        <ScrollReveal variant="slide-up">
+          <div className="w-content-width mx-auto grid grid-cols-1 md:grid-cols-3 gap-5">
+            {items.map((item) => (
+              <div key={item.title} className="group flex flex-col gap-2 xl:gap-3 2xl:gap-4 h-full rounded">
+                <div className="relative aspect-4/3 overflow-hidden rounded">
+                  <ImageOrVideo imageSrc={item.imageSrc} videoSrc={item.videoSrc} className="rounded group-hover:scale-105 transition-transform duration-500" />
+                  {item.badge && (
+                    <span className="absolute top-2 left-2 xl:top-3 xl:left-3 2xl:top-4 2xl:left-4 px-3 py-1 text-sm text-foreground font-medium card rounded">
+                      {item.badge}
+                    </span>
+                  )}
+                </div>
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-2xl font-semibold leading-snug">{item.title}</h3>
+                  <p className="text-base leading-snug">{item.tags}</p>
+                  <div className="flex items-center gap-3 text-base mt-0.5">
+                    {item.details.map((detail) => {
+                      const IconComponent = resolveIcon(detail.icon);
+                      return (
+                        <span key={detail.label} className="flex items-center gap-1">
+                          <IconComponent className="size-[1em]" strokeWidth={1.5} />
+                          {detail.label}: {detail.value}
+                        </span>
+                      );
+                    })}
+                  </div>
+                  <div className="mt-4">
+                    <Button text="Забронировать" href="#booking" variant="primary" className="w-full" />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ScrollReveal>
+      </div>
+    </section>
+  );
+};
+
+export default function RoomsSection() {
+  return (
+    <div data-webild-section="rooms" id="rooms">
+      <RoomsInline />
+    </div>
+  );
+}