TEMPLATE REFERENCE -- NOT A PUBLIC PAGE

TEMPLATE REFERENCE

Neighborhood Sub-Page Template

Reference Guide -- based on the Living in Hope Valley page structure

Last updated: 2026-08-20 · Source file: living-in-durham/hope-valley.astro

Related template: Living in [City] Page Template — for building full city pages (the parent of these neighborhood pages).

Quick Reference

Color Tokens

  • navy: #0A2436 (dark background sections)
  • gold: #EEBE64 (stat values in data bar)
  • offWhite: #EDECEA (alternating section background)
  • lime: #D0FF14 (accent links, badges, borders)

Zigzag Layout Classes

  • .nb-row -- display: flex, align-items: center, gap: 36px
  • .nb-col-text -- flex: 1 (text column)
  • .nb-col-img -- flex: 1 (image column)
  • Stacks to single column on mobile (max-width: 768px)

Section Styles

  • Navy sections: white headings, #d1d5db body text, lime links
  • Off-white sections: navy headings, #333 body text
  • All sections: py-16 sm:py-20
  • Max content width: 960px (px-6 padding)

22-Section Template Structure

Sections alternate between navy and off-white backgrounds. Zigzag rows alternate image left / image right.

  1. 1. Breadcrumb (navy, pt-6 pb-2)
  2. 2. Hero (full-width bg image, overlay, H1 + subtitle)
  3. 3. Data Bar (4 stats in gold, 2-col / 4-col grid)
  4. 4. Overview & History (IMG LEFT, navy bg)
  5. 5. Housing Styles (IMG RIGHT, off-white bg)
  6. 6. HOAs & Sections (IMG LEFT, navy bg)
  7. 7. Major Amenity (IMG RIGHT, off-white bg)
  8. 8. Amenity Subsection A (IMG LEFT, navy bg)
  9. 9. Amenity Subsection B (IMG RIGHT, off-white bg)
  10. 10. Amenity Subsection C (IMG LEFT, navy bg)
  11. 11. Parks & Trails (IMG RIGHT, off-white bg)
  1. 12. Shopping & Dining (IMG LEFT, navy bg)
  2. 13. Hospitals (IMG RIGHT, off-white bg)
  3. 14. Schools (IMG LEFT, navy bg)
  4. 15. Commute Times (full-width, off-white bg, 5 cards)
  5. 16. Homes for Sale (full-width, navy, IDX iframe)
  6. 17. Tips from Phil (navy, amber left-border card)
  7. 18. FAQ (navy, 5 accordion questions)
  8. 19. How It Compares (off-white, centered text)
  9. 20. Buyer Home Guarantee (IMG LEFT, dark navy #061726)
  10. 21. CTA (navy, centered, 2 buttons)
  11. 22. Phil's Perspective (navy, quote box + headshot)

+ Final: Back Link button (off-white, outlined, links to parent city neighborhoods page)

Core Layout Patterns

Zigzag Pattern

The zigzag pattern uses three CSS classes defined in an is:global style tag at the bottom of the page. Each zigzag section is a full-width section with a max-w-[960px] inner container.

Image Left (navy background): nb-col-img comes first in the markup, followed by nb-col-text. Headings use text-white, body text uses color #d1d5db, links use color #ccff00.

Image Right (off-white background): nb-col-text comes first with style="order: -1" to swap visual order while keeping correct source order. Headings use the navy variable, body text uses color #333.

Images in both patterns: w-full h-[340px] object-cover rounded-[14px], loading="lazy", with width and height attributes.

Hero Section

Full-width section with relative overflow-hidden. Contains an absolute-positioned img filling the inset, plus a 0.7 opacity dark overlay. The text content uses relative positioning with max-w-[960px] and centered text. H1 uses font-display text-4xl sm:text-5xl lg:text-7xl font-bold. Subtitle uses text-xl sm:text-2xl font-semibold text-white/80.

Data Bar (4 Stats)

A 4-column grid (2 columns on mobile via CSS) using the .stat-grid class. Values displayed in gold (#EEBE64) using font-display text-3xl sm:text-4xl lg:text-5xl font-bold. Labels in white/60 uppercase tracking-wider. The grid is defined in an inline style tag within the section.

HOA Info Boxes

Multiple info boxes stacked vertically inside a zigzag text column. Each box: rounded-xl p-5, background rgba(255,255,255,0.08), border 1px solid rgba(255,255,255,0.15). HOA names use font-bold text-lg with color #ccff00. Links also use #ccff00 with underline font-semibold and target="_blank".

Commute Times Grid

Full-width centered heading on off-white background. A 5-column grid (2 on mobile): grid grid-cols-2 lg:grid-cols-5 gap-4. Each card: rounded-xl p-5 text-center, background #f8fafc, border 1px solid #e2e8f0. Destination in navy bold, time/distance below.

Homes for Sale (IDX Iframe)

Full-width section using max-w-7xl. RealScout iframe embed: 100% width, min-width 1024px (prevents IDX tool from collapsing), height 800px, border-radius 12px, loading="lazy". The iframe src is a unique RealScout shared search URL ending with ?displayType=gallery.

FAQ Accordion

5 details elements with group class. Summary: flex px-6 py-5 cursor-pointer text-white font-bold. Chevron icon uses group-open:rotate-180 for rotation. Background: rgba(255,255,255,0.08) with border. Answer panels: px-6 pb-6, text #d1d5db, links in #ccff00.

Tips from Phil

Navy background. Rounded-2xl card: background rgba(255,255,255,0.07), border-left 6px solid #f59e0b (amber). Bulleted list with space-y-6 spacing. Strong labels in white, body text in #d1d5db.

Buyer Home Guarantee

Dark navy background (#061726 -- darker than the standard navy). Image is 480px tall. Includes a lime badge, highlighted promise box with border-left: 4px solid #ccff00, and a 3-column stat grid with blue-bordered cards. CTA button links to /buyer-home-guarantee/.

Phil's Perspective (Quote Box)

Navy background. Centered heading. Flex row with headshot (w-14 h-14 sm:w-16 sm:h-16, rounded-full, object-cover object-top) on the left, italic quote text on the right. Card uses rgba(255,255,255,0.08) background and border-left: 6px solid #ccff00. Attribution in lime at the bottom.

CTA Section

Navy background, centered. Two buttons: primary blue (#0284c7) linking to the booking URL, and a white-border secondary button linking to soldzerocommission.com. Both use uppercase tracking-wide font-bold with rounded-full styling.

CSS & Global Style Tag

Place the following is:global style tag at the bottom of your page, inside the Layout but before the closing HTML:

style is:global
  .nb-row display: flex; align-items: center; gap: 36px;
  .nb-col-text flex: 1;
  .nb-col-img flex: 1;
  .nb-col-img img width: 100%; height: 340px; object-fit: cover; border-radius: 14px;
  @media max-width: 768px
    .nb-row flex-direction: column; gap: 20px;
/style

(Angle brackets and colons omitted for clarity -- see hope-valley.astro for the exact syntax.)

Frontmatter Setup

Imports & Constants

  • Import Layout and Icon from astro-icon/components
  • dateModified = today's ISO date
  • siteURL = the canonical site URL
  • Color tokens: navy, gold, offWhite, white, lime, primary
  • Image URL constants for hero and all zigzag images (11 total)
  • communityDropdown array (copy from an existing page)
  • headshotUrl for Phil's portrait
  • siteLogo for the header

JSON-LD Structure

  • Place -- neighborhood name, address, geo coordinates, description, sameAs
  • FAQPage -- 5 questions with acceptedAnswer
  • BreadcrumbList -- Home > City > Neighborhood
  • WebPage -- title, description, dateModified, references #agent and #person
  • All nodes use the @graph array pattern

Image Variables Map

  • heroImage -- Hero background
  • imgOverview -- Overview & History (IMG LEFT, navy)
  • imgHousing -- Housing Styles (IMG RIGHT, off-white)
  • imgHoa -- HOAs (IMG LEFT, navy)
  • imgCountryClub -- Major Amenity (IMG RIGHT, off-white)
  • imgGolf -- Amenity A (IMG LEFT, navy)
  • imgRacquet -- Amenity B (IMG RIGHT, off-white)
  • imgDining -- Amenity C (IMG LEFT, navy)
  • imgParks -- Parks (IMG RIGHT, off-white)
  • imgShopping -- Shopping (IMG LEFT, navy)
  • imgMedical -- Hospitals (IMG RIGHT, off-white)
  • imgSchools -- Schools (IMG LEFT, navy)

Implementation Checklist

  • Copy the full header + navigation + mobile menu from an existing page
  • Copy the dropdown scripts (desktop hover + mobile toggle)
  • Include the footer from the shared Layout
  • All external links use target="_blank" rel="noopener noreferrer"
  • All non-hero images use loading="lazy"
  • Unique title (25-65 chars) and meta description (80-175 chars)
  • RealScout IDX iframe with unique shared search URL
  • Back link points to the parent city's neighborhood section

Reference: Zigzag Color Matrix

The alternating section backgrounds follow a strict pattern. Each section's background, heading, and body colors change based on whether the image is on the left or right.

Property Image Left (Navy bg) Image Right (Off-White bg)
Background#0A2436 (navy)#EDECEA (offWhite)
Headingtext-whitecolor: navy (#0A2436)
Body text#d1d5db (gray-300)#333
Links#ccff00 (lime)Standard blue
Strong texttext-whiteDefault bold