<aside> 💡
<!doctype html> <html lang="ko"> <head><!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-4WB42CH91T"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date());
gtag('config', 'G-4WB42CH91T'); </script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>ALLOVEYOUNG | 가상 상품 판매 페이지</title> <!-- Tailwind CSS (CDN) --> <script src="https://cdn.tailwindcss.com"></script> <!-- Lucide Icons (CDN, for stroke-based icons) --> <script src="https://unpkg.com/lucide@latest"></script> <style> /* Small helper for fade-in animation used in the note */ @keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fade-in 220ms ease-out both; } </style> </head> <body class="min-h-screen bg-gradient-to-br from-green-50 via-white to-emerald-50"> <!-- Header --> <header class="bg-white shadow-sm border-b border-green-100"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex items-center space-x-4"> <h1 class="text-2xl font-bold text-green-800">ALLOVEYOUNG</h1> <span class="text-sm text-green-600 font-medium">Premium Drugstore</span> </div> <button id="brandBtn" class="flex items-center space-x-2 px-4 py-2 bg-green-100 text-green-800 rounded-full hover:bg-green-200 transition-colors duration-200"> <i data-lucide="store" class="w-4 h-4"></i> <span class="font-medium">브랜드 스토어</span> </button> </div> </div> </header>
<!-- Main Content --> <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> <!-- Product Image --> <div class="flex flex-col"> <div class="bg-white rounded-2xl shadow-lg p-8 mb-6"> <div class="aspect-square flex items-center justify-center"> <img src="https://images.pexels.com/photos/4465124/pexels-photo-4465124.jpeg?auto=compress&cs=tinysrgb&w=400" alt="TWOSTONE 유스 리포머 비타민C 세럼" class="w-full h-full object-contain" /> </div> </div>
<!-- Product Features -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">제품 특징</h3>
<div class="grid grid-cols-2 gap-4">
<div class="flex items-center space-x-3">
<i data-lucide="shield" class="w-5 h-5 text-green-600"></i>
<span class="text-sm text-gray-600">피부 안전성 테스트 완료</span>
</div>
<div class="flex items-center space-x-3">
<i data-lucide="star" class="w-5 h-5 text-yellow-500"></i>
<span class="text-sm text-gray-600">고농축 비타민C</span>
</div>
<div class="flex items-center space-x-3">
<i data-lucide="truck" class="w-5 h-5 text-blue-600"></i>
<span class="text-sm text-gray-600">무료배송</span>
</div>
<div class="flex items-center space-x-3">
<i data-lucide="rotate-ccw" class="w-5 h-5 text-purple-600"></i>
<span class="text-sm text-gray-600">30일 반품보장</span>
</div>
</div>
</div>
<!-- Notice Info -->
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-100 mt-6">
<div class="flex items-center space-x-3 mb-3">
<svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-lg font-semibold text-blue-800">안내드립니다</h3>
</div>
<div class="text-sm text-blue-700 leading-relaxed">
<p class="mb-2">안녕하세요!</p>
<p class="mb-2">이 페이지는 실제 판매용이 아닌, 마케팅 포트폴리오와 광고 성과 측정을 위한 가상 페이지입니다!</p>
<p class="mb-2">주소 방문 시, 여러분의 개인정보는 전혀 수집하지 않고, 클릭 수만 확인하게 됩니다.</p>
<p>관심을 가져주셔서 감사드리고, 오늘도 즐거운 하루 되세요! 🌿</p>
</div>
</div>
</div>
<!-- Product Details -->
<div class="flex flex-col space-y-6">
<div class="bg-white rounded-xl shadow-sm p-6">
<div class="mb-4">
<span class="inline-block px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full mb-3">TWOSTONE</span>
<h1 class="text-3xl font-bold text-gray-900 leading-tight">[리뉴얼] 유스 리포머<br>비타민C 세럼</h1>
</div>
<!-- Rating -->
<div class="flex items-center space-x-2 mb-4">
<div class="flex space-x-1 text-yellow-400">
<span aria-hidden="true">★</span>
<span aria-hidden="true">★</span>
<span aria-hidden="true">★</span>
<span aria-hidden="true">★</span>
<span aria-hidden="true">★</span>
</div>
<span class="text-sm text-gray-600">(4.8) 1,247개 리뷰</span>
</div>
<!-- Price -->
<div class="mb-6">
<div class="flex items-center space-x-3 mb-2">
<span class="text-3xl font-bold text-green-600">24,900원</span>
<span class="bg-red-500 text-white px-2 py-1 rounded text-sm font-bold">50% 할인</span>
</div>
<div class="flex items-center space-x-2">
<span class="text-lg text-gray-500 line-through">49,800원</span>
<span class="text-sm text-red-600 font-medium">24,900원 할인</span>
</div>
</div>
<!-- Quantity Selector -->
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">수량</label>
<div class="flex items-center space-x-3">
<button id="minusBtn" class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-100 transition-colors duration-200">-</button>
<span id="qty" class="text-lg font-semibold w-8 text-center">1</span>
<button id="plusBtn" class="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center hover:bg-gray-100 transition-colors duration-200">+</button>
</div>
</div>
<!-- Action Buttons -->
<div class="space-y-3">
<div class="flex space-x-3">
<button id="cartBtn"
class="flex-1 flex items-center justify-center space-x-2 px-6 py-3 bg-green-600 text-white rounded-xl hover:bg-green-700 transform hover:scale-105 transition-all duration-200 shadow-lg">
<i data-lucide="shopping-cart" class="w-5 h-5"></i>
<span class="font-semibold">장바구니</span>
</button>
<button id="buyBtn"
class="flex-1 flex items-center justify-center space-x-2 px-6 py-3 bg-emerald-600 text-white rounded-xl hover:bg-emerald-700 transform hover:scale-105 transition-all duration-200 shadow-lg">
<i data-lucide="credit-card" class="w-5 h-5"></i>
<span class="font-semibold">구매하기</span>
</button>
</div>
<button id="wishBtn"
class="w-full flex items-center justify-center space-x-2 px-6 py-3 rounded-xl border-2 transition-all duration-200 bg-white border-gray-300 text-gray-700 hover:bg-gray-50">
<i data-lucide="heart" class="w-5 h-5"></i>
<span class="font-medium">찜하기</span>
</button>
</div>
</div>
<!-- Product Info -->
<div class="bg-white rounded-xl shadow-sm p-6">
<h3 class="text-lg font-semibold text-gray-800 mb-4">제품 정보</h3>
<div class="space-y-3">
<div class="flex justify-between">
<span class="text-gray-600">용량</span>
<span class="font-medium">30ml / 1 fl. oz.</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">브랜드</span>
<span class="font-medium">TWOSTONE</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">원산지</span>
<span class="font-medium">대한민국</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">피부타입</span>
<span class="font-medium">모든 피부 타입</span>
</div>
</div>
</div>
<!-- Shipping Info -->
<div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6 border border-green-100 mt-6">
<div class="flex items-center space-x-3 mb-3">
<i data-lucide="truck" class="w-6 h-6 text-green-600"></i>
<h3 class="text-lg font-semibold text-green-800">배송 정보</h3>
</div>
<ul class="space-y-2 text-sm text-green-700">
<li>• 무료배송 (30,000원 이상 구매시)</li>
<li>• 당일발송 (평일 오후 2시 이전 주문시)</li>
<li>• 배송기간: 1-2일 (도서산간 지역 제외)</li>
</ul>
</div>
</div>
</div>
<!-- Product Description -->
<div class="mt-12 bg-white rounded-xl shadow-sm p-8">
<h2 class="text-2xl font-bold text-gray-900 mb-6">상품 상세 설명</h2>
<div class="prose prose-green max-w-none">
<p class="text-gray-600 leading-relaxed mb-4">
<strong>TWOSTONE 유스 리포머 비타민C 세럼</strong>은 고농축 비타민C와 천연 식물 추출물을 결합하여
피부에 생기와 활력을 선사하는 프리미엄 안티에이징 세럼입니다. 세라마이드와 고농축 펩타이드 성분을 더해 자극을 최소화하여 민감성 피부타입에도 적합한 포뮬라입니다.
</p>
<p class="text-gray-600 leading-relaxed mb-4">
특허받은 안정화 기술로 비타민C의 효능을 극대화하였으며,
매일 사용해도 자극 없는 순한 포뮬러로 모든 피부 타입에 적합합니다.
</p>
<div class="bg-green-50 rounded-lg p-4 mt-6">
<h4 class="font-semibold text-green-800 mb-2">주요 효능</h4>
<ul class="text-green-700 space-y-1">
<li>• 피부 톤 개선 및 브라이트닝</li>
<li>• 주름 완화 및 탄력 개선</li>
<li>• 안티옥시던트 효과로 피부 보호</li>
<li>• 콜라겐 생성 촉진</li>
</ul>
</div>
</div>
</div>
<!-- More Info Section -->
<div class="mt-12 text-center">
<button id="moreBtn"
class="inline-flex items-center px-6 py-3 bg-gray-100 text-gray-700 rounded-full hover:bg-gray-200 transition-colors duration-200 font-medium">
더보기
<svg class="ml-2 w-4 h-4 transition-transform duration-200" id="moreIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
</svg>
</button>
<div id="eduNote" class="mt-6 max-w-2xl mx-auto hidden">
<div class="bg-red-50 border border-red-200 rounded-xl p-6 text-center animate-fade-in">
<div class="flex items-center justify-center mb-3">
<svg class="w-6 h-6 text-red-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<h3 class="text-lg font-semibold text-red-800">안내사항</h3>
</div>
<p class="text-red-700 leading-relaxed font-medium">
이 페이지는 교육을 목적으로 만들어진 가상의 페이지입니다.<br>관심 주셔서 감사합니다.
</p>
</div>
</div>
</div>
</main>
<!-- Footer --> <footer class="bg-gray-50 mt-16 py-8"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="text-center text-gray-500"> <p>© 2024 ALLOVEYOUNG. All rights reserved.</p> <p class="mt-2">프리미엄 드럭스토어 - 건강하고 아름다운 라이프스타일을 위해</p> </div> </div> </footer>
<script> // Render Lucide icons window.addEventListener('DOMContentLoaded', () => { if (window.lucide) { window.lucide.createIcons(); } });
// Quantity state
const qtyEl = document.getElementById('qty');
document.getElementById('minusBtn').addEventListener('click', () => {
const v = Math.max(1, parseInt(qtyEl.textContent || '1', 10) - 1);
qtyEl.textContent = String(v);
});
document.getElementById('plusBtn').addEventListener('click', () => {
const v = parseInt(qtyEl.textContent || '1', 10) + 1;
qtyEl.textContent = String(v);
});
// Buttons - All redirect to empty.html
document.getElementById('cartBtn').addEventListener('click', () => window.location.href = 'empty.html');
document.getElementById('buyBtn').addEventListener('click', () => window.location.href = 'empty.html');
document.getElementById('brandBtn').addEventListener('click', () => window.location.href = 'empty.html');
document.getElementById('wishBtn').addEventListener('click', () => window.location.href = 'empty.html');
document.getElementById('moreBtn').addEventListener('click', () => window.location.href = 'empty.html');
</script> </body> </html>
</aside>