370 lines
12 KiB
TypeScript
370 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import ReactLenis from "lenis/react";
|
|
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
|
|
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
|
|
import FeatureCardNine from '@/components/sections/feature/FeatureCardNine';
|
|
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
|
|
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
|
|
import SplitAbout from '@/components/sections/about/SplitAbout';
|
|
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="rounded"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumSizeLargeTitles"
|
|
background="circleGradient"
|
|
cardStyle="inset"
|
|
primaryButtonStyle="shadow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<ReactLenis root>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarLayoutFloatingInline
|
|
navItems={[
|
|
{
|
|
name: "Visit",
|
|
id: "#about",
|
|
},
|
|
{
|
|
name: "Groups",
|
|
id: "#features",
|
|
},
|
|
{
|
|
name: "Watch",
|
|
id: "#contact",
|
|
},
|
|
{
|
|
name: "Give",
|
|
id: "#contact",
|
|
},
|
|
]}
|
|
brandName="Cloverdale Church of Christ"
|
|
button={{
|
|
text: "Plan Your Visit",
|
|
href: "#contact",
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
background={{
|
|
variant: "gradient-bars",
|
|
}}
|
|
title="A Place to Know, Grow, and Share Jesus"
|
|
description="Sundays at 10:15 AM in Cloverdale, Indiana. Come as you are—well save you a seat."
|
|
buttons={[
|
|
{
|
|
text: "Plan Your Visit",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
text: "Watch Live",
|
|
href: "#",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/beautiful-church-background_23-2149285711.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
avatars={[
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/beautiful-church-background_23-2149285700.jpg",
|
|
alt: "Warm community member",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/priests-praying-together-church_23-2149315981.jpg",
|
|
alt: "Friendly greeter",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/interior-details-catholic-church-with-wooden-benches_169016-21658.jpg",
|
|
alt: "Happy member",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/candle-shines-bronze-candleholder_1304-5594.jpg",
|
|
alt: "Welcoming person",
|
|
},
|
|
{
|
|
src: "http://img.b2bpic.net/free-photo/front-view-smiling-rehab-patients-applauding_23-2148398470.jpg",
|
|
alt: "Community smile",
|
|
},
|
|
]}
|
|
avatarText="Join our community of over 500+ members."
|
|
marqueeItems={[
|
|
{
|
|
type: "text",
|
|
text: "Know Christ",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Grow Together",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Share His Love",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Cloverdale Community",
|
|
},
|
|
{
|
|
type: "text",
|
|
text: "Sunday Worship",
|
|
},
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<SplitAbout
|
|
textboxLayout="split"
|
|
useInvertedBackground={true}
|
|
title="Welcome Home"
|
|
description="We are a community dedicated to knowing Christ, growing in faith together, and sharing His love with the world. No matter your background, you belong here."
|
|
bulletPoints={[
|
|
{
|
|
title: "Come As You Are",
|
|
description: "You don't need to dress up or have all the answers. Just bring your authentic self.",
|
|
},
|
|
{
|
|
title: "Real Community",
|
|
description: "We grow best when we grow together in relationships that matter.",
|
|
},
|
|
{
|
|
title: "Practical Faith",
|
|
description: "We apply biblical truths to our everyday lives in modern ways.",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/friends-smiling-while-listening-their-friend-playing-guitar_23-2149187036.jpg?_wi=1"
|
|
mediaAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardNine
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
features={[
|
|
{
|
|
title: "Small Groups",
|
|
description: "Build deeper relationships through our weekly small group studies.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/multiracial-group-five-friends-having-coffee-together_1139-1024.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/people-drinking-coffee-spacious-cafeteria_23-2150424013.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-church-background_23-2149285711.jpg?_wi=2",
|
|
imageAlt: "small groups meeting coffee fellowship",
|
|
},
|
|
{
|
|
title: "Serve Opportunities",
|
|
description: "Discover ways to use your gifts to serve our local community.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/multiethnic-female-volunteers-serving-free-food-homeless-man-outdoor-food-bank-non-profit-group-offers-humanitarian-aid-fosters-community-helping-hungry-less-privileged_482257-72623.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/group-young-people_53876-21284.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/friends-smiling-while-listening-their-friend-playing-guitar_23-2149187036.jpg?_wi=2",
|
|
imageAlt: "small groups meeting coffee fellowship",
|
|
},
|
|
{
|
|
title: "Watch Online",
|
|
description: "Stay connected through our weekly live stream and sermon archive.",
|
|
phoneOne: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/close-up-priest-using-laptop_23-2149284667.jpg",
|
|
},
|
|
phoneTwo: {
|
|
imageSrc: "http://img.b2bpic.net/free-photo/smiley-people-virtual-date-laptop-high-angle_23-2149295184.jpg",
|
|
},
|
|
imageSrc: "http://img.b2bpic.net/free-photo/interior-design-beautiful-castle_23-2151010518.jpg?_wi=1",
|
|
imageAlt: "small groups meeting coffee fellowship",
|
|
},
|
|
]}
|
|
showStepNumbers={true}
|
|
title="Grow With Us"
|
|
description="Find your place to contribute, connect, and serve within our church family."
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardTwo
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="bento-grid"
|
|
useInvertedBackground={true}
|
|
metrics={[
|
|
{
|
|
id: "m1",
|
|
value: "10:15 AM",
|
|
description: "Sunday Service Time",
|
|
},
|
|
{
|
|
id: "m2",
|
|
value: "50+",
|
|
description: "Groups Meeting Weekly",
|
|
},
|
|
{
|
|
id: "m3",
|
|
value: "12+",
|
|
description: "Local Outreach Projects",
|
|
},
|
|
]}
|
|
title="Our Impact"
|
|
description="See how God is working through our community in Cloverdale."
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardOne
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
gridVariant="three-columns-all-equal-width"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1",
|
|
name: "Sarah J.",
|
|
role: "Active Attender",
|
|
company: "Cloverdale",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/team-young-colleagues-having-meeting-cafe_273609-16129.jpg",
|
|
},
|
|
{
|
|
id: "2",
|
|
name: "Michael B.",
|
|
role: "New Visitor",
|
|
company: "Cloverdale",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/top-view-people-cheering-with-coffee-mugs-office-meeting_23-2148817072.jpg",
|
|
},
|
|
{
|
|
id: "3",
|
|
name: "Emily R.",
|
|
role: "Small Group Leader",
|
|
company: "Cloverdale",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/mother-carrying-tray-cups-with-defocused-father-son_23-2148414874.jpg",
|
|
},
|
|
{
|
|
id: "4",
|
|
name: "David K.",
|
|
role: "Parent",
|
|
company: "Cloverdale",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/person-drinking-beverage-while-break-time_23-2149256930.jpg",
|
|
},
|
|
{
|
|
id: "5",
|
|
name: "Jennifer L.",
|
|
role: "Volunteer",
|
|
company: "Cloverdale",
|
|
rating: 5,
|
|
imageSrc: "http://img.b2bpic.net/free-photo/best-friends-celebrating-new-year-that-s-coming_23-2149144064.jpg",
|
|
},
|
|
]}
|
|
title="Stories of Transformation"
|
|
description="Hear how members of our church have found belonging and faith."
|
|
/>
|
|
</div>
|
|
|
|
<div id="faq" data-section="faq">
|
|
<FaqSplitText
|
|
useInvertedBackground={true}
|
|
faqs={[
|
|
{
|
|
id: "1",
|
|
title: "What should I wear?",
|
|
content: "Come as you are! You'll see people in everything from jeans to business casual.",
|
|
},
|
|
{
|
|
id: "2",
|
|
title: "Is there child care?",
|
|
content: "Yes, we offer safe, engaging children's programs during the service.",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "How long is the service?",
|
|
content: "Our Sunday service typically lasts about 75 minutes.",
|
|
},
|
|
]}
|
|
sideTitle="Frequently Asked Questions"
|
|
sideDescription="Everything you need to know before visiting us this Sunday."
|
|
faqsAnimation="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactSplitForm
|
|
useInvertedBackground={false}
|
|
title="Plan Your Visit"
|
|
description="Let us know you're coming, and we'll save you a seat at our 10:15 AM service."
|
|
inputs={[
|
|
{
|
|
name: "name",
|
|
type: "text",
|
|
placeholder: "Your Name",
|
|
},
|
|
{
|
|
name: "email",
|
|
type: "email",
|
|
placeholder: "Your Email",
|
|
},
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-photo/interior-design-beautiful-castle_23-2151010518.jpg?_wi=2"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterLogoEmphasis
|
|
columns={[
|
|
{
|
|
items: [
|
|
{
|
|
label: "About",
|
|
href: "#about",
|
|
},
|
|
{
|
|
label: "Groups",
|
|
href: "#features",
|
|
},
|
|
{
|
|
label: "Watch Live",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
items: [
|
|
{
|
|
label: "Give",
|
|
href: "#",
|
|
},
|
|
{
|
|
label: "Contact",
|
|
href: "#contact",
|
|
},
|
|
{
|
|
label: "Privacy Policy",
|
|
href: "#",
|
|
},
|
|
],
|
|
},
|
|
]}
|
|
logoText="Cloverdale Church of Christ"
|
|
/>
|
|
</div>
|
|
</ReactLenis>
|
|
</ThemeProvider>
|
|
);
|
|
}
|