// components.jsx — Sections 2 through 10 of the Arkwright homepage. // ───────────────────────────────────────────────────────────────────────────── // Section 2 — Category statement (vendor sprawl → Arkwright diagram) // ───────────────────────────────────────────────────────────────────────────── // 20 vendor chips, each with an initial position (% of container) and rotation. // User can pick them up and drop them anywhere inside the sprawl. const VENDORS = [ { name: 'Trailer Co.', code: 'v01', top: 4, left: -2, rot: -11 }, { name: 'Canva', code: 'v02', top: 22, left: 66, rot: 9 }, { name: 'Pelican Cases (eBay)', code: 'v03', top: 12, left: 38, rot: -5 }, { name: 'Microphones (Marketplace)',code: 'v04', top: -2, left: 28, rot: 6 }, { name: 'Unreliable Giving App', code: 'v05', top: 38, left: 46, rot: 14 }, { name: 'Amateur DJ Lights', code: 'v06', top: 56, left: 24, rot: -7 }, { name: 'Kids Check-in Apps', code: 'v07', top: 28, left: 8, rot: 10 }, { name: 'Mailchimp?', code: 'v08', top: 64, left: 72, rot: -13 }, { name: 'Storage Unit (Off-site)', code: 'v09', top: 80, left: -4, rot: 5 }, { name: 'Logo From Fiverr', code: 'v10', top: 48, left: 58, rot: -10 }, { name: 'Big-box AV', code: 'v11', top: 6, left: 78, rot: 13 }, { name: "Projector's Too Dim", code: 'v12', top: 72, left: 32, rot: -6 }, { name: 'Print Shop', code: 'v13', top: 18, left: 80, rot: 4 }, { name: 'Slow Laptop', code: 'v14', top: 42, left: 0, rot: -8 }, { name: 'ProPresenter Licenses', code: 'v15', top: 88, left: 28, rot: 11 }, { name: "Grandpa's Soundboard", code: 'v16', top: 60, left: 4, rot: -3 }, { name: 'Web Designer (Nephew)', code: 'v17', top: 30, left: 36, rot: 12 }, { name: 'Wix', code: 'v18', top: 50, left: 82, rot: -9 }, { name: 'Hand-me-down Drums', code: 'v19', top: 94, left: 56, rot: 7 }, { name: 'DIY Stage Backdrop', code: 'v20', top: 78, left: 48, rot: -4 }, { name: 'Sign Maker', code: 'v21', top: 46, left: 32, rot: -2 }, ]; function DraggableChip({ vendor, position, containerRef, onChange, index, hidden }) { const { useState, useEffect, useRef } = React; const [dragging, setDragging] = useState(false); const start = useRef({ pointerX: 0, pointerY: 0, leftPct: 0, topPct: 0 }); const handleDown = (e) => { if (hidden) return; e.preventDefault(); e.stopPropagation(); const point = e.touches ? e.touches[0] : e; start.current = { pointerX: point.clientX, pointerY: point.clientY, leftPct: position.left, topPct: position.top, }; setDragging(true); }; useEffect(() => { if (!dragging) return; const handleMove = (e) => { if (e.cancelable && e.touches) e.preventDefault(); const point = e.touches ? e.touches[0] : e; const rect = containerRef.current && containerRef.current.getBoundingClientRect(); if (!rect) return; const dx = ((point.clientX - start.current.pointerX) / rect.width) * 100; const dy = ((point.clientY - start.current.pointerY) / rect.height) * 100; onChange({ left: Math.max(0, Math.min(82, start.current.leftPct + dx)), top: Math.max(0, Math.min(86, start.current.topPct + dy)), }); }; const handleUp = () => setDragging(false); window.addEventListener('mousemove', handleMove); window.addEventListener('touchmove', handleMove, { passive: false }); window.addEventListener('mouseup', handleUp); window.addEventListener('touchend', handleUp); window.addEventListener('touchcancel', handleUp); return () => { window.removeEventListener('mousemove', handleMove); window.removeEventListener('touchmove', handleMove); window.removeEventListener('mouseup', handleUp); window.removeEventListener('touchend', handleUp); window.removeEventListener('touchcancel', handleUp); }; }, [dragging, onChange, containerRef]); return ( ); } function CategoryStatement() { const { useState, useRef, useCallback } = React; const [positions, setPositions] = useState( VENDORS.map((v) => ({ top: v.top, left: v.left, rot: v.rot })) ); const [consolidated, setConsolidated] = useState(false); const containerRef = useRef(null); const updatePos = useCallback((i, partial) => { setPositions((prev) => { const next = prev.slice(); next[i] = { ...next[i], ...partial }; return next; }); }, []); const toggle = () => { if (consolidated) { setPositions(VENDORS.map((v) => ({ top: v.top, left: v.left, rot: v.rot }))); } setConsolidated(!consolidated); }; return (

