diff --git a/CHANGELOG.md b/CHANGELOG.md index 2fe5f13..8c6194e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,130 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +## [1.1.0] - 2025-12-25 + +### Added - Spa & Wellness style variation and patterns + +**New Style Variation:** +- **Spa & Wellness** - Elegant spa and wellness color scheme with sophisticated typography + - Cormorant Garamond serif font for elegant headings with refined letterforms + - Quicksand sans-serif for clean, friendly body text + - Soothing spa color palette: Teal (#5BBCD6), Ocean Sage (#2D4A4E), soft accent tones + - Three custom duotone presets (Spa Teal, Ocean Sage, High Contrast) + - Three gradient presets (Spa Teal, Ocean Depth, Peaceful Sky) + - Perfect for spas, wellness centers, yoga studios, and health retreats + - Accessible via Appearance > Editor > Styles + +**New Fonts:** +- **Cormorant Garamond** - Elegant serif typeface (variable weight 300-700) with italic variant +- **Quicksand** - Modern rounded sans-serif (variable weight 300-700) +- Self-hosted WOFF2 format for optimal performance + +**New Patterns (13):** + +*Header Patterns (1):* +- **header-top-bar-centered-menu** - Header with centered logo and navigation menu with top bar + - Clean centered layout + - Optional top announcement bar + - Perfect for spa and wellness sites + +*Footer Patterns (1):* +- **footer-with-nav-columns** - Two-column footer with site info/social and multi-column navigation + - Site title, description, and social links on left + - Three navigation columns on right (About, Services, Visit) + - Copyright and legal links at bottom + - Flexible layout for any business type + +*Hero Patterns (1):* +- **spa-home-hero** - Hero section with overlapping colored box on image background + - Dramatic overlapping layout + - Image on left, content box overlaps on right + - Perfect for spa homepages and landing pages + +*Call-to-Action Patterns (1):* +- **spa-booking-cta** - Booking call-to-action with form integration + - Encourages appointment bookings + - Form-ready layout + - Conversion-optimized design + +*Features Patterns (4):* +- **two-column-feature** - Two-column feature section with image and content + - Balanced 50/50 layout + - Image on left, content on right + - Versatile for services, features, about sections +- **overlapping-feature-columns** - Feature columns with overlapping image effect + - Modern overlapping design + - Image overlaps content box + - Creates visual depth and interest +- **overlapping-feature-columns-reversed** - Reversed overlapping feature columns + - Mirror layout of overlapping-feature-columns + - Content on left, image overlaps from right + - Provides layout variety +- **wellness-cover-highlight** - Full-width wellness cover section with highlight box + - Dramatic full-width cover image + - Overlay content box + - Perfect for hero sections and feature highlights + +*Testimonials & Reviews (3):* +- **testimonials-grid** - Three-column testimonial grid with star ratings + - Client testimonials in card layout + - Star ratings for credibility + - Professional presentation +- **two-column-review** - Two-column review section with image and testimonial + - Client photo with testimonial + - Quote-style formatting + - Personal touch for reviews +- **review-text-image-overlap** - Review with overlapping text and image + - Text overlaps image for visual interest + - Modern magazine-style layout + - Engaging testimonial presentation + +*Blog/Posts Patterns (1):* +- **four-column-wellness-posts** - Four-column grid for wellness blog posts + - Compact grid layout + - Perfect for blog archives and related posts + - Optimized for wellness content + +*Shop/E-commerce Patterns (1):* +- **shop-overview-three-columns** - Three-column product grid for spa/wellness shops + - Product showcase layout + - Image-focused cards + - Perfect for WooCommerce integration + +**New Pattern Images:** +- Added spa-focused images in `patterns/images/spa/` directory: + - **Treatment images**: back-massage.webp, spa-treatment-hot-stones.webp, spa-treatment-landscape.webp, spa-treatment-zoomed.webp, yoga-pose.webp + - **Client avatars**: avatar-1.webp, avatar-2.webp, avatar-3.webp, avatar-4.webp, review-profile.webp + - **Product images** (shop subdirectory): bath-salt.webp, massage-oil.webp, serum.webp, supplements.webp + - All images optimized WebP format for fast loading + +**CSS Enhancements:** +- Added overlapping columns styling (`.is-style-overlap-columns`, `.is-style-overlap-columns-reversed`) + - Creates modern overlapping layouts on desktop (min-width: 782px) + - Second column overlaps first by -10% with z-index layering + - Centered vertical alignment for visual balance +- Enhanced spa post grid styling for consistent image display +- Added cart icon styling with hover effects and transitions +- Mobile navigation adjustments for centered logo and menu button + +### Changed - Pattern organization and categories + +- Pattern count increased from 34 to 47 total patterns +- Enhanced pattern library with spa and wellness industry focus +- Improved layout variety with overlapping column techniques +- Better responsive design across all new patterns +- Updated palette tokens to use `primary-alt` and add `primary-alt-accent` across style variations +- Added Spa & Wellness pattern category for easier pattern browsing + +### Technical + +- Total style variations: 5 (Ink & Sand, Teal Bay, Denim Copper, Forest Sage, Spa & Wellness) +- All new patterns follow Elayne design system with theme color tokens +- Variable fonts provide flexible typography and better performance +- Self-hosted fonts ensure GDPR compliance and fast loading +- CSS improvements for modern overlapping layouts +- All content fully translatable with proper text domain + ## [1.0.3] - 2025-12-24 ### Changed - Avatar styling improvements diff --git a/README.md b/README.md index 96cdd14..faac908 100644 --- a/README.md +++ b/README.md @@ -38,25 +38,29 @@ Built by [Jasper Frumau](https://imagewize.com), Elayne empowers businesses to c ### Pattern Library -Elayne includes **34 professionally designed patterns** (plus 17 page and post templates) organized into categories: +Elayne includes **47 professionally designed patterns** (plus 16 page and post templates) organized into categories: **Hero Sections** - Contemporary hero with bold typography (dark variation) - Contemporary hero with bold typography (light variation) - Split background hero with contrasting colors - Hero section with prominent call-to-action +- Overlapping image and content box hero for spa/wellness sites **Headers & Footers** - Mobile-optimized hamburger menu header - Desktop-optimized header with inline navigation +- Header with centered logo and navigation menu with top bar - Professional standard footer - Minimal footer layout +- Two-column footer with site info/social and multi-column navigation **Call-to-Action & Contact** - Newsletter signup with email capture - Contact information display with office hours and location - Two-column contact layout - Modular CTA card component for landing pages, blog sidebars, and conversion-focused sections +- Booking call-to-action with form integration **Features & Services** - Grid layout for feature showcasing @@ -64,12 +68,19 @@ Elayne includes **34 professionally designed patterns** (plus 17 page and post t - Four-column agency services grid with custom icons - Three-column pricing comparison with feature comparison and highlighted recommended plan - Client logos display with responsive grid for social proof +- Two-column feature section with image and content +- Feature columns with overlapping image effect +- Reversed overlapping feature columns +- Full-width wellness cover section with highlight box **Team & Testimonials** - Team member grid with photos and bios - Single testimonial card layout - Enhanced testimonials with ratings and success metrics - Client reviews with profile images +- Three-column testimonial grid with star ratings +- Two-column review section with image and testimonial +- Review with overlapping text and image **Statistics** - Statistics display with visual emphasis @@ -81,6 +92,7 @@ Elayne includes **34 professionally designed patterns** (plus 17 page and post t - List-style blog layout - Featured post two-column layout - Author biography with avatar and social links +- Four-column grid for wellness blog posts **Support & Information** - Collapsible FAQ section with accordion functionality @@ -96,6 +108,9 @@ Elayne includes **34 professionally designed patterns** (plus 17 page and post t **Pages** - Pre-launch or maintenance page with countdown and email capture +**Shop/E-commerce** +- Three-column product grid for spa/wellness shops + **Page Templates** - Full-width page template - Hero page template (no top padding) @@ -120,6 +135,8 @@ Elayne includes **34 professionally designed patterns** (plus 17 page and post t Switch your entire site's look with one click using pre-configured color palettes: +- **Ink & Sand** (Default) - Warm ink blue and sand tones for sophisticated business sites +- **Spa & Wellness** - Soothing teal and ocean sage palette with elegant Cormorant Garamond and friendly Quicksand fonts — perfect for spas, wellness centers, yoga studios, and health retreats - **Gray & Gold** - Sophisticated gray tones with elegant gold accents - **Denim & Copper** - Deep denim blues paired with warm copper highlights - **Forest & Sage** - Natural forest greens with calming sage tones @@ -161,6 +178,54 @@ Powered by theme.json, customize: - Spacing and layout - Block defaults +## Companion Plugin: Elayne Blocks + +Elayne works seamlessly with the **[Elayne Blocks](https://github.com/imagewize/elayne-blocks)** plugin, which provides custom Gutenberg blocks that enhance the theme's capabilities. While these blocks were designed as companions to the Elayne theme, they are **theme-agnostic** and work with any WordPress theme. + +### Why a Separate Plugin? + +WordPress.org Theme Review requirements prohibit custom block registration in themes. By separating blocks into a plugin, we ensure compliance while providing powerful functionality that works across any theme. + +### Available Blocks + +The Elayne Blocks plugin includes **4 custom blocks**: + +1. **Mega Menu Block** (`elayne/mega-menu`) + - Advanced navigation with mega menu functionality + - WordPress Interactivity API integration + - Template part support for dynamic content + - Keyboard navigation and responsive design + +2. **Carousel Block** (`elayne/carousel`) + - Responsive image/content carousel + - Slick Carousel integration + - Customizable settings and breakpoints + - Touch/swipe support + +3. **Slide Block** (`elayne/slide`) + - Individual carousel slides + - InnerBlocks support for flexible content + - Works seamlessly with Carousel parent block + +4. **FAQ Tabs Block** (`elayne/faq-tabs`) + - Interactive FAQ with vertical tab navigation + - Dynamic content display with answers + - Customizable button with configurable text and URL + - WordPress Interactivity API integration + +### Installation + +```bash +# Clone the plugin repository +cd wp-content/plugins/ +git clone https://github.com/imagewize/elayne-blocks.git + +# Or download from GitHub releases +# Activate via WordPress admin: Plugins → Elayne Blocks → Activate +``` + +For more information, visit: [github.com/imagewize/elayne-blocks](https://github.com/imagewize/elayne-blocks) + ## For Developers ### Technical Requirements @@ -169,6 +234,7 @@ Powered by theme.json, customize: - **PHP 8.0+** required - **Full Site Editing (FSE)** compatible - **Block theme** architecture +- **Elayne Blocks plugin** (optional, for enhanced functionality) ### Theme Features @@ -216,6 +282,7 @@ Elayne registers custom pattern categories: - Portfolio - Pages - Posts +- Shop ## License @@ -250,6 +317,11 @@ All pattern images are GPL-compatible. See [readme.txt](readme.txt) Copyright se **Team Avatars (Pexels License)** - avatar-1.webp through avatar-7.webp - Professional headshots (Pexels) +**Spa & Wellness Images (CC0/CC BY)** +- Treatment images: back-massage.webp, spa-treatment-hot-stones.webp, spa-treatment-landscape.webp, spa-treatment-zoomed.webp, yoga-pose.webp +- Client avatars: spa/avatar-1.webp through spa/avatar-4.webp, spa/review-profile.webp +- Product images: spa/shop/bath-salt.webp, spa/shop/massage-oil.webp, spa/shop/serum.webp, spa/shop/supplements.webp + **Logo Images** - logo-1.webp through logo-6.webp - Geometric designs by theme author diff --git a/assets/fonts/cormorant-garamond/CormorantGaramond-Italic-VariableFont_wght.woff2 b/assets/fonts/cormorant-garamond/CormorantGaramond-Italic-VariableFont_wght.woff2 new file mode 100644 index 0000000..082758a Binary files /dev/null and b/assets/fonts/cormorant-garamond/CormorantGaramond-Italic-VariableFont_wght.woff2 differ diff --git a/assets/fonts/cormorant-garamond/CormorantGaramond-VariableFont_wght.woff2 b/assets/fonts/cormorant-garamond/CormorantGaramond-VariableFont_wght.woff2 new file mode 100644 index 0000000..1928cd1 Binary files /dev/null and b/assets/fonts/cormorant-garamond/CormorantGaramond-VariableFont_wght.woff2 differ diff --git a/assets/fonts/quicksand/Quicksand-VariableFont_wght.woff2 b/assets/fonts/quicksand/Quicksand-VariableFont_wght.woff2 new file mode 100644 index 0000000..0038ebd Binary files /dev/null and b/assets/fonts/quicksand/Quicksand-VariableFont_wght.woff2 differ diff --git a/functions.php b/functions.php index 92a6da5..fc6051d 100644 --- a/functions.php +++ b/functions.php @@ -53,6 +53,7 @@ function elayne_pattern_categories() { 'elayne/portfolio' => array( 'label' => __( 'Portfolio', 'elayne' ) ), 'elayne/pages' => array( 'label' => __( 'Pages', 'elayne' ) ), 'elayne/posts' => array( 'label' => __( 'Posts', 'elayne' ) ), + 'elayne/spa' => array( 'label' => __( 'Spa & Wellness', 'elayne' ) ), ); foreach ( $block_pattern_categories as $name => $properties ) { diff --git a/patterns/client-reviews.php b/patterns/client-reviews.php index b7adc3a..fb7f032 100644 --- a/patterns/client-reviews.php +++ b/patterns/client-reviews.php @@ -8,8 +8,8 @@ * Viewport Width: 1200 */ ?> - -
+ +
diff --git a/patterns/footer-with-nav-columns.php b/patterns/footer-with-nav-columns.php new file mode 100644 index 0000000..3ebec0b --- /dev/null +++ b/patterns/footer-with-nav-columns.php @@ -0,0 +1,132 @@ + + + +
+
+
+ + +

