Last active
January 8, 2026 04:55
-
-
Save steig/2345f51443a5b69ca08981f9986a789d to your computer and use it in GitHub Desktop.
Resource Hub Landing Page Mockups - 3 Variants
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bloggle Article Templates - Mockup</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --color-primary: #286278; | |
| --color-accent: #D14545; | |
| --color-success: #2d8a4e; | |
| --color-warning: #d4a017; | |
| --color-bg: #f8f9fa; | |
| --color-text: #1a1a1a; | |
| --color-subtext: #666666; | |
| --color-border: #e5e5e5; | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| line-height: 1.6; | |
| } | |
| /* Header */ | |
| .mockup-header { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| color: white; | |
| padding: 40px 20px; | |
| text-align: center; | |
| } | |
| .mockup-header h1 { font-size: 28px; margin-bottom: 8px; } | |
| .mockup-header p { opacity: 0.8; font-size: 14px; } | |
| /* Template Selector */ | |
| .template-tabs { | |
| position: sticky; | |
| top: 0; | |
| background: white; | |
| padding: 0; | |
| display: flex; | |
| border-bottom: 1px solid var(--color-border); | |
| z-index: 100; | |
| overflow-x: auto; | |
| } | |
| .template-tab { | |
| padding: 16px 24px; | |
| background: transparent; | |
| border: none; | |
| border-bottom: 3px solid transparent; | |
| cursor: pointer; | |
| font-size: 14px; | |
| font-weight: 500; | |
| white-space: nowrap; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .template-tab:hover { background: var(--color-bg); } | |
| .template-tab.active { border-bottom-color: var(--color-primary); color: var(--color-primary); } | |
| /* Template Content */ | |
| .template-content { | |
| display: none; | |
| padding: 40px 20px; | |
| } | |
| .template-content.active { display: block; } | |
| /* Device Preview Container */ | |
| .preview-wrapper { | |
| max-width: 900px; | |
| margin: 0 auto; | |
| } | |
| /* Device Toggle */ | |
| .device-toggle { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| margin-bottom: 24px; | |
| } | |
| .device-btn { | |
| padding: 8px 16px; | |
| background: transparent; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s; | |
| } | |
| .device-btn:hover { background: var(--color-bg); } | |
| .device-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } | |
| /* Article Preview */ | |
| .article-preview { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .article-preview.desktop { max-width: 900px; margin: 0 auto; } | |
| .article-preview.mobile { max-width: 375px; margin: 0 auto; } | |
| /* Common Article Styles */ | |
| .article-hero { | |
| position: relative; | |
| background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f0 100%); | |
| padding: 60px 32px; | |
| text-align: center; | |
| } | |
| .article-hero.full-width { | |
| padding: 0; | |
| aspect-ratio: 16/7; | |
| display: flex; | |
| align-items: flex-end; | |
| background: linear-gradient(135deg, #2a5568 0%, #1a3a4a 100%); | |
| } | |
| .article-hero.full-width .hero-content { | |
| width: 100%; | |
| padding: 40px; | |
| background: linear-gradient(transparent, rgba(0,0,0,0.8)); | |
| color: white; | |
| text-align: left; | |
| } | |
| .article-breadcrumbs { | |
| font-size: 12px; | |
| margin-bottom: 16px; | |
| } | |
| .article-breadcrumbs a { color: var(--color-primary); text-decoration: none; } | |
| .article-breadcrumbs span { margin: 0 6px; color: var(--color-subtext); } | |
| .article-hero.full-width .article-breadcrumbs a { color: rgba(255,255,255,0.8); } | |
| .article-hero.full-width .article-breadcrumbs span { color: rgba(255,255,255,0.6); } | |
| .article-tag { | |
| display: inline-block; | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 16px; | |
| } | |
| .article-title { | |
| font-size: 32px; | |
| line-height: 1.3; | |
| margin-bottom: 16px; | |
| } | |
| .article-preview.mobile .article-title { font-size: 24px; } | |
| .article-meta { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 20px; | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| } | |
| .article-hero.full-width .article-meta { justify-content: flex-start; color: rgba(255,255,255,0.8); } | |
| .article-meta-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| /* Article Body */ | |
| .article-body { | |
| display: grid; | |
| grid-template-columns: 1fr 280px; | |
| gap: 40px; | |
| padding: 40px 32px; | |
| } | |
| .article-preview.mobile .article-body { grid-template-columns: 1fr; padding: 24px 16px; } | |
| .article-main { min-width: 0; } | |
| .article-sidebar { position: sticky; top: 100px; align-self: start; } | |
| /* Sidebar Components */ | |
| .sidebar-section { | |
| background: var(--color-bg); | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| margin-bottom: 20px; | |
| } | |
| .sidebar-title { | |
| font-size: 14px; | |
| font-weight: 600; | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .toc-list { list-style: none; } | |
| .toc-list li { | |
| padding: 8px 0; | |
| border-bottom: 1px solid var(--color-border); | |
| font-size: 13px; | |
| } | |
| .toc-list li:last-child { border-bottom: none; } | |
| .toc-list a { | |
| color: var(--color-text); | |
| text-decoration: none; | |
| } | |
| .toc-list a:hover { color: var(--color-primary); } | |
| .sidebar-products { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| } | |
| .sidebar-product { | |
| text-align: center; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .sidebar-product-img { | |
| aspect-ratio: 1; | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 8px; | |
| } | |
| .sidebar-product-name { font-size: 11px; color: var(--color-subtext); } | |
| .sidebar-product-price { font-size: 12px; font-weight: 600; } | |
| /* Content Components */ | |
| .content-section { margin-bottom: 32px; } | |
| .content-section h2 { font-size: 22px; margin-bottom: 16px; color: var(--color-primary); } | |
| .content-section p { font-size: 15px; line-height: 1.8; color: var(--color-subtext); margin-bottom: 16px; } | |
| /* Comparison Table */ | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 24px 0; | |
| font-size: 13px; | |
| } | |
| .comparison-table th { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 12px 16px; | |
| text-align: left; | |
| } | |
| .comparison-table td { | |
| padding: 12px 16px; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .comparison-table tr:nth-child(even) { background: var(--color-bg); } | |
| /* Top Pick Card */ | |
| .top-pick { | |
| background: linear-gradient(135deg, var(--color-accent) 0%, #b83030 100%); | |
| color: white; | |
| padding: 24px; | |
| border-radius: var(--radius-md); | |
| margin: 24px 0; | |
| } | |
| .top-pick-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(255,255,255,0.2); | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| margin-bottom: 12px; | |
| } | |
| .top-pick h3 { font-size: 18px; margin-bottom: 8px; } | |
| .top-pick p { opacity: 0.9; font-size: 14px; margin-bottom: 16px; } | |
| .top-pick-btn { | |
| display: inline-block; | |
| background: white; | |
| color: var(--color-accent); | |
| padding: 10px 20px; | |
| border-radius: var(--radius-md); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| /* FAQ Accordion */ | |
| .faq-section { margin: 32px 0; } | |
| .faq-item { | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| margin-bottom: 8px; | |
| overflow: hidden; | |
| } | |
| .faq-question { | |
| padding: 16px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| font-weight: 500; | |
| font-size: 14px; | |
| } | |
| .faq-question:hover { background: var(--color-bg); } | |
| .faq-question i { color: var(--color-subtext); } | |
| .faq-answer { | |
| padding: 0 20px 16px; | |
| font-size: 14px; | |
| color: var(--color-subtext); | |
| display: none; | |
| } | |
| .faq-item.open .faq-answer { display: block; } | |
| .faq-item.open .faq-question i { transform: rotate(180deg); } | |
| /* Shop CTA */ | |
| .shop-cta { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 32px; | |
| border-radius: var(--radius-md); | |
| text-align: center; | |
| margin: 32px 0; | |
| } | |
| .shop-cta h3 { font-size: 20px; margin-bottom: 8px; } | |
| .shop-cta p { opacity: 0.9; margin-bottom: 16px; } | |
| .shop-cta-btn { | |
| display: inline-block; | |
| background: white; | |
| color: var(--color-primary); | |
| padding: 12px 24px; | |
| border-radius: var(--radius-md); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| /* === HOW-TO SPECIFIC === */ | |
| .difficulty-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-top: 12px; | |
| } | |
| .difficulty-badge span { | |
| background: rgba(255,255,255,0.2); | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| } | |
| .materials-checklist { | |
| background: #e8f4f8; | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| margin: 24px 0; | |
| } | |
| .materials-checklist h3 { | |
| font-size: 16px; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .checklist-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); | |
| gap: 12px; | |
| } | |
| .checklist-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| } | |
| .checklist-item input { width: 18px; height: 18px; accent-color: var(--color-primary); } | |
| .warning-box { | |
| background: #fff3e6; | |
| border-left: 4px solid #ff9800; | |
| padding: 16px 20px; | |
| border-radius: 0 var(--radius-md) var(--radius-md) 0; | |
| margin: 24px 0; | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .warning-box i { color: #ff9800; font-size: 20px; flex-shrink: 0; margin-top: 2px; } | |
| .warning-box h4 { font-size: 14px; margin-bottom: 4px; } | |
| .warning-box p { font-size: 13px; color: var(--color-subtext); } | |
| .step-card { | |
| display: grid; | |
| grid-template-columns: 60px 1fr; | |
| gap: 20px; | |
| padding: 24px 0; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .article-preview.mobile .step-card { grid-template-columns: 1fr; } | |
| .step-number { | |
| width: 48px; | |
| height: 48px; | |
| background: var(--color-primary); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 20px; | |
| font-weight: 600; | |
| } | |
| .step-content h3 { font-size: 18px; margin-bottom: 12px; } | |
| .step-content p { font-size: 14px; color: var(--color-subtext); line-height: 1.7; } | |
| .step-image { | |
| aspect-ratio: 16/9; | |
| background: #f0f0f0; | |
| border-radius: var(--radius-md); | |
| margin-top: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #ccc; | |
| font-size: 32px; | |
| } | |
| .pro-tip { | |
| background: #e8f5ec; | |
| border-left: 4px solid var(--color-success); | |
| padding: 16px 20px; | |
| border-radius: 0 var(--radius-md) var(--radius-md) 0; | |
| margin: 24px 0; | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .pro-tip i { color: var(--color-success); font-size: 20px; flex-shrink: 0; margin-top: 2px; } | |
| .pro-tip h4 { font-size: 14px; margin-bottom: 4px; } | |
| .pro-tip p { font-size: 13px; color: var(--color-subtext); } | |
| .video-embed { | |
| aspect-ratio: 16/9; | |
| background: #1a1a1a; | |
| border-radius: var(--radius-md); | |
| margin: 24px 0; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| } | |
| .video-embed i { font-size: 48px; margin-bottom: 12px; opacity: 0.8; } | |
| .video-embed span { font-size: 14px; opacity: 0.7; } | |
| /* === INSPIRATION SPECIFIC === */ | |
| .shop-the-look { | |
| padding: 40px 32px; | |
| background: var(--color-bg); | |
| } | |
| .shop-the-look h2 { | |
| font-size: 22px; | |
| margin-bottom: 24px; | |
| text-align: center; | |
| } | |
| .shop-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 20px; | |
| } | |
| .article-preview.mobile .shop-grid { grid-template-columns: repeat(2, 1fr); } | |
| .shop-product { | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .shop-product-img { | |
| aspect-ratio: 1; | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 32px; | |
| color: #ddd; | |
| } | |
| .shop-product-name { font-size: 13px; font-weight: 500; } | |
| .shop-product-price { font-size: 14px; font-weight: 600; color: var(--color-primary); } | |
| .designer-tip { | |
| background: white; | |
| padding: 32px; | |
| margin: 32px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| gap: 20px; | |
| align-items: flex-start; | |
| } | |
| .article-preview.mobile .designer-tip { flex-direction: column; margin: 24px 16px; } | |
| .designer-avatar { | |
| width: 64px; | |
| height: 64px; | |
| background: #e8f4f8; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--color-primary); | |
| font-size: 24px; | |
| flex-shrink: 0; | |
| } | |
| .designer-content h4 { font-size: 14px; margin-bottom: 4px; } | |
| .designer-content .role { font-size: 12px; color: var(--color-subtext); margin-bottom: 12px; } | |
| .designer-content blockquote { font-size: 15px; font-style: italic; color: var(--color-subtext); line-height: 1.7; } | |
| .more-inspiration { | |
| padding: 40px 32px; | |
| } | |
| .more-inspiration h2 { | |
| font-size: 22px; | |
| margin-bottom: 24px; | |
| text-align: center; | |
| } | |
| .inspiration-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 20px; | |
| } | |
| .article-preview.mobile .inspiration-grid { grid-template-columns: 1fr; } | |
| .inspiration-card { | |
| position: relative; | |
| aspect-ratio: 4/3; | |
| background: linear-gradient(135deg, #d8ecf2 0%, #c0dce8 100%); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| } | |
| .inspiration-card-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 16px; | |
| background: linear-gradient(transparent, rgba(0,0,0,0.7)); | |
| color: white; | |
| } | |
| .inspiration-card-title { font-size: 14px; font-weight: 600; } | |
| .inspiration-card-style { font-size: 12px; opacity: 0.9; } | |
| /* === QUICK TIP SPECIFIC === */ | |
| .quick-tip-hero { | |
| background: linear-gradient(135deg, var(--color-primary) 0%, #1a4a5c 100%); | |
| padding: 60px 32px; | |
| text-align: center; | |
| color: white; | |
| } | |
| .quick-tip-number { | |
| font-size: 64px; | |
| font-weight: 700; | |
| opacity: 0.3; | |
| margin-bottom: -20px; | |
| } | |
| .quick-tip-title { | |
| font-size: 28px; | |
| margin-bottom: 16px; | |
| } | |
| .quick-tip-takeaway { | |
| background: rgba(255,255,255,0.15); | |
| padding: 24px; | |
| border-radius: var(--radius-md); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .quick-tip-takeaway h3 { | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 8px; | |
| opacity: 0.8; | |
| } | |
| .quick-tip-takeaway p { | |
| font-size: 18px; | |
| line-height: 1.5; | |
| } | |
| .quick-tip-body { | |
| padding: 40px 32px; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .quick-tip-body p { | |
| font-size: 16px; | |
| line-height: 1.8; | |
| color: var(--color-subtext); | |
| margin-bottom: 24px; | |
| } | |
| .related-products-section { | |
| background: var(--color-bg); | |
| padding: 40px 32px; | |
| } | |
| .related-products-section h2 { | |
| font-size: 20px; | |
| margin-bottom: 24px; | |
| text-align: center; | |
| } | |
| /* Template Description */ | |
| .template-description { | |
| background: #e8f4f8; | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| margin-bottom: 32px; | |
| max-width: 900px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .template-description h3 { | |
| font-size: 16px; | |
| margin-bottom: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .template-description ul { | |
| list-style: none; | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 8px; | |
| } | |
| .template-description li { | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .template-description li i { color: var(--color-success); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mockup-header"> | |
| <h1>Bloggle Article Templates</h1> | |
| <p>Consistent, high-quality layouts for faster content production</p> | |
| </div> | |
| <!-- Template Tabs --> | |
| <div class="template-tabs"> | |
| <button class="template-tab active" onclick="showTemplate('buying-guide')"> | |
| <i class="fas fa-book-open"></i> Buying Guide | |
| </button> | |
| <button class="template-tab" onclick="showTemplate('how-to')"> | |
| <i class="fas fa-tools"></i> How-To Guide | |
| </button> | |
| <button class="template-tab" onclick="showTemplate('inspiration')"> | |
| <i class="fas fa-camera"></i> Inspiration | |
| </button> | |
| <button class="template-tab" onclick="showTemplate('quick-tip')"> | |
| <i class="fas fa-lightbulb"></i> Quick Tip | |
| </button> | |
| </div> | |
| <!-- ==================== BUYING GUIDE TEMPLATE ==================== --> | |
| <div class="template-content active" id="buying-guide"> | |
| <div class="preview-wrapper"> | |
| <div class="template-description"> | |
| <h3><i class="fas fa-book-open"></i> Buying Guide Template</h3> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Table of Contents sidebar</li> | |
| <li><i class="fas fa-check"></i> Comparison tables</li> | |
| <li><i class="fas fa-check"></i> Top Pick callouts</li> | |
| <li><i class="fas fa-check"></i> Related products sidebar</li> | |
| <li><i class="fas fa-check"></i> FAQ section</li> | |
| <li><i class="fas fa-check"></i> Shop Collection CTA</li> | |
| </ul> | |
| </div> | |
| <div class="device-toggle"> | |
| <button class="device-btn active" onclick="setDevice('buying-guide', 'desktop')"> | |
| <i class="fas fa-desktop"></i> Desktop | |
| </button> | |
| <button class="device-btn" onclick="setDevice('buying-guide', 'mobile')"> | |
| <i class="fas fa-mobile-alt"></i> Mobile | |
| </button> | |
| </div> | |
| <div class="article-preview desktop" id="buying-guide-preview"> | |
| <!-- Hero --> | |
| <div class="article-hero"> | |
| <div class="article-breadcrumbs"> | |
| <a href="#">Home</a> <span>/</span> <a href="#">Blog</a> <span>/</span> Buying Guides | |
| </div> | |
| <span class="article-tag">Buying Guide</span> | |
| <h1 class="article-title">How to Choose the Right Ceiling Fan</h1> | |
| <div class="article-meta"> | |
| <span class="article-meta-item"><i class="far fa-user"></i> Sarah Johnson</span> | |
| <span class="article-meta-item"><i class="far fa-calendar"></i> Jan 5, 2026</span> | |
| <span class="article-meta-item"><i class="far fa-clock"></i> 10 min read</span> | |
| </div> | |
| </div> | |
| <!-- Body with Sidebar --> | |
| <div class="article-body"> | |
| <div class="article-main"> | |
| <div class="content-section"> | |
| <p>Choosing the right ceiling fan involves more than just picking a style you like. The perfect fan should match your room size, ceiling height, and aesthetic preferences while providing optimal air circulation. This comprehensive guide will walk you through everything you need to know.</p> | |
| </div> | |
| <div class="content-section" id="size-guide"> | |
| <h2>1. Size Guide: Finding the Right Fit</h2> | |
| <p>Fan size is measured by blade span (the diameter of the circle created by the spinning blades). The right size depends on your room's square footage.</p> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>Room Size (sq ft)</th> | |
| <th>Recommended Blade Span</th> | |
| <th>Best For</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Up to 75</td> | |
| <td>29" - 36"</td> | |
| <td>Bathrooms, closets</td> | |
| </tr> | |
| <tr> | |
| <td>76 - 144</td> | |
| <td>36" - 42"</td> | |
| <td>Bedrooms, kitchens</td> | |
| </tr> | |
| <tr> | |
| <td>144 - 225</td> | |
| <td>44" - 50"</td> | |
| <td>Master bedrooms</td> | |
| </tr> | |
| <tr> | |
| <td>225 - 400</td> | |
| <td>52" - 60"</td> | |
| <td>Living rooms, great rooms</td> | |
| </tr> | |
| <tr> | |
| <td>Over 400</td> | |
| <td>60" +</td> | |
| <td>Large spaces, consider multiple fans</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Top Pick Callout --> | |
| <div class="top-pick"> | |
| <span class="top-pick-badge"><i class="fas fa-star"></i> Our Top Pick</span> | |
| <h3>Hunter Dempsey 52" Low Profile Ceiling Fan</h3> | |
| <p>The perfect balance of style, performance, and value. Ideal for rooms 225-400 sq ft with ceilings 8-9 feet.</p> | |
| <a href="#" class="top-pick-btn">View Product - $249</a> | |
| </div> | |
| <div class="content-section" id="styles"> | |
| <h2>2. Popular Styles & Trends</h2> | |
| <p>Today's ceiling fans come in countless styles to match any decor. Here are the most popular categories:</p> | |
| <p><strong>Modern/Contemporary:</strong> Clean lines, minimal blade designs, often with integrated LED lights. Perfect for updated homes.</p> | |
| <p><strong>Farmhouse:</strong> Weathered finishes, wood blades, and vintage-inspired details. Great for rustic or coastal spaces.</p> | |
| <p><strong>Traditional:</strong> Classic silhouettes with ornate details. Timeless appeal for traditional interiors.</p> | |
| </div> | |
| <div class="content-section" id="features"> | |
| <h2>3. Key Features to Consider</h2> | |
| <p>Modern ceiling fans offer a range of features that enhance comfort and convenience:</p> | |
| <p><strong>DC Motors:</strong> More efficient, quieter, and often include more speed options than AC motors.</p> | |
| <p><strong>Smart Controls:</strong> WiFi-enabled fans work with Alexa, Google Home, and smartphone apps.</p> | |
| <p><strong>Integrated Lighting:</strong> LED light kits provide illumination while saving energy.</p> | |
| </div> | |
| <!-- FAQ Section --> | |
| <div class="faq-section"> | |
| <h2>Frequently Asked Questions</h2> | |
| <div class="faq-item open"> | |
| <div class="faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| How high should a ceiling fan hang from the floor? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| For safety and optimal airflow, fan blades should be at least 7 feet from the floor. For best performance, aim for 8-9 feet. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| Can I install a ceiling fan on a sloped ceiling? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| Yes! Most fans can be installed on slopes up to 30 degrees using an angled mounting adapter. For steeper slopes, check the manufacturer's specifications. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shop CTA --> | |
| <div class="shop-cta"> | |
| <h3>Ready to Shop?</h3> | |
| <p>Browse our complete collection of ceiling fans</p> | |
| <a href="#" class="shop-cta-btn">Shop All Ceiling Fans <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="article-sidebar"> | |
| <div class="sidebar-section"> | |
| <h4 class="sidebar-title"><i class="fas fa-list"></i> Table of Contents</h4> | |
| <ul class="toc-list"> | |
| <li><a href="#size-guide">1. Size Guide</a></li> | |
| <li><a href="#styles">2. Popular Styles</a></li> | |
| <li><a href="#features">3. Key Features</a></li> | |
| <li><a href="#installation">4. Installation Tips</a></li> | |
| <li><a href="#top-picks">5. Our Top Picks</a></li> | |
| </ul> | |
| </div> | |
| <div class="sidebar-section"> | |
| <h4 class="sidebar-title"><i class="fas fa-shopping-bag"></i> Featured Products</h4> | |
| <div class="sidebar-products"> | |
| <a href="#" class="sidebar-product"> | |
| <div class="sidebar-product-img"></div> | |
| <div class="sidebar-product-name">Hunter Dempsey</div> | |
| <div class="sidebar-product-price">$249</div> | |
| </a> | |
| <a href="#" class="sidebar-product"> | |
| <div class="sidebar-product-img"></div> | |
| <div class="sidebar-product-name">Minka Wave</div> | |
| <div class="sidebar-product-price">$399</div> | |
| </a> | |
| <a href="#" class="sidebar-product"> | |
| <div class="sidebar-product-img"></div> | |
| <div class="sidebar-product-name">Fanimation Spitfire</div> | |
| <div class="sidebar-product-price">$449</div> | |
| </a> | |
| <a href="#" class="sidebar-product"> | |
| <div class="sidebar-product-img"></div> | |
| <div class="sidebar-product-name">Monte Carlo</div> | |
| <div class="sidebar-product-price">$529</div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ==================== HOW-TO TEMPLATE ==================== --> | |
| <div class="template-content" id="how-to"> | |
| <div class="preview-wrapper"> | |
| <div class="template-description"> | |
| <h3><i class="fas fa-tools"></i> How-To Guide Template</h3> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Difficulty & time estimate</li> | |
| <li><i class="fas fa-check"></i> Materials checklist</li> | |
| <li><i class="fas fa-check"></i> Safety warnings</li> | |
| <li><i class="fas fa-check"></i> Numbered steps with images</li> | |
| <li><i class="fas fa-check"></i> Pro tips callouts</li> | |
| <li><i class="fas fa-check"></i> Video embed support</li> | |
| </ul> | |
| </div> | |
| <div class="device-toggle"> | |
| <button class="device-btn active" onclick="setDevice('how-to', 'desktop')"> | |
| <i class="fas fa-desktop"></i> Desktop | |
| </button> | |
| <button class="device-btn" onclick="setDevice('how-to', 'mobile')"> | |
| <i class="fas fa-mobile-alt"></i> Mobile | |
| </button> | |
| </div> | |
| <div class="article-preview desktop" id="how-to-preview"> | |
| <!-- Hero --> | |
| <div class="article-hero" style="background: linear-gradient(135deg, var(--color-primary) 0%, #1a4a5c 100%); color: white;"> | |
| <div class="article-breadcrumbs" style="opacity: 0.8;"> | |
| <a href="#" style="color: white;">Home</a> <span>/</span> <a href="#" style="color: white;">Blog</a> <span>/</span> How-To | |
| </div> | |
| <span class="article-tag" style="background: white; color: var(--color-primary);">How-To</span> | |
| <h1 class="article-title">How to Install a Ceiling Fan</h1> | |
| <div class="article-meta" style="color: rgba(255,255,255,0.8);"> | |
| <span class="article-meta-item"><i class="far fa-user"></i> Mike Chen</span> | |
| <span class="article-meta-item"><i class="far fa-calendar"></i> Jan 3, 2026</span> | |
| <span class="article-meta-item"><i class="far fa-clock"></i> 8 min read</span> | |
| </div> | |
| <div class="difficulty-badge"> | |
| <span><i class="fas fa-signal"></i> Intermediate</span> | |
| <span><i class="far fa-clock"></i> 45-60 min</span> | |
| </div> | |
| </div> | |
| <!-- Body (No sidebar for how-to) --> | |
| <div style="padding: 40px 32px; max-width: 800px; margin: 0 auto;"> | |
| <p style="font-size: 16px; color: var(--color-subtext); margin-bottom: 32px;"> | |
| Installing a ceiling fan is a manageable DIY project if you're replacing an existing ceiling fixture. This guide covers everything you need to know for a safe, successful installation. | |
| </p> | |
| <!-- Materials Checklist --> | |
| <div class="materials-checklist"> | |
| <h3><i class="fas fa-clipboard-list"></i> Tools & Materials Needed</h3> | |
| <div class="checklist-grid"> | |
| <label class="checklist-item"><input type="checkbox"> Phillips screwdriver</label> | |
| <label class="checklist-item"><input type="checkbox"> Wire strippers</label> | |
| <label class="checklist-item"><input type="checkbox"> Voltage tester</label> | |
| <label class="checklist-item"><input type="checkbox"> Ladder</label> | |
| <label class="checklist-item"><input type="checkbox"> Wire nuts</label> | |
| <label class="checklist-item"><input type="checkbox"> Electrical tape</label> | |
| </div> | |
| </div> | |
| <!-- Safety Warning --> | |
| <div class="warning-box"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <div> | |
| <h4>Safety First</h4> | |
| <p>Always turn off power at the circuit breaker before beginning. Use a voltage tester to confirm the power is off before touching any wires.</p> | |
| </div> | |
| </div> | |
| <!-- Steps --> | |
| <div class="step-card"> | |
| <div class="step-number">1</div> | |
| <div class="step-content"> | |
| <h3>Remove the Old Fixture</h3> | |
| <p>Turn off the power at the breaker. Remove the existing light fixture or old fan. Carefully disconnect the wires and set aside the mounting hardware.</p> | |
| <div class="step-image"><i class="fas fa-image"></i></div> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">2</div> | |
| <div class="step-content"> | |
| <h3>Install the Mounting Bracket</h3> | |
| <p>Attach the new fan mounting bracket to the electrical box. Ensure the box is fan-rated (can support at least 35 lbs). Secure with the provided screws.</p> | |
| <div class="step-image"><i class="fas fa-image"></i></div> | |
| </div> | |
| </div> | |
| <!-- Pro Tip --> | |
| <div class="pro-tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <div> | |
| <h4>Pro Tip</h4> | |
| <p>Have a helper hold the motor housing while you connect the wires. This prevents strain on the connections and makes the job much easier.</p> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">3</div> | |
| <div class="step-content"> | |
| <h3>Connect the Wires</h3> | |
| <p>Connect wires: black to black (hot), white to white (neutral), and green or bare copper to the ground. Secure connections with wire nuts and wrap with electrical tape.</p> | |
| <div class="step-image"><i class="fas fa-image"></i></div> | |
| </div> | |
| </div> | |
| <div class="step-card"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>Attach the Fan Blades</h3> | |
| <p>Once the motor is secured, attach each blade to the blade arm, then secure the arms to the motor housing. Make sure all screws are tight.</p> | |
| <div class="step-image"><i class="fas fa-image"></i></div> | |
| </div> | |
| </div> | |
| <!-- Video Embed --> | |
| <div class="video-embed"> | |
| <i class="fas fa-play-circle"></i> | |
| <span>Watch the Full Installation Video</span> | |
| </div> | |
| <!-- Shop CTA --> | |
| <div class="shop-cta"> | |
| <h3>Need a New Ceiling Fan?</h3> | |
| <p>Browse our top-rated ceiling fans</p> | |
| <a href="#" class="shop-cta-btn">Shop Ceiling Fans <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ==================== INSPIRATION TEMPLATE ==================== --> | |
| <div class="template-content" id="inspiration"> | |
| <div class="preview-wrapper"> | |
| <div class="template-description"> | |
| <h3><i class="fas fa-camera"></i> Inspiration Template</h3> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Full-width hero image</li> | |
| <li><i class="fas fa-check"></i> Shop This Look products</li> | |
| <li><i class="fas fa-check"></i> Designer tips</li> | |
| <li><i class="fas fa-check"></i> Related inspiration gallery</li> | |
| <li><i class="fas fa-check"></i> Style tags</li> | |
| <li><i class="fas fa-check"></i> Immersive experience</li> | |
| </ul> | |
| </div> | |
| <div class="device-toggle"> | |
| <button class="device-btn active" onclick="setDevice('inspiration', 'desktop')"> | |
| <i class="fas fa-desktop"></i> Desktop | |
| </button> | |
| <button class="device-btn" onclick="setDevice('inspiration', 'mobile')"> | |
| <i class="fas fa-mobile-alt"></i> Mobile | |
| </button> | |
| </div> | |
| <div class="article-preview desktop" id="inspiration-preview"> | |
| <!-- Full-Width Hero --> | |
| <div class="article-hero full-width"> | |
| <div class="hero-content"> | |
| <div class="article-breadcrumbs"> | |
| <a href="#">Home</a> <span>/</span> <a href="#">Inspiration</a> <span>/</span> Kitchen | |
| </div> | |
| <span class="article-tag">Inspiration</span> | |
| <h1 class="article-title">Modern Farmhouse Kitchen Lighting</h1> | |
| <div class="article-meta"> | |
| <span class="article-meta-item"><i class="fas fa-tag"></i> Kitchen, Farmhouse, Pendants</span> | |
| <span class="article-meta-item"><i class="far fa-heart"></i> 234 saves</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Shop This Look --> | |
| <div class="shop-the-look"> | |
| <h2>Shop This Look</h2> | |
| <div class="shop-grid" id="shopGrid"> | |
| <a href="#" class="shop-product"> | |
| <div class="shop-product-img"><i class="fas fa-lightbulb"></i></div> | |
| <div class="shop-product-name">Pendant Light</div> | |
| <div class="shop-product-price">$189</div> | |
| </a> | |
| <a href="#" class="shop-product"> | |
| <div class="shop-product-img"><i class="fas fa-lightbulb"></i></div> | |
| <div class="shop-product-name">Island Chandelier</div> | |
| <div class="shop-product-price">$349</div> | |
| </a> | |
| <a href="#" class="shop-product"> | |
| <div class="shop-product-img"><i class="fas fa-lightbulb"></i></div> | |
| <div class="shop-product-name">Under Cabinet Lights</div> | |
| <div class="shop-product-price">$79</div> | |
| </a> | |
| <a href="#" class="shop-product"> | |
| <div class="shop-product-img"><i class="fas fa-lightbulb"></i></div> | |
| <div class="shop-product-name">Recessed Trim</div> | |
| <div class="shop-product-price">$45</div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Designer Tip --> | |
| <div class="designer-tip"> | |
| <div class="designer-avatar"><i class="fas fa-user"></i></div> | |
| <div class="designer-content"> | |
| <h4>Emily Rodriguez</h4> | |
| <div class="role">Interior Designer</div> | |
| <blockquote>"Layer your kitchen lighting for both function and ambiance. Start with recessed ceiling lights for general illumination, add pendants over the island for task lighting, and install under-cabinet lights for prep areas. This combination gives you control over the mood while ensuring you always have enough light to cook."</blockquote> | |
| </div> | |
| </div> | |
| <!-- More Inspiration --> | |
| <div class="more-inspiration"> | |
| <h2>More Kitchen Inspiration</h2> | |
| <div class="inspiration-grid" id="inspirationGrid"> | |
| <div class="inspiration-card"> | |
| <div class="inspiration-card-overlay"> | |
| <div class="inspiration-card-title">Coastal Kitchen</div> | |
| <div class="inspiration-card-style">Nautical Style</div> | |
| </div> | |
| </div> | |
| <div class="inspiration-card"> | |
| <div class="inspiration-card-overlay"> | |
| <div class="inspiration-card-title">Industrial Loft Kitchen</div> | |
| <div class="inspiration-card-style">Urban Style</div> | |
| </div> | |
| </div> | |
| <div class="inspiration-card"> | |
| <div class="inspiration-card-overlay"> | |
| <div class="inspiration-card-title">Scandinavian Kitchen</div> | |
| <div class="inspiration-card-style">Minimalist Style</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ==================== QUICK TIP TEMPLATE ==================== --> | |
| <div class="template-content" id="quick-tip"> | |
| <div class="preview-wrapper"> | |
| <div class="template-description"> | |
| <h3><i class="fas fa-lightbulb"></i> Quick Tip Template</h3> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Single key takeaway</li> | |
| <li><i class="fas fa-check"></i> Short-form content</li> | |
| <li><i class="fas fa-check"></i> Bold hero design</li> | |
| <li><i class="fas fa-check"></i> Related products</li> | |
| <li><i class="fas fa-check"></i> Easy to scan</li> | |
| <li><i class="fas fa-check"></i> Social-friendly format</li> | |
| </ul> | |
| </div> | |
| <div class="device-toggle"> | |
| <button class="device-btn active" onclick="setDevice('quick-tip', 'desktop')"> | |
| <i class="fas fa-desktop"></i> Desktop | |
| </button> | |
| <button class="device-btn" onclick="setDevice('quick-tip', 'mobile')"> | |
| <i class="fas fa-mobile-alt"></i> Mobile | |
| </button> | |
| </div> | |
| <div class="article-preview desktop" id="quick-tip-preview"> | |
| <!-- Bold Hero --> | |
| <div class="quick-tip-hero"> | |
| <div class="quick-tip-number">#47</div> | |
| <span class="article-tag" style="background: rgba(255,255,255,0.2);">Quick Tip</span> | |
| <h1 class="quick-tip-title">Summer vs Winter: Change Your Fan Direction</h1> | |
| <div class="quick-tip-takeaway"> | |
| <h3>Key Takeaway</h3> | |
| <p>In summer, run your fan counterclockwise for a cooling breeze. In winter, switch to clockwise to push warm air down from the ceiling.</p> | |
| </div> | |
| </div> | |
| <!-- Short Body --> | |
| <div class="quick-tip-body"> | |
| <p>Most people don't realize their ceiling fan has a switch that reverses the blade direction. This simple adjustment can help you stay comfortable year-round and save on energy costs.</p> | |
| <p><strong>Summer (Counterclockwise):</strong> Creates a direct downward breeze that makes you feel cooler through wind-chill effect. You can raise your thermostat 4 degrees without noticing the difference.</p> | |
| <p><strong>Winter (Clockwise at Low Speed):</strong> Draws cool air up and pushes warm air down along the walls, redistributing heat that rises to the ceiling. This is especially helpful in rooms with high or vaulted ceilings.</p> | |
| <p><strong>How to switch:</strong> Look for a small switch on the motor housing near the blades. Flip it while the fan is off, then turn the fan back on.</p> | |
| </div> | |
| <!-- Related Products --> | |
| <div class="related-products-section"> | |
| <h2>Fans with Easy Reverse</h2> | |
| <div class="shop-grid" style="max-width: 600px; margin: 0 auto; grid-template-columns: repeat(3, 1fr);"> | |
| <a href="#" class="shop-product"> | |
| <div class="shop-product-img"><i class="fas fa-fan"></i></div> | |
| <div class="shop-product-name">Hunter Dempsey</div> | |
| <div class="shop-product-price">$249</div> | |
| </a> | |
| <a href="#" class="shop-product"> | |
| <div class="shop-product-img"><i class="fas fa-fan"></i></div> | |
| <div class="shop-product-name">Minka-Aire Wave</div> | |
| <div class="shop-product-price">$399</div> | |
| </a> | |
| <a href="#" class="shop-product"> | |
| <div class="shop-product-img"><i class="fas fa-fan"></i></div> | |
| <div class="shop-product-name">Modern Forms Axis</div> | |
| <div class="shop-product-price">$599</div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function showTemplate(template) { | |
| // Update tabs | |
| document.querySelectorAll('.template-tab').forEach(tab => { | |
| tab.classList.remove('active'); | |
| }); | |
| event.target.closest('.template-tab').classList.add('active'); | |
| // Update content | |
| document.querySelectorAll('.template-content').forEach(content => { | |
| content.classList.remove('active'); | |
| }); | |
| document.getElementById(template).classList.add('active'); | |
| } | |
| function setDevice(template, device) { | |
| const preview = document.getElementById(template + '-preview'); | |
| const buttons = preview.parentElement.querySelectorAll('.device-btn'); | |
| buttons.forEach(btn => { | |
| btn.classList.toggle('active', btn.textContent.toLowerCase().includes(device)); | |
| }); | |
| preview.className = 'article-preview ' + device; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Collection Page Content Integration - Mockup</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --color-primary: #286278; | |
| --color-accent: #D14545; | |
| --color-success: #2d8a4e; | |
| --color-bg: #f8f9fa; | |
| --color-text: #1a1a1a; | |
| --color-subtext: #666666; | |
| --color-border: #e5e5e5; | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| line-height: 1.6; | |
| } | |
| /* Header */ | |
| .mockup-header { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| color: white; | |
| padding: 40px 20px; | |
| text-align: center; | |
| } | |
| .mockup-header h1 { font-size: 28px; margin-bottom: 8px; } | |
| .mockup-header p { opacity: 0.8; font-size: 14px; } | |
| /* Toolbar */ | |
| .toolbar { | |
| position: sticky; | |
| top: 0; | |
| background: white; | |
| padding: 12px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| border-bottom: 1px solid var(--color-border); | |
| z-index: 100; | |
| } | |
| .device-btn { | |
| padding: 8px 16px; | |
| background: transparent; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s; | |
| } | |
| .device-btn:hover { background: var(--color-bg); } | |
| .device-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } | |
| /* Preview Container */ | |
| .preview-container { | |
| padding: 40px 20px; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .device-frame { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .device-frame.desktop { width: 1200px; max-width: 100%; } | |
| .device-frame.tablet { width: 768px; } | |
| .device-frame.mobile { width: 375px; } | |
| /* Page Content */ | |
| .page-content { | |
| padding: 0; | |
| } | |
| /* Breadcrumbs */ | |
| .breadcrumbs { | |
| padding: 16px 24px; | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .breadcrumbs a { color: var(--color-primary); text-decoration: none; } | |
| .breadcrumbs span { margin: 0 8px; } | |
| /* Buying Guide CTA - NEW SECTION */ | |
| .buying-guide-cta { | |
| background: linear-gradient(135deg, var(--color-primary) 0%, #1a4a5c 100%); | |
| padding: 32px 24px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 24px; | |
| } | |
| .buying-guide-cta.mobile { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .buying-guide-content { | |
| color: white; | |
| } | |
| .buying-guide-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| background: rgba(255,255,255,0.2); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| margin-bottom: 12px; | |
| } | |
| .buying-guide-content h2 { | |
| font-size: 22px; | |
| margin-bottom: 8px; | |
| } | |
| .buying-guide-content p { | |
| opacity: 0.9; | |
| font-size: 14px; | |
| } | |
| .buying-guide-btn { | |
| background: white; | |
| color: var(--color-primary); | |
| padding: 12px 24px; | |
| border-radius: var(--radius-md); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 14px; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| white-space: nowrap; | |
| transition: all 0.2s; | |
| } | |
| .buying-guide-btn:hover { | |
| transform: translateX(4px); | |
| } | |
| /* Collection Header */ | |
| .collection-header { | |
| padding: 32px 24px; | |
| text-align: center; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .collection-header h1 { | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .collection-header p { | |
| color: var(--color-subtext); | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* Filter Bar */ | |
| .filter-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 16px 24px; | |
| border-bottom: 1px solid var(--color-border); | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .filter-group { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .filter-btn { | |
| padding: 8px 16px; | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| cursor: pointer; | |
| } | |
| .filter-btn:hover { background: var(--color-bg); } | |
| .sort-select { | |
| padding: 8px 12px; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| } | |
| /* Products Grid */ | |
| .products-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 24px; | |
| padding: 24px; | |
| } | |
| .device-frame.tablet .products-grid { grid-template-columns: repeat(3, 1fr); } | |
| .device-frame.mobile .products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 16px; } | |
| .product-card { | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| transition: box-shadow 0.2s; | |
| } | |
| .product-card:hover { box-shadow: var(--shadow-md); } | |
| .product-image { | |
| aspect-ratio: 1; | |
| background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%); | |
| position: relative; | |
| } | |
| .product-badge { | |
| position: absolute; | |
| top: 8px; | |
| left: 8px; | |
| background: var(--color-accent); | |
| color: white; | |
| padding: 4px 8px; | |
| border-radius: var(--radius-sm); | |
| font-size: 11px; | |
| font-weight: 600; | |
| } | |
| .product-info { padding: 12px; } | |
| .product-brand { font-size: 11px; color: var(--color-subtext); margin-bottom: 4px; } | |
| .product-name { font-size: 13px; font-weight: 500; margin-bottom: 8px; line-height: 1.3; } | |
| .product-price { font-size: 14px; font-weight: 600; } | |
| .product-price .compare { text-decoration: line-through; color: var(--color-subtext); font-weight: normal; margin-right: 8px; } | |
| /* Category FAQs - NEW SECTION */ | |
| .category-faqs { | |
| padding: 48px 24px; | |
| background: var(--color-bg); | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 32px; | |
| } | |
| .section-header h2 { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| } | |
| .section-header p { | |
| color: var(--color-subtext); | |
| } | |
| .faq-list { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .faq-item { | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| margin-bottom: 12px; | |
| overflow: hidden; | |
| } | |
| .faq-question { | |
| padding: 16px 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| font-weight: 500; | |
| } | |
| .faq-question:hover { background: var(--color-bg); } | |
| .faq-question i { | |
| color: var(--color-subtext); | |
| transition: transform 0.2s; | |
| } | |
| .faq-item.open .faq-question i { transform: rotate(180deg); } | |
| .faq-answer { | |
| padding: 0 20px 16px; | |
| color: var(--color-subtext); | |
| font-size: 14px; | |
| display: none; | |
| } | |
| .faq-item.open .faq-answer { display: block; } | |
| .faq-view-all { | |
| text-align: center; | |
| margin-top: 24px; | |
| } | |
| .faq-view-all a { | |
| color: var(--color-primary); | |
| text-decoration: none; | |
| font-weight: 500; | |
| font-size: 14px; | |
| } | |
| .faq-view-all a:hover { text-decoration: underline; } | |
| /* Related Articles - NEW SECTION */ | |
| .related-articles { | |
| padding: 48px 24px; | |
| } | |
| .articles-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .device-frame.tablet .articles-grid { grid-template-columns: repeat(2, 1fr); } | |
| .device-frame.mobile .articles-grid { grid-template-columns: 1fr; } | |
| .article-card { | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| text-decoration: none; | |
| color: inherit; | |
| transition: box-shadow 0.2s; | |
| } | |
| .article-card:hover { box-shadow: var(--shadow-md); } | |
| .article-image { | |
| aspect-ratio: 16/9; | |
| background: linear-gradient(135deg, #e8f4f8 0%, #d0e8f0 100%); | |
| position: relative; | |
| } | |
| .article-tag { | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 4px 10px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .article-content { padding: 16px; } | |
| .article-title { font-size: 15px; font-weight: 600; margin-bottom: 8px; line-height: 1.4; } | |
| .article-excerpt { font-size: 13px; color: var(--color-subtext); margin-bottom: 12px; line-height: 1.5; } | |
| .article-meta { font-size: 12px; color: var(--color-subtext); display: flex; gap: 12px; } | |
| /* Quick Tip Banner */ | |
| .quick-tip { | |
| background: #e8f4f8; | |
| padding: 24px; | |
| margin: 0 24px 24px; | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 16px; | |
| } | |
| .device-frame.mobile .quick-tip { flex-direction: column; text-align: center; align-items: center; } | |
| .quick-tip-icon { | |
| width: 48px; | |
| height: 48px; | |
| background: var(--color-primary); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 20px; | |
| flex-shrink: 0; | |
| } | |
| .quick-tip h4 { font-size: 15px; margin-bottom: 4px; } | |
| .quick-tip p { font-size: 13px; color: var(--color-subtext); } | |
| /* SEO Footer */ | |
| .seo-footer { | |
| padding: 48px 24px; | |
| background: white; | |
| border-top: 1px solid var(--color-border); | |
| } | |
| .seo-footer h3 { font-size: 20px; margin-bottom: 16px; } | |
| .seo-footer p { color: var(--color-subtext); font-size: 14px; line-height: 1.8; max-width: 900px; } | |
| /* Section Labels */ | |
| .section-label { | |
| position: absolute; | |
| top: -12px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background: var(--color-accent); | |
| color: white; | |
| padding: 4px 16px; | |
| border-radius: 12px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| white-space: nowrap; | |
| } | |
| .section-wrapper { | |
| position: relative; | |
| } | |
| .section-wrapper.new::before { | |
| content: "NEW SECTION"; | |
| position: absolute; | |
| top: 8px; | |
| right: 8px; | |
| background: var(--color-accent); | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 4px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| z-index: 10; | |
| } | |
| /* Notes Panel */ | |
| .notes-panel { | |
| background: #fff8e6; | |
| border: 1px solid #f0d78c; | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| margin: 40px 20px; | |
| max-width: 1200px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .notes-panel h3 { | |
| font-size: 16px; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .notes-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 16px; | |
| } | |
| .note-item { | |
| background: white; | |
| padding: 16px; | |
| border-radius: var(--radius-md); | |
| } | |
| .note-item h4 { font-size: 13px; margin-bottom: 8px; color: var(--color-primary); } | |
| .note-item p { font-size: 12px; color: var(--color-subtext); } | |
| .note-item code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 11px; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mockup-header"> | |
| <h1>Collection Page Content Integration</h1> | |
| <p>Mockup showing buying guide CTA, FAQs, and related articles on collection pages</p> | |
| </div> | |
| <div class="toolbar"> | |
| <button class="device-btn active" data-device="desktop" onclick="setDevice('desktop')"> | |
| <i class="fas fa-desktop"></i> Desktop | |
| </button> | |
| <button class="device-btn" data-device="tablet" onclick="setDevice('tablet')"> | |
| <i class="fas fa-tablet-alt"></i> Tablet | |
| </button> | |
| <button class="device-btn" data-device="mobile" onclick="setDevice('mobile')"> | |
| <i class="fas fa-mobile-alt"></i> Mobile | |
| </button> | |
| </div> | |
| <div class="preview-container"> | |
| <div class="device-frame desktop" id="deviceFrame"> | |
| <div class="page-content"> | |
| <!-- Breadcrumbs --> | |
| <div class="breadcrumbs"> | |
| <a href="#">Home</a> <span>/</span> <a href="#">Fans</a> <span>/</span> Ceiling Fans | |
| </div> | |
| <!-- NEW: Buying Guide CTA --> | |
| <div class="section-wrapper new"> | |
| <div class="buying-guide-cta" id="buyingGuideCta"> | |
| <div class="buying-guide-content"> | |
| <div class="buying-guide-badge"> | |
| <i class="fas fa-book-open"></i> Buying Guide | |
| </div> | |
| <h2>How to Choose the Right Ceiling Fan</h2> | |
| <p>Find the perfect fan size, style, and features for your space</p> | |
| </div> | |
| <a href="#" class="buying-guide-btn"> | |
| Read the Guide <i class="fas fa-arrow-right"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Collection Header --> | |
| <div class="collection-header"> | |
| <h1>Ceiling Fans</h1> | |
| <p>Browse our collection of stylish and efficient ceiling fans for every room in your home.</p> | |
| </div> | |
| <!-- Filter Bar --> | |
| <div class="filter-bar"> | |
| <div class="filter-group"> | |
| <button class="filter-btn"><i class="fas fa-sliders-h"></i> Filters</button> | |
| <button class="filter-btn">Size</button> | |
| <button class="filter-btn">Style</button> | |
| <button class="filter-btn">Finish</button> | |
| </div> | |
| <select class="sort-select"> | |
| <option>Sort: Featured</option> | |
| <option>Price: Low to High</option> | |
| <option>Price: High to Low</option> | |
| <option>Best Selling</option> | |
| </select> | |
| </div> | |
| <!-- Products Grid --> | |
| <div class="products-grid" id="productsGrid"> | |
| <div class="product-card"> | |
| <div class="product-image"><span class="product-badge">Sale</span></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Hunter</div> | |
| <div class="product-name">Dempsey 52" Low Profile Ceiling Fan</div> | |
| <div class="product-price"><span class="compare">$329</span> $249</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Minka-Aire</div> | |
| <div class="product-name">Wave 52" Ceiling Fan with Remote</div> | |
| <div class="product-price">$399</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Fanimation</div> | |
| <div class="product-name">Spitfire 60" Indoor/Outdoor Fan</div> | |
| <div class="product-price">$449</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Monte Carlo</div> | |
| <div class="product-name">Maverick 60" Modern Ceiling Fan</div> | |
| <div class="product-price">$529</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Hunter</div> | |
| <div class="product-name">Aker 36" Small Room Ceiling Fan</div> | |
| <div class="product-price">$179</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Casablanca</div> | |
| <div class="product-name">Wailea 52" Tropical Style Fan</div> | |
| <div class="product-price">$379</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Kichler</div> | |
| <div class="product-name">Basics Pro 52" Value Fan</div> | |
| <div class="product-price">$149</div> | |
| </div> | |
| </div> | |
| <div class="product-card"> | |
| <div class="product-image"></div> | |
| <div class="product-info"> | |
| <div class="product-brand">Modern Forms</div> | |
| <div class="product-name">Axis 54" Smart Ceiling Fan</div> | |
| <div class="product-price">$599</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Tip --> | |
| <div class="quick-tip"> | |
| <div class="quick-tip-icon"><i class="fas fa-lightbulb"></i></div> | |
| <div> | |
| <h4>Sizing Tip</h4> | |
| <p>For rooms up to 144 sq ft, choose a 42" or smaller fan. For larger rooms (225-400 sq ft), opt for 52-60" fans for optimal air circulation.</p> | |
| </div> | |
| </div> | |
| <!-- NEW: Category FAQs --> | |
| <div class="section-wrapper new"> | |
| <div class="category-faqs"> | |
| <div class="section-header"> | |
| <h2>Frequently Asked Questions</h2> | |
| <p>Quick answers about ceiling fans</p> | |
| </div> | |
| <div class="faq-list"> | |
| <div class="faq-item open"> | |
| <div class="faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| What size ceiling fan do I need for my room? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| The right fan size depends on your room dimensions. For rooms up to 75 sq ft, choose 29-36" fans. For 76-144 sq ft rooms, 36-42" fans work best. Rooms 144-225 sq ft need 44-50" fans, and larger spaces require 52-60" fans. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| Are ceiling fans energy efficient? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| Yes! Ceiling fans use significantly less energy than air conditioning. An Energy Star certified fan uses about 60% less energy than conventional models and can save up to $165 per year in energy costs. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| Can I install a ceiling fan myself? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| If you're replacing an existing fixture and have basic electrical knowledge, DIY installation is possible. However, if you need new wiring or are unsure, we recommend hiring a licensed electrician for safety. | |
| </div> | |
| </div> | |
| <div class="faq-item"> | |
| <div class="faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| What ceiling height do I need for a ceiling fan? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="faq-answer"> | |
| Fan blades should be at least 7 feet from the floor for safety. For standard 8-foot ceilings, use a flush-mount or hugger fan. For 9+ foot ceilings, a downrod mount provides better air circulation. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="faq-view-all"> | |
| <a href="#">View All FAQs <i class="fas fa-arrow-right"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NEW: Related Articles --> | |
| <div class="section-wrapper new"> | |
| <div class="related-articles"> | |
| <div class="section-header"> | |
| <h2>Helpful Guides & Inspiration</h2> | |
| <p>Learn more about ceiling fans</p> | |
| </div> | |
| <div class="articles-grid" id="articlesGrid"> | |
| <a href="#" class="article-card"> | |
| <div class="article-image"> | |
| <span class="article-tag">How-To</span> | |
| </div> | |
| <div class="article-content"> | |
| <h3 class="article-title">How to Install a Ceiling Fan: Step-by-Step Guide</h3> | |
| <p class="article-excerpt">Complete DIY instructions for replacing a light fixture with a ceiling fan...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-clock"></i> 8 min read</span> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="article-card"> | |
| <div class="article-image"> | |
| <span class="article-tag">Inspiration</span> | |
| </div> | |
| <div class="article-content"> | |
| <h3 class="article-title">10 Stunning Ceiling Fan Ideas for Every Room</h3> | |
| <p class="article-excerpt">From modern minimalist to farmhouse chic, discover fan styles that elevate...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-clock"></i> 5 min read</span> | |
| </div> | |
| </div> | |
| </a> | |
| <a href="#" class="article-card"> | |
| <div class="article-image"> | |
| <span class="article-tag">Tips</span> | |
| </div> | |
| <div class="article-content"> | |
| <h3 class="article-title">Summer vs Winter: How to Use Your Ceiling Fan Year-Round</h3> | |
| <p class="article-excerpt">Learn the simple switch that makes your fan work for both seasons...</p> | |
| <div class="article-meta"> | |
| <span><i class="far fa-clock"></i> 3 min read</span> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SEO Footer (Existing) --> | |
| <div class="seo-footer"> | |
| <h3>About Ceiling Fans</h3> | |
| <p>Ceiling fans are an energy-efficient way to cool your home while adding style and functionality. Our collection features top brands like Hunter, Minka-Aire, Fanimation, and more. Whether you need a compact fan for a small bedroom or a large outdoor fan for your patio, we have options in every size, style, and price point. Many of our ceiling fans include integrated LED lighting, remote controls, and smart home compatibility for the ultimate in convenience.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Implementation Notes --> | |
| <div class="notes-panel"> | |
| <h3><i class="fas fa-info-circle"></i> Implementation Notes</h3> | |
| <div class="notes-grid"> | |
| <div class="note-item"> | |
| <h4>Buying Guide CTA Section</h4> | |
| <p>New section: <code>collection-buying-guide-cta.liquid</code></p> | |
| <p>Source: <code>custom.buying_guide</code> metafield (article reference)</p> | |
| </div> | |
| <div class="note-item"> | |
| <h4>Category FAQs Section</h4> | |
| <p>New section: <code>collection-faqs.liquid</code></p> | |
| <p>Source: <code>custom.faqs</code> metafield (metaobject list)</p> | |
| </div> | |
| <div class="note-item"> | |
| <h4>Related Articles Section</h4> | |
| <p>New section: <code>collection-related-articles.liquid</code></p> | |
| <p>Source: Tag matching from blog (auto) or <code>custom.related_guides</code></p> | |
| </div> | |
| <div class="note-item"> | |
| <h4>Quick Tip (Existing)</h4> | |
| <p>Existing section: <code>collection-tips.liquid</code></p> | |
| <p>Source: <code>custom.lighting_tips</code> metafield</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function setDevice(device) { | |
| document.querySelectorAll('.device-btn').forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.device === device); | |
| }); | |
| const frame = document.getElementById('deviceFrame'); | |
| frame.className = 'device-frame ' + device; | |
| const cta = document.getElementById('buyingGuideCta'); | |
| cta.classList.toggle('mobile', device === 'mobile'); | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Content Ecosystem - Complete Mockups</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| /* ========================================= | |
| RESPONSIVE PREVIEW TOOLBAR | |
| ========================================= */ | |
| .preview-toolbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: #1a1a2e; | |
| color: white; | |
| padding: 10px 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| z-index: 9999; | |
| font-size: 13px; | |
| } | |
| .preview-toolbar-title { | |
| font-weight: 600; | |
| margin-right: 8px; | |
| } | |
| .preview-toolbar-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .preview-toolbar-label { | |
| color: #8b8b8b; | |
| font-size: 11px; | |
| } | |
| .viewport-btn { | |
| padding: 6px 14px; | |
| background: transparent; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| color: white; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| font-size: 12px; | |
| transition: all 0.2s; | |
| } | |
| .viewport-btn:hover { | |
| background: rgba(255,255,255,0.1); | |
| } | |
| .viewport-btn.active { | |
| background: #286278; | |
| border-color: #286278; | |
| } | |
| .viewport-indicator { | |
| margin-left: auto; | |
| color: #8b8b8b; | |
| font-size: 11px; | |
| } | |
| /* Viewport Simulation Container */ | |
| .viewport-container { | |
| margin-top: 50px; | |
| transition: all 0.3s ease; | |
| } | |
| .viewport-container.mobile-view { | |
| max-width: 375px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| box-shadow: 0 0 0 10px #1a1a2e, 0 20px 60px rgba(0,0,0,0.3); | |
| border-radius: 20px; | |
| overflow: hidden; | |
| } | |
| .viewport-container.tablet-view { | |
| max-width: 768px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| box-shadow: 0 0 0 10px #1a1a2e, 0 20px 60px rgba(0,0,0,0.3); | |
| border-radius: 16px; | |
| overflow: hidden; | |
| } | |
| .viewport-container.mobile-view, | |
| .viewport-container.tablet-view { | |
| background: white; | |
| } | |
| body.constrained-view { | |
| background: #2a2a3e; | |
| } | |
| :root { | |
| --color-primary: #286278; | |
| --color-primary-light: #3a7a8f; | |
| --color-primary-dark: #1a4a5c; | |
| --color-accent: #D14545; | |
| --color-accent-light: #e85c5c; | |
| --color-success: #2d8a4e; | |
| --color-warning: #d4a017; | |
| --color-bg: #f8f9fa; | |
| --color-card: #ffffff; | |
| --color-text: #1a1a1a; | |
| --color-subtext: #666666; | |
| --color-muted: #999999; | |
| --color-border: #e5e5e5; | |
| --color-border-light: #f0f0f0; | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-xl: 16px; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.1); | |
| --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); | |
| --shadow-xl: 0 12px 40px rgba(0,0,0,0.15); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| line-height: 1.6; | |
| } | |
| /* ========================================= | |
| NAVIGATION | |
| ========================================= */ | |
| .mockup-nav { | |
| position: sticky; | |
| top: 0; | |
| background: white; | |
| border-bottom: 1px solid var(--color-border); | |
| z-index: 1000; | |
| padding: 12px 20px; | |
| } | |
| .mockup-nav-inner { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| display: flex; | |
| align-items: center; | |
| gap: 24px; | |
| overflow-x: auto; | |
| } | |
| .mockup-nav-title { | |
| font-weight: 600; | |
| color: var(--color-primary); | |
| white-space: nowrap; | |
| } | |
| .mockup-nav a { | |
| color: var(--color-subtext); | |
| text-decoration: none; | |
| font-size: 14px; | |
| white-space: nowrap; | |
| padding: 6px 12px; | |
| border-radius: var(--radius-sm); | |
| transition: all 0.2s; | |
| } | |
| .mockup-nav a:hover { | |
| background: var(--color-bg); | |
| color: var(--color-primary); | |
| } | |
| /* ========================================= | |
| SECTION HEADERS | |
| ========================================= */ | |
| .section-divider { | |
| max-width: 1400px; | |
| margin: 60px auto 40px; | |
| padding: 0 20px; | |
| } | |
| .section-divider h2 { | |
| font-size: 28px; | |
| color: var(--color-primary); | |
| margin-bottom: 8px; | |
| padding-bottom: 16px; | |
| border-bottom: 3px solid var(--color-primary); | |
| } | |
| .section-divider p { | |
| color: var(--color-subtext); | |
| } | |
| .section-divider .badges { | |
| margin-top: 12px; | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .section-divider .badge { | |
| background: #e8f4f8; | |
| color: var(--color-primary); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| } | |
| .mockup-frame { | |
| max-width: 1400px; | |
| margin: 0 auto 60px; | |
| padding: 0 20px; | |
| } | |
| .mockup-container { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-lg); | |
| overflow: hidden; | |
| } | |
| .mockup-label { | |
| background: #2a2a2a; | |
| color: white; | |
| padding: 10px 20px; | |
| font-size: 12px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .mockup-label .dot { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| } | |
| .mockup-label .dot.red { background: #ff5f56; } | |
| .mockup-label .dot.yellow { background: #ffbd2e; } | |
| .mockup-label .dot.green { background: #27c93f; } | |
| /* ========================================= | |
| SHARED COMPONENTS | |
| ========================================= */ | |
| .hero { | |
| position: relative; | |
| background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); | |
| color: white; | |
| padding: 60px 40px; | |
| } | |
| .hero-overlay { | |
| background: url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=1400') center/cover; | |
| position: relative; | |
| } | |
| .hero-overlay::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(40, 98, 120, 0.85); | |
| } | |
| .hero-overlay > * { position: relative; z-index: 1; } | |
| .tag { | |
| display: inline-block; | |
| background: rgba(255,255,255,0.2); | |
| color: white; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| margin-bottom: 12px; | |
| } | |
| .tag.filled { | |
| background: var(--color-primary); | |
| color: white; | |
| } | |
| .tag.outline { | |
| background: transparent; | |
| border: 1px solid var(--color-primary); | |
| color: var(--color-primary); | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 12px 24px; | |
| border-radius: var(--radius-md); | |
| font-size: 15px; | |
| font-weight: 500; | |
| text-decoration: none; | |
| cursor: pointer; | |
| border: none; | |
| transition: all 0.2s; | |
| } | |
| .btn-primary { | |
| background: var(--color-accent); | |
| color: white; | |
| } | |
| .btn-primary:hover { background: var(--color-accent-light); } | |
| .btn-secondary { | |
| background: white; | |
| color: var(--color-primary); | |
| border: 1px solid var(--color-border); | |
| } | |
| .btn-secondary:hover { background: var(--color-bg); } | |
| .card { | |
| background: white; | |
| border-radius: var(--radius-md); | |
| border: 1px solid var(--color-border); | |
| overflow: hidden; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .card img { | |
| width: 100%; | |
| height: 200px; | |
| object-fit: cover; | |
| } | |
| .card-content { | |
| padding: 20px; | |
| } | |
| .card-tag { | |
| display: inline-block; | |
| background: #e8f4f8; | |
| color: var(--color-primary); | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| padding: 3px 8px; | |
| border-radius: 4px; | |
| margin-bottom: 8px; | |
| } | |
| .card h4 { | |
| font-size: 16px; | |
| margin-bottom: 8px; | |
| line-height: 1.4; | |
| } | |
| .card .meta { | |
| font-size: 13px; | |
| color: var(--color-muted); | |
| } | |
| .section-header { | |
| text-align: center; | |
| padding: 50px 20px 30px; | |
| } | |
| .section-header h2 { | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .section-header p { | |
| color: var(--color-subtext); | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .newsletter { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 50px 40px; | |
| text-align: center; | |
| } | |
| .newsletter h3 { font-size: 24px; margin-bottom: 8px; } | |
| .newsletter p { opacity: 0.9; margin-bottom: 20px; } | |
| .newsletter-form { | |
| display: flex; | |
| max-width: 450px; | |
| margin: 0 auto; | |
| gap: 12px; | |
| } | |
| .newsletter-form input { | |
| flex: 1; | |
| padding: 14px 20px; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 15px; | |
| } | |
| .newsletter-form button { | |
| background: var(--color-accent); | |
| color: white; | |
| border: none; | |
| padding: 14px 24px; | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| /* ========================================= | |
| 1. BUYING GUIDE ARTICLE | |
| ========================================= */ | |
| .article-layout { | |
| display: grid; | |
| grid-template-columns: 280px 1fr; | |
| gap: 40px; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px; | |
| } | |
| @media (max-width: 900px) { | |
| .article-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .article-sidebar { | |
| position: sticky; | |
| top: 80px; | |
| align-self: start; | |
| } | |
| .toc { | |
| background: var(--color-bg); | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| } | |
| .toc h4 { | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| color: var(--color-muted); | |
| margin-bottom: 16px; | |
| } | |
| .toc ul { | |
| list-style: none; | |
| } | |
| .toc li { | |
| margin-bottom: 12px; | |
| } | |
| .toc a { | |
| color: var(--color-subtext); | |
| text-decoration: none; | |
| font-size: 14px; | |
| display: block; | |
| padding: 4px 0; | |
| border-left: 2px solid transparent; | |
| padding-left: 12px; | |
| margin-left: -12px; | |
| transition: all 0.2s; | |
| } | |
| .toc a:hover, | |
| .toc a.active { | |
| color: var(--color-primary); | |
| border-left-color: var(--color-primary); | |
| } | |
| .article-content h2 { | |
| font-size: 24px; | |
| margin: 40px 0 16px; | |
| padding-top: 20px; | |
| border-top: 1px solid var(--color-border); | |
| } | |
| .article-content h2:first-child { | |
| margin-top: 0; | |
| padding-top: 0; | |
| border-top: none; | |
| } | |
| .article-content p { | |
| color: var(--color-subtext); | |
| margin-bottom: 16px; | |
| line-height: 1.8; | |
| } | |
| .callout { | |
| background: #fff8e6; | |
| border-left: 4px solid var(--color-warning); | |
| padding: 20px 24px; | |
| margin: 24px 0; | |
| border-radius: 0 var(--radius-md) var(--radius-md) 0; | |
| } | |
| .callout.tip { | |
| background: #e8f4f8; | |
| border-left-color: var(--color-primary); | |
| } | |
| .callout.success { | |
| background: #e8f5ec; | |
| border-left-color: var(--color-success); | |
| } | |
| .callout-title { | |
| font-weight: 600; | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .callout p { margin-bottom: 0; } | |
| /* Comparison Table */ | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin: 24px 0; | |
| font-size: 14px; | |
| } | |
| .comparison-table th { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 14px 16px; | |
| text-align: left; | |
| font-weight: 500; | |
| } | |
| .comparison-table td { | |
| padding: 14px 16px; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .comparison-table tr:hover td { | |
| background: var(--color-bg); | |
| } | |
| .comparison-table .check { | |
| color: var(--color-success); | |
| } | |
| .comparison-table .x { | |
| color: var(--color-muted); | |
| } | |
| /* Product Recommendation */ | |
| .product-rec { | |
| background: var(--color-bg); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| margin: 24px 0; | |
| } | |
| .product-rec-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| color: var(--color-primary); | |
| font-weight: 600; | |
| } | |
| .product-rec-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| } | |
| @media (max-width: 700px) { | |
| .product-rec-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .product-card { | |
| background: white; | |
| border-radius: var(--radius-md); | |
| padding: 16px; | |
| text-align: center; | |
| } | |
| .product-card img { | |
| width: 100%; | |
| height: 120px; | |
| object-fit: contain; | |
| margin-bottom: 12px; | |
| } | |
| .product-card h5 { | |
| font-size: 14px; | |
| margin-bottom: 8px; | |
| } | |
| .product-card .price { | |
| font-weight: 600; | |
| color: var(--color-primary); | |
| } | |
| /* Top Pick Banner */ | |
| .top-pick { | |
| background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); | |
| color: white; | |
| border-radius: var(--radius-lg); | |
| padding: 32px; | |
| margin: 32px 0; | |
| display: grid; | |
| grid-template-columns: 200px 1fr; | |
| gap: 32px; | |
| align-items: center; | |
| } | |
| @media (max-width: 600px) { | |
| .top-pick { | |
| grid-template-columns: 1fr; | |
| text-align: center; | |
| } | |
| } | |
| .top-pick img { | |
| width: 100%; | |
| border-radius: var(--radius-md); | |
| } | |
| .top-pick-badge { | |
| background: var(--color-accent); | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| margin-bottom: 12px; | |
| } | |
| .top-pick h3 { | |
| font-size: 22px; | |
| margin-bottom: 8px; | |
| } | |
| .top-pick p { | |
| opacity: 0.9; | |
| margin-bottom: 16px; | |
| } | |
| /* ========================================= | |
| 2. HOW-TO GUIDE | |
| ========================================= */ | |
| .howto-meta { | |
| display: flex; | |
| gap: 24px; | |
| margin: 20px 0; | |
| flex-wrap: wrap; | |
| } | |
| .howto-meta-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| } | |
| .howto-meta-item i { | |
| color: var(--color-primary); | |
| } | |
| .materials-box { | |
| background: var(--color-bg); | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| margin: 24px 0; | |
| } | |
| .materials-box h4 { | |
| font-size: 16px; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .materials-list { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 12px; | |
| } | |
| @media (max-width: 500px) { | |
| .materials-list { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .materials-list li { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| color: var(--color-subtext); | |
| } | |
| .materials-list i { | |
| color: var(--color-success); | |
| } | |
| .step { | |
| display: grid; | |
| grid-template-columns: 60px 1fr; | |
| gap: 24px; | |
| padding: 32px 0; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| @media (max-width: 500px) { | |
| .step { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .step-number { | |
| width: 60px; | |
| height: 60px; | |
| background: var(--color-primary); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| font-weight: 600; | |
| } | |
| .step-content h3 { | |
| font-size: 20px; | |
| margin-bottom: 12px; | |
| } | |
| .step-content p { | |
| color: var(--color-subtext); | |
| margin-bottom: 16px; | |
| } | |
| .step-image { | |
| width: 100%; | |
| max-width: 500px; | |
| border-radius: var(--radius-md); | |
| margin-top: 16px; | |
| } | |
| .step-tip { | |
| background: #e8f4f8; | |
| padding: 12px 16px; | |
| border-radius: var(--radius-md); | |
| margin-top: 16px; | |
| font-size: 14px; | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .step-tip i { | |
| color: var(--color-primary); | |
| margin-top: 2px; | |
| } | |
| .warning-box { | |
| background: #fff0f0; | |
| border: 1px solid #ffcccc; | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| margin: 24px 0; | |
| display: flex; | |
| gap: 16px; | |
| } | |
| .warning-box i { | |
| color: var(--color-accent); | |
| font-size: 24px; | |
| } | |
| .warning-box h4 { | |
| color: var(--color-accent); | |
| margin-bottom: 8px; | |
| } | |
| /* ========================================= | |
| 3. INSPIRATION GALLERY | |
| ========================================= */ | |
| .inspiration-hero { | |
| position: relative; | |
| height: 500px; | |
| background: url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1400') center/cover; | |
| } | |
| .inspiration-hero::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.3) 100%); | |
| } | |
| .inspiration-hero-content { | |
| position: absolute; | |
| bottom: 40px; | |
| left: 40px; | |
| right: 40px; | |
| color: white; | |
| } | |
| .style-tags { | |
| display: flex; | |
| gap: 8px; | |
| margin-bottom: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .style-tag { | |
| background: rgba(255,255,255,0.2); | |
| backdrop-filter: blur(10px); | |
| padding: 6px 14px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| } | |
| .inspiration-hero h1 { | |
| font-size: 42px; | |
| margin-bottom: 12px; | |
| } | |
| .inspiration-hero p { | |
| font-size: 18px; | |
| opacity: 0.9; | |
| max-width: 600px; | |
| } | |
| .shop-the-look { | |
| padding: 40px; | |
| } | |
| .shop-the-look h2 { | |
| font-size: 24px; | |
| margin-bottom: 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .shop-the-look h2 i { | |
| color: var(--color-primary); | |
| } | |
| .look-grid { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 20px; | |
| } | |
| @media (max-width: 900px) { | |
| .look-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| .look-item { | |
| text-align: center; | |
| } | |
| .look-item img { | |
| width: 100%; | |
| aspect-ratio: 1; | |
| object-fit: cover; | |
| border-radius: var(--radius-md); | |
| margin-bottom: 12px; | |
| } | |
| .look-item h4 { | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .look-item .price { | |
| color: var(--color-primary); | |
| font-weight: 600; | |
| } | |
| .designer-tip { | |
| background: linear-gradient(135deg, #f8f4e8 0%, #f0ece0 100%); | |
| padding: 32px 40px; | |
| display: flex; | |
| gap: 24px; | |
| align-items: center; | |
| } | |
| .designer-tip img { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| } | |
| .designer-tip blockquote { | |
| font-size: 18px; | |
| font-style: italic; | |
| color: var(--color-text); | |
| margin-bottom: 8px; | |
| } | |
| .designer-tip cite { | |
| font-size: 14px; | |
| color: var(--color-subtext); | |
| font-style: normal; | |
| } | |
| .related-rooms { | |
| padding: 40px; | |
| background: var(--color-bg); | |
| } | |
| .related-rooms h3 { | |
| font-size: 20px; | |
| margin-bottom: 24px; | |
| } | |
| .rooms-scroll { | |
| display: flex; | |
| gap: 20px; | |
| overflow-x: auto; | |
| padding-bottom: 16px; | |
| } | |
| .room-card { | |
| flex: 0 0 280px; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| position: relative; | |
| } | |
| .room-card img { | |
| width: 100%; | |
| height: 180px; | |
| object-fit: cover; | |
| } | |
| .room-card-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 16px; | |
| background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); | |
| color: white; | |
| } | |
| .room-card h4 { | |
| font-size: 16px; | |
| } | |
| /* ========================================= | |
| 4. FAQ PAGE | |
| ========================================= */ | |
| .faq-header { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 60px 40px; | |
| text-align: center; | |
| } | |
| .faq-header h1 { | |
| font-size: 36px; | |
| margin-bottom: 16px; | |
| } | |
| .faq-search { | |
| max-width: 500px; | |
| margin: 0 auto; | |
| position: relative; | |
| } | |
| .faq-search input { | |
| width: 100%; | |
| padding: 16px 20px 16px 50px; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 16px; | |
| } | |
| .faq-search i { | |
| position: absolute; | |
| left: 20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| color: var(--color-muted); | |
| } | |
| .faq-filters { | |
| display: flex; | |
| justify-content: center; | |
| gap: 12px; | |
| padding: 24px; | |
| background: var(--color-bg); | |
| flex-wrap: wrap; | |
| } | |
| .filter-pill { | |
| padding: 8px 20px; | |
| border-radius: 20px; | |
| border: 1px solid var(--color-border); | |
| background: white; | |
| font-size: 14px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .filter-pill:hover, | |
| .filter-pill.active { | |
| background: var(--color-primary); | |
| color: white; | |
| border-color: var(--color-primary); | |
| } | |
| .faq-content { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| .faq-category { | |
| margin-bottom: 32px; | |
| } | |
| .faq-category h3 { | |
| font-size: 18px; | |
| color: var(--color-primary); | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .accordion-item { | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| margin-bottom: 12px; | |
| overflow: hidden; | |
| } | |
| .accordion-header { | |
| padding: 16px 20px; | |
| background: white; | |
| cursor: pointer; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-weight: 500; | |
| } | |
| .accordion-header:hover { | |
| background: var(--color-bg); | |
| } | |
| .accordion-header i { | |
| color: var(--color-muted); | |
| transition: transform 0.2s; | |
| } | |
| .accordion-item.open .accordion-header i { | |
| transform: rotate(180deg); | |
| } | |
| .accordion-body { | |
| padding: 0 20px 20px; | |
| color: var(--color-subtext); | |
| line-height: 1.7; | |
| display: none; | |
| } | |
| .accordion-item.open .accordion-body { | |
| display: block; | |
| } | |
| .faq-cta { | |
| text-align: center; | |
| padding: 40px; | |
| background: var(--color-bg); | |
| } | |
| .faq-cta h3 { | |
| margin-bottom: 8px; | |
| } | |
| .faq-cta p { | |
| color: var(--color-subtext); | |
| margin-bottom: 20px; | |
| } | |
| /* ========================================= | |
| 5. BLOG ARCHIVE | |
| ========================================= */ | |
| .archive-header { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 50px 40px; | |
| } | |
| .archive-header h1 { | |
| font-size: 36px; | |
| margin-bottom: 8px; | |
| } | |
| .archive-header p { | |
| opacity: 0.9; | |
| } | |
| .archive-toolbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 40px; | |
| background: white; | |
| border-bottom: 1px solid var(--color-border); | |
| flex-wrap: wrap; | |
| gap: 16px; | |
| } | |
| .archive-tabs { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .archive-tab { | |
| padding: 8px 16px; | |
| border-radius: var(--radius-md); | |
| font-size: 14px; | |
| color: var(--color-subtext); | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .archive-tab:hover, | |
| .archive-tab.active { | |
| background: var(--color-primary); | |
| color: white; | |
| } | |
| .archive-sort { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| color: var(--color-subtext); | |
| } | |
| .archive-sort select { | |
| padding: 8px 12px; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| font-size: 14px; | |
| } | |
| .archive-content { | |
| padding: 40px; | |
| } | |
| .featured-article { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 32px; | |
| margin-bottom: 40px; | |
| padding-bottom: 40px; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| @media (max-width: 800px) { | |
| .featured-article { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .featured-article img { | |
| width: 100%; | |
| height: 300px; | |
| object-fit: cover; | |
| border-radius: var(--radius-lg); | |
| } | |
| .featured-article-content { | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| } | |
| .featured-article h2 { | |
| font-size: 28px; | |
| margin-bottom: 16px; | |
| line-height: 1.3; | |
| } | |
| .featured-article p { | |
| color: var(--color-subtext); | |
| margin-bottom: 20px; | |
| line-height: 1.7; | |
| } | |
| .article-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| @media (max-width: 900px) { | |
| .article-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .article-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .pagination { | |
| display: flex; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 40px; | |
| } | |
| .pagination a { | |
| width: 40px; | |
| height: 40px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| text-decoration: none; | |
| color: var(--color-text); | |
| transition: all 0.2s; | |
| } | |
| .pagination a:hover, | |
| .pagination a.active { | |
| background: var(--color-primary); | |
| color: white; | |
| border-color: var(--color-primary); | |
| } | |
| /* ========================================= | |
| OVERVIEW TABLE | |
| ========================================= */ | |
| .overview-section { | |
| max-width: 1200px; | |
| margin: 40px auto; | |
| padding: 0 20px; | |
| } | |
| .overview-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| @media (max-width: 900px) { | |
| .overview-grid { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .overview-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .overview-card { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| border: 1px solid var(--color-border); | |
| } | |
| .overview-card h3 { | |
| font-size: 18px; | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .overview-card h3 i { | |
| color: var(--color-primary); | |
| } | |
| .overview-card p { | |
| color: var(--color-subtext); | |
| font-size: 14px; | |
| margin-bottom: 16px; | |
| } | |
| .overview-card ul { | |
| list-style: none; | |
| font-size: 13px; | |
| } | |
| .overview-card li { | |
| padding: 6px 0; | |
| color: var(--color-subtext); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .overview-card li i { | |
| color: var(--color-success); | |
| font-size: 12px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Responsive Preview Toolbar --> | |
| <div class="preview-toolbar"> | |
| <span class="preview-toolbar-title">Content Ecosystem Mockups</span> | |
| <div class="preview-toolbar-group"> | |
| <span class="preview-toolbar-label">View:</span> | |
| <button class="viewport-btn active" onclick="setViewport('desktop')">Desktop</button> | |
| <button class="viewport-btn" onclick="setViewport('tablet')">Tablet (768px)</button> | |
| <button class="viewport-btn" onclick="setViewport('mobile')">Mobile (375px)</button> | |
| </div> | |
| <span class="viewport-indicator" id="viewportIndicator">Full Width Desktop</span> | |
| </div> | |
| <div class="viewport-container" id="viewportContainer"> | |
| <!-- Navigation --> | |
| <nav class="mockup-nav"> | |
| <div class="mockup-nav-inner"> | |
| <span class="mockup-nav-title">Content Ecosystem</span> | |
| <a href="#overview">Overview</a> | |
| <a href="#buying-guide">Buying Guide</a> | |
| <a href="#how-to">How-To Guide</a> | |
| <a href="#inspiration">Inspiration</a> | |
| <a href="#faq">FAQ Page</a> | |
| <a href="#archive">Blog Archive</a> | |
| </div> | |
| </nav> | |
| <!-- ========================================= | |
| OVERVIEW | |
| ========================================= --> | |
| <section id="overview" class="overview-section"> | |
| <div class="section-divider" style="margin-top: 20px;"> | |
| <h2>Content Ecosystem Overview</h2> | |
| <p>Complete mockups for all content types. Click navigation above to jump to each section.</p> | |
| </div> | |
| <div class="overview-grid"> | |
| <div class="overview-card"> | |
| <h3><i class="fas fa-home"></i> Resource Hub</h3> | |
| <p>Central landing page linking to all content</p> | |
| <ul> | |
| <li><i class="fas fa-check"></i> 3 layout variants created</li> | |
| <li><i class="fas fa-check"></i> Category navigation cards</li> | |
| <li><i class="fas fa-check"></i> Featured articles section</li> | |
| <li><i class="fas fa-check"></i> Newsletter signup</li> | |
| </ul> | |
| <a href="resource-hub.html" class="btn btn-secondary" style="margin-top: 16px; display: inline-block;">View Mockup</a> | |
| </div> | |
| <div class="overview-card"> | |
| <h3><i class="fas fa-book-open"></i> Buying Guide</h3> | |
| <p>In-depth product selection guides</p> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Sticky table of contents</li> | |
| <li><i class="fas fa-check"></i> Comparison tables</li> | |
| <li><i class="fas fa-check"></i> Product recommendations</li> | |
| <li><i class="fas fa-check"></i> Expert tip callouts</li> | |
| </ul> | |
| </div> | |
| <div class="overview-card"> | |
| <h3><i class="fas fa-tools"></i> How-To Guide</h3> | |
| <p>Step-by-step installation & sizing guides</p> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Numbered steps with images</li> | |
| <li><i class="fas fa-check"></i> Materials/tools list</li> | |
| <li><i class="fas fa-check"></i> Safety warnings</li> | |
| <li><i class="fas fa-check"></i> Pro tips per step</li> | |
| </ul> | |
| </div> | |
| <div class="overview-card"> | |
| <h3><i class="fas fa-lightbulb"></i> Inspiration Gallery</h3> | |
| <p>Room designs & style showcases</p> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Full-width hero imagery</li> | |
| <li><i class="fas fa-check"></i> Shop the look products</li> | |
| <li><i class="fas fa-check"></i> Designer tips</li> | |
| <li><i class="fas fa-check"></i> Related rooms carousel</li> | |
| </ul> | |
| </div> | |
| <div class="overview-card"> | |
| <h3><i class="fas fa-question-circle"></i> FAQ Page</h3> | |
| <p>Searchable, categorized Q&A</p> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Search functionality</li> | |
| <li><i class="fas fa-check"></i> Category filter pills</li> | |
| <li><i class="fas fa-check"></i> Accordion UI</li> | |
| <li><i class="fas fa-check"></i> Contact CTA</li> | |
| </ul> | |
| </div> | |
| <div class="overview-card"> | |
| <h3><i class="fas fa-newspaper"></i> Blog Archive</h3> | |
| <p>Filterable article listings</p> | |
| <ul> | |
| <li><i class="fas fa-check"></i> Category tabs</li> | |
| <li><i class="fas fa-check"></i> Featured article hero</li> | |
| <li><i class="fas fa-check"></i> Article grid</li> | |
| <li><i class="fas fa-check"></i> Pagination</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ========================================= | |
| 1. BUYING GUIDE ARTICLE | |
| ========================================= --> | |
| <div class="section-divider" id="buying-guide"> | |
| <h2>Buying Guide Article</h2> | |
| <p>In-depth guides helping customers choose the right products</p> | |
| <div class="badges"> | |
| <span class="badge">Bloggle Template</span> | |
| <span class="badge">TOC Sidebar</span> | |
| <span class="badge">Comparison Tables</span> | |
| <span class="badge">Product Cards</span> | |
| </div> | |
| </div> | |
| <div class="mockup-frame"> | |
| <div class="mockup-container"> | |
| <div class="mockup-label"> | |
| <span class="dot red"></span> | |
| <span class="dot yellow"></span> | |
| <span class="dot green"></span> | |
| <span>lamps.com/blogs/guides/how-to-choose-ceiling-fan</span> | |
| </div> | |
| <!-- Hero --> | |
| <div class="hero hero-overlay" style="padding: 80px 40px;"> | |
| <span class="tag">Buying Guide</span> | |
| <h1 style="font-size: 38px; max-width: 700px;">How to Choose the Right Ceiling Fan Size for Any Room</h1> | |
| <div style="display: flex; gap: 24px; margin-top: 20px; font-size: 14px; opacity: 0.9;"> | |
| <span><i class="far fa-clock"></i> 12 min read</span> | |
| <span><i class="far fa-calendar"></i> Updated Jan 2026</span> | |
| <span><i class="far fa-user"></i> By Sarah Mitchell</span> | |
| </div> | |
| </div> | |
| <!-- Article Layout --> | |
| <div class="article-layout"> | |
| <!-- Sidebar TOC --> | |
| <aside class="article-sidebar"> | |
| <div class="toc"> | |
| <h4>In This Guide</h4> | |
| <ul> | |
| <li><a href="#" class="active">Why Size Matters</a></li> | |
| <li><a href="#">Room Size Guidelines</a></li> | |
| <li><a href="#">Blade Span Chart</a></li> | |
| <li><a href="#">Ceiling Height Considerations</a></li> | |
| <li><a href="#">Our Top Picks</a></li> | |
| <li><a href="#">FAQ</a></li> | |
| </ul> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <div class="article-content"> | |
| <h2>Why Ceiling Fan Size Matters</h2> | |
| <p>Choosing the right ceiling fan size isn't just about aesthetics—it directly impacts airflow efficiency, energy consumption, and overall comfort. A fan that's too small won't circulate air effectively, while an oversized fan can create uncomfortable wind chill and look disproportionate.</p> | |
| <p>The good news? Getting it right is simple once you understand the basics. This guide will walk you through everything you need to know to choose the perfect ceiling fan size for any room in your home.</p> | |
| <div class="callout tip"> | |
| <div class="callout-title"><i class="fas fa-lightbulb"></i> Expert Tip</div> | |
| <p>When in doubt, go slightly larger. A bigger fan running on low speed is quieter and more efficient than a smaller fan running on high.</p> | |
| </div> | |
| <h2>Room Size Guidelines</h2> | |
| <p>The most important factor in choosing a ceiling fan is matching the blade span to your room's square footage. Here's a quick reference:</p> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th>Room Size</th> | |
| <th>Recommended Blade Span</th> | |
| <th>Example Rooms</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Up to 75 sq ft</td> | |
| <td>29" - 36"</td> | |
| <td>Bathrooms, small offices</td> | |
| </tr> | |
| <tr> | |
| <td>76 - 144 sq ft</td> | |
| <td>36" - 42"</td> | |
| <td>Bedrooms, kitchens</td> | |
| </tr> | |
| <tr> | |
| <td>144 - 225 sq ft</td> | |
| <td>44" - 50"</td> | |
| <td>Master bedrooms, dining rooms</td> | |
| </tr> | |
| <tr> | |
| <td>225 - 400 sq ft</td> | |
| <td>50" - 54"</td> | |
| <td>Living rooms, large bedrooms</td> | |
| </tr> | |
| <tr> | |
| <td>Over 400 sq ft</td> | |
| <td>60" - 72" (or multiple fans)</td> | |
| <td>Great rooms, open concepts</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <h2>Ceiling Height Considerations</h2> | |
| <p>Your ceiling height determines whether you need a flush mount, standard downrod, or extended downrod installation:</p> | |
| <div class="callout"> | |
| <div class="callout-title"><i class="fas fa-ruler-vertical"></i> Height Rule</div> | |
| <p>Fan blades should hang 8-9 feet from the floor for optimal airflow. For every foot above 9 feet, add 6 inches of downrod length.</p> | |
| </div> | |
| <!-- Top Pick --> | |
| <div class="top-pick"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400" alt="Top Pick Fan"> | |
| <div> | |
| <span class="top-pick-badge"><i class="fas fa-award"></i> Editor's Choice</span> | |
| <h3>Hunter Dempsey 52" Ceiling Fan</h3> | |
| <p>Perfect for rooms 144-400 sq ft. Whisper-quiet motor, reversible blades, and integrated LED light. Our most popular mid-size option.</p> | |
| <a href="#" class="btn btn-primary">Shop Now - $249</a> | |
| </div> | |
| </div> | |
| <h2>Our Top Picks by Room Size</h2> | |
| <p>Based on customer reviews, energy efficiency, and value, here are our recommendations for each room size category:</p> | |
| <div class="product-rec"> | |
| <div class="product-rec-header"> | |
| <i class="fas fa-star"></i> Top Rated Ceiling Fans | |
| </div> | |
| <div class="product-rec-grid"> | |
| <div class="product-card"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=200" alt="Small Fan"> | |
| <h5>MinkaAire 36" Supra</h5> | |
| <div class="price">$179</div> | |
| <div style="font-size: 12px; color: var(--color-muted); margin-top: 4px;">Best for small rooms</div> | |
| </div> | |
| <div class="product-card"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=200" alt="Medium Fan"> | |
| <h5>Hunter Dempsey 52"</h5> | |
| <div class="price">$249</div> | |
| <div style="font-size: 12px; color: var(--color-muted); margin-top: 4px;">Best for medium rooms</div> | |
| </div> | |
| <div class="product-card"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=200" alt="Large Fan"> | |
| <h5>Big Ass Fans Haiku 60"</h5> | |
| <div class="price">$1,195</div> | |
| <div style="font-size: 12px; color: var(--color-muted); margin-top: 4px;">Best for large rooms</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Related Articles --> | |
| <div style="margin-top: 40px; padding-top: 40px; border-top: 1px solid var(--color-border);"> | |
| <h3 style="margin-bottom: 20px;">Related Guides</h3> | |
| <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;"> | |
| <a href="#" style="display: flex; gap: 16px; text-decoration: none; color: inherit; padding: 16px; background: var(--color-bg); border-radius: var(--radius-md);"> | |
| <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=100" style="width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm);"> | |
| <div> | |
| <div style="font-size: 14px; font-weight: 500;">Ceiling Fan Installation Guide</div> | |
| <div style="font-size: 12px; color: var(--color-muted);">How-To Guide</div> | |
| </div> | |
| </a> | |
| <a href="#" style="display: flex; gap: 16px; text-decoration: none; color: inherit; padding: 16px; background: var(--color-bg); border-radius: var(--radius-md);"> | |
| <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=100" style="width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm);"> | |
| <div> | |
| <div style="font-size: 14px; font-weight: 500;">Best Ceiling Fans for Bedrooms</div> | |
| <div style="font-size: 12px; color: var(--color-muted);">Buying Guide</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter"> | |
| <h3>Get More Expert Guides</h3> | |
| <p>Join 50,000+ homeowners getting lighting tips delivered weekly</p> | |
| <div class="newsletter-form"> | |
| <input type="email" placeholder="Enter your email"> | |
| <button>Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================================= | |
| 2. HOW-TO GUIDE | |
| ========================================= --> | |
| <div class="section-divider" id="how-to"> | |
| <h2>How-To Guide Article</h2> | |
| <p>Step-by-step instructions for installation, sizing, and maintenance</p> | |
| <div class="badges"> | |
| <span class="badge">Bloggle Template</span> | |
| <span class="badge">Numbered Steps</span> | |
| <span class="badge">Materials List</span> | |
| <span class="badge">Safety Warnings</span> | |
| </div> | |
| </div> | |
| <div class="mockup-frame"> | |
| <div class="mockup-container"> | |
| <div class="mockup-label"> | |
| <span class="dot red"></span> | |
| <span class="dot yellow"></span> | |
| <span class="dot green"></span> | |
| <span>lamps.com/blogs/guides/how-to-install-pendant-light</span> | |
| </div> | |
| <!-- Hero --> | |
| <div class="hero" style="background: linear-gradient(135deg, #1a4a5c 0%, #286278 100%); padding: 60px 40px;"> | |
| <span class="tag">How-To Guide</span> | |
| <h1 style="font-size: 36px; max-width: 600px;">How to Install a Pendant Light Over Your Kitchen Island</h1> | |
| <div class="howto-meta" style="color: white;"> | |
| <div class="howto-meta-item"><i class="fas fa-clock"></i> 45-60 minutes</div> | |
| <div class="howto-meta-item"><i class="fas fa-signal"></i> Intermediate</div> | |
| <div class="howto-meta-item"><i class="fas fa-tools"></i> Basic tools required</div> | |
| </div> | |
| </div> | |
| <div style="max-width: 800px; margin: 0 auto; padding: 40px;"> | |
| <!-- Warning --> | |
| <div class="warning-box"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| <div> | |
| <h4>Safety First</h4> | |
| <p style="margin: 0; color: var(--color-subtext);">Always turn off power at the circuit breaker before working with electrical wiring. Use a voltage tester to confirm power is off before touching any wires.</p> | |
| </div> | |
| </div> | |
| <!-- Materials --> | |
| <div class="materials-box"> | |
| <h4><i class="fas fa-toolbox"></i> What You'll Need</h4> | |
| <ul class="materials-list"> | |
| <li><i class="fas fa-check"></i> Pendant light fixture</li> | |
| <li><i class="fas fa-check"></i> Wire strippers</li> | |
| <li><i class="fas fa-check"></i> Screwdriver (flathead & Phillips)</li> | |
| <li><i class="fas fa-check"></i> Voltage tester</li> | |
| <li><i class="fas fa-check"></i> Wire nuts</li> | |
| <li><i class="fas fa-check"></i> Electrical tape</li> | |
| <li><i class="fas fa-check"></i> Step ladder</li> | |
| <li><i class="fas fa-check"></i> Measuring tape</li> | |
| </ul> | |
| </div> | |
| <!-- Steps --> | |
| <div class="step"> | |
| <div class="step-number">1</div> | |
| <div class="step-content"> | |
| <h3>Turn Off the Power</h3> | |
| <p>Locate your home's electrical panel and turn off the circuit breaker that controls the kitchen lighting. Use a voltage tester on the existing fixture to confirm power is completely off.</p> | |
| <img class="step-image" src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=500" alt="Circuit breaker"> | |
| <div class="step-tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <span><strong>Pro Tip:</strong> Take a photo of the existing wiring before disconnecting anything. This makes reconnection much easier.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">2</div> | |
| <div class="step-content"> | |
| <h3>Remove the Existing Fixture</h3> | |
| <p>Unscrew the canopy or mounting plate from the ceiling. Carefully disconnect the wires by removing the wire nuts. Support the fixture while doing this to prevent it from falling.</p> | |
| <div class="step-tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <span><strong>Pro Tip:</strong> Have a helper hold the fixture while you disconnect the wires, or use a temporary hook to support it.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">3</div> | |
| <div class="step-content"> | |
| <h3>Install the Mounting Bracket</h3> | |
| <p>Attach the new mounting bracket to the electrical box using the provided screws. Make sure it's secure—this bracket will support the entire weight of your new pendant.</p> | |
| <img class="step-image" src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=500" alt="Mounting bracket"> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">4</div> | |
| <div class="step-content"> | |
| <h3>Connect the Wires</h3> | |
| <p>Match the wires from your pendant to the wires in the ceiling box:</p> | |
| <ul style="margin: 16px 0; padding-left: 20px; color: var(--color-subtext);"> | |
| <li><strong>Black to black</strong> (hot)</li> | |
| <li><strong>White to white</strong> (neutral)</li> | |
| <li><strong>Green/bare to green/bare</strong> (ground)</li> | |
| </ul> | |
| <p>Twist matching wires together clockwise, then secure with wire nuts. Wrap electrical tape around the base of each wire nut for extra security.</p> | |
| <div class="step-tip"> | |
| <i class="fas fa-lightbulb"></i> | |
| <span><strong>Pro Tip:</strong> Give each connection a gentle tug to make sure it's secure before tucking wires into the box.</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-number">5</div> | |
| <div class="step-content"> | |
| <h3>Attach the Canopy and Adjust Height</h3> | |
| <p>Push the wires into the electrical box and attach the canopy to the mounting bracket. Adjust the cord or chain to your desired hanging height—typically 30-36 inches above the island surface.</p> | |
| <img class="step-image" src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=500" alt="Pendant height"> | |
| </div> | |
| </div> | |
| <div class="step" style="border-bottom: none;"> | |
| <div class="step-number">6</div> | |
| <div class="step-content"> | |
| <h3>Restore Power and Test</h3> | |
| <p>Turn the circuit breaker back on and test your new pendant light. If it doesn't work, turn off the power and check your wire connections.</p> | |
| <div class="callout success" style="margin-top: 16px;"> | |
| <div class="callout-title"><i class="fas fa-check-circle"></i> You're Done!</div> | |
| <p>Enjoy your new pendant light! For multiple pendants, repeat these steps for each fixture.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Need Help CTA --> | |
| <div style="background: var(--color-bg); padding: 32px; border-radius: var(--radius-lg); text-align: center; margin-top: 40px;"> | |
| <h3 style="margin-bottom: 8px;">Need Help With Installation?</h3> | |
| <p style="color: var(--color-subtext); margin-bottom: 20px;">Our lighting experts are available 9am-9pm EST</p> | |
| <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;"> | |
| <a href="#" class="btn btn-primary"><i class="fas fa-comments"></i> Live Chat</a> | |
| <a href="#" class="btn btn-secondary"><i class="fas fa-phone"></i> Call 1-800-555-LAMP</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter"> | |
| <h3>Get More DIY Guides</h3> | |
| <p>Installation tips and project ideas delivered to your inbox</p> | |
| <div class="newsletter-form"> | |
| <input type="email" placeholder="Enter your email"> | |
| <button>Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================================= | |
| 3. INSPIRATION GALLERY | |
| ========================================= --> | |
| <div class="section-divider" id="inspiration"> | |
| <h2>Inspiration Gallery</h2> | |
| <p>Visual-heavy room showcases with shop-the-look functionality</p> | |
| <div class="badges"> | |
| <span class="badge">Bloggle Template</span> | |
| <span class="badge">Full-Width Hero</span> | |
| <span class="badge">Shop the Look</span> | |
| <span class="badge">Designer Tips</span> | |
| </div> | |
| </div> | |
| <div class="mockup-frame"> | |
| <div class="mockup-container"> | |
| <div class="mockup-label"> | |
| <span class="dot red"></span> | |
| <span class="dot yellow"></span> | |
| <span class="dot green"></span> | |
| <span>lamps.com/blogs/inspiration/modern-farmhouse-kitchen</span> | |
| </div> | |
| <!-- Full-Width Hero --> | |
| <div class="inspiration-hero"> | |
| <div class="inspiration-hero-content"> | |
| <div class="style-tags"> | |
| <span class="style-tag">Modern Farmhouse</span> | |
| <span class="style-tag">Kitchen</span> | |
| <span class="style-tag">Pendant Lighting</span> | |
| </div> | |
| <h1>Modern Farmhouse Kitchen</h1> | |
| <p>Warm wood tones meet industrial metal in this inviting kitchen that balances rustic charm with contemporary function.</p> | |
| </div> | |
| </div> | |
| <!-- Shop the Look --> | |
| <div class="shop-the-look"> | |
| <h2><i class="fas fa-shopping-bag"></i> Shop This Look</h2> | |
| <div class="look-grid"> | |
| <div class="look-item"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=300" alt="Pendant 1"> | |
| <h4>Kichler Barrington Pendant</h4> | |
| <div class="price">$189</div> | |
| </div> | |
| <div class="look-item"> | |
| <img src="https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=300" alt="Pendant 2"> | |
| <h4>Progress Lighting Briarwood</h4> | |
| <div class="price">$156</div> | |
| </div> | |
| <div class="look-item"> | |
| <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=300" alt="Chandelier"> | |
| <h4>Capital Lighting Colton</h4> | |
| <div class="price">$428</div> | |
| </div> | |
| <div class="look-item"> | |
| <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=300" alt="Sconce"> | |
| <h4>Sea Gull Belton Sconce</h4> | |
| <div class="price">$89</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Designer Tip --> | |
| <div class="designer-tip"> | |
| <img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?w=150" alt="Designer"> | |
| <div> | |
| <blockquote>"The key to modern farmhouse is mixing finishes. Pair matte black hardware with warm brass accents, and don't be afraid of industrial elements like exposed bulbs and cage pendants."</blockquote> | |
| <cite>— Emily Henderson, Interior Designer</cite> | |
| </div> | |
| </div> | |
| <!-- Related Rooms --> | |
| <div class="related-rooms"> | |
| <h3>More Kitchen Inspiration</h3> | |
| <div class="rooms-scroll"> | |
| <div class="room-card"> | |
| <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400" alt="Contemporary Kitchen"> | |
| <div class="room-card-overlay"> | |
| <h4>Contemporary White Kitchen</h4> | |
| </div> | |
| </div> | |
| <div class="room-card"> | |
| <img src="https://images.unsplash.com/photo-1556909172-54557c7e4fb7?w=400" alt="Industrial Kitchen"> | |
| <div class="room-card-overlay"> | |
| <h4>Industrial Loft Kitchen</h4> | |
| </div> | |
| </div> | |
| <div class="room-card"> | |
| <img src="https://images.unsplash.com/photo-1556909114-44e3e70034e2?w=400" alt="Coastal Kitchen"> | |
| <div class="room-card-overlay"> | |
| <h4>Coastal Beach Kitchen</h4> | |
| </div> | |
| </div> | |
| <div class="room-card"> | |
| <img src="https://images.unsplash.com/photo-1556909212-d5b604d0c90d?w=400" alt="Traditional Kitchen"> | |
| <div class="room-card-overlay"> | |
| <h4>Traditional Elegance</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter"> | |
| <h3>Get Weekly Design Inspiration</h3> | |
| <p>Fresh room ideas and trending styles delivered to your inbox</p> | |
| <div class="newsletter-form"> | |
| <input type="email" placeholder="Enter your email"> | |
| <button>Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================================= | |
| 4. FAQ PAGE | |
| ========================================= --> | |
| <div class="section-divider" id="faq"> | |
| <h2>FAQ Page</h2> | |
| <p>Searchable, categorized frequently asked questions with accordion UI</p> | |
| <div class="badges"> | |
| <span class="badge">Metaobject-Driven</span> | |
| <span class="badge">Search Bar</span> | |
| <span class="badge">Category Filters</span> | |
| <span class="badge">Accordion UI</span> | |
| </div> | |
| </div> | |
| <div class="mockup-frame"> | |
| <div class="mockup-container"> | |
| <div class="mockup-label"> | |
| <span class="dot red"></span> | |
| <span class="dot yellow"></span> | |
| <span class="dot green"></span> | |
| <span>lamps.com/pages/faq</span> | |
| </div> | |
| <!-- FAQ Header --> | |
| <div class="faq-header"> | |
| <h1>How Can We Help?</h1> | |
| <div class="faq-search"> | |
| <i class="fas fa-search"></i> | |
| <input type="text" placeholder="Search for answers..."> | |
| </div> | |
| </div> | |
| <!-- Category Filters --> | |
| <div class="faq-filters"> | |
| <button class="filter-pill active">All Topics</button> | |
| <button class="filter-pill">Orders & Shipping</button> | |
| <button class="filter-pill">Returns</button> | |
| <button class="filter-pill">Products</button> | |
| <button class="filter-pill">Payment</button> | |
| <button class="filter-pill">Trade Program</button> | |
| </div> | |
| <!-- FAQ Content --> | |
| <div class="faq-content"> | |
| <!-- Orders Category --> | |
| <div class="faq-category"> | |
| <h3><i class="fas fa-box"></i> Orders & Shipping</h3> | |
| <div class="accordion-item open"> | |
| <div class="accordion-header"> | |
| How long does shipping take? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="accordion-body"> | |
| Standard shipping typically takes 5-7 business days. Expedited shipping (2-3 business days) is available at checkout for an additional fee. Large items like chandeliers and ceiling fans may require freight shipping, which can take 7-14 business days. | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <div class="accordion-header"> | |
| Can I track my order? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="accordion-body"> | |
| Yes! Once your order ships, you'll receive an email with tracking information. You can also track your order by logging into your account and viewing your order history. | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <div class="accordion-header"> | |
| Do you offer free shipping? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="accordion-body"> | |
| We offer free standard shipping on orders over $49 to the continental United States. Some oversized items may have additional shipping fees regardless of order total. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Returns Category --> | |
| <div class="faq-category"> | |
| <h3><i class="fas fa-undo"></i> Returns & Exchanges</h3> | |
| <div class="accordion-item"> | |
| <div class="accordion-header"> | |
| What is your return policy? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="accordion-body"> | |
| We offer a 30-day return policy on most items. Products must be in original packaging and unused condition. Custom orders and final sale items cannot be returned. | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <div class="accordion-header"> | |
| How do I initiate a return? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="accordion-body"> | |
| Visit our Returns Center to start your return. You'll need your order number and email address. Once approved, we'll provide a prepaid shipping label. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Products Category --> | |
| <div class="faq-category"> | |
| <h3><i class="fas fa-lightbulb"></i> Products</h3> | |
| <div class="accordion-item"> | |
| <div class="accordion-header"> | |
| Do your fixtures come with bulbs? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="accordion-body"> | |
| Most fixtures do not include bulbs unless specifically noted in the product description. We recommend purchasing bulbs separately so you can choose the right brightness and color temperature for your space. | |
| </div> | |
| </div> | |
| <div class="accordion-item"> | |
| <div class="accordion-header"> | |
| Are your products dimmable? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="accordion-body"> | |
| Many of our fixtures are dimmable when used with compatible dimmer switches and dimmable bulbs. Check the product specifications for dimmability information. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Still Need Help CTA --> | |
| <div class="faq-cta"> | |
| <h3>Still Have Questions?</h3> | |
| <p>Our lighting experts are here to help 9am-9pm EST</p> | |
| <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;"> | |
| <a href="#" class="btn btn-primary"><i class="fas fa-comments"></i> Live Chat</a> | |
| <a href="#" class="btn btn-secondary"><i class="fas fa-envelope"></i> Email Us</a> | |
| <a href="#" class="btn btn-secondary"><i class="fas fa-phone"></i> 1-800-555-LAMP</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ========================================= | |
| 5. BLOG ARCHIVE | |
| ========================================= --> | |
| <div class="section-divider" id="archive"> | |
| <h2>Blog Archive / Listing</h2> | |
| <p>Filterable grid of all articles with featured content</p> | |
| <div class="badges"> | |
| <span class="badge">Bloggle Listing</span> | |
| <span class="badge">Category Tabs</span> | |
| <span class="badge">Featured Article</span> | |
| <span class="badge">Pagination</span> | |
| </div> | |
| </div> | |
| <div class="mockup-frame"> | |
| <div class="mockup-container"> | |
| <div class="mockup-label"> | |
| <span class="dot red"></span> | |
| <span class="dot yellow"></span> | |
| <span class="dot green"></span> | |
| <span>lamps.com/blogs/guides</span> | |
| </div> | |
| <!-- Archive Header --> | |
| <div class="archive-header"> | |
| <h1>Lighting Guides & Inspiration</h1> | |
| <p>Expert advice to help you light your home beautifully</p> | |
| </div> | |
| <!-- Toolbar --> | |
| <div class="archive-toolbar"> | |
| <div class="archive-tabs"> | |
| <span class="archive-tab active">All</span> | |
| <span class="archive-tab">Buying Guides</span> | |
| <span class="archive-tab">How-To</span> | |
| <span class="archive-tab">Inspiration</span> | |
| <span class="archive-tab">News</span> | |
| </div> | |
| <div class="archive-sort"> | |
| <span>Sort by:</span> | |
| <select> | |
| <option>Most Recent</option> | |
| <option>Most Popular</option> | |
| <option>A-Z</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="archive-content"> | |
| <!-- Featured Article --> | |
| <div class="featured-article"> | |
| <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=800" alt="Featured Article"> | |
| <div class="featured-article-content"> | |
| <span class="card-tag">Featured</span> | |
| <h2>The Complete Guide to Layered Lighting</h2> | |
| <p>Learn how to combine ambient, task, and accent lighting to create the perfect atmosphere in any room. Our comprehensive guide covers everything from basic concepts to advanced techniques.</p> | |
| <div style="display: flex; gap: 16px; color: var(--color-muted); font-size: 14px; margin-bottom: 20px;"> | |
| <span><i class="far fa-clock"></i> 15 min read</span> | |
| <span><i class="far fa-calendar"></i> Jan 5, 2026</span> | |
| </div> | |
| <a href="#" class="btn btn-primary">Read Guide</a> | |
| </div> | |
| </div> | |
| <!-- Article Grid --> | |
| <div class="article-grid"> | |
| <div class="card"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400" alt="Article"> | |
| <div class="card-content"> | |
| <span class="card-tag">Buying Guide</span> | |
| <h4>How to Choose the Right Ceiling Fan Size</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 12 min read</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=400" alt="Article"> | |
| <div class="card-content"> | |
| <span class="card-tag">Inspiration</span> | |
| <h4>Modern Farmhouse Kitchen Lighting Ideas</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 6 min read</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://images.unsplash.com/photo-1558618666-fcd25c85cd64?w=400" alt="Article"> | |
| <div class="card-content"> | |
| <span class="card-tag">How-To</span> | |
| <h4>Installing Pendant Lights: A Step-by-Step Guide</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 8 min read</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://images.unsplash.com/photo-1507473885765-e6ed057f782c?w=400" alt="Article"> | |
| <div class="card-content"> | |
| <span class="card-tag">Buying Guide</span> | |
| <h4>Chandelier Height Guide: Get It Right</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 5 min read</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=400" alt="Article"> | |
| <div class="card-content"> | |
| <span class="card-tag">Inspiration</span> | |
| <h4>2026 Lighting Trends You Need to Know</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 7 min read</div> | |
| </div> | |
| </div> | |
| <div class="card"> | |
| <img src="https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=400" alt="Article"> | |
| <div class="card-content"> | |
| <span class="card-tag">How-To</span> | |
| <h4>How to Clean Crystal Chandeliers Safely</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 4 min read</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pagination --> | |
| <div class="pagination"> | |
| <a href="#" class="active">1</a> | |
| <a href="#">2</a> | |
| <a href="#">3</a> | |
| <a href="#">4</a> | |
| <a href="#"><i class="fas fa-chevron-right"></i></a> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter"> | |
| <h3>Never Miss a Guide</h3> | |
| <p>Get the latest articles and inspiration delivered weekly</p> | |
| <div class="newsletter-form"> | |
| <input type="email" placeholder="Enter your email"> | |
| <button>Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="padding: 60px; text-align: center; color: var(--color-subtext);"> | |
| <p style="margin-bottom: 8px;"><strong>Content Ecosystem Mockups</strong></p> | |
| <p>Created for Lamps.com Marketing Team - January 2026</p> | |
| <p style="margin-top: 16px; font-size: 14px;"> | |
| <a href="resource-hub.html" style="color: var(--color-primary);">Resource Hub Mockups</a> | | |
| <a href="#overview" style="color: var(--color-primary);">Back to Overview</a> | |
| </p> | |
| </div> | |
| </div><!-- end viewport-container --> | |
| <script> | |
| // Simple accordion functionality | |
| document.querySelectorAll('.accordion-header').forEach(header => { | |
| header.addEventListener('click', () => { | |
| const item = header.parentElement; | |
| item.classList.toggle('open'); | |
| }); | |
| }); | |
| // Viewport switching | |
| function setViewport(size) { | |
| const container = document.getElementById('viewportContainer'); | |
| const indicator = document.getElementById('viewportIndicator'); | |
| const buttons = document.querySelectorAll('.viewport-btn'); | |
| // Update buttons | |
| buttons.forEach(btn => btn.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| // Update container | |
| container.classList.remove('mobile-view', 'tablet-view'); | |
| document.body.classList.remove('constrained-view'); | |
| if (size === 'mobile') { | |
| container.classList.add('mobile-view'); | |
| document.body.classList.add('constrained-view'); | |
| indicator.textContent = '375px Mobile'; | |
| } else if (size === 'tablet') { | |
| container.classList.add('tablet-view'); | |
| document.body.classList.add('constrained-view'); | |
| indicator.textContent = '768px Tablet'; | |
| } else { | |
| indicator.textContent = 'Full Width Desktop'; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Content Integration Strategy - Collections & Products</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --color-primary: #286278; | |
| --color-accent: #D14545; | |
| --color-success: #2d8a4e; | |
| --color-warning: #d4a017; | |
| --color-bg: #f8f9fa; | |
| --color-text: #1a1a1a; | |
| --color-subtext: #666666; | |
| --color-border: #e5e5e5; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| line-height: 1.6; | |
| } | |
| .header { | |
| background: linear-gradient(135deg, var(--color-primary) 0%, #1a4a5c 100%); | |
| color: white; | |
| padding: 60px 40px; | |
| text-align: center; | |
| } | |
| .header h1 { font-size: 36px; margin-bottom: 12px; } | |
| .header p { opacity: 0.9; max-width: 600px; margin: 0 auto; } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| .section { | |
| margin-bottom: 60px; | |
| } | |
| .section-header { | |
| margin-bottom: 30px; | |
| } | |
| .section-header h2 { | |
| font-size: 24px; | |
| color: var(--color-primary); | |
| margin-bottom: 8px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .section-header p { | |
| color: var(--color-subtext); | |
| } | |
| /* Flow Diagram */ | |
| .flow-diagram { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| padding: 40px; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .flow-row { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .flow-box { | |
| background: var(--color-bg); | |
| border: 2px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| padding: 20px 30px; | |
| text-align: center; | |
| min-width: 180px; | |
| } | |
| .flow-box.primary { | |
| background: var(--color-primary); | |
| color: white; | |
| border-color: var(--color-primary); | |
| } | |
| .flow-box.accent { | |
| background: #fff0f0; | |
| border-color: var(--color-accent); | |
| } | |
| .flow-box h4 { | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .flow-box p { | |
| font-size: 12px; | |
| opacity: 0.8; | |
| } | |
| .flow-arrow { | |
| color: var(--color-primary); | |
| font-size: 24px; | |
| } | |
| .flow-arrow.down { | |
| transform: rotate(90deg); | |
| } | |
| /* Integration Cards */ | |
| .integration-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 24px; | |
| } | |
| @media (max-width: 800px) { | |
| .integration-grid { grid-template-columns: 1fr; } | |
| } | |
| .integration-card { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .integration-card-header { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 16px 24px; | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .integration-card-header h3 { | |
| font-size: 16px; | |
| } | |
| .integration-card-body { | |
| padding: 24px; | |
| } | |
| .integration-item { | |
| display: flex; | |
| gap: 16px; | |
| padding: 16px 0; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .integration-item:last-child { | |
| border-bottom: none; | |
| } | |
| .integration-icon { | |
| width: 40px; | |
| height: 40px; | |
| background: #e8f4f8; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--color-primary); | |
| flex-shrink: 0; | |
| } | |
| .integration-content h4 { | |
| font-size: 14px; | |
| margin-bottom: 4px; | |
| } | |
| .integration-content p { | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| } | |
| .integration-source { | |
| display: inline-block; | |
| font-size: 10px; | |
| padding: 2px 8px; | |
| border-radius: 10px; | |
| margin-top: 6px; | |
| } | |
| .source-metafield { | |
| background: #e8f4f8; | |
| color: var(--color-primary); | |
| } | |
| .source-tag { | |
| background: #f0e8f8; | |
| color: #6b4c9a; | |
| } | |
| .source-metaobject { | |
| background: #e8f5ec; | |
| color: var(--color-success); | |
| } | |
| /* Taxonomy Table */ | |
| .taxonomy-table { | |
| width: 100%; | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .taxonomy-table th { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 14px 20px; | |
| text-align: left; | |
| font-weight: 500; | |
| } | |
| .taxonomy-table td { | |
| padding: 14px 20px; | |
| border-bottom: 1px solid var(--color-border); | |
| font-size: 14px; | |
| } | |
| .taxonomy-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .tag { | |
| display: inline-block; | |
| background: #e8f4f8; | |
| color: var(--color-primary); | |
| padding: 3px 10px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| margin: 2px; | |
| } | |
| /* Mockup Previews */ | |
| .preview-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| } | |
| @media (max-width: 900px) { | |
| .preview-grid { grid-template-columns: 1fr; } | |
| } | |
| .preview-card { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .preview-card-header { | |
| padding: 16px; | |
| border-bottom: 1px solid var(--color-border); | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| font-weight: 500; | |
| } | |
| .preview-card-header .dot { | |
| width: 10px; | |
| height: 10px; | |
| border-radius: 50%; | |
| background: #ddd; | |
| } | |
| .preview-content { | |
| padding: 20px; | |
| } | |
| .mini-section { | |
| background: var(--color-bg); | |
| border-radius: var(--radius-md); | |
| padding: 16px; | |
| margin-bottom: 12px; | |
| } | |
| .mini-section:last-child { | |
| margin-bottom: 0; | |
| } | |
| .mini-section-label { | |
| font-size: 10px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--color-subtext); | |
| margin-bottom: 8px; | |
| } | |
| .mini-guide-cta { | |
| background: linear-gradient(135deg, var(--color-primary) 0%, #1a4a5c 100%); | |
| color: white; | |
| padding: 16px; | |
| border-radius: var(--radius-md); | |
| text-align: center; | |
| } | |
| .mini-guide-cta h5 { | |
| font-size: 13px; | |
| margin-bottom: 4px; | |
| } | |
| .mini-guide-cta p { | |
| font-size: 11px; | |
| opacity: 0.8; | |
| } | |
| .mini-product-row { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .mini-product { | |
| flex: 1; | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| padding: 8px; | |
| text-align: center; | |
| } | |
| .mini-product-img { | |
| width: 100%; | |
| height: 50px; | |
| background: #eee; | |
| border-radius: 4px; | |
| margin-bottom: 6px; | |
| } | |
| .mini-product p { | |
| font-size: 10px; | |
| color: var(--color-subtext); | |
| } | |
| .mini-faq { | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| padding: 10px 12px; | |
| margin-bottom: 8px; | |
| font-size: 12px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .mini-faq:last-child { | |
| margin-bottom: 0; | |
| } | |
| .mini-faq i { | |
| color: var(--color-subtext); | |
| } | |
| /* Workflow Steps */ | |
| .workflow-steps { | |
| display: flex; | |
| gap: 20px; | |
| } | |
| @media (max-width: 800px) { | |
| .workflow-steps { flex-direction: column; } | |
| } | |
| .workflow-step { | |
| flex: 1; | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| padding: 24px; | |
| box-shadow: var(--shadow-md); | |
| position: relative; | |
| } | |
| .workflow-step::after { | |
| content: '→'; | |
| position: absolute; | |
| right: -20px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| font-size: 24px; | |
| color: var(--color-primary); | |
| } | |
| .workflow-step:last-child::after { | |
| display: none; | |
| } | |
| @media (max-width: 800px) { | |
| .workflow-step::after { | |
| content: '↓'; | |
| right: 50%; | |
| top: auto; | |
| bottom: -30px; | |
| transform: translateX(50%); | |
| } | |
| } | |
| .workflow-step-number { | |
| width: 36px; | |
| height: 36px; | |
| background: var(--color-primary); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| } | |
| .workflow-step h4 { | |
| font-size: 16px; | |
| margin-bottom: 8px; | |
| } | |
| .workflow-step p { | |
| font-size: 14px; | |
| color: var(--color-subtext); | |
| } | |
| /* Priority Badge */ | |
| .priority-table { | |
| width: 100%; | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| box-shadow: var(--shadow-md); | |
| } | |
| .priority-table th, | |
| .priority-table td { | |
| padding: 14px 20px; | |
| text-align: left; | |
| } | |
| .priority-table th { | |
| background: #f8f9fa; | |
| font-weight: 600; | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .priority-table td { | |
| border-bottom: 1px solid var(--color-border); | |
| font-size: 14px; | |
| } | |
| .priority-badge { | |
| display: inline-block; | |
| padding: 4px 12px; | |
| border-radius: 12px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| } | |
| .priority-1 { | |
| background: #e8f5ec; | |
| color: var(--color-success); | |
| } | |
| .priority-2 { | |
| background: #fff8e6; | |
| color: #b8860b; | |
| } | |
| .priority-3 { | |
| background: #f0f0f0; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h1>Content Integration Strategy</h1> | |
| <p>How buying guides, how-tos, inspiration, and FAQs connect to collections and products across the site</p> | |
| </div> | |
| <div class="container"> | |
| <!-- Overview Flow --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2><i class="fas fa-project-diagram"></i> Content Flow Overview</h2> | |
| <p>Bidirectional content-to-commerce connections</p> | |
| </div> | |
| <div class="flow-diagram"> | |
| <div class="flow-row"> | |
| <div class="flow-box primary"> | |
| <h4>Bloggle Content</h4> | |
| <p>Guides, How-Tos, Inspiration</p> | |
| </div> | |
| <span class="flow-arrow">⟷</span> | |
| <div class="flow-box"> | |
| <h4>Collections</h4> | |
| <p>Category Pages</p> | |
| </div> | |
| <span class="flow-arrow">⟷</span> | |
| <div class="flow-box"> | |
| <h4>Products</h4> | |
| <p>Product Pages</p> | |
| </div> | |
| </div> | |
| <div class="flow-row"> | |
| <div class="flow-box accent"> | |
| <h4>FAQ Metaobjects</h4> | |
| <p>Structured Q&A</p> | |
| </div> | |
| <span class="flow-arrow">→</span> | |
| <div class="flow-box"> | |
| <h4>FAQ Page</h4> | |
| <p>Central Hub</p> | |
| </div> | |
| <span class="flow-arrow">→</span> | |
| <div class="flow-box"> | |
| <h4>Collection FAQs</h4> | |
| <p>Contextual Q&A</p> | |
| </div> | |
| <span class="flow-arrow">→</span> | |
| <div class="flow-box"> | |
| <h4>Product FAQs</h4> | |
| <p>Product-Specific</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Integration Points --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2><i class="fas fa-plug"></i> Integration Points</h2> | |
| <p>Where content appears and how it's sourced</p> | |
| </div> | |
| <div class="integration-grid"> | |
| <!-- Collection Page --> | |
| <div class="integration-card"> | |
| <div class="integration-card-header"> | |
| <i class="fas fa-th-large"></i> | |
| <h3>Collection Pages</h3> | |
| </div> | |
| <div class="integration-card-body"> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-book-open"></i></div> | |
| <div class="integration-content"> | |
| <h4>Buying Guide CTA</h4> | |
| <p>Hero banner linking to the primary buying guide for this category</p> | |
| <span class="integration-source source-metafield">Metafield (curated)</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-question-circle"></i></div> | |
| <div class="integration-content"> | |
| <h4>Category FAQs</h4> | |
| <p>3-5 most relevant questions for this product category</p> | |
| <span class="integration-source source-metaobject">Metaobject</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-newspaper"></i></div> | |
| <div class="integration-content"> | |
| <h4>Related Articles</h4> | |
| <p>How-tos, inspiration, and guides matching collection tags</p> | |
| <span class="integration-source source-tag">Tag matching (auto)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Page --> | |
| <div class="integration-card"> | |
| <div class="integration-card-header"> | |
| <i class="fas fa-box"></i> | |
| <h3>Product Pages</h3> | |
| </div> | |
| <div class="integration-card-body"> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-tools"></i></div> | |
| <div class="integration-content"> | |
| <h4>Installation Guide</h4> | |
| <p>How-to guide for installing this product type</p> | |
| <span class="integration-source source-metafield">Metafield</span> | |
| <span class="integration-source source-tag">or Tag fallback</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-ruler"></i></div> | |
| <div class="integration-content"> | |
| <h4>Sizing Guide</h4> | |
| <p>How to choose the right size for your space</p> | |
| <span class="integration-source source-metafield">Metafield</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-lightbulb"></i></div> | |
| <div class="integration-content"> | |
| <h4>Inspiration Gallery</h4> | |
| <p>"See It In a Room" - real installations featuring this product</p> | |
| <span class="integration-source source-tag">Tag matching</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-question-circle"></i></div> | |
| <div class="integration-content"> | |
| <h4>Product FAQs</h4> | |
| <p>Product-specific or product-type default questions</p> | |
| <span class="integration-source source-metaobject">Metaobject</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Buying Guide --> | |
| <div class="integration-card"> | |
| <div class="integration-card-header"> | |
| <i class="fas fa-book-open"></i> | |
| <h3>Buying Guide Articles</h3> | |
| </div> | |
| <div class="integration-card-body"> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-star"></i></div> | |
| <div class="integration-content"> | |
| <h4>Top Picks Section</h4> | |
| <p>Curated product recommendations with "Shop Now" links</p> | |
| <span class="integration-source source-metafield">Bloggle embed</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-table"></i></div> | |
| <div class="integration-content"> | |
| <h4>Comparison Table</h4> | |
| <p>Side-by-side product comparison with purchase links</p> | |
| <span class="integration-source source-metafield">Bloggle embed</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-shopping-bag"></i></div> | |
| <div class="integration-content"> | |
| <h4>Shop Collection CTA</h4> | |
| <p>Link to browse the full collection</p> | |
| <span class="integration-source source-metafield">Manual link</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Inspiration --> | |
| <div class="integration-card"> | |
| <div class="integration-card-header"> | |
| <i class="fas fa-lightbulb"></i> | |
| <h3>Inspiration Galleries</h3> | |
| </div> | |
| <div class="integration-card-body"> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-shopping-bag"></i></div> | |
| <div class="integration-content"> | |
| <h4>Shop This Look</h4> | |
| <p>Product grid with all items shown in the room</p> | |
| <span class="integration-source source-metafield">Bloggle embed</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-bookmark"></i></div> | |
| <div class="integration-content"> | |
| <h4>Related Buying Guide</h4> | |
| <p>Link to detailed guide for the featured product type</p> | |
| <span class="integration-source source-tag">Tag matching</span> | |
| </div> | |
| </div> | |
| <div class="integration-item"> | |
| <div class="integration-icon"><i class="fas fa-images"></i></div> | |
| <div class="integration-content"> | |
| <h4>Related Rooms</h4> | |
| <p>More inspiration in the same style or room type</p> | |
| <span class="integration-source source-tag">Tag matching</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Page Mockup Previews --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2><i class="fas fa-desktop"></i> Content Placement Previews</h2> | |
| <p>How content sections appear on different page types</p> | |
| </div> | |
| <div class="preview-grid"> | |
| <!-- Collection Preview --> | |
| <div class="preview-card"> | |
| <div class="preview-card-header"> | |
| <span class="dot" style="background: #ff5f56;"></span> | |
| <span class="dot" style="background: #ffbd2e;"></span> | |
| <span class="dot" style="background: #27c93f;"></span> | |
| Collection Page | |
| </div> | |
| <div class="preview-content"> | |
| <div class="mini-guide-cta"> | |
| <h5><i class="fas fa-book-open"></i> Buying Guide</h5> | |
| <p>How to Choose the Right Ceiling Fan →</p> | |
| </div> | |
| <div class="mini-section"> | |
| <div class="mini-section-label">Products Grid</div> | |
| <div class="mini-product-row"> | |
| <div class="mini-product"><div class="mini-product-img"></div><p>Product 1</p></div> | |
| <div class="mini-product"><div class="mini-product-img"></div><p>Product 2</p></div> | |
| <div class="mini-product"><div class="mini-product-img"></div><p>Product 3</p></div> | |
| </div> | |
| </div> | |
| <div class="mini-section"> | |
| <div class="mini-section-label">Category FAQs</div> | |
| <div class="mini-faq">What size fan do I need? <i class="fas fa-chevron-down"></i></div> | |
| <div class="mini-faq">Are ceiling fans energy efficient? <i class="fas fa-chevron-down"></i></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Product Preview --> | |
| <div class="preview-card"> | |
| <div class="preview-card-header"> | |
| <span class="dot" style="background: #ff5f56;"></span> | |
| <span class="dot" style="background: #ffbd2e;"></span> | |
| <span class="dot" style="background: #27c93f;"></span> | |
| Product Page | |
| </div> | |
| <div class="preview-content"> | |
| <div class="mini-section"> | |
| <div class="mini-section-label">Product Info</div> | |
| <div style="display: flex; gap: 12px;"> | |
| <div style="width: 60%; background: #ddd; height: 80px; border-radius: 8px;"></div> | |
| <div style="flex: 1;"> | |
| <div style="background: #ddd; height: 14px; width: 80%; border-radius: 4px; margin-bottom: 8px;"></div> | |
| <div style="background: #ddd; height: 10px; width: 60%; border-radius: 4px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mini-section"> | |
| <div class="mini-section-label">Guides Tab</div> | |
| <div style="display: flex; gap: 8px; font-size: 11px;"> | |
| <span style="background: var(--color-primary); color: white; padding: 4px 8px; border-radius: 4px;">Installation</span> | |
| <span style="background: #eee; padding: 4px 8px; border-radius: 4px;">Sizing</span> | |
| <span style="background: #eee; padding: 4px 8px; border-radius: 4px;">Care</span> | |
| </div> | |
| </div> | |
| <div class="mini-section"> | |
| <div class="mini-section-label">See It In a Room</div> | |
| <div class="mini-product-row"> | |
| <div style="flex: 1; background: #ddd; height: 50px; border-radius: 8px;"></div> | |
| <div style="flex: 1; background: #ddd; height: 50px; border-radius: 8px;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Article Preview --> | |
| <div class="preview-card"> | |
| <div class="preview-card-header"> | |
| <span class="dot" style="background: #ff5f56;"></span> | |
| <span class="dot" style="background: #ffbd2e;"></span> | |
| <span class="dot" style="background: #27c93f;"></span> | |
| Buying Guide Article | |
| </div> | |
| <div class="preview-content"> | |
| <div class="mini-section"> | |
| <div class="mini-section-label">Article Content</div> | |
| <div style="background: #ddd; height: 8px; width: 100%; border-radius: 4px; margin-bottom: 6px;"></div> | |
| <div style="background: #ddd; height: 8px; width: 90%; border-radius: 4px; margin-bottom: 6px;"></div> | |
| <div style="background: #ddd; height: 8px; width: 85%; border-radius: 4px;"></div> | |
| </div> | |
| <div class="mini-guide-cta" style="background: var(--color-accent);"> | |
| <h5><i class="fas fa-star"></i> Our Top Pick</h5> | |
| <p>Hunter Dempsey 52" - $249</p> | |
| </div> | |
| <div class="mini-section"> | |
| <div class="mini-section-label">Shop Related Products</div> | |
| <div class="mini-product-row"> | |
| <div class="mini-product"><div class="mini-product-img"></div><p>$179</p></div> | |
| <div class="mini-product"><div class="mini-product-img"></div><p>$249</p></div> | |
| <div class="mini-product"><div class="mini-product-img"></div><p>$329</p></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Tag Taxonomy --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2><i class="fas fa-tags"></i> Content Tag Taxonomy</h2> | |
| <p>Standardized tags for automatic content matching</p> | |
| </div> | |
| <table class="taxonomy-table"> | |
| <thead> | |
| <tr> | |
| <th>Category</th> | |
| <th>Tags</th> | |
| <th>Usage</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><strong>Product Types</strong></td> | |
| <td> | |
| <span class="tag">ceiling-fans</span> | |
| <span class="tag">chandeliers</span> | |
| <span class="tag">pendants</span> | |
| <span class="tag">sconces</span> | |
| <span class="tag">lamps</span> | |
| <span class="tag">outdoor</span> | |
| </td> | |
| <td>Match articles to product category collections</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Rooms</strong></td> | |
| <td> | |
| <span class="tag">kitchen</span> | |
| <span class="tag">bedroom</span> | |
| <span class="tag">bathroom</span> | |
| <span class="tag">living-room</span> | |
| <span class="tag">dining-room</span> | |
| <span class="tag">outdoor</span> | |
| </td> | |
| <td>Match inspiration to room-based collections</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Content Types</strong></td> | |
| <td> | |
| <span class="tag">buying-guide</span> | |
| <span class="tag">how-to</span> | |
| <span class="tag">inspiration</span> | |
| <span class="tag">news</span> | |
| <span class="tag">featured</span> | |
| </td> | |
| <td>Filter articles by type on archive pages</td> | |
| </tr> | |
| <tr> | |
| <td><strong>Styles</strong></td> | |
| <td> | |
| <span class="tag">modern</span> | |
| <span class="tag">farmhouse</span> | |
| <span class="tag">traditional</span> | |
| <span class="tag">industrial</span> | |
| <span class="tag">coastal</span> | |
| </td> | |
| <td>Match inspiration to style-based collections</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Marketing Workflow --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2><i class="fas fa-tasks"></i> Marketing Workflow</h2> | |
| <p>How marketing team creates and connects content</p> | |
| </div> | |
| <div class="workflow-steps"> | |
| <div class="workflow-step"> | |
| <div class="workflow-step-number">1</div> | |
| <h4>Create in Bloggle</h4> | |
| <p>Marketing creates article using Bloggle editor with product embeds</p> | |
| </div> | |
| <div class="workflow-step"> | |
| <div class="workflow-step-number">2</div> | |
| <h4>Apply Tags</h4> | |
| <p>Add relevant tags (e.g., "buying-guide, ceiling-fans, bedroom")</p> | |
| </div> | |
| <div class="workflow-step"> | |
| <div class="workflow-step-number">3</div> | |
| <h4>Auto-Connect</h4> | |
| <p>Article automatically appears on matching collection pages</p> | |
| </div> | |
| <div class="workflow-step"> | |
| <div class="workflow-step-number">4</div> | |
| <h4>Feature (Optional)</h4> | |
| <p>Set collection metafield for priority placement in hero</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Priority System --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2><i class="fas fa-layer-group"></i> Content Priority System</h2> | |
| <p>How content sources are prioritized when displaying</p> | |
| </div> | |
| <table class="priority-table"> | |
| <thead> | |
| <tr> | |
| <th>Priority</th> | |
| <th>Source</th> | |
| <th>Description</th> | |
| <th>Use Case</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td><span class="priority-badge priority-1">1st</span></td> | |
| <td>Metafield (Curated)</td> | |
| <td>Explicitly assigned content via Shopify Admin</td> | |
| <td>Featured buying guide in collection hero, primary installation guide</td> | |
| </tr> | |
| <tr> | |
| <td><span class="priority-badge priority-2">2nd</span></td> | |
| <td>Tag Matching (Auto)</td> | |
| <td>Content with tags matching collection/product type</td> | |
| <td>Related articles, inspiration galleries, supplementary how-tos</td> | |
| </tr> | |
| <tr> | |
| <td><span class="priority-badge priority-3">3rd</span></td> | |
| <td>Product Type Default</td> | |
| <td>Fallback content assigned to product types</td> | |
| <td>Generic installation guide, default FAQs for product category</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- Metafield Schema --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <h2><i class="fas fa-database"></i> Required Metafields</h2> | |
| <p>New metafields needed for content integration</p> | |
| </div> | |
| <div class="integration-grid"> | |
| <div class="integration-card"> | |
| <div class="integration-card-header"> | |
| <i class="fas fa-th-large"></i> | |
| <h3>Collection Metafields</h3> | |
| </div> | |
| <div class="integration-card-body" style="font-family: monospace; font-size: 13px;"> | |
| <div style="margin-bottom: 12px;"> | |
| <strong>custom.buying_guide</strong><br> | |
| <span style="color: var(--color-subtext);">Type: metaobject_reference (article)</span> | |
| </div> | |
| <div style="margin-bottom: 12px;"> | |
| <strong>custom.faqs</strong><br> | |
| <span style="color: var(--color-subtext);">Type: list.metaobject_reference (faq_item)</span> | |
| </div> | |
| <div style="margin-bottom: 12px;"> | |
| <strong>custom.related_guides</strong><br> | |
| <span style="color: var(--color-subtext);">Type: list.metaobject_reference (article)</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="integration-card"> | |
| <div class="integration-card-header"> | |
| <i class="fas fa-box"></i> | |
| <h3>Product Metafields</h3> | |
| </div> | |
| <div class="integration-card-body" style="font-family: monospace; font-size: 13px;"> | |
| <div style="margin-bottom: 12px;"> | |
| <strong>custom.installation_guide</strong><br> | |
| <span style="color: var(--color-subtext);">Type: metaobject_reference (article)</span> | |
| </div> | |
| <div style="margin-bottom: 12px;"> | |
| <strong>custom.sizing_guide</strong><br> | |
| <span style="color: var(--color-subtext);">Type: metaobject_reference (article)</span> | |
| </div> | |
| <div style="margin-bottom: 12px;"> | |
| <strong>custom.product_faqs</strong><br> | |
| <span style="color: var(--color-subtext);">Type: list.metaobject_reference (faq_item)</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="padding: 60px 40px; text-align: center; background: var(--color-primary); color: white;"> | |
| <h3 style="margin-bottom: 8px;">Ready to Implement?</h3> | |
| <p style="opacity: 0.9; margin-bottom: 20px;">This strategy connects content to commerce across the entire site</p> | |
| <p style="font-size: 14px; opacity: 0.7;">Content Integration Strategy • Lamps.com • January 2026</p> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Mockup Preview - Desktop & Mobile</title> | |
| <style> | |
| :root { | |
| --color-primary: #286278; | |
| --color-bg: #1a1a2e; | |
| --color-surface: #16213e; | |
| --color-text: #e8e8e8; | |
| --color-muted: #8b8b8b; | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| min-height: 100vh; | |
| } | |
| .toolbar { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| background: var(--color-surface); | |
| padding: 12px 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 20px; | |
| z-index: 1000; | |
| border-bottom: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .toolbar-title { | |
| font-weight: 600; | |
| font-size: 14px; | |
| } | |
| .toolbar-group { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .toolbar-label { | |
| font-size: 12px; | |
| color: var(--color-muted); | |
| } | |
| .device-btn { | |
| padding: 8px 16px; | |
| background: transparent; | |
| border: 1px solid rgba(255,255,255,0.2); | |
| color: var(--color-text); | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s; | |
| } | |
| .device-btn:hover { | |
| background: rgba(255,255,255,0.1); | |
| } | |
| .device-btn.active { | |
| background: var(--color-primary); | |
| border-color: var(--color-primary); | |
| } | |
| .mockup-select { | |
| padding: 8px 12px; | |
| background: var(--color-bg); | |
| border: 1px solid rgba(255,255,255,0.2); | |
| color: var(--color-text); | |
| border-radius: 6px; | |
| font-size: 13px; | |
| cursor: pointer; | |
| } | |
| .preview-area { | |
| padding-top: 70px; | |
| display: flex; | |
| justify-content: center; | |
| padding-bottom: 40px; | |
| min-height: 100vh; | |
| } | |
| .device-frame { | |
| background: #000; | |
| border-radius: 20px; | |
| padding: 12px; | |
| box-shadow: 0 20px 60px rgba(0,0,0,0.5); | |
| transition: all 0.3s ease; | |
| } | |
| .device-frame.desktop { | |
| width: 1280px; | |
| max-width: calc(100vw - 40px); | |
| } | |
| .device-frame.tablet { | |
| width: 768px; | |
| } | |
| .device-frame.mobile { | |
| width: 375px; | |
| } | |
| .device-screen { | |
| background: white; | |
| border-radius: 12px; | |
| overflow: hidden; | |
| height: calc(100vh - 150px); | |
| } | |
| .device-screen iframe { | |
| width: 100%; | |
| height: 100%; | |
| border: none; | |
| } | |
| .device-notch { | |
| display: none; | |
| width: 120px; | |
| height: 24px; | |
| background: #000; | |
| border-radius: 0 0 12px 12px; | |
| margin: 0 auto -12px; | |
| position: relative; | |
| z-index: 10; | |
| } | |
| .device-frame.mobile .device-notch { | |
| display: block; | |
| } | |
| .device-home { | |
| display: none; | |
| width: 100px; | |
| height: 4px; | |
| background: #333; | |
| border-radius: 2px; | |
| margin: 8px auto 0; | |
| } | |
| .device-frame.mobile .device-home { | |
| display: block; | |
| } | |
| .zoom-info { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| background: var(--color-surface); | |
| padding: 8px 16px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| color: var(--color-muted); | |
| } | |
| .side-by-side { | |
| display: flex; | |
| gap: 40px; | |
| align-items: flex-start; | |
| padding: 0 20px; | |
| } | |
| .side-by-side .device-label { | |
| text-align: center; | |
| font-size: 12px; | |
| color: var(--color-muted); | |
| margin-bottom: 12px; | |
| } | |
| @media (max-width: 1400px) { | |
| .device-frame.desktop { | |
| width: calc(100vw - 40px); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="toolbar"> | |
| <span class="toolbar-title">Mockup Preview</span> | |
| <div class="toolbar-group"> | |
| <span class="toolbar-label">Mockup:</span> | |
| <select class="mockup-select" id="mockupSelect"> | |
| <option value="landing-pages/resource-hub.html">Resource Hub (3 variants)</option> | |
| <option value="landing-pages/content-ecosystem.html">Content Ecosystem (Full)</option> | |
| </select> | |
| </div> | |
| <div class="toolbar-group"> | |
| <span class="toolbar-label">View:</span> | |
| <button class="device-btn active" data-device="desktop" onclick="setDevice('desktop')"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect> | |
| <line x1="8" y1="21" x2="16" y2="21"></line> | |
| <line x1="12" y1="17" x2="12" y2="21"></line> | |
| </svg> | |
| Desktop | |
| </button> | |
| <button class="device-btn" data-device="tablet" onclick="setDevice('tablet')"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="4" y="2" width="16" height="20" rx="2" ry="2"></rect> | |
| <line x1="12" y1="18" x2="12" y2="18"></line> | |
| </svg> | |
| Tablet | |
| </button> | |
| <button class="device-btn" data-device="mobile" onclick="setDevice('mobile')"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect> | |
| <line x1="12" y1="18" x2="12" y2="18"></line> | |
| </svg> | |
| Mobile | |
| </button> | |
| <button class="device-btn" data-device="compare" onclick="setDevice('compare')"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="2" y="4" width="8" height="14" rx="1"></rect> | |
| <rect x="14" y="4" width="8" height="14" rx="1"></rect> | |
| </svg> | |
| Compare | |
| </button> | |
| </div> | |
| </div> | |
| <div class="preview-area" id="previewArea"> | |
| <div class="device-frame desktop" id="deviceFrame"> | |
| <div class="device-notch"></div> | |
| <div class="device-screen"> | |
| <iframe id="previewFrame" src="landing-pages/resource-hub.html"></iframe> | |
| </div> | |
| <div class="device-home"></div> | |
| </div> | |
| </div> | |
| <div class="zoom-info" id="zoomInfo">1280px Desktop</div> | |
| <script> | |
| const deviceFrame = document.getElementById('deviceFrame'); | |
| const previewFrame = document.getElementById('previewFrame'); | |
| const previewArea = document.getElementById('previewArea'); | |
| const zoomInfo = document.getElementById('zoomInfo'); | |
| const mockupSelect = document.getElementById('mockupSelect'); | |
| const deviceSizes = { | |
| desktop: { width: 1280, label: '1280px Desktop' }, | |
| tablet: { width: 768, label: '768px Tablet' }, | |
| mobile: { width: 375, label: '375px Mobile' } | |
| }; | |
| function setDevice(device) { | |
| // Update active button | |
| document.querySelectorAll('.device-btn').forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.device === device); | |
| }); | |
| if (device === 'compare') { | |
| showCompareView(); | |
| return; | |
| } | |
| // Reset to single view | |
| previewArea.innerHTML = ` | |
| <div class="device-frame ${device}" id="deviceFrame"> | |
| <div class="device-notch"></div> | |
| <div class="device-screen"> | |
| <iframe id="previewFrame" src="${mockupSelect.value}"></iframe> | |
| </div> | |
| <div class="device-home"></div> | |
| </div> | |
| `; | |
| zoomInfo.textContent = deviceSizes[device].label; | |
| } | |
| function showCompareView() { | |
| previewArea.innerHTML = ` | |
| <div class="side-by-side"> | |
| <div> | |
| <div class="device-label">Desktop (1280px)</div> | |
| <div class="device-frame desktop" style="width: 800px;"> | |
| <div class="device-screen" style="height: 600px;"> | |
| <iframe src="${mockupSelect.value}"></iframe> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="device-label">Mobile (375px)</div> | |
| <div class="device-frame mobile"> | |
| <div class="device-notch"></div> | |
| <div class="device-screen" style="height: 600px;"> | |
| <iframe src="${mockupSelect.value}"></iframe> | |
| </div> | |
| <div class="device-home"></div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| zoomInfo.textContent = 'Side-by-Side Compare'; | |
| } | |
| mockupSelect.addEventListener('change', () => { | |
| const activeDevice = document.querySelector('.device-btn.active').dataset.device; | |
| setDevice(activeDevice); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Product Page Content Integration - Mockup</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --color-primary: #286278; | |
| --color-accent: #D14545; | |
| --color-success: #2d8a4e; | |
| --color-bg: #f8f9fa; | |
| --color-text: #1a1a1a; | |
| --color-subtext: #666666; | |
| --color-border: #e5e5e5; | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| line-height: 1.6; | |
| } | |
| /* Header */ | |
| .mockup-header { | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); | |
| color: white; | |
| padding: 40px 20px; | |
| text-align: center; | |
| } | |
| .mockup-header h1 { font-size: 28px; margin-bottom: 8px; } | |
| .mockup-header p { opacity: 0.8; font-size: 14px; } | |
| /* Toolbar */ | |
| .toolbar { | |
| position: sticky; | |
| top: 0; | |
| background: white; | |
| padding: 12px 20px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 12px; | |
| border-bottom: 1px solid var(--color-border); | |
| z-index: 100; | |
| } | |
| .device-btn { | |
| padding: 8px 16px; | |
| background: transparent; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| cursor: pointer; | |
| font-size: 13px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| transition: all 0.2s; | |
| } | |
| .device-btn:hover { background: var(--color-bg); } | |
| .device-btn.active { background: var(--color-primary); color: white; border-color: var(--color-primary); } | |
| /* Preview Container */ | |
| .preview-container { | |
| padding: 40px 20px; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .device-frame { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .device-frame.desktop { width: 1200px; max-width: 100%; } | |
| .device-frame.tablet { width: 768px; } | |
| .device-frame.mobile { width: 375px; } | |
| /* Page Content */ | |
| .page-content { padding: 0; } | |
| /* Breadcrumbs */ | |
| .breadcrumbs { | |
| padding: 16px 24px; | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .breadcrumbs a { color: var(--color-primary); text-decoration: none; } | |
| .breadcrumbs span { margin: 0 8px; } | |
| /* Product Section */ | |
| .product-section { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 40px; | |
| padding: 32px 24px; | |
| } | |
| .device-frame.tablet .product-section { grid-template-columns: 1fr; } | |
| .device-frame.mobile .product-section { grid-template-columns: 1fr; padding: 16px; gap: 24px; } | |
| /* Product Gallery */ | |
| .product-gallery { | |
| display: flex; | |
| gap: 12px; | |
| } | |
| .gallery-thumbs { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .thumb { | |
| width: 64px; | |
| height: 64px; | |
| background: #f0f0f0; | |
| border: 2px solid transparent; | |
| border-radius: var(--radius-sm); | |
| cursor: pointer; | |
| } | |
| .thumb.active { border-color: var(--color-primary); } | |
| .gallery-main { | |
| flex: 1; | |
| aspect-ratio: 1; | |
| background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 100%); | |
| border-radius: var(--radius-md); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 48px; | |
| color: #ccc; | |
| } | |
| .device-frame.mobile .product-gallery { flex-direction: column-reverse; } | |
| .device-frame.mobile .gallery-thumbs { flex-direction: row; justify-content: center; } | |
| /* Product Info */ | |
| .product-info { display: flex; flex-direction: column; gap: 20px; } | |
| .product-brand { | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .product-title { font-size: 28px; line-height: 1.3; } | |
| .device-frame.mobile .product-title { font-size: 22px; } | |
| .product-rating { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 14px; | |
| } | |
| .stars { color: #f5a623; } | |
| .product-price { | |
| font-size: 24px; | |
| font-weight: 600; | |
| } | |
| .product-price .compare { | |
| text-decoration: line-through; | |
| color: var(--color-subtext); | |
| font-weight: normal; | |
| font-size: 18px; | |
| margin-right: 12px; | |
| } | |
| .product-price .sale { color: var(--color-accent); } | |
| /* Variant Selector */ | |
| .variant-group { margin-bottom: 16px; } | |
| .variant-label { | |
| font-size: 13px; | |
| font-weight: 500; | |
| margin-bottom: 8px; | |
| } | |
| .variant-options { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .variant-option { | |
| padding: 10px 16px; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all 0.2s; | |
| } | |
| .variant-option:hover { border-color: var(--color-primary); } | |
| .variant-option.active { border-color: var(--color-primary); background: #e8f4f8; } | |
| /* Add to Cart */ | |
| .add-to-cart-btn { | |
| width: 100%; | |
| padding: 16px; | |
| background: var(--color-primary); | |
| color: white; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 16px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| transition: background 0.2s; | |
| } | |
| .add-to-cart-btn:hover { background: #1a4a5c; } | |
| /* Collapsible Tabs */ | |
| .collapsible-tabs { | |
| border-top: 1px solid var(--color-border); | |
| margin-top: 24px; | |
| } | |
| .tab-item { | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .tab-header { | |
| padding: 16px 0; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| font-weight: 500; | |
| } | |
| .tab-header i { | |
| color: var(--color-subtext); | |
| transition: transform 0.2s; | |
| } | |
| .tab-item.open .tab-header i { transform: rotate(180deg); } | |
| .tab-content { | |
| padding: 0 0 16px; | |
| color: var(--color-subtext); | |
| font-size: 14px; | |
| display: none; | |
| line-height: 1.7; | |
| } | |
| .tab-item.open .tab-content { display: block; } | |
| .tab-item.new .tab-header::before { | |
| content: "NEW"; | |
| background: var(--color-accent); | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 3px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| margin-right: 8px; | |
| } | |
| /* Guide Link in Tab */ | |
| .guide-link { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| padding: 16px; | |
| background: #e8f4f8; | |
| border-radius: var(--radius-md); | |
| text-decoration: none; | |
| color: inherit; | |
| margin-top: 12px; | |
| } | |
| .guide-link:hover { background: #d8ecf2; } | |
| .guide-link-icon { | |
| width: 48px; | |
| height: 48px; | |
| background: var(--color-primary); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 18px; | |
| } | |
| .guide-link-content h4 { font-size: 14px; margin-bottom: 2px; } | |
| .guide-link-content p { font-size: 12px; color: var(--color-subtext); } | |
| /* See It In a Room - NEW SECTION */ | |
| .see-in-room { | |
| padding: 48px 24px; | |
| background: var(--color-bg); | |
| } | |
| .section-header { | |
| text-align: center; | |
| margin-bottom: 32px; | |
| } | |
| .section-header h2 { font-size: 24px; margin-bottom: 8px; } | |
| .section-header p { color: var(--color-subtext); } | |
| .room-gallery { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| max-width: 1000px; | |
| margin: 0 auto; | |
| } | |
| .device-frame.tablet .room-gallery { grid-template-columns: repeat(2, 1fr); } | |
| .device-frame.mobile .room-gallery { grid-template-columns: 1fr; } | |
| .room-card { | |
| position: relative; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| aspect-ratio: 4/3; | |
| background: linear-gradient(135deg, #d8ecf2 0%, #c0dce8 100%); | |
| cursor: pointer; | |
| } | |
| .room-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 16px; | |
| background: linear-gradient(transparent, rgba(0,0,0,0.7)); | |
| color: white; | |
| } | |
| .room-title { font-size: 14px; font-weight: 600; } | |
| .room-style { font-size: 12px; opacity: 0.9; } | |
| .room-card:hover .room-overlay { background: linear-gradient(transparent, rgba(0,0,0,0.85)); } | |
| /* Related Guides - NEW SECTION */ | |
| .related-guides { | |
| padding: 48px 24px; | |
| } | |
| .guides-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 24px; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| } | |
| .device-frame.mobile .guides-grid { grid-template-columns: 1fr; } | |
| .guide-card { | |
| display: flex; | |
| gap: 16px; | |
| padding: 20px; | |
| background: white; | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-md); | |
| text-decoration: none; | |
| color: inherit; | |
| transition: box-shadow 0.2s; | |
| } | |
| .guide-card:hover { box-shadow: var(--shadow-md); } | |
| .guide-card-icon { | |
| width: 56px; | |
| height: 56px; | |
| background: #e8f4f8; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: var(--color-primary); | |
| font-size: 22px; | |
| flex-shrink: 0; | |
| } | |
| .guide-card-content { flex: 1; } | |
| .guide-card-tag { font-size: 11px; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } | |
| .guide-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } | |
| .guide-card-meta { font-size: 12px; color: var(--color-subtext); } | |
| /* Related Products */ | |
| .related-products { | |
| padding: 48px 24px; | |
| background: white; | |
| border-top: 1px solid var(--color-border); | |
| } | |
| .products-row { | |
| display: flex; | |
| gap: 20px; | |
| overflow-x: auto; | |
| padding-bottom: 8px; | |
| } | |
| .related-product-card { | |
| flex: 0 0 200px; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .related-product-image { | |
| aspect-ratio: 1; | |
| background: #f0f0f0; | |
| border-radius: var(--radius-md); | |
| margin-bottom: 12px; | |
| } | |
| .related-product-brand { font-size: 11px; color: var(--color-subtext); } | |
| .related-product-name { font-size: 13px; font-weight: 500; margin: 4px 0; } | |
| .related-product-price { font-size: 14px; font-weight: 600; } | |
| /* Section Labels */ | |
| .section-wrapper.new { | |
| position: relative; | |
| } | |
| .section-wrapper.new::before { | |
| content: "NEW SECTION"; | |
| position: absolute; | |
| top: 16px; | |
| right: 16px; | |
| background: var(--color-accent); | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 4px; | |
| font-size: 10px; | |
| font-weight: 600; | |
| z-index: 10; | |
| } | |
| /* Notes Panel */ | |
| .notes-panel { | |
| background: #fff8e6; | |
| border: 1px solid #f0d78c; | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| margin: 40px 20px; | |
| max-width: 1200px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .notes-panel h3 { | |
| font-size: 16px; | |
| margin-bottom: 16px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .notes-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 16px; | |
| } | |
| .note-item { | |
| background: white; | |
| padding: 16px; | |
| border-radius: var(--radius-md); | |
| } | |
| .note-item h4 { font-size: 13px; margin-bottom: 8px; color: var(--color-primary); } | |
| .note-item p { font-size: 12px; color: var(--color-subtext); } | |
| .note-item code { background: #f0f0f0; padding: 2px 6px; border-radius: 3px; font-size: 11px; } | |
| /* FAQ Accordion in Tab */ | |
| .product-faq-list { margin-top: 12px; } | |
| .product-faq-item { | |
| border: 1px solid var(--color-border); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 8px; | |
| } | |
| .product-faq-question { | |
| padding: 12px 16px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| cursor: pointer; | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| .product-faq-question:hover { background: var(--color-bg); } | |
| .product-faq-answer { | |
| padding: 0 16px 12px; | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| display: none; | |
| } | |
| .product-faq-item.open .product-faq-answer { display: block; } | |
| .product-faq-item.open .product-faq-question i { transform: rotate(180deg); } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="mockup-header"> | |
| <h1>Product Page Content Integration</h1> | |
| <p>Mockup showing installation guides, sizing guides, FAQs, and inspiration on product pages</p> | |
| </div> | |
| <div class="toolbar"> | |
| <button class="device-btn active" data-device="desktop" onclick="setDevice('desktop')"> | |
| <i class="fas fa-desktop"></i> Desktop | |
| </button> | |
| <button class="device-btn" data-device="tablet" onclick="setDevice('tablet')"> | |
| <i class="fas fa-tablet-alt"></i> Tablet | |
| </button> | |
| <button class="device-btn" data-device="mobile" onclick="setDevice('mobile')"> | |
| <i class="fas fa-mobile-alt"></i> Mobile | |
| </button> | |
| </div> | |
| <div class="preview-container"> | |
| <div class="device-frame desktop" id="deviceFrame"> | |
| <div class="page-content"> | |
| <!-- Breadcrumbs --> | |
| <div class="breadcrumbs"> | |
| <a href="#">Home</a> <span>/</span> <a href="#">Ceiling Fans</a> <span>/</span> Hunter Dempsey | |
| </div> | |
| <!-- Product Section --> | |
| <div class="product-section" id="productSection"> | |
| <!-- Gallery --> | |
| <div class="product-gallery"> | |
| <div class="gallery-thumbs"> | |
| <div class="thumb active"></div> | |
| <div class="thumb"></div> | |
| <div class="thumb"></div> | |
| <div class="thumb"></div> | |
| </div> | |
| <div class="gallery-main"> | |
| <i class="fas fa-fan"></i> | |
| </div> | |
| </div> | |
| <!-- Info --> | |
| <div class="product-info"> | |
| <div class="product-brand">Hunter</div> | |
| <h1 class="product-title">Dempsey 52" Low Profile Ceiling Fan with LED Light</h1> | |
| <div class="product-rating"> | |
| <div class="stars"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| <span>4.7 (124 reviews)</span> | |
| </div> | |
| <div class="product-price"> | |
| <span class="compare">$329</span> | |
| <span class="sale">$249</span> | |
| </div> | |
| <div class="variant-group"> | |
| <div class="variant-label">Finish: <strong>Matte Nickel</strong></div> | |
| <div class="variant-options"> | |
| <div class="variant-option active">Matte Nickel</div> | |
| <div class="variant-option">Brushed Nickel</div> | |
| <div class="variant-option">Matte Black</div> | |
| <div class="variant-option">Fresh White</div> | |
| </div> | |
| </div> | |
| <button class="add-to-cart-btn"> | |
| <i class="fas fa-shopping-cart"></i> Add to Cart | |
| </button> | |
| <!-- Collapsible Tabs with NEW Guide Tabs --> | |
| <div class="collapsible-tabs"> | |
| <!-- NEW: Installation Guide Tab --> | |
| <div class="tab-item new open"> | |
| <div class="tab-header" onclick="this.parentElement.classList.toggle('open')"> | |
| <span><i class="fas fa-tools"></i> Installation Guide</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="tab-content"> | |
| <p>Learn how to install your ceiling fan safely and correctly with our step-by-step guide.</p> | |
| <a href="#" class="guide-link"> | |
| <div class="guide-link-icon"><i class="fas fa-play-circle"></i></div> | |
| <div class="guide-link-content"> | |
| <h4>How to Install a Ceiling Fan</h4> | |
| <p>Step-by-step guide with video - 45 min estimated time</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- NEW: Sizing Guide Tab --> | |
| <div class="tab-item new"> | |
| <div class="tab-header" onclick="this.parentElement.classList.toggle('open')"> | |
| <span><i class="fas fa-ruler-combined"></i> Sizing Guide</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="tab-content"> | |
| <p>This 52" fan is ideal for rooms 225-400 sq ft. For best performance, install with at least 7 feet of clearance from floor to blades.</p> | |
| <a href="#" class="guide-link"> | |
| <div class="guide-link-icon"><i class="fas fa-ruler"></i></div> | |
| <div class="guide-link-content"> | |
| <h4>Ceiling Fan Size Guide</h4> | |
| <p>Find the perfect fan size for your room</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- NEW: Product FAQs Tab --> | |
| <div class="tab-item new"> | |
| <div class="tab-header" onclick="this.parentElement.classList.toggle('open')"> | |
| <span><i class="fas fa-question-circle"></i> FAQs</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="tab-content"> | |
| <div class="product-faq-list"> | |
| <div class="product-faq-item open"> | |
| <div class="product-faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| Does this fan include a remote control? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="product-faq-answer"> | |
| Yes, this fan includes a handheld remote control for fan speed, light dimming, and reverse function. | |
| </div> | |
| </div> | |
| <div class="product-faq-item"> | |
| <div class="product-faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| What is the ceiling height requirement? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="product-faq-answer"> | |
| This low profile fan is designed for ceilings 8-9 feet. The blades sit approximately 10" from the ceiling. | |
| </div> | |
| </div> | |
| <div class="product-faq-item"> | |
| <div class="product-faq-question" onclick="this.parentElement.classList.toggle('open')"> | |
| Can I use this fan outdoors? | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="product-faq-answer"> | |
| This model is rated for indoor use only. See our outdoor-rated ceiling fans for covered patios and porches. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Existing: Specifications --> | |
| <div class="tab-item"> | |
| <div class="tab-header" onclick="this.parentElement.classList.toggle('open')"> | |
| <span><i class="fas fa-list"></i> Specifications</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="tab-content"> | |
| <p><strong>Blade Span:</strong> 52"<br> | |
| <strong>Height:</strong> 10.16"<br> | |
| <strong>Motor:</strong> WhisperWind DC<br> | |
| <strong>Lumens:</strong> 1,300<br> | |
| <strong>CFM:</strong> 5,513<br> | |
| <strong>Energy Star:</strong> Yes</p> | |
| </div> | |
| </div> | |
| <!-- Existing: Materials & Care --> | |
| <div class="tab-item"> | |
| <div class="tab-header" onclick="this.parentElement.classList.toggle('open')"> | |
| <span><i class="fas fa-spray-can"></i> Materials & Care</span> | |
| <i class="fas fa-chevron-down"></i> | |
| </div> | |
| <div class="tab-content"> | |
| <p>Blades: Reversible medium wood / dark walnut<br> | |
| Housing: Die-cast aluminum<br> | |
| Clean with dry or slightly damp cloth. Avoid harsh chemicals.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NEW: See It In a Room --> | |
| <div class="section-wrapper new"> | |
| <div class="see-in-room"> | |
| <div class="section-header"> | |
| <h2>See It In a Room</h2> | |
| <p>Real installations featuring this fan</p> | |
| </div> | |
| <div class="room-gallery" id="roomGallery"> | |
| <div class="room-card"> | |
| <div class="room-overlay"> | |
| <div class="room-title">Modern Living Room</div> | |
| <div class="room-style">Contemporary Style</div> | |
| </div> | |
| </div> | |
| <div class="room-card"> | |
| <div class="room-overlay"> | |
| <div class="room-title">Master Bedroom Suite</div> | |
| <div class="room-style">Transitional Style</div> | |
| </div> | |
| </div> | |
| <div class="room-card"> | |
| <div class="room-overlay"> | |
| <div class="room-title">Open Concept Kitchen</div> | |
| <div class="room-style">Farmhouse Style</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NEW: Related Guides --> | |
| <div class="section-wrapper new"> | |
| <div class="related-guides"> | |
| <div class="section-header"> | |
| <h2>Helpful Guides</h2> | |
| <p>Learn more about ceiling fans</p> | |
| </div> | |
| <div class="guides-grid" id="guidesGrid"> | |
| <a href="#" class="guide-card"> | |
| <div class="guide-card-icon"><i class="fas fa-book-open"></i></div> | |
| <div class="guide-card-content"> | |
| <div class="guide-card-tag">Buying Guide</div> | |
| <div class="guide-card-title">How to Choose the Right Ceiling Fan</div> | |
| <div class="guide-card-meta"><i class="far fa-clock"></i> 10 min read</div> | |
| </div> | |
| </a> | |
| <a href="#" class="guide-card"> | |
| <div class="guide-card-icon"><i class="fas fa-lightbulb"></i></div> | |
| <div class="guide-card-content"> | |
| <div class="guide-card-tag">Tips</div> | |
| <div class="guide-card-title">Summer vs Winter: Using Your Fan Year-Round</div> | |
| <div class="guide-card-meta"><i class="far fa-clock"></i> 3 min read</div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Related Products (Existing) --> | |
| <div class="related-products"> | |
| <div class="section-header"> | |
| <h2>You May Also Like</h2> | |
| </div> | |
| <div class="products-row"> | |
| <a href="#" class="related-product-card"> | |
| <div class="related-product-image"></div> | |
| <div class="related-product-brand">Hunter</div> | |
| <div class="related-product-name">Aker 36" Small Room Fan</div> | |
| <div class="related-product-price">$179</div> | |
| </a> | |
| <a href="#" class="related-product-card"> | |
| <div class="related-product-image"></div> | |
| <div class="related-product-brand">Minka-Aire</div> | |
| <div class="related-product-name">Wave 52" Ceiling Fan</div> | |
| <div class="related-product-price">$399</div> | |
| </a> | |
| <a href="#" class="related-product-card"> | |
| <div class="related-product-image"></div> | |
| <div class="related-product-brand">Fanimation</div> | |
| <div class="related-product-name">Spitfire 60" Fan</div> | |
| <div class="related-product-price">$449</div> | |
| </a> | |
| <a href="#" class="related-product-card"> | |
| <div class="related-product-image"></div> | |
| <div class="related-product-brand">Monte Carlo</div> | |
| <div class="related-product-name">Maverick 60" Fan</div> | |
| <div class="related-product-price">$529</div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Implementation Notes --> | |
| <div class="notes-panel"> | |
| <h3><i class="fas fa-info-circle"></i> Implementation Notes</h3> | |
| <div class="notes-grid"> | |
| <div class="note-item"> | |
| <h4>Installation Guide Tab</h4> | |
| <p>Extends existing collapsible_tab block type</p> | |
| <p>Source: <code>custom.installation_guide</code> metafield (article ref)</p> | |
| </div> | |
| <div class="note-item"> | |
| <h4>Sizing Guide Tab</h4> | |
| <p>Extends existing collapsible_tab block type</p> | |
| <p>Source: <code>custom.sizing_guide</code> metafield (article ref)</p> | |
| </div> | |
| <div class="note-item"> | |
| <h4>Product FAQs Tab</h4> | |
| <p>Extends existing collapsible_tab block type</p> | |
| <p>Source: <code>custom.product_faqs</code> metafield (metaobject list)</p> | |
| </div> | |
| <div class="note-item"> | |
| <h4>See It In a Room Section</h4> | |
| <p>New section: <code>product-inspiration-gallery.liquid</code></p> | |
| <p>Source: Tag matching from blog (product SKU or type)</p> | |
| </div> | |
| <div class="note-item"> | |
| <h4>Related Guides Section</h4> | |
| <p>New section: <code>product-related-guides.liquid</code></p> | |
| <p>Source: Tag matching or <code>custom.related_guides</code></p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function setDevice(device) { | |
| document.querySelectorAll('.device-btn').forEach(btn => { | |
| btn.classList.toggle('active', btn.dataset.device === device); | |
| }); | |
| const frame = document.getElementById('deviceFrame'); | |
| frame.className = 'device-frame ' + device; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Resource Hub - Landing Page Mockups</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --color-primary: #286278; | |
| --color-primary-light: #3a7a8f; | |
| --color-accent: #D14545; | |
| --color-bg: #f8f9fa; | |
| --color-card: #ffffff; | |
| --color-text: #1a1a1a; | |
| --color-subtext: #666666; | |
| --color-border: #e5e5e5; | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --shadow-sm: 0 1px 3px rgba(0,0,0,0.08); | |
| --shadow-md: 0 4px 12px rgba(0,0,0,0.1); | |
| --shadow-lg: 0 8px 24px rgba(0,0,0,0.12); | |
| } | |
| * { box-sizing: border-box; margin: 0; padding: 0; } | |
| body { | |
| font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; | |
| background: var(--color-bg); | |
| color: var(--color-text); | |
| line-height: 1.6; | |
| } | |
| .page-header { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 40px 20px; | |
| text-align: center; | |
| } | |
| .page-header h1 { font-size: 28px; margin-bottom: 8px; } | |
| .page-header p { opacity: 0.9; font-size: 16px; } | |
| .mockup-section { | |
| max-width: 1400px; | |
| margin: 40px auto; | |
| padding: 0 20px; | |
| } | |
| .mockup-header { | |
| margin-bottom: 20px; | |
| padding-bottom: 12px; | |
| border-bottom: 2px solid var(--color-primary); | |
| } | |
| .mockup-header h2 { | |
| font-size: 20px; | |
| color: var(--color-primary); | |
| margin-bottom: 4px; | |
| } | |
| .mockup-header .meta { | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| } | |
| .mockup-header .meta span { | |
| display: inline-block; | |
| background: #e8f4f8; | |
| padding: 2px 8px; | |
| border-radius: 4px; | |
| margin-right: 8px; | |
| } | |
| .mockup-container { | |
| background: white; | |
| border-radius: var(--radius-lg); | |
| box-shadow: var(--shadow-md); | |
| overflow: hidden; | |
| } | |
| .mockup-label { | |
| background: #f0f0f0; | |
| padding: 8px 16px; | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--color-subtext); | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| /* =========================================== | |
| SHARED COMPONENTS | |
| =========================================== */ | |
| .hero { | |
| position: relative; | |
| background: linear-gradient(135deg, #286278 0%, #1a4a5c 100%); | |
| color: white; | |
| padding: 80px 40px; | |
| text-align: center; | |
| } | |
| .hero-overlay { | |
| background: url('https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=1400') center/cover; | |
| position: relative; | |
| } | |
| .hero-overlay::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| background: rgba(40, 98, 120, 0.85); | |
| } | |
| .hero-overlay > * { | |
| position: relative; | |
| z-index: 1; | |
| } | |
| .hero-subhead { | |
| font-size: 14px; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| opacity: 0.8; | |
| margin-bottom: 12px; | |
| } | |
| .hero h1 { | |
| font-size: 42px; | |
| font-weight: 600; | |
| margin-bottom: 16px; | |
| } | |
| .hero p { | |
| font-size: 18px; | |
| opacity: 0.9; | |
| max-width: 600px; | |
| margin: 0 auto 24px; | |
| } | |
| .hero-search { | |
| display: flex; | |
| max-width: 500px; | |
| margin: 0 auto; | |
| background: white; | |
| border-radius: 50px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| } | |
| .hero-search input { | |
| flex: 1; | |
| border: none; | |
| padding: 16px 24px; | |
| font-size: 16px; | |
| outline: none; | |
| } | |
| .hero-search button { | |
| background: var(--color-accent); | |
| color: white; | |
| border: none; | |
| padding: 16px 28px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| } | |
| .category-card { | |
| background: white; | |
| border-radius: var(--radius-md); | |
| padding: 24px; | |
| text-align: center; | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| cursor: pointer; | |
| border: 1px solid var(--color-border); | |
| } | |
| .category-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .category-card .icon { | |
| width: 60px; | |
| height: 60px; | |
| background: #e8f4f8; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 16px; | |
| font-size: 24px; | |
| color: var(--color-primary); | |
| } | |
| .category-card h3 { | |
| font-size: 18px; | |
| margin-bottom: 8px; | |
| color: var(--color-text); | |
| } | |
| .category-card p { | |
| font-size: 14px; | |
| color: var(--color-subtext); | |
| line-height: 1.5; | |
| } | |
| .article-card { | |
| background: white; | |
| border-radius: var(--radius-md); | |
| overflow: hidden; | |
| border: 1px solid var(--color-border); | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .article-card:hover { | |
| transform: translateY(-4px); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .article-card img { | |
| width: 100%; | |
| height: 180px; | |
| object-fit: cover; | |
| } | |
| .article-card-content { | |
| padding: 20px; | |
| } | |
| .article-card .tag { | |
| display: inline-block; | |
| background: #e8f4f8; | |
| color: var(--color-primary); | |
| font-size: 11px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| padding: 4px 10px; | |
| border-radius: 4px; | |
| margin-bottom: 12px; | |
| } | |
| .article-card h4 { | |
| font-size: 16px; | |
| margin-bottom: 8px; | |
| line-height: 1.4; | |
| } | |
| .article-card .meta { | |
| font-size: 13px; | |
| color: var(--color-subtext); | |
| } | |
| .section-header { | |
| text-align: center; | |
| padding: 40px 20px; | |
| } | |
| .section-header h2 { | |
| font-size: 28px; | |
| margin-bottom: 8px; | |
| } | |
| .section-header p { | |
| color: var(--color-subtext); | |
| max-width: 500px; | |
| margin: 0 auto; | |
| } | |
| .newsletter { | |
| background: var(--color-primary); | |
| color: white; | |
| padding: 60px 40px; | |
| text-align: center; | |
| } | |
| .newsletter h3 { | |
| font-size: 24px; | |
| margin-bottom: 8px; | |
| } | |
| .newsletter p { | |
| opacity: 0.9; | |
| margin-bottom: 24px; | |
| } | |
| .newsletter-form { | |
| display: flex; | |
| max-width: 450px; | |
| margin: 0 auto; | |
| gap: 12px; | |
| } | |
| .newsletter-form input { | |
| flex: 1; | |
| padding: 14px 20px; | |
| border: none; | |
| border-radius: var(--radius-md); | |
| font-size: 15px; | |
| } | |
| .newsletter-form button { | |
| background: var(--color-accent); | |
| color: white; | |
| border: none; | |
| padding: 14px 28px; | |
| border-radius: var(--radius-md); | |
| font-size: 15px; | |
| cursor: pointer; | |
| white-space: nowrap; | |
| } | |
| .quick-links { | |
| background: #f0f0f0; | |
| padding: 20px; | |
| text-align: center; | |
| } | |
| .quick-links span { | |
| color: var(--color-subtext); | |
| margin-right: 16px; | |
| } | |
| .quick-links a { | |
| color: var(--color-primary); | |
| text-decoration: none; | |
| margin: 0 12px; | |
| font-size: 14px; | |
| } | |
| .quick-links a:hover { | |
| text-decoration: underline; | |
| } | |
| /* =========================================== | |
| VARIANT 1: CARD GRID (6 equal cards) | |
| =========================================== */ | |
| .v1-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| padding: 40px; | |
| } | |
| @media (max-width: 900px) { | |
| .v1-grid { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| @media (max-width: 600px) { | |
| .v1-grid { grid-template-columns: 1fr; } | |
| } | |
| /* =========================================== | |
| VARIANT 2: HERO + FEATURED | |
| =========================================== */ | |
| .v2-categories { | |
| display: grid; | |
| grid-template-columns: repeat(6, 1fr); | |
| gap: 16px; | |
| padding: 40px; | |
| background: #f8f9fa; | |
| } | |
| .v2-categories .category-card { | |
| padding: 20px 12px; | |
| } | |
| .v2-categories .category-card .icon { | |
| width: 50px; | |
| height: 50px; | |
| font-size: 20px; | |
| } | |
| .v2-categories .category-card h3 { | |
| font-size: 14px; | |
| } | |
| .v2-categories .category-card p { | |
| display: none; | |
| } | |
| @media (max-width: 900px) { | |
| .v2-categories { grid-template-columns: repeat(3, 1fr); } | |
| } | |
| .v2-featured { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 24px; | |
| padding: 40px; | |
| } | |
| @media (max-width: 800px) { | |
| .v2-featured { grid-template-columns: 1fr; } | |
| } | |
| /* =========================================== | |
| VARIANT 3: MAGAZINE STYLE | |
| =========================================== */ | |
| .v3-layout { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 24px; | |
| padding: 40px; | |
| } | |
| .v3-featured { | |
| grid-row: span 2; | |
| } | |
| .v3-featured .article-card img { | |
| height: 300px; | |
| } | |
| .v3-featured .article-card h4 { | |
| font-size: 22px; | |
| } | |
| .v3-sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 24px; | |
| } | |
| .v3-sidebar .article-card { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .v3-sidebar .article-card img { | |
| width: 120px; | |
| height: 100px; | |
| flex-shrink: 0; | |
| } | |
| .v3-sidebar .article-card-content { | |
| padding: 16px; | |
| } | |
| .v3-sidebar .article-card h4 { | |
| font-size: 15px; | |
| margin-bottom: 4px; | |
| } | |
| .v3-categories { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 16px; | |
| padding: 40px; | |
| background: #f8f9fa; | |
| } | |
| .v3-categories .category-card { | |
| display: flex; | |
| align-items: center; | |
| text-align: left; | |
| gap: 16px; | |
| padding: 20px; | |
| } | |
| .v3-categories .category-card .icon { | |
| margin: 0; | |
| flex-shrink: 0; | |
| } | |
| .v3-categories .category-card h3 { | |
| font-size: 15px; | |
| margin-bottom: 4px; | |
| } | |
| .v3-categories .category-card p { | |
| font-size: 13px; | |
| } | |
| @media (max-width: 900px) { | |
| .v3-layout { grid-template-columns: 1fr; } | |
| .v3-featured { grid-row: auto; } | |
| .v3-categories { grid-template-columns: repeat(2, 1fr); } | |
| } | |
| /* Divider */ | |
| .divider { | |
| height: 60px; | |
| background: linear-gradient(to bottom, #f8f9fa, white); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Page Header --> | |
| <div class="page-header"> | |
| <h1>Resource Hub - Landing Page Mockups</h1> | |
| <p>3 layout variants for the central content hub</p> | |
| </div> | |
| <!-- =========================================== | |
| VARIANT 1: CARD GRID | |
| =========================================== --> | |
| <section class="mockup-section"> | |
| <div class="mockup-header"> | |
| <h2>Variant 1: Card Grid Layout</h2> | |
| <div class="meta"> | |
| <span>6 equal cards</span> | |
| <span>Clean & organized</span> | |
| <span>Best for: Equal priority categories</span> | |
| </div> | |
| </div> | |
| <div class="mockup-container"> | |
| <div class="mockup-label">Desktop View - 1400px</div> | |
| <!-- Hero --> | |
| <div class="hero hero-overlay"> | |
| <div class="hero-subhead">Lighting Resources</div> | |
| <h1>Learn & Explore</h1> | |
| <p>Expert guides, design inspiration, and answers to help you light your space perfectly</p> | |
| <div class="hero-search"> | |
| <input type="text" placeholder="Search guides, tips, and more..."> | |
| <button><i class="fas fa-search"></i> Search</button> | |
| </div> | |
| </div> | |
| <!-- Category Grid --> | |
| <div class="v1-grid"> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-book-open"></i></div> | |
| <h3>Buying Guides</h3> | |
| <p>How to choose the perfect fixture for any room in your home</p> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-lightbulb"></i></div> | |
| <h3>Room Inspiration</h3> | |
| <p>Browse real spaces and trending styles for every aesthetic</p> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-wrench"></i></div> | |
| <h3>How-To Articles</h3> | |
| <p>Installation tips, sizing guides, and expert advice</p> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-question-circle"></i></div> | |
| <h3>FAQ</h3> | |
| <p>Quick answers to common questions about orders and products</p> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-briefcase"></i></div> | |
| <h3>Trade Program</h3> | |
| <p>Exclusive benefits and pricing for design professionals</p> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-comments"></i></div> | |
| <h3>Contact Experts</h3> | |
| <p>Get personalized recommendations from our lighting specialists</p> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div class="quick-links"> | |
| <span>Popular:</span> | |
| <a href="#">Ceiling Fans</a> | |
| <a href="#">Chandeliers</a> | |
| <a href="#">Outdoor Lighting</a> | |
| <a href="#">LED Bulbs</a> | |
| <a href="#">Smart Lighting</a> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter"> | |
| <h3>Get Lighting Tips Delivered</h3> | |
| <p>Plus first access to sales and new arrivals</p> | |
| <div class="newsletter-form"> | |
| <input type="email" placeholder="Enter your email"> | |
| <button>Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="divider"></div> | |
| <!-- =========================================== | |
| VARIANT 2: HERO + FEATURED | |
| =========================================== --> | |
| <section class="mockup-section"> | |
| <div class="mockup-header"> | |
| <h2>Variant 2: Hero + Featured Articles</h2> | |
| <div class="meta"> | |
| <span>Compact categories</span> | |
| <span>Featured content prominent</span> | |
| <span>Best for: Content-forward approach</span> | |
| </div> | |
| </div> | |
| <div class="mockup-container"> | |
| <div class="mockup-label">Desktop View - 1400px</div> | |
| <!-- Hero (smaller) --> | |
| <div class="hero hero-overlay" style="padding: 60px 40px;"> | |
| <div class="hero-subhead">Lighting Resources</div> | |
| <h1>Expert Guides & Inspiration</h1> | |
| <p>Everything you need to light your space beautifully</p> | |
| </div> | |
| <!-- Compact Category Row --> | |
| <div class="v2-categories"> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-book-open"></i></div> | |
| <h3>Buying Guides</h3> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-lightbulb"></i></div> | |
| <h3>Inspiration</h3> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-wrench"></i></div> | |
| <h3>How-To</h3> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-question-circle"></i></div> | |
| <h3>FAQ</h3> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-briefcase"></i></div> | |
| <h3>Trade</h3> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-comments"></i></div> | |
| <h3>Contact</h3> | |
| </div> | |
| </div> | |
| <!-- Featured Articles Section --> | |
| <div class="section-header"> | |
| <h2>Popular Guides</h2> | |
| <p>Our most-read articles to help you make confident choices</p> | |
| </div> | |
| <div class="v2-featured"> | |
| <div class="article-card"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=400" alt="Ceiling Fan"> | |
| <div class="article-card-content"> | |
| <span class="tag">Buying Guide</span> | |
| <h4>How to Choose the Right Ceiling Fan Size</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 8 min read</div> | |
| </div> | |
| </div> | |
| <div class="article-card"> | |
| <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=400" alt="Living Room"> | |
| <div class="article-card-content"> | |
| <span class="tag">Inspiration</span> | |
| <h4>2024 Lighting Trends: What's Hot This Year</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 5 min read</div> | |
| </div> | |
| </div> | |
| <div class="article-card"> | |
| <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=400" alt="Kitchen"> | |
| <div class="article-card-content"> | |
| <span class="tag">How-To</span> | |
| <h4>Kitchen Island Lighting: Spacing & Height Guide</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 6 min read</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Quick Links --> | |
| <div class="quick-links"> | |
| <span>Popular:</span> | |
| <a href="#">Ceiling Fans</a> | |
| <a href="#">Chandeliers</a> | |
| <a href="#">Outdoor Lighting</a> | |
| <a href="#">LED Bulbs</a> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter"> | |
| <h3>Get Lighting Tips Delivered</h3> | |
| <p>Plus first access to sales and new arrivals</p> | |
| <div class="newsletter-form"> | |
| <input type="email" placeholder="Enter your email"> | |
| <button>Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <div class="divider"></div> | |
| <!-- =========================================== | |
| VARIANT 3: MAGAZINE STYLE | |
| =========================================== --> | |
| <section class="mockup-section"> | |
| <div class="mockup-header"> | |
| <h2>Variant 3: Magazine Style</h2> | |
| <div class="meta"> | |
| <span>Editorial layout</span> | |
| <span>Featured + sidebar</span> | |
| <span>Best for: Blog-forward strategy</span> | |
| </div> | |
| </div> | |
| <div class="mockup-container"> | |
| <div class="mockup-label">Desktop View - 1400px</div> | |
| <!-- Hero (minimal) --> | |
| <div class="hero" style="padding: 50px 40px; background: var(--color-primary);"> | |
| <h1 style="font-size: 36px;">Lighting Resources</h1> | |
| <p style="margin-bottom: 0;">Expert guides, design inspiration, and answers</p> | |
| </div> | |
| <!-- Magazine Layout --> | |
| <div class="v3-layout"> | |
| <!-- Featured Large --> | |
| <div class="v3-featured"> | |
| <div class="article-card"> | |
| <img src="https://images.unsplash.com/photo-1513506003901-1e6a229e2d15?w=800" alt="Featured"> | |
| <div class="article-card-content"> | |
| <span class="tag">Featured Guide</span> | |
| <h4>The Complete Guide to Layered Lighting</h4> | |
| <p style="color: var(--color-subtext); font-size: 14px; margin: 12px 0;">Learn how to combine ambient, task, and accent lighting to create the perfect atmosphere in any room.</p> | |
| <div class="meta"><i class="far fa-clock"></i> 12 min read</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Sidebar Articles --> | |
| <div class="v3-sidebar"> | |
| <div class="article-card"> | |
| <img src="https://images.unsplash.com/photo-1524758631624-e2822e304c36?w=200" alt="Article"> | |
| <div class="article-card-content"> | |
| <span class="tag" style="font-size: 10px; padding: 3px 8px;">Buying Guide</span> | |
| <h4>How to Choose a Chandelier</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 6 min</div> | |
| </div> | |
| </div> | |
| <div class="article-card"> | |
| <img src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=200" alt="Article"> | |
| <div class="article-card-content"> | |
| <span class="tag" style="font-size: 10px; padding: 3px 8px;">How-To</span> | |
| <h4>Pendant Spacing Over Islands</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 4 min</div> | |
| </div> | |
| </div> | |
| <div class="article-card"> | |
| <img src="https://images.unsplash.com/photo-1493809842364-78817add7ffb?w=200" alt="Article"> | |
| <div class="article-card-content"> | |
| <span class="tag" style="font-size: 10px; padding: 3px 8px;">Inspiration</span> | |
| <h4>Modern Farmhouse Lighting Ideas</h4> | |
| <div class="meta"><i class="far fa-clock"></i> 5 min</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Category Cards (horizontal) --> | |
| <div class="v3-categories"> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-book-open"></i></div> | |
| <div> | |
| <h3>Buying Guides</h3> | |
| <p>Choose with confidence</p> | |
| </div> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-question-circle"></i></div> | |
| <div> | |
| <h3>FAQ</h3> | |
| <p>Quick answers</p> | |
| </div> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-briefcase"></i></div> | |
| <div> | |
| <h3>Trade Program</h3> | |
| <p>Pro benefits</p> | |
| </div> | |
| </div> | |
| <div class="category-card"> | |
| <div class="icon"><i class="fas fa-comments"></i></div> | |
| <div> | |
| <h3>Contact Experts</h3> | |
| <p>Get help now</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="newsletter"> | |
| <h3>Get Lighting Tips Delivered</h3> | |
| <p>Plus first access to sales and new arrivals</p> | |
| <div class="newsletter-form"> | |
| <input type="email" placeholder="Enter your email"> | |
| <button>Subscribe</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Comparison Summary --> | |
| <section class="mockup-section"> | |
| <div class="mockup-header"> | |
| <h2>Variant Comparison</h2> | |
| </div> | |
| <div class="mockup-container" style="padding: 30px;"> | |
| <table style="width: 100%; border-collapse: collapse; font-size: 14px;"> | |
| <thead> | |
| <tr style="border-bottom: 2px solid var(--color-primary);"> | |
| <th style="text-align: left; padding: 12px;">Aspect</th> | |
| <th style="padding: 12px;">V1: Card Grid</th> | |
| <th style="padding: 12px;">V2: Hero + Featured</th> | |
| <th style="padding: 12px;">V3: Magazine</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr style="border-bottom: 1px solid var(--color-border);"> | |
| <td style="padding: 12px; font-weight: 500;">Primary Focus</td> | |
| <td style="padding: 12px; text-align: center;">Category navigation</td> | |
| <td style="padding: 12px; text-align: center;">Content discovery</td> | |
| <td style="padding: 12px; text-align: center;">Featured content</td> | |
| </tr> | |
| <tr style="border-bottom: 1px solid var(--color-border);"> | |
| <td style="padding: 12px; font-weight: 500;">Best For</td> | |
| <td style="padding: 12px; text-align: center;">Equal priority categories</td> | |
| <td style="padding: 12px; text-align: center;">Content-forward strategy</td> | |
| <td style="padding: 12px; text-align: center;">Blog-heavy strategy</td> | |
| </tr> | |
| <tr style="border-bottom: 1px solid var(--color-border);"> | |
| <td style="padding: 12px; font-weight: 500;">User Path</td> | |
| <td style="padding: 12px; text-align: center;">Category → Content</td> | |
| <td style="padding: 12px; text-align: center;">Article → Explore</td> | |
| <td style="padding: 12px; text-align: center;">Article → Related</td> | |
| </tr> | |
| <tr> | |
| <td style="padding: 12px; font-weight: 500;">Maintenance</td> | |
| <td style="padding: 12px; text-align: center;">Low (static categories)</td> | |
| <td style="padding: 12px; text-align: center;">Medium (featured rotation)</td> | |
| <td style="padding: 12px; text-align: center;">Higher (editorial curation)</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <div style="margin-top: 24px; padding: 16px; background: #e8f4f8; border-radius: var(--radius-md);"> | |
| <strong>Recommendation:</strong> Start with <strong>Variant 2 (Hero + Featured)</strong> - it balances category access with content promotion, and the featured articles can pull automatically from Bloggle's "featured" tag, reducing manual maintenance. | |
| </div> | |
| </div> | |
| </section> | |
| <div style="padding: 40px; text-align: center; color: var(--color-subtext);"> | |
| <p>Mockup created for Lamps.com Resource Hub • January 2026</p> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment