The Ultimate Spiritual Tech Ecosystem | V_MAX Edition
Al-Sakina is a high-performance, premium web platform designed to provide a cinematic and immersive spiritual experience. Built with a focus on Ethereal Glass Design, high accessibility for all age groups, and seamless AI integration, it serves as a digital sanctuary for ruyqah, spiritual consultation, and Islamic wellness.
- Ethereal Glass UI: A custom-engineered design system providing frosted-glass aesthetics with high-performance backdrop blurs and metallic gold accents.
- Accessibility Excellence: Global text-shadow utilities and high-contrast heavy glass backdrops ensuring 100% legibility over dynamic video backgrounds.
- AI-Powered Guidance: Integrated specialized AI assistant for initial spiritual inquiries and platform navigation.
- Atheer Hub (أثير السكينة): A robust audio module for Quranic recitations and Audio Ruqyah.
- Responsive Architecture: Optimized for desktop, tablet, and mobile devices with fluid Framer Motion animations.
A comprehensive overview of the project's directory structure and component organization.
AL-SAKINA-PLATFORM/
├── 📁 .kilocode
│ ├── ⚙️ .gitignore
│ ├── ⚙️ package-lock.json
│ └── ⚙️ package.json
├── 📁 Howthefinalthameshouldlooklike
│ └── 🖼️ image.png
├── 📁 app
│ ├── 📁 about
│ │ └── 📄 page.tsx
│ ├── 📁 api
│ │ ├── 📁 bookings
│ │ │ └── 📄 route.ts
│ │ ├── 📁 chat
│ │ │ └── 📄 route.ts
│ │ ├── 📁 orders
│ │ │ └── 📄 route.ts
│ │ └── 📁 provisions
│ │ └── 📄 route.ts
│ ├── 📁 atheer
│ │ └── 📄 page.tsx
│ ├── 📁 booking
│ │ └── 📄 page.tsx
│ ├── 📁 fonts
│ │ ├── 📄 Marhaban-Bold.otf
│ │ ├── 📄 MarhabanArabicDEMO-BoldOblique-BF683e4c1a86a25.otf
│ │ ├── 📄 Zaatar-Regular.otf
│ │ ├── 📄 zaatar-black.otf
│ │ └── 📄 zaatar-bold.otf
│ ├── 📁 provisions
│ │ └── 📄 page.tsx
│ ├── 📄 favicon.ico
│ ├── 🎨 globals.css
│ ├── 📄 layout.tsx
│ ├── 📄 loading.tsx
│ └── 📄 page.tsx
├── 📁 components
│ ├── 📁 ai
│ │ └── 📄 ChatWidget.tsx
│ ├── 📁 home
│ │ ├── 📄 FeaturesGrid.tsx
│ │ ├── 📄 HeroSection.tsx
│ │ └── 📄 WhatsAppCTA.tsx
│ ├── 📁 layout
│ │ ├── 📄 Footer.tsx
│ │ ├── 📄 Navbar.tsx
│ │ └── 📄 VideoBackground.tsx
│ ├── 📁 provisions
│ │ ├── 📄 OrderForm.tsx
│ │ └── 📄 ProvisionCard.tsx
│ ├── 📁 random
│ │ └── 🎨 Neon liquid button.css
│ └── 📁 ui
│ ├── 📄 AnimatedContainer.tsx
│ ├── 📄 GlassCard.tsx
│ ├── 📄 LiquidButton.tsx
│ └── 📄 SectionHeading.tsx
├── 📁 lib
│ ├── 📄 prisma.ts
│ ├── 📄 rate-limit.ts
│ ├── 📄 utils.ts
│ ├── 📄 validations.ts
│ ├── 📄 vertex-ai.ts
│ └── 📄 whatsapp.ts
├── 📁 prisma
│ ├── 📄 schema.prisma
│ └── 📄 seed.ts
├── 📁 public
│ ├── 🖼️ alsakina_avatar.png
│ ├── 🎬 bg-video.mp4
│ ├── 🖼️ file.svg
│ ├── 🖼️ globe.svg
│ ├── 🖼️ next.svg
│ ├── 🖼️ poster.png
│ ├── 🖼️ sakina-logo-gold.png
│ ├── 🖼️ vercel.svg
│ └── 🖼️ window.svg
├── 📁 store
│ ├── 📄 cartStore.ts
│ ├── 📄 chatStore.ts
│ └── 📄 videoStore.ts
├── 📁 test
│ ├── 📄 find-region.mjs
│ └── 📄 test-regions.mjs
├── ⚙️ .gitignore
├── 📝 AGENTS.md
├── 📝 CLAUDE.md
├── 📝 README.md
├── 📄 eslint.config.mjs
├── 📄 next.config.ts
├── ⚙️ package-lock.json
├── ⚙️ package.json
├── 📄 postcss.config.mjs
├── 📄 tailwind.config.ts
└── ⚙️ tsconfig.json
- Framework: Next.js 16 (App Router)
- Styling: Tailwind CSS with Custom Ethereal Utilities
- Animations: Framer Motion
- Database: Prisma ORM
- Icons: Lucide React
To setup the production environment locally:
-
Clone and Install:
npm install
-
Environment Setup: Configure your
.envfile with the necessary database and API keys. -
Run Development Server:
npm run dev
-
Production Build:
npm run build npm start
To bridge traditional spiritual values with cutting-edge digital architecture, providing the Algerian community and the wider world with a premium, accessible, and high-tech spiritual haven.
© 2026 Al-Sakina Platform. All Rights Reserved.