A premium marketing website for SonaliJute Australia — the Australian arm supplying certified compostable jute biomaterials, grown from Bangladesh’s Golden Fibre, to Australian brands and manufacturers.
Localised fork of the original SonaliJute (Bangladesh) site. Copy is written in Australian English; the market framing, standards references (AS 4736 / AS 5810), statistics, and contact details are Australian.
This site must not state as fact anything we cannot evidence. The ACCC treats
unsubstantiated environmental claims — including decorative ones — as a breach of
the Australian Consumer Law. Where something is an ambition rather than an
achievement, the site says so explicitly (see the #transparency section).
Removed for this reason: “Globally Certified”, “Carbon Negative”, “25,000+ farmers”, “shipped to five continents”, renewable-energy manufacturing, and four invented customer testimonials.
STATS now carries only crop/market facts.PLASTIC_PROBLEM figures against current sources and cite them on the page..env.local and .firebaserc (see Deploy to Firebase). The Bangladesh project is no longer referenced.href="#" Privacy/Terms links in the footer.FOUNDER.name in src/lib/data.ts.Built with Next.js 15 (App Router) · React 19 · TypeScript · Tailwind CSS · Framer Motion, and deployable to Firebase Hosting as a fully static site, with a contact form backed by Cloud Firestore and Firebase Analytics.
Single page, anchor-navigated. In order:
| # | Section | Anchor | Purpose |
|---|---|---|---|
| 1 | Hero | #home |
The positioning line |
| 2 | Key facts | #stats |
Verifiable crop/market facts only |
| 3 | The Innovation | #innovation |
Jute→biopolymer science + attribution to its originators |
| 4 | Material Journey | #solution |
Interactive 5-stage cultivation→product walkthrough |
| 5 | The Plastic Problem | #problem |
Australian plastic statistics |
| 6 | Products | #products |
4 offerings, each badged with development status |
| 7 | Why Jute | #why-jute |
5 properties of the raw material |
| 8 | Bangladesh → Australia | #bridge |
Source / Bridge / Market model |
| 9 | Heritage | #heritage |
Golden Fibre timeline through to today |
| 10 | Why Australia | #australia |
Market rationale + 5-stage roadmap |
| 11 | Certification | #certification |
AS 4736 / AS 5810 and what we will not claim |
| 12 | Research | #research |
Linked, checkable published sources |
| 13 | Sustainability | #sustainability |
4 principles, evidence-first |
| 14 | Transparency | #transparency |
Established / In Development / Target |
| 15 | Who We Work With | #industries |
6 buyer segments |
| 16 | About | #about |
Early-stage startup positioning |
| 17 | Vision | #vision |
Export innovation, not just fibre |
| 18 | Contact | #contact |
Form → Firestore + details |
Plus a persistent floating WhatsApp/call button (FloatingContact) on every page.
prefers-reduced-motion awareImages live in public/media/ and must be registered in the MEDIA map in
src/lib/data.ts with an alt, a caption, a credit and a licence status.
Render them through <Figure item={MEDIA.key} /> — never a bare <Image>. Any
entry marked licence: "unverified" shows a red badge in development so it
cannot ship unnoticed.
Licence values: owned (we shot it) · licensed (paid stock or a Creative
Commons file, terms on file) · permission-granted (written permission from the
rights holder) · unverified (do not publish).
Six images are CC-licensed files from Wikimedia Commons, resized for the web.
They carry a source and a licenceUrl, and Figure renders both as links in
the credit line. That credit line is the licence condition, not decoration —
if it is ever removed or the images are reused elsewhere without it, the licence
lapses. CC BY-SA files additionally require that any adapted version of the
image be released under the same licence; using them as-is on the page does not
put the site itself under CC BY-SA.
Replacing them with commissioned photography is still the goal — original imagery of actual SonaliJute operations will always sell the story better than borrowed pictures of someone else’s field.
The narrative sequence, in the order the page tells it. ✅ = filled with a CC file for now; the rest are still open.
| # | Shot | Where it goes | Status |
|---|---|---|---|
| 1 | Jute field in Bangladesh, tall green stalks | Heritage / Journey step 01 | ✅ CC |
| 2 | Harvest — farmers cutting and bundling stalks | Journey step 02 | ✅ CC (Heritage banner) |
| 3 | Retting — stalks soaking in water | Journey step 02 | ✅ CC |
| 4 | Raw golden fibre, hung or bundled | Hero / Why Jute | ✅ CC (Innovation) |
| 5 | Laboratory — cellulose extraction, gloved hands | Journey step 03 | Open — see note |
| 6 | Translucent biopolymer film, backlit | Innovation / Products | Open — see note |
| 7 | Finished bags and packaging, studio-lit on white | Products | Open |
| 8 | Shipping — cartons, container, port | Bridge | Open |
| 9 | Australian business using the product | Bridge / Australia | Open |
| 10 | Founder portrait, environmental | About | ✅ Supplied |
Shots 5 and 6 are deliberately left empty rather than filled with stock. Journey steps 03–05 are laboratory and manufacturing stages the company has not carried out yet, and a generic gloved-hands-in-a-lab photo next to them would imply a facility that does not exist — which is exactly the claim the rest of the page is careful not to make. They fall back to the icon treatment until there is a real process to photograph.
Deliver at ≥2000px on the long edge, landscape 16:9 or 3:2, as .webp or high-quality
.jpg. Studio product shots on white work best for the product grid.
Not yet wired up — there is no source footage. To enable it, drop an .mp4
(H.264, ≤1080p, ≤8 MB, muted, 15–30 s) plus a .webp poster frame into
public/media/ and ask for the video section to be built. Self-host rather than
embedding YouTube: the build is a static export behind Firebase Hosting, and an
embed adds third-party tracking plus a large third-party payload.
Useful clips: fibre moving in the wind, a bag being filled and carried, film flexing in the light, a timelapse of compost breakdown (that last one doubles as evidence, not just decoration).
| Token | Hex |
|---|---|
| Forest (primary) | #0D5C3B |
| Natural (second) | #4CAF50 |
| Jute (accent) | #C8A44D |
| Background | #F7FAF5 |
src/
├── app/ # layout, page, globals.css, sitemap, robots
├── components/
│ ├── layout/ # Navbar, Footer
│ ├── sections/ # all 12 page sections
│ ├── ui/ # Button, Icon, Reveal, SectionHeading, AnimatedCounter, Decor
│ └── AnalyticsProvider.tsx
└── lib/ # data (all copy), motion variants, firebase, utils
All site copy lives in src/lib/data.ts — edit it there, components stay generic.
npm install
npm run dev # http://localhost:3000
npm run build # outputs a static site to ./out
next.config.mjs uses output: "export", so the build produces a static out/ directory.
The Bangladesh project (sonali-jute) is no longer referenced anywhere. Firebase
config is read from NEXT_PUBLIC_FIREBASE_* environment variables, and
.firebaserc holds a deliberate placeholder so a stray firebase deploy fails
loudly instead of overwriting someone else’s site.
Until this is configured, the contact form does not silently fail — it opens the visitor’s email client with the enquiry pre-filled.
sonalijute-au) at
console.firebase.google.com.australia-southeast1)
and Hosting.cp .env.local.example .env.local and paste the values in..firebaserc, replacing REPLACE_WITH_AU_PROJECT_ID.npm install -g firebase-tools
firebase login
Then deploy:
npm run build
firebase deploy # hosting + Firestore rules
# or individually:
firebase deploy --only hosting
firebase deploy --only firestore:rules
Submissions land in the Firestore contacts collection. Security rules (firestore.rules) allow public create only — read submissions from the console.
Firebase web config is public by design; the API key is safe to commit. Access is controlled by Firestore security rules.
Known gap: the form spreads raw FormData into Firestore and the rules only type-check name/email/message. There is no field whitelist, size cap, rate limit, or honeypot — anyone can script unlimited writes of arbitrary documents. Before launch, tighten firestore.rules with keys().hasOnly([...]) plus size() limits, and add a honeypot field or App Check.