website schema

.gitignore

@@ -14,4 +14,7 @@
 .Rproj.user/92C2E8E5/sources/prop/INDEX
 .Rproj.user/92C2E8E5/sources/prop/INDEX
 .Rproj.user/92C2E8E5/pcs/source-pane.pper
-_site/
+_site/
+.Rproj.user
+
+/.quarto/

_quarto.yml

@@ -4,15 +4,24 @@ project:
 website:
   search: false
   navbar:
-    logo: "https://esqlabs.com/wp-content/uploads/2018/05/ESQLABS_final_600px.png"
+    logo: "assets/logo.png"
     right:
       - href: index.qmd
         text: Home
-      - about.qmd
+      - href: "#programs-section"
+        text: Programs
+      - href: "#events-section"
+        text: Events
+      - href: donate.qmd
+        text: Donate
+      - href: about.qmd
+        text: About
+      - href: contact_us.qmd
+        text: Contact Us
 
 format:
   html:
-    theme: cosmo
+    theme: lux
     css: styles.css
     toc: false
 

about.qmd

@@ -1,6 +1,86 @@
 ---
-title: "About"
+page-layout: full
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit
+```{=html}
 
+<div class="grid featurette mt-5 mb-5">
+      <div class="g-col-7">
+        <h2 class="featurette-heading">Our Story</h2>
+        <p class="lead">The Computational Life Sciences Foundation was founded to address the need for advanced computational tools in the life sciences. Our mission is to foster innovation and collaboration by developing and maintaining open source software solutions that improve research conditions and data quality in this vital field.
+</p>
+      </div>
+      <div class="g-col-5">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"></rect><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
+
+      </div>
+    </div>
+
+```
+
+
+```{=html}
+
+<div class="grid featurette mt-5 mb-5">
+
+      <div class="g-col-5">
+        <svg class="bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto" width="500" height="500" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 500x500" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#eee"></rect><text x="50%" y="50%" fill="#aaa" dy=".3em">500x500</text></svg>
+
+      </div>
+
+      <div class="g-col-7">
+        <h2 class="featurette-heading">Mission and Vision</h2>
+        <p class="lead">Our mission is to advance the field of life sciences through cutting-edge computational methods and innovative research. We envision a world where computational techniques drive breakthrough discoveries in biology, medicine, and environmental science through open and precompetitive collaboration.</p>
+      </div>
+    </div>
+
+```
+
+<!-- Team Memebers -->
+```{=html}
+<h1 class="display-6 fw-normal text-center mt-5 mb-5">Board Members and Staff</h1>
+
+<div class="grid">
+
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+</div>
+```

contact_us.qmd

@@ -0,0 +1,24 @@
+---
+page-layout: full
+---
+
+<!-- Contact Details -->
+```{=html}
+  <div class="position-relative overflow-hidden p-3 p-md-5 text-center bg-light">
+    <div class="col-md-5 p-lg-5 mx-auto my-5">
+      <p class="lead fw-normal">Contact Us</p>
+      <p>CLS Foundation, Am Sportplatz 7, 26683 Saterland, Germany</p>
+      <br>
+      <p>Email: [email protected]</p>
+      <br>
+      <p>Phone: +49-123-456-7890</p>
+      
+    </div>
+    <div class="product-device shadow-sm d-none d-md-block"></div>
+    <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
+  </div>
+```
+
+```{=html}
+<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2624.999126763074!2d2.294481315674221!3d48.85884417928785!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66ef0f94a2e2b%3A0x421d7cb9a1ff9a5c!2sEiffel%20Tower!5e0!3m2!1sen!2sfr!4v1617515087413!5m2!1sen!2sfr" width="100%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
+```

donate.qmd

@@ -0,0 +1,64 @@
+---
+page-layout: full
+title: Donate
+---
+
+# Why Donate
+
+Your contributions help us develop and maintain open source software that advances research in the life sciences through open collaboration. Together, we can make a significant impact.
+
+# Donation Options
+
+Choose to make a one-time donation, set up a recurring contribution, or donate in-kind.
+
+<!-- Success Stories -->
+```{=html}
+<h1 class="display-6 fw-normal text-center mt-5">Success Stories</h1>
+<p class="fs-5 mb-5 text-muted">
+  Hear from those we've helped.
+</p>
+
+<div class="grid">
+
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+</div>
+```

index.qmd

@@ -1,9 +1,160 @@
 ---
