Customizing Your Homepage

Your homepage is the first thing visitors see. Make it count with a compelling hero image, featured listing, and well-organized content sections.

Hero Section

The hero is the large banner at the top of your homepage.

Setting Your Hero Image

A great hero image sets the tone for your entire site.

1. Go to Settings → Homepage
2. Find the Hero section
3. Click Upload Image
4. Select a high-quality image
5. Click Save

Hero Image Tips

What makes a good hero image:

• High resolution (at least 1920px wide)
• Professional quality
• Showcases luxury or lifestyle
• Not too busy (text needs to be readable over it)

Good choices:

• Stunning property exterior at golden hour
• Beautiful interior with natural light
• Scenic view (ocean, city skyline, mountains)
• Lifestyle imagery (pool, outdoor living space)

Avoid:

• Low resolution or blurry images
• Heavily watermarked photos
• Images with lots of small details that compete with text

Hero Tagline

Add a compelling tagline that appears over your hero image.

1. Go to Settings → Homepage
2. Find the Tagline field in the Hero section
3. Enter your tagline (keep it short—under 10 words)
4. Click Save

Tagline examples:

• "Miami's Luxury Real Estate Expert"
• "Your Waterfront Lifestyle Starts Here"
• "Exceptional Homes. Exceptional Service."

Hero Variants

The hero section supports multiple variants:

Set the variant in Dashboard → Website → Home → Hero → Variant.

AI Search Hero

When using the ai-search variant, visitors can type natural language queries (e.g., "3 bed waterfront condo under $2M").

Suggestion chips: Add clickable suggestion chips to guide users:

// workspace.settings.site.hero.aiSearchChips
[
  { label: "Waterfront Homes", mobileLabel: "Waterfront", query: "waterfront homes" },
  { label: "Under $1M", query: "homes under one million" },
  { label: "New Construction", query: "new construction condos" }
]

Hero Video Background

Replace the static hero image with a video background:

1. Go to Dashboard → Website → Home → Hero
2. Switch Media Type to Video
3. Choose a source:
   • Upload — Direct video upload to Supabase Storage
   • YouTube — Paste a YouTube URL
   • Vimeo — Paste a Vimeo URL
   • URL — Any direct video URL
4. Upload a Poster Image (fallback shown while video loads)
5. Click Save

Video upload flow: The dashboard uses signed URLs for large video uploads (/api/dashboard/hero-video/signed-url → upload → /api/dashboard/hero-video/confirm).

Featured Listing

Showcase a special property right on your homepage with an eye-catching animated display.

Enabling Featured Listing

1. Go to Settings → Homepage
2. Find the Featured Listing section
3. Toggle Enable Featured Listing on
4. Click Select Listing
5. Search for and select the property you want to feature
6. Click Save

Choosing What to Feature

Feature properties that:

• Have excellent photos
• Represent your brand and price point
• Are currently active (not pending or sold)
• Showcase what makes you unique

Updating Your Featured Listing

Change your featured listing regularly to:

• Highlight new inventory
• Feature upcoming open houses
• Showcase seasonal properties

To change it, repeat the steps above and select a different listing.

Service Areas Section

This section displays the neighborhoods you specialize in as clickable cards.

How It Works

If you have service areas set up, they automatically appear on your homepage as a grid of cards showing:

• Area name and tagline
• Hero image
• Listing count
• Starting price

Customizing Display Order

Areas appear in the order you set in the Service Areas section:

1. Go to Service Areas
2. Drag areas to reorder them
3. The homepage will reflect the new order

Hiding Service Areas from Homepage

If you want service areas for SEO but don't want them on the homepage:

1. Go to Settings → Homepage
2. Toggle Show Service Areas off
3. Click Save

Value Propositions

Communicate what makes you different with value proposition cards.

Setting Up Value Props

1. Go to Settings → Homepage
2. Find the Value Propositions section
3. For each card, enter:
   • Title — Short headline (e.g., "Local Expertise")
   • Description — 1-2 sentences explaining the benefit
   • Icon — Choose from available icons (optional)
4. Click Save

Value Prop Ideas

Latest Posts Section

If the Blog feature is enabled, display recent blog posts on your homepage:

1. Go to Dashboard → Website → Home
2. Find the Latest Posts section
3. Configure:
   • Section Title — Heading text (default: "Latest Insights")
   • Subtitle — Optional subtitle
   • Max Posts — Number to display (1-6, default: 3)
   • Categories — Optionally filter by specific post categories
   • Show View All Link — Link to /blog page
4. Click Save

Posts appear in reverse chronological order by published_at date.

Instagram Feed Section

Display your Instagram photos on the homepage as a responsive photo grid with your @handle above.

1. Go to Dashboard → Website → Home
2. Select the Instagram Feed tab
3. Toggle the section on
4. Choose a source:
   • Manual Photos — Upload 4-8 curated images from your Media Library
   • Behold Feed — Paste a Behold.so Feed ID for auto-updating photos from Instagram
5. Set the number of photos to display (4, 6, or 8)
6. Click Save

Your Instagram handle is displayed automatically — either from your Social Links (manual mode) or from the Behold API response.

For full setup instructions including Behold configuration, see Instagram Feed.

Agent Spotlight Section

Showcase yourself with a featured portrait and call-to-action:

1. Go to Dashboard → Website → Home
2. Find the Agent Spotlight section
3. Configure:
   • Eyebrow — Small text above headline (default: "Meet Your Agent")
   • Headline — Auto-populated from agent name
   • Body — Auto-populated from agent bio
   • CTA Button — Text and link (default: "Schedule a Consultation" → /contact)
   • Background Style — brand-wash, editorial-dark, or clean
   • Image Position — Left or right
   • Custom Image — Override the agent photo
4. Click Save

Homepage Builder

The visual homepage editor is available at Dashboard → Website → Home (/dashboard/website/home). It provides a drag-and-drop interface for managing all homepage sections.

Homepage Sections Order

You can control which sections appear and in what order:

1. Go to Dashboard → Website → Home
2. Find the Sections area
3. Drag sections to reorder them
4. Toggle sections on/off as needed
5. Click Save

Available Sections

Mobile Preview

Your homepage looks different on mobile devices. Always check:

1. Make changes and save
2. Open your site on your phone (or use browser dev tools)
3. Scroll through the entire page
4. Verify all sections look good and are readable

Troubleshooting

Hero image looks cropped incorrectly

The hero image is displayed to fill the available space, which may crop edges:

• Use landscape-oriented images (wider than tall)
• Keep important content in the center
• Test on both desktop and mobile

Featured listing not showing

• Make sure the listing is still active
• Verify the toggle is enabled
• Check that the listing has at least one photo

Service areas not appearing

• Confirm you have at least one service area created
• Check that the "Show Service Areas" toggle is on
• Verify areas have listing counts (empty areas may not display)

Changes not appearing

• Clear your browser cache
• Wait a moment and refresh
• Try viewing in an incognito/private window