<template>
  <div class="container w-full ml-96">
    <h2 class="text-3xl font-bold ml-96 mb-20">项目展示</h2>
    <div class="flex flex-col space-y-8">
      <div class="flex space-x-6">
        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
          <ProjectCard :project="projects[0]" />
        </div>
        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
          <ProjectCard :project="projects[1]" />
        </div>
        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
          <ProjectCard :project="projects[2]" />
        </div>
      </div>
      <div class="flex space-x-6">
        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
          <ProjectCard :project="projects[3]" />
        </div>
        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
          <ProjectCard :project="projects[4]" />
        </div>
        <div class="bg-white border-gray-400 shadow-lg h-72 w-72">
          <ProjectCard :project="projects[5]" />
        </div>
      </div>

    </div>

  </div>
</template>

<script>
import ProjectCard from "@/components/MainPage/ProjectCard.vue";

export default {
  components: {
    ProjectCard,
  },
  data() {
    return {
      projects: [
        {
          title: 'Project 1',
          intro: 'introduction for Project 1.',
        },
        {
          title: 'Project 2',
          intro: 'introduction for Project 2.',
        },
        {
          title: 'Project 3',
          intro: 'introduction for Project 3.',
        },
        {
          title: 'Project 4',
          intro: 'introduction for Project 3.',
        },
        {
          title: 'Project 5',
          intro: 'introduction for Project 3.',
        },
        {
          title: 'Project 6',
          intro: 'introduction for Project 3.',
        },
      ],
    };
  },
};
</script>
