Added featured cases to index, other improvements

content/_index.md

@@ -31,6 +31,15 @@ hero_alt: "Exit to Community concept illustration"
 
 </div>
 
+<div class="featured-cases-section">
+  <div class="featured-cases-grid" id="featuredCasesGrid">
+    <!-- Featured cases will be loaded here -->
+  </div>
+  <div style="text-align: center; margin-top: 2rem;">
+    <a href="/case-studies/" class="btn">View All Case Studies</a>
+  </div>
+</div>
+
 <div class="main-sections">
   <h2>Explore E2C</h2>
   <div class="primary-cards">
@@ -52,6 +61,7 @@ hero_alt: "Exit to Community concept illustration"
   </div>
 </div>
 
+
 <div style="text-align: center; margin: 3rem 0;">
   <img src="/img/Screenshot_2023-12-13_at_1.55.04_PM.png" alt="Partnership handshake illustration" class="partnership-image" />
 </div>

content/case-studies/ampled.md

@@ -12,6 +12,7 @@ tags:
 - music
 url_external: https://ampled.com/
 image: /img/logos/ampled.svg
+banner: /img/banners/ampled.png
 ---
 
 ### Summary

content/case-studies/arena.md

@@ -9,6 +9,7 @@ tags:
 - underway
 url_external: https://are.na/
 image: /img/logos/arena.png
+banner: /img/banners/arena.webp
 ---
 
 ### Summary

content/case-studies/buytwitter.md

@@ -12,6 +12,7 @@ tags:
 - utilities
 url_external: https://buytwitter.org/
 image: /img/logos/buytwitter.png
+banner: /img/banners/buytwitter.jpg
 ---
 
 ### Summary

content/case-studies/cmx.md

@@ -9,6 +9,7 @@ tags:
 - services
 url_external: https://cmxhub.com
 image: /img/logos/cmx.jpg
+banner: /img/banners/cmx.webp
 ---
 
 ### Summary

content/case-studies/dada.md

@@ -9,6 +9,7 @@ tags:
 - underway
 url_external: https://dadacoin.com
 image: /img/logos/dada.jpg
+banner: /img/banners/dada.png
 ---
 
 ### Summary

content/case-studies/debian.md

@@ -9,6 +9,7 @@ tags:
 - success
 url_external: https://debian.org/
 image: /img/logos/debian.png
+banner: /img/banners/debian.png
 ---
 
 ### Summary

content/case-studies/defector.md

@@ -11,6 +11,7 @@ tags:
 - worker-owned
 url_external: https://defector.com/
 image: /img/logos/defector.png
+banner: /img/banners/defector.jpg
 ---
 
 ### Summary

content/case-studies/ens.md

@@ -9,6 +9,7 @@ tags:
 - success
 url_external: https://ens.domains/
 image: /img/logos/ens.jpg
+banner: /img/banners/ens.jpg
 ---
 
 ### Summary

content/case-studies/forward.md

@@ -10,6 +10,7 @@ tags:
 - success
 url_external: https://forwardaction.uk/
 image: /img/logos/forward.jpg
+banner: /img/banners/forward.webp
 ---
 
 ### Summary

content/case-studies/gitcoin.md

@@ -9,6 +9,7 @@ tags:
 - crypto
 url_external: https://gitcoin.co/
 image: /img/logos/gitcoin.png
+banner: /img/banners/gitcoin.png
 ---
 
 ### Summary

content/case-studies/groupmuse.md

@@ -13,6 +13,7 @@ tags:
 - worker-owned
 url_external: https://groupmuse.com/
 image: /img/logos/groupmuse.png
+banner: /img/banners/groupmuse.jpg
 ---
 
 ### Summary

content/case-studies/hackernoon.md

@@ -10,6 +10,7 @@ tags:
 - success
 url_external: https://hackernoon.com/
 image: /img/logos/hackernoon.jpg
+banner: /img/banners/hackernoon.png
 ---
 
 ### Summary

content/case-studies/josephine.md

@@ -11,6 +11,7 @@ tags:
 - services
 url_external: https://www.crunchbase.com/organization/josephine
 image: /img/logos/josephine.png
