Charity Campaign

Petal is a one-page campaign site for nonprofits, health campaigns and awareness months. It opens with a blooming flower preloader. A dashed trail then draws itself down the page as visitors scroll, linking every section into one journey: learn the signs, check yourself, find a screening, join the walk, hear real stories, donate.

Every section is interactive:

- Autoplaying "five signs" explainer with a rotating flower dial

- Animated self-check timeline with a monthly reminder signup

- Clinic finder with postcode search, map pins, zoom and an animated route

- Event section with a 5k/10k route toggle, live route map and fundraising bar

- Flower-shaped portrait and a quote that lights up as you scroll

- Donation widget with one-off or monthly giving and an impact line per amount

- FAQ accordion that keeps one answer open at a time

Phones get their own layout: swipeable card decks, full-width buttons, a full-screen menu with a circular reveal and a sticky "Set a reminder / Donate" bar.

Easy to customise: colours, type and buttons all come from the styles and components on the included Style Guide page. Interactive sections are code components with copy and colours editable in the properties panel, and their colours follow your colour styles. Outlined words and serif accents in headings are text styles too, so each heading stays one editable text layer.

Features:

- Blooming preloader, scroll-drawn story trail, count-ups, falling petals and hide-on-scroll nav

- One Motion setting (Full, Subtle or Off) that respects reduced-motion preferences

- Separate Desktop, Laptop, Tablet and Phone layouts

- Style Guide page with 25 colour styles, 32 text styles and every component

- Named layers and anchor links for every section

- Fonts: Bricolage Grotesque and Instrument Serif

Petal is a fictional charity. All copy, statistics, clinic details and phone numbers are placeholders.