Spaces:

ginipick
/

retane

Running

App Files Files Community

retane / index.html

ginipick

Update index.html

533d51b verified 18 days ago

raw

history blame contribute delete

58.3 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RETANE - Rentless Life Plan</title>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	:root {
	--primary-brown: #8B7355;
	--dark-brown: #5C4A3A;
	--light-brown: #A68B6A;
	--beige: #D4C4B0;
	--cream: #F5F0EB;
	--pink-accent: #E8D4D4;
	--white: #FFFFFF;
	--text-dark: #2C2C2C;
	--text-gray: #666666;
	--text-light: #999999;
	--border-light: #E5E5E5;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	font-family: 'Noto Sans KR', sans-serif;
	color: var(--text-dark);
	background: var(--white);
	line-height: 1.6;
	}

	/* Header */
	.header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background: rgba(255,255,255,0.95);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--border-light);
	}

	.header-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 15px 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	}

	.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	}

	.logo-icon {
	width: 40px;
	height: 40px;
	background: linear-gradient(135deg, var(--primary-brown), var(--dark-brown));
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.logo-icon svg {
	width: 24px;
	height: 24px;
	fill: white;
	}

	.logo-text {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--dark-brown);
	letter-spacing: 2px;
	}

	.logo-subtitle {
	font-size: 10px;
	color: var(--text-gray);
	letter-spacing: 1px;
	margin-top: 2px;
	}

	.nav {
	display: flex;
	gap: 40px;
	}

	.nav a {
	text-decoration: none;
	color: var(--text-dark);
	font-size: 14px;
	font-weight: 500;
	transition: color 0.3s;
	}

	.nav a:hover {
	color: var(--primary-brown);
	}

	.header-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	}

	.header-btn {
	padding: 10px 24px;
	background: var(--primary-brown);
	color: white;
	border: none;
	border-radius: 25px;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
	}

	.header-btn:hover {
	background: var(--dark-brown);
	transform: translateY(-2px);
	}

	/* Hero Video Banner */
	.hero-video {
	margin-top: 70px;
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.hero-video-bg {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
	}

	.hero-video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(135deg, rgba(139, 115, 85, 0.7) 0%, rgba(92, 74, 58, 0.8) 100%);
	z-index: 1;
	}

	.hero-video .hero-brand {
	position: relative;
	z-index: 2;
	text-align: center;
	}

	/* Hero Section */
	.hero {
	margin-top: 70px;
	background: linear-gradient(135deg, var(--primary-brown) 0%, var(--dark-brown) 100%);
	padding: 80px 40px;
	text-align: center;
	position: relative;
	overflow: hidden;
	}

	.hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	opacity: 0.5;
	}

	.hero-brand {
	position: relative;
	z-index: 1;
	margin-bottom: 30px;
	}

	.hero-logo {
	font-family: 'Montserrat', sans-serif;
	font-size: 48px;
	font-weight: 700;
	color: white;
	letter-spacing: 8px;
	margin-bottom: 10px;
	}

	.hero-tagline {
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	color: rgba(255,255,255,0.9);
	font-style: italic;
	letter-spacing: 2px;
	}

	.hero-divider {
	width: 60px;
	height: 2px;
	background: rgba(255,255,255,0.5);
	margin: 20px auto;
	}

	.hero-sub {
	font-size: 13px;
	color: rgba(255,255,255,0.7);
	letter-spacing: 1px;
	}

	/* Concept Section */
	.concept-section {
	padding: 100px 40px;
	background: var(--cream);
	}

	.concept-title {
	text-align: center;
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	color: var(--text-dark);
	margin-bottom: 60px;
	font-weight: 500;
	}

	.concept-title span {
	color: var(--primary-brown);
	}

	.concept-showcase {
	max-width: 900px;
	margin: 0 auto 60px;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 30px 60px rgba(0,0,0,0.1);
	}

	.concept-image {
	width: 100%;
	height: 400px;
	background: linear-gradient(135deg, #D4C4B0 0%, #E8DDD0 100%);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.concept-image-inner {
	display: flex;
	gap: 20px;
	padding: 40px;
	}

	.concept-img-item {
	width: 200px;
	height: 280px;
	background: white;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: var(--text-gray);
	overflow: hidden;
	}

	.concept-img-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	.concept-cards {
	display: flex;
	justify-content: center;
	gap: 30px;
	flex-wrap: wrap;
	}

	.concept-card {
	background: white;
	padding: 40px 30px;
	border-radius: 16px;
	text-align: center;
	width: 220px;
	box-shadow: 0 10px 40px rgba(0,0,0,0.05);
	transition: all 0.3s;
	}

	.concept-card:hover {
	transform: translateY(-10px);
	box-shadow: 0 20px 50px rgba(0,0,0,0.1);
	}

	.concept-icon {
	width: 70px;
	height: 70px;
	margin: 0 auto 20px;
	background: var(--cream);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.concept-icon svg {
	width: 32px;
	height: 32px;
	stroke: var(--primary-brown);
	}

	.concept-card h3 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 10px;
	color: var(--text-dark);
	}

	.concept-card p {
	font-size: 13px;
	color: var(--text-gray);
	line-height: 1.6;
	}

	/* Feature Section - RETAIN */
	.feature-section {
	padding: 100px 40px;
	background: white;
	}

	.feature-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	}

	.feature-content h2 {
	font-size: 14px;
	color: var(--primary-brown);
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 15px;
	}

	.feature-content h3 {
	font-family: 'Playfair Display', serif;
	font-size: 42px;
	color: var(--text-dark);
	margin-bottom: 25px;
	line-height: 1.2;
	}

	.feature-content h3 span {
	color: var(--primary-brown);
	font-weight: 600;
	}

	.feature-content p {
	font-size: 15px;
	color: var(--text-gray);
	line-height: 1.8;
	margin-bottom: 30px;
	}

	.feature-btn {
	display: inline-block;
	padding: 14px 36px;
	border: 2px solid var(--primary-brown);
	color: var(--primary-brown);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	border-radius: 30px;
	transition: all 0.3s;
	}

	.feature-btn:hover {
	background: var(--primary-brown);
	color: white;
	}

	.feature-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	}

	.feature-img {
	background: var(--cream);
	border-radius: 16px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	position: relative;
	overflow: hidden;
	}

	.feature-img:hover {
	transform: scale(1.02);
	}

	.feature-img.large {
	grid-column: span 2;
	aspect-ratio: 2/1;
	}

	.feature-img-placeholder {
	font-size: 13px;
	color: var(--text-light);
	}

	/* Big Deal Section */
	.bigdeal-section {
	padding: 100px 40px;
	background: linear-gradient(180deg, var(--cream) 0%, white 100%);
	}

	.bigdeal-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	}

	.bigdeal-images {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	}

	.bigdeal-img {
	background: white;
	border-radius: 12px;
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: all 0.3s;
	}

	.bigdeal-img:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 30px rgba(0,0,0,0.1);
	}

	.bigdeal-content h2 {
	font-size: 14px;
	color: var(--primary-brown);
	text-transform: uppercase;
	letter-spacing: 3px;
	margin-bottom: 15px;
	}

	.bigdeal-content h3 {
	font-family: 'Playfair Display', serif;
	font-size: 42px;
	color: var(--text-dark);
	margin-bottom: 25px;
	line-height: 1.2;
	}

	.bigdeal-content p {
	font-size: 15px;
	color: var(--text-gray);
	line-height: 1.8;
	margin-bottom: 30px;
	}

	/* Promo Banner */
	.promo-banner {
	background: linear-gradient(135deg, var(--pink-accent) 0%, #F0E6E6 100%);
	padding: 60px 40px;
	}

	.promo-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	}

	.promo-text h3 {
	font-size: 28px;
	color: var(--text-dark);
	margin-bottom: 10px;
	}

	.promo-text h3 span {
	color: var(--primary-brown);
	font-weight: 700;
	}

	.promo-text p {
	font-size: 14px;
	color: var(--text-gray);
	}

	.promo-images {
	display: flex;
	gap: 20px;
	}

	.promo-img {
	width: 150px;
	height: 180px;
	background: white;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 30px rgba(0,0,0,0.08);
	}

	.promo-btn {
	padding: 14px 36px;
	background: var(--primary-brown);
	color: white;
	border: none;
	border-radius: 30px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all 0.3s;
	}

	.promo-btn:hover {
	background: var(--dark-brown);
	}

	/* Featured Listings */
	.featured-section {
	padding: 80px 40px;
	background: white;
	}

	.section-header {
	text-align: center;
	margin-bottom: 50px;
	}

	.section-header h2 {
	font-family: 'Playfair Display', serif;
	font-size: 32px;
	color: var(--text-dark);
	margin-bottom: 15px;
	}

	.section-header p {
	font-size: 14px;
	color: var(--text-gray);
	}

	.featured-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	}

	.featured-card {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: all 0.3s;
	}

	.featured-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.1);
	}

	.featured-card-img {
	height: 180px;
	background: var(--cream);
	display: flex;
	align-items: center;
	justify-content: center;
	}

	.featured-card-content {
	padding: 20px;
	}

	.featured-card-content h4 {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--text-dark);
	}

	.featured-card-content p {
	font-size: 12px;
	color: var(--text-gray);
	margin-bottom: 12px;
	}

	.featured-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-brown);
	}

	.featured-price span {
	font-size: 13px;
	font-weight: 400;
	color: var(--text-gray);
	}

	/* Category Tabs */
	.category-section {
	padding: 80px 40px;
	background: var(--cream);
	}

	.category-tabs {
	max-width: 1200px;
	margin: 0 auto 40px;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	}

	.category-tab {
	padding: 12px 28px;
	background: white;
	border: none;
	border-radius: 25px;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-gray);
	cursor: pointer;
	transition: all 0.3s;
	}

	.category-tab:hover,
	.category-tab.active {
	background: var(--primary-brown);
	color: white;
	}

	.product-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 25px;
	}

	.product-card {
	background: white;
	border-radius: 16px;
	overflow: hidden;
	transition: all 0.3s;
	}

	.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.1);
	}

	.product-img {
	height: 200px;
	background: #F8F8F8;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	}

	.product-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 12px;
	background: var(--primary-brown);
	color: white;
	font-size: 11px;
	font-weight: 600;
	border-radius: 20px;
	}

	.product-content {
	padding: 20px;
	}

	.product-brand {
	font-size: 11px;
	color: var(--text-light);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 5px;
	}

	.product-name {
	font-size: 14px;
	font-weight: 600;
	color: var(--text-dark);
	margin-bottom: 10px;
	line-height: 1.4;
	}

	.product-price {
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-brown);
	}

	.product-price span {
	font-size: 12px;
	font-weight: 400;
	color: var(--text-gray);
	}

	.product-original {
	font-size: 12px;
	color: var(--text-light);
	text-decoration: line-through;
	margin-left: 8px;
	}

	/* Sub Category Sections */
	.subcategory-section {
	padding: 80px 40px;
	background: white;
	}

	.subcategory-header {
	max-width: 1200px;
	margin: 0 auto 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.subcategory-header h3 {
	font-family: 'Playfair Display', serif;
	font-size: 28px;
	color: var(--text-dark);
	}

	.view-all {
	font-size: 14px;
	color: var(--primary-brown);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.view-all:hover {
	text-decoration: underline;
	}

	/* Footer */
	.footer {
	background: var(--dark-brown);
	color: white;
	padding: 60px 40px 30px;
	}

	.footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	}

	.footer-top {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 60px;
	margin-bottom: 50px;
	}

	.footer-brand h4 {
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 3px;
	margin-bottom: 15px;
	}

	.footer-brand p {
	font-size: 13px;
	color: rgba(255,255,255,0.7);
	line-height: 1.8;
	}

	.footer-links h5 {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 20px;
	letter-spacing: 1px;
	}

	.footer-links ul {
	list-style: none;
	}

	.footer-links li {
	margin-bottom: 12px;
	}

	.footer-links a {
	color: rgba(255,255,255,0.7);
	text-decoration: none;
	font-size: 13px;
	transition: color 0.3s;
	}

	.footer-links a:hover {
	color: white;
	}

	.footer-bottom {
	padding-top: 30px;
	border-top: 1px solid rgba(255,255,255,0.1);
	display: flex;
	justify-content: space-between;
	align-items: center;
	}

	.footer-copyright {
	font-size: 12px;
	color: rgba(255,255,255,0.5);
	}

	.footer-social {
	display: flex;
	gap: 15px;
	}

	.footer-social a {
	width: 36px;
	height: 36px;
	background: rgba(255,255,255,0.1);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s;
	}

	.footer-social a:hover {
	background: var(--primary-brown);
	}

	.footer-social svg {
	width: 16px;
	height: 16px;
	fill: white;
	}

	/* Animations */
	@keyframes fadeInUp {
	from {
	opacity: 0;
	transform: translateY(30px);
	}
	to {
	opacity: 1;
	transform: translateY(0);
	}
	}

	.animate-in {
	animation: fadeInUp 0.6s ease forwards;
	}

	/* Responsive */
	@media (max-width: 1024px) {
	.feature-grid,
	.bigdeal-grid {
	grid-template-columns: 1fr;
	gap: 40px;
	}

	.featured-grid,
	.product-grid {
	grid-template-columns: repeat(2, 1fr);
	}

	.footer-top {
	grid-template-columns: repeat(2, 1fr);
	}
	}

	@media (max-width: 768px) {
	.header-inner {
	padding: 15px 20px;
	}

	.nav {
	display: none;
	}

	.hero-video {
	height: 400px;
	}

	.hero {
	padding: 60px 20px;
	}

	.hero-logo {
	font-size: 32px;
	}

	.concept-section,
	.feature-section,
	.bigdeal-section {
	padding: 60px 20px;
	}

	.concept-cards {
	flex-direction: column;
	align-items: center;
	}

	.featured-grid,
	.product-grid {
	grid-template-columns: 1fr;
	}

	.promo-inner {
	flex-direction: column;
	text-align: center;
	}

	.footer-top {
	grid-template-columns: 1fr;
	gap: 30px;
	}
	}

	/* Product Images Styles */
	.product-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	}

	.img-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	}
	</style>
	</head>
	<body>
	<!-- Header -->
	<header class="header">
	<div class="header-inner">
	<div class="logo">
	<div class="logo-icon">
	<svg viewBox="0 0 24 24">
	<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/>
	</svg>
	</div>
	<div>
	<div class="logo-text">RETANE</div>
	<div class="logo-subtitle">Rentless Life Plan</div>
	</div>
	</div>
	<nav class="nav">
	<a href="#">전체상품</a>
	<a href="#">세탁가전</a>
	<a href="#">냉장고</a>
	<a href="#">에어컨</a>
	<a href="#">정수기</a>
	<a href="#">고객센터</a>
	</nav>
	<div class="header-actions">
	<button class="header-btn">시작하기</button>
	</div>
	</div>
	</header>

	<!-- Hero Video Banner Section -->
	<section class="hero-video">
	<video autoplay muted loop playsinline class="hero-video-bg">
	<source src="banner.mp4" type="video/mp4">
	</video>
	<div class="hero-video-overlay"></div>
	<div class="hero-brand">
	<div class="hero-logo">RETANE</div>
	<div class="hero-tagline">Rentless Life Plan</div>
	<div class="hero-divider"></div>
	<div class="hero-sub">Rent + Retain \| 잃지 않는 소비의 시작</div>
	</div>
	</section>

	<!-- Concept Section -->
	<section class="concept-section">
	<h2 class="concept-title">"소비의 공식이 바뀐다, 이젠, <span>돈이 돌아온다</span>."</h2>

	<div class="concept-showcase">
	<div class="concept-image">
	<div class="concept-image-inner">
	<div class="concept-img-item"><img src="https://images.unsplash.com/photo-1600210492486-724fe5c67fb0?w=400&h=560&fit=crop" alt="거실 인테리어" class="product-image"></div>
	<div class="concept-img-item"><img src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=400&h=560&fit=crop" alt="침실 인테리어" class="product-image"></div>
	<div class="concept-img-item"><img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400&h=560&fit=crop" alt="주방 인테리어" class="product-image"></div>
	</div>
	</div>
	</div>

	<div class="concept-cards">
	<div class="concept-card">
	<div class="concept-icon">
	<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
	<path d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
	</svg>
	</div>
	<h3>지출없는 소비</h3>
	<p>렌탈 비용이 자산으로 적립되어 실질적인 지출이 없습니다</p>
	</div>
	<div class="concept-card">
	<div class="concept-icon">
	<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
	<path d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"/>
	</svg>
	</div>
	<h3>소유권의 전환</h3>
	<p>일정 기간 후 제품의 완전한 소유권을 가져갑니다</p>
	</div>
	<div class="concept-card">
	<div class="concept-icon">
	<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
	<path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
	</svg>
	</div>
	<h3>잃지않는 소비</h3>
	<p>중도해지 시에도 적립금을 보장받습니다</p>
	</div>
	</div>
	</section>

	<!-- Feature Section - RETAIN -->
	<section class="feature-section">
	<div class="feature-grid">
	<div class="feature-content">
	<h2>Premium Lifestyle</h2>
	<h3>워시타워부터 에어컨까지<br>완벽한 <span>RETAIN</span></h3>
	<p>삼성 비스포크, LG 오브제컬렉션 등 프리미엄 가전을 리테인으로 누리세요.
	월 렌탈료가 자산으로 쌓이고, 계약 종료 시 100% 소유권 이전이 가능합니다.</p>
	<a href="#" class="feature-btn">자세히 보기</a>
	</div>
	<div class="feature-images">
	<div class="feature-img large">
	<img src="https://images.unsplash.com/photo-1626806819282-2c1dc01a5e0c?w=800&h=400&fit=crop" alt="워시타워" class="product-image">
	</div>
	<div class="feature-img">
	<img src="https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?w=400&h=400&fit=crop" alt="건조기" class="product-image">
	</div>
	<div class="feature-img">
	<img src="https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=400&h=400&fit=crop" alt="냉장고" class="product-image">
	</div>
	<div class="feature-img">
	<img src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=400&h=400&fit=crop" alt="에어컨" class="product-image">
	</div>
	<div class="feature-img">
	<img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop" alt="정수기" class="product-image">
	</div>
	</div>
	</div>
	</section>

	<!-- Big Deal Section -->
	<section class="bigdeal-section">
	<div class="bigdeal-grid">
	<div class="bigdeal-images">
	<div class="bigdeal-img"><img src="https://images.unsplash.com/photo-1626806819282-2c1dc01a5e0c?w=300&h=300&fit=crop" alt="세탁기" class="product-image"></div>
	<div class="bigdeal-img"><img src="https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=300&h=300&fit=crop" alt="냉장고" class="product-image"></div>
	<div class="bigdeal-img"><img src="https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?w=300&h=300&fit=crop" alt="건조기" class="product-image"></div>
	<div class="bigdeal-img"><img src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=300&h=300&fit=crop" alt="에어컨" class="product-image"></div>
	<div class="bigdeal-img"><img src="https://images.unsplash.com/photo-1593784991095-a205069470b6?w=300&h=300&fit=crop" alt="TV" class="product-image"></div>
	<div class="bigdeal-img"><img src="https://images.unsplash.com/photo-1558317374-067fb5f30001?w=300&h=300&fit=crop" alt="청소기" class="product-image"></div>
	</div>
	<div class="bigdeal-content">
	<h2>Special Package</h2>
	<h3>신혼부부 비교시<br>BIG DEAL</h3>
	<p>신혼부부를 위한 특별 패키지! 워시타워, 냉장고, 에어컨 등
	생활에 필요한 필수 가전을 한 번에 구성하고 추가 할인 혜택까지 받아보세요.</p>
	<a href="#" class="feature-btn">패키지 보기</a>
	</div>
	</div>
	</section>

	<!-- Promo Banner -->
	<section class="promo-banner">
	<div class="promo-inner">
	<div class="promo-text">
	<h3><span>프로모션</span> 기간 추가 할인</h3>
	<p>지금 가입하시면 첫 3개월 렌탈료 50% 할인 + 설치비 무료</p>
	</div>
	<div class="promo-images">
	<div class="promo-img"><img src="https://images.unsplash.com/photo-1527698266440-12104e498b76?w=300&h=360&fit=crop" alt="공기청정기" class="product-image"></div>
	<div class="promo-img"><img src="https://images.unsplash.com/photo-1626806819282-2c1dc01a5e0c?w=300&h=360&fit=crop" alt="워시타워" class="product-image"></div>
	<div class="promo-img"><img src="https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=300&h=360&fit=crop" alt="양문형냉장고" class="product-image"></div>
	</div>
	<button class="promo-btn">혜택 확인하기</button>
	</div>
	</section>

	<!-- Featured Listings -->
	<section class="featured-section">
	<div class="section-header">
	<h2>Featured Listings</h2>
	<p>이번 주 가장 인기있는 제품을 만나보세요</p>
	</div>
	<div class="featured-grid">
	<!-- 삼성 AI 세탁기 + 건조기 -->
	<div class="featured-card">
	<div class="featured-card-img"><img src="https://images.unsplash.com/photo-1626806819282-2c1dc01a5e0c?w=400&h=360&fit=crop" alt="삼성 워시타워" class="product-image"></div>
	<div class="featured-card-content">
	<h4>삼성 AI 세탁기 + 건조기</h4>
	<p>21kg + 21kg / 블랙캐비어</p>
	<div class="featured-price">월 89,900원 <span>/36개월</span></div>
	</div>
	</div>
	<!-- LG 트롬 오브제컬렉션 워시타워 -->
	<div class="featured-card">
	<div class="featured-card-img"><img src="https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?w=400&h=360&fit=crop" alt="LG 워시타워" class="product-image"></div>
	<div class="featured-card-content">
	<h4>LG 트롬 오브제컬렉션 워시타워</h4>
	<p>25kg + 20kg / 릴리 화이트</p>
	<div class="featured-price">월 85,900원 <span>/36개월</span></div>
	</div>
	</div>
	<!-- LG 휘센 오브제컬렉션 에어컨 -->
	<div class="featured-card">
	<div class="featured-card-img"><img src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=400&h=360&fit=crop" alt="LG 에어컨" class="product-image"></div>
	<div class="featured-card-content">
	<h4>LG 휘센 오브제컬렉션 에어컨</h4>
	<p>18평형 / 에센스 화이트</p>
	<div class="featured-price">월 48,900원 <span>/48개월</span></div>
	</div>
	</div>
	<!-- LG 퓨리케어 정수기 -->
	<div class="featured-card">
	<div class="featured-card-img"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=360&fit=crop" alt="LG 정수기" class="product-image"></div>
	<div class="featured-card-content">
	<h4>LG 퓨리케어 오브제 얼음 냉온정수기</h4>
	<p>카밍 베이지</p>
	<div class="featured-price">월 42,900원 <span>/36개월</span></div>
	</div>
	</div>
	</div>
	</section>

	<!-- Category Section -->
	<section class="category-section">
	<div class="category-tabs">
	<button class="category-tab active">전체상품</button>
	<button class="category-tab">워시타워</button>
	<button class="category-tab">세탁기</button>
	<button class="category-tab">건조기</button>
	<button class="category-tab">냉장고</button>
	<button class="category-tab">에어컨</button>
	<button class="category-tab">정수기</button>
	<button class="category-tab">공기청정기</button>
	<button class="category-tab">TV</button>
	</div>
	<div class="product-grid">
	<!-- 삼성 비스포크 AI 원바디 워시타워 -->
	<div class="product-card">
	<div class="product-img">
	<span class="product-badge">인기</span>
	<img src="https://images.unsplash.com/photo-1626806819282-2c1dc01a5e0c?w=400&h=400&fit=crop" alt="삼성 워시타워" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">SAMSUNG</div>
	<div class="product-name">삼성 비스포크 AI 원바디 세탁기 25kg + 건조기 20kg</div>
	<div class="product-price">월 89,900원<span class="product-original">월 109,900원</span></div>
	</div>
	</div>
	<!-- LG 트롬 오브제 워시타워 -->
	<div class="product-card">
	<div class="product-img">
	<span class="product-badge">신상품</span>
	<img src="https://images.unsplash.com/photo-1626806787461-102c1bfaaea1?w=400&h=400&fit=crop" alt="LG 워시타워" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 트롬 오브제컬렉션 워시타워 세탁기 25kg + 건조기 21kg</div>
	<div class="product-price">월 92,900원<span class="product-original">월 112,900원</span></div>
	</div>
	</div>
	<!-- 삼성 비스포크 AI 건조기 -->
	<div class="product-card">
	<div class="product-img">
	<img src="https://images.unsplash.com/photo-1604335399105-a0c585fd81a1?w=400&h=400&fit=crop" alt="삼성 건조기" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">SAMSUNG</div>
	<div class="product-name">삼성 비스포크 AI 건조기 22kg (그레이지)</div>
	<div class="product-price">월 45,900원<span class="product-original">월 55,900원</span></div>
	</div>
	</div>
	<!-- LG 트롬 AI 건조기 -->
	<div class="product-card">
	<div class="product-img">
	<span class="product-badge">특가</span>
	<img src="https://images.unsplash.com/photo-1610557892470-55d9e80c0c21?w=400&h=400&fit=crop" alt="LG 건조기" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 트롬 AI 오브제컬렉션 건조기 25kg (스페이스 블랙)</div>
	<div class="product-price">월 48,900원<span class="product-original">월 58,900원</span></div>
	</div>
	</div>
	<!-- 삼성 비스포크 AI 4도어 냉장고 -->
	<div class="product-card">
	<div class="product-img">
	<img src="https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=400&h=400&fit=crop" alt="삼성 냉장고" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">SAMSUNG</div>
	<div class="product-name">삼성 비스포크 AI 4도어 냉장고 905L (에센셜 화이트)</div>
	<div class="product-price">월 62,900원<span class="product-original">월 72,900원</span></div>
	</div>
	</div>
	<!-- LG 디오스 오브제 냉장고 -->
	<div class="product-card">
	<div class="product-img">
	<img src="https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=400&h=400&fit=crop" alt="LG 냉장고" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 디오스 AI 오브제컬렉션 STEM 베이직 냉장고 854L</div>
	<div class="product-price">월 58,900원<span class="product-original">월 68,900원</span></div>
	</div>
	</div>
	<!-- LG 스타일러 -->
	<div class="product-card">
	<div class="product-img">
	<span class="product-badge">베스트</span>
	<img src="https://images.unsplash.com/photo-1558317374-067fb5f30001?w=400&h=400&fit=crop" alt="LG 스타일러" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 스타일러 일반용량 (블랙틴트 미러)</div>
	<div class="product-price">월 42,900원<span class="product-original">월 52,900원</span></div>
	</div>
	</div>
	<!-- LG 스탠바이미 Go -->
	<div class="product-card">
	<div class="product-img">
	<img src="https://images.unsplash.com/photo-1593784991095-a205069470b6?w=400&h=400&fit=crop" alt="LG 스탠바이미" class="product-image">
	</div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 스탠바이미 Go 27인치</div>
	<div class="product-price">월 35,900원<span class="product-original">월 45,900원</span></div>
	</div>
	</div>
	</div>
	</section>

	<!-- Subcategory - 냉장/가전 -->
	<section class="subcategory-section">
	<div class="subcategory-header">
	<h3>냉장고/김치냉장고</h3>
	<a href="#" class="view-all">전체보기 →</a>
	</div>
	<div class="product-grid">
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1571175443880-49e1d25b2bc5?w=400&h=400&fit=crop" alt="삼성 양문형냉장고" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">SAMSUNG</div>
	<div class="product-name">삼성 양문형 냉장고 852L (젠틀 실버)</div>
	<div class="product-price">월 52,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1584568694244-14fbdf83bd30?w=400&h=400&fit=crop" alt="LG 4도어냉장고" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 디오스 오브제컬렉션 4도어 냉장고 870L</div>
	<div class="product-price">월 58,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1536353284924-9220c464e262?w=400&h=400&fit=crop" alt="삼성 김치냉장고" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">SAMSUNG</div>
	<div class="product-name">삼성 비스포크 김치플러스 3도어 328L (에센셜 화이트)</div>
	<div class="product-price">월 35,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?w=400&h=400&fit=crop" alt="LG 와인셀러" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 디오스 와인셀러 8병</div>
	<div class="product-price">월 18,900원</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Subcategory - 에어컨/계절가전 -->
	<section class="subcategory-section" style="background: var(--cream);">
	<div class="subcategory-header">
	<h3>에어컨/계절가전</h3>
	<a href="#" class="view-all">전체보기 →</a>
	</div>
	<div class="product-grid">
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1585771724684-38269d6639fd?w=400&h=400&fit=crop" alt="LG 스탠드에어컨" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 휘센 오브제컬렉션 쿨 1시리즈 스탠드 에어컨 18평형</div>
	<div class="product-price">월 48,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1527698266440-12104e498b76?w=400&h=400&fit=crop" alt="삼성 공기청정기" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">SAMSUNG</div>
	<div class="product-name">삼성 비스포크 큐브 Air Infinite Line 공기청정기 30평형</div>
	<div class="product-price">월 28,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop" alt="LG 제습기" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 휘센 오브제컬렉션 제습기 23L (에센스 화이트)</div>
	<div class="product-price">월 18,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1631679706909-1844bbd07221?w=400&h=400&fit=crop" alt="삼성 2in1에어컨" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">SAMSUNG</div>
	<div class="product-name">삼성 AI Q9000 2in1 에어컨 17평형+6평형</div>
	<div class="product-price">월 65,900원</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Subcategory - 정수기 -->
	<section class="subcategory-section">
	<div class="subcategory-header">
	<h3>정수기</h3>
	<a href="#" class="view-all">전체보기 →</a>
	</div>
	<div class="product-grid">
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400&h=400&fit=crop" alt="LG 얼음정수기" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 퓨리케어 오브제컬렉션 얼음 냉온정수기 (카밍 베이지)</div>
	<div class="product-price">월 42,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1525385133512-2f3bdd039054?w=400&h=400&fit=crop" alt="SK매직 정수기" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">SK매직</div>
	<div class="product-name">SK매직 원코크 플러스 얼음 냉온정수기</div>
	<div class="product-price">월 38,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1548839140-29a749e1cf4d?w=400&h=400&fit=crop" alt="코웨이 정수기" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">COWAY</div>
	<div class="product-name">코웨이 아이콘 미니 얼음 냉온정수기</div>
	<div class="product-price">월 35,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1523362628745-0c100150b504?w=400&h=400&fit=crop" alt="쿠쿠 정수기" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">CUCKOO</div>
	<div class="product-name">쿠쿠 제로 100 슬림 UV살균 얼음 냉온정수기</div>
	<div class="product-price">월 32,900원</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Subcategory - 안마의자/침대 -->
	<section class="subcategory-section" style="background: var(--cream);">
	<div class="subcategory-header">
	<h3>안마의자/침대</h3>
	<a href="#" class="view-all">전체보기 →</a>
	</div>
	<div class="product-grid">
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1555041469-a586c61ea9bc?w=400&h=400&fit=crop" alt="LG 안마의자" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">LG</div>
	<div class="product-name">LG 힐링미 오브제컬렉션 안마의자 아르테 (코지 브라운)</div>
	<div class="product-price">월 89,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1506439773649-6e0eb8cfb237?w=400&h=400&fit=crop" alt="코웨이 안마베드" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">COWAY</div>
	<div class="product-name">코웨이 비렉스 안마베드</div>
	<div class="product-price">월 75,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1616594039964-ae9021a400a0?w=400&h=400&fit=crop" alt="라클라우드 침대" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">라클라우드</div>
	<div class="product-name">라클라우드 시에스타 호텔식 침대 프레임+매트리스 세트 (SS)</div>
	<div class="product-price">월 45,900원</div>
	</div>
	</div>
	<div class="product-card">
	<div class="product-img"><img src="https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?w=400&h=400&fit=crop" alt="쿠쿠 매트리스" class="product-image"></div>
	<div class="product-content">
	<div class="product-brand">CUCKOO</div>
	<div class="product-name">쿠쿠 레스티노 유로탑 매트리스 LK + 프레임 LK</div>
	<div class="product-price">월 52,900원</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="footer">
	<div class="footer-inner">
	<div class="footer-top">
	<div class="footer-brand">
	<h4>RETANE</h4>
	<p>Rentless Life Plan<br>
	잃지 않는 소비의 시작.<br>
	렌탈의 새로운 패러다임을 경험하세요.</p>
	</div>
	<div class="footer-links">
	<h5>서비스</h5>
	<ul>
	<li><a href="#">전체상품</a></li>
	<li><a href="#">세탁가전</a></li>
	<li><a href="#">냉장고</a></li>
	<li><a href="#">에어컨/계절가전</a></li>
	</ul>
	</div>
	<div class="footer-links">
	<h5>고객지원</h5>
	<ul>
	<li><a href="#">자주묻는질문</a></li>
	<li><a href="#">1:1 문의</a></li>
	<li><a href="#">이용약관</a></li>
	<li><a href="#">개인정보처리방침</a></li>
	</ul>
	</div>
	<div class="footer-links">
	<h5>회사정보</h5>
	<ul>
	<li><a href="#">회사소개</a></li>
	<li><a href="#">제휴문의</a></li>
	<li><a href="#">채용안내</a></li>
	<li><a href="#">공지사항</a></li>
	</ul>
	</div>
	</div>
	<div class="footer-bottom">
	<div class="footer-copyright">
	© 2025 RETANE. All rights reserved. \| 사업자등록번호: 123-45-67890
	</div>
	<div class="footer-social">
	<a href="#">
	<svg viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
	</a>
	<a href="#">
	<svg viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
	</a>
	<a href="#">
	<svg viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
	</a>
	</div>
	</div>
	</div>
	</footer>

	<script>
	// Tab functionality
	document.querySelectorAll('.category-tab').forEach(tab => {
	tab.addEventListener('click', function() {
	document.querySelectorAll('.category-tab').forEach(t => t.classList.remove('active'));
	this.classList.add('active');
	});
	});

	// Scroll animation
	const observerOptions = {
	threshold: 0.1,
	rootMargin: '0px 0px -50px 0px'
	};

	const observer = new IntersectionObserver((entries) => {
	entries.forEach(entry => {
	if (entry.isIntersecting) {
	entry.target.classList.add('animate-in');
	}
	});
	}, observerOptions);

	document.querySelectorAll('.concept-card, .featured-card, .product-card').forEach(el => {
	observer.observe(el);
	});

	// Header scroll effect
	window.addEventListener('scroll', () => {
	const header = document.querySelector('.header');
	if (window.scrollY > 100) {
	header.style.boxShadow = '0 2px 20px rgba(0,0,0,0.1)';
	} else {
	header.style.boxShadow = 'none';
	}
	});
	</script>
	</body>
	</html>