← back to Fentucci
public/index.html
254 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Anti-flash dark/light inline script — must be first -->
<script>(function(){try{var t=localStorage.getItem('fentucci-theme');if(!t){t=window.matchMedia&&window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
<title>Fentucci Natural Wallcoverings — Grasscloth & Natural Fiber | Designer Wallcoverings</title>
<meta name="description" content="Explore Fentucci's collection of natural fiber and grasscloth wallcoverings, available through Designer Wallcoverings. Free memo samples. Trade service. Expert hand-holding from selection to install.">
<meta name="robots" content="index, follow, max-image-preview:large">
<link rel="canonical" href="https://fentucci.com/">
<!-- ── Open Graph ──────────────────────────────────────────────── -->
<meta property="og:type" content="website">
<meta property="og:site_name" content="Fentucci Natural Wallcoverings">
<meta property="og:locale" content="en_US">
<meta property="og:url" content="https://fentucci.com/">
<meta property="og:title" content="Fentucci Natural Wallcoverings — Grasscloth & Natural Fiber">
<meta property="og:description" content="Natural fiber, grasscloth, and woven wallcoverings from Fentucci. Shop with free memo samples and DW trade service.">
<meta property="og:image" content="https://fentucci.com/images/hero/hero-5.v1.jpg">
<meta property="og:image:secure_url" content="https://fentucci.com/images/hero/hero-5.v1.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1344">
<meta property="og:image:height" content="768">
<meta property="og:image:alt" content="Coastal lounge with a Fentucci abaca grasscloth feature wall">
<!-- ── Twitter ─────────────────────────────────────────────────── -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Fentucci Natural Wallcoverings — Grasscloth & Natural Fiber">
<meta name="twitter:description" content="Natural fiber, grasscloth, and woven wallcoverings from Fentucci. Free memo samples & DW trade service.">
<meta name="twitter:image" content="https://fentucci.com/images/hero/hero-5.v1.jpg">
<meta name="twitter:image:alt" content="Coastal lounge with a Fentucci abaca grasscloth feature wall">
<meta name="theme-color" content="#faf7f2" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#141210" media="(prefers-color-scheme: dark)">
<!-- ── Icons ───────────────────────────────────────────────────── -->
<link rel="icon" href="/images/favicon.ico" sizes="any">
<link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16.png">
<link rel="apple-touch-icon" href="/images/apple-touch-icon.png">
<!-- ── Resource hints ──────────────────────────────────────────── -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="dns-prefetch" href="https://cdn.shopify.com">
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/site.css?v=3">
<!-- ── Structured data ─────────────────────────────────────────── -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@graph": [
{
"@type": "Organization",
"@id": "https://fentucci.com/#organization",
"name": "Fentucci Natural Wallcoverings",
"url": "https://fentucci.com/",
"logo": "https://fentucci.com/images/apple-touch-icon.png",
"image": "https://fentucci.com/images/hero/hero-5.v1.jpg",
"description": "Natural fiber and grasscloth wallcoverings, available through Designer Wallcoverings.",
"parentOrganization": {
"@type": "Organization",
"name": "Designer Wallcoverings",
"url": "https://designerwallcoverings.com/"
}
},
{
"@type": "WebSite",
"@id": "https://fentucci.com/#website",
"url": "https://fentucci.com/",
"name": "Fentucci Natural Wallcoverings",
"publisher": { "@id": "https://fentucci.com/#organization" },
"potentialAction": {
"@type": "SearchAction",
"target": {
"@type": "EntryPoint",
"urlTemplate": "https://fentucci.com/?q={search_term_string}"
},
"query-input": "required name=search_term_string"
}
},
{
"@type": "BreadcrumbList",
"@id": "https://fentucci.com/#breadcrumb",
"itemListElement": [
{ "@type": "ListItem", "position": 1, "name": "Designer Wallcoverings", "item": "https://designerwallcoverings.com/" },
{ "@type": "ListItem", "position": 2, "name": "Fentucci Natural Wallcoverings", "item": "https://fentucci.com/" }
]
}
]
}
</script>
<!-- ItemList of the catalog is injected at runtime from /api/products into #ld-itemlist -->
<script type="application/ld+json" id="ld-itemlist">{"@context":"https://schema.org","@type":"ItemList","name":"Fentucci Natural Wallcoverings Catalog","url":"https://fentucci.com/","numberOfItems":0,"itemListElement":[]}</script>
<!-- GA4 placeholder — inject measurement ID when provisioned -->
<!-- <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> -->
</head>
<body>
<!-- ── Header ──────────────────────────────────────────────────────────────── -->
<header class="site-header">
<a href="/" class="brand">
<span class="brand-name">Fentucci</span>
<span class="brand-sub">Natural Wallcoverings</span>
</a>
<nav class="site-nav">
<a href="/#catalog">Shop</a>
<a href="https://designerwallcoverings.com" target="_blank" rel="noopener noreferrer">Designer Wallcoverings</a>
<button type="button" id="theme-toggle" class="theme-toggle" aria-label="Toggle dark mode" title="Toggle dark / light">
<svg class="icon-sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
<svg class="icon-moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79z"/></svg>
</button>
</nav>
</header>
<!-- ── Hero ───────────────────────────────────────────────────────────────── -->
<section class="hero" id="hero" aria-label="Fentucci wallcoverings hero">
<div class="hero-bg" id="hero-bg"></div>
<div class="hero-content">
<p class="hero-eyebrow">Designer Wallcoverings presents</p>
<h1 class="hero-title">Fentucci</h1>
<p class="hero-tagline"><em>Natural fiber. Woven texture. Enduring warmth.</em></p>
<div class="hero-ctas">
<a href="/#catalog" class="btn btn-primary">Explore the Collection</a>
<a href="https://designerwallcoverings.com/products/search?q=fentucci" target="_blank" rel="noopener noreferrer" class="btn btn-ghost">Shop on DW</a>
</div>
<p class="hero-service">Free memo samples • Trade pricing • Expert guidance</p>
</div>
</section>
<!-- ── Brand Statement ────────────────────────────────────────────────────── -->
<section class="brand-statement">
<div class="container">
<h2>Where Nature Meets the Wall</h2>
<p>Fentucci's collection celebrates the quiet luxury of natural materials — grasscloth, jute, sisal, seagrass, and woven fibers that bring authentic texture and warmth to any space. Each pattern is available through Designer Wallcoverings with free memo samples and hands-on trade service.</p>
</div>
</section>
<!-- ── Catalog ────────────────────────────────────────────────────────────── -->
<main id="catalog" class="catalog-section">
<div class="container">
<!-- Controls bar -->
<div class="controls-bar" role="search">
<div class="search-wrap">
<input type="search" id="search-input" class="search-input" placeholder="Search by name, colorway, SKU…" aria-label="Search products">
</div>
<div class="sort-density-wrap">
<label class="ctrl-label" for="sort-select">Sort</label>
<select id="sort-select" class="ctrl-select" aria-label="Sort products">
<option value="newest">Newest</option>
<option value="color">By Color</option>
<option value="style">By Style</option>
<option value="title">A → Z</option>
<option value="title_desc">Z → A</option>
<option value="price_asc">Price ↑</option>
<option value="price_desc">Price ↓</option>
<option value="sku">SKU A → Z</option>
</select>
<label class="ctrl-label" for="density-slider">Density</label>
<input type="range" id="density-slider" class="density-slider" min="2" max="6" value="4" step="1" aria-label="Grid column count">
</div>
</div>
<!-- Results meta -->
<div class="results-meta" aria-live="polite">
<span id="results-count"></span>
<span id="page-info"></span>
</div>
<!-- Product grid -->
<div class="product-grid" id="product-grid" role="list">
<div class="grid-loading" id="grid-loading" aria-label="Loading products">
<div class="spinner"></div>
<p>Loading collection…</p>
</div>
</div>
<!-- Pagination -->
<nav class="pagination" id="pagination" aria-label="Product pages"></nav>
</div>
</main>
<!-- ── Footer ─────────────────────────────────────────────────────────────── -->
<footer class="site-footer">
<div class="container footer-inner">
<div class="footer-brand">
<span class="footer-name">Fentucci</span>
<span class="footer-tagline">Natural Wallcoverings</span>
</div>
<div class="footer-links">
<a href="https://designerwallcoverings.com" target="_blank" rel="noopener noreferrer">Designer Wallcoverings</a>
<a href="https://designerwallcoverings.com/pages/contact" target="_blank" rel="noopener noreferrer">Contact & Trade</a>
<a href="https://designerwallcoverings.com/pages/trade-program" target="_blank" rel="noopener noreferrer">Trade Program</a>
</div>
<p class="footer-copy">© <span id="year"></span> Designer Wallcoverings. All rights reserved.</p>
</div>
</footer>
<!-- ── Sample request modal ───────────────────────────────────────────────── -->
<div id="sample-modal" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modal-title" hidden>
<div class="modal-box">
<button class="modal-close" id="modal-close" aria-label="Close sample request form">×</button>
<h2 id="modal-title">Order a Free Memo Sample</h2>
<p class="modal-intro">Fill out the form and we'll send a complimentary memo sample directly to you. No charge, no commitment.</p>
<input type="hidden" id="modal-product-title">
<form id="sample-form" novalidate>
<div class="form-row">
<label for="f-name">Full Name <span aria-hidden="true">*</span></label>
<input type="text" id="f-name" name="name" required autocomplete="name" placeholder="Jane Smith">
</div>
<div class="form-row">
<label for="f-email">Email <span aria-hidden="true">*</span></label>
<input type="email" id="f-email" name="email" required autocomplete="email" placeholder="jane@firm.com">
</div>
<div class="form-row">
<label for="f-company">Company / Firm</label>
<input type="text" id="f-company" name="company" autocomplete="organization" placeholder="Optional">
</div>
<div class="form-row">
<label for="f-address">Shipping Address</label>
<input type="text" id="f-address" name="address" autocomplete="street-address" placeholder="123 Main St">
</div>
<div class="form-row form-row-inline">
<div>
<label for="f-city">City</label>
<input type="text" id="f-city" name="city" autocomplete="address-level2" placeholder="Los Angeles">
</div>
<div>
<label for="f-state">State</label>
<input type="text" id="f-state" name="state" maxlength="2" autocomplete="address-level1" placeholder="CA">
</div>
<div>
<label for="f-zip">ZIP</label>
<input type="text" id="f-zip" name="zip" maxlength="10" autocomplete="postal-code" placeholder="90210">
</div>
</div>
<div class="form-row">
<label for="f-message">Project Details</label>
<textarea id="f-message" name="message" rows="3" placeholder="Room type, yardage estimate, timeline…"></textarea>
</div>
<button type="submit" class="btn btn-primary form-submit" id="form-submit">Send Sample Request</button>
<p class="form-status" id="form-status" aria-live="polite"></p>
</form>
</div>
</div>
<script src="/js/app.js?v=2"></script>
</body>
</html>