Merge version_1 into main #2
323
src/app/page.tsx
323
src/app/page.tsx
@@ -28,220 +28,131 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "hero",
|
||||
},
|
||||
{
|
||||
name: "Our Work",
|
||||
id: "about",
|
||||
},
|
||||
{
|
||||
name: "Donate",
|
||||
id: "giving",
|
||||
},
|
||||
{
|
||||
name: "Impact",
|
||||
id: "metrics",
|
||||
},
|
||||
]}
|
||||
brandName="PSALMS CHARITY"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "hero" },
|
||||
{ name: "Our Work", id: "about" },
|
||||
{ name: "Donate", id: "giving" },
|
||||
{ name: "Impact", id: "metrics" },
|
||||
]}
|
||||
brandName="PSALMS CHARITY"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Empowering Communities Through Faith and Action"
|
||||
description="Join Psalms Charity in making a tangible difference. Every gift provides food, clean water, and education to those in need."
|
||||
buttons={[
|
||||
{
|
||||
text: "Make a Donation",
|
||||
href: "#giving",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/couple-collects-garbage-garbage-bags-park_1157-27376.jpg"
|
||||
imageAlt="Community support outreach"
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroOverlay
|
||||
title="Empowering Communities Through Faith and Action"
|
||||
description="Join Psalms Charity in making a tangible difference. Every gift provides food, clean water, and education to those in need."
|
||||
buttons={[{ text: "Make a Donation", href: "#giving" }]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/couple-collects-garbage-garbage-bags-park_1157-27376.jpg"
|
||||
imageAlt="Community support outreach"
|
||||
showDimOverlay={true}
|
||||
showBlur={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Mission of Compassion"
|
||||
description="Psalms Charity is dedicated to uplifting lives through sustainable aid programs. We believe that small acts of kindness combined with faith lead to massive transformations."
|
||||
metrics={[
|
||||
{
|
||||
value: "15K+",
|
||||
title: "Lives Touched",
|
||||
},
|
||||
{
|
||||
value: "50+",
|
||||
title: "Communities Served",
|
||||
},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-people-helping_23-2149142777.jpg?_wi=1"
|
||||
imageAlt="Volunteer project activity"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MetricSplitMediaAbout
|
||||
useInvertedBackground={false}
|
||||
title="Our Mission of Compassion"
|
||||
description="Psalms Charity is dedicated to uplifting lives through sustainable aid programs. We believe that small acts of kindness combined with faith lead to massive transformations."
|
||||
metrics={[
|
||||
{ value: "15K+", title: "Lives Touched" },
|
||||
{ value: "50+", title: "Communities Served" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-people-helping_23-2149142777.jpg"
|
||||
imageAlt="Volunteer project activity"
|
||||
mediaAnimation="slide-up"
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="giving" data-section="giving">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
icon: CreditCard,
|
||||
title: "Mastercard",
|
||||
description: "Quick and secure card donations.",
|
||||
},
|
||||
{
|
||||
icon: Star,
|
||||
title: "Cryptocurrency",
|
||||
description: "Support us via BTC, ETH, and more.",
|
||||
},
|
||||
{
|
||||
icon: Wallet,
|
||||
title: "PayPal",
|
||||
description: "Donate easily with your PayPal account.",
|
||||
},
|
||||
{
|
||||
icon: Building,
|
||||
title: "Bank Transfer",
|
||||
description: "Direct bank deposits are available.",
|
||||
},
|
||||
{
|
||||
icon: Smartphone,
|
||||
title: "Mobile Giving",
|
||||
description: "Give instantly via our mobile app.",
|
||||
},
|
||||
]}
|
||||
title="Flexible Donation Methods"
|
||||
description="We ensure your support is received securely. Choose the payment method most convenient for you."
|
||||
/>
|
||||
</div>
|
||||
<div id="giving" data-section="giving">
|
||||
<FeatureHoverPattern
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{ icon: CreditCard, title: "Mastercard", description: "Quick and secure card donations." },
|
||||
{ icon: Star, title: "Cryptocurrency", description: "Support us via BTC, ETH, and more." },
|
||||
{ icon: Wallet, title: "PayPal", description: "Donate easily with your PayPal account." },
|
||||
{ icon: Building, title: "Bank Transfer", description: "Direct bank deposits are available." },
|
||||
{ icon: Smartphone, title: "Mobile Giving", description: "Give instantly via our mobile app." },
|
||||
]}
|
||||
title="Flexible Donation Methods"
|
||||
description="We ensure your support is received securely. Choose the payment method most convenient for you."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTen
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
title: "Direct Impact",
|
||||
subtitle: "Field Program Allocation",
|
||||
category: "Finance",
|
||||
value: "95%",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
title: "Clean Water",
|
||||
subtitle: "Wells Constructed",
|
||||
category: "Infrastructure",
|
||||
value: "120",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
title: "Education",
|
||||
subtitle: "Students Sponsored",
|
||||
category: "Growth",
|
||||
value: "500",
|
||||
},
|
||||
]}
|
||||
title="Our Transparency"
|
||||
description="We are proud of our impact, with 95% of donations going directly to our field programs."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardTen
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", title: "Direct Impact", subtitle: "Field Program Allocation", category: "Finance", value: "95%" },
|
||||
{ id: "m2", title: "Clean Water", subtitle: "Wells Constructed", category: "Infrastructure", value: "120" },
|
||||
{ id: "m3", title: "Education", subtitle: "Students Sponsored", category: "Growth", value: "500" },
|
||||
]}
|
||||
title="Our Transparency"
|
||||
description="We are proud of our impact, with 95% of donations going directly to our field programs."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Psalms Charity has completely changed our neighborhood. Their dedication to genuine, long-term impact is unmatched by any other organization I've worked with."
|
||||
rating={5}
|
||||
author="Marcus Thorne, Community Leader"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/young-chinese-woman-smiling-confident-standing-street_839833-7633.jpg",
|
||||
alt: "Supporter 1",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg",
|
||||
alt: "Supporter 2",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/happy-afroamerican-employee-portrait_23-2148508904.jpg",
|
||||
alt: "Supporter 3",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-executive-with-white-shirt-blue-suit_1139-135.jpg",
|
||||
alt: "Supporter 4",
|
||||
},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg",
|
||||
alt: "Supporter 5",
|
||||
},
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFifteen
|
||||
useInvertedBackground={false}
|
||||
testimonial="Psalms Charity has completely changed our neighborhood. Their dedication to genuine, long-term impact is unmatched by any other organization I've worked with."
|
||||
rating={5}
|
||||
author="Marcus Thorne, Community Leader"
|
||||
avatars={[
|
||||
{ src: "http://img.b2bpic.net/free-photo/young-chinese-woman-smiling-confident-standing-street_839833-7633.jpg", alt: "Supporter 1" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-man-correcting-grammar-mistakes_23-2150171372.jpg", alt: "Supporter 2" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/happy-afroamerican-employee-portrait_23-2148508904.jpg", alt: "Supporter 3" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/close-up-executive-with-white-shirt-blue-suit_1139-135.jpg", alt: "Supporter 4" },
|
||||
{ src: "http://img.b2bpic.net/free-photo/medium-shot-smiley-woman-work_23-2149304143.jpg", alt: "Supporter 5" },
|
||||
]}
|
||||
ratingAnimation="slide-up"
|
||||
avatarsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "faq1",
|
||||
title: "Is my donation tax-deductible?",
|
||||
content: "Yes, Psalms Charity is a registered 501(c)(3) organization. You will receive a receipt for your taxes.",
|
||||
},
|
||||
{
|
||||
id: "faq2",
|
||||
title: "How is crypto donation handled?",
|
||||
content: "We use industry-standard crypto gateways to securely process and convert donations instantly into aid.",
|
||||
},
|
||||
{
|
||||
id: "faq3",
|
||||
title: "Can I donate anonymously?",
|
||||
content: "Absolutely. Just select the anonymous donation option when submitting your support.",
|
||||
},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our donation process and outreach."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "faq1", title: "Is my donation tax-deductible?", content: "Yes, Psalms Charity is a registered 501(c)(3) organization. You will receive a receipt for your taxes." },
|
||||
{ id: "faq2", title: "How is crypto donation handled?", content: "We use industry-standard crypto gateways to securely process and convert donations instantly into aid." },
|
||||
{ id: "faq3", title: "Can I donate anonymously?", content: "Absolutely. Just select the anonymous donation option when submitting your support." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Common questions about our donation process and outreach."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Stay Connected"
|
||||
title="Join Our Newsletter"
|
||||
description="Stay updated on our progress and how your donations help those in need."
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-people-helping_23-2149142777.jpg?_wi=2"
|
||||
imageAlt="Newsletter signup support"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactSplit
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Stay Connected"
|
||||
title="Join Our Newsletter"
|
||||
description="Stay updated on our progress and how your donations help those in need."
|
||||
mediaPosition="right"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/medium-shot-happy-people-helping_23-2149142777.jpg"
|
||||
imageAlt="Newsletter signup support"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="PSALMS CHARITY"
|
||||
copyrightText="© 2025 Psalms Charity | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="PSALMS CHARITY"
|
||||
copyrightText="© 2025 Psalms Charity | All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user