What we are

The one place
that handles all of it.

Most portable ministries operate from a collection of vendors. A trailer from one place. Cases from another. Signage made in Canva. A website built by a friend. A check-in system pieced together from three different apps.

Arkwright is the one place that handles all of it — designed together, delivered together, supported together.

Don't focus on the mess…

{VENDORS.map((v, i) => ( updatePos(i, p)} index={i} hidden={consolidated} /> ))}

Focus on the message.

Let us focus on the details we are best at so you can focus on pouring into people.

Build a system →
{consolidated ? ( <>Engage
Arkwright ) : ( <>Engage
Arkwright )}
Before Arkwright After Arkwright
A Arkwright Systems®

One partner.
Zero distractions.

  • 01Digital launch kit
  • 02Custom cases
  • 03Trailers
  • 04Equipment
  • 05Delivery
  • 06Training

Portability isn't a compromise.{' '} It's a strategy.

); } // ───────────────────────────────────────────────────────────────────────────── // Section 3 — Six components, each with a line-drawing illustration // ───────────────────────────────────────────────────────────────────────────── function IlloDigitalKit() { return ( {/* Laptop */} CALVARY FORGE {/* Phone */} CF ); } function IlloCases() { return ( 1240 mm ); } function IlloTrailer() { return ( 16 ft enclosed ); } function IlloEquipment() { return ( {/* Speaker */} {/* Mixer / rack */} {[0,1,2,3,4,5,6,7].map(i => ( ))} {/* Light fixture */} ); } function IlloDelivery() { return ( {/* Building outline */} {/* Trailer arriving */} {/* Arrow */} on-site set up ); } function IlloTraining() { return ( {/* Clipboard */} {[ [38, '01'], [54, '02'], [70, '03'], [86, '04'], ].map(([y, n]) => ( {n} ))} runbook ready ); } const COMPONENTS = [ { code: 'DK-01', label: 'Digital Launch Kit', illo: IlloDigitalKit, desc: 'Brand, website, email. The church online and the church on Sunday — unmistakably the same place.', href: '/system/digital-launch-kit', }, { code: 'CS-04', label: 'Custom Cases', illo: IlloCases, desc: 'Engineered around your equipment and your team. Built to survive a thousand load-ins.', href: '/system/cases', }, { code: 'TR-16', label: 'Trailers', illo: IlloTrailer, desc: 'A trailer built around your cases, your venue, and your weekend flow.', href: '/system/trailers', }, { code: 'EQ-AV', label: 'Equipment', illo: IlloEquipment, desc: 'AV, signage, hospitality, kids check-in, stage build — specified for your context.', href: '/system/equipment', }, { code: 'DL-WG', label: 'White-Glove Delivery', illo: IlloDelivery, desc: 'We set the system up alongside your team and run a complete dry run before your first Sunday.', href: '/system/delivery', }, { code: 'TG-01', label: 'Training', illo: IlloTraining, desc: 'Setup choreography, breakdown sequencing, volunteer training, runbooks for every role.', href: '/system/training', }, ]; function ComponentsSection() { return (

What's inside

Six things every
portable ministry needs.