Experience relaxation and rejuvenation at Velora Spa and Retreat. Discover our luxurious treatments and unwind in a serene atmosphere. Your wellness journey starts here.

+ + + +
    + + + + + +
+
+ + + +
+
+
+

About Us

+ + + +
+

Our Story

+ + + +

Team

+ + + +

Careers

+ + + +

Contact

+
+
+ + + +
+

Services

+ + + +
+

Massages

+ + + +

Facials

+ + + +

Body Treatments

+ + + +

Wellness Classes

+
+
+ + + +
+

Visit Us

+ + + +
+

Book Now

+ + + +

Pricing

+ + + +

Gift Cards

+ + + +

Memberships

+
+
+
+
+
+ + + +
+
+

© 2025 · Powered by WordPress and Moiraine

+ + + +
+

Privacy Policy

+ + + +

Terms of Service

+ + + +

Spa Etiquette

+
+
+
+
+ \ No newline at end of file diff --git a/patterns/four-column-wellness-posts.php b/patterns/four-column-wellness-posts.php new file mode 100644 index 0000000..28c724e --- /dev/null +++ b/patterns/four-column-wellness-posts.php @@ -0,0 +1,36 @@ + + + +
+ +

Wellness

+ + + +
+ + +
+ + + + + +
+ + +
+ +
+ \ No newline at end of file diff --git a/patterns/header-top-bar-centered-menu.php b/patterns/header-top-bar-centered-menu.php new file mode 100644 index 0000000..7cf866a --- /dev/null +++ b/patterns/header-top-bar-centered-menu.php @@ -0,0 +1,49 @@ + + + +
+ + +
+ + +
    + + +
