brianhansonxyz/homeproz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 4: Block Patterns - Hero CTA, Feature Grid, Team Grid, Testimonial, Split Content, CTA Banner, Contact Info patterns with editor styles

Browse Source
This commit is contained in:
Hanson.xyz Dev
2025-11-28 17:06:48 -06:00
parent f876883cf2
commit c4f29a3152
18 changed files with 585 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
wp-content/themes/homeproz/dist/.vite/manifest.json
Vendored
+9
View File
@@ -1,4 +1,13 @@
{
"editor.js": {
"file": "assets/editor.js",
"name": "editor",
"src": "editor.js",
"isEntry": true,
"css": [
"assets/editor.css"
]
},
"main.js": {
"file": "assets/main.js",
"name": "main",
wp-content/themes/homeproz/dist/assets/editor.css
Vendored
+1
View File
@@ -0,0 +1 @@
:root{--color-bg-dark: #0A0A0A;--color-bg-card: #161616;--color-accent: #9F3730;--color-accent-hover: #C8473F;--color-accent-light: #BF524B;--color-text: #F5F5F5;--color-text-muted: #B0B0B0;--color-border: #2A2A2A;--color-success: #2E7D32;--color-warning: #F9A825;--color-sold: #757575;--font-display: "Abril Fatface", Georgia, serif;--font-body: "Inter", "Droid Sans", Arial, sans-serif}.editor-styles-wrapper{font-family:var(--font-body);background-color:var(--color-bg-dark);color:var(--color-text-muted);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.editor-styles-wrapper h1,.editor-styles-wrapper h2,.editor-styles-wrapper h3,.editor-styles-wrapper h4,.editor-styles-wrapper h5,.editor-styles-wrapper h6{font-family:var(--font-display);color:var(--color-text);font-weight:400;line-height:1.2}.editor-styles-wrapper h1{font-size:3rem}.editor-styles-wrapper h2{font-size:2.25rem}.editor-styles-wrapper h3{font-size:1.875rem}.editor-styles-wrapper h4{font-size:1.5rem}.editor-styles-wrapper h5{font-size:1.25rem}.editor-styles-wrapper h6{font-size:1.125rem}.editor-styles-wrapper p{margin-bottom:1rem}.editor-styles-wrapper a{color:var(--color-accent-light);text-decoration:none}.editor-styles-wrapper .wp-block-button__link{font-family:var(--font-body);font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;border-radius:.25rem;padding:.75rem 1.5rem}.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link{border-width:2px}.editor-styles-wrapper .wp-block-cover{color:var(--color-text)}.editor-styles-wrapper .wp-block-group.has-background{padding:2rem}.editor-styles-wrapper .wp-block-columns{margin-bottom:0}.editor-styles-wrapper .wp-block-separator{border-color:var(--color-border)}.editor-styles-wrapper .wp-block-separator.has-vivid-red-background-color{background-color:var(--color-accent)!important;border-color:var(--color-accent)!important}.editor-styles-wrapper .wp-block-image img{max-width:100%;height:auto}.editor-styles-wrapper blockquote{border-left:4px solid var(--color-accent);padding-left:1.5rem;margin-left:0;font-style:italic;color:var(--color-text)}.editor-styles-wrapper ul,.editor-styles-wrapper ol{padding-left:1.5rem}.editor-styles-wrapper li{margin-bottom:.5rem}.editor-styles-wrapper .wp-block-table table{border-collapse:collapse;width:100%}.editor-styles-wrapper .wp-block-table td,.editor-styles-wrapper .wp-block-table th{border:1px solid var(--color-border);padding:.75rem}.editor-styles-wrapper .wp-block-table th{background-color:var(--color-bg-card);color:var(--color-text);font-weight:600}.editor-styles-wrapper .has-vivid-red-background-color{background-color:var(--color-accent)!important}.editor-styles-wrapper .has-vivid-red-color{color:var(--color-accent)!important}.editor-styles-wrapper .has-black-background-color{background-color:var(--color-bg-dark)!important}.editor-styles-wrapper .has-white-color{color:var(--color-text)!important}.editor-styles-wrapper .has-cyan-bluish-gray-color{color:var(--color-text-muted)!important}@media (max-width: 768px){.editor-styles-wrapper h1{font-size:2.25rem}.editor-styles-wrapper h2{font-size:1.875rem}.editor-styles-wrapper h3{font-size:1.5rem}}
wp-content/themes/homeproz/dist/assets/editor.js
Vendored
+1
View File
@@ -0,0 +1 @@
wp-content/themes/homeproz/dist/assets/main.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
wp-content/themes/homeproz/inc/enqueue.php
+9 -6
View File
@@ -14,26 +14,29 @@ if (!defined('ABSPATH')) {
* Enqueue frontend scripts and styles
*/
function homeproz_scripts() {
// Main stylesheet (Vite compiled)
if (file_exists(HOMEPROZ_DIR . '/dist/assets/main.css')) {
$css_file = HOMEPROZ_DIR . '/dist/assets/main.css';
$js_file = HOMEPROZ_DIR . '/dist/assets/main.js';
// Main stylesheet (Vite compiled) with filemtime cache buster
if (file_exists($css_file)) {
wp_enqueue_style(
'homeproz-style',
HOMEPROZ_URI . '/dist/assets/main.css',
array(),
HOMEPROZ_VERSION
filemtime($css_file)
);
}
// jQuery is already included in WordPress, just ensure it's loaded
wp_enqueue_script('jquery');
// Main JavaScript (Vite compiled)
if (file_exists(HOMEPROZ_DIR . '/dist/assets/main.js')) {
// Main JavaScript (Vite compiled) with filemtime cache buster
if (file_exists($js_file)) {
wp_enqueue_script(
'homeproz-script',
HOMEPROZ_URI . '/dist/assets/main.js',
array('jquery'),
HOMEPROZ_VERSION,
filemtime($js_file),
true
);
wp-content/themes/homeproz/inc/theme-setup.php
+13
View File
@@ -67,6 +67,19 @@ function homeproz_setup() {
}
add_action('after_setup_theme', 'homeproz_setup');
/**
* Register custom block pattern category
*/
function homeproz_register_pattern_category() {
register_block_pattern_category(
'homeproz',
array(
'label' => __('HomeProz', 'homeproz'),
)
);
}
add_action('init', 'homeproz_register_pattern_category');
/**
* Register widget areas
*/
wp-content/themes/homeproz/patterns/contact-info.php
+56
View File
@@ -0,0 +1,56 @@
<?php
/**
* Title: Contact Info Block
* Slug: homeproz/contact-info
* Categories: featured, homeproz
* Keywords: contact, address, phone, email, hours
* Description: A contact information block with address, phone, email, and hours.
*/
?>
<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","bottom":"2rem","left":"2rem","right":"2rem"}},"color":{"background":"#161616"},"border":{"radius":"0.5rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="border-radius:0.5rem;background-color:#161616;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:heading {"level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"bottom":"1.5rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-white-color has-text-color" style="margin-bottom:1.5rem;font-size:1.25rem">Contact Information</h3>
<!-- /wp:heading -->
<!-- wp:group {"style":{"spacing":{"blockGap":"1.25rem"}},"layout":{"type":"flex","orientation":"vertical"}} -->
<div class="wp-block-group"><!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.875rem","fontWeight":"600"},"color":{"text":"#f5f5f5"},"layout":{"selfStretch":"fixed","flexSize":"100px"}}} -->
<p class="has-text-color" style="color:#f5f5f5;font-size:0.875rem;font-weight:600">Address</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9375rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-color" style="color:#b0b0b0;font-size:0.9375rem">111 E Clark St<br>Albert Lea, MN 56007</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.875rem","fontWeight":"600"},"color":{"text":"#f5f5f5"},"layout":{"selfStretch":"fixed","flexSize":"100px"}}} -->
<p class="has-text-color" style="color:#f5f5f5;font-size:0.875rem;font-weight:600">Phone</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9375rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-color" style="color:#b0b0b0;font-size:0.9375rem">507-516-4870</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.875rem","fontWeight":"600"},"color":{"text":"#f5f5f5"},"layout":{"selfStretch":"fixed","flexSize":"100px"}}} -->
<p class="has-text-color" style="color:#f5f5f5;font-size:0.875rem;font-weight:600">Email</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9375rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-color" style="color:#b0b0b0;font-size:0.9375rem">info@homeprozrealestate.com</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"top"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.875rem","fontWeight":"600"},"color":{"text":"#f5f5f5"},"layout":{"selfStretch":"fixed","flexSize":"100px"}}} -->
<p class="has-text-color" style="color:#f5f5f5;font-size:0.875rem;font-weight:600">Hours</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.9375rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-color" style="color:#b0b0b0;font-size:0.9375rem">Mon-Fri: 9:00 AM - 5:00 PM<br>Weekends: By Appointment</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
wp-content/themes/homeproz/patterns/cta-banner.php
+24
View File
@@ -0,0 +1,24 @@
<?php
/**
* Title: CTA Banner
* Slug: homeproz/cta-banner
* Categories: featured, homeproz
* Keywords: call to action, banner, cta, contact
* Description: A full-width call-to-action banner with heading and button.
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"color":{"background":"#9f3730"}},"layout":{"type":"constrained","contentSize":"700px"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#9f3730;padding-top:4rem;padding-right:var(--wp--preset--spacing--50);padding-bottom:4rem;padding-left:var(--wp--preset--spacing--50)"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"2.25rem"},"spacing":{"margin":{"bottom":"1rem"}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-bottom:1rem;font-size:2.25rem">Ready to Find Your Dream Home?</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"1.5rem"}},"color":{"text":"#ffffff"},"typography":{"fontSize":"1.125rem"}}} -->
<p class="has-text-align-center has-text-color" style="color:#ffffff;margin-bottom:1.5rem;font-size:1.125rem">Whether you're buying or selling, our team is here to help you every step of the way.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"white","textColor":"vivid-red","style":{"border":{"radius":"4px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-vivid-red-color has-white-background-color has-text-color has-background wp-element-button" style="border-radius:4px">Contact Us Today</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group -->
wp-content/themes/homeproz/patterns/feature-grid.php
+50
View File
@@ -0,0 +1,50 @@
<?php
/**
* Title: Feature Grid (3 columns)
* Slug: homeproz/feature-grid
* Categories: featured, homeproz
* Keywords: features, columns, services, benefits
* Description: A three-column grid showcasing features or services.
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"color":{"background":"#0a0a0a"}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#0a0a0a;padding-top:4rem;padding-right:var(--wp--preset--spacing--50);padding-bottom:4rem;padding-left:var(--wp--preset--spacing--50)"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"2.25rem"},"spacing":{"margin":{"bottom":"0.75rem"}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-bottom:0.75rem;font-size:2.25rem">Why Choose Us?</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"3rem"}},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;margin-bottom:3rem">We're committed to helping you achieve your real estate goals</p>
<!-- /wp:paragraph -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"2rem"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"1.5rem","bottom":"1.5rem","left":"1.5rem","right":"1.5rem"}},"color":{"background":"#161616"},"border":{"radius":"0.5rem"}}} -->
<div class="wp-block-column has-background" style="border-radius:0.5rem;background-color:#161616;padding-top:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem;padding-left:1.5rem"><!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"bottom":"0.75rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-bottom:0.75rem;font-size:1.25rem">Local Expertise</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.9375rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;font-size:0.9375rem">Deep knowledge of the Albert Lea area and surrounding Minnesota communities helps us find the perfect property for you.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"1.5rem","bottom":"1.5rem","left":"1.5rem","right":"1.5rem"}},"color":{"background":"#161616"},"border":{"radius":"0.5rem"}}} -->
<div class="wp-block-column has-background" style="border-radius:0.5rem;background-color:#161616;padding-top:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem;padding-left:1.5rem"><!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"bottom":"0.75rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-bottom:0.75rem;font-size:1.25rem">Personalized Service</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.9375rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;font-size:0.9375rem">We take the time to understand your unique needs and provide tailored guidance throughout your real estate journey.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"1.5rem","bottom":"1.5rem","left":"1.5rem","right":"1.5rem"}},"color":{"background":"#161616"},"border":{"radius":"0.5rem"}}} -->
<div class="wp-block-column has-background" style="border-radius:0.5rem;background-color:#161616;padding-top:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem;padding-left:1.5rem"><!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"bottom":"0.75rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-bottom:0.75rem;font-size:1.25rem">Results-Driven</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.9375rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;font-size:0.9375rem">Our track record speaks for itself. We work tirelessly to get you the best possible outcome, whether buying or selling.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
wp-content/themes/homeproz/patterns/hero-cta.php
+30
View File
@@ -0,0 +1,30 @@
<?php
/**
* Title: Hero with CTA
* Slug: homeproz/hero-cta
* Categories: featured, homeproz
* Keywords: hero, banner, call to action, header
* Description: A full-width hero section with heading, text, and call-to-action buttons.
*/
?>
<!-- wp:cover {"overlayColor":"black","minHeight":70,"minHeightUnit":"vh","align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}}} -->
<div class="wp-block-cover alignfull" style="padding-top:var(--wp--preset--spacing--80);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50);min-height:70vh"><span aria-hidden="true" class="wp-block-cover__background has-black-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:group {"layout":{"type":"constrained","contentSize":"800px"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center","level":1,"style":{"typography":{"fontSize":"3.5rem","lineHeight":"1.1"}},"textColor":"white"} -->
<h1 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="font-size:3.5rem;line-height:1.1">Find Your Dream Home Today</h1>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"top":"1.5rem","bottom":"2rem"}}},"textColor":"white"} -->
<p class="has-text-align-center has-white-color has-text-color" style="margin-top:1.5rem;margin-bottom:2rem;font-size:1.25rem">Expert real estate services for buyers and sellers in Albert Lea and the surrounding Minnesota communities.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"style":{"spacing":{"blockGap":"1rem"}}} -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-red","textColor":"white","style":{"border":{"radius":"4px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-vivid-red-background-color has-text-color has-background wp-element-button" style="border-radius:4px">View Properties</a></div>
<!-- /wp:button -->
<!-- wp:button {"textColor":"white","className":"is-style-outline","style":{"border":{"radius":"4px"}}} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link has-white-color has-text-color wp-element-button" style="border-radius:4px">Contact Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:cover -->
wp-content/themes/homeproz/patterns/split-content.php
+38
View File
@@ -0,0 +1,38 @@
<?php
/**
* Title: Split Content
* Slug: homeproz/split-content
* Categories: featured, homeproz
* Keywords: split, media, text, image, two column
* Description: A two-column layout with image on one side and text on the other.
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"color":{"background":"#0a0a0a"}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#0a0a0a;padding-top:4rem;padding-right:var(--wp--preset--spacing--50);padding-bottom:4rem;padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns {"verticalAlignment":"center","style":{"spacing":{"blockGap":{"left":"3rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-center"><!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"sizeSlug":"large","style":{"border":{"radius":"0.5rem"}}} -->
<figure class="wp-block-image size-large has-custom-border"><img src="https://via.placeholder.com/600x400" alt="About HomeProz" style="border-radius:0.5rem"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:heading {"style":{"typography":{"fontSize":"2rem"},"spacing":{"margin":{"bottom":"1rem"}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-white-color has-text-color" style="margin-bottom:1rem;font-size:2rem">Your Trusted Real Estate Partner</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"1.125rem","lineHeight":"1.8"},"color":{"text":"#b0b0b0"},"spacing":{"margin":{"bottom":"1.5rem"}}}} -->
<p class="has-text-color" style="color:#b0b0b0;margin-bottom:1.5rem;font-size:1.125rem;line-height:1.8">HomeProz Real Estate was founded with a simple mission: to provide exceptional real estate services to the Albert Lea area and surrounding Minnesota communities.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"1rem","lineHeight":"1.8"},"color":{"text":"#b0b0b0"},"spacing":{"margin":{"bottom":"1.5rem"}}}} -->
<p class="has-text-color" style="color:#b0b0b0;margin-bottom:1.5rem;font-size:1rem;line-height:1.8">We believe that buying or selling a home should be an exciting journey, not a stressful experience. Our team combines deep local knowledge with a commitment to personalized service.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"backgroundColor":"vivid-red","textColor":"white","style":{"border":{"radius":"4px"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-white-color has-vivid-red-background-color has-text-color has-background wp-element-button" style="border-radius:4px">Learn More About Us</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
wp-content/themes/homeproz/patterns/team-grid.php
+92
View File
@@ -0,0 +1,92 @@
<?php
/**
* Title: Team Grid
* Slug: homeproz/team-grid
* Categories: featured, homeproz
* Keywords: team, agents, staff, members, people
* Description: A grid layout showcasing team members with photos and contact info.
*/
?>
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"4rem","bottom":"4rem","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"color":{"background":"#161616"}},"layout":{"type":"constrained","contentSize":"1200px"}} -->
<div class="wp-block-group alignfull has-background" style="background-color:#161616;padding-top:4rem;padding-right:var(--wp--preset--spacing--50);padding-bottom:4rem;padding-left:var(--wp--preset--spacing--50)"><!-- wp:heading {"textAlign":"center","style":{"typography":{"fontSize":"2.25rem"},"spacing":{"margin":{"bottom":"0.75rem"}}},"textColor":"white"} -->
<h2 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-bottom:0.75rem;font-size:2.25rem">Meet Our Team</h2>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"spacing":{"margin":{"bottom":"3rem"}},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;margin-bottom:3rem">A dedicated team of real estate professionals ready to serve you</p>
<!-- /wp:paragraph -->
<!-- wp:columns {"style":{"spacing":{"blockGap":{"left":"1.5rem"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"1.5rem","bottom":"1.5rem","left":"1.5rem","right":"1.5rem"}},"color":{"background":"#0a0a0a"},"border":{"radius":"0.5rem"}}} -->
<div class="wp-block-column has-background" style="border-radius:0.5rem;background-color:#0a0a0a;padding-top:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem;padding-left:1.5rem"><!-- wp:image {"align":"center","width":"120px","height":"120px","scale":"cover","sizeSlug":"thumbnail","style":{"border":{"radius":"100%"}}} -->
<figure class="wp-block-image aligncenter size-thumbnail is-resized has-custom-border"><img src="https://via.placeholder.com/120" alt="Team Member" style="border-radius:100%;object-fit:cover;width:120px;height:120px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"top":"1rem","bottom":"0.25rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-top:1rem;margin-bottom:0.25rem;font-size:1.25rem">Agent Name</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.75rem","letterSpacing":"0.1em","textTransform":"uppercase"},"color":{"text":"#bf524b"},"spacing":{"margin":{"bottom":"0.75rem"}}}} -->
<p class="has-text-align-center has-text-color" style="color:#bf524b;margin-bottom:0.75rem;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase">REALTOR</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.875rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;font-size:0.875rem">507-555-1234</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"1.5rem","bottom":"1.5rem","left":"1.5rem","right":"1.5rem"}},"color":{"background":"#0a0a0a"},"border":{"radius":"0.5rem"}}} -->
<div class="wp-block-column has-background" style="border-radius:0.5rem;background-color:#0a0a0a;padding-top:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem;padding-left:1.5rem"><!-- wp:image {"align":"center","width":"120px","height":"120px","scale":"cover","sizeSlug":"thumbnail","style":{"border":{"radius":"100%"}}} -->
<figure class="wp-block-image aligncenter size-thumbnail is-resized has-custom-border"><img src="https://via.placeholder.com/120" alt="Team Member" style="border-radius:100%;object-fit:cover;width:120px;height:120px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"top":"1rem","bottom":"0.25rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-top:1rem;margin-bottom:0.25rem;font-size:1.25rem">Agent Name</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.75rem","letterSpacing":"0.1em","textTransform":"uppercase"},"color":{"text":"#bf524b"},"spacing":{"margin":{"bottom":"0.75rem"}}}} -->
<p class="has-text-align-center has-text-color" style="color:#bf524b;margin-bottom:0.75rem;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase">REALTOR</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.875rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;font-size:0.875rem">507-555-1234</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"1.5rem","bottom":"1.5rem","left":"1.5rem","right":"1.5rem"}},"color":{"background":"#0a0a0a"},"border":{"radius":"0.5rem"}}} -->
<div class="wp-block-column has-background" style="border-radius:0.5rem;background-color:#0a0a0a;padding-top:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem;padding-left:1.5rem"><!-- wp:image {"align":"center","width":"120px","height":"120px","scale":"cover","sizeSlug":"thumbnail","style":{"border":{"radius":"100%"}}} -->
<figure class="wp-block-image aligncenter size-thumbnail is-resized has-custom-border"><img src="https://via.placeholder.com/120" alt="Team Member" style="border-radius:100%;object-fit:cover;width:120px;height:120px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"top":"1rem","bottom":"0.25rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-top:1rem;margin-bottom:0.25rem;font-size:1.25rem">Agent Name</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.75rem","letterSpacing":"0.1em","textTransform":"uppercase"},"color":{"text":"#bf524b"},"spacing":{"margin":{"bottom":"0.75rem"}}}} -->
<p class="has-text-align-center has-text-color" style="color:#bf524b;margin-bottom:0.75rem;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase">REALTOR</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.875rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;font-size:0.875rem">507-555-1234</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"padding":{"top":"1.5rem","bottom":"1.5rem","left":"1.5rem","right":"1.5rem"}},"color":{"background":"#0a0a0a"},"border":{"radius":"0.5rem"}}} -->
<div class="wp-block-column has-background" style="border-radius:0.5rem;background-color:#0a0a0a;padding-top:1.5rem;padding-right:1.5rem;padding-bottom:1.5rem;padding-left:1.5rem"><!-- wp:image {"align":"center","width":"120px","height":"120px","scale":"cover","sizeSlug":"thumbnail","style":{"border":{"radius":"100%"}}} -->
<figure class="wp-block-image aligncenter size-thumbnail is-resized has-custom-border"><img src="https://via.placeholder.com/120" alt="Team Member" style="border-radius:100%;object-fit:cover;width:120px;height:120px"/></figure>
<!-- /wp:image -->
<!-- wp:heading {"textAlign":"center","level":3,"style":{"typography":{"fontSize":"1.25rem"},"spacing":{"margin":{"top":"1rem","bottom":"0.25rem"}}},"textColor":"white"} -->
<h3 class="wp-block-heading has-text-align-center has-white-color has-text-color" style="margin-top:1rem;margin-bottom:0.25rem;font-size:1.25rem">Agent Name</h3>
<!-- /wp:heading -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.75rem","letterSpacing":"0.1em","textTransform":"uppercase"},"color":{"text":"#bf524b"},"spacing":{"margin":{"bottom":"0.75rem"}}}} -->
<p class="has-text-align-center has-text-color" style="color:#bf524b;margin-bottom:0.75rem;font-size:0.75rem;letter-spacing:0.1em;text-transform:uppercase">REALTOR</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"align":"center","style":{"typography":{"fontSize":"0.875rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-align-center has-text-color" style="color:#b0b0b0;font-size:0.875rem">507-555-1234</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
wp-content/themes/homeproz/patterns/testimonial.php
+30
View File
@@ -0,0 +1,30 @@
<?php
/**
* Title: Testimonial
* Slug: homeproz/testimonial
* Categories: featured, homeproz
* Keywords: testimonial, quote, review, client
* Description: A testimonial quote with client attribution.
*/
?>
<!-- wp:group {"style":{"spacing":{"padding":{"top":"2rem","bottom":"2rem","left":"2rem","right":"2rem"}},"color":{"background":"#161616"},"border":{"radius":"0.5rem"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="border-radius:0.5rem;background-color:#161616;padding-top:2rem;padding-right:2rem;padding-bottom:2rem;padding-left:2rem"><!-- wp:paragraph {"style":{"typography":{"fontSize":"1.125rem","fontStyle":"italic","lineHeight":"1.7"},"color":{"text":"#f5f5f5"},"spacing":{"margin":{"bottom":"1.5rem"}}}} -->
<p class="has-text-color" style="color:#f5f5f5;margin-bottom:1.5rem;font-size:1.125rem;font-style:italic;line-height:1.7">"HomeProz made our home buying experience incredibly smooth. They were patient, knowledgeable, and always available to answer our questions. We found our dream home faster than we ever expected!"</p>
<!-- /wp:paragraph -->
<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
<div class="wp-block-group"><!-- wp:separator {"style":{"layout":{"selfStretch":"fixed","flexSize":"40px"}},"backgroundColor":"vivid-red"} -->
<hr class="wp-block-separator has-text-color has-vivid-red-color has-alpha-channel-opacity has-vivid-red-background-color has-background"/>
<!-- /wp:separator -->
<!-- wp:group {"layout":{"type":"flex","orientation":"vertical","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"typography":{"fontWeight":"600","fontSize":"0.9375rem"},"color":{"text":"#f5f5f5"},"spacing":{"margin":{"bottom":"0.25rem"}}}} -->
<p class="has-text-color" style="color:#f5f5f5;margin-bottom:0.25rem;font-size:0.9375rem;font-weight:600">Sarah &amp; Mike T.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"0.8125rem"},"color":{"text":"#b0b0b0"}}} -->
<p class="has-text-color" style="color:#b0b0b0;font-size:0.8125rem">Home Buyers, Albert Lea</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
wp-content/themes/homeproz/src/editor.js
+9
View File
@@ -0,0 +1,9 @@
/**
* HomeProz Editor Styles
*
* This file imports the editor stylesheet for the block editor.
*
* @package HomeProz
*/
import './editor.scss';
wp-content/themes/homeproz/src/editor.scss
+188
View File
@@ -0,0 +1,188 @@
/**
* HomeProz Editor Styles
*
* Styles for the WordPress block editor to match the frontend.
*
* @package HomeProz
*/
// ============================================
// CSS Custom Properties (Design Tokens)
// ============================================
:root {
// Colors
--color-bg-dark: #0A0A0A;
--color-bg-card: #161616;
--color-accent: #9F3730;
--color-accent-hover: #C8473F;
--color-accent-light: #BF524B;
--color-text: #F5F5F5;
--color-text-muted: #B0B0B0;
--color-border: #2A2A2A;
--color-success: #2E7D32;
--color-warning: #F9A825;
--color-sold: #757575;
// Typography
--font-display: 'Abril Fatface', Georgia, serif;
--font-body: 'Inter', 'Droid Sans', Arial, sans-serif;
}
// ============================================
// Editor Frame Styles
// ============================================
.editor-styles-wrapper {
font-family: var(--font-body);
background-color: var(--color-bg-dark);
color: var(--color-text-muted);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
// Typography
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-display);
color: var(--color-text);
font-weight: 400;
line-height: 1.2;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.875rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
p {
margin-bottom: 1rem;
}
a {
color: var(--color-accent-light);
text-decoration: none;
}
// Buttons
.wp-block-button__link {
font-family: var(--font-body);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 0.25rem;
padding: 0.75rem 1.5rem;
}
.wp-block-button.is-style-outline .wp-block-button__link {
border-width: 2px;
}
// Cover block adjustments
.wp-block-cover {
color: var(--color-text);
}
// Group blocks with dark backgrounds
.wp-block-group.has-background {
padding: 2rem;
}
// Columns
.wp-block-columns {
margin-bottom: 0;
}
// Separator
.wp-block-separator {
border-color: var(--color-border);
&.has-vivid-red-background-color {
background-color: var(--color-accent) !important;
border-color: var(--color-accent) !important;
}
}
// Images
.wp-block-image img {
max-width: 100%;
height: auto;
}
// Quote blocks
blockquote {
border-left: 4px solid var(--color-accent);
padding-left: 1.5rem;
margin-left: 0;
font-style: italic;
color: var(--color-text);
}
// List blocks
ul, ol {
padding-left: 1.5rem;
}
li {
margin-bottom: 0.5rem;
}
// Table blocks
.wp-block-table table {
border-collapse: collapse;
width: 100%;
}
.wp-block-table td,
.wp-block-table th {
border: 1px solid var(--color-border);
padding: 0.75rem;
}
.wp-block-table th {
background-color: var(--color-bg-card);
color: var(--color-text);
font-weight: 600;
}
}
// ============================================
// Color Palette Overrides
// ============================================
.editor-styles-wrapper {
// Map WordPress colors to theme colors
.has-vivid-red-background-color {
background-color: var(--color-accent) !important;
}
.has-vivid-red-color {
color: var(--color-accent) !important;
}
.has-black-background-color {
background-color: var(--color-bg-dark) !important;
}
.has-white-color {
color: var(--color-text) !important;
}
.has-cyan-bluish-gray-color {
color: var(--color-text-muted) !important;
}
}
// ============================================
// Responsive Adjustments
// ============================================
@media (max-width: 768px) {
.editor-styles-wrapper {
h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; }
}
}
wp-content/themes/homeproz/vite.config.js
+1
View File
@@ -11,6 +11,7 @@ export default defineConfig({
rollupOptions: {
input: {
main: resolve(__dirname, 'src/main.js'),
editor: resolve(__dirname, 'src/editor.js'),
},
output: {
entryFileNames: 'assets/[name].js',