Home Page Components

These components compose the restaurant directory's landing page. The Hero component drives the primary search experience; the listing grids (FeaturedRestaurants, PopularThisWeek, NewRestaurants) each accept a restaurants array from the page's async data calls. Static editorial blocks (SpecialOffers, Testimonials, Showcase) require no props and use internal data. The Stats subcomponent is rendered inside the Hero automatically using domainInfo.stats.

The auto-registered app/pages/index.vue page wires all of these together and uses the useDomain() composable to fetch data.

Components

<XRdHomePageHero />

Full-screen parallax hero with a background image, overlay, and an embedded search card. The search card contains cuisine and location select menus. Below the card, XRdHomePageStats is automatically rendered using domainInfo.stats. Config is read from useAppConfig().xRestaurants.

<XRdHomePageHero
  :domain-info="domainInfo"
  :featured-restaurants="featuredRestaurants"
/>

Props

<XRdHomePageFeaturedRestaurants />

Three-column grid of XRdProfileCard components with a "View All" link. Shows an empty state when the array is empty.

<XRdHomePageFeaturedRestaurants :restaurants="featuredRestaurants" />

Props

<XRdHomePagePopularThisWeek />

Three-column grid of trending restaurants using XRdProfileCard. Includes a "View All" link to /restaurants.

<XRdHomePagePopularThisWeek :restaurants="popularRestaurants" />

Props

<XRdHomePageNewRestaurants />

Four-column grid (responsive) of the most recently added restaurants. Includes a "View All" link.

<XRdHomePageNewRestaurants :restaurants="newestRestaurants" />

Props

<XRdHomePageStats />

Inline stat bar rendered inside the Hero component. Formats large numbers (1K, 1M) and displays restaurant count, review count, and average rating.

<XRdHomePageStats :stats="domainInfo.stats" />

Props

<XRdHomePageSpecialOffers />

Static promotional section with three gradient offer cards. No props — uses internal hardcoded offers data.

<XRdHomePageSpecialOffers />

Props

None. Offer data is defined internally.

<XRdHomePageTestimonials />

Grid of six static customer review quote cards with 5-star ratings. No props — uses internal hardcoded testimonials.

<XRdHomePageTestimonials />

Props

None.

<XRdHomePageShowcase />

Two-column marketing layout: a text column with feature bullet points and CTA buttons linking to /restaurants and /articles, plus a decorative icon panel.

<XRdHomePageShowcase />

Props

None.

<XRdHomePageLatestStories />

Three-column grid of UBlogPost cards with a "Read More" CTA per story. Expects story objects from the Nuxt Content articles collection.

<XRdHomePageLatestStories :stories="stories" />

Props

<XRdHomePageLocalDiningGuide />

Fetches and renders a Nuxt Content document from queryCollection("misc").path("/misc/homepage-seo") as prose. Used for SEO long-form content.

<XRdHomePageLocalDiningGuide />

Props

None. Content is fetched internally from the misc collection at /misc/homepage-seo.

<XRdHomePageFAQ />

Accordion FAQ section. Fetches items from queryCollection("misc").path("/misc/faqs") using the page.meta.faqs array.

<XRdHomePageFAQ />

Props

None. Content sourced from the misc Nuxt Content collection.

<XRdHomePageFeatures />

Wraps a UPageSection with a static array of three feature items (icons, fonts, color mode). Intended as a starting template for platform features.

<XRdHomePageFeatures />

Props

None.

<XRdHomePageGrid />

Renders a UPageGrid of UPageCard components from a static internal cards array. Use as a starting point for a feature highlight grid.

<XRdHomePageGrid />

Props

None.

Pages

The app/pages/index.vue auto-registered page assembles the full home page:

AI Context

package: "@xenterprises/nuxt-x-restaurants"
prefix: XRd
category: HomePage
components:
  - XRdHomePageHero
  - XRdHomePageFeaturedRestaurants
  - XRdHomePagePopularThisWeek
  - XRdHomePageNewRestaurants
  - XRdHomePageStats
  - XRdHomePageSpecialOffers
  - XRdHomePageTestimonials
  - XRdHomePageShowcase
  - XRdHomePageLatestStories
  - XRdHomePageLocalDiningGuide
  - XRdHomePageFAQ
  - XRdHomePageFeatures
  - XRdHomePageGrid
use-when: >
  Building a restaurant directory home page. Use Hero for primary search,
  FeaturedRestaurants / PopularThisWeek / NewRestaurants to display listings,
  Stats for social proof, SpecialOffers and Testimonials for conversion,
  LatestStories for editorial content, and LocalDiningGuide / FAQ for SEO.
  All listing grids accept a restaurants array; content-fetching components
  (FAQ, LocalDiningGuide) rely on a Nuxt Content misc collection.
auto-registered-pages:
  - route: /
    file: app/pages/index.vue