216 lines
12 KiB
TypeScript
216 lines
12 KiB
TypeScript
"use client";
|
|
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
|
|
import TextAbout from '@/components/sections/about/TextAbout';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
|
|
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
|
import ContactCTA from '@/components/sections/contact/ContactCTA';
|
|
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
|
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
|
|
import { Sparkles, Zap, Heart, Download, Users, Star, Globe, Shield } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="text-shift"
|
|
defaultTextAnimation="background-highlight"
|
|
borderRadius="pill"
|
|
contentWidth="smallMedium"
|
|
sizing="mediumLargeSizeMediumTitles"
|
|
background="fluid"
|
|
cardStyle="glass-depth"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="solid"
|
|
headingFontWeight="medium"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Ayla"
|
|
navItems={[
|
|
{ name: "Features", id: "features" },
|
|
{ name: "About", id: "about" },
|
|
{ name: "Testimonials", id: "testimonials" },
|
|
{ name: "Contact", id: "contact" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroBillboard
|
|
title="Ayla — Your Daily Companion for Faith"
|
|
description="Quran, Prayer Times, AI Assistant & Streak Tracking — beautifully designed for your spiritual journey"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
tag="Premium Islamic Lifestyle"
|
|
tagIcon={Sparkles}
|
|
buttons={[
|
|
{ text: "Download on App Store", href: "https://apps.apple.com" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
imageSrc="http://img.b2bpic.net/free-vector/meditation-app-interface-concept_23-2148623923.jpg"
|
|
imageAlt="Ayla app interface showcase"
|
|
/>
|
|
</div>
|
|
|
|
<div id="about" data-section="about">
|
|
<TextAbout
|
|
tag="About Ayla"
|
|
tagIcon={Heart}
|
|
title="Bridging spiritual practice and modern technology for young Muslim professionals seeking seamless daily Islamic integration"
|
|
buttons={[
|
|
{ text: "Explore Features", href: "#features" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSixteen
|
|
title="Why Ayla Stands Out"
|
|
description="Experience Islamic practice reimagined through thoughtful design and intelligent features built specifically for modern Muslim life"
|
|
tag="Core Features"
|
|
tagIcon={Zap}
|
|
negativeCard={{
|
|
items: [
|
|
"Scattered apps across phone", "Inconsistent prayer reminders", "Limited Islamic guidance access", "No progress tracking"
|
|
]
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"All-in-one spiritual companion", "Intelligent prayer notifications", "AI-powered Islamic guidance", "Gamified habit streaks & tracking"
|
|
]
|
|
}}
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
/>
|
|
</div>
|
|
|
|
<div id="highlights" data-section="highlights">
|
|
<ProductCardTwo
|
|
title="Ayla's Essential Features"
|
|
description="Each feature thoughtfully crafted to support your spiritual journey"
|
|
tag="Premium Features"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="three-columns-all-equal-width"
|
|
products={[
|
|
{
|
|
id: "1", brand: "Ayla App", name: "Quran Reading", price: "Complete Access", rating: 5,
|
|
reviewCount: "12.3k", imageSrc: "http://img.b2bpic.net/free-psd/hari-raya-aidilfitri-concept-instagram-stories-template_23-2148569853.jpg", imageAlt: "Quran reading interface"
|
|
},
|
|
{
|
|
id: "2", brand: "Ayla App", name: "Prayer Times", price: "Real-time Updates", rating: 5,
|
|
reviewCount: "10.8k", imageSrc: "http://img.b2bpic.net/free-photo/fitness-woman-doing-yoga-with-mobile-app_23-2148952553.jpg", imageAlt: "Prayer times interface"
|
|
},
|
|
{
|
|
id: "3", brand: "Ayla App", name: "AI Guidance", price: "Instant Support", rating: 5,
|
|
reviewCount: "9.2k", imageSrc: "http://img.b2bpic.net/free-photo/excited-diverse-coworkers-watching-content-smartphone_74855-1840.jpg", imageAlt: "AI guidance interface"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="metrics" data-section="metrics">
|
|
<MetricCardOne
|
|
title="Ayla's Global Impact"
|
|
description="Trusted by Muslim professionals and spiritual seekers worldwide"
|
|
tag="Achievement Metrics"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
gridVariant="uniform-all-items-equal"
|
|
metrics={[
|
|
{
|
|
id: "1", value: "250", title: "thousand", description: "Active daily users", icon: Users
|
|
},
|
|
{
|
|
id: "2", value: "4.8", title: "stars", description: "App store rating", icon: Star
|
|
},
|
|
{
|
|
id: "3", value: "28", title: "languages", description: "Multilingual support", icon: Globe
|
|
},
|
|
{
|
|
id: "4", value: "99.9", title: "percent", description: "Uptime reliability", icon: Shield
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="testimonials" data-section="testimonials">
|
|
<TestimonialCardFive
|
|
title="Loved by Users"
|
|
description="See how Ayla has transformed spiritual practice for thousands of Muslims"
|
|
tag="User Testimonials"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
testimonials={[
|
|
{
|
|
id: "1", name: "Fatima Al-Rashid, Berlin", date: "Date: 15 January 2025", title: "Finally, all I need in one beautiful app", quote: "Ayla has completely transformed how I maintain my spiritual practice. As a busy professional, having Quran, prayer times, and AI guidance in one elegant app feels like a gift. The habit tracking keeps me motivated, especially during Ramadan.", tag: "Premium Plan", avatarSrc: "http://img.b2bpic.net/free-photo/alone-specialist-handsome-daydreaming-collar_1262-870.jpg", imageSrc: "http://img.b2bpic.net/free-vector/meditation-app-interface-concept_23-2148623923.jpg"
|
|
},
|
|
{
|
|
id: "2", name: "Hassan Mohamed, Frankfurt", date: "Date: 22 December 2024", title: "The design is simply stunning", quote: "I appreciate how thoughtfully this app is designed. It respects the Islamic aesthetic while remaining modern and accessible. The German language support and local prayer times are perfect for my community here.", tag: "Standard Plan", avatarSrc: "http://img.b2bpic.net/free-photo/young-handsome-man-grey-shirt-looking-up-thinking-positive-smiling-broadly_141793-55034.jpg", imageSrc: "http://img.b2bpic.net/free-photo/fitness-woman-doing-yoga-with-mobile-app_23-2148952553.jpg"
|
|
},
|
|
{
|
|
id: "3", name: "Aisha Khan, Munich", date: "Date: 8 January 2025", title: "My daily spiritual anchor", quote: "The AI guidance has helped me deepen my Islamic knowledge in ways I never expected. The streak tracking makes habit-building feel like a spiritual practice itself. Highly recommend to anyone serious about their faith journey.", tag: "Premium Plan", avatarSrc: "http://img.b2bpic.net/free-photo/smiley-business-woman-posing-outdoors-suit_23-2148603024.jpg", imageSrc: "http://img.b2bpic.net/free-photo/excited-diverse-coworkers-watching-content-smartphone_74855-1840.jpg"
|
|
},
|
|
{
|
|
id: "4", name: "Omar Ibrahim, Cologne", date: "Date: 10 January 2025", title: "A must-have for modern Muslim life", quote: "What impressed me most is how Ayla makes spiritual practice accessible without being overwhelming. The minimalist design, the intelligent notifications—everything feels intentional. This is the app I've been waiting for.", tag: "Standard Plan", avatarSrc: "http://img.b2bpic.net/free-photo/bald-man-with-beard-wearing-business-clothes-glasses-puffing-cheeks-with-funny-face-mouth-inflated-with-air-crazy-expression_839833-2502.jpg", imageSrc: "http://img.b2bpic.net/free-photo/top-view-bullet-journal-keyboard_23-2149740009.jpg"
|
|
}
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="contact" data-section="contact">
|
|
<ContactCTA
|
|
tag="Ready to Begin?"
|
|
tagIcon={Download}
|
|
title="Download Ayla Today"
|
|
description="Join thousands of Muslim professionals transforming their spiritual practice. Your daily companion for faith, now available on the App Store."
|
|
background={{ variant: "radial-gradient" }}
|
|
buttons={[
|
|
{ text: "Download on App Store", href: "https://apps.apple.com" },
|
|
{ text: "Learn More", href: "#features" }
|
|
]}
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterMedia
|
|
imageSrc="http://img.b2bpic.net/free-vector/geometric-mosaic-pattern_23-2147509829.jpg"
|
|
imageAlt="Islamic geometric pattern"
|
|
columns={[
|
|
{
|
|
title: "Product", items: [
|
|
{ label: "Features", href: "#features" },
|
|
{ label: "Testimonials", href: "#testimonials" },
|
|
{ label: "Download", href: "https://apps.apple.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Ayla", href: "#about" },
|
|
{ label: "Contact Us", href: "#contact" },
|
|
{ label: "Blog", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
logoText="Ayla"
|
|
copyrightText="© 2025 Ayla. All rights reserved."
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
}
|