From 9c5b8e6e4a72a705833178df1bbbeb142df49ae8 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 5 Oct 2025 02:29:25 +0000 Subject: [PATCH 1/3] feat: Add vacation rental highlights page Co-authored-by: wilsonvijaysequeira --- vacation-rental-highlights.html | 397 ++++++++++++++++++++++++++++++++ 1 file changed, 397 insertions(+) create mode 100644 vacation-rental-highlights.html diff --git a/vacation-rental-highlights.html b/vacation-rental-highlights.html new file mode 100644 index 0000000..a08a18d --- /dev/null +++ b/vacation-rental-highlights.html @@ -0,0 +1,397 @@ + + + + + + East Sooke Vacation Rental Highlights + + + +
+
+

Highlights of Your Stay

+
+ +
+
+
+
+ 🌊 +
Relax & Rejuvenate
+
Outdoor sauna + BBQ dining
+
+ +
+ ☕ +
Well-Stocked Kitchens
+
Coffee, tea, spices, and cooking oil provided
+
+ +
+ 🐚 +
Nature & Wildlife
+
Explore nearby trails, beaches, and East Sooke Regional Park
+
+ +
+ 👨‍👩‍👧‍👦 +
Spacious Design
+
Main dining area seats 10 comfortably
+
+ +
+ ♿ +
Accessibility
+
Step-free entry to the main level
+
+ +
+ 🧘 +
Wellness Retreat
+
A tranquil setting for yoga, meditation, or simply unwinding
+
+
+
+ +
+

Perfect For

