first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,460 @@
|
||||
<?php
|
||||
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
|
||||
// 레이아웃 폴더내 style.css 파일
|
||||
add_stylesheet('<link rel="stylesheet" href="'.G5_THEME_URL.'/rb.layout/'.$rb_core['layout'].'/style.css">', 0);
|
||||
?>
|
||||
|
||||
<!-- E-commerce Modern Layout -->
|
||||
<div class="ecommerce-modern-container">
|
||||
<!-- Hero Banner Section -->
|
||||
<section class="hero-banner">
|
||||
<div class="banner-slider">
|
||||
<div class="banner-slide active">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<span class="banner-badge">NEW COLLECTION</span>
|
||||
<h1 class="banner-title">2024 Spring Collection</h1>
|
||||
<p class="banner-subtitle">최신 트렌드를 반영한 프리미엄 컬렉션을 만나보세요</p>
|
||||
<div class="banner-cta">
|
||||
<a href="#shop" class="btn-shop">쇼핑하기</a>
|
||||
<a href="#lookbook" class="btn-lookbook">룩북 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1490481651871-ab68de25d43d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Spring Collection" class="hero-img">
|
||||
<div class="image-overlay">
|
||||
<div class="price-tag">
|
||||
<span class="price-label">Starting from</span>
|
||||
<span class="price-amount">₩89,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-slide">
|
||||
<div class="banner-content">
|
||||
<div class="banner-text">
|
||||
<span class="banner-badge">SALE</span>
|
||||
<h1 class="banner-title">Up to 50% OFF</h1>
|
||||
<p class="banner-subtitle">한정 기간 특가 할인으로 특별한 혜택을 누리세요</p>
|
||||
<div class="banner-cta">
|
||||
<a href="#sale" class="btn-shop">할인 상품 보기</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Sale Collection" class="hero-img">
|
||||
<div class="image-overlay">
|
||||
<div class="discount-badge">
|
||||
<span class="discount-text">50% OFF</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner-controls">
|
||||
<button class="banner-prev">‹</button>
|
||||
<button class="banner-next">›</button>
|
||||
</div>
|
||||
<div class="banner-indicators">
|
||||
<span class="indicator active" data-slide="0"></span>
|
||||
<span class="indicator" data-slide="1"></span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Categories -->
|
||||
<section class="categories-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">카테고리별 쇼핑</h2>
|
||||
<p class="section-subtitle">다양한 카테고리에서 원하는 상품을 찾아보세요</p>
|
||||
</div>
|
||||
<div class="categories-grid">
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1512436991641-6745cdb1723f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="패션">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">1,234개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>패션</h3>
|
||||
<p>의류, 신발, 액세서리</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1598440947619-2c35fc9aa908?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="뷰티">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">567개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>뷰티</h3>
|
||||
<p>화장품, 스킨케어</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1618220179428-22790b461013?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="홈&리빙">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">890개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>홈&리빙</h3>
|
||||
<p>가구, 인테리어</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-card">
|
||||
<div class="category-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1525547719571-a2d4ac8945e2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="디지털">
|
||||
<div class="category-overlay">
|
||||
<span class="category-count">345개 상품</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="category-info">
|
||||
<h3>디지털</h3>
|
||||
<p>전자제품, 가전</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Featured Products -->
|
||||
<section class="products-section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">인기 상품</h2>
|
||||
<div class="section-controls">
|
||||
<div class="filter-tabs">
|
||||
<button class="filter-tab active" data-filter="all">전체</button>
|
||||
<button class="filter-tab" data-filter="new">신상품</button>
|
||||
<button class="filter-tab" data-filter="sale">할인상품</button>
|
||||
<button class="filter-tab" data-filter="best">베스트</button>
|
||||
</div>
|
||||
<div class="view-controls">
|
||||
<button class="view-btn active" data-view="grid">⊞</button>
|
||||
<button class="view-btn" data-view="list">☰</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="products-grid" id="products-grid">
|
||||
<!-- Product items will be loaded here -->
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="프리미엄 코트">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
<div class="product-badges">
|
||||
<span class="badge-new">NEW</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">프리미엄 코트</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★★</div>
|
||||
<span class="rating-count">(128)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩89,000</span>
|
||||
<span class="original-price">₩120,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="스타일리시 스니커즈">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
<div class="product-badges">
|
||||
<span class="badge-sale">SALE</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">스타일리시 스니커즈</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★☆</div>
|
||||
<span class="rating-count">(89)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩65,000</span>
|
||||
<span class="original-price">₩95,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1598532163257-ae24b244c626?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="럭셔리 핸드백">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
<div class="product-badges">
|
||||
<span class="badge-best">BEST</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">럭셔리 핸드백</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★★</div>
|
||||
<span class="rating-count">(256)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩150,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-card">
|
||||
<div class="product-image">
|
||||
<!-- 💡 [수정] 로컬 이미지 경로를 웹 이미지 주소로 변경하여 샘플을 표시합니다. -->
|
||||
<img src="https://images.unsplash.com/photo-1524805444758-089113d48a6d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="모던 시계">
|
||||
<div class="product-overlay">
|
||||
<button class="btn-quick-view">빠른보기</button>
|
||||
<button class="btn-wishlist">♡</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">모던 시계</h3>
|
||||
<p class="product-brand">Brand Name</p>
|
||||
<div class="product-rating">
|
||||
<div class="stars">★★★★☆</div>
|
||||
<span class="rating-count">(67)</span>
|
||||
</div>
|
||||
<div class="product-price">
|
||||
<span class="current-price">₩45,000</span>
|
||||
</div>
|
||||
<button class="btn-add-cart">장바구니 담기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="load-more">
|
||||
<button class="btn-load-more">더 많은 상품 보기</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Newsletter Section -->
|
||||
<section class="newsletter-section">
|
||||
<div class="container">
|
||||
<div class="newsletter-content">
|
||||
<div class="newsletter-text">
|
||||
<h2>새로운 소식을 받아보세요</h2>
|
||||
<p>최신 상품과 특별 할인 정보를 이메일로 받아보세요</p>
|
||||
</div>
|
||||
<div class="newsletter-form">
|
||||
<form class="email-form">
|
||||
<input type="email" placeholder="이메일 주소를 입력하세요" class="email-input">
|
||||
<button type="submit" class="btn-subscribe">구독하기</button>
|
||||
</form>
|
||||
<p class="newsletter-note">언제든지 구독을 취소할 수 있습니다.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Features Section -->
|
||||
<section class="features-section">
|
||||
<div class="container">
|
||||
<div class="features-grid">
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🚚</div>
|
||||
<h3>무료 배송</h3>
|
||||
<p>5만원 이상 구매 시 무료 배송</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">↩️</div>
|
||||
<h3>쉬운 반품</h3>
|
||||
<p>30일 무조건 반품 가능</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">🔒</div>
|
||||
<h3>안전한 결제</h3>
|
||||
<p>SSL 암호화로 안전한 결제</p>
|
||||
</div>
|
||||
<div class="feature-item">
|
||||
<div class="feature-icon">💬</div>
|
||||
<h3>고객 지원</h3>
|
||||
<p>24/7 고객 서비스 지원</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- E-commerce Modern JavaScript -->
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Banner slider functionality
|
||||
initBannerSlider();
|
||||
|
||||
// Product filtering
|
||||
initProductFiltering();
|
||||
|
||||
// Wishlist functionality
|
||||
initWishlist();
|
||||
|
||||
// Newsletter form
|
||||
initNewsletterForm();
|
||||
|
||||
// Quick view modal
|
||||
initQuickView();
|
||||
});
|
||||
|
||||
function initBannerSlider() {
|
||||
const slides = document.querySelectorAll('.banner-slide');
|
||||
const indicators = document.querySelectorAll('.indicator');
|
||||
const prevBtn = document.querySelector('.banner-prev');
|
||||
const nextBtn = document.querySelector('.banner-next');
|
||||
let currentSlide = 0;
|
||||
|
||||
function showSlide(index) {
|
||||
slides.forEach(slide => slide.classList.remove('active'));
|
||||
indicators.forEach(indicator => indicator.classList.remove('active'));
|
||||
|
||||
slides[index].classList.add('active');
|
||||
indicators[index].classList.add('active');
|
||||
}
|
||||
|
||||
function nextSlide() {
|
||||
currentSlide = (currentSlide + 1) % slides.length;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
|
||||
showSlide(currentSlide);
|
||||
}
|
||||
|
||||
nextBtn.addEventListener('click', nextSlide);
|
||||
prevBtn.addEventListener('click', prevSlide);
|
||||
|
||||
indicators.forEach((indicator, index) => {
|
||||
indicator.addEventListener('click', () => {
|
||||
currentSlide = index;
|
||||
showSlide(currentSlide);
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-slide
|
||||
setInterval(nextSlide, 5000);
|
||||
}
|
||||
|
||||
function initProductFiltering() {
|
||||
const filterTabs = document.querySelectorAll('.filter-tab');
|
||||
const viewBtns = document.querySelectorAll('.view-btn');
|
||||
const productsGrid = document.getElementById('products-grid');
|
||||
|
||||
filterTabs.forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
filterTabs.forEach(t => t.classList.remove('active'));
|
||||
tab.classList.add('active');
|
||||
|
||||
const filter = tab.dataset.filter;
|
||||
filterProducts(filter);
|
||||
});
|
||||
});
|
||||
|
||||
viewBtns.forEach(btn => {
|
||||
btn.addEventListener('click', () => {
|
||||
viewBtns.forEach(b => b.classList.remove('active'));
|
||||
btn.classList.add('active');
|
||||
|
||||
const view = btn.dataset.view;
|
||||
productsGrid.className = `products-grid ${view}-view`;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function filterProducts(filter) {
|
||||
const products = document.querySelectorAll('.product-card');
|
||||
|
||||
products.forEach(product => {
|
||||
if (filter === 'all' || product.dataset.category === filter) {
|
||||
product.style.display = 'block';
|
||||
} else {
|
||||
product.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initWishlist() {
|
||||
const wishlistBtns = document.querySelectorAll('.btn-wishlist');
|
||||
|
||||
wishlistBtns.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
btn.classList.toggle('active');
|
||||
|
||||
if (btn.classList.contains('active')) {
|
||||
btn.textContent = '♥';
|
||||
btn.style.color = '#e74c3c';
|
||||
} else {
|
||||
btn.textContent = '♡';
|
||||
btn.style.color = '#999';
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function initNewsletterForm() {
|
||||
const form = document.querySelector('.email-form');
|
||||
|
||||
form.addEventListener('submit', (e) => {
|
||||
e.preventDefault();
|
||||
const email = form.querySelector('.email-input').value;
|
||||
|
||||
if (email) {
|
||||
alert('구독해주셔서 감사합니다!');
|
||||
form.reset();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initQuickView() {
|
||||
const quickViewBtns = document.querySelectorAll('.btn-quick-view');
|
||||
|
||||
quickViewBtns.forEach(btn => {
|
||||
btn.addEventListener('click', (e) => {
|
||||
e.preventDefault();
|
||||
// Quick view modal implementation
|
||||
alert('빠른보기 기능이 곧 추가됩니다!');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// Smooth scrolling for anchor links
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const target = document.querySelector(this.getAttribute('href'));
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,868 @@
|
||||
/* E-commerce Modern Theme Styles */
|
||||
|
||||
/* CSS Variables for E-commerce Theme */
|
||||
:root {
|
||||
--primary-color: #e74c3c;
|
||||
--secondary-color: #2c3e50;
|
||||
--accent-color: #f39c12;
|
||||
--success-color: #27ae60;
|
||||
--warning-color: #f39c12;
|
||||
--error-color: #e74c3c;
|
||||
--text-primary: #2c3e50;
|
||||
--text-secondary: #7f8c8d;
|
||||
--text-light: #bdc3c7;
|
||||
--bg-primary: #ffffff;
|
||||
--bg-secondary: #f8f9fa;
|
||||
--bg-tertiary: #ecf0f1;
|
||||
--bg-card: #ffffff;
|
||||
--border-color: #e9ecef;
|
||||
--border-light: #f1f3f4;
|
||||
--shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
|
||||
--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
|
||||
--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
|
||||
--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--spacing-xs: 0.5rem;
|
||||
--spacing-sm: 1rem;
|
||||
--spacing-md: 1.5rem;
|
||||
--spacing-lg: 2rem;
|
||||
--spacing-xl: 3rem;
|
||||
--spacing-2xl: 4rem;
|
||||
}
|
||||
|
||||
/* Reset and Base Styles */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
line-height: 1.6;
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-primary);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
/* Hero Banner Section */
|
||||
.hero-banner {
|
||||
position: relative;
|
||||
height: 70vh;
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
|
||||
}
|
||||
|
||||
.banner-slider {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.banner-slide.active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.banner-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.banner-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
border-radius: var(--radius-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: clamp(2.5rem, 5vw, 4rem);
|
||||
font-weight: 800;
|
||||
line-height: 1.2;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.banner-subtitle {
|
||||
font-size: 1.25rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xl);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.banner-cta {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-shop, .btn-lookbook {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
|
||||
.btn-shop {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.btn-shop:hover {
|
||||
background-color: #c0392b;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.btn-lookbook {
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.btn-lookbook:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--primary-color);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
top: var(--spacing-md);
|
||||
right: var(--spacing-md);
|
||||
}
|
||||
|
||||
.price-tag {
|
||||
background: var(--bg-primary);
|
||||
padding: var(--spacing-sm);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.price-label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.price-amount {
|
||||
display: block;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.discount-badge {
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 700;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
.banner-controls {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--spacing-md);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.banner-prev, .banner-next {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
font-size: 1.5rem;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
pointer-events: all;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.banner-prev:hover, .banner-next:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.banner-indicators {
|
||||
position: absolute;
|
||||
bottom: var(--spacing-lg);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.indicator {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.indicator.active {
|
||||
background: var(--primary-color);
|
||||
transform: scale(1.2);
|
||||
}
|
||||
|
||||
/* Categories Section */
|
||||
.categories-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 1.125rem;
|
||||
color: var(--text-secondary);
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.categories-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.category-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.category-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.category-image {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.category-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.category-card:hover .category-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.category-overlay {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
right: var(--spacing-sm);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.category-info {
|
||||
padding: var(--spacing-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.category-info h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.category-info p {
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Products Section */
|
||||
.products-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.section-controls {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
flex-wrap: wrap;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.filter-tab {
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background: transparent;
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.filter-tab.active,
|
||||
.filter-tab:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
display: flex;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.view-btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: var(--bg-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-btn.active,
|
||||
.view-btn:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.products-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.products-grid.list-view {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-card {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-image {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: var(--bg-card);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
position: relative;
|
||||
height: 250px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.product-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.product-card:hover .product-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn-quick-view, .btn-wishlist {
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--bg-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn-quick-view:hover {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-wishlist {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.btn-wishlist.active {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.product-badges {
|
||||
position: absolute;
|
||||
top: var(--spacing-sm);
|
||||
left: var(--spacing-sm);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.badge-new, .badge-sale, .badge-best {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.badge-new {
|
||||
background: var(--success-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-sale {
|
||||
background: var(--error-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.badge-best {
|
||||
background: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-xs);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.product-brand {
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.product-rating {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.stars {
|
||||
color: var(--accent-color);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.rating-count {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.product-price {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.current-price {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.original-price {
|
||||
font-size: 1rem;
|
||||
color: var(--text-light);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.btn-add-cart {
|
||||
width: 100%;
|
||||
padding: var(--spacing-sm);
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-add-cart:hover {
|
||||
background: #c0392b;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-load-more {
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-load-more:hover {
|
||||
background: var(--primary-color);
|
||||
border-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Newsletter Section */
|
||||
.newsletter-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: linear-gradient(135deg, var(--primary-color) 0%, #c0392b 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.newsletter-content {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--spacing-2xl);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.newsletter-text h2 {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.newsletter-text p {
|
||||
font-size: 1.125rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.newsletter-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.email-input {
|
||||
flex: 1;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.btn-subscribe {
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background: white;
|
||||
color: var(--primary-color);
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-subscribe:hover {
|
||||
background: var(--bg-tertiary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.newsletter-note {
|
||||
font-size: 0.875rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
.features-section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
background: var(--bg-primary);
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-item {
|
||||
text-align: center;
|
||||
padding: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: var(--spacing-md);
|
||||
}
|
||||
|
||||
.feature-item h3 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.feature-item p {
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.banner-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
gap: var(--spacing-xl);
|
||||
}
|
||||
|
||||
.banner-text {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.newsletter-content {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.email-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.section-controls {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.filter-tabs {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.view-controls {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-card {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.products-grid.list-view .product-image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.container {
|
||||
padding: 0 var(--spacing-sm);
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.newsletter-text h2 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.banner-cta {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-shop, .btn-lookbook {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Animation Classes */
|
||||
.animate-in {
|
||||
animation: fadeInUp 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Accessibility */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.product-card,
|
||||
.category-card {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.banner-slide {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Print Styles */
|
||||
@media print {
|
||||
.banner-controls,
|
||||
.banner-indicators,
|
||||
.btn-add-cart,
|
||||
.newsletter-section {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user