Launch

2025-10-03 18:27:44 +02:00
parent 63603529f2
commit de2d82da75
14 changed files with 576 additions and 880 deletions
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -2,82 +2,47 @@
 import React from 'react'
 import { Link } from 'react-router-dom'

-export default function Footer(){
+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 className="container grid md:grid-cols-2 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="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">
+            <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>
-          
+          <p className="text-muted text-small">Sabbath School 9:45 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">
@@ -86,7 +51,6 @@ export default function Footer(){
          <div className="text-small flex flex-wrap items-center gap-4">
            <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>
            <Link to="/admin/events" className="btn-outline text-xs px-3 py-1">Admin Events</Link>
          </div>
        </div>
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -4,25 +4,24 @@ 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:'/events', label:'EVENTS' },
-  { to:'/prayer-requests', label:'PRAYER REQUESTS' },
-  { to:'/calendar', label:'CALENDAR' },
-  { to:'/beliefs', label:'OUR BELIEFS' },
+  { to: '/about', label: 'ABOUT US' },
+  { to: '/services', label: 'SERVICES' },
+  { to: '/resources', label: 'RESOURCES' },
+  { to: '/events', label: 'EVENTS' },
+  { to: '/calendar', label: 'CALENDAR' },
+  { to: '/beliefs', label: 'OUR BELIEFS' },
 ]

-export default function Header(){
+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" 
+            <img
+              src="/assets/favicon.ico.gif"
+              alt="Annaville SDA Church Logo"
              className="w-20 h-20 rounded-lg"
            />
            <span>
@@ -32,60 +31,62 @@ export default function Header(){
        </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'}`}
+            <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'})}
+          <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)}
+        <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 role="dialog" aria-modal="true" className="md:hidden fixed inset-0 z-[100] bg-white" onClick={() => setOpen(false)}>
+          <div className="h-full w-full bg-white flex flex-col" onClick={e => e.stopPropagation()}>
+            <div className="bg-white border-b border-gray-200 p-4 flex justify-between items-center flex-shrink-0">
+              <span className="font-heading text-2xl font-bold text-gray-900">Menu</span>
+              <button className="text-3xl text-gray-700 leading-none p-2 hover:bg-gray-100 rounded-lg transition-colors" 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'}`}
+            <nav className="flex-1 flex flex-col justify-center px-8 py-8 bg-white">
+              <ul className="space-y-4">
+                {navItems.map(item => (
+                  <li key={item.to}>
+                    <NavLink
+                      to={item.to}
+                      onClick={() => setOpen(false)}
+                      className={({ isActive }) => `block py-3 font-semibold text-lg text-center transition-colors ${isActive ? 'text-primary' : 'text-gray-900 hover:text-primary'}`}
+                    >
+                      {item.label}
+                    </NavLink>
+                  </li>
+                ))}
+                <li className="pt-4 border-t border-gray-200">
+                  <Link
+                    to="/contact"
+                    className="block py-3 font-semibold text-lg text-center text-gray-900 hover:text-primary transition-colors"
+                    onClick={() => { setOpen(false); track(events.CTA_CLICK, { label: 'contact' }) }}
                  >
-                    {item.label}
-                  </NavLink>
+                    Contact Us
+                  </Link>
                </li>
-              ))}
-              <li>
-                <Link 
-                  to="/contact" 
-                  className="btn w-full" 
-                  onClick={()=>{setOpen(false); track(events.CTA_CLICK,{label:'contact'})}}
-                >
-                  Contact Us
-                </Link>
-              </li>
-            </ul>
+              </ul>
+            </nav>
          </div>
        </div>
      )}
--- a/src/components/Hero.jsx
+++ b/src/components/Hero.jsx
@@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'
 import { track, events } from '../utils/analytics'
 import LazyImage from './LazyImage'

-export function TextHero(){
+export function TextHero() {
  const scrollToServiceTimes = () => {
    const element = document.getElementById('service-times')
    if (element) {
@@ -13,6 +13,14 @@ export function TextHero(){
    track(events.CTA_CLICK, { label: 'service_times' })
  }

+  const scrollToUpcomingEvents = () => {
+    const element = document.getElementById('upcoming-events')
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
+    track(events.CTA_CLICK, { label: 'plan_visit' })
+  }
+
  return (
    <section className="relative bg-gradient-to-br from-sand to-surface">
      <div className="container py-20">
@@ -21,18 +29,17 @@ export function TextHero(){
          <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="mb-10 text-muted text-small">Sabbath School 9:45 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' })}
+              <button
+                className="btn"
+                onClick={scrollToUpcomingEvents}
                data-cta="plan_visit"
              >
                Plan Your Visit
-              </Link>
-              <button 
-                className="btn-outline" 
+              </button>
+              <button
+                className="btn-outline"
                onClick={scrollToServiceTimes}
                data-cta="service_times"
              >
@@ -40,12 +47,12 @@ export function TextHero(){
              </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" 
+            <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>
@@ -56,7 +63,7 @@ export function TextHero(){
 }

 // Safe photo hero variant with dim overlay; H1 remains text-first
-export function PhotoHeroSafe(){
+export function PhotoHeroSafe() {
  const scrollToServiceTimes = () => {
    const element = document.getElementById('service-times')
    if (element) {
@@ -65,6 +72,14 @@ export function PhotoHeroSafe(){
    track(events.CTA_CLICK, { label: 'service_times' })
  }

+  const scrollToUpcomingEvents = () => {
+    const element = document.getElementById('upcoming-events')
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth' })
+    }
+    track(events.CTA_CLICK, { label: 'plan_visit' })
+  }
+
  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" />
@@ -72,17 +87,17 @@ export function PhotoHeroSafe(){
      <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="mb-10 text-white/90 text-small">Sabbath School 9:45 AM • Divine Worship 11:00 AM • 2710 Violet Rd</div>
        <div className="flex flex-wrap gap-6">
-          <Link 
-            to="/visit" 
+          <button
            className="btn"
+            onClick={scrollToUpcomingEvents}
            data-cta="plan_visit"
          >
            Plan Your Visit
-          </Link>
-          <button 
-            className="btn-outline text-white border-white hover:bg-white/10" 
+          </button>
+          <button
+            className="btn-outline text-white border-white hover:bg-white/10"
            onClick={scrollToServiceTimes}
            data-cta="service_times"
          >
--- a/src/components/SidebarNav.jsx
+++ b/src/components/SidebarNav.jsx
@@ -2,12 +2,11 @@ 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' },
+  { to: '/about', label: 'ABOUT US' },
+  { to: '/services', label: 'SERVICES' },
+  { to: '/resources', label: 'RESOURCES' },
+  { to: '/calendar', label: 'CALENDAR' },
+  { to: '/beliefs', label: 'OUR BELIEFS' },
 ]

 export default function SidebarNav() {
@@ -15,10 +14,10 @@ export default function SidebarNav() {
    <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}) => `
+          <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' : ''}
@@ -28,13 +27,13 @@ export default function SidebarNav() {
          </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 &gt;&gt;
        </button>
      </div>
-      
+
      <div className="mt-4">
        <a href="#" className="text-blue-600 underline text-sm">Message Center</a>
      </div>