+
+
+ ✔ + East Sooke family vacations +
+ +
+ ✔ + Friends' getaways on Vancouver Island +
+ +
+ ✔ + Wellness retreats surrounded by nature +
+ +
+ ✔ + Memorable reunions and celebrations +
+
+
+ +
+
+ 🌊 Book your East Sooke oceanfront escape today and create cherished memories on Vancouver Island's stunning West Coast. +
+ Book Now +
+
+
+ + \ No newline at end of file From 57464e18402693025aa8efcf133eb7d8872bc600 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 5 Oct 2025 02:35:33 +0000 Subject: [PATCH 2/3] Refactor: Improve vacation rental highlights page styling Co-authored-by: wilsonvijaysequeira --- vacation-rental-highlights.html | 415 ++++++++++++++++++-------------- 1 file changed, 238 insertions(+), 177 deletions(-) diff --git a/vacation-rental-highlights.html b/vacation-rental-highlights.html index a08a18d..0ea823e 100644 --- a/vacation-rental-highlights.html +++ b/vacation-rental-highlights.html @@ -13,36 +13,24 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; - line-height: 1.6; + line-height: 1.5; color: #2c3e50; - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 20px; + background: transparent; + padding: 0; } .container { - max-width: 1200px; + max-width: 100%; margin: 0 auto; background: #ffffff; - border-radius: 24px; - box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); + border-radius: 16px; + box-shadow: 0 10px 40px rgba(17, 109, 255, 0.15); overflow: hidden; - animation: fadeIn 0.8s ease-out; - } - - @keyframes fadeIn { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } } .header { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 60px 40px; + background: linear-gradient(135deg, #116dff 0%, #3899ec 100%); + padding: 30px 25px; text-align: center; color: white; position: relative; @@ -52,263 +40,284 @@ .header::before { content: ''; position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - background: url('data:image/svg+xml,') no-repeat bottom; - background-size: cover; - opacity: 0.3; + top: -50%; + right: -10%; + width: 300px; + height: 300px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; + } + + .header::after { + content: ''; + position: absolute; + bottom: -30%; + left: -5%; + width: 200px; + height: 200px; + background: rgba(255, 255, 255, 0.1); + border-radius: 50%; } .header h1 { - font-size: 2.8rem; + font-size: 1.8rem; font-weight: 700; - margin-bottom: 10px; position: relative; z-index: 1; - text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .content { - padding: 60px 40px; - } - - .section { - margin-bottom: 50px; - } - - .section-title { - font-size: 2rem; - font-weight: 700; - color: #667eea; - margin-bottom: 30px; - text-align: center; - position: relative; - padding-bottom: 15px; - } - - .section-title::after { - content: ''; - position: absolute; - bottom: 0; - left: 50%; - transform: translateX(-50%); - width: 80px; - height: 4px; - background: linear-gradient(90deg, #667eea, #764ba2); - border-radius: 2px; + padding: 35px 25px; } .highlights-grid { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 25px; - margin-bottom: 40px; + grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); + gap: 18px; + margin-bottom: 30px; } .highlight-card { - background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); - padding: 30px; - border-radius: 16px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + display: flex; + align-items: flex-start; + gap: 15px; + background: #f8fbff; + padding: 20px; + border-radius: 12px; + border-left: 4px solid #116dff; + box-shadow: 0 2px 10px rgba(17, 109, 255, 0.08); transition: all 0.3s ease; - animation: slideIn 0.6s ease-out forwards; - opacity: 0; } - @keyframes slideIn { - to { - opacity: 1; - } + .highlight-card:hover { + transform: translateX(5px); + box-shadow: 0 4px 20px rgba(17, 109, 255, 0.15); + background: #ffffff; } - .highlight-card:nth-child(1) { animation-delay: 0.1s; } - .highlight-card:nth-child(2) { animation-delay: 0.2s; } - .highlight-card:nth-child(3) { animation-delay: 0.3s; } - .highlight-card:nth-child(4) { animation-delay: 0.4s; } - .highlight-card:nth-child(5) { animation-delay: 0.5s; } - .highlight-card:nth-child(6) { animation-delay: 0.6s; } + .highlight-icon { + flex-shrink: 0; + width: 45px; + height: 45px; + background: linear-gradient(135deg, #116dff, #3899ec); + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0 4px 12px rgba(17, 109, 255, 0.3); + } - .highlight-card:hover { - transform: translateY(-8px); - box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3); - background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%); + .highlight-icon svg { + width: 24px; + height: 24px; + fill: white; } - .highlight-icon { - font-size: 2.5rem; - margin-bottom: 15px; - display: block; + .highlight-content { + flex: 1; } .highlight-title { - font-size: 1.3rem; + font-size: 1.05rem; font-weight: 700; - color: #667eea; - margin-bottom: 10px; + color: #116dff; + margin-bottom: 5px; } .highlight-desc { - font-size: 1rem; - color: #5a6c7d; - line-height: 1.5; + font-size: 0.9rem; + color: #5f6360; + line-height: 1.4; } .perfect-for { - background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - padding: 50px; - border-radius: 20px; - color: white; - margin-bottom: 40px; + background: linear-gradient(135deg, #ff8c00 0%, #ff6b35 100%); + padding: 30px 25px; + border-radius: 12px; + margin-bottom: 25px; + box-shadow: 0 4px 20px rgba(255, 140, 0, 0.25); } - .perfect-for .section-title { + .section-title { + font-size: 1.5rem; + font-weight: 700; color: white; - margin-bottom: 30px; - } - - .perfect-for .section-title::after { - background: white; + margin-bottom: 20px; + text-align: center; } .perfect-list { display: grid; - grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: 12px; } .perfect-item { display: flex; align-items: center; - gap: 15px; - padding: 20px; - background: rgba(255, 255, 255, 0.15); - border-radius: 12px; + gap: 12px; + padding: 14px 18px; + background: rgba(255, 255, 255, 0.2); + border-radius: 8px; backdrop-filter: blur(10px); transition: all 0.3s ease; - border: 1px solid rgba(255, 255, 255, 0.2); + border: 1px solid rgba(255, 255, 255, 0.3); } .perfect-item:hover { - background: rgba(255, 255, 255, 0.25); - transform: translateX(5px); + background: rgba(255, 255, 255, 0.3); + transform: translateX(3px); } .perfect-icon { - font-size: 1.5rem; flex-shrink: 0; + width: 24px; + height: 24px; + background: white; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + } + + .perfect-icon svg { + width: 14px; + height: 14px; + fill: #ff8c00; } .perfect-text { - font-size: 1.1rem; - font-weight: 500; - line-height: 1.4; + font-size: 0.95rem; + font-weight: 600; + color: white; + line-height: 1.3; } .cta-section { text-align: center; - padding: 40px; - background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); - border-radius: 20px; - color: white; + padding: 30px 25px; + background: linear-gradient(135deg, #116dff 0%, #3899ec 100%); + border-radius: 12px; + position: relative; + overflow: hidden; + } + + .cta-section::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: url('data:image/svg+xml,') no-repeat bottom; + background-size: cover; + } + + .cta-content { + position: relative; + z-index: 1; } .cta-text { - font-size: 1.4rem; + font-size: 1.1rem; font-weight: 600; - line-height: 1.6; - margin-bottom: 25px; - text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); + line-height: 1.5; + margin-bottom: 20px; + color: white; } .cta-button { display: inline-block; - padding: 16px 40px; + padding: 14px 35px; background: white; - color: #f5576c; + color: #116dff; text-decoration: none; border-radius: 50px; font-weight: 700; - font-size: 1.1rem; + font-size: 1rem; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .cta-button:hover { - transform: scale(1.05); + transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.3); - background: #fff5f7; + background: #ff8c00; + color: white; } /* Responsive Design */ @media (max-width: 768px) { - body { - padding: 10px; - } - .header { - padding: 40px 20px; + padding: 25px 20px; } .header h1 { - font-size: 2rem; + font-size: 1.5rem; } .content { - padding: 40px 20px; - } - - .section-title { - font-size: 1.6rem; + padding: 30px 20px; } .highlights-grid { grid-template-columns: 1fr; - gap: 20px; + gap: 15px; } .perfect-for { - padding: 30px 20px; + padding: 25px 20px; + } + + .section-title { + font-size: 1.3rem; } .perfect-list { grid-template-columns: 1fr; + gap: 10px; } .cta-section { - padding: 30px 20px; + padding: 25px 20px; } .cta-text { - font-size: 1.2rem; + font-size: 1rem; } .cta-button { - padding: 14px 30px; - font-size: 1rem; + padding: 12px 28px; + font-size: 0.95rem; } } @media (max-width: 480px) { .header h1 { - font-size: 1.6rem; + font-size: 1.3rem; } - .section-title { - font-size: 1.4rem; + .highlight-card { + padding: 16px; } - .highlight-card { - padding: 20px; + .highlight-icon { + width: 40px; + height: 40px; + } + + .highlight-icon svg { + width: 20px; + height: 20px; } .highlight-title { - font-size: 1.1rem; + font-size: 0.95rem; } .highlight-desc { - font-size: 0.95rem; + font-size: 0.85rem; } } @@ -320,77 +329,129 @@

