Websites · React
Animal rescue charity
Warm animal rescue site with animals looking for homes, how adoption works, monthly giving and volunteer sign-up.
What you get
A site for an animal shelter or rescue charity: animals ready for adoption, the adoption process, a year in numbers, monthly giving tiers, FAQs and a volunteer and adoption enquiry form. All content lives in src/site.ts.
Files
Exactly what is copied into a new project: 13 files, nothing generated.
Explorer 13
src/site.ts
import type { Site } from "./types"; /** Everything this site shows. Edit freely. */export const site: Site = { "brand": "Northfield Animal Rescue", "nav": [ { "label": "Adopt", "href": "#adopt" }, { "label": "How it works", "href": "#how" }, { "label": "Give", "href": "#give" }, { "label": "FAQ", "href": "#faq" } ], "navCta": { "label": "Donate monthly", "href": "#give" }, "sections": [ { "kind": "hero", "variant": "split", "eyebrow": "Dogs, cats and rabbits · Sheffield", "title": "Thirty-one animals are waiting for a sofa of their own.", "text": "We are a small, volunteer-run rescue. Every animal is vet-checked, neutered and microchipped, and lives in a foster home until it is adopted.", "primary": { "label": "Meet the animals", "href": "#adopt" }, "secondary": { "label": "Give £10 a month", "href": "#give" }, "visual": { "type": "tiles", "tones": [ "#92400e", "#e8dcc4", "#57534e", "#78350f" ], "caption": "Biscuit, adopted in June" } }, { "kind": "stats", "items": [ { "value": "214", "label": "Animals rehomed last year" }, { "value": "58", "label": "Foster homes" }, { "value": "120+", "label": "Volunteers" }, { "value": "86p", "label": "Of each £1 spent on care" } ] }, { "kind": "gallery", "id": "adopt", "eyebrow": "Adopt", "title": "Looking for a home", "text": "A few of the animals in foster care right now. Ask about anyone; they all have notes from their foster family.", "items": [ { "title": "Pepper", "caption": "Lurcher · 4 years · good with cats", "tone": "#78350f" }, { "title": "Mabel & Moss", "caption": "Rabbits · 2 years · bonded pair", "tone": "#57534e" }, { "title": "Juniper", "caption": "Tabby cat · 9 years · loves a lap", "tone": "#92400e" }, { "title": "Otis", "caption": "Staffie · 6 years · needs a quiet home", "tone": "#44403c" }, { "title": "Clementine", "caption": "Ginger cat · 1 year · playful", "tone": "#b45309" }, { "title": "Bramble", "caption": "Terrier cross · 3 years · ok with kids", "tone": "#6b5a48" } ] }, { "kind": "steps", "id": "how", "eyebrow": "How it works", "title": "How adoption works", "items": [ { "title": "Apply", "text": "Fill in a short form about your home and routine. No garden is fine for most cats and many dogs." }, { "title": "Meet", "text": "We arrange a visit at the foster home, then a home check by one of our volunteers." }, { "title": "Settle in", "text": "Take your new friend home with food, a blanket that smells of foster, and our helpline number." } ] }, { "kind": "pricing", "id": "give", "eyebrow": "Give", "title": "Monthly giving keeps the lights on", "text": "Regular gifts let us plan ahead: vet bills, food and fosters' expenses. Cancel any time.", "plans": [ { "name": "Friend", "price": "£5", "period": "/month", "text": "Covers a month of flea and worm treatment for one cat.", "features": [ "Quarterly newsletter", "Adoption updates" ], "cta": { "label": "Give £5", "href": "#contact" } }, { "name": "Foster supporter", "price": "£15", "period": "/month", "text": "Feeds a dog in foster for a month.", "features": [ "Quarterly newsletter", "Adoption updates", "Invite to summer open day" ], "featured": true, "cta": { "label": "Give £15", "href": "#contact" } }, { "name": "Vet fund", "price": "£40", "period": "/month", "text": "Pays for a neuter and microchip every month.", "features": [ "All of the above", "Annual report from our vet", "Your name on the kennel wall" ], "cta": { "label": "Give £40", "href": "#contact" } } ] }, { "kind": "faq", "id": "faq", "eyebrow": "FAQ", "title": "Questions about adopting", "items": [ { "q": "How much is the adoption fee?", "a": "£180 for dogs, £90 for cats and £70 for a pair of rabbits. It covers neutering, vaccinations and the microchip." }, { "q": "Can I adopt if I work full time?", "a": "Often, yes. Older cats and some calmer dogs are happy alone for part of the day. Talk to us about your routine." }, { "q": "Can I foster instead?", "a": "Please do. We cover food and vet costs and match you with an animal that suits your home." } ] }, { "kind": "cta", "title": "Not ready to adopt? Walk a dog on Saturday.", "text": "Volunteer dog walks run every Saturday at 10 am from our base in Hillsborough. No experience needed.", "primary": { "label": "Volunteer with us", "href": "#contact" }, "secondary": { "label": "See the animals", "href": "#adopt" } }, { "kind": "contact", "eyebrow": "Get in touch", "title": "Adopt, foster, volunteer or give", "text": "Tell us what you are interested in and a volunteer coordinator will reply within three days.", "fields": [ "name", "email", "phone", "message" ], "button": "Send" } ], "footer": { "text": "A volunteer-run animal rescue in Sheffield.", "columns": [ { "title": "Rescue", "links": [ "Hillsborough, Sheffield", "0114 496 0328" ] }, { "title": "Help", "links": [ "Adopt", "Foster", "Volunteer", "Donate" ] }, { "title": "Follow", "links": [ "Instagram", "Facebook" ] } ], "legal": "© Northfield Animal Rescue. Sample content: replace it in src/site.ts." }};Remix
Remix this template
Describe what to change and the agent starts from Animal rescue charity's files. The box is already started for you: finish “Start from Animal rescue charity and …”
Dependencies
Documented from the template's package.json. The runtime has a prebuilt dependency set for Vite + React + TypeScript, so installs are fast.
- react^19.1.0
- react-dom^19.1.0
- vite^6.3.0
- @vitejs/plugin-react^4.4.0
- tailwindcss^4.1.0
- @tailwindcss/vite^4.1.0
- typescript^5.8.0
How it runs
- Framework
- Vite + React + TypeScript
- Dev command
- npm run dev
- Build command
- npm run build
- Output directory
- dist
- Port
- 5173
- Entry route
- /
Projects run in an isolated sandbox with a live preview. Read the projects documentation for settings, snapshots and deployment.
Keep browsing
All templates
Architecture studio
Editorial architecture practice site with selected projects, the studio's approach, a short history and the team.
Boutique hotel
Elegant small-hotel website with rooms and rates, the restaurant, guest notes, arrival details and a stay request form.
Static website
Plain HTML, CSS, and JavaScript with no build step. Ideal for simple sites and learning.
Build on Animal rescue charity
Create a free account, start from this template, and ask the AI agent to turn it into your app.