2 files changed, 8 insertions, 39 deletions
diff --git a/src/routes/team/PersonCard.svelte b/src/routes/team/PersonCard.svelte
deleted file mode 100644
index 1b11193..0000000
--- a/src/routes/team/PersonCard.svelte
+++ /dev/null
@@ -1,36 +0,0 @@
-<script>
-  export let person;
-  export let direction;
-</script>
-
-<main>
-  {#if direction == 'right'}
-    <div class="row d-flex align-items-center my-2">
-      <div class="col-md-4 text-center">
-        <img class="img-fluid rounded shadow" src={person.image} alt={person.name} />
-      </div>
-      <div class="col-md-8 border p-2 bg-light rounded shadow">
-        <h2>{person.name}, {person.position}</h2>
-        <p>{person.bio}</p>
-        <a href="mailto:{person.email}"><p>{person.email}</p></a>
-      </div>
-    </div>
-  {:else}
-    <div class="row d-flex align-items-center my-2">
-      <div class="col-md-8 border p-2 bg-light rounded shadow">
-        <h2>{person.name}, {person.position}</h2>
-        <p>{person.bio}</p>
-        <a href="mailto:{person.email}"><p>{person.email}</p></a>
-      </div>
-      <div class="col-md-4 text-center">
-        <img class="img-fluid rounded shadow" src={person.image} alt={person.name} />
-      </div>
-    </div>
-  {/if}
-</main>
-
-<style>
-  p {
-    white-space: pre-wrap;
-  }
-</style>
diff --git a/src/routes/team/index.svelte b/src/routes/team/index.svelte
index d3c4549..3d27c0e 100644
--- a/src/routes/team/index.svelte
+++ b/src/routes/team/index.svelte
@@ -1,5 +1,5 @@
 <script>
-  import PersonCard from './PersonCard.svelte';  
+  import DirectionCard from '../../components/DirectionCard.svelte';
 
   import { onMount } from 'svelte';
   import { supabase } from '$lib/supabase';
@@ -32,10 +32,15 @@
 </script>
 
 <main>
+  <h1 class="text-center">Our Team</h1>
   {#if people.length}
     {#each people as person, i}
-      <div class="row">
-        <PersonCard person={person} direction={i % 2 ? 'left' : 'right'} />
+      <div class="row border-bottom">
+        <DirectionCard imageSpec={{image: person.image, alt: person.name}} direction={i % 2 ? 'left' : 'right'}>
+          <h2>{person.name}, {person.position}</h2>
+          <p>{person.bio}</p>
+          <a href="mailto:{person.email}"><p>{person.email}</p></a>
+        </DirectionCard>
       </div>
     {/each}
   {/if}