Sections

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 26 sections in Taskify:

1. AboutHeroSection
2. BlogHeroSection
3. BlogPostsSection
4. BlogRelatedSection
5. ChangelogHeroSection
6. ChangelogsSection
7. CompanySection
8. ContactHeroSection
9. FaqSection
10. FooterSection
11. HomeFeature1Section
12. HomeFeature2Section
13. HomeFeature3Section
14. HomeHeroSection
15. IntegrationCommunicationSection
16. IntegrationEngineeringSection
17. IntegrationHeroSection
18. IntegrationMarketingSection
19. IntegrationsSection
20. NewsletterSection
21. PricingCardSection
22. PricingHeroSection
23. PricingTableSection
24. StatsSection
25. TeamSection
26. TestimonialSection

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 TeamSection component:

<template>
  <Container>
    <Section>
      <SectionHeader subtitle="OUR TEAM" title="Taskify Team" />

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[24px]">
        <ContentQuery path="/team-members" find="one" v-slot="{ data }">
          <MemberCard
            v-for="member in data.body"
            ...
          />
        </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:
    ...
---

::background-radial
::

::about-hero-section
::

::stats-section
::

::team-section
::

::testimonial-section
::

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