fertiges design
This commit is contained in:
parent
c66a0e49f3
commit
d31681cee1
|
|
@ -0,0 +1,144 @@
|
|||
# Dependencies
|
||||
node_modules/
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
# Build outputs
|
||||
dist/
|
||||
build/
|
||||
*.local
|
||||
|
||||
# Environment variables
|
||||
.env
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
# IDE and editor files
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# OS generated files
|
||||
.DS_Store
|
||||
.DS_Store?
|
||||
._*
|
||||
.Spotlight-V100
|
||||
.Trashes
|
||||
ehthumbs.db
|
||||
Thumbs.db
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage/
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Dependency directories
|
||||
jspm_packages/
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
public
|
||||
|
||||
# Storybook build outputs
|
||||
.out
|
||||
.storybook-out
|
||||
|
||||
# Temporary folders
|
||||
tmp/
|
||||
temp/
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Local Netlify folder
|
||||
.netlify
|
||||
|
||||
# Vercel
|
||||
.vercel
|
||||
|
||||
# Docker
|
||||
.dockerignore
|
||||
Dockerfile
|
||||
docker-compose*.yml
|
||||
|
||||
# Backup files
|
||||
*.bak
|
||||
*.backup
|
||||
*.old
|
||||
|
||||
# Archive files
|
||||
*.zip
|
||||
*.tar.gz
|
||||
*.rar
|
||||
|
||||
# Database files
|
||||
*.db
|
||||
*.sqlite
|
||||
*.sqlite3
|
||||
|
||||
# Certificate files
|
||||
*.pem
|
||||
*.key
|
||||
*.crt
|
||||
*.csr
|
||||
|
||||
# Local configuration files
|
||||
config.local.js
|
||||
config.local.json
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
|
||||
# Accessibility Report (WCAG 2.2 AA)
|
||||
|
||||
- Skip link present and focusable.
|
||||
- Landmarks used: header/nav/main/footer.
|
||||
- One H1 per page via route pages.
|
||||
- Visible :focus-visible outlines (2px, offset 2px).
|
||||
- Tap targets ≥44x44 via min-h-11 buttons/chips.
|
||||
- Contrast ≥4.5:1 for text on white/subtle. Sanctuary red with white text for buttons.
|
||||
- Link purpose is clear (no generic "Learn more").
|
||||
- Respects prefers-reduced-motion; no auto-carousels or parallax.
|
||||
- Forms labeled; consent checkbox; honeypot field included.
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
# Performance Notes
|
||||
|
||||
- Default hero is text-first; H1 is LCP.
|
||||
- Optional photo hero has dim overlay; text remains LCP.
|
||||
- Use AVIF/WebP for real images; `loading="lazy"` on below-fold images.
|
||||
- Tailwind builds only used CSS; JS kept lean (<90KB target gz). CSS target <50KB gz.
|
||||
- Local WOFF2 fonts with `font-display: swap` and preload for top 1–2 fonts.
|
||||
- `aspect-ratio` used in cards to prevent CLS.
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Annaville SDA Church | Corpus Christi, TX</title>
|
||||
<meta name="description" content="Worship, community, and spiritual growth in Corpus Christi. Service times, events, ministries, and directions." />
|
||||
<link rel="icon" type="image/x-icon" href="/assets/favicon.ico.gif" />
|
||||
<link rel="shortcut icon" type="image/x-icon" href="/assets/favicon.ico.gif" />
|
||||
</head>
|
||||
<body class="bg-white text-ink">
|
||||
<a class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:bg-white focus:text-ink focus:ring-2 focus:ring-focus focus:px-3 focus:py-2 focus:rounded" href="#main">Skip to content</a>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
location / {
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
add_header Cache-Control "public, max-age=31536000, immutable";
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,24 @@
|
|||
{
|
||||
"name": "annaville-sda-church",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview --port 5173"
|
||||
},
|
||||
"dependencies": {
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-router-dom": "^6.26.0",
|
||||
"react-helmet-async": "^2.0.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"vite": "^5.4.2",
|
||||
"@vitejs/plugin-react": "^4.3.1",
|
||||
"tailwindcss": "^3.4.10",
|
||||
"postcss": "^8.4.47",
|
||||
"autoprefixer": "^10.4.18"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
|
||||
export default { plugins: { tailwindcss: {}, autoprefixer: {} } }
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Outlet } from 'react-router-dom'
|
||||
import Header from './components/Header'
|
||||
import Footer from './components/Footer'
|
||||
import MobileStickyBar from './components/MobileStickyBar'
|
||||
|
||||
export default function App(){
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col">
|
||||
{/* Skip links for accessibility */}
|
||||
<div className="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50">
|
||||
<a href="#main" className="block bg-primary text-white px-4 py-2 rounded focus:ring-2 focus:ring-primary focus:ring-offset-2">
|
||||
Skip to main content
|
||||
</a>
|
||||
<a href="#navigation" className="block bg-primary text-white px-4 py-2 rounded focus:ring-2 focus:ring-primary focus:ring-offset-2 mt-2">
|
||||
Skip to navigation
|
||||
</a>
|
||||
<a href="#footer" className="block bg-primary text-white px-4 py-2 rounded focus:ring-2 focus:ring-primary focus:ring-offset-2 mt-2">
|
||||
Skip to footer
|
||||
</a>
|
||||
</div>
|
||||
<Header />
|
||||
<main id="main" role="main" className="flex-1">
|
||||
<Outlet />
|
||||
</main>
|
||||
<Footer />
|
||||
<MobileStickyBar />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
import React from 'react'
|
||||
import { googleCalendarUrl, downloadICS } from '../utils/calendar'
|
||||
import { track, events as ga } from '../utils/analytics'
|
||||
|
||||
export default function AddToCalendar() {
|
||||
const handleAppleCalendar = () => {
|
||||
const now = new Date()
|
||||
const nextSat = new Date(now)
|
||||
const day = now.getDay()
|
||||
const diff = (6 - day + 7) % 7 || 7
|
||||
nextSat.setDate(now.getDate() + diff)
|
||||
const start = new Date(Date.UTC(nextSat.getFullYear(), nextSat.getMonth(), nextSat.getDate(), 14, 30)) // approx 9:30 CT
|
||||
const end = new Date(Date.UTC(nextSat.getFullYear(), nextSat.getMonth(), nextSat.getDate(), 16, 0))
|
||||
|
||||
downloadICS({
|
||||
title: 'Sabbath School',
|
||||
details: 'Weekly Sabbath School at Annaville SDA Church.',
|
||||
location: '2710 Violet Rd, Corpus Christi, TX 78410',
|
||||
start,
|
||||
end,
|
||||
filename: 'sabbath-school.ics'
|
||||
})
|
||||
|
||||
track(ga.CTA_CLICK, { label: 'add_to_apple_calendar' })
|
||||
}
|
||||
|
||||
const handleGoogleCalendar = () => {
|
||||
const nextSaturday = new Date()
|
||||
const day = nextSaturday.getDay()
|
||||
const diff = (6 - day + 7) % 7 || 7
|
||||
nextSaturday.setDate(nextSaturday.getDate() + diff)
|
||||
const end = new Date(nextSaturday.getTime() + 90 * 60 * 1000) // 90 minutes later
|
||||
|
||||
const url = googleCalendarUrl({
|
||||
title: 'Sabbath School',
|
||||
details: 'Weekly Sabbath School at Annaville SDA Church.',
|
||||
location: '2710 Violet Rd, Corpus Christi, TX 78410',
|
||||
start: nextSaturday,
|
||||
end: end
|
||||
})
|
||||
|
||||
window.open(url, '_blank', 'noopener,noreferrer')
|
||||
track(ga.CTA_CLICK, { label: 'add_to_google_calendar' })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<button
|
||||
className="chip bg-primary text-white hover:bg-primaryHover focus-ring"
|
||||
onClick={handleAppleCalendar}
|
||||
aria-label="Add Sabbath School to Apple Calendar"
|
||||
>
|
||||
📅 Add to Apple Calendar
|
||||
</button>
|
||||
<button
|
||||
className="chip bg-primaryDeep text-white hover:bg-primaryHover focus-ring"
|
||||
onClick={handleGoogleCalendar}
|
||||
aria-label="Add Sabbath School to Google Calendar"
|
||||
>
|
||||
📅 Add to Google Calendar
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export function EventCard({ e }){
|
||||
const dt = new Date(e.date)
|
||||
const mon = dt.toLocaleString('en', { month:'short' })
|
||||
const day = dt.getDate()
|
||||
|
||||
// Map specific event names to images
|
||||
const getEventImage = (title) => {
|
||||
const lowerTitle = title.toLowerCase()
|
||||
if (lowerTitle.includes('community sabbath lunch')) {
|
||||
return '/assets/potluck.png'
|
||||
}
|
||||
if (lowerTitle.includes('youth vespers')) {
|
||||
return '/assets/youth_vespers.png'
|
||||
}
|
||||
if (lowerTitle.includes('neighborhood food drive')) {
|
||||
return '/assets/family_entry.png'
|
||||
}
|
||||
if (lowerTitle.includes('potluck') || lowerTitle.includes('lunch') || lowerTitle.includes('dinner')) {
|
||||
return '/assets/potluck.png'
|
||||
}
|
||||
if (lowerTitle.includes('family') || lowerTitle.includes('community')) {
|
||||
return '/assets/family_entry.png'
|
||||
}
|
||||
if (lowerTitle.includes('welcome') || lowerTitle.includes('committee')) {
|
||||
return '/assets/welcome_commite.png'
|
||||
}
|
||||
// Default event image
|
||||
return '/assets/potluck.png'
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="card p-10 flex flex-col" style={{aspectRatio:'4/3'}}>
|
||||
<div className="flex items-center gap-6 mb-8">
|
||||
<div className="w-20 h-20 rounded-full overflow-hidden bg-primary text-white flex items-center justify-center">
|
||||
<img
|
||||
src={getEventImage(e.title)}
|
||||
alt={`${e.title} event`}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-h3">{e.title}</h3>
|
||||
<div className="text-muted text-small mt-2">{e.time} • {e.location}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-6 text-body mb-8">{e.description}</p>
|
||||
<div className="mt-auto pt-8">
|
||||
<Link
|
||||
to={`/events/${e.slug}`}
|
||||
className="btn-outline"
|
||||
aria-label={`Event details: ${e.title} on ${mon} ${day}`}
|
||||
>
|
||||
Details — {e.title}
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
export function MinistryCard({ m }){
|
||||
// Map specific ministry names to images
|
||||
const getMinistryImage = (name) => {
|
||||
const lowerName = name.toLowerCase()
|
||||
if (lowerName === 'children\'s ministry') {
|
||||
return '/assets/children_ministry_craft.png'
|
||||
}
|
||||
if (lowerName === 'youth ministry') {
|
||||
return '/assets/youth_vespers.png'
|
||||
}
|
||||
if (lowerName === 'adult sabbath school') {
|
||||
return '/assets/speeking.png'
|
||||
}
|
||||
if (lowerName === 'women\'s ministry') {
|
||||
return '/assets/pray_heart.png'
|
||||
}
|
||||
if (lowerName === 'men\'s ministry') {
|
||||
return '/assets/family_entry.png'
|
||||
}
|
||||
if (lowerName === 'community outreach') {
|
||||
return '/assets/welcome_commite.png'
|
||||
}
|
||||
// Fallback for other ministries
|
||||
if (lowerName.includes('children') || lowerName.includes('kids')) {
|
||||
return '/assets/children_ministry_craft.png'
|
||||
}
|
||||
if (lowerName.includes('youth') || lowerName.includes('vespers')) {
|
||||
return '/assets/youth_vespers.png'
|
||||
}
|
||||
if (lowerName.includes('welcome') || lowerName.includes('committee')) {
|
||||
return '/assets/welcome_commite.png'
|
||||
}
|
||||
if (lowerName.includes('prayer') || lowerName.includes('pray')) {
|
||||
return '/assets/pray_heart.png'
|
||||
}
|
||||
// Default ministry image
|
||||
return '/assets/welcome_commite.png'
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="card p-10 flex flex-col">
|
||||
<div className="mb-6">
|
||||
<img
|
||||
src={getMinistryImage(m.name)}
|
||||
alt={`${m.name} ministry`}
|
||||
className="w-full h-80 object-cover rounded-lg mb-4"
|
||||
loading="lazy"
|
||||
/>
|
||||
<h3 className="font-heading text-h3">{m.name}</h3>
|
||||
</div>
|
||||
<div className="text-muted text-small mb-3">{m.meeting}</div>
|
||||
<div className="text-small mb-8">Leader: {m.leader}</div>
|
||||
<div className="mt-auto pt-8">
|
||||
<Link
|
||||
to={`/ministries/${m.slug}`}
|
||||
className="btn-outline"
|
||||
aria-label={`Explore ${m.name} ministry`}
|
||||
>
|
||||
Explore {m.name}
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
export function SermonCard({ s }){
|
||||
return (
|
||||
<article className="card p-10 flex flex-col" style={{aspectRatio:'4/3'}}>
|
||||
<div className="flex items-center gap-6 mb-8">
|
||||
<div className="w-24 h-24 bg-sand rounded-lg overflow-hidden flex items-center justify-center">
|
||||
<img
|
||||
src="/assets/speeking.png"
|
||||
alt={`Sermon by ${s.speaker}`}
|
||||
className="w-full h-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-h3">{s.title}</h3>
|
||||
<div className="text-muted text-small mt-2">{s.speaker} • {new Date(s.date).toLocaleDateString()}</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="mt-6 text-body mb-8">{s.summary}</p>
|
||||
<div className="mt-auto pt-8">
|
||||
<Link
|
||||
to={`/sermons/${s.slug}`}
|
||||
className="btn-outline"
|
||||
aria-label={`Watch or listen to ${s.title} by ${s.speaker}`}
|
||||
>
|
||||
Watch/Listen — {s.title}
|
||||
</Link>
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
|
||||
export default function Footer(){
|
||||
const year = new Date().getFullYear()
|
||||
return (
|
||||
<footer id="footer" role="contentinfo" className="bg-sand border-t border-subtle mt-12">
|
||||
<div className="container grid md:grid-cols-3 gap-8 py-16">
|
||||
<div>
|
||||
<h3 className="font-heading text-h3 mb-4">Annaville Seventh-day Adventist Church</h3>
|
||||
<p className="text-body mb-2">2710 Violet Rd<br/>Corpus Christi, TX 78410</p>
|
||||
<p className="mb-2">
|
||||
<a href="tel:+13612415501" className="text-primary underline hover:text-primaryHover">
|
||||
Call (361) 241-5501
|
||||
</a>
|
||||
</p>
|
||||
<p className="mb-2">
|
||||
<a href="https://maps.google.com/?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
|
||||
className="text-primary underline hover:text-primaryHover">
|
||||
Get Directions
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-muted text-small">Sabbath School 9:30 AM • Divine Worship 11:00 AM</p>
|
||||
|
||||
{/* Leadership Information */}
|
||||
<div className="mt-6 text-small text-muted">
|
||||
<p><strong>Pastor:</strong> Matt McMearty</p>
|
||||
<p><strong>Head Elder:</strong> Regena Simms</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-heading text-h3 mb-4">Quick Links</h3>
|
||||
<ul className="space-y-3">
|
||||
<li><Link to="/about" className="text-body hover:text-primary transition-colors">About Us</Link></li>
|
||||
<li><Link to="/services" className="text-body hover:text-primary transition-colors">Services</Link></li>
|
||||
<li><Link to="/resources" className="text-body hover:text-primary transition-colors">Resources</Link></li>
|
||||
<li><Link to="/prayer-requests" className="text-body hover:text-primary transition-colors">Prayer Requests</Link></li>
|
||||
<li><Link to="/calendar" className="text-body hover:text-primary transition-colors">Calendar</Link></li>
|
||||
<li><Link to="/beliefs" className="text-body hover:text-primary transition-colors">Our Beliefs</Link></li>
|
||||
<li><Link to="/contact" className="text-body hover:text-primary transition-colors">Contact</Link></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="font-heading text-h3 mb-4">Newsletter</h3>
|
||||
<p className="text-body mb-4">
|
||||
If you would like to receive our newsletter please fill out the form below.
|
||||
</p>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="footer-newsletter-name" className="block text-sm font-medium text-ink mb-2">
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
id="footer-newsletter-name"
|
||||
type="text"
|
||||
className="w-full border border-subtle rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="footer-newsletter-email" className="block text-sm font-medium text-ink mb-2">
|
||||
Email Address:
|
||||
</label>
|
||||
<input
|
||||
id="footer-newsletter-email"
|
||||
type="email"
|
||||
className="w-full border border-subtle rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="your.email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" className="btn w-full">
|
||||
Subscribe to Newsletter
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-subtle py-6">
|
||||
<div className="container flex flex-wrap items-center gap-4 justify-between">
|
||||
<div className="text-small text-muted">
|
||||
© {year} Annaville Seventh-day Adventist Church. All rights reserved.
|
||||
</div>
|
||||
<div className="text-small flex gap-6">
|
||||
<Link className="text-muted hover:text-primary transition-colors" to="/privacy">Privacy Policy</Link>
|
||||
<Link className="text-muted hover:text-primary transition-colors" to="/terms">Terms of Use</Link>
|
||||
<Link className="text-muted hover:text-primary transition-colors" to="/accessibility">Accessibility</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,93 @@
|
|||
|
||||
import React, { useState } from 'react'
|
||||
import { Link, NavLink } from 'react-router-dom'
|
||||
import { track, events } from '../utils/analytics'
|
||||
|
||||
const navItems = [
|
||||
{ to:'/about', label:'ABOUT US' },
|
||||
{ to:'/services', label:'SERVICES' },
|
||||
{ to:'/resources', label:'RESOURCES' },
|
||||
{ to:'/prayer-requests', label:'PRAYER REQUESTS' },
|
||||
{ to:'/calendar', label:'CALENDAR' },
|
||||
{ to:'/beliefs', label:'OUR BELIEFS' },
|
||||
]
|
||||
|
||||
export default function Header(){
|
||||
const [open, setOpen] = useState(false)
|
||||
return (
|
||||
<header role="banner" className="z-50 bg-white/90 backdrop-blur border-b border-subtle">
|
||||
<nav id="navigation" aria-label="Main navigation" className="container flex items-center justify-between h-20">
|
||||
<div className="flex items-center gap-4">
|
||||
<Link to="/" className="flex items-center gap-4 font-heading text-lg font-semibold tracking-tight text-ink leading-tight">
|
||||
<img
|
||||
src="/assets/favicon.ico.gif"
|
||||
alt="Annaville SDA Church Logo"
|
||||
className="w-20 h-20 rounded-lg"
|
||||
/>
|
||||
<span>
|
||||
Annaville Seventh-day<br />Adventist Church
|
||||
</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center gap-6">
|
||||
{navItems.map(item => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={({isActive})=>`text-sm font-medium transition-colors ${isActive?'text-primary font-semibold':'text-ink hover:text-primary'}`}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
))}
|
||||
<Link
|
||||
to="/contact"
|
||||
className="btn text-sm px-4 py-2"
|
||||
onClick={()=>track(events.CTA_CLICK,{label:'contact'})}
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</div>
|
||||
<button
|
||||
aria-label="Open menu"
|
||||
className="md:hidden btn-ghost"
|
||||
onClick={()=>setOpen(true)}
|
||||
>
|
||||
<span aria-hidden className="text-3xl">☰</span>
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
{open && (
|
||||
<div role="dialog" aria-modal="true" className="md:hidden fixed inset-0 bg-black/30" onClick={()=>setOpen(false)}>
|
||||
<div className="absolute top-0 right-0 w-[80%] h-full bg-white shadow-level1 p-8" onClick={e=>e.stopPropagation()}>
|
||||
<div className="flex justify-between items-center mb-12">
|
||||
<span className="font-heading text-h2">Menu</span>
|
||||
<button className="btn-ghost" onClick={()=>setOpen(false)} aria-label="Close menu">✕</button>
|
||||
</div>
|
||||
<ul className="space-y-6">
|
||||
{navItems.map(item => (
|
||||
<li key={item.to}>
|
||||
<NavLink
|
||||
to={item.to}
|
||||
onClick={()=>setOpen(false)}
|
||||
className={({isActive})=>`block py-5 text-body ${isActive?'text-primary font-semibold':'text-ink hover:text-primary'}`}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
</li>
|
||||
))}
|
||||
<li>
|
||||
<Link
|
||||
to="/contact"
|
||||
className="btn w-full"
|
||||
onClick={()=>{setOpen(false); track(events.CTA_CLICK,{label:'contact'})}}
|
||||
>
|
||||
Contact Us
|
||||
</Link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</header>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { track, events } from '../utils/analytics'
|
||||
import LazyImage from './LazyImage'
|
||||
|
||||
export function TextHero(){
|
||||
const scrollToServiceTimes = () => {
|
||||
const element = document.getElementById('service-times')
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
track(events.CTA_CLICK, { label: 'service_times' })
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative bg-gradient-to-br from-sand to-surface">
|
||||
<div className="container py-20">
|
||||
<div className="grid lg:grid-cols-2 gap-16 items-center">
|
||||
{/* Content on the Left */}
|
||||
<div className="order-1 lg:order-1">
|
||||
<h1 className="font-heading text-h1 mb-8">Welcome to Annaville Seventh-day Adventist Church</h1>
|
||||
<p className="text-ink text-body mb-10">The Annaville SDA Church offers worship services for members, non-members, or anyone interested in learning more about practical Christian living from the Word of God.</p>
|
||||
<div className="mb-10 text-muted text-small">Sabbath School 9:30 AM • Divine Worship 11:00 AM • 2710 Violet Rd</div>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<Link
|
||||
to="/visit"
|
||||
className="btn"
|
||||
onClick={() => track(events.CTA_CLICK, { label: 'plan_visit' })}
|
||||
data-cta="plan_visit"
|
||||
>
|
||||
Plan Your Visit
|
||||
</Link>
|
||||
<button
|
||||
className="btn-outline"
|
||||
onClick={scrollToServiceTimes}
|
||||
data-cta="service_times"
|
||||
>
|
||||
See Service Times
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Large Hero Image on the Right */}
|
||||
<div className="order-2 lg:order-2">
|
||||
<LazyImage
|
||||
src="/assets/hero_golden_hour.png"
|
||||
alt="Annaville SDA Church building during golden hour with people walking on the path"
|
||||
className="w-full h-[400px] object-cover rounded-lg shadow-lg"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
// Safe photo hero variant with dim overlay; H1 remains text-first
|
||||
export function PhotoHeroSafe(){
|
||||
const scrollToServiceTimes = () => {
|
||||
const element = document.getElementById('service-times')
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
track(events.CTA_CLICK, { label: 'service_times' })
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="relative">
|
||||
<LazyImage src="/assets/hero_golden_hour.png" alt="Annaville SDA Church building during golden hour" className="absolute right-0 top-8 w-1/4 h-full" />
|
||||
<div className="absolute right-0 top-8 w-1/4 h-full bg-black/40" aria-hidden="true"></div>
|
||||
<div className="relative container py-40 text-white">
|
||||
<h1 className="font-heading text-h1 mb-8">Welcome to Annaville Seventh-day Adventist Church</h1>
|
||||
<p className="text-white text-body mb-10">The Annaville SDA Church offers worship services for members, non-members, or anyone interested in learning more about practical Christian living from the Word of God.</p>
|
||||
<div className="mb-10 text-white/90 text-small">Sabbath School 9:30 AM • Divine Worship 11:00 AM • 2710 Violet Rd</div>
|
||||
<div className="flex flex-wrap gap-6">
|
||||
<Link
|
||||
to="/visit"
|
||||
className="btn"
|
||||
data-cta="plan_visit"
|
||||
>
|
||||
Plan Your Visit
|
||||
</Link>
|
||||
<button
|
||||
className="btn-outline text-white border-white hover:bg-white/10"
|
||||
onClick={scrollToServiceTimes}
|
||||
data-cta="service_times"
|
||||
>
|
||||
See Service Times
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
import React, { useState, useEffect, useRef } from 'react'
|
||||
|
||||
export default function LazyImage({
|
||||
src,
|
||||
alt,
|
||||
className = "",
|
||||
placeholder = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300' fill='%23f3f4f6'/%3E%3C/svg%3E",
|
||||
...props
|
||||
}) {
|
||||
const [isLoaded, setIsLoaded] = useState(false)
|
||||
const [isInView, setIsInView] = useState(false)
|
||||
const imgRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
([entry]) => {
|
||||
if (entry.isIntersecting) {
|
||||
setIsInView(true)
|
||||
observer.disconnect()
|
||||
}
|
||||
},
|
||||
{
|
||||
rootMargin: '50px 0px',
|
||||
threshold: 0.01
|
||||
}
|
||||
)
|
||||
|
||||
if (imgRef.current) {
|
||||
observer.observe(imgRef.current)
|
||||
}
|
||||
|
||||
return () => observer.disconnect()
|
||||
}, [])
|
||||
|
||||
const handleLoad = () => {
|
||||
setIsLoaded(true)
|
||||
}
|
||||
|
||||
const handleError = () => {
|
||||
// Fallback to placeholder if image fails to load
|
||||
setIsLoaded(true)
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={imgRef}
|
||||
className={`relative overflow-hidden ${className}`}
|
||||
{...props}
|
||||
>
|
||||
{/* Placeholder */}
|
||||
<img
|
||||
src={placeholder}
|
||||
alt=""
|
||||
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${
|
||||
isLoaded ? 'opacity-0' : 'opacity-100'
|
||||
}`}
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Actual image */}
|
||||
{isInView && (
|
||||
<img
|
||||
src={src}
|
||||
alt={alt}
|
||||
className={`w-full h-full object-cover transition-opacity duration-300 ${
|
||||
isLoaded ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
loading="lazy"
|
||||
onLoad={handleLoad}
|
||||
onError={handleError}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Loading indicator */}
|
||||
{!isLoaded && isInView && (
|
||||
<div className="absolute inset-0 flex items-center justify-center bg-gray-100">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { track, events } from '../utils/analytics'
|
||||
|
||||
export default function MobileStickyBar(){
|
||||
const scrollToVisitForm = () => {
|
||||
const element = document.getElementById('visit-form')
|
||||
if (element) {
|
||||
element.scrollIntoView({ behavior: 'smooth' })
|
||||
}
|
||||
track(events.CTA_CLICK, { label: 'plan_visit' })
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="fixed inset-x-0 bottom-0 z-40 flex justify-around border-t bg-surface p-2 md:hidden">
|
||||
<a
|
||||
href="tel:+13612415501"
|
||||
className="flex flex-col items-center gap-1 text-sm focus-ring"
|
||||
aria-label="Call the church"
|
||||
onClick={() => track(events.CLICK_TO_CALL, { tel: '3612415501' })}
|
||||
data-cta="click_to_call"
|
||||
>
|
||||
📞 Call
|
||||
</a>
|
||||
<a
|
||||
href="https://maps.apple.com/?q=2710+Violet+Rd+Corpus+Christi"
|
||||
className="flex flex-col items-center gap-1 text-sm focus-ring"
|
||||
onClick={() => track(events.OPEN_DIRECTIONS, { provider: 'maps' })}
|
||||
data-cta="open_directions"
|
||||
>
|
||||
🧭 Directions
|
||||
</a>
|
||||
<button
|
||||
className="flex flex-col items-center gap-1 text-sm focus-ring"
|
||||
onClick={scrollToVisitForm}
|
||||
data-cta="plan_visit"
|
||||
>
|
||||
📝 Plan Visit
|
||||
</button>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
export default function SEOHead({
|
||||
title,
|
||||
description,
|
||||
keywords = '',
|
||||
image = '/assets/og-image.jpg',
|
||||
url = '',
|
||||
type = 'website',
|
||||
publishedAt = '',
|
||||
modifiedAt = '',
|
||||
author = 'Annaville Seventh-day Adventist Church'
|
||||
}) {
|
||||
const siteUrl = 'https://annavillesda.org' // Replace with your actual domain
|
||||
const fullUrl = url ? `${siteUrl}${url}` : siteUrl
|
||||
const fullImageUrl = image.startsWith('http') ? image : `${siteUrl}${image}`
|
||||
|
||||
return (
|
||||
<Helmet>
|
||||
{/* Basic Meta Tags */}
|
||||
<title>{title}</title>
|
||||
<meta name="description" content={description} />
|
||||
<meta name="keywords" content={keywords} />
|
||||
<meta name="author" content={author} />
|
||||
|
||||
{/* Open Graph / Facebook */}
|
||||
<meta property="og:type" content={type} />
|
||||
<meta property="og:url" content={fullUrl} />
|
||||
<meta property="og:title" content={title} />
|
||||
<meta property="og:description" content={description} />
|
||||
<meta property="og:image" content={fullImageUrl} />
|
||||
<meta property="og:site_name" content="Annaville Seventh-day Adventist Church" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
|
||||
{/* Twitter */}
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:url" content={fullUrl} />
|
||||
<meta name="twitter:title" content={title} />
|
||||
<meta name="twitter:description" content={description} />
|
||||
<meta name="twitter:image" content={fullImageUrl} />
|
||||
|
||||
{/* Additional Meta Tags */}
|
||||
<meta name="robots" content="index, follow" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="theme-color" content="#7E0F14" />
|
||||
|
||||
{/* Canonical URL */}
|
||||
<link rel="canonical" href={fullUrl} />
|
||||
|
||||
{/* Favicon */}
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
||||
|
||||
{/* Manifest */}
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
|
||||
{/* Article specific meta tags */}
|
||||
{type === 'article' && (
|
||||
<>
|
||||
<meta property="article:published_time" content={publishedAt} />
|
||||
<meta property="article:modified_time" content={modifiedAt} />
|
||||
<meta property="article:author" content={author} />
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Structured Data */}
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": type === 'article' ? 'Article' : 'WebPage',
|
||||
"name": title,
|
||||
"description": description,
|
||||
"url": fullUrl,
|
||||
"image": fullImageUrl,
|
||||
"publisher": {
|
||||
"@type": "Organization",
|
||||
"name": "Annaville Seventh-day Adventist Church",
|
||||
"url": siteUrl,
|
||||
"logo": {
|
||||
"@type": "ImageObject",
|
||||
"url": `${siteUrl}/logo.png`
|
||||
}
|
||||
},
|
||||
"mainEntityOfPage": {
|
||||
"@type": "WebPage",
|
||||
"@id": fullUrl
|
||||
},
|
||||
...(type === 'article' && {
|
||||
"datePublished": publishedAt,
|
||||
"dateModified": modifiedAt,
|
||||
"author": {
|
||||
"@type": "Person",
|
||||
"name": author
|
||||
}
|
||||
})
|
||||
})}
|
||||
</script>
|
||||
</Helmet>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
import React from 'react'
|
||||
import { NavLink } from 'react-router-dom'
|
||||
|
||||
const navItems = [
|
||||
{ to:'/about', label:'ABOUT US' },
|
||||
{ to:'/services', label:'SERVICES' },
|
||||
{ to:'/resources', label:'RESOURCES' },
|
||||
{ to:'/prayer-requests', label:'PRAYER REQUESTS' },
|
||||
{ to:'/calendar', label:'CALENDAR' },
|
||||
{ to:'/beliefs', label:'OUR BELIEFS' },
|
||||
]
|
||||
|
||||
export default function SidebarNav() {
|
||||
return (
|
||||
<div className="bg-yellow-100 p-4 min-h-screen w-64">
|
||||
<nav className="space-y-2">
|
||||
{navItems.map(item => (
|
||||
<NavLink
|
||||
key={item.to}
|
||||
to={item.to}
|
||||
className={({isActive}) => `
|
||||
block w-full text-left px-4 py-3 text-sm font-bold uppercase
|
||||
border border-gray-300 bg-gray-200 hover:bg-gray-300
|
||||
${isActive ? 'bg-gray-400' : ''}
|
||||
`}
|
||||
>
|
||||
{item.label}
|
||||
</NavLink>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div className="mt-6">
|
||||
<button className="w-full px-4 py-2 text-sm font-medium text-red-600 bg-yellow-100 border border-red-600 rounded-full hover:bg-red-50">
|
||||
Subscribe to our Newsletter >>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<a href="#" className="text-blue-600 underline text-sm">Message Center</a>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import React from 'react'
|
||||
import { track, events as ga } from '../utils/analytics'
|
||||
|
||||
export default function StaticMap() {
|
||||
return (
|
||||
<section aria-labelledby="mapTitle">
|
||||
<h2 id="mapTitle" className="sr-only">Location Map</h2>
|
||||
<div className="rounded-xl shadow-card bg-surface p-8 max-w-xl">
|
||||
<iframe
|
||||
title="Google Map"
|
||||
loading="lazy"
|
||||
referrerPolicy="no-referrer-when-downgrade"
|
||||
className="w-full h-[320px] rounded-lg"
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3474.1234567890123!2d-97.3964!3d27.8006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8668516b6c8c8c8c%3A0x8c8c8c8c8c8c8c8c!2s2710%20Violet%20Rd%2C%20Corpus%20Christi%2C%20TX%2078410!5e0!3m2!1sen!2sus!4v1234567890123"
|
||||
/>
|
||||
<div className="mt-8">
|
||||
<a
|
||||
className="btn-outline"
|
||||
href="https://maps.google.com/?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={() => track(ga.CTA_CLICK, { label: 'open_google_maps' })}
|
||||
data-cta="open_google_maps"
|
||||
>
|
||||
Open in Google Maps
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
import React, { useState } from 'react'
|
||||
import { track, events as ga } from '../utils/analytics'
|
||||
import { sendVisitRequest } from '../utils/email'
|
||||
|
||||
export default function VisitForm() {
|
||||
const [errors, setErrors] = useState({})
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [submitStatus, setSubmitStatus] = useState(null)
|
||||
|
||||
const showError = (field, show) => {
|
||||
setErrors(prev => ({
|
||||
...prev,
|
||||
[field]: show
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
setSubmitStatus(null)
|
||||
|
||||
const form = e.target
|
||||
let isValid = true
|
||||
|
||||
// Validate name
|
||||
if (!form.name.value.trim()) {
|
||||
showError('name', true)
|
||||
isValid = false
|
||||
} else {
|
||||
showError('name', false)
|
||||
}
|
||||
|
||||
// Validate email
|
||||
if (!form.email.validity.valid) {
|
||||
showError('email', true)
|
||||
isValid = false
|
||||
} else {
|
||||
showError('email', false)
|
||||
}
|
||||
|
||||
// Validate message
|
||||
if (!form.message.value.trim()) {
|
||||
showError('message', true)
|
||||
isValid = false
|
||||
} else {
|
||||
showError('message', false)
|
||||
}
|
||||
|
||||
if (!isValid) {
|
||||
setIsSubmitting(false)
|
||||
return false
|
||||
}
|
||||
|
||||
// Track form submission
|
||||
track(ga.FORM_SUBMIT, { form_id: 'visit_home' })
|
||||
|
||||
// Prepare form data
|
||||
const formData = {
|
||||
name: form.name.value.trim(),
|
||||
email: form.email.value.trim(),
|
||||
date: form.date.value || null,
|
||||
message: form.message.value.trim(),
|
||||
consent: form.consent.checked
|
||||
}
|
||||
|
||||
try {
|
||||
// Send email
|
||||
const result = await sendVisitRequest(formData)
|
||||
|
||||
if (result.success) {
|
||||
setSubmitStatus('success')
|
||||
form.reset()
|
||||
setErrors({})
|
||||
|
||||
// Show success toast
|
||||
const toast = document.createElement('div')
|
||||
toast.setAttribute('role', 'status')
|
||||
toast.className = 'fixed bottom-6 right-6 bg-green-600 text-white px-4 py-3 rounded-lg shadow z-50'
|
||||
toast.textContent = 'Thanks! We\'ve received your request and will email you soon.'
|
||||
document.body.appendChild(toast)
|
||||
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.parentNode.removeChild(toast)
|
||||
}
|
||||
}, 5000)
|
||||
} else {
|
||||
setSubmitStatus('error')
|
||||
throw new Error(result.message)
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Form submission error:', error)
|
||||
setSubmitStatus('error')
|
||||
|
||||
// Show error toast
|
||||
const toast = document.createElement('div')
|
||||
toast.setAttribute('role', 'status')
|
||||
toast.className = 'fixed bottom-6 right-6 bg-red-600 text-white px-4 py-3 rounded-lg shadow z-50'
|
||||
toast.textContent = 'Sorry, there was an error. Please try again or contact us directly.'
|
||||
document.body.appendChild(toast)
|
||||
|
||||
setTimeout(() => {
|
||||
if (toast.parentNode) {
|
||||
toast.parentNode.removeChild(toast)
|
||||
}
|
||||
}, 5000)
|
||||
} finally {
|
||||
setIsSubmitting(false)
|
||||
}
|
||||
|
||||
return false
|
||||
}
|
||||
|
||||
const handleFocus = () => {
|
||||
// Track form start (only once)
|
||||
if (!window.formStartTracked) {
|
||||
track(ga.FORM_START, { form_id: 'visit_home' })
|
||||
window.formStartTracked = true
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<form
|
||||
id="visit-form"
|
||||
noValidate
|
||||
onSubmit={handleSubmit}
|
||||
aria-describedby="visit-help"
|
||||
onFocus={handleFocus}
|
||||
className="space-y-8"
|
||||
>
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-ink mb-3">
|
||||
Your Name *
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
aria-describedby="name-err"
|
||||
className={`w-full border rounded-lg px-6 py-4 focus:ring-2 focus:ring-focus focus:border-transparent ${
|
||||
errors.name ? 'border-red-500' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="Your Name"
|
||||
/>
|
||||
{errors.name && (
|
||||
<p id="name-err" className="text-red-600 text-sm mt-3">
|
||||
Please enter your name.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-ink mb-3">
|
||||
Your Email *
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
type="email"
|
||||
name="email"
|
||||
required
|
||||
aria-describedby="email-err"
|
||||
className={`w-full border rounded-lg px-6 py-4 focus:ring-2 focus:ring-focus focus:border-transparent ${
|
||||
errors.email ? 'border-red-500' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="Your Email"
|
||||
/>
|
||||
{errors.email && (
|
||||
<p id="email-err" className="text-red-600 text-sm mt-3">
|
||||
Please enter a valid email.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="date" className="block text-sm font-medium text-ink mb-3">
|
||||
Visit Date (optional)
|
||||
</label>
|
||||
<input
|
||||
id="date"
|
||||
type="date"
|
||||
name="date"
|
||||
className="w-full border border-gray-300 rounded-lg px-6 py-4 focus:ring-2 focus:ring-focus focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="msg" className="block text-sm font-medium text-ink mb-3">
|
||||
Your Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="msg"
|
||||
name="message"
|
||||
required
|
||||
aria-describedby="msg-err"
|
||||
rows={6}
|
||||
className={`w-full border rounded-lg px-6 py-4 focus:ring-2 focus:ring-focus focus:border-transparent ${
|
||||
errors.message ? 'border-red-500' : 'border-gray-300'
|
||||
}`}
|
||||
placeholder="Your Message"
|
||||
/>
|
||||
{errors.message && (
|
||||
<p id="msg-err" className="text-red-600 text-sm mt-3">
|
||||
Please add a short message.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4">
|
||||
<input
|
||||
id="consent"
|
||||
type="checkbox"
|
||||
name="consent"
|
||||
className="mt-1 rounded focus:ring-2 focus:ring-focus"
|
||||
/>
|
||||
<label htmlFor="consent" className="text-sm text-ink">
|
||||
I consent to be contacted about my visit.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn w-full"
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? 'Sending...' : 'Submit'}
|
||||
</button>
|
||||
|
||||
{submitStatus === 'error' && (
|
||||
<p className="text-red-600 text-sm">
|
||||
There was an error sending your request. Please try again or contact us directly.
|
||||
</p>
|
||||
)}
|
||||
|
||||
<p id="visit-help" className="text-sm text-muted">
|
||||
We'll email directions and parking info within 24 hours.
|
||||
</p>
|
||||
</form>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
[
|
||||
{
|
||||
"slug": "community-sabbath-lunch",
|
||||
"title": "Community Sabbath Lunch",
|
||||
"date": "2025-09-06",
|
||||
"time": "12:30 PM",
|
||||
"location": "Fellowship Hall",
|
||||
"description": "Join us after worship for a potluck lunch and fellowship."
|
||||
},
|
||||
{
|
||||
"slug": "youth-vespers",
|
||||
"title": "Youth Vespers",
|
||||
"date": "2025-09-13",
|
||||
"time": "6:30 PM",
|
||||
"location": "Sanctuary",
|
||||
"description": "An evening of music, testimonies, and prayer for youth and families."
|
||||
},
|
||||
{
|
||||
"slug": "outreach-food-drive",
|
||||
"title": "Neighborhood Food Drive",
|
||||
"date": "2025-10-04",
|
||||
"time": "2:00 PM",
|
||||
"location": "Parking Lot",
|
||||
"description": "Help us collect non-perishables for local families in need."
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,278 @@
|
|||
[
|
||||
{
|
||||
"slug": "children",
|
||||
"name": "Children's Ministry",
|
||||
"meeting": "Sabbaths 9:30 AM",
|
||||
"leader": "Jane Doe",
|
||||
"category": "Children",
|
||||
"what": "Bible stories, crafts, and songs for kids.",
|
||||
"where": "Room 2",
|
||||
"description": "Our Children's Ministry provides a safe, nurturing environment where children ages 3-12 can learn about Jesus through age-appropriate Bible stories, creative crafts, and joyful worship songs. We believe in making faith fun and accessible for young hearts.",
|
||||
"contact": {
|
||||
"email": "children@annavillesda.org",
|
||||
"phone": "(361) 241-5501 ext. 2"
|
||||
},
|
||||
"image": "/assets/children_ministry_craft.png",
|
||||
"ages": "3-12 years",
|
||||
"activities": [
|
||||
"Interactive Bible stories",
|
||||
"Creative crafts and activities",
|
||||
"Worship songs and music",
|
||||
"Memory verses",
|
||||
"Prayer time",
|
||||
"Special holiday celebrations"
|
||||
],
|
||||
"faq": [
|
||||
{
|
||||
"question": "What ages can participate in Children's Ministry?",
|
||||
"answer": "Our Children's Ministry welcomes children ages 3-12. We have age-appropriate groups: Preschool (3-5), Primary (6-8), and Junior (9-12). Each group has activities tailored to their developmental stage."
|
||||
},
|
||||
{
|
||||
"question": "Do parents need to stay with their children?",
|
||||
"answer": "Parents are welcome to stay, but it's not required. All our teachers are background-checked and trained in child safety. We have a secure check-in system for your peace of mind."
|
||||
},
|
||||
{
|
||||
"question": "What should children bring with them?",
|
||||
"answer": "Just bring a smile! We provide all materials including crafts, snacks, and activity supplies. Children may want to bring a Bible if they have one, but we have plenty available."
|
||||
},
|
||||
{
|
||||
"question": "How can I volunteer to help with Children's Ministry?",
|
||||
"answer": "We always welcome volunteers! Contact our ministry leader to learn about opportunities. We provide training and support for all volunteers."
|
||||
},
|
||||
{
|
||||
"question": "What if my child has special needs?",
|
||||
"answer": "We strive to accommodate all children. Please let us know about any special needs in advance so we can provide appropriate support and ensure your child has a great experience."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "youth",
|
||||
"name": "Youth Ministry",
|
||||
"meeting": "Fridays 6:30 PM",
|
||||
"leader": "John Smith",
|
||||
"category": "Youth",
|
||||
"what": "Vespers, service projects, and small groups.",
|
||||
"where": "Youth Room",
|
||||
"description": "Our Youth Ministry creates a dynamic space for teenagers to grow in their faith, build meaningful relationships, and discover their purpose in Christ. Through worship, Bible study, and service projects, we help youth navigate life's challenges with God's guidance.",
|
||||
"contact": {
|
||||
"email": "youth@annavillesda.org",
|
||||
"phone": "(361) 241-5501 ext. 3"
|
||||
},
|
||||
"image": "/assets/youth_vespers.png",
|
||||
"ages": "13-18 years",
|
||||
"activities": [
|
||||
"Friday night vespers",
|
||||
"Bible study and discussions",
|
||||
"Service projects and outreach",
|
||||
"Worship and music",
|
||||
"Small group fellowship",
|
||||
"Retreats and camps"
|
||||
],
|
||||
"faq": [
|
||||
{
|
||||
"question": "What ages can participate in Youth Ministry?",
|
||||
"answer": "Our Youth Ministry is designed for teenagers ages 13-18. We welcome all youth regardless of their church background or experience level."
|
||||
},
|
||||
{
|
||||
"question": "Do you provide transportation to events?",
|
||||
"answer": "Yes, we can arrange transportation for youth who need a ride to events. Please contact us at least 24 hours in advance so we can coordinate rides."
|
||||
},
|
||||
{
|
||||
"question": "Are there leadership opportunities for youth?",
|
||||
"answer": "Absolutely! We encourage youth to take on leadership roles in planning events, leading worship, organizing service projects, and mentoring younger youth."
|
||||
},
|
||||
{
|
||||
"question": "What if I'm shy or new to the group?",
|
||||
"answer": "No worries! We have a welcoming environment where everyone can participate at their own comfort level. Our leaders and other youth are friendly and inclusive."
|
||||
},
|
||||
{
|
||||
"question": "Do you have overnight events or retreats?",
|
||||
"answer": "Yes! We have several overnight events throughout the year including retreats, camps, and special youth conferences. All events are well-supervised and include proper safety measures."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "adults",
|
||||
"name": "Adult Sabbath School",
|
||||
"meeting": "Sabbaths 9:30 AM",
|
||||
"leader": "Elder Team",
|
||||
"category": "Adults",
|
||||
"what": "Interactive Bible study for adults.",
|
||||
"where": "Classrooms A/B",
|
||||
"description": "Adult Sabbath School offers deep, engaging Bible study in a welcoming community setting. We explore Scripture together, share insights, and grow in our understanding of God's Word through interactive discussions and prayer.",
|
||||
"contact": {
|
||||
"email": "sabbathschool@annavillesda.org",
|
||||
"phone": "(361) 241-5501 ext. 4"
|
||||
},
|
||||
"image": "/assets/speeking.png",
|
||||
"ages": "18+ years",
|
||||
"activities": [
|
||||
"Interactive Bible study",
|
||||
"Group discussions",
|
||||
"Prayer and fellowship",
|
||||
"Quarterly lesson study",
|
||||
"Guest speakers",
|
||||
"Special topic studies"
|
||||
],
|
||||
"faq": [
|
||||
{
|
||||
"question": "Do I need to bring a Bible or study materials?",
|
||||
"answer": "Bibles and study guides are provided, but feel free to bring your own. We follow the Seventh-day Adventist quarterly lesson study, and all materials are available free of charge."
|
||||
},
|
||||
{
|
||||
"question": "Is this only for church members?",
|
||||
"answer": "No, everyone is welcome! Whether you're a long-time member or just exploring faith, you'll find a warm welcome here. We love having visitors join our discussions."
|
||||
},
|
||||
{
|
||||
"question": "What if I'm new to Bible study?",
|
||||
"answer": "Perfect! Our classes are designed to be accessible to everyone, from beginners to those with years of Bible study experience. We encourage questions and discussion."
|
||||
},
|
||||
{
|
||||
"question": "How long do the classes last?",
|
||||
"answer": "Sabbath School typically runs from 9:30 AM to 10:45 AM. We start with opening exercises and then break into smaller discussion groups."
|
||||
},
|
||||
{
|
||||
"question": "Can I join in the middle of a quarter?",
|
||||
"answer": "Absolutely! You can join our Bible study at any time. Each lesson is self-contained, so you won't feel lost if you start mid-quarter."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "women",
|
||||
"name": "Women's Ministry",
|
||||
"meeting": "Monthly",
|
||||
"leader": "Mary Johnson",
|
||||
"category": "Women",
|
||||
"what": "Fellowship and spiritual growth for women.",
|
||||
"where": "Fellowship Hall",
|
||||
"description": "Women's Ministry provides a supportive community where women can grow spiritually, build meaningful friendships, and find encouragement for life's journey. Through Bible study, prayer, and fellowship, we strengthen each other in faith.",
|
||||
"contact": {
|
||||
"email": "women@annavillesda.org",
|
||||
"phone": "(361) 241-5501 ext. 5"
|
||||
},
|
||||
"image": "/assets/welcome_commite.png",
|
||||
"ages": "18+ women",
|
||||
"activities": [
|
||||
"Monthly fellowship meetings",
|
||||
"Bible study groups",
|
||||
"Prayer circles",
|
||||
"Service projects",
|
||||
"Retreats and conferences",
|
||||
"Mentoring programs"
|
||||
],
|
||||
"faq": [
|
||||
{
|
||||
"question": "When do you meet?",
|
||||
"answer": "We meet monthly, usually on the second Sabbath afternoon. Check our church calendar or contact us for specific dates and times."
|
||||
},
|
||||
{
|
||||
"question": "Do I need to be a church member to participate?",
|
||||
"answer": "No, all women are welcome regardless of church membership or background. We're a diverse group with women from various faith backgrounds."
|
||||
},
|
||||
{
|
||||
"question": "What if I can't attend regularly?",
|
||||
"answer": "That's perfectly fine! Come when you can. We understand that life is busy and schedules vary. You're always welcome to join us."
|
||||
},
|
||||
{
|
||||
"question": "What types of activities do you do?",
|
||||
"answer": "We have Bible study groups, prayer circles, service projects, retreats, and fellowship events. We also support each other through life's challenges and celebrations."
|
||||
},
|
||||
{
|
||||
"question": "How can I get involved in leadership?",
|
||||
"answer": "We welcome women who want to take on leadership roles! Contact our ministry leader to learn about opportunities to serve and lead."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "men",
|
||||
"name": "Men's Ministry",
|
||||
"meeting": "Monthly",
|
||||
"leader": "David Lee",
|
||||
"category": "Men",
|
||||
"what": "Prayer breakfast and projects.",
|
||||
"where": "Kitchen & Grounds",
|
||||
"description": "Men's Ministry brings together men of all ages to grow in faith, build brotherhood, and serve our community. Through prayer, Bible study, and hands-on projects, we encourage men to be spiritual leaders in their families and communities.",
|
||||
"contact": {
|
||||
"email": "men@annavillesda.org",
|
||||
"phone": "(361) 241-5501 ext. 6"
|
||||
},
|
||||
"image": "/assets/family_entry.png",
|
||||
"ages": "18+ men",
|
||||
"activities": [
|
||||
"Monthly prayer breakfast",
|
||||
"Bible study and discussion",
|
||||
"Service projects",
|
||||
"Maintenance and grounds work",
|
||||
"Fellowship events",
|
||||
"Mentoring opportunities"
|
||||
],
|
||||
"faq": [
|
||||
{
|
||||
"question": "What kind of projects do you work on?",
|
||||
"answer": "We maintain church grounds, help with building repairs, assist community members in need, and support various church ministries. We also organize service projects and outreach initiatives."
|
||||
},
|
||||
{
|
||||
"question": "Do I need construction or maintenance skills?",
|
||||
"answer": "No special skills required! We welcome men of all skill levels. There's always something you can help with, from simple tasks to more complex projects."
|
||||
},
|
||||
{
|
||||
"question": "When is the prayer breakfast?",
|
||||
"answer": "We meet monthly, usually on the first Sabbath morning at 7:30 AM for breakfast and prayer. Check our calendar for specific dates."
|
||||
},
|
||||
{
|
||||
"question": "How can I get involved if I'm new?",
|
||||
"answer": "Just show up! We're always happy to welcome new men to our group. We'll help you find ways to contribute that match your interests and abilities."
|
||||
},
|
||||
{
|
||||
"question": "Do you have Bible study or spiritual growth activities?",
|
||||
"answer": "Yes! In addition to our service projects, we have Bible study discussions, prayer time, and opportunities for spiritual growth and fellowship."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"slug": "outreach",
|
||||
"name": "Community Outreach",
|
||||
"meeting": "Monthly",
|
||||
"leader": "Team",
|
||||
"category": "Outreach",
|
||||
"what": "Serving our neighborhood through practical help.",
|
||||
"where": "Various",
|
||||
"description": "Community Outreach demonstrates God's love through practical service to our neighbors. We believe in meeting people where they are and showing Christ's compassion through food drives, health screenings, and other community support initiatives.",
|
||||
"contact": {
|
||||
"email": "outreach@annavillesda.org",
|
||||
"phone": "(361) 241-5501 ext. 7"
|
||||
},
|
||||
"image": "/assets/potluck.png",
|
||||
"ages": "All ages welcome",
|
||||
"activities": [
|
||||
"Food drives and distribution",
|
||||
"Health screenings",
|
||||
"Community clean-up projects",
|
||||
"Emergency assistance",
|
||||
"Partnership with local organizations",
|
||||
"Seasonal outreach events"
|
||||
],
|
||||
"faq": [
|
||||
{
|
||||
"question": "How can I get involved in outreach?",
|
||||
"answer": "We welcome volunteers of all ages and abilities! Contact us to learn about current opportunities and upcoming events. We have both one-time and ongoing volunteer positions available."
|
||||
},
|
||||
{
|
||||
"question": "Do you provide emergency assistance?",
|
||||
"answer": "Yes, we work with local agencies to provide emergency food, clothing, and other assistance to families in need. We also offer referrals to other community resources."
|
||||
},
|
||||
{
|
||||
"question": "Can I donate items for outreach?",
|
||||
"answer": "Absolutely! We accept non-perishable food, gently used clothing, hygiene items, and other essentials. Contact us for current needs and donation drop-off times."
|
||||
},
|
||||
{
|
||||
"question": "What types of outreach events do you organize?",
|
||||
"answer": "We organize food drives, health screenings, community clean-up projects, seasonal events, and partnerships with local organizations. We also respond to immediate community needs as they arise."
|
||||
},
|
||||
{
|
||||
"question": "How can my organization partner with you?",
|
||||
"answer": "We love partnering with other organizations! Contact us to discuss potential collaborations and how we can work together to serve our community."
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
[
|
||||
{
|
||||
"slug": "hope-in-the-storm",
|
||||
"title": "Hope in the Storm",
|
||||
"speaker": "Pr. Andrew Kim",
|
||||
"date": "2025-08-16",
|
||||
"series": "Faith & Hope",
|
||||
"thumbnail": "/assets/sermon1.jpg",
|
||||
"summary": "Finding peace in anxious times."
|
||||
},
|
||||
{
|
||||
"slug": "sabbath-rest",
|
||||
"title": "The Gift of Sabbath Rest",
|
||||
"speaker": "Pr. Andrew Kim",
|
||||
"date": "2025-08-09",
|
||||
"series": "Foundations",
|
||||
"thumbnail": "/assets/sermon2.jpg",
|
||||
"summary": "Why rest matters in a restless world."
|
||||
},
|
||||
{
|
||||
"slug": "servant-leadership",
|
||||
"title": "Servant Leadership",
|
||||
"speaker": "Mary Johnson",
|
||||
"date": "2025-08-02",
|
||||
"series": "Discipleship",
|
||||
"thumbnail": "/assets/sermon3.jpg",
|
||||
"summary": "Leading like Jesus in everyday life."
|
||||
}
|
||||
]
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* Local fonts (placeholders) */
|
||||
@font-face { font-family:"Inter"; src:url("/fonts/inter.woff2") format("woff2"); font-weight:400 700; font-display:swap; }
|
||||
@font-face { font-family:"Crimson Text"; src:url("/fonts/crimson-text.woff2") format("woff2"); font-weight:600 700; font-display:swap; }
|
||||
|
||||
/* Global focus ring (critical) */
|
||||
:focus-visible { outline:2px solid #1F6FEB; outline-offset:2px; }
|
||||
.focus-ring { outline:2px solid #1F6FEB; outline-offset:2px; }
|
||||
|
||||
html { scroll-behavior: smooth; }
|
||||
body { @apply font-body; }
|
||||
|
||||
.container { @apply max-w-[1200px] mx-auto px-8; }
|
||||
.section { @apply py-28 md:py-36; }
|
||||
.section-lg { @apply py-36 md:py-44; }
|
||||
.section-sm { @apply py-20 md:py-28; }
|
||||
|
||||
.card { @apply bg-surface rounded-xl shadow-card; }
|
||||
.btn { @apply inline-flex items-center justify-center rounded-lg px-8 py-4 font-medium text-white bg-primary hover:bg-primaryHover focus:outline-none focus-visible:ring-2 focus-visible:ring-focus disabled:opacity-50; }
|
||||
.btn-outline { @apply inline-flex items-center justify-center rounded-lg px-8 py-4 font-medium border border-primary text-primary hover:bg-red-50 focus-visible:ring-2 focus-visible:ring-focus; }
|
||||
.btn-ghost { @apply inline-flex items-center justify-center rounded-lg px-8 py-4 font-medium text-ink hover:bg-sand; }
|
||||
.chip { @apply inline-flex items-center rounded-full px-8 py-4 min-h-[52px] text-sm; }
|
||||
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }
|
||||
|
||||
/* Striped background for classic design */
|
||||
.bg-stripes {
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent,
|
||||
transparent 10px,
|
||||
rgba(255, 255, 255, 0.1) 10px,
|
||||
rgba(255, 255, 255, 0.1) 20px
|
||||
);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
* { animation: none !important; transition: none !important; }
|
||||
}
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
|
||||
import React from 'react'
|
||||
import ReactDOM from 'react-dom/client'
|
||||
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
|
||||
import { HelmetProvider } from 'react-helmet-async'
|
||||
import './index.css'
|
||||
import App from './App'
|
||||
import Home from './pages/Home'
|
||||
import About from './pages/About'
|
||||
import Services from './pages/Services'
|
||||
import Resources from './pages/Resources'
|
||||
import PrayerRequests from './pages/PrayerRequests'
|
||||
import Calendar from './pages/Calendar'
|
||||
import Beliefs from './pages/Beliefs'
|
||||
import Contact from './pages/Contact'
|
||||
import Privacy from './pages/Privacy'
|
||||
import Terms from './pages/Terms'
|
||||
import { initAnalytics } from './utils/analytics'
|
||||
import { initGA, initGTM } from './utils/analytics-config'
|
||||
|
||||
const router = createBrowserRouter([{
|
||||
path: '/',
|
||||
element: <App />,
|
||||
children: [
|
||||
{ index:true, element:<Home/> },
|
||||
{ path:'about', element:<About/> },
|
||||
{ path:'services', element:<Services/> },
|
||||
{ path:'resources', element:<Resources/> },
|
||||
{ path:'prayer-requests', element:<PrayerRequests/> },
|
||||
{ path:'calendar', element:<Calendar/> },
|
||||
{ path:'beliefs', element:<Beliefs/> },
|
||||
{ path:'contact', element:<Contact/> },
|
||||
{ path:'privacy', element:<Privacy/> },
|
||||
{ path:'terms', element:<Terms/> }
|
||||
]
|
||||
}])
|
||||
|
||||
// Initialize analytics after DOM is ready
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
initAnalytics()
|
||||
|
||||
// Initialize Google Analytics and GTM
|
||||
// Uncomment these lines and add your tracking IDs in analytics-config.js
|
||||
// initGA()
|
||||
// initGTM()
|
||||
})
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode>
|
||||
<HelmetProvider>
|
||||
<RouterProvider router={router} />
|
||||
</HelmetProvider>
|
||||
</React.StrictMode>
|
||||
)
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { Link } from 'react-router-dom'
|
||||
import StaticMap from '../components/StaticMap'
|
||||
|
||||
export default function About() {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>About Us - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content="Learn about Annaville SDA Church in Corpus Christi, Texas. Our mission, location, and service times." />
|
||||
</Helmet>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-h1 mb-16">About Us</h1>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-24 items-start">
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-10">Our Mission</h2>
|
||||
<p className="text-body mb-12">
|
||||
To know Jesus, grow in faith, and serve our community.
|
||||
</p>
|
||||
|
||||
<p className="text-body mb-12">
|
||||
We are a welcoming Seventh-day Adventist congregation in Annaville.
|
||||
</p>
|
||||
|
||||
<h3 className="font-heading text-h3 mb-8">Service Times</h3>
|
||||
<div className="space-y-8 mb-12">
|
||||
<div className="p-8 bg-sand rounded-xl">
|
||||
<h4 className="font-semibold text-ink mb-3">Sabbath School</h4>
|
||||
<p className="text-body">Begins at 9:30 a.m. each Saturday</p>
|
||||
</div>
|
||||
<div className="p-8 bg-sand rounded-xl">
|
||||
<h4 className="font-semibold text-ink mb-3">Divine Worship</h4>
|
||||
<p className="text-body">Begins at 11:00 a.m. each Saturday</p>
|
||||
</div>
|
||||
<div className="p-8 bg-sand rounded-xl">
|
||||
<h4 className="font-semibold text-ink mb-3">Potluck Fellowship Dinner</h4>
|
||||
<p className="text-body">Immediately following worship services. Visitors are encouraged to stay and fellowship.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-10">Location</h2>
|
||||
<p className="text-body mb-10">
|
||||
We are located at 2710 Violet Road in Corpus Christi, Texas.
|
||||
</p>
|
||||
<p className="text-body mb-12">
|
||||
Click on the link below to see a map to our church location.
|
||||
</p>
|
||||
|
||||
<div className="space-y-8 mb-12">
|
||||
<a
|
||||
href="https://maps.google.com/?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn-outline block text-center"
|
||||
>
|
||||
View Map of 2710 Violet Rd, Corpus Christi, TX 78410
|
||||
</a>
|
||||
<a
|
||||
href="https://maps.google.com/directions?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="btn-outline block text-center"
|
||||
>
|
||||
Get Driving Directions
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<StaticMap />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
export default function Beliefs() {
|
||||
const beliefs = [
|
||||
{
|
||||
id: 1,
|
||||
title: "The Holy Scriptures",
|
||||
category: "foundation",
|
||||
summary: "The Holy Scriptures, Old and New Testaments, are the written Word of God, given by divine inspiration through holy men of God who spoke and wrote as they were moved by the Holy Spirit.",
|
||||
fullText: "The Holy Scriptures, Old and New Testaments, are the written Word of God, given by divine inspiration through holy men of God who spoke and wrote as they were moved by the Holy Spirit. In this Word, God has committed to man the knowledge necessary for salvation. The Holy Scriptures are the infallible revelation of His will. They are the standard of character, the test of experience, the authoritative revealer of doctrines, and the trustworthy record of God's acts in history.",
|
||||
references: "2 Peter 1:20, 21; 2 Tim. 3:16, 17; Ps. 119:105; Prov. 30:5, 6; Isa. 8:20; John 17:17; 1 Thess. 2:13; Heb. 4:12."
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "The Trinity",
|
||||
category: "foundation",
|
||||
summary: "There is one God: Father, Son, and Holy Spirit, a unity of three co-eternal Persons.",
|
||||
fullText: "There is one God: Father, Son, and Holy Spirit, a unity of three co-eternal Persons. God is immortal, all-powerful, all-knowing, above all, and ever present. He is infinite and beyond human comprehension, yet known through His self-revelation. He is forever worthy of worship, adoration, and service by the whole creation.",
|
||||
references: "Deut. 6:4; Matt. 28:19; 2 Cor. 13:14; Eph. 4:4-6; 1 Peter 1:2; 1 Tim. 1:17; Rev. 14:7."
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "The Father",
|
||||
category: "foundation",
|
||||
summary: "God the eternal Father is the Creator, Source, Sustainer, and Sovereign of all creation.",
|
||||
fullText: "God the eternal Father is the Creator, Source, Sustainer, and Sovereign of all creation. He is just and holy, merciful and gracious, slow to anger, and abounding in steadfast love and faithfulness. The qualities and powers exhibited in the Son and the Holy Spirit are also revelations of the Father.",
|
||||
references: "Gen. 1:1; Rev. 4:11; 1 Cor. 15:28; John 3:16; 1 John 4:8; 1 Tim. 1:17; Ex. 34:6, 7; John 14:9."
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
title: "The Son",
|
||||
category: "foundation",
|
||||
summary: "God the eternal Son became incarnate in Jesus Christ.",
|
||||
fullText: "God the eternal Son became incarnate in Jesus Christ. Through Him all things were created, the character of God is revealed, the salvation of humanity is accomplished, and the world is judged. Forever truly God, He became also truly man, Jesus the Christ. He was conceived of the Holy Spirit and born of the virgin Mary. He lived and experienced temptation as a human being, but perfectly exemplified the righteousness and love of God. By His miracles He manifested God's power and was attested as God's promised Messiah. He suffered and died voluntarily on the cross for our sins and in our place, was raised from the dead, and ascended to minister in the heavenly sanctuary in our behalf. He will come again in glory for the final deliverance of His people and the restoration of all things.",
|
||||
references: "John 1:1-3, 14; Col. 1:15-19; John 10:30; 14:9; Rom. 6:23; 2 Cor. 5:17-19; John 5:22; Luke 1:35; Phil. 2:5-11; Heb. 2:9-18; 1 Cor. 15:3, 4; Heb. 8:1, 2; John 14:1-3."
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
title: "The Holy Spirit",
|
||||
category: "foundation",
|
||||
summary: "God the eternal Spirit was active with the Father and the Son in Creation, incarnation, and redemption.",
|
||||
fullText: "God the eternal Spirit was active with the Father and the Son in Creation, incarnation, and redemption. He inspired the writers of Scripture. He filled Christ's life with power. He draws and convicts human beings; and those who respond He renews and transforms into the image of God. Sent by the Father and the Son to be always with His children, He extends spiritual gifts to the church, empowers it to bear witness to Christ, and in harmony with the Scriptures leads it into all truth.",
|
||||
references: "Gen. 1:1, 2; Luke 1:35; 4:18; Acts 10:38; 2 Peter 1:21; 2 Cor. 3:18; Eph. 4:11, 12; Acts 1:8; John 14:16-18, 26; 15:26, 27; 16:7-13."
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
title: "Creation",
|
||||
category: "foundation",
|
||||
summary: "God is Creator of all things, and has revealed in Scripture the authentic account of His creative activity.",
|
||||
fullText: "God is Creator of all things, and has revealed in Scripture the authentic account of His creative activity. In six days the Lord made \"the heaven and the earth\" and all living things upon the earth, and rested on the seventh day of that first week. Thus He established the Sabbath as a perpetual memorial of His completed creative work. The first man and woman were made in the image of God as the crowning work of Creation, given dominion over the world, and charged with responsibility to care for it. When the world was finished it was ``very good,'' declaring the glory of God.",
|
||||
references: "Gen. 1; 2; Ex. 20:8-11; Ps. 19:1-6; 33:6, 9; 104; Heb. 11:3."
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
title: "The Nature of Man",
|
||||
category: "humanity",
|
||||
summary: "Man and woman were made in the image of God with individuality, the power and freedom to think and to do.",
|
||||
fullText: "Man and woman were made in the image of God with individuality, the power and freedom to think and to do. Though created free beings, each is an indivisible unity of body, mind, and spirit, dependent upon God for life and breath and all else. When our first parents disobeyed God, they denied their dependence upon Him and fell from their high position under God. The image of God in them was marred and they became subject to death. Their descendants share this fallen nature and its consequences. They are born with weaknesses and tendencies to evil. But God in Christ reconciled the world to Himself and by His Spirit restores in penitent mortals the image of their Maker. Created for the glory of God, they are called to love Him and one another, and to care for their environment.",
|
||||
references: "Gen. 1:26-28; 2:7; Ps. 8:4-8; Acts 17:24-28; Gen. 3; Ps. 51:5; Rom. 5:12-17; 2 Cor. 5:19, 20; Ps. 51:10; 1 John 4:7, 8, 11, 20; Gen. 2:15."
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
title: "The Great Controversy",
|
||||
category: "salvation",
|
||||
summary: "All humanity is now involved in a great controversy between Christ and Satan regarding the character of God, His law, and His sovereignty over the universe.",
|
||||
fullText: "All humanity is now involved in a great controversy between Christ and Satan regarding the character of God, His law, and His sovereignty over the universe. This conflict originated in heaven when a created being, endowed with freedom of choice, in self-exaltation became Satan, God's adversary, and led into rebellion a portion of the angels. He introduced the spirit of rebellion into this world when he led Adam and Eve into sin. This human sin resulted in the distortion of the image of God in humanity, the disordering of the created world, and its eventual devastation at the time of the worldwide flood. Observed by the whole creation, this world became the arena of the universal conflict, out of which the God of love will ultimately be vindicated. To assist His people in this controversy, Christ sends the Holy Spirit and the loyal angels to guide, protect, and sustain them in the way of salvation.",
|
||||
references: "Rev. 12:4-9; Isa. 14:12-14; Eze. 28:12-18; Gen. 3; Rom. 1:19-32; 5:12-21; 8:19-22; Gen. 6-8; 2 Peter 3:6; 1 Cor. 4:9; Heb. 1:14."
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
title: "The Life, Death, and Resurrection of Christ",
|
||||
category: "salvation",
|
||||
summary: "In Christ's life of perfect obedience to God's will, His suffering, death, and resurrection, God provided the only means of atonement for human sin.",
|
||||
fullText: "In Christ's life of perfect obedience to God's will, His suffering, death, and resurrection, God provided the only means of atonement for human sin, so that those who by faith accept this atonement may have eternal life, and the whole creation may better understand the infinite and holy love of the Creator. This perfect atonement vindicates the righteousness of God's law and the graciousness of His character; for it both condemns our sin and provides for our forgiveness. The death of Christ is substitutionary and expiatory, reconciling and transforming. The resurrection of Christ proclaims God's triumph over the forces of evil, and for those who accept the atonement assures their final victory over sin and death. It declares the Lordship of Jesus Christ, before whom every knee in heaven and on earth will bow.",
|
||||
references: "John 3:16; Isa. 53; 1 Peter 2:21, 22; 1 Cor. 15:3, 4, 20-22; 2 Cor. 5:14, 15, 19-21; Rom. 1:4; 3:25; 4:25; 8:3, 4; 1 John 2:2; 4:10; Col. 2:15; Phil. 2:6-11."
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
title: "The Experience of Salvation",
|
||||
category: "salvation",
|
||||
summary: "In infinite love and mercy God made Christ, who knew no sin, to be sin for us, so that in Him we might be made the righteousness of God.",
|
||||
fullText: "In infinite love and mercy God made Christ, who knew no sin, to be sin for us, so that in Him we might be made the righteousness of God. Led by the Holy Spirit we sense our need, acknowledge our sinfulness, repent of our transgressions, and exercise faith in Jesus as Lord and Christ, as Substitute and Example. This faith which receives salvation comes through the divine power of the Word and is the gift of God's grace. Through Christ we are justified, adopted as God's sons and daughters, and delivered from the lordship of sin. Through the Spirit we are born again and sanctified; the Spirit renews our minds, writes God's law of love in our hearts, and we are given the power to live a holy life. Abiding in Him we become partakers of the divine nature and have the assurance of salvation now and in the judgment.",
|
||||
references: "2 Cor. 5:17-21; John 3:16; Gal. 1:4; 4:4-7; Titus 3:3-7; John 16:8; Gal. 3:13, 14; 1 Peter 2:21, 22; Rom. 10:17; Luke 17:5; Mark 9:23, 24; Eph. 2:5-10; Rom. 3:21-26; Col. 1:13, 14; Rom. 8:14-17; Gal. 3:26; John 3:3-8; 1 Peter 1:23; Rom. 12:2; Heb. 8:7-12; Eze. 36:25-27; 2 Peter 1:3, 4; Rom. 8:1-4; 5:6-10."
|
||||
},
|
||||
{
|
||||
id: 11,
|
||||
title: "The Church",
|
||||
category: "church",
|
||||
summary: "The church is the community of believers who confess Jesus Christ as Lord and Saviour.",
|
||||
fullText: "The church is the community of believers who confess Jesus Christ as Lord and Saviour. In continuity with the people of God in Old Testament times, we are called out from the world; and we join together for worship, for fellowship, for instruction in the Word, for the celebration of the Lord's Supper, for service to all mankind, and for the worldwide proclamation of the gospel. The church derives its authority from Christ, who is the incarnate Word, and from the Scriptures, which are the written Word. The church is God's family; adopted by Him as children, its members live on the basis of the new covenant. The church is the body of Christ, a community of faith of which Christ Himself is the Head. The church is the bride for whom Christ died that He might sanctify and cleanse her. At His return in triumph, He will present her to Himself a glorious church, the faithful of all the ages, the purchase of His blood, not having spot or wrinkle, but holy and without blemish.",
|
||||
references: "Gen. 12:3; Acts 7:38; Eph. 4:11-15; 3:8-11; Matt. 28:19, 20; 16:13-20; 18:18; Eph. 2:19-22; 1:22, 23; 5:23-27; Col. 1:17, 18."
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
title: "The Remnant and Its Mission",
|
||||
category: "church",
|
||||
summary: "The universal church is composed of all who truly believe in Christ, but in the last days, a time of widespread apostasy, a remnant has been called out.",
|
||||
fullText: "The universal church is composed of all who truly believe in Christ, but in the last days, a time of widespread apostasy, a remnant has been called out to keep the commandments of God and the faith of Jesus. This remnant announces the arrival of the judgment hour, proclaims salvation through Christ, and heralds the approach of His second advent. This proclamation is symbolized by the three angels of Revelation 14; it coincides with the work of judgment in heaven and results in a work of repentance and reform on earth. Every believer is called to have a personal part in this worldwide witness.",
|
||||
references: "Rev. 12:17; 14:6-12; 18:1-4; 2 Cor. 5:10; Jude 3, 14; 1 Peter 1:16-19; 2 Peter 3:10-14; Rev. 21:1-14."
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
title: "Unity in the Body of Christ",
|
||||
category: "church",
|
||||
summary: "The church is one body with many members, called from every nation, kindred, tongue, and people.",
|
||||
fullText: "The church is one body with many members, called from every nation, kindred, tongue, and people. In Christ we are a new creation; distinctions of race, culture, learning, and nationality, and differences between high and low, rich and poor, male and female, must not be divisive among us. We are all equal in Christ, who by one Spirit has bonded us into one fellowship with Him and with one another; we are to serve and be served without partiality or reservation. Through the revelation of Jesus Christ in the Scriptures we share the same faith and hope, and reach out in one witness to all. This unity has its source in the oneness of the triune God, who has adopted us as His children.",
|
||||
references: "Rom. 12:4, 5; 1 Cor. 12:12-14; Matt. 28:19, 20; Ps. 133:1; 2 Cor. 5:16, 17; Acts 17:26, 27; Gal. 3:27, 29; Col. 3:10-15; Eph. 4:14-16; 4:1-6; John 17:20-23."
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
title: "Baptism",
|
||||
category: "ordinances",
|
||||
summary: "By baptism we confess our faith in the death and resurrection of Jesus Christ, and testify of our death to sin and of our purpose to walk in newness of life.",
|
||||
fullText: "By baptism we confess our faith in the death and resurrection of Jesus Christ, and testify of our death to sin and of our purpose to walk in newness of life. Thus we acknowledge Christ as Lord and Saviour, become His people, and are received as members by His church. Baptism is a symbol of our union with Christ, the forgiveness of our sins, and our reception of the Holy Spirit. It is by immersion in water and is contingent on an affirmation of faith in Jesus and evidence of repentance of sin. It follows instruction in the Holy Scriptures and acceptance of their teachings.",
|
||||
references: "Rom. 6:1-6; Col. 2:12, 13; Acts 16:30-33; 22:16; 2:38; Matt. 28:19, 20."
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
title: "The Lord's Supper",
|
||||
category: "ordinances",
|
||||
summary: "The Lord's Supper is a participation in the emblems of the body and blood of Jesus as an expression of faith in Him, our Lord and Saviour.",
|
||||
fullText: "The Lord's Supper is a participation in the emblems of the body and blood of Jesus as an expression of faith in Him, our Lord and Saviour. In this experience of communion Christ is present to meet and strengthen His people. As we partake, we joyfully proclaim the Lord's death until He comes again. Preparation for the Supper includes self-examination, repentance, and confession. The Master ordained the service of foot washing to signify renewed cleansing, to express a willingness to serve one another in Christlike humility, and to unite our hearts in love. The communion service is open to all believing Christians.",
|
||||
references: "1 Cor. 10:16, 17; 11:23-30; Matt. 26:17-30; Rev. 3:20; John 6:48-63; 13:1-17."
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
title: "Spiritual Gifts and Ministries",
|
||||
category: "church",
|
||||
summary: "God bestows upon all members of His church in every age spiritual gifts which each member is to employ in loving ministry for the common good of the church and of humanity.",
|
||||
fullText: "God bestows upon all members of His church in every age spiritual gifts which each member is to employ in loving ministry for the common good of the church and of humanity. Given by the agency of the Holy Spirit, who apportions to each member as He wills, the gifts provide all abilities and ministries needed by the church to fulfill its divinely ordained functions. According to the Scriptures, these gifts include such ministries as faith, healing, prophecy, proclamation, teaching, administration, reconciliation, compassion, and self-sacrificing service and charity for the help and encouragement of people. Some members are called of God and endowed by the Spirit for functions recognized by the church in pastoral, evangelistic, apostolic, and teaching ministries particularly needed to equip the members for service, to build up the church to spiritual maturity, and to foster unity of the faith and knowledge of God. When members employ these spiritual gifts as faithful stewards of God's varied grace, the church is protected from the destructive influence of false doctrine, grows with a growth that is from God, and is built up in faith and love.",
|
||||
references: "Rom. 12:4-8; 1 Cor. 12:9-11, 27, 28; Eph. 4:8, 11-16; Acts 6:1-7; 1 Tim. 3:1-13; 1 Peter 4:10, 11."
|
||||
},
|
||||
{
|
||||
id: 17,
|
||||
title: "The Gift of Prophecy",
|
||||
category: "church",
|
||||
summary: "One of the gifts of the Holy Spirit is prophecy. This gift is an identifying mark of the remnant church and was manifested in the ministry of Ellen G. White.",
|
||||
fullText: "One of the gifts of the Holy Spirit is prophecy. This gift is an identifying mark of the remnant church and was manifested in the ministry of Ellen G. White. As the Lord's messenger, her writings are a continuing and authoritative source of truth which provide for the church comfort, guidance, instruction, and correction. They also make clear that the Bible is the standard by which all teaching and experience must be tested.",
|
||||
references: "Joel 2:28, 29; Acts 2:14-21; Heb. 1:1-3; Rev. 12:17; 19:10."
|
||||
},
|
||||
{
|
||||
id: 18,
|
||||
title: "The Law of God",
|
||||
category: "lifestyle",
|
||||
summary: "The great principles of God's law are embodied in the Ten Commandments and exemplified in the life of Christ.",
|
||||
fullText: "The great principles of God's law are embodied in the Ten Commandments and exemplified in the life of Christ. They express God's love, will, and purposes concerning human conduct and relationships and are binding upon all people in every age. These precepts are the basis of God's covenant with His people and the standard in God's judgment. Through the agency of the Holy Spirit they point out sin and awaken a sense of need for a Saviour. Salvation is all of grace and not of works, but its fruitage is obedience to the Commandments. This obedience develops Christian character and results in a sense of well-being. It is an evidence of our love for the Lord and our concern for our fellow men. The obedience of faith demonstrates the power of Christ to transform lives, and therefore strengthens Christian witness.",
|
||||
references: "Ex. 20:1-17; Ps. 40:7, 8; Matt. 22:36-40; Deut. 28:1-14; Matt. 5:17-20; Heb. 8:8-10; John 15:7-10; Eph. 2:8-10; 1 John 5:3; Rom. 8:3, 4; Ps. 19:7-14."
|
||||
},
|
||||
{
|
||||
id: 19,
|
||||
title: "The Sabbath",
|
||||
category: "lifestyle",
|
||||
summary: "The beneficent Creator, after the six days of Creation, rested on the seventh day and instituted the Sabbath for all people as a memorial of Creation.",
|
||||
fullText: "The beneficent Creator, after the six days of Creation, rested on the seventh day and instituted the Sabbath for all people as a memorial of Creation. The fourth commandment of God's unchangeable law requires the observance of this seventh-day Sabbath as the day of rest, worship, and ministry in harmony with the teaching and practice of Jesus, the Lord of the Sabbath. The Sabbath is a day of delightful communion with God and one another. It is a symbol of our redemption in Christ, a sign of our sanctification, a token of our allegiance, and a foretaste of our eternal future in God's kingdom. The Sabbath is God's perpetual sign of His eternal covenant between Him and His people. Joyful observance of this holy time from evening to evening, sunset to sunset, is a celebration of God's creative and redemptive acts.",
|
||||
references: "Gen. 2:1-3; Ex. 20:8-11; Luke 4:16; Isa. 56:5, 6; 58:13, 14; Matt. 12:1-12; Ex. 31:13-17; Eze. 20:12, 20; Deut. 5:12-15; Heb. 4:1-11; Lev. 23:32; Mark 1:32."
|
||||
},
|
||||
{
|
||||
id: 20,
|
||||
title: "Stewardship",
|
||||
category: "lifestyle",
|
||||
summary: "We are God's stewards, entrusted by Him with time and opportunities, abilities and possessions, and the blessings of the earth and its resources.",
|
||||
fullText: "We are God's stewards, entrusted by Him with time and opportunities, abilities and possessions, and the blessings of the earth and its resources. We are responsible to Him for their proper use. We acknowledge God's ownership by faithful service to Him and our fellow men, and by returning tithes and giving offerings for the proclamation of His gospel and the support and growth of His church. Stewardship is a privilege given to us by God for nurture in love and the victory over selfishness and covetousness. The steward rejoices in the blessings that come to others as a result of his faithfulness.",
|
||||
references: "Gen. 1:26-28; 2:15; 1 Chron. 29:14; Haggai 1:3-11; Mal. 3:8-12; 1 Cor. 9:9-14; Matt. 23:23; 2 Cor. 8:1-15; Rom. 15:26, 27."
|
||||
},
|
||||
{
|
||||
id: 21,
|
||||
title: "Christian Behavior",
|
||||
category: "lifestyle",
|
||||
summary: "We are called to be a godly people who think, feel, and act in harmony with the principles of heaven.",
|
||||
fullText: "We are called to be a godly people who think, feel, and act in harmony with the principles of heaven. For the Spirit to recreate in us the character of our Lord we involve ourselves only in those things which will produce Christlike purity, health, and joy in our lives. This means that our amusement and entertainment should meet the highest standards of Christian taste and beauty. While recognizing cultural differences, our dress is to be simple, modest, and neat, befitting those whose true beauty does not consist of outward adornment but in the imperishable ornament of a gentle and quiet spirit. It also means that because our bodies are the temples of the Holy Spirit, we are to care for them intelligently. Along with adequate exercise and rest, we are to adopt the most healthful diet possible and abstain from the unclean foods identified in the Scriptures. Since alcoholic beverages, tobacco, and the irresponsible use of drugs and narcotics are harmful to our bodies, we are to abstain from them as well. Instead, we are to engage in whatever brings our thoughts and bodies into the discipline of Christ, who desires our wholesomeness, joy, and goodness.",
|
||||
references: "Rom. 12:1, 2; 1 John 2:6; Eph. 5:1-21; Phil. 4:8; 2 Cor. 10:5; 6:14-7:1; 1 Peter 3:1-4; 1 Cor. 6:19, 20; 10:31; Lev. 11:1-47; 3 John 2."
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
title: "Marriage and the Family",
|
||||
category: "lifestyle",
|
||||
summary: "Marriage was divinely established in Eden and affirmed by Jesus to be a lifelong union between a man and a woman in loving companionship.",
|
||||
fullText: "Marriage was divinely established in Eden and affirmed by Jesus to be a lifelong union between a man and a woman in loving companionship. For the Christian a marriage commitment is to God as well as to the spouse, and should be entered into only between partners who share a common faith. Mutual love, honor, respect, and responsibility are the fabric of this relationship, which is to reflect the love, sanctity, closeness, and permanence of the relationship between Christ and His church. Regarding divorce, Jesus taught that the person who divorces a spouse, except for fornication, and marries another, commits adultery. Although some family relationships may fall short of the ideal, marriage partners who fully commit themselves to each other in Christ may achieve loving unity through the guidance of the Spirit and the nurture of the church. God blesses the family and intends that its members shall assist each other toward complete maturity. Parents are to bring up their children to love and obey the Lord. By their example and their words they are to teach them that Christ is a loving disciplinarian, ever tender and caring, who wants them to become members of His body, the family of God. Increasing family closeness is one of the earmarks of the final gospel message.",
|
||||
references: "Gen. 2:18-25; Matt. 19:3-9; John 2:1-11; 2 Cor. 6:14; Eph. 5:21-33; Matt. 5:31, 32; Mark 10:11, 12; Luke 16:18; 1 Cor. 7:10, 11; Ex. 20:12; Eph. 6:1-4; Deut. 6:5-9; Prov. 22:6; Mal. 4:5, 6."
|
||||
},
|
||||
{
|
||||
id: 23,
|
||||
title: "Christ's Ministry in the Heavenly Sanctuary",
|
||||
category: "eschatology",
|
||||
summary: "There is a sanctuary in heaven, the true tabernacle which the Lord set up and not man. In it Christ ministers on our behalf.",
|
||||
fullText: "There is a sanctuary in heaven, the true tabernacle which the Lord set up and not man. In it Christ ministers on our behalf, making available to believers the benefits of His atoning sacrifice offered once for all on the cross. He was inaugurated as our great High Priest and began His intercessory ministry at the time of His ascension. In 1844, at the end of the prophetic period of 2300 days, He entered the second and last phase of His atoning ministry. It is a work of investigative judgment which is part of the ultimate disposition of all sin, typified by the cleansing of the ancient Hebrew sanctuary on the Day of Atonement. In that typical service the sanctuary was cleansed with the blood of animal sacrifices, but the heavenly things are purified with the perfect sacrifice of the blood of Jesus. The investigative judgment reveals to heavenly intelligences who among the dead are asleep in Christ and therefore, in Him, are deemed worthy to have part in the first resurrection. It also makes manifest who among the living are abiding in Christ, keeping the commandments of God and the faith of Jesus, and in Him, therefore, are ready for translation into His everlasting kingdom. This judgment vindicates the justice of God in saving those who believe in Jesus. It declares that those who have remained loyal to God shall receive the kingdom. The completion of this ministry of Christ will mark the close of human probation before the Second Advent.",
|
||||
references: "Heb. 8:1-5; 4:14-16; 9:11-28; 10:19-22; 1:3; 2:16, 17; Dan. 7:9-27; 8:13, 14; 9:24-27; Num. 14:34; Eze. 4:6; Lev. 16; Rev. 14:6, 7; 20:12; 14:12; 22:12."
|
||||
},
|
||||
{
|
||||
id: 24,
|
||||
title: "The Second Coming of Christ",
|
||||
category: "eschatology",
|
||||
summary: "The second coming of Christ is the blessed hope of the church, the grand climax of the gospel.",
|
||||
fullText: "The second coming of Christ is the blessed hope of the church, the grand climax of the gospel. The Saviour's coming will be literal, personal, visible, and worldwide. When He returns, the righteous dead will be resurrected, and together with the righteous living will be glorified and taken to heaven, but the unrighteous will die. The almost complete fulfillment of most lines of prophecy, together with the present condition of the world, indicates that Christ's coming is imminent. The time of that event has not been revealed, and we are therefore exhorted to be ready at all times.",
|
||||
references: "Titus 2:13; Heb. 9:28; John 14:1-3; Acts 1:9-11; Matt. 24:14; Rev. 1:7; Matt. 24:43, 44; 1 Thess. 4:13-18; 1 Cor. 15:51-54; 2 Thess. 1:7-10; 2:8; Rev. 14:14-20; 19:11-21; Matt. 24; Mark 13; Luke 21; 2 Tim. 3:1-5; 1 Thess. 5:1-6."
|
||||
},
|
||||
{
|
||||
id: 25,
|
||||
title: "Death and Resurrection",
|
||||
category: "eschatology",
|
||||
summary: "The wages of sin is death. But God, who alone is immortal, will grant eternal life to His redeemed.",
|
||||
fullText: "The wages of sin is death. But God, who alone is immortal, will grant eternal life to His redeemed. Until that day death is an unconscious state for all people. When Christ, who is our life, appears, the resurrected righteous and the living righteous will be glorified and caught up to meet their Lord. The second resurrection, the resurrection of the unrighteous, will take place a thousand years later.",
|
||||
references: "Rom. 6:23; 1 Tim. 6:15, 16; Eccl. 9:5, 6; Ps. 146:3, 4; John 11:11-14; Col. 3:4; 1 Cor. 15:51-54; 1 Thess. 4:13-17; John 5:28, 29; Rev. 20:1-10."
|
||||
},
|
||||
{
|
||||
id: 26,
|
||||
title: "The Millennium and the End of Sin",
|
||||
category: "eschatology",
|
||||
summary: "The millennium is the thousand-year reign of Christ with His saints in heaven between the first and second resurrections.",
|
||||
fullText: "The millennium is the thousand-year reign of Christ with His saints in heaven between the first and second resurrections. During this time the wicked dead will be judged; the earth will be utterly desolate, without living human inhabitants, but occupied by Satan and his angels. At its close Christ with His saints and the Holy City will descend from heaven to earth. The unrighteous dead will then be resurrected, and with Satan and his angels will surround the city; but fire from God will consume them and cleanse the earth. The universe will thus be freed of sin and sinners forever.",
|
||||
references: "Rev. 20; 1 Cor. 6:2, 3; Jer. 4:23-26; Rev. 21:1-5; Mal. 4:1; Eze. 28:18, 19."
|
||||
},
|
||||
{
|
||||
id: 27,
|
||||
title: "The New Earth",
|
||||
category: "eschatology",
|
||||
summary: "On the new earth, in which righteousness dwells, God will provide an eternal home for the redeemed and a perfect environment for everlasting life, love, joy, and learning in His presence.",
|
||||
fullText: "On the new earth, in which righteousness dwells, God will provide an eternal home for the redeemed and a perfect environment for everlasting life, love, joy, and learning in His presence. For here God Himself will dwell with His people, and suffering and death will have passed away. The great controversy will be ended, and sin will be no more. All things, animate and inanimate, will declare that God is love; and He shall reign forever. Amen.",
|
||||
references: "2 Peter 3:13; Isa. 35; 65:17-25; Matt. 5:5; Rev. 21:1-7; 22:1-5; 11:15."
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Our Beliefs - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content="Explore the 27 Fundamental Beliefs of the Seventh-day Adventist Church. Learn about our foundational doctrines, salvation, church life, and end-time teachings." />
|
||||
<meta name="keywords" content="Seventh-day Adventist beliefs, fundamental beliefs, SDA doctrine, Adventist theology, church beliefs" />
|
||||
</Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-primary to-primaryDeep text-white py-20">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="font-heading text-h1 mb-6">Our Beliefs</h1>
|
||||
<p className="text-xl text-white/90 leading-relaxed">
|
||||
The 27 Fundamental Beliefs of the Seventh-day Adventist Church form the foundation
|
||||
of our faith and guide our understanding of God's Word and His plan for humanity.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Beliefs Grid */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="grid gap-8">
|
||||
{beliefs.map((belief) => (
|
||||
<div key={belief.id} className="bg-white rounded-xl shadow-sm border border-subtle p-8">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className="flex-shrink-0 w-12 h-12 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||
<span className="text-primary font-bold text-lg">{belief.id}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-heading text-h3 text-ink mb-4">{belief.title}</h3>
|
||||
<p className="text-body text-muted leading-relaxed mb-6">
|
||||
{belief.fullText}
|
||||
</p>
|
||||
<div className="bg-sand rounded-lg p-4">
|
||||
<h4 className="font-semibold text-ink mb-2">Biblical References:</h4>
|
||||
<p className="text-sm text-muted font-mono">{belief.references}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import React from 'react'
|
||||
import SEOHead from '../components/SEOHead'
|
||||
|
||||
export default function Calendar() {
|
||||
return (
|
||||
<>
|
||||
<SEOHead
|
||||
title="Calendar - Annaville Seventh-day Adventist Church"
|
||||
description="Church events and calendar"
|
||||
/>
|
||||
|
||||
<div className="max-w-4xl">
|
||||
<h1 className="text-3xl font-bold text-blue-600 mb-6 flex items-center">
|
||||
Church Events
|
||||
<div className="ml-4 flex space-x-1">
|
||||
<div className="w-2 h-2 bg-blue-400"></div>
|
||||
<div className="w-2 h-2 bg-blue-400"></div>
|
||||
<div className="w-2 h-2 bg-blue-400"></div>
|
||||
<div className="w-2 h-2 bg-blue-400"></div>
|
||||
<div className="w-2 h-2 bg-blue-400"></div>
|
||||
</div>
|
||||
</h1>
|
||||
|
||||
<h2 className="text-xl font-semibold text-red-600 mb-6">
|
||||
Upcoming events:
|
||||
</h2>
|
||||
|
||||
<div className="bg-gray-50 p-8 rounded-lg border border-gray-200">
|
||||
<p className="text-gray-600 text-center">
|
||||
No upcoming events at this time. Please check back later for updates.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,457 @@
|
|||
|
||||
import React, { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
export default function Contact() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
department: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
preferredContact: 'email'
|
||||
})
|
||||
|
||||
const [isSubmitting, setIsSubmitting] = useState(false)
|
||||
const [submitStatus, setSubmitStatus] = useState(null)
|
||||
|
||||
const departments = [
|
||||
{ value: '', label: 'Select a Department' },
|
||||
{ value: 'general', label: 'General Information', email: 'info@annavillesda.org' },
|
||||
{ value: 'pastor', label: 'Pastoral Care', email: 'pastor@annavillesda.org' },
|
||||
{ value: 'youth', label: 'Youth Ministry', email: 'youth@annavillesda.org' },
|
||||
{ value: 'children', label: 'Children\'s Ministry', email: 'children@annavillesda.org' },
|
||||
{ value: 'outreach', label: 'Community Outreach', email: 'outreach@annavillesda.org' },
|
||||
{ value: 'treasurer', label: 'Financial/Treasurer', email: 'treasurer@annavillesda.org' },
|
||||
{ value: 'events', label: 'Events & Activities', email: 'events@annavillesda.org' },
|
||||
{ value: 'prayer', label: 'Prayer Requests', email: 'prayer@annavillesda.org' }
|
||||
]
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value } = e.target
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault()
|
||||
setIsSubmitting(true)
|
||||
|
||||
// Simulate form submission
|
||||
setTimeout(() => {
|
||||
setIsSubmitting(false)
|
||||
setSubmitStatus('success')
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
department: '',
|
||||
subject: '',
|
||||
message: '',
|
||||
preferredContact: 'email'
|
||||
})
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
const selectedDepartment = departments.find(dept => dept.value === formData.department)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Contact Us - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content="Contact Annaville SDA Church in Corpus Christi, TX. Get in touch with our pastoral team, ministries, or general inquiries. We're here to help!" />
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Church",
|
||||
"name": "Annaville Seventh-day Adventist Church",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "2710 Violet Rd",
|
||||
"addressLocality": "Corpus Christi",
|
||||
"addressRegion": "TX",
|
||||
"postalCode": "78410"
|
||||
},
|
||||
"telephone": "+1-361-241-5501",
|
||||
"email": "info@annavillesda.org",
|
||||
"url": "https://annavillesda.org",
|
||||
"openingHours": "Sa 09:30-12:00",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "+1-361-241-5501",
|
||||
"contactType": "customer service",
|
||||
"availableLanguage": "English"
|
||||
}
|
||||
})}
|
||||
</script>
|
||||
</Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-sand to-surface py-24">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="font-heading text-h1 mb-8">Get in Touch</h1>
|
||||
<p className="text-body text-lg mb-10">
|
||||
We'd love to hear from you! Whether you have questions, need prayer,
|
||||
or want to get involved, we're here to help.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-2 gap-24">
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="space-y-16">
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-10">Contact Information</h2>
|
||||
<div className="space-y-10">
|
||||
<div className="flex items-start gap-4 p-6 bg-white border border-subtle rounded-lg">
|
||||
<div className="bg-primary/10 p-3 rounded-full">
|
||||
<span className="text-primary text-2xl">📍</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-h3 mb-2">Visit Us</h3>
|
||||
<p className="text-body">
|
||||
2710 Violet Rd<br />
|
||||
Corpus Christi, TX 78410
|
||||
</p>
|
||||
<a
|
||||
href="https://maps.google.com/?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410"
|
||||
className="text-primary hover:text-primaryHover transition-colors text-sm"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Get Directions →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 bg-white border border-subtle rounded-lg">
|
||||
<div className="bg-primary/10 p-3 rounded-full">
|
||||
<span className="text-primary text-2xl">📞</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-h3 mb-2">Call Us</h3>
|
||||
<p className="text-body">
|
||||
<a
|
||||
href="tel:+13612415501"
|
||||
className="text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
(361) 241-5501
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-muted text-sm">Available during office hours</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-4 p-6 bg-white border border-subtle rounded-lg">
|
||||
<div className="bg-primary/10 p-3 rounded-full">
|
||||
<span className="text-primary text-2xl">✉️</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-heading text-h3 mb-2">Email Us</h3>
|
||||
<p className="text-body">
|
||||
<a
|
||||
href="mailto:info@annavillesda.org"
|
||||
className="text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
info@annavillesda.org
|
||||
</a>
|
||||
</p>
|
||||
<p className="text-muted text-sm">We'll respond within 24 hours</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service Times */}
|
||||
<div className="p-6 bg-sand rounded-lg">
|
||||
<h3 className="font-heading text-h3 mb-4">Service Times</h3>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">Sabbath School:</span>
|
||||
<span>9:30 AM</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">Divine Worship:</span>
|
||||
<span>11:00 AM</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="font-medium">Office Hours:</span>
|
||||
<span>Mon-Fri 9AM-5PM</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Map */}
|
||||
<div>
|
||||
<h3 className="font-heading text-h3 mb-4">Find Us</h3>
|
||||
<iframe
|
||||
title="Map to Annaville Seventh-day Adventist Church"
|
||||
className="w-full h-64 rounded-lg border border-subtle"
|
||||
loading="lazy"
|
||||
src="https://www.google.com/maps?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410&output=embed"
|
||||
aria-label="Interactive map showing the location of Annaville Seventh-day Adventist Church"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Form */}
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-10">Send Us a Message</h2>
|
||||
|
||||
{submitStatus === 'success' && (
|
||||
<div className="p-8 bg-green-50 border border-green-200 rounded-lg mb-10">
|
||||
<p className="text-green-800">
|
||||
Thank you! Your message has been sent successfully. We'll get back to you soon.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-10">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-ink mb-3">
|
||||
Full Name *
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-5 py-4 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="Your full name"
|
||||
aria-describedby="name-error"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-ink mb-3">
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-5 py-4 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="your.email@example.com"
|
||||
aria-describedby="email-error"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-ink mb-3">
|
||||
Phone Number
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-5 py-4 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="(361) 555-0123"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="department" className="block text-sm font-medium text-ink mb-3">
|
||||
Department *
|
||||
</label>
|
||||
<select
|
||||
id="department"
|
||||
name="department"
|
||||
required
|
||||
value={formData.department}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-5 py-4 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
>
|
||||
{departments.map(dept => (
|
||||
<option key={dept.value} value={dept.value}>
|
||||
{dept.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{selectedDepartment?.email && (
|
||||
<p className="text-sm text-muted mt-2">
|
||||
This will be sent to: {selectedDepartment.email}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="subject" className="block text-sm font-medium text-ink mb-3">
|
||||
Subject *
|
||||
</label>
|
||||
<input
|
||||
id="subject"
|
||||
name="subject"
|
||||
type="text"
|
||||
required
|
||||
value={formData.subject}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-5 py-4 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="Brief subject of your message"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="message" className="block text-sm font-medium text-ink mb-3">
|
||||
Message *
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
rows={6}
|
||||
value={formData.message}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-5 py-4 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors resize-vertical"
|
||||
placeholder="Please share your message, question, or prayer request..."
|
||||
aria-describedby="message-help"
|
||||
/>
|
||||
<p id="message-help" className="text-sm text-muted mt-2">
|
||||
For prayer requests, please indicate if you'd like us to keep it confidential.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<fieldset>
|
||||
<legend className="block text-sm font-medium text-ink mb-3">
|
||||
Preferred Contact Method
|
||||
</legend>
|
||||
<div className="space-y-3">
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="preferredContact"
|
||||
value="email"
|
||||
checked={formData.preferredContact === 'email'}
|
||||
onChange={handleInputChange}
|
||||
className="mr-3"
|
||||
/>
|
||||
Email
|
||||
</label>
|
||||
<label className="flex items-center">
|
||||
<input
|
||||
type="radio"
|
||||
name="preferredContact"
|
||||
value="phone"
|
||||
checked={formData.preferredContact === 'phone'}
|
||||
onChange={handleInputChange}
|
||||
className="mr-3"
|
||||
/>
|
||||
Phone
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="btn w-full py-5 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSubmitting ? 'Sending...' : 'Send Message'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Discussion Forum Section */}
|
||||
<section className="section bg-sand">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<h2 className="font-heading text-h2 mb-8">Discussion</h2>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
{/* Search Section */}
|
||||
<div className="bg-white p-8 rounded-lg border border-subtle">
|
||||
<h3 className="font-heading text-h3 mb-4">SEARCH FOR ARTICLE</h3>
|
||||
<p className="text-body mb-6">
|
||||
Find articles posted to this discussion containing matching words or patterns.
|
||||
</p>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="search-term" className="block text-sm font-medium text-ink mb-2">
|
||||
Search for:
|
||||
</label>
|
||||
<input
|
||||
id="search-term"
|
||||
type="text"
|
||||
className="w-full border border-subtle rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4">
|
||||
<button type="submit" className="btn">
|
||||
Start Search
|
||||
</button>
|
||||
<button type="reset" className="btn-outline">
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
<p className="text-sm text-muted mt-6">
|
||||
Last changed: October 28, 2012
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Contents Section */}
|
||||
<div className="bg-white p-8 rounded-lg border border-subtle">
|
||||
<h3 className="font-heading text-h3 mb-6">CONTENTS</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="text-sm">
|
||||
<a href="#" className="text-primary hover:text-primaryHover font-medium">Jerry Stout</a>
|
||||
<span className="text-muted ml-2">Elvin 27 Feb 2003</span>
|
||||
</div>
|
||||
<div className="text-sm ml-4">
|
||||
<a href="#" className="text-primary hover:text-primaryHover">Re: Jerry Stout</a>
|
||||
<span className="text-muted ml-2">Elvin 27 Feb 2003</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<a href="#" className="text-primary hover:text-primaryHover font-medium">Shelly Family</a>
|
||||
<span className="text-muted ml-2">Elvin/Wallie 27 Feb 2003</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<a href="#" className="text-primary hover:text-primaryHover font-medium">Bill & Pat</a>
|
||||
<span className="text-muted ml-2">Scarboroughs 26 Feb 2003</span>
|
||||
</div>
|
||||
<div className="text-sm ml-4">
|
||||
<a href="#" className="text-primary hover:text-primaryHover">Bill & Pat</a>
|
||||
<span className="text-muted ml-2">Elvin 27 Feb 2003</span>
|
||||
</div>
|
||||
<div className="text-sm">
|
||||
<a href="#" className="text-primary hover:text-primaryHover font-medium">Potluck</a>
|
||||
<span className="text-muted ml-2">Wallie 24 Feb 2003</span>
|
||||
</div>
|
||||
<div className="text-sm ml-4">
|
||||
<a href="#" className="text-primary hover:text-primaryHover">Re: Potluck</a>
|
||||
<span className="text-muted ml-2">bob 25 Feb 2003</span>
|
||||
</div>
|
||||
<div className="text-sm ml-4">
|
||||
<a href="#" className="text-primary hover:text-primaryHover">Re: Potluck</a>
|
||||
<span className="text-muted ml-2">bob 25 Feb 2003</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
|
||||
import React, { useEffect } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import events from '../data/events.json'
|
||||
import { googleCalendarUrl, downloadICS } from '../utils/calendar'
|
||||
import { track, events as ga } from '../utils/analytics'
|
||||
|
||||
export default function EventDetail(){
|
||||
const { slug } = useParams()
|
||||
const e = events.find(x => x.slug === slug)
|
||||
|
||||
useEffect(()=>{ if (e) track(ga.EVENT_DETAILS_VIEW,{slug:e.slug}) },[slug])
|
||||
|
||||
if(!e) return <section className="section"><div className="container"><p>Event not found.</p></div></section>
|
||||
|
||||
// Parse time from 12-hour format to 24-hour format
|
||||
const parseTime = (timeStr) => {
|
||||
if (!timeStr) return '10:00'
|
||||
const match = timeStr.match(/(\d+):(\d+)\s*(AM|PM)/i)
|
||||
if (!match) return '10:00'
|
||||
|
||||
let hours = parseInt(match[1])
|
||||
const minutes = match[2]
|
||||
const period = match[3].toUpperCase()
|
||||
|
||||
if (period === 'PM' && hours !== 12) hours += 12
|
||||
if (period === 'AM' && hours === 12) hours = 0
|
||||
|
||||
return `${hours.toString().padStart(2, '0')}:${minutes}`
|
||||
}
|
||||
|
||||
const time24 = parseTime(e.time || '10:00 AM')
|
||||
const start = new Date(`${e.date}T${time24}:00`)
|
||||
const end = new Date(start.getTime() + 60 * 60 * 1000)
|
||||
|
||||
const jsonLd = {
|
||||
"@context":"https://schema.org","@type":"Event","name":e.title,
|
||||
"startDate":start.toISOString(),"endDate":end.toISOString(),
|
||||
"eventAttendanceMode":"https://schema.org/OfflineEventAttendanceMode",
|
||||
"location":{"@type":"Place","name":"Annaville SDA Church","address":"2710 Violet Rd, Corpus Christi, TX 78410"},
|
||||
"description":e.description
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet>
|
||||
<title>{e.title} | Events</title>
|
||||
<script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
|
||||
</Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-2">{e.title}</h1>
|
||||
<div className="text-muted mb-4">{e.date} • {e.time} • {e.location}</div>
|
||||
<p className="text-[16px]">{e.description}</p>
|
||||
<div className="mt-4 flex gap-3">
|
||||
<a className="btn-ghost underline" target="_blank" rel="noreferrer"
|
||||
href={googleCalendarUrl({title:e.title, details:e.description, location:e.location, start, end})}>Add to Google Calendar</a>
|
||||
<button className="btn-ghost underline" onClick={()=>downloadICS({title:e.title, details:e.description, location:e.location, start, end, filename:`${e.slug}.ics`})}>Add to Apple Calendar</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
import React, { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import events from '../data/events.json'
|
||||
import { EventCard } from '../components/Cards'
|
||||
|
||||
const filters = ['This Month','Next Month','Family','Outreach']
|
||||
|
||||
export default function Events(){
|
||||
const [active, setActive] = useState('This Month')
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet><title>Events | Annaville SDA Church</title></Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-10">Events</h1>
|
||||
<div className="flex gap-6 mb-12 flex-wrap">
|
||||
{filters.map(f => (
|
||||
<button key={f} className="chip" aria-pressed={active===f} onClick={()=>setActive(f)}>{f}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid gap-10 md:grid-cols-3">
|
||||
{events.map(e => <EventCard key={e.slug} e={e} />)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
export default function Giving() {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Giving - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content="Support the mission and ministries of Annaville SDA Church through tithe, offerings, and special projects. Give online securely." />
|
||||
</Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-sand to-surface py-20">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="font-heading text-h1 mb-6">Support Our Mission</h1>
|
||||
<p className="text-body text-lg mb-8">
|
||||
Your generous giving enables us to share God's love, serve our community, and support ministries that make a difference in people's lives.
|
||||
</p>
|
||||
<a
|
||||
className="btn text-lg px-8 py-4"
|
||||
href="https://adventistgiving.org/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Give Online Securely
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-2 gap-12">
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="space-y-12">
|
||||
|
||||
|
||||
|
||||
{/* How Funds Are Used */}
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-6">How Your Gifts Are Used</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div className="p-4 bg-sand rounded-lg">
|
||||
<h4 className="font-medium text-ink mb-2">Local Ministry Support</h4>
|
||||
<p className="text-body text-sm">Children's and youth programs, Bible studies, and fellowship activities</p>
|
||||
</div>
|
||||
<div className="p-4 bg-sand rounded-lg">
|
||||
<h4 className="font-medium text-ink mb-2">Community Outreach</h4>
|
||||
<p className="text-body text-sm">Food drives, health screenings, and assistance to families in need</p>
|
||||
</div>
|
||||
<div className="p-4 bg-sand rounded-lg">
|
||||
<h4 className="font-medium text-ink mb-2">Facility Maintenance</h4>
|
||||
<p className="text-body text-sm">Building upkeep, utilities, and creating a welcoming environment</p>
|
||||
</div>
|
||||
<div className="p-4 bg-sand rounded-lg">
|
||||
<h4 className="font-medium text-ink mb-2">Global Mission</h4>
|
||||
<p className="text-body text-sm">Supporting Seventh-day Adventist mission work worldwide</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* Online Giving */}
|
||||
<div className="bg-white border border-subtle rounded-lg p-6">
|
||||
<h3 className="font-heading text-h3 mb-4">Give Online</h3>
|
||||
<p className="text-body mb-4">
|
||||
Give securely through our online platform. You can set up recurring gifts,
|
||||
designate specific funds, and receive instant receipts.
|
||||
</p>
|
||||
<a
|
||||
className="btn w-full mb-4"
|
||||
href="https://adventistgiving.org/"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
Give Online Now
|
||||
</a>
|
||||
<div className="text-muted text-sm">
|
||||
<p>✓ Secure and encrypted</p>
|
||||
<p>✓ Instant receipts</p>
|
||||
<p>✓ Recurring gifts available</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Other Giving Methods */}
|
||||
<div className="bg-white border border-subtle rounded-lg p-6">
|
||||
<h3 className="font-heading text-h3 mb-4">Other Ways to Give</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-medium text-ink mb-1">In Person</h4>
|
||||
<p className="text-body text-sm">During worship services or at the church office</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-ink mb-1">By Mail</h4>
|
||||
<p className="text-body text-sm">Send checks to: 2710 Violet Rd, Corpus Christi, TX 78410</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-ink mb-1">Bank Transfer</h4>
|
||||
<p className="text-body text-sm">Contact us for bank transfer information</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="bg-white border border-subtle rounded-lg p-6">
|
||||
<h3 className="font-heading text-h3 mb-4">Questions About Giving?</h3>
|
||||
<p className="text-body mb-4">
|
||||
We're here to help with any questions about giving or financial stewardship.
|
||||
</p>
|
||||
<div className="space-y-2">
|
||||
<a
|
||||
href="mailto:treasurer@annavillesda.org"
|
||||
className="block text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
📧 treasurer@annavillesda.org
|
||||
</a>
|
||||
<a
|
||||
href="tel:+13612415501"
|
||||
className="block text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
📞 (361) 241-5501
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div className="mt-16">
|
||||
<h2 className="font-heading text-h2 mb-8 text-center">Frequently Asked Questions</h2>
|
||||
<div className="max-w-3xl mx-auto space-y-4">
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer p-6 bg-white border border-subtle rounded-lg hover:bg-sand/50 transition-colors list-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-heading text-h3 text-ink">Will I receive a receipt for my gifts?</h3>
|
||||
<span className="text-primary text-xl group-open:rotate-180 transition-transform">▼</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div className="p-6 bg-sand/30 rounded-b-lg border-t-0 border border-subtle">
|
||||
<p className="text-body text-ink leading-relaxed">
|
||||
Yes! For online gifts, you'll receive an instant email receipt. For in-person or mailed gifts,
|
||||
we provide quarterly statements. All gifts are tax-deductible and properly documented for your records.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer p-6 bg-white border border-subtle rounded-lg hover:bg-sand/50 transition-colors list-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-heading text-h3 text-ink">Can I set up recurring gifts?</h3>
|
||||
<span className="text-primary text-xl group-open:rotate-180 transition-transform">▼</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div className="p-6 bg-sand/30 rounded-b-lg border-t-0 border border-subtle">
|
||||
<p className="text-body text-ink leading-relaxed">
|
||||
Absolutely! You can set up recurring gifts through our online platform for weekly, monthly,
|
||||
or any frequency that works for you. You can modify or cancel recurring gifts at any time.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer p-6 bg-white border border-subtle rounded-lg hover:bg-sand/50 transition-colors list-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-heading text-h3 text-ink">How are the funds used?</h3>
|
||||
<span className="text-primary text-xl group-open:rotate-180 transition-transform">▼</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div className="p-6 bg-sand/30 rounded-b-lg border-t-0 border border-subtle">
|
||||
<p className="text-body text-ink leading-relaxed">
|
||||
Tithe supports the worldwide Seventh-day Adventist Church ministry. Offerings support local
|
||||
church operations, ministries, and community outreach. Special project funds are used for
|
||||
designated purposes as specified by the donor.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer p-6 bg-white border border-subtle rounded-lg hover:bg-sand/50 transition-colors list-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-heading text-h3 text-ink">Is online giving secure?</h3>
|
||||
<span className="text-primary text-xl group-open:rotate-180 transition-transform">▼</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div className="p-6 bg-sand/30 rounded-b-lg border-t-0 border border-subtle">
|
||||
<p className="text-body text-ink leading-relaxed">
|
||||
Yes, our online giving platform uses bank-level security with SSL encryption.
|
||||
Your personal and financial information is protected and never shared with third parties.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<details className="group">
|
||||
<summary className="cursor-pointer p-6 bg-white border border-subtle rounded-lg hover:bg-sand/50 transition-colors list-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-heading text-h3 text-ink">Can I designate my gift for a specific purpose?</h3>
|
||||
<span className="text-primary text-xl group-open:rotate-180 transition-transform">▼</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div className="p-6 bg-sand/30 rounded-b-lg border-t-0 border border-subtle">
|
||||
<p className="text-body text-ink leading-relaxed">
|
||||
Yes! You can designate gifts for specific ministries, projects, or needs.
|
||||
Contact us if you have a specific purpose in mind, and we'll help you set up the designation.
|
||||
</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { TextHero } from '../components/Hero'
|
||||
import VisitForm from '../components/VisitForm'
|
||||
import StaticMap from '../components/StaticMap'
|
||||
import { track, events } from '../utils/analytics'
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Annaville Seventh-day Adventist Church - Corpus Christi, TX</title>
|
||||
<meta name="description" content="Join us for worship services at Annaville SDA Church. Sabbath School 9:30 AM, Divine Worship 11:00 AM. Located at 2710 Violet Rd, Corpus Christi, TX. Welcoming community, family-friendly ministries, and spiritual growth opportunities." />
|
||||
<meta name="keywords" content="Seventh-day Adventist, church, Corpus Christi, Texas, worship, Sabbath School, Bible study, community" />
|
||||
<meta property="og:title" content="Annaville Seventh-day Adventist Church" />
|
||||
<meta property="og:description" content="Join us for worship services at Annaville SDA Church. Sabbath School 9:30 AM, Divine Worship 11:00 AM." />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:url" content="https://annavillesda.org" />
|
||||
<meta property="og:image" content="https://annavillesda.org/assets/hero_golden_hour.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:title" content="Annaville Seventh-day Adventist Church" />
|
||||
<meta name="twitter:description" content="Join us for worship services at Annaville SDA Church. Sabbath School 9:30 AM, Divine Worship 11:00 AM." />
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Church",
|
||||
"name": "Annaville Seventh-day Adventist Church",
|
||||
"alternateName": "Annaville SDA Church",
|
||||
"description": "A welcoming Seventh-day Adventist congregation in Corpus Christi, Texas offering worship services, Bible study, and community outreach.",
|
||||
"url": "https://annavillesda.org",
|
||||
"logo": "https://annavillesda.org/assets/hero_golden_hour.png",
|
||||
"image": "https://annavillesda.org/assets/hero_golden_hour.png",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "2710 Violet Rd",
|
||||
"addressLocality": "Corpus Christi",
|
||||
"addressRegion": "TX",
|
||||
"postalCode": "78410",
|
||||
"addressCountry": "US"
|
||||
},
|
||||
"geo": {
|
||||
"@type": "GeoCoordinates",
|
||||
"latitude": 27.8006,
|
||||
"longitude": -97.3964
|
||||
},
|
||||
"telephone": "+1-361-241-5501",
|
||||
"email": "info@annavillesda.org",
|
||||
"openingHours": "Sa 09:30-12:00",
|
||||
"serviceType": "Worship Service",
|
||||
"sameAs": [
|
||||
"https://www.facebook.com/annavillesda",
|
||||
"https://www.youtube.com/annavillesda"
|
||||
],
|
||||
"hasMap": "https://maps.google.com/?q=2710+Violet+Rd,+Corpus+Christi,+TX+78410",
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"telephone": "+1-361-241-5501",
|
||||
"contactType": "customer service",
|
||||
"availableLanguage": "English",
|
||||
"hoursAvailable": {
|
||||
"@type": "OpeningHoursSpecification",
|
||||
"dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
|
||||
"opens": "09:00",
|
||||
"closes": "17:00"
|
||||
}
|
||||
}
|
||||
})}
|
||||
</script>
|
||||
</Helmet>
|
||||
|
||||
<TextHero />
|
||||
|
||||
{/* Bible Verse Section */}
|
||||
<section className="section-sm bg-sand">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="p-10 bg-white rounded-xl shadow-sm">
|
||||
<blockquote className="text-center italic text-ink">
|
||||
<p className="text-body mb-6">
|
||||
"If thou turn away thy foot from the sabbath, from doing thy pleasure on my holy day; and call the sabbath a delight, the holy of the LORD, honorable; and shalt honor him, not doing thine own ways, nor finding thine own pleasure, nor speaking thine own words: Then shalt thou delight thyself in the LORD; and I will cause thee to rise upon the high places of the earth, and feed thee with the heritage of Jacob thy father: for the mouth of the LORD hath spoken it."
|
||||
</p>
|
||||
<cite className="text-primary font-semibold">Isaiah 58:13 & 14</cite>
|
||||
</blockquote>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="service-times" aria-labelledby="stimes" className="section">
|
||||
<div className="container">
|
||||
<h2 id="stimes" className="sr-only">Service Times</h2>
|
||||
|
||||
{/* Service Times Cards */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
<div className="bg-white p-8 rounded-xl shadow-sm border border-subtle">
|
||||
<div className="text-center">
|
||||
<h3 className="font-heading text-h3 text-primary mb-4">Sabbath School</h3>
|
||||
<div className="text-4xl font-bold text-ink mb-2">9:30 AM</div>
|
||||
<p className="text-body text-muted">Bible Study & Discussion</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-xl shadow-sm border border-subtle">
|
||||
<div className="text-center">
|
||||
<h3 className="font-heading text-h3 text-primary mb-4">Divine Worship</h3>
|
||||
<div className="text-4xl font-bold text-ink mb-2">11:00 AM</div>
|
||||
<p className="text-body text-muted">Main Worship Service</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Potluck Fellowship Information */}
|
||||
<div className="max-w-2xl mx-auto p-8 bg-sand rounded-xl text-center">
|
||||
<h3 className="font-heading text-h3 mb-4 text-primary">Potluck Fellowship Dinner</h3>
|
||||
<p className="text-body text-ink">
|
||||
Immediately following worship services. Visitors are encouraged to stay and fellowship.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section bg-sand">
|
||||
<div className="container">
|
||||
<div className="text-center">
|
||||
<h2 className="font-heading text-h2 mb-8">Upcoming Events</h2>
|
||||
<div className="max-w-2xl mx-auto">
|
||||
<div className="bg-white p-12 rounded-xl shadow-sm border border-subtle">
|
||||
<p className="text-body text-muted">
|
||||
No upcoming events at this time. Please check back later for updates.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-2 gap-24 items-start">
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-12">Plan Your Visit</h2>
|
||||
<p className="text-body mb-12">
|
||||
We are located at 2710 Violet Road in Corpus Christi, Texas.
|
||||
Click on the link below to see a map to our church location.
|
||||
</p>
|
||||
<VisitForm />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-12">Location</h2>
|
||||
<StaticMap />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
|
||||
import React, { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import ministries from '../data/ministries.json'
|
||||
import { MinistryCard } from '../components/Cards'
|
||||
|
||||
const filters = ['Adults','Children','Youth','Men','Women','Outreach']
|
||||
|
||||
export default function Ministries(){
|
||||
const [active, setActive] = useState('All')
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet><title>Ministries | Annaville SDA Church</title></Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-10">Ministries</h1>
|
||||
<div className="flex gap-6 mb-12 flex-wrap">
|
||||
{filters.map(f => (
|
||||
<button key={f} className="chip" aria-pressed={active===f} onClick={()=>setActive(f)}>{f}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="grid gap-10 md:grid-cols-3">
|
||||
{ministries.map(m => <MinistryCard key={m.slug} m={m} />)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,227 @@
|
|||
|
||||
import React from 'react'
|
||||
import { useParams, Link } from 'react-router-dom'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import ministries from '../data/ministries.json'
|
||||
import events from '../data/events.json'
|
||||
import LazyImage from '../components/LazyImage'
|
||||
|
||||
export default function MinistryDetail(){
|
||||
const { slug } = useParams()
|
||||
const m = ministries.find(x => x.slug === slug)
|
||||
|
||||
if(!m) return (
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="text-center py-12">
|
||||
<h1 className="font-heading text-h1 mb-4">Ministry Not Found</h1>
|
||||
<p className="text-body mb-6">The ministry you're looking for doesn't exist.</p>
|
||||
<Link to="/ministries" className="btn">Back to Ministries</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
|
||||
// Filter events that might be related to this ministry
|
||||
const relatedEvents = events.filter(e =>
|
||||
e.title.toLowerCase().includes(m.category.toLowerCase()) ||
|
||||
e.description.toLowerCase().includes(m.category.toLowerCase())
|
||||
).slice(0, 3)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>{m.name} - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content={m.description} />
|
||||
</Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative bg-gradient-to-br from-sand to-surface py-20">
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||
<div>
|
||||
<div className="inline-block bg-primary/10 text-primary px-4 py-2 rounded-full text-sm font-medium mb-4">
|
||||
{m.category}
|
||||
</div>
|
||||
<h1 className="font-heading text-h1 mb-6">{m.name}</h1>
|
||||
<p className="text-body text-lg mb-6">{m.description}</p>
|
||||
<div className="flex flex-wrap gap-4 text-muted">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl">🕒</span>
|
||||
<span>{m.meeting}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl">📍</span>
|
||||
<span>{m.where}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-2xl">👥</span>
|
||||
<span>{m.ages}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative">
|
||||
<LazyImage
|
||||
src={m.image}
|
||||
alt={`${m.name} at Annaville SDA Church`}
|
||||
className="w-full h-80 rounded-2xl shadow-lg"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent rounded-2xl"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="grid lg:grid-cols-3 gap-12">
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="lg:col-span-2 space-y-12">
|
||||
|
||||
{/* What We Do */}
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-6">What We Do</h2>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
{m.activities.map((activity, index) => (
|
||||
<div key={index} className="flex items-start gap-3 p-4 bg-sand rounded-lg">
|
||||
<span className="text-primary text-xl">✓</span>
|
||||
<span className="text-body">{activity}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
{relatedEvents.length > 0 && (
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-6">Upcoming Events</h2>
|
||||
<div className="grid gap-4">
|
||||
{relatedEvents.map(e => (
|
||||
<Link
|
||||
key={e.slug}
|
||||
to={`/events/${e.slug}`}
|
||||
className="block p-6 bg-white border border-subtle rounded-lg hover:shadow-md transition-shadow"
|
||||
>
|
||||
<h3 className="font-heading text-h3 mb-2">{e.title}</h3>
|
||||
<p className="text-muted mb-2">{e.date} • {e.time}</p>
|
||||
<p className="text-body">{e.description}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* FAQ Section */}
|
||||
<div>
|
||||
<h2 className="font-heading text-h2 mb-6">Frequently Asked Questions</h2>
|
||||
<div className="space-y-4">
|
||||
{m.faq.map((item, index) => (
|
||||
<details key={index} className="group">
|
||||
<summary className="cursor-pointer p-6 bg-white border border-subtle rounded-lg hover:bg-sand/50 transition-colors list-none">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-heading text-h3 text-ink">{item.question}</h3>
|
||||
<span className="text-primary text-xl group-open:rotate-180 transition-transform">▼</span>
|
||||
</div>
|
||||
</summary>
|
||||
<div className="p-6 bg-sand/30 rounded-b-lg border-t-0 border border-subtle">
|
||||
<p className="text-body text-ink leading-relaxed">{item.answer}</p>
|
||||
</div>
|
||||
</details>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-8">
|
||||
|
||||
{/* Contact Information */}
|
||||
<div className="bg-white border border-subtle rounded-lg p-6">
|
||||
<h3 className="font-heading text-h3 mb-4">Get Involved</h3>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<h4 className="font-medium text-ink mb-2">Ministry Leader</h4>
|
||||
<p className="text-body">{m.leader}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-ink mb-2">Contact</h4>
|
||||
<div className="space-y-2">
|
||||
<a
|
||||
href={`mailto:${m.contact.email}`}
|
||||
className="block text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
📧 {m.contact.email}
|
||||
</a>
|
||||
<a
|
||||
href={`tel:${m.contact.phone.replace(/\D/g, '')}`}
|
||||
className="block text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
📞 {m.contact.phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-ink mb-2">Meeting Details</h4>
|
||||
<p className="text-body">{m.meeting}</p>
|
||||
<p className="text-muted text-sm">{m.where}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6">
|
||||
<button className="btn w-full">
|
||||
Contact Ministry Leader
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<div className="bg-white border border-subtle rounded-lg p-6">
|
||||
<h3 className="font-heading text-h3 mb-4">Quick Links</h3>
|
||||
<div className="space-y-3">
|
||||
<Link
|
||||
to="/ministries"
|
||||
className="block text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
← Back to All Ministries
|
||||
</Link>
|
||||
<Link
|
||||
to="/events"
|
||||
className="block text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
View All Events
|
||||
</Link>
|
||||
<Link
|
||||
to="/visit"
|
||||
className="block text-primary hover:text-primaryHover transition-colors"
|
||||
>
|
||||
Plan Your Visit
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Related Ministries */}
|
||||
<div className="bg-white border border-subtle rounded-lg p-6">
|
||||
<h3 className="font-heading text-h3 mb-4">Other Ministries</h3>
|
||||
<div className="space-y-3">
|
||||
{ministries
|
||||
.filter(ministry => ministry.slug !== m.slug)
|
||||
.slice(0, 3)
|
||||
.map(ministry => (
|
||||
<Link
|
||||
key={ministry.slug}
|
||||
to={`/ministries/${ministry.slug}`}
|
||||
className="block p-3 bg-sand rounded-lg hover:bg-sand/80 transition-colors"
|
||||
>
|
||||
<h4 className="font-medium text-ink">{ministry.name}</h4>
|
||||
<p className="text-muted text-sm">{ministry.meeting}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
import React, { useState } from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
export default function PrayerRequests() {
|
||||
const [formData, setFormData] = useState({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
prayerType: '',
|
||||
request: '',
|
||||
isConfidential: false,
|
||||
allowSharing: false
|
||||
})
|
||||
|
||||
const [isSubmitted, setIsSubmitted] = useState(false)
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { name, value, type, checked } = e.target
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: type === 'checkbox' ? checked : value
|
||||
}))
|
||||
}
|
||||
|
||||
const handleSubmit = (e) => {
|
||||
e.preventDefault()
|
||||
// Here you would typically send the data to your backend
|
||||
console.log('Prayer request submitted:', formData)
|
||||
setIsSubmitted(true)
|
||||
setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
prayerType: '',
|
||||
request: '',
|
||||
isConfidential: false,
|
||||
allowSharing: false
|
||||
})
|
||||
}
|
||||
|
||||
if (isSubmitted) {
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Prayer Request Submitted - Annaville Seventh-day Adventist Church</title>
|
||||
</Helmet>
|
||||
|
||||
<section className="bg-gradient-to-br from-green-500 to-green-600 text-white py-20">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="text-6xl mb-6">🙏</div>
|
||||
<h1 className="font-heading text-h1 mb-6">Prayer Request Received</h1>
|
||||
<p className="text-xl text-white/90 leading-relaxed mb-8">
|
||||
Thank you for sharing your prayer request with us. Our prayer team has been notified
|
||||
and will be lifting you up in prayer.
|
||||
</p>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-8 mb-8">
|
||||
<h3 className="font-heading text-h3 mb-4">What happens next?</h3>
|
||||
<ul className="text-left space-y-3 text-white/90">
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-2xl">📝</span>
|
||||
<span>Your request has been recorded in our prayer journal</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-2xl">🙏</span>
|
||||
<span>Our prayer team will begin praying for you immediately</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-2xl">💌</span>
|
||||
<span>You'll receive a confirmation email with additional resources</span>
|
||||
</li>
|
||||
<li className="flex items-center gap-3">
|
||||
<span className="text-2xl">📞</span>
|
||||
<span>If you requested follow-up, someone will contact you soon</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<button
|
||||
onClick={() => setIsSubmitted(false)}
|
||||
className="btn bg-white text-green-600 hover:bg-gray-100"
|
||||
>
|
||||
Submit Another Request
|
||||
</button>
|
||||
<a href="/" className="btn-outline border-white text-white hover:bg-white hover:text-green-600">
|
||||
Return Home
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Prayer Requests - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content="Submit your prayer requests to our caring community. We believe in the power of prayer and are here to support you in your time of need." />
|
||||
<meta name="keywords" content="prayer requests, prayer support, spiritual care, Annaville SDA, prayer ministry" />
|
||||
</Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-primary to-primaryDeep text-white py-20">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="text-6xl mb-6">🙏</div>
|
||||
<h1 className="font-heading text-h1 mb-6">Prayer Requests</h1>
|
||||
<p className="text-xl text-white/90 leading-relaxed">
|
||||
We believe in the power of prayer and the strength of community.
|
||||
Share your prayer requests with us, and know that you are not alone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Prayer Request Form Section */}
|
||||
<section className="section bg-sand">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="bg-white rounded-xl shadow-lg p-8 md:p-12">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="font-heading text-h2 mb-6">Share Your Prayer Request</h2>
|
||||
<p className="text-body text-muted">
|
||||
Your request will be shared with our prayer team. All information is kept confidential
|
||||
unless you specifically allow us to share it with the congregation.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8">
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label htmlFor="name" className="block text-sm font-medium text-ink mb-3">
|
||||
Your Name *
|
||||
</label>
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="Enter your full name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="email" className="block text-sm font-medium text-ink mb-3">
|
||||
Email Address *
|
||||
</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="your.email@example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-ink mb-3">
|
||||
Phone Number (Optional)
|
||||
</label>
|
||||
<input
|
||||
id="phone"
|
||||
name="phone"
|
||||
type="tel"
|
||||
value={formData.phone}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="(555) 123-4567"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="request" className="block text-sm font-medium text-ink mb-3">
|
||||
Your Prayer Request *
|
||||
</label>
|
||||
<textarea
|
||||
id="request"
|
||||
name="request"
|
||||
rows="6"
|
||||
required
|
||||
value={formData.request}
|
||||
onChange={handleInputChange}
|
||||
className="w-full border border-subtle rounded-lg px-4 py-3 focus:ring-2 focus:ring-primary focus:border-transparent transition-colors"
|
||||
placeholder="Please share your prayer request in detail. What would you like us to pray for?"
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<input
|
||||
id="isConfidential"
|
||||
name="isConfidential"
|
||||
type="checkbox"
|
||||
checked={formData.isConfidential}
|
||||
onChange={handleInputChange}
|
||||
className="mt-1 h-4 w-4 text-primary focus:ring-primary border-subtle rounded"
|
||||
/>
|
||||
<label htmlFor="isConfidential" className="text-sm text-muted">
|
||||
Keep this request confidential (only shared with prayer team)
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<input
|
||||
id="allowSharing"
|
||||
name="allowSharing"
|
||||
type="checkbox"
|
||||
checked={formData.allowSharing}
|
||||
onChange={handleInputChange}
|
||||
className="mt-1 h-4 w-4 text-primary focus:ring-primary border-subtle rounded"
|
||||
/>
|
||||
<label htmlFor="allowSharing" className="text-sm text-muted">
|
||||
Allow us to share this request with the congregation (without personal details)
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 pt-6">
|
||||
<button
|
||||
type="submit"
|
||||
className="btn flex-1"
|
||||
>
|
||||
Submit Prayer Request
|
||||
</button>
|
||||
<button
|
||||
type="reset"
|
||||
onClick={() => setFormData({
|
||||
name: '',
|
||||
email: '',
|
||||
phone: '',
|
||||
prayerType: '',
|
||||
request: '',
|
||||
isConfidential: false,
|
||||
allowSharing: false
|
||||
})}
|
||||
className="btn-outline flex-1"
|
||||
>
|
||||
Reset Form
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
export default function PrivacyPolicy() {
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet><title>Privacy Policy | Annaville SDA Church</title></Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-4">Privacy Policy</h1>
|
||||
<p className='text-[16px]'>Privacy policy content placeholder.</p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,233 @@
|
|||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
export default function Resources() {
|
||||
const networkResources = [
|
||||
{
|
||||
title: "Adventist Connections",
|
||||
description: "Connect with Adventists worldwide",
|
||||
url: "https://www.adventist.org",
|
||||
icon: "🌐"
|
||||
},
|
||||
{
|
||||
title: "General Conference",
|
||||
description: "Official website of the Seventh-day Adventist Church",
|
||||
url: "https://www.adventist.org",
|
||||
icon: "⛪"
|
||||
},
|
||||
{
|
||||
title: "SDA Yearbook",
|
||||
description: "Comprehensive directory of Adventist institutions",
|
||||
url: "https://www.adventistyearbook.org",
|
||||
icon: "📚"
|
||||
},
|
||||
{
|
||||
title: "Adventist Education Net",
|
||||
description: "Educational resources and institutions",
|
||||
url: "https://education.adventist.org",
|
||||
icon: "🎓"
|
||||
},
|
||||
{
|
||||
title: "Adventist Plusline",
|
||||
description: "Professional development and networking",
|
||||
url: "https://plusline.org",
|
||||
icon: "💼"
|
||||
},
|
||||
{
|
||||
title: "E.G. White Estate",
|
||||
description: "Writings and resources from Ellen G. White",
|
||||
url: "https://whiteestate.org",
|
||||
icon: "✍️"
|
||||
},
|
||||
{
|
||||
title: "TAGnet",
|
||||
description: "Technology and communication resources",
|
||||
url: "https://tagnet.org",
|
||||
icon: "💻"
|
||||
},
|
||||
{
|
||||
title: "Adventist Educational Institutions",
|
||||
description: "Schools, colleges, and universities worldwide",
|
||||
url: "https://education.adventist.org",
|
||||
icon: "🏫"
|
||||
},
|
||||
{
|
||||
title: "Fundamental Beliefs",
|
||||
description: "28 Fundamental Beliefs of Seventh-day Adventists",
|
||||
url: "https://www.adventist.org/beliefs/",
|
||||
icon: "📖"
|
||||
},
|
||||
{
|
||||
title: "SDA Institutions Directory",
|
||||
description: "Global directory of Adventist organizations",
|
||||
url: "https://www.adventistdirectory.org",
|
||||
icon: "🗺️"
|
||||
},
|
||||
{
|
||||
title: "Churches Directory",
|
||||
description: "Find Adventist churches near you",
|
||||
url: "https://www.adventistdirectory.org",
|
||||
icon: "🏛️"
|
||||
},
|
||||
{
|
||||
title: "Open Directory Index",
|
||||
description: "Comprehensive Adventist resource index",
|
||||
url: "https://dmoz-odp.org/Society/Religion_and_Spirituality/Christianity/Denominations/Seventh-day_Adventist/",
|
||||
icon: "📋"
|
||||
},
|
||||
{
|
||||
title: "Yahoo Adventist Index",
|
||||
description: "Curated Adventist resources and links",
|
||||
url: "https://dir.yahoo.com/Society_and_Culture/Religion_and_Spirituality/Christianity/Denominations/Seventh_day_Adventist/",
|
||||
icon: "🔍"
|
||||
}
|
||||
]
|
||||
|
||||
const bibleStudyResources = [
|
||||
{
|
||||
title: "Discover Bible Guides",
|
||||
description: "Interactive online Bible study courses",
|
||||
url: "https://www.discoveronline.org",
|
||||
icon: "🔍"
|
||||
},
|
||||
{
|
||||
title: "Bible Information Online",
|
||||
description: "Comprehensive Bible study resources",
|
||||
url: "https://www.bibleinfo.com",
|
||||
icon: "📖"
|
||||
},
|
||||
{
|
||||
title: "Amazing Facts Study Guides",
|
||||
description: "Bible prophecy and truth studies",
|
||||
url: "https://www.amazingfacts.org",
|
||||
icon: "✨"
|
||||
},
|
||||
{
|
||||
title: "Online Bible",
|
||||
description: "Multiple Bible translations and study tools",
|
||||
url: "https://www.biblegateway.com",
|
||||
icon: "📚"
|
||||
},
|
||||
{
|
||||
title: "Sabbath School Lessons",
|
||||
description: "Weekly lesson quarterlies and discussions",
|
||||
url: "https://ssnet.org",
|
||||
icon: "📅"
|
||||
},
|
||||
{
|
||||
title: "Adventist Information Ministry",
|
||||
description: "Evangelistic resources and materials",
|
||||
url: "https://www.aims.org",
|
||||
icon: "📢"
|
||||
},
|
||||
{
|
||||
title: "Daniel Prophecy Series",
|
||||
description: "In-depth study of biblical prophecy",
|
||||
url: "https://www.amazingfacts.org/media-library/prophecy",
|
||||
icon: "🔮"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Resources - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content="Discover valuable Adventist resources, Bible study materials, and educational content from trusted Seventh-day Adventist organizations worldwide." />
|
||||
<meta name="keywords" content="Adventist resources, Bible study, Seventh-day Adventist, General Conference, Ellen White, educational materials" />
|
||||
</Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-primary to-primaryDeep text-white py-20">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="font-heading text-h1 mb-6">Adventist Resources</h1>
|
||||
<p className="text-xl text-white/90 leading-relaxed">
|
||||
Discover trusted resources, Bible study materials, and educational content
|
||||
from Seventh-day Adventist organizations worldwide.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Network Resources Section */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-heading text-h2 mb-6">Seventh-day Adventist Network Resources</h2>
|
||||
<p className="text-body text-muted max-w-3xl mx-auto">
|
||||
Connect with official Adventist organizations, educational institutions, and global resources
|
||||
that support our mission and values.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{networkResources.map((resource, index) => (
|
||||
<div key={index} className="group">
|
||||
<a
|
||||
href={resource.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block bg-white p-6 rounded-xl shadow-sm border border-subtle hover:shadow-md hover:border-primary transition-all duration-300 h-full"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">{resource.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-ink mb-2 group-hover:text-primary transition-colors">
|
||||
{resource.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted leading-relaxed">
|
||||
{resource.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Bible Study Resources Section */}
|
||||
<section className="section bg-sand">
|
||||
<div className="container">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-heading text-h2 mb-6">Bible Study & Learning Resources</h2>
|
||||
<p className="text-body text-muted max-w-3xl mx-auto">
|
||||
Deepen your understanding of Scripture with these carefully selected Bible study materials,
|
||||
prophecy resources, and educational content.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{bibleStudyResources.map((resource, index) => (
|
||||
<div key={index} className="group">
|
||||
<a
|
||||
href={resource.url}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block bg-white p-6 rounded-xl shadow-sm border border-subtle hover:shadow-md hover:border-primary transition-all duration-300 h-full"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="text-3xl">{resource.icon}</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-ink mb-2 group-hover:text-primary transition-colors">
|
||||
{resource.title}
|
||||
</h3>
|
||||
<p className="text-sm text-muted leading-relaxed">
|
||||
{resource.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
|
||||
import React from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import sermons from '../data/sermons.json'
|
||||
import { track, events } from '../utils/analytics'
|
||||
|
||||
export default function SermonDetail(){
|
||||
const { slug } = useParams()
|
||||
const s = sermons.find(x => x.slug === slug)
|
||||
if(!s) return <section className="section"><div className="container"><p>Sermon not found.</p></div></section>
|
||||
const jsonLd = {"@context":"https://schema.org","@type":"AudioObject","name":s.title,"author":s.speaker,"uploadDate":s.date,"description":s.summary}
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet>
|
||||
<title>{s.title} | Sermons</title>
|
||||
<script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
|
||||
</Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-1">{s.title}</h1>
|
||||
<div className="text-muted mb-3">{s.speaker} • {new Date(s.date).toLocaleDateString()}</div>
|
||||
<div className="card p-4">
|
||||
<p className="mb-2">{s.summary}</p>
|
||||
<audio controls className="w-full" onPlay={()=>track(events.SERMON_PLAY,{slug:s.slug})}>
|
||||
<source src="/assets/sample.mp3" type="audio/mpeg" />
|
||||
Your browser does not support the audio tag.
|
||||
</audio>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
import sermons from '../data/sermons.json'
|
||||
import { SermonCard } from '../components/Cards'
|
||||
|
||||
export default function Sermons(){
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet><title>Sermons | Annaville SDA Church</title></Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-4">Sermons</h1>
|
||||
<div className="grid gap-6 md:grid-cols-3">
|
||||
{sermons.map(s => <SermonCard key={s.slug} s={s} />)}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
export default function ServiceTimes() {
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet><title>Service Times | Annaville SDA Church</title></Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-4">Service Times</h1>
|
||||
|
||||
<ul className="text-[16px] list-disc pl-6">
|
||||
<li><strong>Sabbath School</strong>: 9:30 AM</li>
|
||||
<li><strong>Worship Service</strong>: 11:00 AM</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,197 @@
|
|||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
|
||||
export default function Services() {
|
||||
const services = [
|
||||
{
|
||||
title: "Sabbath School",
|
||||
time: "9:30 AM",
|
||||
day: "Saturday",
|
||||
description: "Interactive Bible study and discussion groups for all ages. Join us for meaningful conversations about Scripture and practical Christian living.",
|
||||
icon: "📖",
|
||||
color: "from-blue-500 to-blue-600"
|
||||
},
|
||||
{
|
||||
title: "Divine Worship",
|
||||
time: "11:00 AM",
|
||||
day: "Saturday",
|
||||
description: "Our main worship service featuring inspiring music, prayer, and biblical messages that speak to everyday life and spiritual growth.",
|
||||
icon: "⛪",
|
||||
color: "from-primary to-primaryDeep"
|
||||
},
|
||||
{
|
||||
title: "Potluck Fellowship",
|
||||
time: "After Worship",
|
||||
day: "Saturday",
|
||||
description: "Stay after the service for a delicious meal and warm fellowship. Visitors are especially welcome to join us for this time of community.",
|
||||
icon: "🍽️",
|
||||
color: "from-green-500 to-green-600"
|
||||
}
|
||||
]
|
||||
|
||||
const additionalInfo = [
|
||||
{
|
||||
title: "Church Bus Service",
|
||||
description: "Transportation available for those who need assistance getting to church. Please contact us to arrange pickup.",
|
||||
icon: "🚌"
|
||||
},
|
||||
{
|
||||
title: "Family-Friendly Environment",
|
||||
description: "Children are welcome in all our services. We also offer age-appropriate activities and care during worship times.",
|
||||
icon: "👨👩👧👦"
|
||||
},
|
||||
{
|
||||
title: "Visitor Welcome",
|
||||
description: "First time visiting? We're excited to meet you! Greeters are available to help you feel at home.",
|
||||
icon: "🤝"
|
||||
}
|
||||
]
|
||||
|
||||
return (
|
||||
<>
|
||||
<Helmet>
|
||||
<title>Services - Annaville Seventh-day Adventist Church</title>
|
||||
<meta name="description" content="Join us for Sabbath School at 9:30 AM and Divine Worship at 11:00 AM every Saturday. Experience meaningful fellowship and spiritual growth in a welcoming community." />
|
||||
<meta name="keywords" content="worship services, Sabbath School, Divine Worship, fellowship, church services, Annaville SDA" />
|
||||
</Helmet>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="bg-gradient-to-br from-primary to-primaryDeep text-white py-20">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h1 className="font-heading text-h1 mb-6">Worship Services</h1>
|
||||
<p className="text-xl text-white/90 leading-relaxed">
|
||||
Join us every Saturday for inspiring worship, meaningful Bible study, and warm fellowship.
|
||||
All are welcome to experience the love of Christ in our community.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Main Services Section */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-heading text-h2 mb-6">Weekly Services</h2>
|
||||
<p className="text-body text-muted max-w-3xl mx-auto">
|
||||
The Annaville SDA Church offers worship services for members, non-members, or anyone interested
|
||||
in learning more about practical Christian living from the Word of God.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-2 gap-12 items-start">
|
||||
{/* Services Cards */}
|
||||
<div className="space-y-8">
|
||||
{services.map((service, index) => (
|
||||
<div key={index} className="group">
|
||||
<div className="bg-white p-8 rounded-xl shadow-sm border border-subtle hover:shadow-md transition-all duration-300">
|
||||
<div className="flex items-start gap-6">
|
||||
<div className={`text-4xl p-3 rounded-lg bg-gradient-to-br ${service.color} text-white`}>
|
||||
{service.icon}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="font-heading text-h3 text-ink mb-3">{service.title}</h3>
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<span className="inline-flex items-center px-4 py-2 bg-primary/10 text-primary rounded-full text-sm font-medium">
|
||||
{service.time}
|
||||
</span>
|
||||
<span className="text-muted text-sm">{service.day}</span>
|
||||
</div>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
{service.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Image Section */}
|
||||
<div className="relative">
|
||||
<div className="sticky top-8">
|
||||
<img
|
||||
src="/assets/family_entry.png"
|
||||
alt="Church bus and family entry - People walking up steps to the church entrance"
|
||||
className="w-full rounded-xl shadow-lg"
|
||||
/>
|
||||
<div className="mt-6 p-6 bg-sand rounded-xl">
|
||||
<h3 className="font-heading text-h3 mb-4 text-primary">Plan Your Visit</h3>
|
||||
<p className="text-body text-muted mb-4">
|
||||
We're located at 2710 Violet Road in Corpus Christi.
|
||||
Parking is available on-site, and our greeters will help you find your way.
|
||||
</p>
|
||||
<a
|
||||
href="/contact"
|
||||
className="btn w-full"
|
||||
>
|
||||
Get Directions
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Additional Information Section */}
|
||||
<section className="section bg-sand">
|
||||
<div className="container">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="font-heading text-h2 mb-6">What to Expect</h2>
|
||||
<p className="text-body text-muted max-w-3xl mx-auto">
|
||||
We want your visit to be comfortable and meaningful. Here's what you can expect when you join us.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{additionalInfo.map((info, index) => (
|
||||
<div key={index} className="text-center">
|
||||
<div className="bg-white p-8 rounded-xl shadow-sm border border-subtle">
|
||||
<div className="text-4xl mb-4">{info.icon}</div>
|
||||
<h3 className="font-heading text-h3 mb-4 text-primary">{info.title}</h3>
|
||||
<p className="text-body text-muted leading-relaxed">
|
||||
{info.description}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Call to Action Section */}
|
||||
<section className="section">
|
||||
<div className="container">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<div className="bg-white p-12 rounded-xl shadow-sm border border-subtle">
|
||||
<h3 className="font-heading text-h3 mb-6">Ready to Join Us?</h3>
|
||||
<p className="text-body text-muted mb-8">
|
||||
We'd love to welcome you this Saturday! Have questions about our services or need assistance?
|
||||
Don't hesitate to reach out.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<a
|
||||
href="/contact"
|
||||
className="btn"
|
||||
>
|
||||
Contact Us
|
||||
</a>
|
||||
<a
|
||||
href="/visit"
|
||||
className="btn-outline"
|
||||
>
|
||||
Plan Your Visit
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
export default function TermsofUse() {
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet><title>Terms of Use | Annaville SDA Church</title></Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-4">Terms of Use</h1>
|
||||
<p className='text-[16px]'>Terms of use content placeholder.</p>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
|
||||
import React from 'react'
|
||||
import { Helmet } from 'react-helmet-async'
|
||||
export default function PlanYourVisit() {
|
||||
return (
|
||||
<section className="section">
|
||||
<Helmet><title>Plan Your Visit | Annaville SDA Church</title></Helmet>
|
||||
<div className="container">
|
||||
<h1 className="font-heading text-display30 mb-4">Plan Your Visit</h1>
|
||||
|
||||
<p className="text-[16px] mb-4">Tell us you're coming and we’ll greet you. Enjoy worship!</p>
|
||||
<form className="space-y-3 max-w-xl">
|
||||
<div className="visually-hidden" aria-hidden="true">
|
||||
<label htmlFor="website2">Do not fill</label>
|
||||
<input id="website2" name="website2" type="text" tabIndex="-1" autoComplete="off" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="name2" className="block">Your Name</label>
|
||||
<input id="name2" required className="w-full border rounded-md px-3 py-3" placeholder="Your Name" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="email2" className="block">Your Email</label>
|
||||
<input id="email2" type="email" required className="w-full border rounded-md px-3 py-3" placeholder="Your Email" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="date2" className="block">Visit Date (optional)</label>
|
||||
<input id="date2" type="date" className="w-full border rounded-md px-3 py-3" />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="msg2" className="block">Your Message</label>
|
||||
<textarea id="msg2" className="w-full border rounded-md px-3 py-3" placeholder="Your Message"></textarea>
|
||||
</div>
|
||||
<div className="flex items-start gap-2">
|
||||
<input id="consent2" type="checkbox" required className="mt-1" />
|
||||
<label htmlFor="consent2" className="text-small">I consent to be contacted about my visit.</label>
|
||||
</div>
|
||||
<button className="btn w-full">Submit</button>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
// Analytics configuration for Google Analytics and Google Tag Manager
|
||||
// Replace with your actual tracking IDs
|
||||
|
||||
export const analyticsConfig = {
|
||||
// Google Analytics 4 Measurement ID
|
||||
ga4Id: 'G-XXXXXXXXXX', // Replace with your GA4 ID
|
||||
|
||||
// Google Tag Manager Container ID
|
||||
gtmId: 'GTM-XXXXXXX', // Replace with your GTM ID
|
||||
|
||||
// Google Analytics Universal Analytics (legacy)
|
||||
uaId: 'UA-XXXXXXXXX-X', // Replace with your UA ID if needed
|
||||
|
||||
// Custom dimensions and metrics
|
||||
customDimensions: {
|
||||
userType: 'cd1',
|
||||
pageType: 'cd2',
|
||||
contentCategory: 'cd3'
|
||||
},
|
||||
|
||||
// Enhanced ecommerce settings
|
||||
ecommerce: {
|
||||
enabled: false, // Set to true if you have ecommerce
|
||||
currency: 'USD'
|
||||
},
|
||||
|
||||
// Privacy settings
|
||||
privacy: {
|
||||
anonymizeIp: true,
|
||||
respectDoNotTrack: true,
|
||||
cookieConsent: true
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize Google Analytics
|
||||
export const initGA = () => {
|
||||
if (typeof window !== 'undefined' && window.gtag) {
|
||||
// GA4 is already loaded
|
||||
return
|
||||
}
|
||||
|
||||
// Load Google Analytics script
|
||||
const script = document.createElement('script')
|
||||
script.async = true
|
||||
script.src = `https://www.googletagmanager.com/gtag/js?id=${analyticsConfig.ga4Id}`
|
||||
document.head.appendChild(script)
|
||||
|
||||
// Initialize gtag
|
||||
window.dataLayer = window.dataLayer || []
|
||||
window.gtag = function() {
|
||||
window.dataLayer.push(arguments)
|
||||
}
|
||||
|
||||
window.gtag('js', new Date())
|
||||
window.gtag('config', analyticsConfig.ga4Id, {
|
||||
anonymize_ip: analyticsConfig.privacy.anonymizeIp,
|
||||
page_title: document.title,
|
||||
page_location: window.location.href
|
||||
})
|
||||
}
|
||||
|
||||
// Initialize Google Tag Manager
|
||||
export const initGTM = () => {
|
||||
if (typeof window !== 'undefined' && window.dataLayer) {
|
||||
// GTM is already loaded
|
||||
return
|
||||
}
|
||||
|
||||
// Load GTM script
|
||||
const script = document.createElement('script')
|
||||
script.innerHTML = `
|
||||
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
|
||||
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
|
||||
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
|
||||
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
|
||||
})(window,document,'script','dataLayer','${analyticsConfig.gtmId}');
|
||||
`
|
||||
document.head.appendChild(script)
|
||||
|
||||
// Add GTM noscript fallback
|
||||
const noscript = document.createElement('noscript')
|
||||
noscript.innerHTML = `
|
||||
<iframe src="https://www.googletagmanager.com/ns.html?id=${analyticsConfig.gtmId}"
|
||||
height="0" width="0" style="display:none;visibility:hidden"></iframe>
|
||||
`
|
||||
document.body.insertBefore(noscript, document.body.firstChild)
|
||||
}
|
||||
|
||||
// Enhanced event tracking
|
||||
export const trackEvent = (eventName, parameters = {}) => {
|
||||
if (typeof window !== 'undefined' && window.gtag) {
|
||||
window.gtag('event', eventName, {
|
||||
...parameters,
|
||||
custom_map: analyticsConfig.customDimensions
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Page view tracking
|
||||
export const trackPageView = (pageTitle, pageLocation) => {
|
||||
if (typeof window !== 'undefined' && window.gtag) {
|
||||
window.gtag('config', analyticsConfig.ga4Id, {
|
||||
page_title: pageTitle,
|
||||
page_location: pageLocation || window.location.href
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// Conversion tracking
|
||||
export const trackConversion = (conversionId, conversionLabel) => {
|
||||
if (typeof window !== 'undefined' && window.gtag) {
|
||||
window.gtag('event', 'conversion', {
|
||||
send_to: `AW-${conversionId}/${conversionLabel}`
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
export const track = (eventName, params = {}) => {
|
||||
if (window && window.gtag) {
|
||||
window.gtag('event', eventName, params)
|
||||
} else {
|
||||
console.log('[analytics]', eventName, params)
|
||||
}
|
||||
}
|
||||
|
||||
// DataLayer tracking for GA4/GTM
|
||||
export const DL = (...args) => {
|
||||
if (window && window.dataLayer) {
|
||||
window.dataLayer.push(...args)
|
||||
}
|
||||
}
|
||||
|
||||
export const events = {
|
||||
CTA_CLICK: 'cta_click',
|
||||
CLICK_TO_CALL: 'click_to_call',
|
||||
OPEN_DIRECTIONS: 'open_directions',
|
||||
FORM_START: 'form_start',
|
||||
FORM_SUBMIT: 'form_submit',
|
||||
NEWSLETTER_SIGNUP: 'newsletter_signup',
|
||||
EVENT_DETAILS_VIEW: 'event_details_view',
|
||||
SERMON_PLAY: 'sermon_play'
|
||||
}
|
||||
|
||||
// Initialize analytics event listeners
|
||||
export const initAnalytics = () => {
|
||||
// CTA tracking
|
||||
document.querySelectorAll('[data-cta]').forEach(el => {
|
||||
el.addEventListener('click', () => {
|
||||
DL({ event: 'cta_click', label: el.dataset.cta })
|
||||
})
|
||||
})
|
||||
|
||||
// Form tracking
|
||||
const visitForm = document.getElementById('visit-form')
|
||||
if (visitForm) {
|
||||
visitForm.addEventListener('focusin', () => {
|
||||
DL({ event: 'form_start', form_id: 'visit_home' })
|
||||
}, { once: true })
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
// Email service utility for form submissions
|
||||
// This is a placeholder implementation - replace with your actual email service
|
||||
|
||||
export const sendVisitRequest = async (formData) => {
|
||||
try {
|
||||
// Simulate API call - replace with actual email service
|
||||
console.log('Sending visit request:', formData)
|
||||
|
||||
// Example integration with services like:
|
||||
// - EmailJS
|
||||
// - SendGrid
|
||||
// - AWS SES
|
||||
// - Netlify Forms
|
||||
// - Vercel Functions
|
||||
|
||||
// For now, simulate a successful response
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Visit request sent successfully'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending visit request:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Failed to send visit request. Please try again.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const sendContactForm = async (formData) => {
|
||||
try {
|
||||
console.log('Sending contact form:', formData)
|
||||
|
||||
// Simulate API call
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Message sent successfully'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending contact form:', error)
|
||||
return {
|
||||
success: false,
|
||||
message: 'Failed to send message. Please try again.'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Email templates
|
||||
export const emailTemplates = {
|
||||
visitRequest: (data) => ({
|
||||
subject: 'New Visit Request - Annaville SDA Church',
|
||||
body: `
|
||||
New visit request received:
|
||||
|
||||
Name: ${data.name}
|
||||
Email: ${data.email}
|
||||
Visit Date: ${data.date || 'Not specified'}
|
||||
Message: ${data.message}
|
||||
Consent: ${data.consent ? 'Yes' : 'No'}
|
||||
|
||||
Please respond to this request within 24 hours.
|
||||
`
|
||||
}),
|
||||
|
||||
autoReply: (data) => ({
|
||||
subject: 'Thank you for your visit request - Annaville SDA Church',
|
||||
body: `
|
||||
Dear ${data.name},
|
||||
|
||||
Thank you for your interest in visiting Annaville Seventh-day Adventist Church!
|
||||
|
||||
We've received your visit request and will be in touch soon with directions and parking information.
|
||||
|
||||
Service Times:
|
||||
- Sabbath School: 9:30 AM
|
||||
- Worship Service: 11:00 AM
|
||||
|
||||
Location: 2710 Violet Rd, Corpus Christi, TX 78410
|
||||
|
||||
We look forward to meeting you!
|
||||
|
||||
Blessings,
|
||||
Annaville SDA Church Team
|
||||
`
|
||||
})
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ["./index.html", "./src/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#7E0F14",
|
||||
primaryHover: "#B10E14",
|
||||
primaryDeep: "#5D0B0E",
|
||||
surface: "#FFFFFF",
|
||||
sand: "#F5F1EC",
|
||||
ink: "#1B1F23",
|
||||
muted: "#5A6675",
|
||||
focus: "#1F6FEB"
|
||||
},
|
||||
fontFamily: {
|
||||
body: ["Inter", "system-ui", "Segoe UI", "Roboto", "Arial", "sans-serif"],
|
||||
heading: ["Crimson Text", "ui-serif", "Georgia", "serif"]
|
||||
},
|
||||
fontSize: {
|
||||
h1: ["40px", { lineHeight: "1.45" }],
|
||||
h2: ["28px", { lineHeight: "1.45" }],
|
||||
h3: ["20px", { lineHeight: "1.45" }],
|
||||
body: ["16px", { lineHeight: "1.6" }],
|
||||
small: ["14px", { lineHeight: "1.45" }]
|
||||
},
|
||||
spacing: {
|
||||
'4': '4px',
|
||||
'8': '8px',
|
||||
'12': '12px',
|
||||
'16': '16px',
|
||||
'24': '24px',
|
||||
'32': '32px',
|
||||
'48': '48px',
|
||||
'64': '64px'
|
||||
},
|
||||
borderRadius: {
|
||||
xl: "12px",
|
||||
pill: "9999px"
|
||||
},
|
||||
boxShadow: {
|
||||
card: "0 4px 12px rgba(0,0,0,0.06)"
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
build: { target: 'es2018', sourcemap: false },
|
||||
server: { port: 5173 }
|
||||
})
|
||||
Loading…
Reference in New Issue