+ + + + + +
+ + + + +
+ + +
+ + + +
+ +
+ + +
+ \ No newline at end of file diff --git a/patterns/images/spa/avatar-1.webp b/patterns/images/spa/avatar-1.webp new file mode 100644 index 0000000..844013f Binary files /dev/null and b/patterns/images/spa/avatar-1.webp differ diff --git a/patterns/images/spa/avatar-2.webp b/patterns/images/spa/avatar-2.webp new file mode 100644 index 0000000..4cd72eb Binary files /dev/null and b/patterns/images/spa/avatar-2.webp differ diff --git a/patterns/images/spa/avatar-3.webp b/patterns/images/spa/avatar-3.webp new file mode 100644 index 0000000..7e8e371 Binary files /dev/null and b/patterns/images/spa/avatar-3.webp differ diff --git a/patterns/images/spa/avatar-4.webp b/patterns/images/spa/avatar-4.webp new file mode 100644 index 0000000..d1c9f96 Binary files /dev/null and b/patterns/images/spa/avatar-4.webp differ diff --git a/patterns/images/spa/back-massage.webp b/patterns/images/spa/back-massage.webp new file mode 100644 index 0000000..45e8237 Binary files /dev/null and b/patterns/images/spa/back-massage.webp differ diff --git a/patterns/images/spa/review-profile.webp b/patterns/images/spa/review-profile.webp new file mode 100644 index 0000000..a9c5920 Binary files /dev/null and b/patterns/images/spa/review-profile.webp differ diff --git a/patterns/images/spa/shop/bath-salt.webp b/patterns/images/spa/shop/bath-salt.webp new file mode 100644 index 0000000..4b7799e Binary files /dev/null and b/patterns/images/spa/shop/bath-salt.webp differ diff --git a/patterns/images/spa/shop/massage-oil.webp b/patterns/images/spa/shop/massage-oil.webp new file mode 100644 index 0000000..53f408e Binary files /dev/null and b/patterns/images/spa/shop/massage-oil.webp differ diff --git a/patterns/images/spa/shop/serum.webp b/patterns/images/spa/shop/serum.webp new file mode 100644 index 0000000..1359ec8 Binary files /dev/null and b/patterns/images/spa/shop/serum.webp differ diff --git a/patterns/images/spa/shop/supplements.webp b/patterns/images/spa/shop/supplements.webp new file mode 100644 index 0000000..62f4463 Binary files /dev/null and b/patterns/images/spa/shop/supplements.webp differ diff --git a/patterns/images/spa/spa-treatment-hot-stones.webp b/patterns/images/spa/spa-treatment-hot-stones.webp new file mode 100644 index 0000000..1aa8f9e Binary files /dev/null and b/patterns/images/spa/spa-treatment-hot-stones.webp differ diff --git a/patterns/images/spa/spa-treatment-landscape.webp b/patterns/images/spa/spa-treatment-landscape.webp new file mode 100644 index 0000000..57fa7ea Binary files /dev/null and b/patterns/images/spa/spa-treatment-landscape.webp differ diff --git a/patterns/images/spa/spa-treatment-zoomed.webp b/patterns/images/spa/spa-treatment-zoomed.webp new file mode 100644 index 0000000..758b84b Binary files /dev/null and b/patterns/images/spa/spa-treatment-zoomed.webp differ diff --git a/patterns/images/spa/yoga-pose.webp b/patterns/images/spa/yoga-pose.webp new file mode 100644 index 0000000..bd9f35c Binary files /dev/null and b/patterns/images/spa/yoga-pose.webp differ diff --git a/patterns/overlapping-feature-columns-reversed.php b/patterns/overlapping-feature-columns-reversed.php new file mode 100644 index 0000000..666d7fc --- /dev/null +++ b/patterns/overlapping-feature-columns-reversed.php @@ -0,0 +1,52 @@ + + + +
+ +
+ +
+ +

