wohoo cool new stuff (json generation, better layouts, more to come)

src/pages/index.astro

@@ -1,44 +1,21 @@
 ---
 import Layout from '../layouts/Layout.astro';
+import BaseSection from '../layouts/baseSection.astro';
 import ServantCard from '../components/servantCard.astro';
+import CeCard from '../components/ceCard.astro';
+
+import servantdata from '../../static/servantdata.json'
+import cedata from '../../static/cedata.json'
 ---
 
-<Layout title="Firq TA on Astro.">
-	<main>
-		<div class="servant-section">
-			<h1 class="section-title">Servant offering</h1>
-			<div class="servants-container container">
-				<ServantCard 
-					name="Skadi" 
-					level="120" 
-    				skills="10 / 10 / 10"
-    				np="NP4"
-    				asc="03"
-    				ml="10"
-    				bond10="true"
-				/>
-			</div>
-		</div>
-	</main>
+<Layout title="Firq TA on Astro">
+	<BaseSection title="Servant Offering">
+		{servantdata.map((item) => (<ServantCard {...item}/>))}
+	</BaseSection>
+	<BaseSection title="CE Offering">
+		{cedata.map((item) => (<CeCard {...item}/>))}
+	</BaseSection>
 </Layout>
 
 <style>
-	.servants-container {
-    	row-gap: 1em;
-    	column-gap: 1em;
-    	justify-content: center;
-    	align-self: center;
-	}
-	.container {
-    	display: flex;
-    	flex-flow: row wrap;
-    	padding: 1em;
-		position: relative;
-	}
-	.servant-section {
-    	display: flex;
-    	flex-direction: column;
-    	justify-content: center;
-    	text-align: center;
-	}
 </style>