De emphasize column section

_includes/join-us-on-social-media.html

@@ -0,0 +1,12 @@
+<article id="join-us">
+  <h2>Not a member yet?</h2>
+  <p>Are you a Black Python Developer</p>
+  <div class="grid">
+    <a href="https://discord.gg/XUc3tFqCT3" role="button" class="pico-background-violet-650" style="color: #03dfff"
+      ><span><i class="fab fa-discord"></i></span> Join our Discord</a
+    >
+    <a href="https://www.linkedin.com/groups/14336241/" role="button" class="pico-background-azure-650" style="color: #03dfff"
+      ><span><i class="fab fa-linkedin"></i></span> Join our LinkedIn Group</a
+    >
+  </div>
+</article>

_includes/join_us.html

@@ -1,17 +1,4 @@
-<div class="grid">
-  <article id="join-us">
-    <h2>Not a member yet?</h2>
-    <p>Are you a Black Python Developer</p>
-    <div class="grid">
-      <a href="https://discord.gg/XUc3tFqCT3" role="button" class="pico-background-violet-650" style="color: #03dfff"
-        ><span><i class="fab fa-discord"></i></span> Join our Discord</a
-      >
-      <a href="https://www.linkedin.com/groups/14336241/" role="button" class="pico-background-azure-650" style="color: #03dfff"
-        ><span><i class="fab fa-linkedin"></i></span> Join our LinkedIn Group</a
-      >
-    </div>
-  </article>
-</div>
+<div class="grid"></div>
 <div id="support">
   <h2>Support Black Python Devs</h2>
   <article>

_includes/latest-posts.html

@@ -2,17 +2,17 @@
 <h2 class="post-list-heading">{{ page.list_title }}</h2>
 {%- endif -%}
 <article class="post-list">
-  {%- assign date_format = site.bpdevs.date_format | default: "%b %-d, %Y" -%} {% assign count = 0 %} {% assign limit_posts = 3 %} {%- for post in posts -%} {%- if count < limit_posts -%}
-  <div>
-    <h3>
-      <a class="" href="{{ post.url | relative_url }}"> {{ post.title | escape }} </a>
-    </h3>
-    <p>{{ post.date | date: date_format }}</p>
-    {%- if site.show_excerpts -%}
-    <p class="post-description" style="margin-bottom: 2rem">{{ post.description}}</p>
-    {%- endif -%}
+  {%- assign date_format = site.bpdevs.date_format | default: "%b %-d, %Y" -%}
+  <div class="latest-posts-grid">
+    {% assign count = 0 %} {% assign limit_posts = 3 %} {%- for post in posts -%} {%- if count < limit_posts -%}
+    <div class="post-item">
+      <h3>
+        <a class="" href="{{ post.url | relative_url }}"> {{ post.title | escape }} </a>
+      </h3>
+      <p>{{ post.date | date: date_format }} by: {{ post.author }}</p>
+    </div>
+    {%- assign count = count | plus: 1 -%} {%- endif -%} {%- endfor -%}
   </div>
-  {%- assign count = count | plus:1 -%} {%- endif -%} {%- endfor -%}
 </article>
 
 {% if site.paginate %}

_layouts/index.html

@@ -3,15 +3,41 @@
 ---
 <div class="home">
   {% assign t = site.data.locales[page.lang][page.lang] %} {% if page.title %} {% assign header = page.title %} {% else %} {% assign header = site.title %} {% endif %}
-  <article class="hero">
-    <div class="hero-text">{{ t.index.lead }}</div>
-  </article>
+  <div class="slider">
+    <div class="slides">
+      {% assign recent_posts = site.posts | slice: 0, 3 %}
+        {% for post in recent_posts %}
+      <div class="slide {% if forloop.first %}active{% endif %}">
+       <div class="image-wrapper">
+        <img src="{{ post.featured_image | default: '/assets/images/bpd_stacked.png' }}" alt="{{ post.title }}">
+       </div>
+        <div class="info">
+          <h2>{{ post.title }}</h2>
+          <p>{{ post.excerpt | strip_html | truncatewords: 20 }}</p>
+        </div>
+      </div>
+      {% endfor %}
+    </div>
+    <button class="prev" onclick="moveSlide(-1)">&#10094;</button>
+    <button class="next" onclick="moveSlide(1)">&#10095;</button>
+  </div>
   {{ content }}
 
   <img src="{{'/assets/images/dcus.jpg' | relative_url }}"  alt="DjangoCon US 2023"/>
 
-  {%- include latest-posts.html -%}
-  {%- include join_us.html -%}
+ <section class="isolated-grid">
+  <div class="grid-container">
+    <div class="grid-item">
+      {% include latest-posts.html %}
+    </div>
+    <div class="grid-item">
+      {% include join-us-on-social-media.html %}
+    </div>
+  </div>
+ </section>
+
+ {% include join_us.html %}
+
   {%- include partnerships.html -%}
   {%- include newsletter_form.html newsletter_title="Learn what the community and its members are doing from our newsletter!" -%}
 </div>