Designed together. Delivered together. Supported together. You buy a system, not a stack of vendor invoices.
{COMPONENTS.map((c, i) => { return (

{c.label}

{c.desc}

0{i+1} / 06 Learn more →
); })}
); } // ───────────────────────────────────────────────────────────────────────────── // Section 4 — Environments (floor-plan explorer) // ───────────────────────────────────────────────────────────────────────────── const ENVIRONMENTS = [ { code: 'ENV-01', num: '01', label: 'First Impressions', short: 'Lobby', desc: 'Lobby, welcome, signage. The thirty seconds that decide whether a guest comes back.', placeholder: 'Lobby / welcome photo', href: '/environments/first-impressions', photo: 'first-impressions-bg.jpg', area: '74 m²', capacity: 'pass-through', zone: { x: 240, y: 360, w: 300, h: 100 } }, { code: 'ENV-02', num: '02', label: 'Worship', short: 'Worship', desc: 'Auditorium, stage, sound, lighting. Where the room becomes a sanctuary.', placeholder: 'Worship / stage photo', href: '/environments/worship', photo: 'roles-bg.jpg', area: '218 m²', capacity: '380 seats', zone: { x: 240, y: 140, w: 300, h: 220 } }, { code: 'ENV-03', num: '03', label: 'Kids & Nursery', short: 'Kids', desc: 'Check-in, classrooms, safety, fun. The environment parents trust most.', placeholder: 'Kids check-in photo', href: '/environments/kids', photo: 'kids-bg.jpg', area: '128 m²', capacity: '80 kids', zone: { x: 80, y: 60, w: 160, h: 220 } }, { code: 'ENV-04', num: '04', label: 'Overflow', short: 'Overflow', desc: 'Secondary spaces that scale with your service — youth, classes, simulcast.', placeholder: 'Overflow room photo', href: '/environments/overflow', photo: 'overflow-bg.jpg', area: '146 m²', capacity: '120 seats', zone: { x: 540, y: 60, w: 180, h: 400 } }, { code: 'ENV-05', num: '05', label: 'Hospitality', short: 'Coffee', desc: 'Coffee, snacks, info tables. The pause between arrival and worship.', placeholder: 'Hospitality / coffee photo', href: '/environments/hospitality', photo: 'hospitality-bg.jpg', area: '86 m²', capacity: 'rolling', zone: { x: 80, y: 280, w: 160, h: 180 } }, ]; function EnvironmentsSection() { const [active, setActive] = React.useState('ENV-02'); const env = ENVIRONMENTS.find((e) => e.code === active) || ENVIRONMENTS[0]; return (

Where it works

Built for every space
on Sunday morning.

A complete system isn't six product categories — it's six environments. Hover the plan to step through each, the way Sunday morning actually flows.
{ENVIRONMENTS.map((e) => (
setActive(e.code)} onFocus={() => setActive(e.code)} onClick={() => setActive(e.code)} tabIndex={0} > {e.num} {e.label}
))}
{env.num} / {ENVIRONMENTS.length.toString().padStart(2, '0')} {env.photo ? ( {env.label} ) : ( )}

{env.label}

{env.desc}

Explore {env.short.toLowerCase()} →
); } // ───────────────────────────────────────────────────────────────────────────── // Section 5 — Stages / Journey // ───────────────────────────────────────────────────────────────────────────── function IlloPlant() { return ( {/* Flag on a hill */} {/* Path */} DAY ONE ); } function IlloGrowing() { return ( {/* Growing bars / fan deployment */} {[50, 100, 150, 200, 250].map((x, i) => ( ))} {/* Floor line */} YEAR 03 → 07 ); } function IlloMultisite() { return ( {/* Three campus dots connected */} CAMPUS 02 HQ CAMPUS 03 + NEW ); } function StagesSection() { const stages = [ { code: 'STG-01', name: 'Church Plants', body: 'A launch date, a launch team, and a hundred details you didn\'t sign up for. We help you start with a complete system instead of a collection of compromises.', href: '/solutions/church-plants', illo: IlloPlant }, { code: 'STG-02', name: 'Growing Churches', body: 'You\'ve made portable work for years. You\'ve also outgrown the duct tape. Time for the system your team has earned.', href: '/solutions/established', illo: IlloGrowing }, { code: 'STG-03', name: 'Multi-Campus', body: 'A new campus deserves the same care as the original. We build systems that scale your church without diluting it.', href: '/solutions/multi-site', illo: IlloMultisite }, ]; return (

Where you are

We meet you
on each step of the journey.

Most churches don't buy a system once. They grow into it. A church plant in year one needs something different than a multi-site campus in year ten.
{stages.map((s, i) => { return (
{s.code} 0{i+1} / 03

{s.name}

{s.body}

Read more →
 ); })}
Already have a system that's tired?

Our buy-back and upgrade program helps churches at any stage trade up to current equipment without starting from scratch.

Trade up →
); } // ───────────────────────────────────────────────────────────────────────────── // Section 6 — Roles // ───────────────────────────────────────────────────────────────────────────── const ROLES = [ { code: 'R-01', glyph: 'LP', name: 'Lead Pastor', desc: 'Stay focused on shepherding people, not chasing logistics.', href: '/who-we-serve/lead-pastors' }, { code: 'R-02', glyph: 'XP', name: 'Executive Pastor', desc: 'A repeatable system that scales with your campus plan.', href: '/who-we-serve/executive-pastors' }, { code: 'R-03', glyph: 'CP', name: 'Campus Pastor', desc: 'Consistency with the rest of your church, identity for your campus.', href: '/who-we-serve/campus-pastors' }, { code: 'R-04', glyph: 'WP', name: 'Worship Pastor', desc: 'Sunday morning that runs the way you\'ve always wanted it to.', href: '/who-we-serve/worship-pastors' }, { code: 'R-05', glyph: 'TD', name: 'Tech / Production Director', desc: 'Systems that protect your team and never let you down.', href: '/who-we-serve/tech-directors' }, { code: 'R-06', glyph: 'CD', name: 'Children\'s Director', desc: 'Spaces that feel safe, intentional, and joyful — every week.', href: '/who-we-serve/childrens-directors' }, ]; function RolesSection() { return (

