Graphical Hero Banner for Shopify Store

I run an emerging art marketplace on Shopify (using a heavily customised Dawn theme). I need a developer to create a custom hero / welcome banner for my homepage, similar in effect to the hero section seen on Fiverr.com.

This will be a new Shopify section (Online Store 2.0) that I can ideally add, reorder and edit in the theme customiser.

The section must contain:

1. Full-Width Video Background
- HTML5 video, set to autoplay, loop, muted, playsinline, with panning over different art pieces.
- Video must cover the full banner area with object-fit: cover.
- A dark overlay for readability of text + search bar.
- A fallback static image for mobile devices or browsers that block autoplay.
- All settings adjustable inside the Shopify section (video upload or URL, fallback image, overlay opacity etc.).

2. Heading
Displayed over the video: “What sort of art would you like to find?”
This should be editable in the section settings.

3. Search Bar with Typewriter Placeholder Animation
A central search bar that, for now, performs a standard Shopify product search, but is future-proofed for an AI “art consultant” integration. Text input should still submit to /search with q as the query parameter. But also needs a unique hidden parameter, e.g. source=hero_ai_consultant, so that later I can easily detect and intercept these specific searches with custom JavaScript / an external AI service.

Typewriter behaviour (important):
When the input is not focused, it should animate placeholder text by typing and deleting the following phrases in a loop:
“Watercolour paintings of the Peak District”
“Affordable striking blue art for my bedroom”
“Affordable contemporary investment art”

When the user focuses the input:
The animation immediately stops
The placeholder text clears
The field becomes a blank input box ready for typing

When the user blurs the input:
If empty → animation restarts
If user has typed text → animation stays disabled

The animation must be smooth, lightweight, and might be written in vanilla JS (or using a tiny helper library such as Typed.js if preferred).

Technical Requirements
Should be built as a new section file (Liquid) inside /sections/, not a hard-coded template edit.

The hero search form must include a unique hidden parameter (e.g. source=hero_ai_consultant) so that I can later hook it into a custom AI “art consultant” search flow.

Should try to follow Dawn theme conventions, such as:
- Clean semantic HTML
- BEM-style CSS class naming
- Use Dawn’s spacing/typography variables where appropriate
- JavaScript should not conflict with existing global.js
- No jQuery.
- Code must be optimised for performance (defer JS where possible, compress video, no render-blocking assets).

Must be fully responsive and tested on:
- Desktop
- Mobile iOS
- Mobile Android

Deliverables
- A complete new hero section file (Liquid).
- Any additional CSS or JS assets.

Settings schema allowing me to edit:
- Heading text
- Video upload / URL
- Fallback image
- Typewriter phrases (as a list or blocks)

Instructions on:
- How to upload the video
- How to add the section to my homepage
- How to modify text or phrases later
- Up to one round of revisions after initial delivery.

Required Skills
Applicants might show experience in:
- Shopify Liquid (Online Store 2.0 sections)
- JavaScript (ES6)
- HTML5 video embedding
- CSS / responsive layout
- Custom theme development (preferably Dawn-based)
- Animation logic (typewriter or similar UI effects)

Application Instructions (Important)
Please include the following in your proposal:
- At least one example of work you've done which is similar, such as a Shopify hero/banner section you’ve coded.
- Confirmation that you can build this as a modular editable section and code the typewriter placeholder behaviour as described