assets/css/bpd.css

@@ -517,3 +517,146 @@ ul.speaking-list {
     max-width: 60%;
   }
 }
+
+.slider {
+  position: relative;
+  max-width: 1200px;
+  margin: 50px auto;
+  overflow: hidden;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.slides {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+
+.slide {
+  min-width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+}
+
+.slide .image-wrapper {
+  width: 100%;
+  height: 300px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background-color: #222;
+}
+
+.slide .image-wrapper img {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.info {
+  padding: 15px;
+  background-color: #fff;
+}
+
+
+.info h2 {
+  margin: 10px 0;
+  font-size: 1.5em;
+  color: #333;
+}
+.info p {
+  margin: 0;
+  font-size: 1em;
+  color: #666;
+}
+
+button {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #666;
+  border: none;
+  color: white;
+  font-size: 18px;
+  padding: 10px;
+  cursor: pointer;
+  z-index: 1000;
+  outline: none;
+}
+
+button:focus {
+  outline: none !important;
+}
+
+button:hover {
+  background-color: #333;
+}
+
+button.prev:focus,
+button.next:focus {
+  outline: none !important;
+}
+
+:focus {
+  outline: none !important;
+}
+
+.prev {
+  left: 10px;
+}
+
+.next {
+  right: 10px;
+}
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.grid-item {
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+
+.latest-posts-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+
+.post-item {
+  flex: 1 1 calc(33.333% - 20px);
+  box-sizing: border-box;
+  padding: 10px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  background-color: #f9f9f9;
+}
+
+.post-item h3 {
+  margin-top: 0;
+}
+
+.post-item p {
+  margin: 10px 0 0;
+}
+
+@media (max-width: 800px) {
+  .post-item {
+    flex: 1 1 calc(50% - 20px);
+  }
+}
+
+@media (max-width: 500px) {
+  .post-item {
+    flex: 1 1 100%;
+  }
+}

assets/js/bpd.js

@@ -42,3 +42,20 @@ $(document).ready(function () {
     loadLanguage($("#language option:selected").val());
   });
 });
+
+let currentIndex = 0;
+
+function moveSlide(direction) {
+  const slides = document.querySelector(".slides");
+  const totalSlides = slides.children.length;
+
+  currentIndex += direction;
+
+  if (currentIndex < 0) {
+    currentIndex = totalSlides - 1;
+  } else if (currentIndex >= totalSlides) {
+    currentIndex = 0;
+  }
+
+  slides.style.transform = `translateX(-${currentIndex * 100}%)`;
+}

index.html

@@ -2,7 +2,7 @@
 layout: index
 lang: en
 title: Home
-list_title: Recently on the blog
+list_title: Recent blog
 ---
 
 <h2>Our Mission</h2>

tests/test.py

@@ -14,7 +14,7 @@ def page_url(xprocess, url_port):
     url, port = url_port
 
     class Starter(ProcessStarter):
-        timeout = 4
+        timeout = 60
         # Start the process
         args = [
             "bundle",
@@ -103,20 +103,43 @@ def test_mailto_bpdevs(page_url: tuple[Page, str]) -> None:
     expect(mailto).to_have_attribute("href", "mailto:[email protected]")
 
 
+def test_carousel_displayed(page_url: tuple[Page, str]) -> None:
+    page, live_server_url = page_url
+    page.goto(live_server_url)
+
+    carousel = page.locator(".slider")
+    expect(carousel).to_be_visible()
+
+    next_button = page.locator(".next")
+    prev_button = page.locator(".prev")
+    expect(next_button).to_be_visible()
+    expect(prev_button).to_be_visible()
+
+
+def test_first_slide_matches_latest_post(page_url: tuple[Page, str]) -> None:
+    page, live_server_url = page_url
+    page.goto(live_server_url)
+
+    # First slide and its title
+    first_slide_title = page.locator(".slide .info h2").nth(0)
+
+    # First slide's title is visible
+    expect(first_slide_title).to_be_visible()
+
+    expected_title = page.locator(".info h2").nth(0).inner_text().strip()
+
+    assert (
+        first_slide_title.inner_text().strip() == expected_title.strip()
+    ), "The first slide's title does not match the expected title of the latest post."
+
+
 @pytest.mark.parametrize(
     "url",
     (
         "/",
         "/blog",
     ),
 )
-def test_page_description_in_index_and_blog(page_url: tuple[Page, str], url: str):
-    """Checks for the descriptions data in the blog posts. There should be some objects with the class `post-description`"""
-    page, live_server_url = page_url
-    page.goto(f"{live_server_url}{url}")
-    expect(page.locator("p.post-description").first).to_be_visible()
-    expect(page.locator("p.post-description").first).not_to_be_empty()
-
 
 def stem_description(
     path: pathlib.Path,