Commercial Real Estate Listings Page

Create a professional, data-rich commercial real estate listings page for a CRE brokerage platform called "Vanguard Commercial" — specializing in office, retail, and industrial properties across major U.S. metros. The design should feel authoritative, clean, and efficient — built for brokers, tenants, and investors who need to evaluate properties quickly.

1. NAVIGATION BAR
- Logo: "Vanguard Commercial" in a bold sans-serif, navy blue icon mark (stylized building/skyline)
- Links: Properties, Markets, Services, Insights, About
- Right side: "List a Property" text link, phone number "1-800-VANGUARD", "Sign In" text link, "Contact Us" CTA (solid #1E3A5F navy)
- White background, subtle bottom shadow
- Sticky on scroll
- Mobile: logo + hamburger + "Contact" mini CTA

2. PAGE HEADER & SEARCH BAR
- Background: #1E3A5F navy with subtle geometric pattern overlay
- Headline: "Commercial Properties for Lease & Sale"
- Subheadline: "Browse 2,400+ listings across 35 U.S. markets"
- Full-width search bar (white, rounded, prominent):
  - Location input: "City, ZIP, or neighborhood" with autocomplete
  - Property type dropdown: Office, Retail, Industrial, Flex, Land, Mixed-Use
  - Transaction dropdown: For Lease, For Sale, For Sublease
  - "Search" button (solid #2563EB blue-600)
- Below search: quick filter chips — "Coworking Ready", "Move-in Ready", "New Construction", "Sublease Available", "Green Certified"
- Mobile: search inputs stack vertically, chips scroll horizontally

3. RESULTS TOOLBAR
- Left side: "248 properties found in Austin, TX" result count
- Sort dropdown: "Sort by: Newest" with options: Newest, Price (Low-High), Price (High-Low), Size (Small-Large), Size (Large-Small)
- View toggle: Grid view (cards) | List view (rows) | Map view (split)
- "Save Search" button with bell icon (creates email alert)
- "Draw on Map" tool for custom area searches
- Thin bottom border separator

4. FILTER SIDEBAR (left, 280px wide)
- Collapsible filter groups:
  - PROPERTY TYPE: Checkboxes — Office (142), Retail (58), Industrial (31), Flex (12), Land (5)
  - PRICE RANGE:
    - For Lease: dual slider $15 - $85 /SF/year + manual inputs
    - For Sale: dual slider $500K - $50M + manual inputs
  - SIZE (SF): dual slider 500 - 100,000+ SF + manual inputs
  - BUILDING CLASS: Checkboxes — Class A (89), Class B (112), Class C (47)
  - YEAR BUILT: Range — Before 2000, 2000-2010, 2010-2020, 2020+
  - AMENITIES: Checkboxes — Parking Included, On-Site Management, Fiber Internet, Loading Docks, Conference Rooms, Rooftop Access, EV Charging
  - CERTIFICATIONS: LEED, ENERGY STAR, WELL Building
  - AVAILABILITY: Available Now, Within 30 Days, Within 90 Days
- Each filter group: collapsible with count indicators
- "Clear All Filters" link at top
- "Apply Filters" sticky button at bottom on mobile
- Mobile: filter sidebar becomes a slide-in drawer triggered by "Filters" button with active count badge

5. PROPERTY LISTING CARDS (Grid View — 3 columns)
- Card 1: "Frost Tower — Suite 2400"
  - Cover photo: modern glass office building exterior
  - Badge: "FOR LEASE" (#2563EB blue) + "CLASS A" (#059669 green)
  - Title: "Frost Tower — Suite 2400"
  - Address: "401 Congress Ave, Austin, TX 78701"
  - Specs row with icons: 12,500 SF · 24th Floor · Built 2003 · Renovated 2022
  - Price: "$52.00 /SF/year" (bold) — "$54,167/month"
  - Tags: "Full-Floor", "City Views", "Spec Suite"
  - Broker: "Listed by Sarah Chen, Vanguard Commercial"
  - Bottom row: "Save" heart icon, "Tour" calendar icon, "Details →" link

- Card 2: "Domain NORTHSIDE — Retail Pad"
  - Cover photo: modern mixed-use retail center
  - Badge: "FOR LEASE" + "RETAIL"
  - Title: "Domain NORTHSIDE — Retail Pad 8"
  - Address: "11600 Domain Dr, Austin, TX 78758"
  - Specs: 3,200 SF · Ground Floor · Built 2019 · Endcap
  - Price: "$42.00 /SF/year NNN" — "$11,200/month"
  - Tags: "High Traffic", "Patio Available", "Restaurant Ready"
  - Broker: "Listed by Marcus Rivera, Vanguard Commercial"

- Card 3: "East Austin Industrial — Warehouse"
  - Cover photo: industrial warehouse with loading docks
  - Badge: "FOR SALE" (#DC2626 red) + "INDUSTRIAL"
  - Title: "East Austin Distribution Center"
  - Address: "4800 E 7th St, Austin, TX 78702"
  - Specs: 45,000 SF · 24' Clear Height · Built 2015 · 4 Loading Docks
  - Price: "$6,750,000" (bold) — "$150/SF"
  - Tags: "Fenced Yard", "Sprinklered", "Rail Adjacent"
  - Broker: "Listed by Tom Bradley, Vanguard Commercial"

- Card layout: cover image (aspect 16:10) on top, content below, 12px border-radius, white background, thin border (#E2E8F0), shadow on hover
- Pagination: "Showing 1-12 of 248" with page numbers and next/prev arrows

6. MAP VIEW (Split Layout — 50/50)
- Left half: scrollable property cards in a list format (condensed)
- Right half: interactive map with property pins
- Map pins: color-coded by type — blue (office), green (retail), orange (industrial), gray (other)
- Pin hover: tooltip with property name, price, and SF
- Pin click: opens card overlay on the map
- Map controls: zoom, satellite/map toggle, fullscreen
- Cluster indicators for dense areas showing count
- "Search this area" button when map is panned
- Mobile: map view becomes full-screen with a bottom sheet listing

7. FEATURED LISTINGS BANNER (between results)
- Subtle light blue background (#EFF6FF)
- "Featured Listing" label
- Wider card format — image left (40%), details right (60%)
- Property: "The Austin Tech Center — Full Building"
  - 185,000 SF, Class A, LEED Platinum, built 2021
  - $58.00/SF/year — Divisible to 15,000 SF
  - "Flagship campus opportunity in East Austin's booming tech corridor. Features 10,000 SF rooftop amenity deck, 500-space parking garage, and campus-grade fiber connectivity."
  - "Schedule a Tour" CTA button (#2563EB)
- Mobile: stacks vertically

8. MARKET INSIGHTS STRIP
- Background: #F8FAFC light gray
- Headline: "Austin Market Snapshot — Q1 2026"
- 4 stat columns:
  - Office Vacancy: 14.2% (↓ 0.8% from Q4)
  - Avg. Office Rent: $48.50/SF (↑ 3.2% YoY)
  - Retail Absorption: +320,000 SF (Q1)
  - Industrial Cap Rate: 5.8% (stable)
- "Download Full Market Report →" link
- Mobile: 2x2 grid

9. LEAD CAPTURE / CONTACT SECTION
- Split layout: form left (55%), broker info right (45%)
- Form:
  - Headline: "Can't Find What You're Looking For?"
  - Subtitle: "Our team covers every submarket in Austin. Tell us what you need."
  - Fields: Full Name, Company, Email, Phone, Property Type (dropdown), Size Needed (dropdown: Under 2,000 SF / 2,000-5,000 / 5,000-15,000 / 15,000-50,000 / 50,000+), Preferred Submarket (multi-select), Additional Notes (textarea)
  - "Submit Requirement" button (solid #1E3A5F navy)
  - Privacy note: "Your information is confidential and never shared with third parties."
- Broker info side:
  - "Your Austin Team" headline
  - 3 broker mini-profiles (headshot circle, name, title, specialization, phone, email)
    - Sarah Chen — Managing Director, Office — sarah@vanguard.com
    - Marcus Rivera — Senior VP, Retail — marcus@vanguard.com
    - Tom Bradley — Director, Industrial — tom@vanguard.com
- Mobile: stacks vertically, form first

10. FOOTER
- Background: #1E3A5F navy with white text
- 4 columns:
  - Properties: Office, Retail, Industrial, Flex, Land, All Listings
  - Services: Tenant Representation, Landlord Leasing, Investment Sales, Property Management, Consulting
  - Markets: Austin, Dallas, Houston, San Antonio, Denver, Phoenix
  - Company: About Us, Team, Careers, Insights, Press, Contact
- Bottom bar: "© 2026 Vanguard Commercial Real Estate. All rights reserved." + Privacy · Terms · Licensing
- Brokerage license info: "Texas Real Estate Commission — License #987654"

Design: Professional, data-forward, authoritative. Primary: #1E3A5F (navy for headers, footer, and primary actions), accent: #2563EB (blue-600 for CTAs and interactive elements), success: #059669 (green for positive indicators), danger: #DC2626 (red for sale badges). Background: white (#FFFFFF) for main content, #F8FAFC for alternating sections. Typography: Inter for all text (clean, professional), with weight variations for hierarchy. Cards with 12px border-radius, thin borders, subtle shadows. Data-dense but well-organized with strong visual hierarchy. Tables and grids over decorative elements.

Responsive: Mobile-first. Filter sidebar becomes slide-in drawer with "Filters (3)" count badge. Property cards switch to single column with swipeable photo carousel. Map view becomes full-screen with bottom sheet. Search bar inputs stack vertically. Market stats grid becomes 2x2. Lead capture form and broker info stack. All touch targets minimum 44px. Sticky bottom bar on mobile with "Map" and "Filters" toggle buttons.