Merge version_3 into main #3

Merged
bender merged 1 commits from version_3 into main 2026-03-09 15:09:18 +00:00

View File

@@ -7,11 +7,13 @@ import MetricSplitMediaAbout from "@/components/sections/about/MetricSplitMediaA
import FeatureCardTen from "@/components/sections/feature/FeatureCardTen";
import ProductCardTwo from "@/components/sections/product/ProductCardTwo";
import TestimonialCardSixteen from "@/components/sections/testimonial/TestimonialCardSixteen";
import ContactText from "@/components/sections/contact/ContactText";
import FooterMedia from "@/components/sections/footer/FooterMedia";
import { BookOpen, CheckCircle, Cross, Lightbulb } from "lucide-react";
import { BookOpen, CheckCircle, Cross, Lightbulb, Menu, X } from "lucide-react";
import { useState } from "react";
export default function LandingPage() {
const [isMenuOpen, setIsMenuOpen] = useState(false);
return (
<ThemeProvider
defaultButtonVariant="elastic-effect"
@@ -31,12 +33,45 @@ export default function LandingPage() {
navItems={[
{ name: "About", id: "about" },
{ name: "Theology", id: "theology" },
{ name: "Worship", id: "worship" },
{ name: "Bible", id: "bible" },
]}
button={{ text: "Contact Us", href: "contact" }}
button={{
text: (
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="flex items-center gap-2"
aria-label="Toggle menu"
>
{isMenuOpen ? <X size={20} /> : <Menu size={20} />}
</button>
),
href: undefined,
}}
animateOnLoad={true}
/>
{isMenuOpen && (
<div className="absolute top-16 right-0 bg-background border border-accent rounded-lg shadow-lg p-4 z-50 w-48">
<div className="flex flex-col gap-3">
<button
onClick={() => {
setIsMenuOpen(false);
document.getElementById("theology")?.scrollIntoView({ behavior: "smooth" });
}}
className="text-left px-4 py-2 hover:bg-card rounded transition"
>
Church Father
</button>
<button
onClick={() => {
setIsMenuOpen(false);
document.getElementById("teachings")?.scrollIntoView({ behavior: "smooth" });
}}
className="text-left px-4 py-2 hover:bg-card rounded transition"
>
Liturgy
</button>
</div>
</div>
)}
</div>
<div id="hero" data-section="hero">
@@ -65,8 +100,7 @@ export default function LandingPage() {
]}
buttons={[
{ text: "Discover Our Faith", href: "theology" },
{ text: "Explore Teachings", href: "theology" },
{ text: "Join Us", href: "contact" },
{ text: "Explore Teachings", href: "teachings" },
]}
mediaAnimation="slide-up"
/>
@@ -197,19 +231,6 @@ export default function LandingPage() {
/>
</div>
<div id="contact" data-section="contact">
<ContactText
text="Ready to deepen your spiritual journey with the Coptic Orthodox Church? Connect with us today to learn more about our services, teachings, and community."
animationType="entrance-slide"
buttons={[
{ text: "Contact Parish", href: "#" },
{ text: "Visit Us", href: "#" },
]}
background={{ variant: "plain" }}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterMedia
imageSrc="http://img.b2bpic.net/free-photo/gothic-church-arches-historical-walls-frescoes-medieval-interior-design_169016-68685.jpg"
@@ -219,20 +240,19 @@ export default function LandingPage() {
{
title: "Community", items: [
{ label: "About Us", href: "#about" },
{ label: "Worship", href: "#worship" },
{ label: "Theology", href: "#theology" },
{ label: "Events", href: "#" },
],
},
{
title: "Resources", items: [
{ label: "Bible", href: "#bible" },
{ label: "Teachings", href: "#teachings" },
{ label: "Theology", href: "#theology" },
{ label: "Prayer", href: "#" },
],
},
{
title: "Support", items: [
{ label: "Contact", href: "#contact" },
{ label: "Donations", href: "#" },
{ label: "Parish Locator", href: "#" },
],