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">
|
<section class="agents-section">
|
||||||
<div class="container">
|
<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)) : ?>
|
<?php if (!empty($agents_data)) : ?>
|
||||||
<div class="agents-grid">
|
<div class="agents-grid">
|
||||||
<?php foreach ($agents_data as $agent_item) :
|
<?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_Archive {
|
||||||
.agents-section {
|
.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
|
// Agents Grid
|
||||||
|
|||||||
@@ -25,12 +25,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&--small {
|
&--small {
|
||||||
min-height: 30vh;
|
min-height: 225px;
|
||||||
padding: 3rem 0;
|
padding: 55px 0;
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
min-height: 25vh;
|
padding: 40px 0;
|
||||||
padding: 2rem 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-section-title {
|
.hero-section-title {
|
||||||
|
|||||||
Reference in New Issue
Block a user