feat:(SW-219): content card component WIP

components/ContentType/HotelPage/Rooms/RoomCard/index.tsx

@@ -74,7 +74,7 @@ export function RoomCard({
           onClick={handleRoomCtaClick}
         >
           {intl.formatMessage({ id: "See room details" })}
-          <ChevronRightIcon className={styles.chevron} />
+          <ChevronRightIcon />
         </Button>
       </div>
     </article>

components/ContentType/HotelPage/hotelPage.module.css

@@ -63,3 +63,10 @@
     align-items: end;
   }
 }
+
+/* Add this to your existing styles */
+.contentCardContainer {
+  margin: var(--Spacing-x4) 0;
+  display: grid;
+  gap: var(--Spacing-x4);
+}

components/ContentType/HotelPage/index.tsx

@@ -1,6 +1,8 @@
 import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
+import ContentCard from "@/components/TempDesignSystem/ContentCard"
+
 import { MOCK_FACILITIES } from "./Facilities/mockData"
 import { setActivityCard } from "./Facilities/utils"
 import DynamicMap from "./Map/DynamicMap"
@@ -65,6 +67,34 @@ export default async function HotelPage() {
         </div>
         <Rooms rooms={roomCategories} />
         <Facilities facilities={facilities} />
+
+        {/* Add ContentCard here */}
+        <ContentCard
+          title="Special Offer"
+          description="Enjoy a luxurious stay with our exclusive package."
+          primaryCTA={{
+            label: "Book Now",
+            href: "/booking",
+          }}
+          secondaryCTA={{
+            label: "Learn More",
+            href: "/offers",
+            openInNewTab: true,
+          }}
+          style="featured"
+          backgroundImage="https://www.scandichotels.com/imageVault/publishedmedia/sixadhu91jy67aal2pla/Scandic_Downtown_Camper_cocktail_lounge_bar_the_ne.jpg"
+        />
+
+        {/* Example of ContentCard with SidePeek */}
+        <ContentCard
+          title="Explore Facilities"
+          description="Discover all the amenities our hotel has to offer."
+          sidePeekCTA={{
+            label: "View Facilities",
+            onClick: true,
+          }}
+          style="default"
+        />
       </main>
       {googleMapsApiKey ? (
         <>