Add src/app/about/page.tsx
This commit is contained in:
145
src/app/about/page.tsx
Normal file
145
src/app/about/page.tsx
Normal file
@@ -0,0 +1,145 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import ReactLenis from "lenis/react";
|
||||
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
|
||||
import SplitAbout from '@/components/sections/about/SplitAbout';
|
||||
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
|
||||
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
|
||||
import FooterBase from '@/components/sections/footer/FooterBase';
|
||||
|
||||
export default function AboutPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="shift-hover"
|
||||
defaultTextAnimation="background-highlight"
|
||||
borderRadius="rounded"
|
||||
contentWidth="small"
|
||||
sizing="largeSmallSizeMediumTitles"
|
||||
background="fluid"
|
||||
cardStyle="gradient-bordered"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="solid"
|
||||
headingFontWeight="medium"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarLayoutFloatingOverlay
|
||||
navItems={[
|
||||
{ name: "Home", id: "/" },
|
||||
{ name: "About", id: "/about" },
|
||||
{ name: "Pillars", id: "/about#pillars" },
|
||||
{ name: "Calendar", id: "/about#calendar" },
|
||||
{ name: "Testimonials", id: "/#testimonials" },
|
||||
{ name: "FAQ", id: "/#faq" },
|
||||
{ name: "Blog", id: "/#blog" },
|
||||
{ name: "Contact", id: "/#contact" }
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whx1ya"
|
||||
brandName="Nur Al-Islam"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<SplitAbout
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
imagePosition="right"
|
||||
title="Our Mission: Illuminating the Path of Islam"
|
||||
description="At Nur Al-Islam, we are dedicated to providing authentic and accessible Islamic knowledge for everyone. Our platform serves as a trusted resource for Muslims worldwide, fostering a deeper understanding of our faith and practices."
|
||||
bulletPoints={[
|
||||
{
|
||||
title: "Comprehensive Teachings", description: "Explore in-depth lessons on Quran, Hadith, and Islamic jurisprudence."},
|
||||
{
|
||||
title: "Daily Spiritual Guidance", description: "Access resources for prayer times, duas, and dhikr to strengthen your daily connection with Allah."},
|
||||
{
|
||||
title: "Global Community", description: "Join a vibrant community of learners and scholars to share insights and support."},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hands-holding-crucifix_23-2149301765.jpg"
|
||||
imageAlt="Open Holy Quran on a wooden table"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="pillars" data-section="pillars">
|
||||
<FeatureCardTwentyEight
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
id: "prayer", title: "Five Daily Prayers (Salat)", subtitle: "Detailed guides for performing all five daily prayers, including Wudu, Raka'at counts, and essential supplications.", category: "Worship", value: "Guidance"},
|
||||
{
|
||||
id: "dua", title: "Heartfelt Duas (Supplications)", subtitle: "A vast collection of Duas for every occasion, from morning invocations to prayers for seeking forgiveness and blessings.", category: "Prayer", value: "Blessings"},
|
||||
{
|
||||
id: "quranic-surahs", title: "Profound Quranic Surahs", subtitle: "Learn the meanings and recitations of powerful Surahs like Al-Fatiha, Yaseen, Ar-Rahman, Al-Baqarah, and more, with tafsir.", category: "Quran", value: "Wisdom"},
|
||||
]}
|
||||
title="Key Pillars of Islamic Knowledge"
|
||||
description="Delve into the foundational aspects of Islam with our structured content, covering everything from daily worship to spiritual nourishment."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="calendar" data-section="calendar">
|
||||
<MetricCardSeven
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
metrics={[
|
||||
{
|
||||
id: "hajj", value: "Hajj", title: "Spiritual Journey", items: [
|
||||
"Comprehensive guide to performing Hajj.", "Significance of each ritual explained.", "Tips for pilgrims."],
|
||||
},
|
||||
{
|
||||
id: "umrah", value: "Umrah", title: "Minor Pilgrimage", items: [
|
||||
"Step-by-step instructions for Umrah.", "Recommended duas for Umrah.", "Historical context of sites."],
|
||||
},
|
||||
{
|
||||
id: "ramadan", value: "Ramadan", title: "Month of Fasting", items: [
|
||||
"Rules and virtues of fasting.", "Iftar and Suhoor guidance.", "Lailatul Qadr insights."],
|
||||
},
|
||||
{
|
||||
id: "zakat", value: "Zakat & Fitra", title: "Charity & Purification", items: [
|
||||
"Calculations for Zakat and Fitra.", "Importance of giving in Islam.", "Guidelines for distribution."],
|
||||
},
|
||||
]}
|
||||
title="Islamic Calendar & Blessings"
|
||||
description="Understand the significance of each month in the Islamic calendar and the unique blessings and practices associated with them, including Hajj, Umrah, and Ramadan."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBase
|
||||
columns={[
|
||||
{
|
||||
title: "Explore", items: [
|
||||
{ label: "Prayers", href: "/about#pillars" },
|
||||
{ label: "Surahs", href: "/about#pillars" },
|
||||
{ label: "Hajj & Umrah", href: "/about#calendar" },
|
||||
{ label: "Ramadan", href: "/about#calendar" },
|
||||
{ label: "Zakat", href: "/about#calendar" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/#blog" },
|
||||
{ label: "FAQ", href: "/#faq" },
|
||||
{ label: "Testimonials", href: "/#testimonials" },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{ label: "Privacy Policy", href: "#" },
|
||||
{ label: "Terms of Service", href: "#" },
|
||||
],
|
||||
},
|
||||
]}
|
||||
logoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=whx1ya"
|
||||
logoText="Nur Al-Islam"
|
||||
copyrightText="© 2024 Nur Al-Islam. All rights reserved."
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user