import React from “react”;
import { motion } from “framer-motion”;
import { MapPin, Users, School, HeartPulse, Leaf, BriefcaseBusiness, CalendarDays, FileText, Phone, Mail, Facebook, ChevronRight, Landmark, Sprout, ShieldCheck } from “lucide-react”;
const stats = [
{ label: “Population”, value: “2,385”, note: “Approx. district population” },
{ label: “Families”, value: “375”, note: “Aiga recorded in district survey” },
{ label: “Village Area”, value: “15.8 km²”, note: “Approximate land area” },
{ label: “Internet Access”, value: “79%”, note: “Households with internet access” },
];
const committees = [
{
title: “Education, Health & Youth Development”,
icon: School,
chair: “Chair: Aiono Marjorie”,
deputy: “Deputy Chair: Leaupepe”,
text: “Supports schools, student assistance, literacy, youth development, health access, and community wellbeing initiatives.”,
},
{
title: “Agriculture & Fisheries”,
icon: Sprout,
chair: “Chair: Laaufagamanu Vikulua”,
deputy: “Deputy Chair: Toleafoa Atonio”,
text: “Promotes food security, village agriculture, tunnel houses, farming support, fisheries, and practical livelihood projects.”,
},
{
title: “Economic & Infrastructure Development”,
icon: BriefcaseBusiness,
chair: “Chair: Iva Aileone”,
deputy: “”,
text: “Leads work on roads, public facilities, business opportunities, sports infrastructure, and long-term district investment.”,
},
];
const priorities = [
“Strengthen education support, including student assistance and school infrastructure.”,
“Improve youth, sports, culture, and community development opportunities.”,
“Support health promotion, community clinics, and access to essential services.”,
“Promote agriculture, food security, tunnel houses, and household livelihoods.”,
“Develop public infrastructure including roads, sports facilities, bus shelters, footpaths, and community spaces.”,
“Build accountable governance, transparent budgeting, and regular reporting to the district.”,
];
const facebookPosts = [
{
title: “District Development Grant and Five-Year Plan”,
date: “Insert Facebook post date”,
text: “Update residents on the approved $2.5 million District Development Grant budget, committee workplans, and implementation milestones.”,
},
{
title: “Education Assistance Policy”,
date: “Insert Facebook post date”,
text: “Publish application criteria, deadlines, eligible students, documents required, and decisions made by the Fono Faavae.”,
},
{
title: “District Development Zone Vision”,
date: “Insert Facebook post date”,
text: “Share concept plans for the proposed school, sports field, stadium, offices, commercial kitchen, gymnasium, shopping centre, agriculture plots, and community facilities.”,
},
];
const timeline = [
{ year: “Year 1”, text: “Finalise plans, land arrangements, governance systems, project designs, and priority repairs.” },
{ year: “Year 2”, text: “Begin staged infrastructure, school support, agriculture, and youth development programmes.” },
{ year: “Year 3”, text: “Expand district facilities, sports and culture programmes, and cooperative economic activities.” },
{ year: “Year 4”, text: “Strengthen sustainability, income generation, reporting systems, and community partnerships.” },
{ year: “Year 5”, text: “Review achievements, complete major projects, and prepare the next district development plan.” },
];
function SectionTitle({ eyebrow, title, text }) {
return (
{eyebrow}
{title}
{text &&
{text}}
);
}
export default function AanaAlofiWebsiteDraft() {
return (
Fono Faavae
A’ana Alofi Nu. 2
AboutPrioritiesProjectsUpdatesContact
<section className="relative overflow-hidden">
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(16,185,129,0.25),transparent_35%),radial-gradient(circle_at_bottom_left,rgba(14,165,233,0.15),transparent_30%)]" />
<div className="relative mx-auto grid max-w-7xl gap-10 px-6 py-20 md:grid-cols-[1.1fr_0.9fr] md:py-28">
<motion.div initial={{ opacity: 0, y: 18 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.6 }}>
<p className="inline-flex items-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-semibold text-emerald-800 shadow-sm ring-1 ring-emerald-100">
<ShieldCheck size={16} /> Transparent development for our district
</p>
<h2 className="mt-8 text-5xl font-black tracking-tight text-slate-950 md:text-7xl">
Building the future of Fasito'o-Uta and A'ana Alofi Nu. 2.
</h2>
<p className="mt-6 max-w-2xl text-xl leading-9 text-slate-700">
The A'ana Alofi Nu. 2 Fono Faavae works with families, churches, schools, youth, village leaders, government partners, and the diaspora to deliver practical development that improves education, health, livelihoods, infrastructure, sports, and culture.
</p>
<div className="mt-8 flex flex-col gap-3 sm:flex-row">
<a href="#projects" className="inline-flex items-center justify-center rounded-full bg-emerald-700 px-6 py-3 font-semibold text-white shadow-xl shadow-emerald-700/20 hover:bg-emerald-800">
View development priorities <ChevronRight size={18} />
</a>
<a href="#updates" className="inline-flex items-center justify-center rounded-full bg-white px-6 py-3 font-semibold text-emerald-800 ring-1 ring-emerald-200 hover:bg-emerald-50">
Latest Facebook updates
</a>
</div>
</motion.div>
<motion.div initial={{ opacity: 0, scale: 0.96 }} animate={{ opacity: 1, scale: 1 }} transition={{ duration: 0.7, delay: 0.1 }} className="rounded-[2rem] bg-white p-4 shadow-2xl shadow-slate-900/10 ring-1 ring-slate-100">
<div className="rounded-[1.5rem] bg-gradient-to-br from-emerald-700 to-teal-600 p-8 text-white">
<p className="text-sm font-semibold uppercase tracking-widest text-emerald-100">District vision</p>
<h3 className="mt-4 text-3xl font-bold">A thriving, educated, healthy, productive, and united district.</h3>
<p className="mt-5 leading-8 text-emerald-50">
Our development plan is grounded in service, accountability, and the belief that every family should benefit from local progress.
</p>
<div className="mt-8 grid grid-cols-2 gap-4">
{stats.map((item) => (
<div key={item.label} className="rounded-2xl bg-white/15 p-4 backdrop-blur">
<p className="text-2xl font-bold">{item.value}</p>
<p className="mt-1 text-sm font-semibold text-emerald-50">{item.label}</p>
<p className="mt-2 text-xs text-emerald-100">{item.note}</p>
</div>
))}
</div>
</div>
</motion.div>
</div>
</section>
<section id="about" className="mx-auto max-w-7xl px-6 py-20">
<div className="grid gap-12 md:grid-cols-[0.9fr_1.1fr]">
<SectionTitle
eyebrow="About the Fono Faavae"
title="Local governance for development that reaches families."
text="A'ana Alofi Nu. 2 is advancing a five-year district development programme guided by community consultation, household data, transparent budgeting, and practical projects that respond to local needs."
/>
<div className="grid gap-5 sm:grid-cols-2">
<div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-100">
<MapPin className="text-emerald-700" />
<h3 className="mt-4 text-xl font-bold">Our place</h3>
<p className="mt-3 leading-7 text-slate-700">A district community centred on Fasito'o-Uta, with strong family, church, school, village, and diaspora links.</p>
</div>
<div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-100">
<Users className="text-emerald-700" />
<h3 className="mt-4 text-xl font-bold">Our people</h3>
<p className="mt-3 leading-7 text-slate-700">Planning is informed by district survey results, registered voters, households, youth needs, and village priorities.</p>
</div>
<div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-100">
<FileText className="text-emerald-700" />
<h3 className="mt-4 text-xl font-bold">Our plan</h3>
<p className="mt-3 leading-7 text-slate-700">The district has approved a five-year plan and a $2.5 million District Development Grant budget.</p>
</div>
<div className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-100">
<CalendarDays className="text-emerald-700" />
<h3 className="mt-4 text-xl font-bold">Our reporting</h3>
<p className="mt-3 leading-7 text-slate-700">This website can publish notices, decisions, meeting dates, project reports, grant updates, and financial summaries.</p>
</div>
</div>
</div>
</section>
<section id="priorities" className="bg-white py-20">
<div className="mx-auto max-w-7xl px-6">
<SectionTitle
eyebrow="Development priorities"
title="Six priorities guiding district investment."
text="These areas can be updated as the Fono Faavae approves new policies, projects, and workplans."
/>
<div className="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-3">
{priorities.map((item, index) => (
<div key={item} className="rounded-3xl border border-slate-100 bg-slate-50 p-6">
<p className="text-sm font-bold text-emerald-700">Priority {index + 1}</p>
<p className="mt-3 text-lg font-semibold leading-7 text-slate-900">{item}</p>
</div>
))}
</div>
</div>
</section>
<section id="committees" className="mx-auto max-w-7xl px-6 py-20">
<SectionTitle
eyebrow="Committees"
title="Sub-committees leading practical work."
text="The Fono Faavae works through focused committees that turn district priorities into action."
/>
<div className="mt-10 grid gap-6 md:grid-cols-3">
{committees.map((committee) => {
const Icon = committee.icon;
return (
<div key={committee.title} className="rounded-[2rem] bg-white p-7 shadow-sm ring-1 ring-slate-100">
<div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-emerald-100 text-emerald-700">
<Icon size={26} />
</div>
<h3 className="mt-6 text-xl font-bold">{committee.title}</h3>
<p className="mt-4 text-sm font-semibold text-slate-700">{committee.chair}</p>
{committee.deputy && <p className="mt-1 text-sm font-semibold text-slate-700">{committee.deputy}</p>}
<p className="mt-4 leading-7 text-slate-700">{committee.text}</p>
</div>
);
})}
</div>
</section>
<section id="projects" className="bg-emerald-950 py-20 text-white">
<div className="mx-auto max-w-7xl px-6">
<SectionTitle
eyebrow="Major projects"
title="District Development Zone"
text="A long-term vision for a shared district space that brings together education, sport, culture, enterprise, agriculture, and community services."
/>
<div className="mt-10 grid gap-6 lg:grid-cols-3">
{[
{ icon: School, title: "New primary school", text: "A proposed 16-classroom school with teachers' offices, tea room, library, computer room, hall, and play areas." },
{ icon: Users, title: "Sports and culture hub", text: "A rugby and soccer field, covered stadium seating, basketball and volleyball courts, and spaces for district events." },
{ icon: BriefcaseBusiness, title: "Community facilities", text: "Fono Faavae offices, conference room, gymnasium, commercial kitchen, shop, parking, and supporting amenities." },
{ icon: Leaf, title: "Agriculture and TVET", text: "Demonstration agriculture plots, tunnel houses, and training opportunities linked to food security and youth skills." },
{ icon: HeartPulse, title: "Health access", text: "Opportunities for district-linked health promotion, outreach clinics, screening, and stronger links to health providers." },
{ icon: MapPin, title: "Infrastructure", text: "Roads, carparks, public utilities, solar lighting, drainage, and safe access to district facilities." },
].map((project) => {
const Icon = project.icon;
return (
<div key={project.title} className="rounded-[2rem] bg-white/10 p-7 ring-1 ring-white/10 backdrop-blur">
<Icon className="text-emerald-300" size={30} />
<h3 className="mt-5 text-xl font-bold">{project.title}</h3>
<p className="mt-4 leading-7 text-emerald-50">{project.text}</p>
</div>
);
})}
</div>
</div>
</section>
<section className="mx-auto max-w-7xl px-6 py-20">
<SectionTitle
eyebrow="Five-year pathway"
title="From planning to delivery."
text="A simple public timeline helps residents see what has been approved, what is underway, and what comes next."
/>
<div className="mt-10 grid gap-4 md:grid-cols-5">
{timeline.map((item) => (
<div key={item.year} className="rounded-3xl bg-white p-6 shadow-sm ring-1 ring-slate-100">
<p className="text-sm font-bold uppercase tracking-widest text-emerald-700">{item.year}</p>
<p className="mt-4 leading-7 text-slate-700">{item.text}</p>
</div>
))}
</div>
</section>
<section id="updates" className="bg-slate-100 py-20">
<div className="mx-auto max-w-7xl px-6">
<div className="flex flex-col justify-between gap-6 md:flex-row md:items-end">
<SectionTitle
eyebrow="News and notices"
title="Latest from our Facebook page"
text="Insert approved posts, photos, notices, meeting updates, and community announcements from the A'ana Alofi Nu. 2 Facebook group."
/>
<a href="https://www.facebook.com/groups/3895362527423589" className="inline-flex items-center gap-2 rounded-full bg-white px-5 py-3 font-semibold text-emerald-800 ring-1 ring-emerald-200 hover:bg-emerald-50">
<Facebook size={18} /> Visit Facebook group
</a>
</div>
<div className="mt-10 grid gap-6 md:grid-cols-3">
{facebookPosts.map((post) => (
<article key={post.title} className="rounded-[2rem] bg-white p-7 shadow-sm ring-1 ring-slate-100">
<p className="text-sm font-semibold text-emerald-700">{post.date}</p>
<h3 className="mt-3 text-xl font-bold">{post.title}</h3>
<p className="mt-4 leading-7 text-slate-700">{post.text}</p>
<div className="mt-6 h-40 rounded-2xl bg-slate-100 p-5 text-sm text-slate-500">
Insert Facebook photo, announcement image, or project update screenshot here.
</div>
</article>
))}
</div>
</div>
</section>
<section id="documents" className="mx-auto max-w-7xl px-6 py-20">
<SectionTitle
eyebrow="Documents"
title="Policies, forms, and reports"
text="A public document library strengthens transparency and makes it easier for families to access support."
/>
<div className="mt-10 grid gap-5 md:grid-cols-3">
{[
"Education Assistance Policy",
"District Development Plan 2026–2030",
"Fono Faavae Meeting Minutes",
"Committee Workplans",
"Financial Reports",
"Project Procurement Notices",
].map((doc) => (
<a key={doc} href="#" className="flex items-center justify-between rounded-2xl bg-white p-5 font-semibold shadow-sm ring-1 ring-slate-100 hover:bg-emerald-50">
{doc}
<FileText className="text-emerald-700" size={20} />
</a>
))}
</div>
</section>
<section id="contact" className="bg-white py-20">
<div className="mx-auto grid max-w-7xl gap-10 px-6 lg:grid-cols-[0.9fr_1.1fr]">
<SectionTitle
eyebrow="Contact"
title="Connect with the Fono Faavae"
text="Use this section for official contact details, office hours, committee contacts, and community enquiries."
/>
<div className="rounded-[2rem] bg-slate-50 p-8 ring-1 ring-slate-100">
<div className="grid gap-5 md:grid-cols-2">
<div className="rounded-2xl bg-white p-5">
<Phone className="text-emerald-700" />
<h3 className="mt-4 font-bold">Phone</h3>
<p className="mt-2 text-slate-600">Insert official office phone</p>
</div>
<div className="rounded-2xl bg-white p-5">
<Mail className="text-emerald-700" />
<h3 className="mt-4 font-bold">Email</h3>
<p className="mt-2 text-slate-600">Insert official email address</p>
</div>
<div className="rounded-2xl bg-white p-5 md:col-span-2">
<MapPin className="text-emerald-700" />
<h3 className="mt-4 font-bold">Office</h3>
<p className="mt-2 text-slate-600">Insert Fono Faavae office location and opening hours.</p>
</div>
</div>
<form className="mt-6 grid gap-4">
<input className="rounded-2xl border border-slate-200 px-5 py-4 outline-none focus:border-emerald-600" placeholder="Your name" />
<input className="rounded-2xl border border-slate-200 px-5 py-4 outline-none focus:border-emerald-600" placeholder="Email or phone" />
<textarea className="min-h-32 rounded-2xl border border-slate-200 px-5 py-4 outline-none focus:border-emerald-600" placeholder="Message" />
<button type="button" className="rounded-full bg-emerald-700 px-6 py-4 font-semibold text-white hover:bg-emerald-800">Send enquiry</button>
</form>
</div>
</div>
</section>
<footer className="bg-slate-950 px-6 py-10 text-white">
<div className="mx-auto flex max-w-7xl flex-col justify-between gap-4 md:flex-row md:items-center">
<div>
<p className="text-lg font-bold">A'ana Alofi Nu. 2 Fono Faavae</p>
<p className="mt-2 text-sm text-slate-400">Service. Accountability. Development. Unity.</p>
</div>
<p className="text-sm text-slate-400">© 2026 A'ana Alofi Nu. 2 Fono Faavae. All rights reserved.</p>
</div>
</footer>
</main>);
}