import React, { useMemo, useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { ArrowRight, Building2, Check, Flame, GraduationCap, Home, Lightbulb, MapPin, Moon, Repeat2, ShieldCheck, Sparkles, Users, X } from "lucide-react"; import { Button } from "@/components/ui/button"; import { Card, CardContent } from "@/components/ui/card"; const participantTypes = [ { id: "individual", label: "Individual", icon: Home }, { id: "school", label: "School", icon: GraduationCap }, { id: "business", label: "Business", icon: Building2 }, ]; const landmarks = [ { name: "Sydney Opera House", location: "Sydney, NSW", image: "https://images.unsplash.com/photo-1523482580672-f109ba8cb9be?auto=format&fit=crop&w=1200&q=80" }, { name: "Story Bridge", location: "Brisbane, QLD", image: "https://images.unsplash.com/photo-1452857297128-d9c29adba80b?auto=format&fit=crop&w=1200&q=80" }, { name: "Melbourne skyline", location: "Melbourne, VIC", image: "https://images.unsplash.com/photo-1514395462725-fb4566210144?auto=format&fit=crop&w=1200&q=80" }, { name: "Parliament House", location: "Canberra, ACT", image: "https://images.unsplash.com/photo-1562698013-ac13558052cd?auto=format&fit=crop&w=1200&q=80" }, ]; const lights = [[50,18],[62,26],[70,38],[76,50],[66,60],[56,72],[46,64],[35,57],[28,43],[40,35],[18,40],[82,68],[58,46],[47,50]]; const habits = [   { title: "Switch off", copy: "Start with the hour that began a global movement.", icon: Lightbulb },   { title: "Start a habit", copy: "Turn one meaningful hour into something you do again and again.", icon: Repeat2 },   { title: "Make it bigger", copy: "Give, invite others, or bring your school or workplace with you.", icon: Users }, ]; export default function EarthHourSwitchOff() { const [participant, setParticipant] = useState("individual"); const [step, setStep] = useState(1); const [donation, setDonation] = useState(60); const [customDonation, setCustomDonation] = useState(""); const [candleQty, setCandleQty] = useState(1); const [showCandle, setShowCandle] = useState(false); const [submitted, setSubmitted] = useState(false); const [postcode, setPostcode] = useState(""); const candleTotal = useMemo(() => candleQty * 25, [candleQty]); const scrollToRegister = () => document.getElementById("register")?.scrollIntoView({ behavior: "smooth" }); return (
WWF

Earth Hour

20 years of action

         
The beginningAustraliaCandlesLandmarks
         
         
Earth Hour 2027 · 20th anniversary               Earth Hour
is just the beginning.

An hour can change everything. Start by switching off. Then turn that hour into a new habit, a gift, a conversation or an action for the planet you love.

For 20 years, people have gone dark together. This year, let’s use that powerful hour to begin something brighter.

             
Free to pledge No account needed Giving is optional
{!submitted ? <>

Your first hour

Make your pledge

{step}/2
                {step===1 ?

I’m taking part as

{participantTypes.map(({id,label,icon:Icon})=>)}
{participant!=="individual"&&}

Only your postcode area appears on the public map.

                :

Your pledge is free.

Want to turn your hour into even more action? Make an optional donation to WWF-Australia.

{[30,60,100].map(v=>)}

Go dark for a brighter future.

Your hour starts the action. A gift helps WWF-Australia keep that action moving.

}                 :

This is your beginning.

Your hour has been counted and your postcode will join the movement across Australia.

}

18,642

hours pledged to Earth

2,384

postcodes taking action

146

landmarks going dark

One hour. Then another.

What if Earth Hour changed more than an hour?

Your life can change through the habits you repeat. The same is true for our planet. Earth Hour can be the moment we switch off, reconnect, and choose what we’ll do differently next.

Start with one hour of action. Build from there.

{habits.map(({title,copy,icon:Icon},i)=>
0{i+1}

{title}

{copy}

)}

Collective action, made visible

See Australia light up by switching off.

Every registration dedicates one hour to Earth. Add your postcode and a light appears on the map, showing how thousands of individual actions become one national movement.

{lights.map(([x,y],i)=>
)}

Latest pledge

{postcode||"7000"} joined the hour

       

Turn the hour into something visible

Light up the movement.

A virtual candle is more than a donation. It becomes a visible part of Earth Hour. Light one for yourself, or give your organisation its own piece of the night.

               
         
For individuals

Light your candle

Make a $25 gift and add your name and message to Australia’s virtual Earth Hour candle wall.

$25one virtual candle
                   
For business

Own a constellation.

Instead of buying a corporate “box”, your organisation creates a branded constellation of lights within the Earth Hour candle wall. Every employee, customer or partner you invite can add another light.

20

starter lights

1

branded constellation

∞

more people can join

       
       

The business mechanic

Your people build it with you.

A business starts the constellation with a corporate gift. It then receives a unique link to share internally and externally. Each person who joins adds a light carrying their first name or an optional message.

The goal: fill your constellation before Earth Hour.

1

Business starts it

Choose a starter bundle and add your organisation name and logo.

2

Invite your people

Share a unique URL with staff, customers and partners so they can claim or add lights.

3

Watch it grow

The constellation fills in real time and sits on the public Earth Hour wall.

       

Small team

Spark · $500

20 lights + branded constellation + share link.

Most visible

Glow · $1,250

50 lights + larger constellation + featured business placement.

Organisation-wide

Beacon · $2,500

100 lights + hero constellation + Earth Hour digital recognition asset.

Prototype pricing and inclusions shown for concept testing. Final tiers should reflect Funraisin build feasibility, gift strategy and corporate stewardship requirements.

     

Go dark together

Australia’s icons are in.

Landmarks across the country are switching off. Their darkness is a visible reminder of what collective action can look like.

{landmarks.map(l=>

{l.name}

{l.location}

Going dark
)}
       

20 years was only the start.

Make this hour the beginning of something bigger.

{showCandle&&
setShowCandle(false)}>e.stopPropagation()} className="w-full max-w-lg border-t-8 border-[#ffef3c] bg-white p-7 text-black sm:border-2 sm:border-t-8 sm:border-black sm:border-t-[#ffef3c]">

Take the next action

Light a candle

Candle for Earth

$25 each

{candleQty}