Supplements

+ + + +

Natural Supplements for Everyday Wellness

+ + + +

Our premium Turmeric & Ginger Tummies provide anti-inflammatory benefits while supporting digestion. Pair with our Pure Collagen supplement to promote skin elasticity and joint health for a complete wellness routine.

+ + + +

Shop supplements →

+ + + + + +
+ +
+ + + +
+ +
Natural wellness supplements
+ +
+ +
+ \ No newline at end of file diff --git a/patterns/overlapping-feature-columns.php b/patterns/overlapping-feature-columns.php new file mode 100644 index 0000000..561815f --- /dev/null +++ b/patterns/overlapping-feature-columns.php @@ -0,0 +1,52 @@ + + + +
+ +
+ +
Spa treatment
+ +
+ + + +
+ +
+ +

Wellness

+ + + +

Discover Inner Peace Through Movement

+ + + +

Our holistic approach combines movement, mindfulness, and expert guidance to help you achieve balance in body and mind. Experience the transformation with our specialized programs.

+ + + +

Learn more →

+ + + + + +
+ +
+ +
+ \ No newline at end of file diff --git a/patterns/pricing-comparison.php b/patterns/pricing-comparison.php index 137fc73..f0ba6e8 100644 --- a/patterns/pricing-comparison.php +++ b/patterns/pricing-comparison.php @@ -66,8 +66,8 @@
- -
+ +

diff --git a/patterns/review-text-image-overlap.php b/patterns/review-text-image-overlap.php new file mode 100644 index 0000000..5626dee --- /dev/null +++ b/patterns/review-text-image-overlap.php @@ -0,0 +1,65 @@ + + + +
+ +
+ +
+ + +

"The treatment I received at this spa exceeded all my expectations. The staff was professional and attentive, making me feel valued throughout my visit."

+ + + + + + + +
+ + + +
+ +
Emma Johnson
+ + + +
+ +

Emma Johnson

+ + + +

Regular Client

+ +
+ +
+ +
+ +
+ + + +
+ +
Natural wellness supplements
+ +
+ +
+ diff --git a/patterns/shop-overview-three-columns.php b/patterns/shop-overview-three-columns.php new file mode 100644 index 0000000..e78a406 --- /dev/null +++ b/patterns/shop-overview-three-columns.php @@ -0,0 +1,96 @@ + + + +
+ + +

Shop

+ + + +
+ + +
+ +
+ +
Product 1
+ + + +

Essential Serum

+ + + +

$24.99

+ +
+ +
+ + + +
+ +
+ +
Product 2
+ + + +

Bath Salts

+ + + +

$19.99

+ +
+ +
+ + + +
+ +
+ +
Product 3
+ + + +

Massage Oil

+ + + +

$29.99

+ +
+ +
+ +
+ + + +
+ +
Shop Now
+ +
+ + +
+ \ No newline at end of file diff --git a/patterns/spa-booking-cta.php b/patterns/spa-booking-cta.php new file mode 100644 index 0000000..79c5f5b --- /dev/null +++ b/patterns/spa-booking-cta.php @@ -0,0 +1,34 @@ + + + +
+
+

Experience True Relaxation

+ + + +

Indulge in our premium spa treatments designed to rejuvenate your body and calm your mind. Our skilled therapists use natural, organic products to create a personalized wellness experience.

+
+ + + +
+
Book Appointment
+ + + +
Shop Products
+
+
+ \ No newline at end of file diff --git a/patterns/spa-home-hero.php b/patterns/spa-home-hero.php new file mode 100644 index 0000000..aa2dfff --- /dev/null +++ b/patterns/spa-home-hero.php @@ -0,0 +1,44 @@ + + + +
+
+
Back massage treatment
+
+ + + +
+
+

spa & Retreat

+ + + +

Welcome to Velora

+ + + +

Escape the hustle and embrace tranquility with our curated wellness experiences. From soothing massages to revitalizing therapies, immerse yourself in a journey of relaxation and rejuvenation

+ + + +

Learn more →

+ + + + +
+
+
+ \ No newline at end of file diff --git a/patterns/testimonials-grid.php b/patterns/testimonials-grid.php new file mode 100644 index 0000000..33335fa --- /dev/null +++ b/patterns/testimonials-grid.php @@ -0,0 +1,118 @@ + + + +
+
+

Client Stories

+ + + +

Transformative Experiences

+ + + +

Our clients' wellbeing is at the heart of everything we do. We're honored to be part of their wellness journeys and delighted to share their experiences.

+
+ + + +
+
+

The hot stone massage was absolutely life-changing. I've had chronic back pain for years, and just one session provided more relief than months of other treatments. The therapist was incredibly knowledgeable and attentive to my specific needs.

+ + + +
+
Woman smiling
+ + + +
+

Nicolas Johnson

+ + + +

Monthly Member

+
+
+
+ + + +
+

The organic facial completely transformed my skin. After struggling with sensitivity and dryness for years, I finally found a skincare treatment that works with my skin instead of against it. The difference was noticeable immediately.

+ + + +
+
Man with glasses
+ + + +
+

Samantha Chen

+ + + +

First-time Visitor

+
+
+
+ + + +
+

