Create ref_ecommerce.html

ref_ecommerce.html

@@ -0,0 +1,141 @@
+<!--
+  BuildAI Reference: E-COMMERCE
+  Upload to HuggingFace as: ref_ecommerce.html
+-->
+
+<!-- == PATTERN 1: NIKE/LUXURY DARK == -->
+<style id="e1">
+/* LUXURY DARK ECOMMERCE */
+/* bg:#111 text:#fff font:Inter */
+/* hero: grid 1fr 1fr align:center gap:40px */
+/* h1: clamp(52px,8vw,110px) weight:900 tracking:-5px leading:0.95 uppercase */
+/* product card: bg:#1a1a1a border-radius:16px overflow:hidden */
+/* product card hover: scale(1.03) */
+/* product img: height:280px object-fit:cover transition:transform 0.4s */
+/* product card hover img: scale(1.08) */
+/* sale badge: position:absolute top:12px left:12px bg:#ff3b3b color:#fff 11px weight:800 border-radius:999px */
+/* wishlist btn: position:absolute top:12px right:12px w:32px h:32px bg:rgba(255,255,255,0.9) border-radius:50% */
+/* btn add to cart: width:100% bg:#fff color:#111 border-radius:8px weight:700 hover:bg:#f5f5f5 */
+/* price: 17px weight:800 / old price: 14px color:#555 text-decoration:line-through */
+/* product grid: repeat(4,1fr) gap:20px */
+.dark-product-card {
+  background: #1a1a1a;
+  border-radius: 16px;
+  overflow: hidden;
+  transition: transform 0.3s;
+}
+.dark-product-card:hover { transform: scale(1.03); }
+.dark-product-img {
+  width: 100%; height: 280px;
+  object-fit: cover;
+  transition: transform 0.4s;
+}
+.dark-product-card:hover .dark-product-img { transform: scale(1.08); }
+</style>
+
+<!-- == PATTERN 2: SHOPIFY CLEAN LIGHT == -->
+<style id="e2">
+/* SHOPIFY CLEAN CONVERSION */
+/* bg:linear-gradient(135deg,#fef9f0,#fff8f5) */
+/* hero: grid 1fr 1fr gap:60px align:center min-height:90vh */
+/* h1: clamp(38px,5vw,64px) weight:900 tracking:-2.5px leading:1.05 color:#1a1a1a */
+/* accent underline: text-decoration-color:#ff6b35 text-underline-offset:6px */
+/* hero image: border-radius:24px box-shadow:0 40px 80px rgba(0,0,0,0.15) */
+/* category grid: 4 cols */
+/* cat card: border-radius:16px overflow:hidden aspect-ratio:3/4 position:relative */
+/* cat overlay: linear-gradient(to top, rgba(0,0,0,0.7) transparent 50%) */
+/* floating badge: bg:#fff border-radius:12px padding:10px 14px box-shadow:0 8px 30px rgba(0,0,0,0.12) */
+.shopify-hero {
+  background: linear-gradient(135deg,#fef9f0,#fff8f5);
+}
+.cat-card {
+  border-radius: 16px;
+  overflow: hidden;
+  aspect-ratio: 3/4;
+  position: relative;
+  cursor: pointer;
+}
+.cat-card img { width:100%; height:100%; object-fit:cover; transition: transform 0.4s; }
+.cat-card:hover img { transform: scale(1.06); }
+.cat-overlay {
+  position: absolute; inset: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%);
+  display: flex; align-items: flex-end; padding: 20px;
+}
+</style>
+
+<!-- == PATTERN 3: APPLE STORE MINIMAL == -->
+<style id="e3">
+/* APPLE STORE MINIMAL WHITE */
+/* bg:#fbfbfd font: SF Pro / Inter */
+/* hero: text-center padding:100px 24px 60px */
+/* eyebrow: 13px weight:600 color:#6e6e73 letter-spacing:0.02em */
+/* h1: clamp(40px,7vw,80px) weight:900 tracking:-3px leading:1.0 color:#1d1d1f */
+/* product grid: 4 cols */
+/* product card: bg:#fff border-radius:18px padding:24px text-align:center */
+/* card hover: box-shadow 0 12px 40px rgba(0,0,0,0.1) */
+/* product img: aspect-ratio:1 object-fit:contain */
+/* add btn: bg:#0071e3 color:#fff border-radius:999px 13px weight:500 hover:#0077ed */
+</style>
+
+<!-- == PATTERN 4: FASHION/GLOSSIER == -->
+<style id="e4">
+/* LIFESTYLE FASHION BRAND */
+/* bg:#fdf8f4 font:Playfair Display for headings Inter for body */
+/* hero: grid 1fr 1fr min-height:100vh overflow:hidden */
+/* hero text: bg:#fdf8f4 flex flex-col justify:center padding:80px 60px */
+/* h1: clamp(36px,5vw,68px) weight:400 leading:1.15 color:#2d1f1a tracking:-1px */
+/* h1 italic: font-style:italic color:#c9956c */
+/* hero img: 100% height 100% object-fit:cover */
+/* btn: bg:#2d1f1a color:#fdf8f4 border-radius:999px 14px weight:600 letter-spacing:0.03em */
+/* product card: bg:#fff border-radius:20px overflow:hidden */
+</style>
+
+<!-- == PATTERN 5: FLASH SALE / HIGH ENERGY == -->
+<style id="e5">
+/* FLASH SALE HIGH ENERGY */
+/* hero bg: radial-gradient rgba(148,0,255,0.25) + rgba(255,0,80,0.25) + #0a0a0a */
+/* h1: clamp(52px,9vw,120px) weight:900 tracking:-5px leading:0.9 uppercase */
+/* neon accent: color:#ff0050 text-shadow: 0 0 30px rgba(255,0,80,0.6) */
+/* flash sale bar: bg:linear-gradient(90deg,#ff0000,#ff6b00,#ff0000) bg-size:200% animation:3s linear infinite */
+/* countdown unit: bg:#232f3e color:#fff border-radius:6px padding:8px 12px */
+/* countdown num: 22px weight:800 font:JetBrains Mono */
+/* deal card: bg:rgba(255,255,255,0.05) border:1px solid rgba(255,255,255,0.1) border-radius:16px overflow:hidden */
+/* sale badge: position:absolute top:10px right:10px bg:#ff0050 border-radius:999px 11px weight:900 */
+.countdown-unit {
+  background: #232f3e;
+  color: #fff;
+  border-radius: 6px;
+  padding: 8px 12px;
+  text-align: center;
+  min-width: 50px;
+}
+.countdown-num { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; line-height: 1; }
+</style>
+
+<!-- == SHARED ECOMMERCE PATTERNS == -->
+<style id="eshared">
+/* PRODUCT GRID */
+/* 4 cols: repeat(4,1fr) gap:20px */
+/* 3 cols: repeat(3,1fr) gap:24px */
+/* @media max-width:900px -> 2 cols */
+/* @media max-width:500px -> 2 cols gap:12px */
+
+/* RATING STARS */
+/* color:#f59e0b font-size:13px */
+/* count: 12px color:#888 */
+
+/* WISHLIST HEART */
+/* position:absolute top:12px right:12px */
+/* w:32px h:32px bg:rgba(255,255,255,0.9) border-radius:50% */
+/* backdrop-filter:blur(4px) hover:scale(1.15) */
+
+/* CART TOAST */
+/* position:fixed bottom:20px right:20px bg:#1a1a1a color:#fff */
+/* border-radius:12px padding:14px 20px */
+/* animation: translateY(20px) opacity:0 -> translateY(0) opacity:1 0.3s */
+
+/* ADD TO CART BTN */
+/* width:100% padding:12px bg:#0f0f0f color:#fff border:none border-radius:10px weight:600 */
+/* hover: bg:#6366f1 transition:0.2s */
+</style>