import React, { useState } from 'react';
import { Menu, X, ChevronRight, Church, Cpu, Lightbulb, Users, ArrowRight } from 'lucide-react';
export default function App() {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
const [logoError, setLogoError] = useState(false);
// Smooth scrolling for navigation links
const scrollToSection = (sectionId) => {
setIsMobileMenuOpen(false);
const element = document.getElementById(sectionId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
};
return (
<div className="min-h-screen bg-[#e8e8ed] text-[#1b1f26] font-sans selection:bg-[#1b1f26] selection:text-[#e8e8ed]">
{/* 1. Navigation Header */}
<header className="fixed top-0 w-full z-50 bg-[#e8e8ed]/90 backdrop-blur-md border-b border-[#686a70]/20 transition-all">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between items-center h-20">
{/* Logo Area */}
<div className="flex-shrink-0 flex items-center cursor-pointer" onClick={() => scrollToSection('hero')}>
{!logoError ? (
<img
src="JC-combo-mark-hz-light.png"
alt="JARVIS Consulting Logo"
className="h-10 w-auto"
onError={() => setLogoError(true)}
/>
) : (
<div className="flex items-center gap-2">
<span className="text-2xl font-bold tracking-tighter text-[#1b1f26]">JC</span>
<div className="flex flex-col leading-none">
<span className="text-lg font-semibold tracking-wide">JARVIS</span>
<span className="text-sm text-[#686a70]">Consulting</span>
</div>
</div>
)}
</div>
{/* Desktop Navigation */}
<nav className="hidden md:flex space-x-8">
{['Home', 'About', 'Services', 'Contact'].map((item) => (
<button
key={item}
onClick={() => scrollToSection(item.toLowerCase())}
className="text-[#686a70] hover:text-[#1b1f26] px-3 py-2 text-sm font-medium transition-colors"
>
{item}
</button>
))}
</nav>
{/* Mobile menu button */}
<div className="md:hidden flex items-center">
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className="text-[#1b1f26] hover:text-[#686a70] focus:outline-none"
>
{isMobileMenuOpen ? <X size={28} /> : <Menu size={28} />}
</button>
</div>
</div>
</div>
{/* Mobile Navigation */}
{isMobileMenuOpen && (
<div className="md:hidden bg-[#e8e8ed] border-t border-[#686a70]/20 absolute w-full shadow-lg">
<div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
{['Home', 'About', 'Services', 'Contact'].map((item) => (
<button
key={item}
onClick={() => scrollToSection(item.toLowerCase())}
className="block w-full text-left px-3 py-4 text-base font-medium text-[#1b1f26] hover:bg-[#686a70]/10"
>
{item}
</button>
))}
</div>
</div>
)}
</header>
<main className="pt-20">
{/* 2. Hero Section */}
<section id="home" className="relative h-[85vh] min-h-[600px] flex items-center justify-center overflow-hidden">
{/* Background Image with Overlay */}
<div
className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: 'url("https://images.unsplash.com/photo-1438032005730-c779502df39b?auto=format&fit=crop&q=80&w=2000")',
}}
/>
<div className="absolute inset-0 z-0 bg-[#1b1f26]/80 mix-blend-multiply" />
<div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<span className="block text-[#e8e8ed]/80 text-sm md:text-base tracking-[0.2em] uppercase mb-4 font-semibold">
Faith meets Innovation
</span>
<h1 className="text-4xl md:text-6xl lg:text-7xl font-serif text-[#e8e8ed] leading-tight mb-8 max-w-4xl mx-auto">
Equipping the Church for Every Good Work
</h1>
<div className="flex flex-col sm:flex-row justify-center items-center gap-4">
<button
onClick={() => scrollToSection('services')}
className="bg-[#e8e8ed] text-[#1b1f26] hover:bg-white px-8 py-4 rounded-sm font-semibold transition-all shadow-lg flex items-center gap-2 group"
>
Explore Services
<ArrowRight size={18} className="group-hover:translate-x-1 transition-transform" />
</button>
<button
onClick={() => scrollToSection('contact')}
className="bg-transparent border border-[#e8e8ed] text-[#e8e8ed] hover:bg-[#e8e8ed]/10 px-8 py-4 rounded-sm font-semibold transition-all"
>
Contact Us
</button>
</div>
</div>
</section>
{/* 3. About & Mission Section */}
<section id="about" className="py-24 bg-white relative">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
{/* Text Blocks */}
<div className="space-y-10">
<div>
<h2 className="text-3xl md:text-4xl font-serif text-[#1b1f26] mb-6 relative inline-block">
Who We Are
<div className="absolute -bottom-2 left-0 w-1/3 h-1 bg-[#686a70]/30" />
</h2>
<p className="text-lg text-[#686a70] leading-relaxed">
JARVIS Consulting, LLC exists to help churches and faith-based organizations thoughtfully integrate artificial intelligence into their ministries, administration, and community outreach. Rooted in biblical principles and guided by technological excellence, Jarvis Consulting bridges the gap between faith and innovation, empowering the Church to steward modern tools for eternal impact.
</p>
</div>
<div>
<h3 className="text-2xl font-serif text-[#1b1f26] mb-4 flex items-center gap-3">
<Lightbulb className="text-[#686a70]" size={24} />
Our Mission
</h3>
<p className="text-lg text-[#686a70] leading-relaxed">
JARVIS Consulting helps churches and faith-based organizations integrate artificial intelligence with clarity, integrity, and purpose. We believe technology should serve ministry, not replace it, empowering leaders to communicate more effectively, steward resources wisely, and disciple their communities in an increasingly digital world. Through personalized strategy, training, and implementation, JARVIS Consulting, LLC bridges the gap between innovation and mission, guiding ministries to use AI tools that align with their biblical values and vision.
</p>
</div>
</div>
{/* Staggered Grid Visuals */}
<div className="relative h-[600px] hidden md:block">
{/* Traditional Image */}
<div className="absolute top-0 right-0 w-3/4 h-2/3 rounded-sm overflow-hidden shadow-2xl z-10">
<img
src="https://images.unsplash.com/photo-1548625361-ec853f5686af?auto=format&fit=crop&q=80&w=800"
alt="Traditional Church Architecture"
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-[#1b1f26]/10" />
</div>
{/* Modern/Tech Motif */}
<div className="absolute bottom-0 left-0 w-2/3 h-1/2 rounded-sm overflow-hidden shadow-xl z-20 border-8 border-white">
<img
src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?auto=format&fit=crop&q=80&w=800"
alt="Modern Technology"
className="w-full h-full object-cover grayscale opacity-90"
/>
<div className="absolute inset-0 bg-[#1b1f26]/20 mix-blend-overlay" />
</div>
{/* Decorative Icon */}
<div className="absolute top-1/2 left-1/4 -translate-y-1/2 -translate-x-1/2 bg-[#1b1f26] p-4 rounded-full shadow-xl z-30">
<Church className="text-[#e8e8ed]" size={32} />
</div>
</div>
</div>
</div>
</section>
{/* 4. Our Services Section */}
<section id="services" className="py-24 bg-[#1b1f26] text-[#e8e8ed] relative overflow-hidden">
{/* Subtle Diagonal Background Element */}
<div className="absolute top-0 right-0 w-full h-full bg-gradient-to-bl from-[#686a70]/10 to-transparent transform -skew-y-6 scale-110 origin-top-right pointer-events-none" />
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
<div className="text-center mb-16">
<h2 className="text-3xl md:text-5xl font-serif mb-6">Our Services</h2>
<p className="max-w-3xl mx-auto text-[#686a70] text-lg lg:text-xl">
JARVIS Consulting begins with a <strong className="text-[#e8e8ed] font-medium">free initial consultation</strong> designed to understand your church's needs, goals, and readiness for AI integration. This conversation allows us to assess fit, clarify opportunities, and determine next steps.
</p>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mt-12">
{/* Option 1 */}
<div className="bg-white/5 border border-[#686a70]/30 p-8 rounded-sm hover:bg-white/10 transition-colors backdrop-blur-sm">
<div className="bg-[#686a70]/20 w-14 h-14 rounded-full flex items-center justify-center mb-6">
<Cpu className="text-[#e8e8ed]" size={28} />
</div>
<h3 className="text-2xl font-serif mb-4">One-Time Strategic Consultation</h3>
<p className="text-[#686a70] leading-relaxed">
For ministries seeking targeted guidance. We provide a comprehensive review of your current systems and deliver a strategic roadmap for ethical, effective AI integration tailored to your specific context.
</p>
</div>
{/* Option 2 */}
<div className="bg-white/5 border border-[#686a70]/30 p-8 rounded-sm hover:bg-white/10 transition-colors backdrop-blur-sm">
<div className="bg-[#686a70]/20 w-14 h-14 rounded-full flex items-center justify-center mb-6">
<Users className="text-[#e8e8ed]" size={28} />
</div>
<h3 className="text-2xl font-serif mb-4">Ongoing Developmental Consulting</h3>
<p className="text-[#686a70] leading-relaxed">
For sustained support, implementation, and refinement. We partner with your leadership team over time to ensure AI tools are integrated ethically, smoothly, and consistently in step with your ministry goals.
</p>
</div>
</div>
<div className="mt-16 text-center">
<button
onClick={() => scrollToSection('contact')}
className="bg-[#e8e8ed] text-[#1b1f26] hover:bg-white px-8 py-4 rounded-sm font-semibold transition-all shadow-lg inline-flex items-center gap-2"
>
Schedule Your Free Consultation
<ChevronRight size={20} />
</button>
</div>
</div>
</section>
{/* 5. Our Partners Section */}
<section id="partners" className="py-20 bg-[#e8e8ed] border-b border-[#686a70]/20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
<h2 className="text-2xl font-serif text-[#1b1f26] mb-12">Trusted By</h2>
{/* Logo/Text Grid */}
<div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 mb-16 opacity-70 grayscale">
{['Bedrock Forest', 'Center for New Testament Restoration', 'The Bedrock Network', 'SchoolRightGroup', 'Lumenology'].map((partner, idx) => (
<div key={idx} className="text-xl md:text-2xl font-bold tracking-tight text-[#1b1f26] font-serif">
{partner}
</div>
))}
</div>
{/* Bottom Banner Text */}
<div className="max-w-4xl mx-auto bg-white p-8 rounded-sm shadow-sm border border-[#686a70]/10">
<p className="text-xl text-[#1b1f26] font-serif italic">
"Guided consulting designed to help churches implement AI wisely, ethically, and in step with their ministry goals."
</p>
</div>
</div>
</section>
{/* 6. Contact Us Section */}
<section id="contact" className="py-24 bg-white">
<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-4xl font-serif text-[#1b1f26] mb-4">Contact Us</h2>
<p className="text-lg text-[#686a70]">
Interested in working together? Fill out some info and we will be in touch shortly. We can't wait to hear from you!
</p>
</div>
<form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label htmlFor="firstName" className="block text-sm font-medium text-[#1b1f26] mb-2">First Name *</label>
<input
type="text"
id="firstName"
required
className="w-full px-4 py-3 bg-[#e8e8ed]/50 border border-[#686a70]/30 rounded-sm focus:outline-none focus:ring-2 focus:ring-[#1b1f26] focus:border-transparent transition-shadow"
/>
</div>
<div>
<label htmlFor="lastName" className="block text-sm font-medium text-[#1b1f26] mb-2">Last Name *</label>
<input
type="text"
id="lastName"
required
className="w-full px-4 py-3 bg-[#e8e8ed]/50 border border-[#686a70]/30 rounded-sm focus:outline-none focus:ring-2 focus:ring-[#1b1f26] focus:border-transparent transition-shadow"
/>
</div>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium text-[#1b1f26] mb-2">Email *</label>
<input
type="email"
id="email"
required
className="w-full px-4 py-3 bg-[#e8e8ed]/50 border border-[#686a70]/30 rounded-sm focus:outline-none focus:ring-2 focus:ring-[#1b1f26] focus:border-transparent transition-shadow"
/>
</div>
<div className="flex items-center">
<input
id="newsletter"
type="checkbox"
className="h-5 w-5 text-[#1b1f26] border-[#686a70]/30 rounded focus:ring-[#1b1f26]"
/>
<label htmlFor="newsletter" className="ml-3 block text-sm text-[#686a70]">
Sign up for news and updates
</label>
</div>
<div>
<label htmlFor="message" className="block text-sm font-medium text-[#1b1f26] mb-2">Message *</label>
<textarea
id="message"
rows={5}
required
className="w-full px-4 py-3 bg-[#e8e8ed]/50 border border-[#686a70]/30 rounded-sm focus:outline-none focus:ring-2 focus:ring-[#1b1f26] focus:border-transparent transition-shadow resize-none"
></textarea>
</div>
<div className="pt-4">
<button
type="submit"
className="w-full md:w-auto px-10 py-4 bg-[#1b1f26] text-[#e8e8ed] rounded-sm font-semibold hover:bg-[#1b1f26]/90 transition-colors shadow-md"
>
Submit
</button>
</div>
</form>
</div>
</section>
</main>
{/* Footer */}
<footer className="bg-[#1b1f26] text-[#686a70] py-8 border-t border-[#686a70]/20 text-center">
<p className="text-sm">
© {new Date().getFullYear()} JARVIS Consulting, LLC. All rights reserved.
</p>
</footer>
</div>
);
}