+banner: /img/banners/josephine.webp
 ---
 
 ### Summary

content/case-studies/juno.md

@@ -11,6 +11,7 @@ tags:
 - software
 url_external: https://en.wikipedia.org/wiki/Juno_(company)
 image: /img/logos/juno.png
+banner: /img/banners/juno.jpg
 ---
 
 ### Summary

content/case-studies/namaste.md

@@ -11,6 +11,7 @@ tags:
 - worker-owned
 url_external: https://namastesolar.com
 image: /img/logos/namaste.png
+banner: /img/banners/namaste.jpg
 ---
 
 ### Summary

content/case-studies/nio.md

@@ -11,6 +11,7 @@ tags:
 - trust
 url_external: https://nio.com
 image: /img/logos/nio.jpg
+banner: /img/banners/nio.webp
 ---
 
 ### Summary

content/case-studies/python.md

@@ -10,6 +10,7 @@ tags:
 - success
 url_external: https://python.org/
 image: /img/logos/python.jpg
+banner: /img/banners/python.jpg
 ---
 
 ### Summary

content/case-studies/signalise.md

@@ -12,6 +12,7 @@ tags:
 - success
 url_external: https://signalise.coop/
 image: /img/logos/signalise.jpg
+banner: /img/banners/signalise.jpg
 ---
 
 ### Summary

content/case-studies/songadao.md

@@ -10,6 +10,7 @@ tags:
 - success
 url_external: https://songaday.world/
 image: /img/logos/songadao.png
+banner: /img/banners/songadao.jpg
 ---
 
 ### Summary

content/case-studies/the-appeal.md

@@ -10,6 +10,7 @@ tags:
 - success
 url_external: https://theappeal.org/
 image: /img/logos/the-appeal.jpg
+banner: /img/banners/the-appeal.jpg
 ---
 
 ### Summary

content/case-studies/the-brick-house.md

@@ -11,6 +11,7 @@ tags:
 - worker-owned
 url_external: https://thebrick.house/
 image: /img/logos/the-brick-house.jpg
+banner: /img/banners/the-brick-house.png
 ---
 
 ### Summary

content/case-studies/the-well.md

@@ -10,6 +10,7 @@ tags:
 - success
 url_external: https://well.com/
 image: /img/logos/the-well.png
+banner: /img/banners/the-well.png
 ---
 
 ### Summary

content/case-studies/trident-booksellers.md

@@ -10,6 +10,7 @@ tags:
 - success
 url_external: https://tridentcafe.com/
 image: /img/logos/trident-booksellers.png
+banner: /img/banners/trident-booksellers.jpg
 ---
 
 ### Summary

content/case-studies/uniswap.md

@@ -9,6 +9,7 @@ tags:
 - crypto
 url_external: https://uniswap.org
 image: /img/logos/uniswap.jpg
+banner: /img/banners/uniswap.png
 ---
 
 ### Summary

layouts/_default/list.html

@@ -26,8 +26,19 @@
          data-description="{{ if .Description }}{{ .Description }}{{ else if .Summary }}{{ .Summary | plainify | replaceRE "^### \\*\\*Summary\\*\\*\\s*" "" | truncate 200 }}{{ else }}{{ .Content | plainify | replaceRE "^### \\*\\*Summary\\*\\*\\s*" "" | truncate 200 }}{{ end }}"
          data-tags="{{ if .Params.tags }}{{ delimit .Params.tags "," }}{{ end }}"
          data-date="{{ .Date.Format "2006-01-02" }}">
-        {{ if .Params.image }}
-        <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-logo" />
+        {{ if .Params.banner }}
+        <a href="{{ .RelPermalink }}" class="card-banner-link">
+            <div class="card-banner">
+                <img src="{{ .Params.banner }}" alt="{{ .Title }} banner" class="case-banner" />
+                {{ if .Params.image }}
+                <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-logo-overlay" />
+                {{ end }}
+            </div>
+        </a>
+        {{ else if .Params.image }}
+        <a href="{{ .RelPermalink }}" class="card-logo-link">
+            <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-logo" />
+        </a>
         {{ end }}
         <h3><a href="{{ .RelPermalink }}" class="card-title-link">{{ .Title }}</a></h3>
         {{ if .Description }}
