Add initial README.md for Astro Starter Kit: Minimal
This commit is contained in:
22
src/pages/members.astro
Normal file
22
src/pages/members.astro
Normal file
@@ -0,0 +1,22 @@
|
||||
---
|
||||
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||
const membersData = await Astro.glob('../../content/members/members-sample.md');
|
||||
const intro = membersData[0]?.frontmatter.intro || '';
|
||||
const members = membersData[0]?.frontmatter.members || [];
|
||||
---
|
||||
<BaseLayout>
|
||||
<h1 class="text-3xl font-headline font-bold text-primary mt-12 text-center">Meet Our Members</h1>
|
||||
<section class="max-w-3xl mx-auto mt-8 mb-12 bg-base-100 rounded-xl shadow p-6">
|
||||
<h2 class="text-xl font-bold mb-4 text-accent">Membership Benefits/Welfare Packages</h2>
|
||||
<div class="text-gray-700 whitespace-pre-line">{intro}</div>
|
||||
</section>
|
||||
<section class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 px-4 mb-20">
|
||||
{members.map(member => (
|
||||
<div class="card bg-base-100 shadow-lg rounded-xl flex flex-col items-center p-4">
|
||||
<img src={member.image} alt={member.name} class="w-40 h-40 object-cover rounded-lg mb-4" />
|
||||
<h3 class="font-bold text-lg text-primary mb-1">{member.name}</h3>
|
||||
<p class="text-sm text-gray-600">{member.role}</p>
|
||||
</div>
|
||||
))}
|
||||
</section>
|
||||
</BaseLayout>
|
Reference in New Issue
Block a user