디자인블럭 he02 : 제품강점 - 현장감 강조형 정보 카드

1단형

2단형

 

 

 

 

✅ 디자인블럭 he02 — 현장감 강조형 정보 카드
📌 블럭 개요
he02는 직접 채취 현장과 유통 과정의 신뢰성을 강조하는 정보 블럭입니다.
현장 사진과 설명을 조합한 카드형 구성을 통해, 소비자에게 제품의 신선도·원산지·생생함을 직관적으로 전달합니다.

---

🎯 사용 목적

• 현장에서 직접 잡은 생물, 즉시 선별·이동 과정을 강조하고 싶을 때
• “국내산”에 대한 신뢰 확보가 필요한 수산물·농산물 등 제품군
• 현장성+과정 신뢰를 동시에 보여주는 상세페이지에 최적
• 수작업 중심의 장인 정신이나 위생·품질관리를 시각적으로 강조하고 싶을 때

---

🧩 디자인 특징

• 상단 1단 헤드카피 + 2열(또는 1열) 정보 카드 조합
• 총 4개의 포인트를 균형 있게 배치하여 공정 전체 흐름 전달
• 각 카드에는 실제 촬영 이미지와 간결한 설명 텍스트 포함
• 반응형 구조로 모바일/PC 모두 자연스럽게 정렬
• 키워드 강조(컬러 강조) 및 행동 유도 메시지 포함

---

📱 활용 예시

• 수산물 상세페이지:
  • 카드1: 배 위에서 바로 선별
  • 카드2: 수조에서 살아있는 상태로 관리
  • 카드3: 국내 연근해 원산지 100%
  • 카드4: 육안으로 직접 확인 가능한 믿을 수 있는 유통 시스템
• 농산물: 수확 직후 세척/포장/출하 전 과정을 사진으로 전달
• 공예품: 수작업 제작 공정 단계별 소개
• 브랜드 캠페인: 생산지 → 가공 → 검수 → 출고의 흐름 스토리 구성

---

💡 확장 활용 팁

• 카드 수를 6개로 늘려 슬라이드형으로도 활용 가능
• 각 카드에 동영상 버튼 삽입하여 클릭 시 실제 작업 영상 제공
• SNS 광고용으로 잘라 쓰거나, 스토리 리치 콘텐츠로 리디자인 가능

 

 

 

 

html

<!-- he02 : 제품 강점 -->
<div class="he02">
  <div class="row">


    <!-- 카드 1 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <h4>배 위에서 바로 선별!<br>싱싱함 그대로 담았습니다</h4>
            <p class="desc">
              방금 건져 올린 문어, 현장에서 바로 선별<br>
              <strong>국내 연안에서 잡힌 생물 그대로</strong><br>
              수조 이동 전, 첫 번째 신선도 체크 완료!
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he02/he02_img01.jpg" alt="갓 잡힌 문어를 바구니에 담는 장면"></span>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 2 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <h4>수조 속에서도 활력 넘침<br>생생한 문어 그대로</h4>
            <p class="desc">
              산소 가득한 활어 수조에서 안정 보관<br>
              <strong>국내 어획 문어만을 엄선해 관리</strong><br>
              힘찬 빨판, 탱글한 촉감 직접 확인하세요
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he02/he02_img02.jpg" alt="문어가 보관된 수조 위에 정렬된 모습"></span>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 3 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <h4>선상에서 바로 체크!<br>원산지 100% 국내</h4>
            <p class="desc">
              바다 위, 선상 검수로 품질 확인 완료<br>
              <strong>서해·남해 연근해 조업 문어만 취급</strong><br>
              낚시 어획 후, 즉시 분류해 당일 이동
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he02/he02_img03.jpg" alt="어부들이 문어를 선상에서 선별하는 모습"></span>
          </div>
        </div>
      </div>
    </div>


    <!-- 카드 4 -->
    <div class="col-sm-12 col-md-12 col-lg-6 col-xl-4 mx-auto">
      <div class="box">
        <div class="box_inner">
          <div class="txtArea">
            <h4>확실한 눈으로 확인!<br>국산 활문어 인증 완료</h4>
            <p class="desc">
              외형·색감·촉감까지 꼼꼼히 점검<br>
              <strong>직접 잡고 직접 보는 믿을 수 있는 품질</strong><br>
              위생적이고 안전한 유통 시스템으로 출고
            </p>
          </div>
          <div class="imgArea">
            <span><img src="{{$template}}/img/_hes/he02/he02_img04.jpg" alt="어부가 바구니 위에서 활문어를 들어 보이는 장면"></span>
          </div>
        </div>
      </div>
    </div>


  </div>
</div>

 

 

 

 

 

css

/*****************************************************************
he02 : 제품강점
*****************************************************************/
.he02 {
    padding: 0;
}

.he02 .row>div {
    padding: 0px;
}

.he02 .box {
    overflow: hidden;
    margin-bottom: 50px;
    /* border-radius: 50px; */
    position: relative;
}

.he02 .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    z-index: 0;
    pointer-events: none;
}

.he02 .box_inner {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.he02 .imgArea {
    text-align: center;
}

.he02 .imgArea img {
    width: 100%;
    border-radius: 0px;
}

/*  */
.he02 .txtArea {
    background-color: #fff;
    text-align: center;
    padding: 10px 0;
}

.he02 .txtArea h4 {
    padding: 10px 0;
    font-weight: 700;
    font-size: 2.5em;
    color: #006c8d;
}

.he02 .txtArea .desc {
    font-size: 1.125em;
    color: #333;
}

.he02 .txtArea .desc strong {
    font-size: 1.125em;
    color: #ff7b00;
}

/*  */
@media screen and (min-width: 768px) {
    .he02 .row>div {
        /* padding: 5px; */
    }

    .he02 .box {
        margin-bottom: 100px;
    }
}