Highlights of Your Stay

-
-
-
- 🌊 +
+
+
+ + + +
+
Relax & Rejuvenate
Outdoor sauna + BBQ dining
+
-
- ☕ +
+
+ + + +
+
Well-Stocked Kitchens
Coffee, tea, spices, and cooking oil provided
+
-
- 🐚 +
+
+ + + +
+
Nature & Wildlife
Explore nearby trails, beaches, and East Sooke Regional Park
+
-
- 👨‍👩‍👧‍👦 +
+
+ + + +
+
Spacious Design
Main dining area seats 10 comfortably
+
-
- ♿ +
+
+ + + +
+
Accessibility
Step-free entry to the main level
+
-
- 🧘 +
+
+ + + +
+
Wellness Retreat
A tranquil setting for yoga, meditation, or simply unwinding
-
+
-
+

Perfect For

- ✔ +
+ + + +
East Sooke family vacations
- ✔ +
+ + + +
Friends' getaways on Vancouver Island
- ✔ +
+ + + +
Wellness retreats surrounded by nature
- ✔ +
+ + + +
Memorable reunions and celebrations
-
+ -
-
- 🌊 Book your East Sooke oceanfront escape today and create cherished memories on Vancouver Island's stunning West Coast. +
+
+
+ Book your East Sooke oceanfront escape today and create cherished memories on Vancouver Island's stunning West Coast. +
+ Book Your Stay
- Book Now -
+ From 52c7a8abc069ffd374189f3a701f824d88a72965 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 5 Oct 2025 02:40:05 +0000 Subject: [PATCH 3/3] Refactor: Update vacation rental highlights styling Co-authored-by: wilsonvijaysequeira --- vacation-rental-highlights.html | 104 +++++++++++++++++++------------- 1 file changed, 61 insertions(+), 43 deletions(-) diff --git a/vacation-rental-highlights.html b/vacation-rental-highlights.html index 0ea823e..ceab7f9 100644 --- a/vacation-rental-highlights.html +++ b/vacation-rental-highlights.html @@ -24,12 +24,12 @@ margin: 0 auto; background: #ffffff; border-radius: 16px; - box-shadow: 0 10px 40px rgba(17, 109, 255, 0.15); + box-shadow: 0 10px 40px rgba(71, 187, 193, 0.15); overflow: hidden; } .header { - background: linear-gradient(135deg, #116dff 0%, #3899ec 100%); + background: linear-gradient(135deg, #47BBC1 0%, #5fcfd4 100%); padding: 30px 25px; text-align: center; color: white; @@ -85,14 +85,14 @@ background: #f8fbff; padding: 20px; border-radius: 12px; - border-left: 4px solid #116dff; - box-shadow: 0 2px 10px rgba(17, 109, 255, 0.08); + border-left: 4px solid #47BBC1; + box-shadow: 0 2px 10px rgba(71, 187, 193, 0.08); transition: all 0.3s ease; } .highlight-card:hover { transform: translateX(5px); - box-shadow: 0 4px 20px rgba(17, 109, 255, 0.15); + box-shadow: 0 4px 20px rgba(71, 187, 193, 0.15); background: #ffffff; } @@ -100,12 +100,12 @@ flex-shrink: 0; width: 45px; height: 45px; - background: linear-gradient(135deg, #116dff, #3899ec); + background: linear-gradient(135deg, #47BBC1, #5fcfd4); border-radius: 10px; display: flex; align-items: center; justify-content: center; - box-shadow: 0 4px 12px rgba(17, 109, 255, 0.3); + box-shadow: 0 4px 12px rgba(71, 187, 193, 0.3); } .highlight-icon svg { @@ -121,7 +121,7 @@ .highlight-title { font-size: 1.05rem; font-weight: 700; - color: #116dff; + color: #47BBC1; margin-bottom: 5px; } @@ -132,72 +132,87 @@ } .perfect-for { - background: linear-gradient(135deg, #ff8c00 0%, #ff6b35 100%); - padding: 30px 25px; + background: #f8fbff; + padding: 35px 25px; border-radius: 12px; margin-bottom: 25px; - box-shadow: 0 4px 20px rgba(255, 140, 0, 0.25); + border: 2px solid #e0f2f3; } .section-title { font-size: 1.5rem; font-weight: 700; - color: white; - margin-bottom: 20px; + color: #47BBC1; + margin-bottom: 25px; text-align: center; + position: relative; + padding-bottom: 15px; + } + + .section-title::after { + content: ''; + position: absolute; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 3px; + background: linear-gradient(90deg, #47BBC1, #5fcfd4); + border-radius: 2px; } .perfect-list { display: grid; - grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); - gap: 12px; + grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); + gap: 15px; } .perfect-item { display: flex; align-items: center; - gap: 12px; - padding: 14px 18px; - background: rgba(255, 255, 255, 0.2); - border-radius: 8px; - backdrop-filter: blur(10px); + gap: 15px; + padding: 18px 20px; + background: white; + border-radius: 10px; transition: all 0.3s ease; - border: 1px solid rgba(255, 255, 255, 0.3); + border: 2px solid #e0f2f3; + box-shadow: 0 2px 8px rgba(71, 187, 193, 0.08); } .perfect-item:hover { - background: rgba(255, 255, 255, 0.3); - transform: translateX(3px); + border-color: #47BBC1; + transform: translateY(-3px); + box-shadow: 0 4px 15px rgba(71, 187, 193, 0.15); } .perfect-icon { flex-shrink: 0; - width: 24px; - height: 24px; - background: white; - border-radius: 50%; + width: 40px; + height: 40px; + background: linear-gradient(135deg, #47BBC1, #5fcfd4); + border-radius: 8px; display: flex; align-items: center; justify-content: center; } .perfect-icon svg { - width: 14px; - height: 14px; - fill: #ff8c00; + width: 22px; + height: 22px; + fill: white; } .perfect-text { font-size: 0.95rem; font-weight: 600; - color: white; - line-height: 1.3; + color: #2c3e50; + line-height: 1.4; } .cta-section { text-align: center; padding: 30px 25px; - background: linear-gradient(135deg, #116dff 0%, #3899ec 100%); + background: linear-gradient(135deg, #47BBC1 0%, #5fcfd4 100%); border-radius: 12px; position: relative; overflow: hidden; @@ -231,7 +246,7 @@ display: inline-block; padding: 14px 35px; background: white; - color: #116dff; + color: #47BBC1; text-decoration: none; border-radius: 50px; font-weight: 700; @@ -267,7 +282,7 @@ } .perfect-for { - padding: 25px 20px; + padding: 30px 20px; } .section-title { @@ -333,7 +348,8 @@

Highlights of Your Stay

- + +
@@ -357,7 +373,7 @@

Highlights of Your Stay

- +
@@ -369,7 +385,7 @@

Highlights of Your Stay

- +
@@ -381,7 +397,7 @@

Highlights of Your Stay

- +
@@ -394,6 +410,8 @@

Highlights of Your Stay

+ +
@@ -409,7 +427,7 @@

Perfect For

- +
East Sooke family vacations @@ -418,7 +436,7 @@

Perfect For

- +
Friends' getaways on Vancouver Island @@ -427,7 +445,7 @@

Perfect For

- +
Wellness retreats surrounded by nature @@ -436,7 +454,7 @@

Perfect For

- +
Memorable reunions and celebrations