<script setup>
import AboutHero from '@/components/sections/about/AboutHero.vue'
import AboutVision from '@/components/sections/about/AboutVision.vue'
import AboutProblem from '@/components/sections/about/AboutProblem.vue'
import AboutSolution from '@/components/sections/about/AboutSolution.vue'
import AboutPrinciples from '@/components/sections/about/AboutPrinciples.vue'
import AboutFuture from '@/components/sections/about/AboutFuture.vue'
import AboutCTA from '@/components/sections/about/AboutCTA.vue'
</script>

<template>
  <div class="flex flex-col">

    <section class="border-b border-border">
      <div class="container mx-auto">
        <AboutHero />
      </div>
    </section>

    <section class="border-b border-border">
      <div class="container mx-auto">
        <AboutVision />
      </div>
    </section>

    <section class="border-b border-border bg-card">
      <div class="container mx-auto">
        <AboutProblem />
      </div>
    </section>

    <section class="border-b border-border">
      <div class="container mx-auto">
        <AboutSolution />
      </div>
    </section>

    <section class="border-b border-border bg-card">
      <div class="container mx-auto">
        <AboutPrinciples />
      </div>
    </section>

    <section class="border-b border-border">
      <div class="container mx-auto">
        <AboutFuture />
      </div>
    </section>

    <section>
      <div class="container mx-auto">
        <AboutCTA />
      </div>
    </section>

  </div>
</template>