Who we build for

Built around
your role.

A portable ministry system gets bought by a team, not a person. Every seat at the table has a different concern — and a different reason this works.
{ROLES.map((r, i) => (
{r.code} 0{i+1} / 06
{r.glyph}

{r.name}

{r.desc}

For {r.name.toLowerCase()}s →
 ))}
); } // ───────────────────────────────────────────────────────────────────────────── // Section 7 — Proof / Case studies // ───────────────────────────────────────────────────────────────────────────── function ProofSection() { return (

Proof

Real churches.
Real systems.
Real Sundays.

We don't promise polish — we show it. Each system below was built around a specific church, a specific venue, a specific volunteer team.
Bay Chapel worship service
Bay Chapel CASE-001 · CHICAGO IL

We went from a four-hour load-in held together by two veteran volunteers to a ninety-minute set-up any new team member can run. Sunday morning finally feels like Sunday morning again.

— Pastor [PILOT QUOTE TBD], Lead Pastor
See how we built their system →
CASE-002 · AUSTIN TX · CHURCH PLANT

Riverside Collective

Launched into a high school theater in 14 weeks with full kit, brand, and volunteer training.
CASE-003 · NORTHBROOK IL · MULTI-SITE

Northbrook Community

Second campus deployed in a converted school cafeteria — operationally identical to the original.
CASE-004 · LIGHTHOUSE FL · GROWING

Lighthouse Church

Replaced eight years of duct-tape AV with a single integrated rack and trained crew of nine.
See all case studies →
); } // ───────────────────────────────────────────────────────────────────────────── // Section 8 — Promise / pillars // ───────────────────────────────────────────────────────────────────────────── function PromiseSection() { return (

The promise

Three things we build
our entire company on.

One company.

Brand to building. Design to delivery. Cases to training. You buy a system, not a stack of vendor invoices.

Built for the long Sunday.

Equipment that survives a thousand load-ins. Systems that work the same way every weekend. Support that's still there a year after launch.

Built by people who get it.

Founded by leaders with backgrounds in ministry, manufacturing, and brand design. We've been the people setting up at 7 AM. We built the company we wished we'd had.

); } // ───────────────────────────────────────────────────────────────────────────── // Line icons for VisionClose path cards // Simple front-elevation iconography in the project's technical-drawing // vocabulary (1.5px strokes, currentColor, single orange accent). // ───────────────────────────────────────────────────────────────────────────── function IconSeedling() { return ( {/* Ground line */} {/* Soil mound dashes */} {/* Stem */} {/* Left leaf */} {/* Right leaf */} {/* Accent bud */} ); } function IconTree() { return ( {/* Ground line */} {/* Trunk */} {/* Canopy — three circles */} {/* Accent fruit */} ); } function IconTreeSeeds() { return ( {/* Ground line */} {/* Center tree — smaller */} {/* Left seedling */} {/* Right seedling */} {/* Center fruit + seedling bud accents */} ); } // ───────────────────────────────────────────────────────────────────────────── // Section 9 — Vision close // ───────────────────────────────────────────────────────────────────────────── function VisionClose() { return (

Where to start

The churches reaching the most people in the next decade won't be the ones with the biggest buildings.

They'll be the ones who learned to plant the flag wherever the mission led — and operate at the level of permanence wherever they landed. Arkwright exists to help you do that.

Solutions for scale
Under 250

Plant a church

Launch into your first venue with a complete system — brand to building, day one.

For plants → 250 – 1,200

Grow your church

Replace eight years of duct tape. Upgrade to the system your team has earned.

For growing → Over 1,200

Add a campus

Deploy a new location at the same operational level as the original.

For multi-site →
Build a system → Or just talk to us —{' '} hello@arkwright.systems
); } // ───────────────────────────────────────────────────────────────────────────── // Section 10 — Footer // ───────────────────────────────────────────────────────────────────────────── function SiteFooter() { return ( ); } Object.assign(window, { CategoryStatement, ComponentsSection, EnvironmentsSection, StagesSection, RolesSection, ProofSection, PromiseSection, VisionClose, SiteFooter, });