5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T79b,

Most hero sections just sit there looking nice. This one gives visitors

something to click.

Fe Herospot pairs a tabbed navigation header with a fading image carousel, then

lets you pin product hotspots onto the photos. Someone hovers a hotspot and a

small card opens with the thumbnail, name, price, and a link to the product.

What you get

- A tabbed header that hangs off a scrolling announcement bar, with the hero

image showing through the gap between the tabs

- Dropdown menus on any nav item (just end the label with a plus sign)

- Nav links that roll vertically on hover

- A carousel with arrows, dots, and optional autoplay

- Up to 12 shoppable hotspots, four per slide

- A light and dark toggle, each with its own colors

- Search and cart icons with a counter

How it handles small screens

Breakpoints read the component's own width instead of the browser window, so it

behaves the same whether it runs full bleed or sits inside a narrower container.

On phones the nav folds into a Menu button and the content card slides up over

the image.

What you can change

Slides, nav labels, promo text, logo, hotspot copy, and links are all property

controls. Fonts are split out for headings, body, buttons, nav, and the promo

bar, and dark mode gets its own palette. If your page already has a nav, switch

the header off and keep the carousel on its own.

Worth knowing before you buy

Hotspot positions are fixed and tied to the first three slides, so they work

best with the photos included or with images shot a similar way. Hotspots stay

hidden on phones. Dropdown menu contents are preset.

No external libraries. Built with Framer's own Font, Color, Link, and

ResponsiveImage controls.

5a:[["$","$L5d",null,{"post":{"id":"019fc661-0ed4-702e-bc9b-2128b4e25034","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"sglMqBkNb7A8W3POnfgC","resolved":true,"title":"Fe Herospot","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Most hero sections just sit there looking nice. This one gives visitors"}]},{"type":"paragraph","content":[{"type":"text","text":"something to click."}]},{"type":"paragraph","content":[{"type":"text","text":"Fe Herospot pairs a tabbed navigation header with a fading image carousel, then"}]},{"type":"paragraph","content":[{"type":"text","text":"lets you pin product hotspots onto the photos. Someone hovers a hotspot and a"}]},{"type":"paragraph","content":[{"type":"text","text":"small card opens with the thumbnail, name, price, and a link to the product."}]},{"type":"paragraph","content":[{"type":"text","text":"What you get","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- A tabbed header that hangs off a scrolling announcement bar, with the hero"}]},{"type":"paragraph","content":[{"type":"text","text":" image showing through the gap between the tabs"}]},{"type":"paragraph","content":[{"type":"text","text":"- Dropdown menus on any nav item (just end the label with a plus sign)"}]},{"type":"paragraph","content":[{"type":"text","text":"- Nav links that roll vertically on hover"}]},{"type":"paragraph","content":[{"type":"text","text":"- A carousel with arrows, dots, and optional autoplay"}]},{"type":"paragraph","content":[{"type":"text","text":"- Up to 12 shoppable hotspots, four per slide"}]},{"type":"paragraph","content":[{"type":"text","text":"- A light and dark toggle, each with its own colors"}]},{"type":"paragraph","content":[{"type":"text","text":"- Search and cart icons with a counter"}]},{"type":"paragraph","content":[{"type":"text","text":"How it handles small screens","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Breakpoints read the component's own width instead of the browser window, so it"}]},{"type":"paragraph","content":[{"type":"text","text":"behaves the same whether it runs full bleed or sits inside a narrower container."}]},{"type":"paragraph","content":[{"type":"text","text":"On phones the nav folds into a Menu button and the content card slides up over"}]},{"type":"paragraph","content":[{"type":"text","text":"the image."}]},{"type":"paragraph","content":[{"type":"text","text":"What you can change","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Slides, nav labels, promo text, logo, hotspot copy, and links are all property"}]},{"type":"paragraph","content":[{"type":"text","text":"controls. Fonts are split out for headings, body, buttons, nav, and the promo"}]},{"type":"paragraph","content":[{"type":"text","text":"bar, and dark mode gets its own palette. If your page already has a nav, switch"}]},{"type":"paragraph","content":[{"type":"text","text":"the header off and keep the carousel on its own."}]},{"type":"paragraph","content":[{"type":"text","text":"Worth knowing before you buy","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Hotspot positions are fixed and tied to the first three slides, so they work"}]},{"type":"paragraph","content":[{"type":"text","text":"best with the photos included or with images shot a similar way. Hotspots stay"}]},{"type":"paragraph","content":[{"type":"text","text":"hidden on phones. Dropdown menu contents are preset."}]},{"type":"paragraph","content":[{"type":"text","text":"No external libraries. Built with Framer's own Font, Color, Link, and"}]},{"type":"paragraph","content":[{"type":"text","text":"ResponsiveImage controls."}]}]},"introduction":"A hero section that actually sells","slug":"fe-herospot","author":{"framerUserId":"7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf","name":"FeCommerce","slug":"fecommerce","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1522163/avatar-O3mD0A25QB3hEFuyWMXPGD4iqS1Dlf.jpg","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/7e63332c-77d2-4e00-a6ca-d9c98c3d7dcf/019fc660-e451-77d4-bf7a-e3770d22b3ea.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-03T06:47:56.931Z","updatedAt":"2026-08-03T06:47:56.931Z","publishedAt":"2026-08-03T06:47:56.922Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Fe-Herospot-2nacWf.js@VcWJFCkIEVwFD2SAGvAq","previewUrl":"https://glamorous-states-482352.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"VcWJFCkIEVwFD2SAGvAq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":8,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-03T06:47:57.396Z","updatedAt":"2026-08-03T06:47:57.396Z","reported":false}}],"$L5f"]

Suggested for you