@@ -159,6 +170,52 @@
     display: none;
 }
 
+.card-banner {
+    position: relative;
+    margin-bottom: 1rem;
+    border-radius: 12px;
+    overflow: hidden;
+    aspect-ratio: 16/9;
+}
+
+.case-banner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.case-logo-overlay {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    width: 72px;
+    height: 72px;
+    object-fit: contain;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 12px;
+    padding: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.card-banner-link, .card-logo-link {
+    display: block;
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-banner-link:hover, .card-logo-link:hover {
+    transform: translateY(-2px);
+}
+
+.card-banner-link:hover .card-banner {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.card-logo-link:hover .case-logo {
+    transform: scale(1.05);
+}
+
 @media (max-width: 768px) {
     .filter-controls {
         margin-bottom: 32px;

layouts/_default/single.html

@@ -1,7 +1,14 @@
 {{ define "main" }}
 <article>
     <header class="article-header">
-        {{ if .Params.image }}
+        {{ if .Params.banner }}
+        <div class="article-banner">
+            <img src="{{ .Params.banner }}" alt="{{ .Title }} banner" class="case-detail-banner" />
+            {{ if .Params.image }}
+            <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-detail-logo-overlay" />
+            {{ end }}
+        </div>
+        {{ else if .Params.image }}
         <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-detail-logo" />
         {{ end }}
         <h1>{{ .Title }}</h1>
@@ -100,5 +107,34 @@
     color: var(--text-primary);
     transform: translateY(-1px);
 }
+
+.article-banner {
+    position: relative;
+    margin-bottom: 2rem;
+    border-radius: 16px;
+    overflow: hidden;
+    aspect-ratio: 16/9;
+    max-height: 300px;
+}
+
+.case-detail-banner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.case-detail-logo-overlay {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 96px;
+    height: 96px;
+    object-fit: contain;
+    background: rgba(255, 255, 255, 0.95);
+    border-radius: 16px;
+    padding: 12px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+}
 </style>
 {{ end }}

layouts/index.html

@@ -1,3 +1,220 @@
 {{ define "main" }}
 {{ .Content }}
+
+<style>
+.featured-cases-section {
+    margin: 4rem 0;
+    padding: 3rem 0;
+    background: rgba(244, 208, 63, 0.05);
+    border-radius: 24px;
+}
+
+.featured-cases-section h2 {
+    text-align: center;
+    margin-bottom: 1rem;
+    color: var(--text-primary);
+    font-size: 2.5rem;
+    font-weight: 600;
+}
+
+.featured-cases-section p {
+    text-align: center;
+    margin-bottom: 2.5rem;
+    color: var(--text-secondary);
+    font-size: 1.125rem;
+}
+
+.featured-cases-grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 2rem;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+}
+
+.featured-case-card {
+    background: var(--card-background);
+    border-radius: 16px;
+    overflow: hidden;
+    box-shadow: 0 4px 12px var(--shadow);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    position: relative;
+    border: 1px solid var(--border);
+}
+
+.featured-case-card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.featured-card-banner {
+    position: relative;
+    margin-bottom: 1rem;
+    border-radius: 12px;
+    overflow: hidden;
+    aspect-ratio: 16/9;
+}
+
+.featured-case-banner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.featured-case-logo {
+    width: 100%;
+    height: 200px;
+    object-fit: contain;
+    display: block;
+    padding: 1rem;
+    background: #f8f9fa;
+}
+
+.featured-case-logo-overlay {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    width: 56px;
+    height: 56px;
+    object-fit: contain;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 10px;
+    padding: 6px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.featured-case-content {
+    padding: 0 1.5rem 1.5rem 1.5rem;
+}
+
+.featured-case-title {
+    display: inline-block;
+    padding: 8px 16px;
+    background: var(--e2c-yellow);
+    color: var(--text-primary);
+    text-decoration: none;
+    border-radius: 12px;
+    margin: 8px 0;
+    font-weight: 600;
+    font-size: 1.1rem;
+    transition: all 0.2s ease;
+    border: 2px solid var(--e2c-yellow);
+}
+
+.featured-case-title:hover {
+    background: var(--e2c-dark-yellow);
+    border-color: var(--e2c-dark-yellow);
+    color: var(--text-primary);
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.featured-case-description {
+    color: var(--text-secondary);
+    font-size: 0.95rem;
+    line-height: 1.5;
+    margin-top: 1rem;
+}
+
+.featured-case-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
+
+.featured-banner-link {
+    display: block;
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.featured-banner-link:hover {
+    transform: translateY(-2px);
+}
+
+@media (max-width: 768px) {
+    .featured-cases-grid {
+        grid-template-columns: 1fr;
+        gap: 1.5rem;
+        padding: 0 1rem;
+    }
+    
+    .featured-cases-section {
+        margin: 2rem 0;
+        padding: 2rem 0;
+    }
+    
+    .featured-cases-section h2 {
+        font-size: 2rem;
+    }
+}
+</style>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    // Case studies data - this will be populated by Hugo
+    const caseStudies = [
+        {{ range where .Site.Pages "Section" "case-studies" }}
+        {{ if and .Params.image .Title (ne .Title "Case Studies") }}
+        {
+            title: "{{ .Title | replaceRE `"` `\"` }}",
+            description: "{{ if .Description }}{{ .Description | replaceRE `"` `\"` }}{{ else }}{{ .Summary | plainify | truncate 150 | replaceRE `"` `\"` }}{{ end }}",
+            url: "{{ .RelPermalink }}",
+            image: "{{ .Params.image }}",
+            banner: {{ if .Params.banner }}"{{ .Params.banner }}"{{ else }}null{{ end }}
+        },
+        {{ end }}
+        {{ end }}
+    ].filter(study => study.title); // Remove any empty entries
+    
+    // Function to shuffle array and get random selection
+    function getRandomCases(cases, count = 3) {
+        const shuffled = [...cases].sort(() => 0.5 - Math.random());
+        return shuffled.slice(0, count);
+    }
+    
+    // Function to create case card HTML
+    function createCaseCard(caseStudy) {
+        const hasImage = caseStudy.image && caseStudy.image !== 'null' && caseStudy.image !== null;
+        const hasBanner = caseStudy.banner && caseStudy.banner !== 'null' && caseStudy.banner !== null;
+        
+        let imageHTML = '';
+        if (hasBanner) {
+            imageHTML = `
+                <a href="${caseStudy.url}" class="featured-banner-link">
+                    <div class="featured-card-banner">
+                        <img src="${caseStudy.banner}" alt="${caseStudy.title} banner" class="featured-case-banner" />
+                        ${hasImage ? `<img src="${caseStudy.image}" alt="${caseStudy.title} logo" class="featured-case-logo-overlay" />` : ''}
+                    </div>
+                </a>
+            `;
+        } else if (hasImage) {
+            imageHTML = `
+                <a href="${caseStudy.url}" class="featured-banner-link">
+                    <img src="${caseStudy.image}" alt="${caseStudy.title} logo" class="featured-case-logo" />
+                </a>
+            `;
+        }
+        
+        return `
+            <div class="featured-case-card">
+                ${imageHTML}
+                <div class="featured-case-content">
+                    <h3><a href="${caseStudy.url}" class="featured-case-title">${caseStudy.title}</a></h3>
+                    <p class="featured-case-description">${caseStudy.description}</p>
+                </div>
+            </div>
+        `;
+    }
+    
+    // Populate featured cases
+    const featuredCasesGrid = document.getElementById('featuredCasesGrid');
+    if (featuredCasesGrid && caseStudies.length > 0) {
+        const randomCases = getRandomCases(caseStudies, 3);
+        featuredCasesGrid.innerHTML = randomCases.map(createCaseCard).join('');
+    }
+});
+</script>
 {{ end }}