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