The weekend wellness retreat was exactly what I needed. From the meditation sessions to the nutritious meals and aromatherapy workshops, every detail was thoughtfully curated. I left feeling completely renewed and with practical tools for daily wellness.

+ + + +
+
Woman with curly hair
+ + + +
+

Olivia Martinez

+ + + +

Retreat Participant

+
+
+
+ + + +
+

I've tried several yoga studios, but nothing compares to the classes here. The instructors are incredibly skilled at accommodating all levels while still providing challenges. The peaceful atmosphere and essential oil diffusion create the perfect environment for deepening my practice.

+ + + +
+
Man with beard
+ + + +
+

Jackie Wilson

+ + + +

Yoga Membership

+
+
+
+
+
+ \ No newline at end of file diff --git a/patterns/two-column-feature.php b/patterns/two-column-feature.php new file mode 100644 index 0000000..ba5d863 --- /dev/null +++ b/patterns/two-column-feature.php @@ -0,0 +1,44 @@ + + + +
+ +
+ +
Spa treatment
+ +
+ + + +
+ +

Fitness

+ + + +

Build a Stronger Core with Us

+ + + +

Discover our specialized core-building program designed to enhance your strength, improve posture, and promote overall wellness through mindful movement and targeted exercises.

+ + + +

Read more →

+ +
+ +
+ \ No newline at end of file diff --git a/patterns/two-column-review.php b/patterns/two-column-review.php new file mode 100644 index 0000000..c52b88e --- /dev/null +++ b/patterns/two-column-review.php @@ -0,0 +1,48 @@ + + + +
+
+
+

"The treatment I received at this spa exceeded all my expectations. The staff was professional and attentive, making me feel valued throughout my visit."

+ + + +
+ + + +
+
Emma Johnson
+ + + +
+

Emma Johnson

+ + + +

Regular Client

+
+
+
+ + + +
+
Spa Treatment
+
+
+
+ diff --git a/patterns/wellness-cover-highlight.php b/patterns/wellness-cover-highlight.php new file mode 100644 index 0000000..42b5f82 --- /dev/null +++ b/patterns/wellness-cover-highlight.php @@ -0,0 +1,40 @@ + + + +
Hot stone massage treatment at spa
+ + +
+ + +

TRENDING • WELLNESS

+ + + +

How to Start Your Wellness Plan

