Skip to main content

Dossier Grid

Paragraphs
Project 1

Market Research

Consumer Insights Study

Analysis of purchasing behavior across European markets.

Short overview text goes here.

Detailed methodology and findings.

  • Consumer surveys
  • Competitive analysis
  • Strategic workshop
Project 2

Brand Strategy

Brand Repositioning

Strategic research for health-conscious consumers.

Short overview text goes here.

Detailed methodology and findings.

  • Segmentation analysis
  • Focus groups
  • Message testing
<div class="case-dossier-grid case-dossier-alternate">

  <!-- PROJECT 1 -->
  <div class="case-dossier">
    <div class="case-dossier-visual">
      <div class="case-dossier-image">
        <img src="https://images.unsplash.com/photo-1617531653332-bd46c24f2068?w=800&q=80" alt="Project 1">
      </div>
      <div class="case-dossier-logo">
        <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/200px-BMW.svg.png" alt="BMW">
      </div>
    </div>
    <div class="case-dossier-content">
      <div class="case-dossier-header">
        <span class="case-dossier-label">Market Research</span>
        <h2 class="case-dossier-title">Consumer Insights Study</h2>
        <p class="case-dossier-intro">Analysis of purchasing behavior across European markets.</p>
      </div>
      <div class="case-dossier-tabs">
        <div class="case-dossier-tabs-nav">
          <button class="case-dossier-tab active" data-tab="p1-overview">Overview</button>
          <button class="case-dossier-tab" data-tab="p1-details">Deep Dive</button>
          <button class="case-dossier-tab" data-tab="p1-services">Services</button>
        </div>
        <div class="case-dossier-tabs-content">
          <div class="case-dossier-panel active" id="p1-overview">
            <p>Short overview text goes here.</p>
          </div>
          <div class="case-dossier-panel" id="p1-details">
            <p>Detailed methodology and findings.</p>
          </div>
          <div class="case-dossier-panel" id="p1-services">
            <ul class="case-dossier-services">
              <li>Consumer surveys</li>
              <li>Competitive analysis</li>
              <li>Strategic workshop</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- PROJECT 2 (no logo) -->
  <div class="case-dossier">
    <div class="case-dossier-visual">
      <div class="case-dossier-image">
        <img src="https://images.unsplash.com/photo-1606787366850-de6330128bfc?w=800&q=80" alt="Project 2">
      </div>
      <div class="case-dossier-logo"></div>
    </div>
    <div class="case-dossier-content">
      <div class="case-dossier-header">
        <span class="case-dossier-label">Brand Strategy</span>
        <h2 class="case-dossier-title">Brand Repositioning</h2>
        <p class="case-dossier-intro">Strategic research for health-conscious consumers.</p>
      </div>
      <div class="case-dossier-tabs">
        <div class="case-dossier-tabs-nav">
          <button class="case-dossier-tab active" data-tab="p2-overview">Overview</button>
          <button class="case-dossier-tab" data-tab="p2-details">Deep Dive</button>
          <button class="case-dossier-tab" data-tab="p2-services">Services</button>
        </div>
        <div class="case-dossier-tabs-content">
          <div class="case-dossier-panel active" id="p2-overview">
            <p>Short overview text goes here.</p>
          </div>
          <div class="case-dossier-panel" id="p2-details">
            <p>Detailed methodology and findings.</p>
          </div>
          <div class="case-dossier-panel" id="p2-services">
            <ul class="case-dossier-services">
              <li>Segmentation analysis</li>
              <li>Focus groups</li>
              <li>Message testing</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>