Improve hero and agents page layout
- Hero small variant: 55px top/bottom padding, 225px min-height - Agents page: Added section header with title, subtitle, and border separator - Provides visual separation between hero and content grid 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -53,6 +53,11 @@ usort($agents_data, function($a, $b) {
|
||||
|
||||
<section class="agents-section">
|
||||
<div class="container">
|
||||
<header class="section-header">
|
||||
<h2 class="section-header-title">Meet Our Agents</h2>
|
||||
<p class="section-header-subtitle">Our experienced team is here to guide you through every step of your real estate journey.</p>
|
||||
</header>
|
||||
|
||||
<?php if (!empty($agents_data)) : ?>
|
||||
<div class="agents-grid">
|
||||
<?php foreach ($agents_data as $agent_item) :
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
@@ -6,7 +6,38 @@
|
||||
|
||||
.Agents_Archive {
|
||||
.agents-section {
|
||||
padding: 3rem 0 4rem;
|
||||
padding: 4rem 0;
|
||||
}
|
||||
|
||||
// Section Header
|
||||
.section-header {
|
||||
text-align: center;
|
||||
max-width: 700px;
|
||||
margin: 0 auto 3rem;
|
||||
padding-bottom: 2rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.section-header-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.75rem;
|
||||
color: var(--color-text);
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.section-header-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-muted);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (min-width: 768px) {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Agents Grid
|
||||
|
||||
@@ -25,12 +25,11 @@
|
||||
}
|
||||
|
||||
&--small {
|
||||
min-height: 30vh;
|
||||
padding: 3rem 0;
|
||||
min-height: 225px;
|
||||
padding: 55px 0;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
min-height: 25vh;
|
||||
padding: 2rem 0;
|
||||
padding: 40px 0;
|
||||
}
|
||||
|
||||
.hero-section-title {
|
||||
|
||||
Reference in New Issue
Block a user