-title: "Welcome!"
+page-layout: full
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit
+```{=html}
+  <div class="position-relative overflow-hidden p-3 p-md-5 text-center bg-light">
+    <div class="col-md-5 p-lg-5 mx-auto my-5">
+      <h1 class="display-5 fw-normal">Computational Life Sciences Foundation</h1>
+      <p class="lead fw-normal">Advancing Life Sciences through Computational Innovation.</p>
+      <p>Founded to develop and maintain open source software in the life sciences, the Computational Life Sciences Foundation aims to improve the R&D landscape through open cooperation and innovation.
+</p>
+      <a class="btn btn-outline-secondary" href="#">Learn More</a>
+      <a class="btn btn-outline-primary" href="#">Donate now</a>
+      
+    </div>
+    <div class="product-device shadow-sm d-none d-md-block"></div>
+    <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
+  </div>
+```
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit  <https://esqlabs.com/>.
 
+<!-- Programms -->
+```{=html}
+<h1 id="programs-section" class="display-6 fw-normal text-center mt-5">Our Programs</h1>
+<p class="fs-5 mb-5 text-muted">
+  Explore our initiatives in developing and promoting open source software for life sciences.
+</p>
+<div class="grid">
+  <div class="g-col-4">
+    <div class="card border-primary mb-3">
+      <div class="card-header">Programme 1</div>
+      <div class="card-body">
+        <h4 class="card-title">Primary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <button type="button" class="btn btn-outline-success">Register</button>
+      </div>
+    </div>
+  </div>
+  <div class="g-col-4">
+    <div class="card border-primary">
+      <div class="card-header">Programme 2</div>
+      <div class="card-body">
+        <h4 class="card-title">Primary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <button type="button" class="btn btn-outline-success">Register</button>
+      </div>
+    </div>
+  </div>
+  <div class="g-col-4">
+    <div class="card border-primary">
+      <div class="card-header">Programme 3</div>
+      <div class="card-body">
+        <h4 class="card-title">Primary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+        <button type="button" class="btn btn-outline-success">Register</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
 
+
+<!-- Events -->
+```{=html}
+<h1 id="events-section" class="display-6 fw-normal text-center mt-5">Upcoming Events</h1>
+<p class="fs-5 mb-5 text-muted">
+  Stay updated with our latest events, workshops, and seminars.
+</p>
+<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-indicators">
+    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
+    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
+    <button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
+  </div>
+  <div class="carousel-inner">
+    <div class="carousel-item active">
+      <img src="https://cdn-cjhkj.nitrocdn.com/krXSsXVqwzhduXLVuGLToUwHLNnSxUxO/assets/images/optimized/rev-ddd5613/spotme.com/wp-content/uploads/2020/07/Hero-1.jpg" class="d-block w-100" alt="...">
+      <div class="carousel-caption d-none d-md-block">
+        <h5>First slide label</h5>
+        <p>Some representative placeholder content for the first slide.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img src="https://ahaslides.com/wp-content/uploads/2023/07/SEO3799-thumb.png" class="d-block w-100" alt="...">
+      <div class="carousel-caption d-none d-md-block">
+        <h5>Second slide label</h5>
+        <p>Some representative placeholder content for the second slide.</p>
+      </div>
+    </div>
+    <div class="carousel-item">
+      <img src="https://circulareconomy.europa.eu/platform/themes/custom/cecon_foundation/images/events.jpg" class="d-block w-100" alt="...">
+      <div class="carousel-caption d-none d-md-block">
+        <h5>Third slide label</h5>
+        <p>Some representative placeholder content for the third slide.</p>
+      </div>
+    </div>
+  </div>
+  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
+    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Previous</span>
+  </button>
+  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
+    <span class="carousel-control-next-icon" aria-hidden="true"></span>
+    <span class="visually-hidden">Next</span>
+  </button>
+</div>
+```
+
+
+<!-- Success Stories -->
+```{=html}
+<h1 class="display-6 fw-normal text-center mt-5">Success Stories</h1>
+<p class="fs-5 mb-5 text-muted">
+  Hear from those we've helped.
+</p>
+
+<div class="grid">
+
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+  <div class="g-col-3">
+    <div class="card border-secondary mb-3" style="max-width: 20rem;">
+      <div class="card-header">Header</div>
+      <div class="card-body">
+        <h4 class="card-title">Secondary card title</h4>
+        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+      </div>
+    </div>
+  </div>
+  
+</div>
+```