+ + + +
+ +
READ MORE
+ +
+ + +
+ + +
+ \ No newline at end of file diff --git a/readme.txt b/readme.txt index 9337c83..9f1feaf 100644 --- a/readme.txt +++ b/readme.txt @@ -4,17 +4,18 @@ Tags: block-patterns, block-styles, blog, custom-colors, custom-logo, custom-men Requires at least: 6.6 Tested up to: 6.9 Requires PHP: 8.0 -Stable tag: 1.0.3 +Stable tag: 1.1.0 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html == Description == -Launch a professional business website with the Elayne WordPress block theme! Elayne features 34 beautiful pattern designs and a fully-customizable design system with Global Styles. Elayne integrates seamlessly with all of the powerful WordPress editor features, giving you the most lightweight and powerful website builder — no expensive page builder plugin required! +Launch a professional business website with the Elayne WordPress block theme! Elayne features 47 beautiful pattern designs and a fully-customizable design system with Global Styles. Elayne integrates seamlessly with all of the powerful WordPress editor features, giving you the most lightweight and powerful website builder — no expensive page builder plugin required! = Key Features = -* 34 Professional Patterns - All 100% original, created specifically for Elayne +* 47 Professional Patterns - All 100% original, created specifically for Elayne +* 5 Style Variations - Complete design systems including new Spa & Wellness style * Flexible Layout System - Multiple page & post layout options (centered, sidebar, wide) * Business/Corporate Focus - Professional patterns for modern businesses * Industry-Specific Content - Pattern sets optimized for spa, real estate, and professional services @@ -27,45 +28,56 @@ Launch a professional business website with the Elayne WordPress block theme! El = Pattern Collection = -**Header Patterns (2)** +**Header Patterns (3)** * header-mobile - Header with hamburger navigation and social icons * header-standard - Desktop-optimized header with inline navigation +* header-top-bar-centered-menu - Centered logo with top bar and navigation menu -**Hero Patterns (4)** +**Hero Patterns (5)** * hero-modern-dark - Contemporary hero with bold typography (dark variation) * hero-modern-light - Contemporary hero with bold typography (light variation) * hero-two-tone - Split background hero with contrasting colors * hero-with-cta - Hero section with prominent call-to-action +* spa-home-hero - Overlapping image and content box hero for spa/wellness sites -**Call-to-Action & Contact (4)** +**Call-to-Action & Contact (5)** * cta-newsletter - Newsletter signup with email capture * contact-info - Contact information display * contact-side-by-side - Two-column contact layout * card-call-to-action - Modular CTA component for landing pages, blog sidebars, and conversion-focused sections +* spa-booking-cta - Booking call-to-action with form integration -**Features & Services (5)** +**Features & Services (9)** * three-column-feature-grid - Grid layout for feature showcasing * services-feature-cards - Service cards with icons and descriptions * agency-services-showcase - Four-column agency services grid with custom icons * pricing-comparison - Three-column pricing grid with feature comparison and highlighted recommended plan * client-logo-wall - Display client logos to build credibility and social proof with responsive grid layout +* two-column-feature - Two-column feature section with image and content +* overlapping-feature-columns - Feature columns with overlapping image effect +* overlapping-feature-columns-reversed - Reversed overlapping feature columns +* wellness-cover-highlight - Full-width wellness cover section with highlight box -**Team & Testimonials (4)** +**Team & Testimonials (7)** * team-grid - Team member grid with photos and bios * testimonial-card - Single testimonial card layout * client-success-stories - Enhanced testimonials with ratings and success metrics * client-reviews - Client reviews with profile images +* testimonials-grid - Three-column testimonial grid with star ratings +* two-column-review - Two-column review section with image and testimonial +* review-text-image-overlap - Review with overlapping text and image **Statistics (2)** * stats-showcase - Statistics display with visual emphasis * stats-list - List-style statistics presentation -**Blog/Posts (5)** +**Blog/Posts (6)** * blog-post-columns - Classic blog grid layout * blog-post-columns-portrait - Portrait-oriented blog grid * blog-post-list - List-style blog layout * post-featured-two-column - Featured post two-column layout * author-box - Author biography with avatar and social links +* four-column-wellness-posts - Four-column grid for wellness blog posts **Support & Information (2)** * faq - Collapsible FAQ section with accordion functionality @@ -78,13 +90,17 @@ Launch a professional business website with the Elayne WordPress block theme! El * portfolio-grid-masonry - Masonry-style portfolio grid showcasing creative work with category filters * case-study-detailed - Comprehensive project case study with structured storytelling - challenge, approach, and results -**Footer Patterns (2)** +**Footer Patterns (3)** * footer-standard - Professional standard footer * footer-simple - Minimal footer layout +* footer-with-nav-columns - Two-column footer with site info/social and multi-column navigation **Pages (1)** * page-coming-soon - Pre-launch or maintenance page with countdown and email capture +**Shop/E-commerce (1)** +* shop-overview-three-columns - Three-column product grid for spa/wellness shops + = Layout Templates = **Page Layouts:** @@ -162,6 +178,19 @@ Elayne includes custom image sizes optimized for different layouts: == Changelog == += 1.1.0 - 12/25/25 = +* ADDED: New "Spa & Wellness" style variation with Cormorant Garamond serif and Quicksand sans-serif fonts, soothing spa color palette (Teal, Ocean Sage), and elegant typography. +* ADDED: 13 new patterns - header-top-bar-centered-menu, footer-with-nav-columns, spa-home-hero, spa-booking-cta, two-column-feature, overlapping-feature-columns, overlapping-feature-columns-reversed, wellness-cover-highlight, testimonials-grid, two-column-review, review-text-image-overlap, four-column-wellness-posts, shop-overview-three-columns. +* ADDED: Cormorant Garamond and Quicksand variable fonts (self-hosted WOFF2 format) for Spa & Wellness style. +* ADDED: 14 spa-focused pattern images in patterns/images/spa/ directory (treatment images, avatars, product shots). +* ADDED: Overlapping columns CSS styling (.is-style-overlap-columns, .is-style-overlap-columns-reversed) for modern overlapping layouts. +* ADDED: Cart icon styling, spa post grid enhancements, and mobile navigation adjustments. +* CHANGED: Pattern count increased from 34 to 47 total patterns. +* CHANGED: Enhanced pattern library with spa and wellness industry focus. +* CHANGED: Updated palette tokens to use primary-alt and add primary-alt-accent across style variations. +* CHANGED: Added Spa & Wellness pattern category to the inserter for easier browsing. +* TECHNICAL: Total style variations now 5 (Ink & Sand, Teal Bay, Denim Copper, Forest Sage, Spa & Wellness). + = 1.0.3 - 12/24/25 = * ADDED: Custom avatar size configuration in theme.json (settings.custom.avatarSize: "80px") for centralized avatar sizing. * CHANGED: stats-list pattern avatar styling now uses theme.json custom variable (var(--wp--custom--avatar-size)) instead of hardcoded values. @@ -401,6 +430,124 @@ GNU General Public License for more details. --- +## Spa Theme Images (CC0 / CC BY) + +Spa avatar images (spa/avatar-1.webp through spa/avatar-4.webp) are 400×400. + +### spa/avatar-1.webp +- **Source:** User-provided AI image (ChatGPT, Dec 25, 2025) +- **Title:** Spa customer portrait +- **Photographer:** AI-generated +- **License:** Provided by client (AI-generated) +- **Attribution:** Not required +- **Description:** Portrait of a male spa customer with soft studio lighting + +### spa/avatar-2.webp +- **Source:** [StockSnap.io](https://stocksnap.io/photo/female-portrait-QRVWBXC99Z) +- **Title:** Female Portrait +- **Photographer:** [Matt Moloney](https://mjmolo.com) +- **License:** [CC0 1.0 Universal (Public Domain)](https://creativecommons.org/publicdomain/zero/1.0/) +- **Attribution:** Not required (CC0) +- **Description:** Studio portrait of woman + +### spa/avatar-3.webp +- **Source:** User-provided AI image (Dec 25, 2025) +- **Title:** Spa customer portrait +- **Photographer:** AI-generated +- **License:** Provided by client (AI-generated) +- **Attribution:** Not required +- **Description:** Portrait of a female spa customer with soft studio lighting + +### spa/avatar-4.webp +- **Source:** User-provided AI image (Dec 25, 2025) +- **Title:** Spa customer portrait +- **Photographer:** AI-generated +- **License:** Provided by client (AI-generated) +- **Attribution:** Not required +- **Description:** Portrait of a female spa customer with soft studio lighting + +### spa/review-profile.webp +- **Source:** [Pexels](https://www.pexels.com/photo/monochrome-photo-of-smiling-woman-2764975/) +- **Title:** Monochrome Photo of Smiling Woman +- **Photographer:** [Tubarones Photography](https://www.pexels.com/@tubarones/) +- **License:** [Pexels License](https://www.pexels.com/license/) (GPL-compatible) +- **Attribution:** Not required (Pexels License) +- **Description:** Monochrome portrait of woman with warm smile + +### spa/back-massage.webp +- **Source:** [Pexels](https://www.pexels.com/photo/topless-woman-lying-on-bed-getting-massage-3757952/) +- **Title:** Topless Woman Lying on Bed Getting Massage +- **Photographer:** [Andrea Piacquadio](https://www.pexels.com/@olly/) +- **License:** [Pexels License](https://www.pexels.com/license/) (GPL-compatible) +- **Attribution:** Not required (Pexels License) +- **Description:** Relaxing back massage treatment in spa setting + +### spa/spa-treatment-hot-stones.webp +- **Source:** ChatGPT (AI-generated, user-provided) +- **Title:** Spa treatment with hot stones +- **Photographer:** ChatGPT (AI-generated) +- **License:** User-provided (AI-generated via ChatGPT) +- **Attribution:** Not required (user-provided) +- **Description:** AI-generated hot stone treatment on spa table + +### spa/spa-treatment-landscape.webp +- **Source:** [Flickr](https://www.flickr.com/photos/184934270@N04/52263877413) +- **Title:** Spa treatment room landscape +- **Photographer:** [bloggeratlarge](https://www.flickr.com/photos/184934270@N04) +- **License:** [CC0 1.0 Universal (Public Domain)](https://creativecommons.org/publicdomain/zero/1.0/) +- **Attribution:** Not required (CC0) +- **Description:** Wide spa treatment room interior + +### spa/spa-treatment-zoomed.webp +- **Source:** [Pexels](https://www.pexels.com/photo/a-woman-having-a-massage-6663361/) +- **Title:** A Woman Having a Massage +- **Photographer:** [Arina Krasnikova](https://www.pexels.com/@arina-krasnikova/) +- **License:** [Pexels License](https://www.pexels.com/license/) (GPL-compatible) +- **Attribution:** Not required (Pexels License) +- **Description:** Professional massage therapy treatment + +### spa/yoga-pose.webp +- **Source:** [StockSnap.io](https://stocksnap.io/photo/woman-yoga-ZM6UUXW2SB) +- **Title:** Woman Yoga +- **Photographer:** [Burst](https://burst.shopify.com) +- **License:** [CC0 1.0 Universal (Public Domain)](https://creativecommons.org/publicdomain/zero/1.0/) +- **Attribution:** Not required (CC0) +- **Description:** Woman in yoga pose + +### spa/shop/bath-salt.webp +- **Source:** [Flickr](https://www.flickr.com/photos/127294011@N07/26214965493) +- **Title:** bath salts in mason jar with himalayan salt and lavendar +- **Photographer:** [PersonalCreations.com](https://www.flickr.com/photos/127294011@N07) +- **License:** [CC BY 2.0](https://creativecommons.org/licenses/by/2.0/) +- **Attribution:** Required (CC BY 2.0) +- **Description:** Bath salts in a mason jar with botanicals + +### spa/shop/massage-oil.webp +- **Source:** [Flickr](https://www.flickr.com/photos/22141297@N06/7796393844) +- **Title:** Pure Jasmine Oil Absolute Perfume - All Natural Aromatherapy Essential Oil ~ Bridal Perfume +- **Photographer:** [Naomi King](https://www.flickr.com/photos/22141297@N06) +- **License:** [CC BY 2.0](https://creativecommons.org/licenses/by/2.0/) +- **Attribution:** Required (CC BY 2.0) +- **Description:** Aromatherapy oil bottle + +### spa/shop/serum.webp +- **Source:** [Rawpixel](https://www.rawpixel.com/image/11515764/photo-image-medicine-public-domain-table) +- **Title:** Beard grooming oil barbers table +- **Photographer:** Rawpixel (creator not listed) +- **License:** [CC0 1.0 Universal (Public Domain)](https://creativecommons.org/publicdomain/zero/1.0/) +- **Attribution:** Not required (CC0) +- **Description:** Glass bottle cosmetic product + +### spa/shop/supplements.webp +- **Source:** [Flickr](https://www.flickr.com/photos/126255752@N08/14872889829) +- **Title:** Dream Leaf - Lucid Dreaming Supplements +- **Photographer:** [luciddreamleaf](https://www.flickr.com/photos/126255752@N08) +- **License:** [CC BY-SA 2.0](https://creativecommons.org/licenses/by-sa/2.0/) +- **Attribution:** Required (CC BY-SA 2.0) +- **Description:** Supplement bottle product shot + +--- + ## Logo Images **Status:** Logo images logo-1.webp, logo-2.webp, logo-3.webp, logo-4.webp, logo-5.webp are geometric designs created by theme author and do not require attribution or replacement. diff --git a/style.css b/style.css index a8e74b9..309d065 100644 --- a/style.css +++ b/style.css @@ -7,7 +7,7 @@ Description: A premium business block theme with advanced patterns for professio Requires at least: 6.6 Tested up to: 6.9 Requires PHP: 8.0 -Version: 1.0.3 +Version: 1.1.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: elayne @@ -116,3 +116,80 @@ figure.is-avatar, aspect-ratio: 1; object-fit: cover; } + +/* ======================================================================== + Spa & Wellness Style Variation (from Velora Spa theme) + ======================================================================== */ + +/* Overlapping columns styling */ +@media (min-width: 782px) { + .is-style-overlap-columns .wp-block-column:nth-child(2) { + margin-left: -10%; + z-index: 2; + position: relative; + align-self: center; + } + + /* Styling for reversed overlapping columns */ + .is-style-overlap-columns-reversed .wp-block-column:nth-child(1) { + margin-right: -10%; + margin-left: 0; + z-index: 2; + position: relative; + align-self: center; + } +} + +/* Spa post grid styling */ +.spa-post-grid .wp-block-post-featured-image { + width: 100%; +} + +.spa-post-grid .wp-block-post-featured-image img { + width: 100%; + height: auto; + object-fit: cover; +} + +/* Cart icon styling */ +.cart-icon { + margin: 0 !important; + transition: transform 0.2s ease; +} + +.cart-icon img { + display: block; + width: 24px; + height: 24px; +} + +.cart-icon a:hover { + opacity: 0.8; +} + +.cart-icon a:hover img { + filter: brightness(0) sepia(100%) saturate(500%) hue-rotate(175deg); + transform: scale(1.1); +} + +/* Mobile navigation adjustments */ +@media (max-width: 781px) { + .wp-block-site-title { + padding-left: 2.8rem; + } + + .mobile-centered-nav .wp-block-navigation__responsive-container-open { + margin: 0 auto; + } + + .mobile-centered-nav { + width: 100%; + justify-content: center; + } + + .mobile-centered-nav .wp-block-navigation__responsive-container-open { + position: relative; + left: 0; + transform: translateX(0); + } +} diff --git a/styles/denim-copper.json b/styles/denim-copper.json index bf47d2b..7d39f23 100644 --- a/styles/denim-copper.json +++ b/styles/denim-copper.json @@ -53,10 +53,15 @@ "color": "#C2D4FF" }, { - "name": "Brand Dark", - "slug": "primary-dark", + "name": "Brand Alt", + "slug": "primary-alt", "color": "#0F1E4D" }, + { + "name": "Brand Alt Accent", + "slug": "primary-alt-accent", + "color": "#C26B2C" + }, { "name": "Contrast", "slug": "main", diff --git a/styles/forest-sage.json b/styles/forest-sage.json index 1105bb1..127bb7f 100644 --- a/styles/forest-sage.json +++ b/styles/forest-sage.json @@ -58,10 +58,15 @@ "color": "#C4D7C6" }, { - "name": "Brand Dark", - "slug": "primary-dark", + "name": "Brand Alt", + "slug": "primary-alt", "color": "#1F3535" }, + { + "name": "Brand Alt Accent", + "slug": "primary-alt-accent", + "color": "#3D5A5A" + }, { "name": "Contrast", "slug": "main", diff --git a/styles/orange.json b/styles/orange.json index 6104573..425609a 100644 --- a/styles/orange.json +++ b/styles/orange.json @@ -33,10 +33,15 @@ "color": "#ffd4b3" }, { - "name": "Brand Dark", - "slug": "primary-dark", + "name": "Brand Alt", + "slug": "primary-alt", "color": "#8a3700" }, + { + "name": "Brand Alt Accent", + "slug": "primary-alt-accent", + "color": "#b34700" + }, { "name": "Contrast", "slug": "main", diff --git a/styles/spa-wellness.json b/styles/spa-wellness.json new file mode 100644 index 0000000..273607c --- /dev/null +++ b/styles/spa-wellness.json @@ -0,0 +1,156 @@ +{ + "$schema": "https://schemas.wp.org/trunk/theme.json", + "version": 3, + "title": "Spa & Wellness", + "settings": { + "color": { + "defaultDuotone": false, + "defaultGradients": false, + "defaultPalette": false, + "duotone": [ + { + "name": "Spa Teal", + "slug": "primary", + "colors": ["#5BBCD6", "#E8F5F2"] + }, + { + "name": "Ocean Sage", + "slug": "secondary", + "colors": ["#2D4A4E", "#F7FCFA"] + }, + { + "name": "High Contrast", + "slug": "high-contrast", + "colors": ["#000000", "#ffffff"] + } + ], + "gradients": [ + { + "name": "Spa Teal", + "slug": "spa-teal", + "gradient": "linear-gradient(135deg, #5BBCD6, #A5D8CA)" + }, + { + "name": "Ocean Depth", + "slug": "ocean-depth", + "gradient": "linear-gradient(135deg, #2D4A4E, #42858F)" + }, + { + "name": "Peaceful Sky", + "slug": "peaceful-sky", + "gradient": "linear-gradient(135deg, #E8F5F2, #F7FCFA)" + } + ], + "palette": [ + { + "name": "Brand", + "slug": "primary", + "color": "#5BBCD6" + }, + { + "name": "Brand Accent", + "slug": "primary-accent", + "color": "#E8F5F2" + }, + { + "name": "Brand Alt", + "slug": "primary-alt", + "color": "#A5D8CA" + }, + { + "name": "Brand Alt Accent", + "slug": "primary-alt-accent", + "color": "#42858F" + }, + { + "name": "Contrast", + "slug": "main", + "color": "#2D4A4E" + }, + { + "name": "Contrast Accent", + "slug": "main-accent", + "color": "#E1EBE9" + }, + { + "name": "Base", + "slug": "base", + "color": "#fff" + }, + { + "name": "Base Accent", + "slug": "secondary", + "color": "#6A8D94" + }, + { + "name": "Tint", + "slug": "tertiary", + "color": "#F7FCFA" + }, + { + "name": "Border Light", + "slug": "border-light", + "color": "#D9E6E3" + }, + { + "name": "Border Dark", + "slug": "border-dark", + "color": "#51757A" + } + ] + }, + "typography": { + "fontFamilies": [ + { + "fontFamily": "Cormorant Garamond, serif", + "name": "Cormorant Garamond", + "slug": "heading", + "fontFace": [ + { + "fontDisplay": "swap", + "fontFamily": "Cormorant Garamond", + "fontStyle": "normal", + "fontWeight": "300 700", + "src": ["file:./assets/fonts/cormorant-garamond/CormorantGaramond-VariableFont_wght.woff2"] + }, + { + "fontDisplay": "swap", + "fontFamily": "Cormorant Garamond", + "fontStyle": "italic", + "fontWeight": "300 700", + "src": ["file:./assets/fonts/cormorant-garamond/CormorantGaramond-Italic-VariableFont_wght.woff2"] + } + ] + }, + { + "fontFamily": "Quicksand, sans-serif", + "name": "Quicksand", + "slug": "body", + "fontFace": [ + { + "fontDisplay": "swap", + "fontFamily": "Quicksand", + "fontStyle": "normal", + "fontWeight": "300 700", + "src": ["file:./assets/fonts/quicksand/Quicksand-VariableFont_wght.woff2"] + } + ] + } + ] + } + }, + "styles": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--body)" + }, + "elements": { + "heading": { + "typography": { + "fontFamily": "var(--wp--preset--font-family--heading)", + "fontWeight": "500", + "letterSpacing": "-0.02em" + } + } + } + } +} diff --git a/styles/teal-bay.json b/styles/teal-bay.json index 394135b..17ed189 100644 --- a/styles/teal-bay.json +++ b/styles/teal-bay.json @@ -53,10 +53,15 @@ "color": "#CFFAFE" }, { - "name": "Brand Dark", - "slug": "primary-dark", + "name": "Brand Alt", + "slug": "primary-alt", "color": "#155E75" }, + { + "name": "Brand Alt Accent", + "slug": "primary-alt-accent", + "color": "#0E7490" + }, { "name": "Contrast", "slug": "main", diff --git a/theme.json b/theme.json index 210f571..0a7e1da 100644 --- a/theme.json +++ b/theme.json @@ -53,10 +53,15 @@ "color": "#C5D0E6" }, { - "name": "Brand Dark", - "slug": "primary-dark", + "name": "Brand Alt", + "slug": "primary-alt", "color": "#111827" }, + { + "name": "Brand Alt Accent", + "slug": "primary-alt-accent", + "color": "#374151" + }, { "name": "Contrast", "slug": "main",