diff --git a/docs/.vuepress/components/SponsorCard.vue b/docs/.vuepress/components/SponsorCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7c16e9a98700ceeda30d0607b84c22ad3fa4a22e
--- /dev/null
+++ b/docs/.vuepress/components/SponsorCard.vue
@@ -0,0 +1,47 @@
+<template>
+ <div class="sponsor-card">
+ <h4>{{ title }}</h4>
+ <p>{{ description }}</p>
+ <a v-if="link" :href="link" target="_blank">Learn More</a>
+ </div>
+</template>
+
+<script>
+export default {
+ props: {
+ title: {
+ type: String,
+ required: true
+ },
+ description: {
+ type: String,
+ required: true
+ },
+ link: {
+ type: String,
+ default: null
+ }
+ }
+};
+</script>
+
+<style scoped>
+.sponsor-card {
+ background-color: #f0f0f0;
+ border-radius: 10px;
+ padding: 20px;
+ margin: 10px 0;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.sponsor-card a {
+ display: inline-block;
+ margin-top: 10px;
+ color: #007BFF;
+ text-decoration: none;
+}
+
+.sponsor-card a:hover {
+ text-decoration: underline;
+}
+</style>
diff --git a/docs/.vuepress/components/Sponsors.vue b/docs/.vuepress/components/Sponsors.vue
new file mode 100644
index 0000000000000000000000000000000000000000..3f63e6fd859341ea42202ed854d9b91b81061a3e
--- /dev/null
+++ b/docs/.vuepress/components/Sponsors.vue
@@ -0,0 +1,87 @@
+<template>
+ <div class="sponsors-container">
+ <h2>Our Sponsors</h2>
+
+ <!-- Financial Grants Section -->
+ <div class="financial-grants-section">
+ <h3>Financial Grants</h3>
+ <SponsorCard
+ title="Maastricht University Financial Support"
+ description="Maastricht University has provided substantial financial support, allowing us to secure laboratory space and essential resources to advance our project."
+ />
+ <SponsorCard
+ title="MaCSBio"
+ description="MaCSBio, Maastricht University's Centre for Systems Biology, has backed our project with research funding and expert guidance in bioinformatics and computational biology."
+ />
+ <SponsorCard
+ title="SWOL - Universiteitsfonds Limburg"
+ description="The SWOL Universiteitsfonds Limburg has supported us with financial grants to fuel our innovative research and advance our sustainability-focused project goals."
+ />
+ </div>
+
+ <!-- Regular Sponsors Section -->
+ <div class="sponsors-section">
+ <SponsorCard
+ title="IDT"
+ description="Integrated DNA Technologies (IDT) has provided essential gene synthesis and sequencing services to help execute our genetic designs with precision."
+ />
+ <SponsorCard
+ title="Ascenscia"
+ description="Ascenscia Diabetes Care, a global company advancing solutions for diabetes, has been pivotal in funding key aspects of our research resources."
+ link="https://www.notion.so/Ascenscia-cebb3a0c25f2417a87e7b6745a3ae6fd?pvs=21"
+ />
+ <SponsorCard
+ title="NEB"
+ description="New England Biolabs (NEB) has supported our molecular biology work by supplying crucial enzymes and reagents."
+ link="https://www.notion.so/NEB-586c5b7314ba48aeba79d9f1b25f2c62?pvs=21"
+ />
+ <SponsorCard
+ title="Canva"
+ description="Canva’s design tools have allowed us to create stunning visuals for promoting our project and engaging our community."
+ link="https://www.notion.so/Canva-924b1c017cee4aae83b2fe1f4916a3b6?pvs=21"
+ />
+ <SponsorCard
+ title="SnapGene"
+ description="SnapGene’s software has been instrumental in designing, visualizing, and documenting our genetic constructs."
+ link="https://www.notion.so/Snapgene-39bd3adb61a143e1ae32692878606790?pvs=21"
+ />
+ <SponsorCard
+ title="eLabNext"
+ description="eLabNext’s laboratory software has supported our team by streamlining our research workflows and data management."
+ link="https://www.notion.so/eLab-Next-ed489704ac2748e8ae88319ed60540c7?pvs=21"
+ />
+
+ <h3>Grants</h3>
+ <SponsorCard
+ title="Promega Grant"
+ description="The Promega Grant has helped us acquire critical reagents and laboratory tools, driving the success of our experiments."
+ link="https://www.notion.so/Promega-Grant-4cd7eb46713644f8827b00e1fcf0b480?pvs=21"
+ />
+ </div>
+ </div>
+</template>
+
+<script>
+import SponsorCard from './SponsorCard.vue';
+
+export default {
+ components: {
+ SponsorCard
+ }
+};
+</script>
+
+<style scoped>
+.sponsors-container {
+ padding: 20px;
+}
+
+.financial-grants-section, .sponsors-section {
+ margin-top: 30px;
+}
+
+h3 {
+ margin-bottom: 15px;
+}
+
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 6a1923b7f1f066cbd3623df389f4e0c650ccd864..a6b955f5646d75ebaca702b6a8e27ec8bd8e3622 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -31,7 +31,7 @@ export default defineUserConfig({
{ text: 'Description', link: '/description' },
{ text: 'Engineering', link: '/engineering/'},
{ text: 'Experiments', link: '/experiments/'},
- { text: 'Notebook', link: '/notebook/'},
+ { text: 'Sponsors', link: '/sponsors'},
{ text: 'Results', link: '/results/'}
]
},
diff --git a/docs/.vuepress/layouts/SponsorsLayout.vue b/docs/.vuepress/layouts/SponsorsLayout.vue
new file mode 100644
index 0000000000000000000000000000000000000000..42d97783c1725a329fdb6737c09c6527feccd50f
--- /dev/null
+++ b/docs/.vuepress/layouts/SponsorsLayout.vue
@@ -0,0 +1,26 @@
+<template>
+ <Layout>
+ <!-- This is the standard layout content, including header, sidebar, etc. -->
+ <div class="content">
+ <Sponsors /> <!-- Insert your Sponsors component -->
+ </div>
+ </Layout>
+</template>
+
+<script>
+import Sponsors from '@/components/Sponsors.vue'; // Import your Sponsors.vue component
+
+export default {
+ components: {
+ Sponsors,
+ }
+};
+</script>
+
+<style scoped>
+.content {
+ margin: 0 auto;
+ max-width: 900px;
+ padding: 20px;
+}
+</style>
diff --git a/docs/sponsors.md b/docs/sponsors.md
new file mode 100644
index 0000000000000000000000000000000000000000..73dbf5fd876c230e4e3b12472316d013bb839a12
--- /dev/null
+++ b/docs/sponsors.md
@@ -0,0 +1,8 @@
+---
+title: Our Sponsors
+layout: SponsorsLayout
+---
+
+# Our Sponsors
+
+Thank you to our generous sponsors for supporting our iGEM journey.