Black Friday Hero - Noir Gold Countdown Template

A Black Friday hero that whispers the sale and lets the clock do the talking. "The Black Friday Edit" sits in two lines of DM Serif Display on a near-black field, a thin gold rule draws in beneath it, and "Up to 30% off, for a few days only." follows in muted gray. On the right, a boxed countdown reads like a watch dial: four light Inter Tight numerals split by champagne gold hairlines, with "DAYS / HOURS / MINUTES / SECONDS" in small spaced caps and "ENDS IN" above. Built for the fictional fragrance and leather goods house Maison Ardent, this 2:1 homepage hero is for premium brands that want a Black Friday without the shouting.

#What Makes This Template Stand Out

The countdown is the hero, and it travels. On the first pane it sits center-right at full size. On the product panes it shrinks into a compact band in the top-right corner, still ticking, while the products take the frame. On the last pane it returns to exactly the same spot as pane one, so the loop seam is a hold rather than a jump. One clock, four live texts, and the morph between positions is the signature motion of the template.

The product panes are lit like a fragrance campaign. Pane two puts a faceted perfume bottle with a brushed gold cap in a soft gold glow, with "EAU DE PARFUM", "Ardent No. 7", a struck "$180", and a large "$126". Pane three pairs a black leather weekender and a monogrammed card holder with two stacked price lines - "CARD HOLDER" at "$95" to "$66" and "WEEKENDER" at "$540" to "$378" - separated by a gold hairline. Pane four closes on "Last call, quietly." and "Up to 30% off fragrance and leather." beside the full-size clock.

The palette and motion are deliberately restrained. Near-black, warm ivory ink, one champagne gold for rules, labels, strikes, and the "Shop the Edit" pill, and a muted gray for old prices. Everything fades or resolves out of a blur, the cutouts drift slowly, the gold strike lines draw across the old prices before the new prices number-roll in, and autoplay holds each pane for 4.5 seconds with a slow 900ms transition. The copy never names a date or a duration, because the live countdown is the only time statement on the page.

• 2:1 hero format (1920x960) built to sit under a real store navigation bar
• Live boxed countdown - four ticking texts split by gold hairlines, in every export
• Ended state built in: the clock swaps to "The Edit is live." when time runs out
• Traveling clock that shrinks to a corner band on product panes and returns for the seam
• Gold strike lines that draw across old prices before the new prices number-roll
• Three product cutouts with soft gold glows - parfum, weekender, and card holder

#Who Should Use This Template

• Fragrance, beauty, and leather goods brands that join Black Friday but refuse to look like a discount warehouse.
• Premium fashion and jewelry stores that want a homepage hero with real urgency from a working clock, not from red banners.
• Shopify, Webflow, and Framer store owners who need a sale hero they can embed or export as code in an afternoon.
• Agencies running Black Friday for luxury clients, where the brief is "make it feel expensive" and the deadline is next week.

#Best Use Cases

#Black Friday Homepage Hero

Swap your usual hero for the sale week. The clock gives every visitor a reason to act now, the two product panes show real prices, and when the sale ends the clock gracefully turns into "The Edit is live." instead of a row of zeros.

#Sale Landing Page Header

Place the hero above your sale collection grid. Give the "Shop the Edit" pill a URL click action that links straight to the products, and the countdown keeps the deadline visible while visitors browse.

#Early Access and VIP Windows

Point "Ends at" at the start of your public sale instead of the end, change "ENDS IN" to "OPENS IN", and the same hero works as a members-only teaser on a password-protected page.

#How to Customize This Template

1. Open PaneFlow and select "Black Friday Hero - Noir Gold Countdown" from the template gallery
2. Select the "DAYS" digit, open the "Countdown" group in the sidebar, and set "Ends at" to your sale end - then set the same date on the hours, minutes, and seconds digits
3. Toggle "Preview" in the Countdown group to check the ended state, and rewrite "The Edit is live." if you prefer another line
4. Replace "MAISON ARDENT" with your wordmark and rewrite "The Black Friday Edit" and its subline - keep dates and durations out of the copy, the clock already says it
5. Swap the parfum, weekender, and card holder cutouts for your own products with transparent backgrounds
6. Update "Ardent No. 7", "$180", "$126", and the two price lines on the leather pane; widen a strike line if your old price is longer
7. Add a URL click action to the "Shop the Edit" pill pointing at your sale collection
8. Export to HTML, React, Vue, Svelte, or Next.js, or publish and embed it on your homepage

#Related Templates

• Black Friday Early Access - Members Only - the same hushed luxury mood as a 4:5 VIP teaser post
• Black Friday Doorbusters - Deal Grid - the loud retail opposite, with a live timer on every deal card
• Luxury Product Hero - Dark Spotlight - a dark, single-product hero for the rest of the year
• Event Hero - Countdown - number-roll digits as the headline for a launch or event date

#Related Resources

• PaneFlow for Ecommerce - sale heroes, product sections, and campaign creative for online stores
• PaneFlow for Landing Pages - animated hero sections exported to code
• Text and Countdown Docs - countdown tokens, Largest Unit, When Ended, and the Show setting