1. About Sections

You can imagine sections as a container for components. They are used to wrap components and provide a consistent layout. Sections are strictly fills the whole row of the page. So customizing of the page is done easily just by swapping the order of sections and easily adding new sections to page.

Sections are located in the components/sections folder. Here is the list of all the sections that are available and totaling up 31 sections in Nexus AI:

1. AboutHeroSection
2. AboutStatsSection
3. BlogDetailSection
4. BlogFilterSection
5. BlogRelatedSection
6. ChangelogDetailSection
7. ChangelogSection
8. CompanySection
9. ContactFormSection
10. FaqSection
11. Features1Section
12. Features2Section
13. Features3Section
14. Features4Section
15. HelpFilterSection
16. HomeHeroSection
17. IntegrationDetailSection
18. IntegrationRelatedSection
19. IntegrationsFilterSection
20. IntegrationsHeroSection
21. IntegrationsSection
22. LegalDpaSection
23. LegalHeroSection
24. LegalPrivacySection
25. LegalServiceSection
26. LegalVulnerabilitySection
27. NewsletterSection
28. PricingFeaturesSection
29. PricingPlansSection
30. TeamMembersSection
31. TestimonialsSection

2. Usage

Sections are containers for components. They will be fetching data from the content layer and passing it to the components. Section components are only used in the pages.

Here is a full example of TeamMembersSection component:

<template>
  <Container>
    <Section>
      <SectionHeader
        badge-icon="heroicons:user-group"
        badge-label="Our Team"
        title="Meet the Onyx team."
      />

      <div
        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-x-[24px] gap-y-[24px]"
      >
        <ContentQuery path="/team-members" find="one" v-slot="{ data }">
          <MemberCard
            v-for="member in data.body"
            :key="member.id"
            :name="member.name"
            :role="member.role"
            :image="member.image"
            :twitter="member.twitter"
            :facebook="member.facebook"
            :linkedin="member.linkedin"
          />
        </ContentQuery>
      </div>
    </Section>
  </Container>
</template>

Above example of section starts with base component of Container and Section components. Container base component is used to enforce page responsiveness and Section base component is for uniform spacing and padding.

SectionHeader is a base component is used to display the title and subtitle of the section.

And then we have a ContentQuery component which is used to fetch data from the content layer. MemberCard is a component that is used to display the team members. All of the looped MemberCard components are inside the grid layout.

Finally in the content/about.md content, list of sections are defined like this:

---
  seo:
    ...
---

::team-members-section
::

This is how you can use and customize sections in the content file.