102 lines
6.5 KiB
PHP
102 lines
6.5 KiB
PHP
@extends('layouts.app')
|
|
|
|
@section('title', 'My Octopus 홍보 영상')
|
|
|
|
@section('content')
|
|
<!-- 페이지 헤더 -->
|
|
<div class="mb-8 text-center">
|
|
<h1 class="text-2xl font-bold text-gray-800 flex items-center justify-center gap-2 mb-2">
|
|
<i class="ri-video-line text-indigo-600"></i>
|
|
My Octopus 홍보 프로젝트
|
|
</h1>
|
|
<p class="text-gray-500">혁신적인 업무 자동화의 미래를 영상으로 확인하세요.</p>
|
|
</div>
|
|
|
|
<!-- 비디오 카드 그리드 -->
|
|
<div class="flex flex-wrap gap-6">
|
|
{{-- Video 1 --}}
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden" style="flex: 1 1 320px; max-width: 100%;">
|
|
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;">
|
|
<iframe src="https://player.vimeo.com/video/1152125085?h=0&title=0&byline=0&portrait=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="mb-2">
|
|
<span class="text-xs font-semibold text-indigo-600 tracking-wide uppercase">Promotion Video #1</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">My Octopus 홍보 영상 1</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">디지털 전환의 핵심 솔루션을 소개하는 첫 번째 홍보 영상입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Video 2 --}}
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden" style="flex: 1 1 320px; max-width: 100%;">
|
|
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;">
|
|
<iframe src="https://player.vimeo.com/video/1152125432?h=0&title=0&byline=0&portrait=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="mb-2">
|
|
<span class="text-xs font-semibold text-purple-600 tracking-wide uppercase">Promotion Video #2</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">My Octopus 홍보 영상 2</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">비즈니스 프로세스의 자동화를 보여주는 두 번째 홍보 영상입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Video 3 --}}
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden" style="flex: 1 1 320px; max-width: 100%;">
|
|
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;">
|
|
<iframe src="https://player.vimeo.com/video/1152126362?h=0&title=0&byline=0&portrait=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="mb-2">
|
|
<span class="text-xs font-semibold text-orange-600 tracking-wide uppercase">Character Animation</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">My Octopus 캐릭터 홍보</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">친근한 문어 캐릭터와 함께하는 방화셔터 홍보 애니메이션입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Video 4 --}}
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden" style="flex: 1 1 320px; max-width: 100%;">
|
|
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;">
|
|
<iframe src="https://player.vimeo.com/video/1152126562?h=0&title=0&byline=0&portrait=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="mb-2">
|
|
<span class="text-xs font-semibold text-emerald-600 tracking-wide uppercase">Identity Animation</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">My Octopus 브랜드 애니메이션</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">문어 캐릭터와 문이 결합된 브랜드 아이덴티티 애니메이션입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Video 5 --}}
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden" style="flex: 1 1 320px; max-width: 100%;">
|
|
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;">
|
|
<iframe src="https://player.vimeo.com/video/1152134596?h=0&title=0&byline=0&portrait=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="mb-2">
|
|
<span class="text-xs font-semibold text-rose-600 tracking-wide uppercase">Smart Octopus</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">My Octopus 스마트 가이드</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">안경 쓴 스마트한 문어 캐릭터가 안내하는 스마트 가이드 영상입니다.</p>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Video 6 --}}
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden" style="flex: 1 1 320px; max-width: 100%;">
|
|
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;">
|
|
<iframe src="https://player.vimeo.com/video/1152139496?h=0&title=0&byline=0&portrait=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
|
|
</div>
|
|
<div class="p-5">
|
|
<div class="mb-2">
|
|
<span class="text-xs font-semibold text-cyan-600 tracking-wide uppercase">Production Speed</span>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-800 mb-2">My Octopus 업무 생산성</h3>
|
|
<p class="text-sm text-gray-500 leading-relaxed">놀라운 속도로 업무를 처리하는 문어 캐릭터의 생산성 영상입니다.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|