1.00

backend/src/db/migrations/20260129154500-grant-public-permissions.js

@@ -0,0 +1,64 @@
+const { v4: uuid } = require("uuid");
+
+module.exports = {
+  async up(queryInterface) {
+    const createdAt = new Date();
+    const updatedAt = new Date();
+
+    const [roles] = await queryInterface.sequelize.query(
+      "SELECT id FROM roles WHERE name = 'Public' LIMIT 1"
+    );
+    
+    if (!roles || roles.length === 0) return;
+    
+    const publicRoleId = roles[0].id;
+
+    const entities = [
+      "abouts", "sliders", "projects", "achievements", "news", "reels", "partners"
+    ];
+
+    const permissionsToGrant = [];
+
+    for (const entity of entities) {
+      const [perms] = await queryInterface.sequelize.query(
+        `SELECT id FROM permissions WHERE name = 'READ_${entity.toUpperCase()}' LIMIT 1`
+      );
+      if (perms && perms.length > 0) {
+        permissionsToGrant.push({
+          createdAt,
+          updatedAt,
+          roles_permissionsId: publicRoleId,
+          permissionId: perms[0].id
+        });
+      }
+    }
+
+    // Grant CREATE_CONTACT_MESSAGES
+    const [contactPerms] = await queryInterface.sequelize.query(
+      "SELECT id FROM permissions WHERE name = 'CREATE_CONTACT_MESSAGES' LIMIT 1"
+    );
+    if (contactPerms && contactPerms.length > 0) {
+      permissionsToGrant.push({
+        createdAt,
+        updatedAt,
+        roles_permissionsId: publicRoleId,
+        permissionId: contactPerms[0].id
+      });
+    }
+
+    if (permissionsToGrant.length > 0) {
+      // Use a for loop to avoid bulkInsert issues with existing records
+      for (const item of permissionsToGrant) {
+          try {
+              await queryInterface.bulkInsert("rolesPermissionsPermissions", [item]);
+          } catch (e) {
+              // Ignore duplicates
+          }
+      }
+    }
+  },
+
+  async down(queryInterface) {
+    // Optional: implement down migration
+  }
+};

backend/src/index.js

@@ -1,4 +1,3 @@
-
 const express = require('express');
 const cors = require('cors');
 const app = express();
@@ -107,21 +106,21 @@ app.use('/api/roles', passport.authenticate('jwt', {session: false}), rolesRoute
 
 app.use('/api/permissions', passport.authenticate('jwt', {session: false}), permissionsRoutes);
 
-app.use('/api/abouts', passport.authenticate('jwt', {session: false}), aboutsRoutes);
+app.use('/api/abouts', aboutsRoutes);
 
-app.use('/api/sliders', passport.authenticate('jwt', {session: false}), slidersRoutes);
+app.use('/api/sliders', slidersRoutes);
 
-app.use('/api/projects', passport.authenticate('jwt', {session: false}), projectsRoutes);
+app.use('/api/projects', projectsRoutes);
 
-app.use('/api/achievements', passport.authenticate('jwt', {session: false}), achievementsRoutes);
+app.use('/api/achievements', achievementsRoutes);
 
-app.use('/api/news', passport.authenticate('jwt', {session: false}), newsRoutes);
+app.use('/api/news', newsRoutes);
 
-app.use('/api/reels', passport.authenticate('jwt', {session: false}), reelsRoutes);
+app.use('/api/reels', reelsRoutes);
 
-app.use('/api/partners', passport.authenticate('jwt', {session: false}), partnersRoutes);
+app.use('/api/partners', partnersRoutes);
 
-app.use('/api/contact_messages', passport.authenticate('jwt', {session: false}), contact_messagesRoutes);
+app.use('/api/contact_messages', contact_messagesRoutes);
 
 app.use(
     '/api/openai',
@@ -167,4 +166,4 @@ db.sequelize.sync().then(function () {
   });
 });
 
-module.exports = app;
+module.exports = app;

frontend/src/components/Landing/AboutUs.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import BaseIcon from '../BaseIcon'
+import { mdiEyeOutline, mdiFlagOutline, mdiHeartOutline } from '@mdi/js'
+
+const AboutUs = () => {
+  return (
+    <section id="about" className="py-20 bg-gray-50 font-cairo" dir="rtl">
+      <div className="container mx-auto px-4">
+        <div className="flex flex-col md:flex-row items-center gap-12">
+          <div className="w-full md:w-1/2">
+            <h2 className="text-3xl md:text-4xl font-bold text-medicalGreen-900 mb-6">
+              من نحن
+            </h2>
+            <p className="text-gray-700 text-lg leading-relaxed mb-8 text-justify">
+              مؤسسة دار الشفاء الطبية هي مؤسسة خيرية صحية اجتماعية غير ربحية، تأسست في محافظة حضرموت بمدينة سيئون. تسعى المؤسسة لتطوير القطاع الصحي وتقديم الخدمات الطبية النوعية للفئات المحتاجة، من خلال برامج ومشاريع مستدامة وشراكات فاعلة.
+            </p>
+            
+            <div className="space-y-6">
+              <div className="flex items-start gap-4">
+                <div className="bg-medicalGreen-100 p-3 rounded-xl text-medicalGreen-700">
+                  <BaseIcon path={mdiEyeOutline} size={32} />
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-medicalGreen-900 mb-2">رؤيتنا</h3>
+                  <p className="text-gray-600">الريادة في تقديم الخدمات الطبية والإنسانية المتميزة والمستدامة.</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="bg-medicalGreen-100 p-3 rounded-xl text-medicalGreen-700">
+                  <BaseIcon path={mdiFlagOutline} size={32} />
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-medicalGreen-900 mb-2">رسالتنا</h3>
+                  <p className="text-gray-600">تحسين الوضع الصحي للمجتمع من خلال برامج طبية وإنسانية بجودة عالية واحترافية.</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="bg-medicalGreen-100 p-3 rounded-xl text-medicalGreen-700">
+                  <BaseIcon path={mdiHeartOutline} size={32} />
+                </div>
+                <div>
+                  <h3 className="text-xl font-bold text-medicalGreen-900 mb-2">قيمنا</h3>
+                  <p className="text-gray-600">الإخلاص، الشفافية، الإتقان، والعمل الجماعي.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="w-full md:w-1/2 relative">
+            <div className="rounded-3xl overflow-hidden shadow-2xl">
+              <img 
+                src="https://images.pexels.com/photos/3825586/pexels-photo-3825586.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" 
+                alt="Dar Al Shifa"
+                className="w-full h-[500px] object-cover"
+              />
+            </div>
+            <div className="absolute -bottom-6 -right-6 bg-medicalGreen-700 text-white p-8 rounded-3xl hidden lg:block shadow-xl">
+              <div className="text-4xl font-bold mb-2">+15</div>
+              <div className="text-lg opacity-80">عاماً من العطاء</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default AboutUs

frontend/src/components/Landing/Achievements.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+
+const stats = [
+  { label: 'مستفيد سنوياً', value: '50,000+' },
+  { label: 'عملية جراحية', value: '1,200+' },
+  { label: 'مخيم طبي', value: '85' },
+  { label: 'شريك نجاح', value: '40+' },
+]
+
+const Achievements = () => {
+  return (
+    <section className="py-20 bg-medicalGreen-900 text-white font-cairo" dir="rtl">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 md:gap-12 text-center">
+          {stats.map((stat, index) => (
+            <div key={index} className="space-y-2">
+              <div className="text-4xl md:text-5xl font-extrabold text-medicalGreen-300">
+                {stat.value}
+              </div>
+              <div className="text-lg md:text-xl opacity-80">
+                {stat.label}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Achievements

frontend/src/components/Landing/Contact.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { mdiPhone, mdiEmail, mdiMapMarker } from '@mdi/js'
+import BaseIcon from '../BaseIcon'
+import axios from 'axios'
+import { toast } from 'react-toastify'
+
+const Contact = () => {
+  const [formData, setFormData] = useState({
+    name: '',
+    email: '',
+    subject: '',
+    message: '',
+  })
+  const [loading, setLoading] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    try {
+      await axios.post('/contact_messages', { data: formData })
+      toast.success('تم إرسال رسالتك بنجاح!')
+      setFormData({ name: '', email: '', subject: '', message: '' })
+    } catch (error) {
+      console.error(error)
+      toast.error('حدث خطأ أثناء إرسال الرسالة. يرجى المحاولة مرة أخرى.')
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value })
+  }
+
+  return (
+    <section id="contact" className="py-20 bg-white font-cairo" dir="rtl">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center text-medicalGreen-900 mb-16">
+          تواصل معنا
+        </h2>
+
+        <div className="flex flex-col lg:flex-row gap-12">
+          {/* Contact Info */}
+          <div className="w-full lg:w-1/3 space-y-8">
+            <div className="bg-gray-50 p-8 rounded-3xl space-y-6">
+              <h3 className="text-2xl font-bold text-medicalGreen-900 mb-6">معلومات التواصل</h3>
+              
+              <div className="flex items-start gap-4">
+                <div className="text-medicalGreen-700">
+                  <BaseIcon path={mdiMapMarker} size={24} />
+                </div>
+                <div>
+                  <h4 className="font-bold text-medicalGreen-950">العنوان</h4>
+                  <p className="text-gray-600">حضرموت - سيئون - الشارع العام</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="text-medicalGreen-700">
+                  <BaseIcon path={mdiPhone} size={24} />
+                </div>
+                <div>
+                  <h4 className="font-bold text-medicalGreen-950">الهاتف</h4>
+                  <p className="text-gray-600" dir="ltr">+967 5 440000</p>
+                </div>
+              </div>
+
+              <div className="flex items-start gap-4">
+                <div className="text-medicalGreen-700">
+                  <BaseIcon path={mdiEmail} size={24} />
+                </div>
+                <div>
+                  <h4 className="font-bold text-medicalGreen-950">البريد الإلكتروني</h4>
+                  <p className="text-gray-600">info@daralshifa.org</p>
+                </div>
+              </div>
+            </div>
+
+            {/* Google Maps Placeholder */}
+            <div className="h-64 bg-gray-200 rounded-3xl overflow-hidden relative">
+              <iframe 
+                src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d15444.604646738914!2d48.7844005!3d15.9430155!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3e1f579893967817%3A0x6b77e8979167e43!2zU2VpeXVuLCBZZW1lbg!5e0!3m2!1sen!2s!4v1700000000000!5m2!1sen!2s" 
+                width="100%" 
+                height="100%" 
+                style={{ border: 0 }} 
+                allowFullScreen={true} 
+                loading="lazy"
+              ></iframe>
+            </div>
+          </div>
+
+          {/* Contact Form */}
+          <div className="w-full lg:w-2/3">
+            <form onSubmit={handleSubmit} className="space-y-6 bg-gray-50 p-8 md:p-12 rounded-3xl shadow-sm">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div>
+                  <label className="block text-medicalGreen-900 font-bold mb-2">الاسم الكامل</label>
+                  <input 
+                    type="text" 
+                    name="name"
+                    required
+                    value={formData.name}
+                    onChange={handleChange}
+                    placeholder="أدخل اسمك الكامل"
+                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
+                  />
+                </div>
+                <div>
+                  <label className="block text-medicalGreen-900 font-bold mb-2">البريد الإلكتروني</label>
+                  <input 
+                    type="email" 
+                    name="email"
+                    required
+                    value={formData.email}
+                    onChange={handleChange}
+                    placeholder="example@mail.com"
+                    className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
+                  />
+                </div>
+              </div>
+              <div>
+                <label className="block text-medicalGreen-900 font-bold mb-2">الموضوع</label>
+                <input 
+                  type="text" 
+                  name="subject"
+                  required
+                  value={formData.subject}
+                  onChange={handleChange}
+                  placeholder="موضوع الرسالة"
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
+                />
+              </div>
+              <div>
+                <label className="block text-medicalGreen-900 font-bold mb-2">الرسالة</label>
+                <textarea 
+                  name="message"
+                  required
+                  value={formData.message}
+                  onChange={handleChange}
+                  rows={6}
+                  placeholder="كيف يمكننا مساعدتك؟"
+                  className="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-medicalGreen-500 focus:ring-2 focus:ring-medicalGreen-200 outline-none transition-all"
+                ></textarea>
+              </div>
+              <button 
+                type="submit"
+                disabled={loading}
+                className="bg-medicalGreen-700 text-white font-bold px-10 py-4 rounded-xl hover:bg-medicalGreen-800 transition-all disabled:opacity-50"
+              >
+                {loading ? 'جاري الإرسال...' : 'إرسال الرسالة'}
+              </button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Contact

frontend/src/components/Landing/Footer.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import Link from 'next/link'
+
+const Footer = () => {
+  return (
+    <footer className="bg-medicalGreen-950 text-white pt-20 pb-10 font-cairo" dir="rtl">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 mb-16">
+          <div className="md:col-span-2">
+            <h3 className="text-2xl font-bold mb-6">مؤسسة دار الشفاء الطبية</h3>
+            <p className="text-gray-400 max-w-md leading-relaxed">
+              مؤسسة رائدة في العمل الطبي الخيري بمحافظة حضرموت، نسعى لتمكين المجتمع صحياً من خلال مشاريع مستدامة وبرامج إنسانية نوعية تعزز قيم التكافل والتراحم.
+            </p>
+          </div>
+          
+          <div>
+            <h4 className="text-xl font-bold mb-6 text-medicalGreen-400">روابط سريعة</h4>
+            <ul className="space-y-4">
+              <li><Link href="#about" className="text-gray-400 hover:text-white transition-colors">من نحن</Link></li>
+              <li><Link href="#projects" className="text-gray-400 hover:text-white transition-colors">مشاريعنا</Link></li>
+              <li><Link href="#news" className="text-gray-400 hover:text-white transition-colors">آخر الأخبار</Link></li>
+              <li><Link href="#contact" className="text-gray-400 hover:text-white transition-colors">تواصل معنا</Link></li>
+            </ul>
+          </div>
+
+          <div>
+            <h4 className="text-xl font-bold mb-6 text-medicalGreen-400">المواقع والمنصات</h4>
+            <div className="flex space-x-reverse space-x-4">
+              {/* Social Media Placeholders */}
+              <a href="#" className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-medicalGreen-600 transition-colors">F</a>
+              <a href="#" className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-medicalGreen-600 transition-colors">T</a>
+              <a href="#" className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-medicalGreen-600 transition-colors">I</a>
+              <a href="#" className="w-10 h-10 bg-white/10 rounded-full flex items-center justify-center hover:bg-medicalGreen-600 transition-colors">Y</a>
+            </div>
+          </div>
+        </div>
+
+        <div className="border-t border-white/10 pt-8 text-center text-gray-500 text-sm">
+          <p>© 2026 جميع الحقوق محفوظة لمؤسسة دار الشفاء الطبية</p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+
+export default Footer

frontend/src/components/Landing/Header.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react'
+import Link from 'next/link'
+import { mdiMenu, mdiClose } from '@mdi/js'
+import BaseIcon from '../BaseIcon'
+
+const Header = () => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const menuItems = [
+    { label: 'الرئيسية', href: '/' },
+    { label: 'من نحن', href: '#about' },
+    { label: 'المشاريع', href: '#projects' },
+    { label: 'الأخبار', href: '#news' },
+    { label: 'تواصل معنا', href: '#contact' },
+  ]
+
+  return (
+    <nav className="fixed top-0 left-0 right-0 z-50 bg-white shadow-md font-cairo" dir="rtl">
+      <div className="container mx-auto px-4 py-3 flex justify-between items-center">
+        <Link href="/" className="flex items-center space-x-reverse space-x-2">
+          {/* Placeholder for Logo */}
+          <div className="w-12 h-12 bg-medicalGreen-700 rounded-full flex items-center justify-center text-white font-bold text-xs text-center">
+            دار الشفاء
+          </div>
+          <span className="text-xl font-bold text-medicalGreen-900">مؤسسة دار الشفاء الطبية</span>
+        </Link>
+
+        {/* Desktop Menu */}
+        <div className="hidden md:flex space-x-reverse space-x-8">
+          {menuItems.map((item) => (
+            <Link
+              key={item.label}
+              href={item.href}
+              className="text-medicalGreen-800 hover:text-medicalGreen-600 font-medium transition-colors"
+            >
+              {item.label}
+            </Link>
+          ))}
+          <Link
+            href="/login"
+            className="bg-medicalGreen-700 text-white px-6 py-2 rounded-full hover:bg-medicalGreen-800 transition-colors"
+          >
+            دخول المسؤول
+          </Link>
+        </div>
+
+        {/* Mobile Menu Button */}
+        <button
+          className="md:hidden text-medicalGreen-900"
+          onClick={() => setIsMenuOpen(!isMenuOpen)}
+        >
+          <BaseIcon path={isMenuOpen ? mdiClose : mdiMenu} size={32} />
+        </button>
+      </div>
+
+      {/* Mobile Menu */}
+      {isMenuOpen && (
+        <div className="md:hidden bg-white border-t border-gray-100 py-4 px-4 space-y-4">
+          {menuItems.map((item) => (
+            <Link
+              key={item.label}
+              href={item.href}
+              className="block text-medicalGreen-800 hover:text-medicalGreen-600 font-medium"
+              onClick={() => setIsMenuOpen(false)}
+            >
+              {item.label}
+            </Link>
+          ))}
+          <Link
+            href="/login"
+            className="block bg-medicalGreen-700 text-white text-center px-6 py-2 rounded-full hover:bg-medicalGreen-800 transition-colors"
+            onClick={() => setIsMenuOpen(false)}
+          >
+            دخول المسؤول
+          </Link>
+        </div>
+      )}
+    </nav>
+  )
+}
+
+export default Header

frontend/src/components/Landing/Hero.tsx

@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from 'react'
+import BaseButton from '../BaseButton'
+
+const slides = [
+  {
+    image: 'https://images.pexels.com/photos/263402/pexels-photo-263402.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+    title: 'رعاية طبية متميزة لمجتمعنا',
+    description: 'نحن في مؤسسة دار الشفاء نسعى لتقديم أفضل الخدمات الطبية والإنسانية لأبناء محافظة حضرموت.',
+  },
+  {
+    image: 'https://images.pexels.com/photos/236380/pexels-photo-236380.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+    title: 'برامج صحية رائدة',
+    description: 'ننفذ مشاريع طبية نوعية تهدف إلى تحسين جودة الحياة وتوفير العلاج للمحتاجين.',
+  },
+  {
+    image: 'https://images.pexels.com/photos/127873/pexels-photo-127873.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+    title: 'شراكات من أجل الخير',
+    description: 'نعمل جنباً إلى جنب مع شركاء النجاح لتحقيق رؤيتنا في بناء مجتمع صحي ومعافى.',
+  },
+]
+
+const Hero = () => {
+  const [currentSlide, setCurrentSlide] = useState(0)
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % slides.length)
+    }, 5000)
+    return () => clearInterval(timer)
+  }, [])
+
+  return (
+    <section className="relative h-[600px] overflow-hidden font-cairo" dir="rtl">
+      {slides.map((slide, index) => (
+        <div
+          key={index}
+          className={`absolute inset-0 transition-opacity duration-1000 ease-in-out ${
+            index === currentSlide ? 'opacity-100' : 'opacity-0'
+          }`}
+        >
+          <div
+            className="absolute inset-0 bg-cover bg-center"
+            style={{ backgroundImage: `url(${slide.image})` }}
+          >
+            <div className="absolute inset-0 bg-medicalGreen-950/60"></div>
+          </div>
+          <div className="relative h-full flex items-center container mx-auto px-4">
+            <div className="max-w-2xl text-white">
+              <h1 className="text-4xl md:text-6xl font-bold mb-6 leading-tight">
+                {slide.title}
+              </h1>
+              <p className="text-lg md:text-xl mb-8 opacity-90">
+                {slide.description}
+              </p>
+              <div className="flex space-x-reverse space-x-4">
+                <BaseButton
+                  label="تعرف علينا"
+                  color="info"
+                  className="bg-medicalGreen-600 border-none px-8 py-3 text-lg"
+                  href="#about"
+                />
+                <BaseButton
+                  label="مشاريعنا"
+                  outline
+                  className="text-white border-white px-8 py-3 text-lg hover:bg-white hover:text-medicalGreen-900"
+                  href="#projects"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      ))}
+      <div className="absolute bottom-6 left-0 right-0 flex justify-center space-x-reverse space-x-2">
+        {slides.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentSlide(index)}
+            className={`w-3 h-3 rounded-full transition-all ${
+              index === currentSlide ? 'bg-white w-8' : 'bg-white/50'
+            }`}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}
+
+export default Hero

frontend/src/components/Landing/News.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+
+const newsItems = [
+  {
+    date: '25 يناير 2026',
+    title: 'اختتام القافلة الطبية الجراحية في وادي حضرموت',
+    image: 'https://images.pexels.com/photos/1170979/pexels-photo-1170979.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+  },
+  {
+    date: '18 يناير 2026',
+    title: 'توقيع اتفاقية تعاون مع مستشفى سيئون العام',
+    image: 'https://images.pexels.com/photos/356040/pexels-photo-356040.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+  },
+  {
+    date: '10 يناير 2026',
+    title: 'توزيع مستلزمات طبية للمراكز الصحية الريفية',
+    image: 'https://images.pexels.com/photos/3184418/pexels-photo-3184418.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+  },
+]
+
+const News = () => {
+  return (
+    <section id="news" className="py-20 bg-gray-50 font-cairo" dir="rtl">
+      <div className="container mx-auto px-4">
+        <div className="flex justify-between items-end mb-12">
+          <div>
+            <h2 className="text-3xl md:text-4xl font-bold text-medicalGreen-900 mb-2">
+              آخر الأخبار
+            </h2>
+            <p className="text-gray-500">تابع أحدث أنشطة وفعاليات المؤسسة</p>
+          </div>
+          <button className="text-medicalGreen-700 font-bold hover:underline">
+            عرض الكل
+          </button>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {newsItems.map((item, index) => (
+            <div key={index} className="bg-white rounded-2xl overflow-hidden shadow-lg group hover:shadow-2xl transition-all">
+              <div className="h-56 overflow-hidden relative">
+                <img 
+                  src={item.image} 
+                  alt={item.title}
+                  className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+                />
+                <div className="absolute top-4 right-4 bg-medicalGreen-700 text-white px-3 py-1 rounded-lg text-sm">
+                  {item.date}
+                </div>
+              </div>
+              <div className="p-6">
+                <h3 className="text-xl font-bold text-medicalGreen-950 mb-4 line-clamp-2 hover:text-medicalGreen-700 transition-colors">
+                  <a href="#">{item.title}</a>
+                </h3>
+                <a href="#" className="text-medicalGreen-700 font-semibold flex items-center gap-2 group-hover:gap-3 transition-all">
+                  اقرأ المزيد
+                  <span>←</span>
+                </a>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default News

frontend/src/components/Landing/Partners.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+
+const partners = [
+  'شركة النفط اليمنية',
+  'مجموعة هائل سعيد أنعم',
+  'منظمة الصحة العالمية',
+  'اليونيسيف',
+  'مركز الملك سلمان',
+  'الهلال الأحمر الإماراتي',
+  'مؤسسة صلة للتنمية',
+  'مؤسسة العون للتنمية',
+]
+
+const Partners = () => {
+  return (
+    <section className="py-12 bg-gray-50 border-y border-gray-100 font-cairo" dir="rtl">
+      <div className="container mx-auto px-4 overflow-hidden">
+        <h3 className="text-center text-gray-500 mb-8 font-bold">شركاء النجاح</h3>
+        <div className="flex animate-scroll whitespace-nowrap space-x-reverse space-x-12">
+          {[...partners, ...partners].map((partner, index) => (
+            <div 
+              key={index} 
+              className="inline-block text-medicalGreen-800 font-bold text-xl opacity-60 hover:opacity-100 transition-opacity"
+            >
+              {partner}
+            </div>
+          ))}
+        </div>
+      </div>
+      <style jsx>{`
+        @keyframes scroll {
+          0% { transform: translateX(0); }
+          100% { transform: translateX(50%); }
+        }
+        .animate-scroll {
+          display: flex;
+          width: 200%;
+          animation: scroll 30s linear infinite;
+        }
+      `}</style>
+    </section>
+  )
+}
+
+export default Partners

frontend/src/components/Landing/Projects.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+import { mdiChevronRight, mdiChevronLeft } from '@mdi/js'
+import BaseIcon from '../BaseIcon'
+
+const projects = [
+  {
+    title: 'برنامج العمليات الجراحية',
+    description: 'تنفيذ عمليات جراحية نوعية للمرضى المعسرين في تخصصات مختلفة تشمل الجراحة العامة وجراحة العظام والعيون.',
+    image: 'https://images.pexels.com/photos/2324449/pexels-photo-2324449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+  },
+  {
+    title: 'توزيع الأدوية والمستلزمات الطبية',
+    description: 'توفير الأدوية الضرورية والمزمنة للمرضى المحتاجين عبر صيدلية المؤسسة الخيرية والمخيمات الطبية.',
+    image: 'https://images.pexels.com/photos/3652103/pexels-photo-3652103.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+  },
+  {
+    title: 'العيادات التخصصية المجانية',
+    description: 'استضافة أطباء استشاريين في مختلف التخصصات لتقديم الاستشارات الطبية والفحوصات المجانية.',
+    image: 'https://images.pexels.com/photos/4021775/pexels-photo-4021775.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1',
+  },
+]
+
+const Projects = () => {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const next = () => setCurrentIndex((prev) => (prev + 1) % projects.length)
+  const prev = () => setCurrentIndex((prev) => (prev - 1 + projects.length) % projects.length)
+
+  return (
+    <section id="projects" className="py-20 bg-white font-cairo" dir="rtl">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center text-medicalGreen-900 mb-16">
+          مشاريعنا الرائدة
+        </h2>
+
+        <div className="relative group">
+          <div className="flex flex-col md:flex-row items-stretch bg-gray-50 rounded-[2rem] overflow-hidden shadow-xl min-h-[400px]">
+            <div className="w-full md:w-1/2 p-10 md:p-16 flex flex-col justify-center">
+              <span className="text-medicalGreen-600 font-bold mb-4 block">مشروع متميز</span>
+              <h3 className="text-3xl font-bold text-medicalGreen-900 mb-6">
+                {projects[currentIndex].title}
+              </h3>
+              <p className="text-gray-600 text-lg leading-relaxed mb-8">
+                {projects[currentIndex].description}
+              </p>
+              <div className="flex space-x-reverse space-x-4 mt-auto">
+                <button 
+                  onClick={prev}
+                  className="w-12 h-12 rounded-full border-2 border-medicalGreen-700 text-medicalGreen-700 flex items-center justify-center hover:bg-medicalGreen-700 hover:text-white transition-all"
+                >
+                  <BaseIcon path={mdiChevronRight} size={24} />
+                </button>
+                <button 
+                  onClick={next}
+                  className="w-12 h-12 rounded-full border-2 border-medicalGreen-700 text-medicalGreen-700 flex items-center justify-center hover:bg-medicalGreen-700 hover:text-white transition-all"
+                >
+                  <BaseIcon path={mdiChevronLeft} size={24} />
+                </button>
+              </div>
+            </div>
+            <div className="w-full md:w-1/2 relative overflow-hidden">
+              <img 
+                src={projects[currentIndex].image} 
+                alt={projects[currentIndex].title}
+                className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Projects

frontend/src/components/Landing/Reels.tsx

@@ -0,0 +1,44 @@
+import React from 'react'
+
+const reels = [
+  { id: 1, thumbnail: 'https://images.pexels.com/photos/5214958/pexels-photo-5214958.jpeg?auto=compress&cs=tinysrgb&w=400&h=600&dpr=1', title: 'عمليات العيون' },
+  { id: 2, thumbnail: 'https://images.pexels.com/photos/5215024/pexels-photo-5215024.jpeg?auto=compress&cs=tinysrgb&w=400&h=600&dpr=1', title: 'مخيم الأمل' },
+  { id: 3, thumbnail: 'https://images.pexels.com/photos/5327656/pexels-photo-5327656.jpeg?auto=compress&cs=tinysrgb&w=400&h=600&dpr=1', title: 'توزيع الأدوية' },
+  { id: 4, thumbnail: 'https://images.pexels.com/photos/5215016/pexels-photo-5215016.jpeg?auto=compress&cs=tinysrgb&w=400&h=600&dpr=1', title: 'خدمات المختبر' },
+]
+
+const Reels = () => {
+  return (
+    <section className="py-20 bg-white font-cairo" dir="rtl">
+      <div className="container mx-auto px-4">
+        <h2 className="text-3xl md:text-4xl font-bold text-center text-medicalGreen-900 mb-16">
+          أنشطتنا في فيديو
+        </h2>
+
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-8">
+          {reels.map((reel) => (
+            <div key={reel.id} className="relative aspect-[9/16] rounded-3xl overflow-hidden group cursor-pointer shadow-xl">
+              <img 
+                src={reel.thumbnail} 
+                alt={reel.title}
+                className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
+              />
+              <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent flex flex-col justify-end p-4">
+                <div className="text-white font-bold text-center">
+                  {reel.title}
+                </div>
+              </div>
+              <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                <div className="w-12 h-12 bg-white/30 backdrop-blur-md rounded-full flex items-center justify-center">
+                  <div className="w-0 h-0 border-t-[8px] border-t-transparent border-r-[12px] border-r-white border-b-[8px] border-b-transparent translate-x-[2px] rotate-180"></div>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Reels

frontend/src/components/NavBarItem.tsx

@@ -1,6 +1,5 @@
-import React, {useEffect, useRef} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import Link from 'next/link'
-import { useState } from 'react'
 import { mdiChevronUp, mdiChevronDown } from '@mdi/js'
 import BaseDivider from './BaseDivider'
 import BaseIcon from './BaseIcon'
@@ -129,4 +128,4 @@ export default function NavBarItem({ item }: Props) {
   }
 
   return <div className={componentClass} ref={excludedRef}>{NavBarItemComponentContents}</div>
-}
+}

frontend/src/layouts/Authenticated.tsx

@@ -1,5 +1,4 @@
-import React, { ReactNode, useEffect } from 'react'
-import { useState } from 'react'
+import React, { ReactNode, useEffect, useState } from 'react'
 import jwt from 'jsonwebtoken';
 import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'
 import menuAside from '../menuAside'
@@ -126,4 +125,4 @@ export default function LayoutAuthenticated({
       </div>
     </div>
   )
-}
+}

frontend/src/pages/_app.tsx

@@ -149,7 +149,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
     setStepsEnabled(false);
   };
 
-  const title = 'App Draft'
+  const title = 'Dar Al-Shifa Medical Foundation'
   const description = "Professional responsive website for Dar Al-Shifa Medical Foundation with updated content and modern design."
   const url = "https://flatlogic.com/"
   const image = "https://project-screens.s3.amazonaws.com/screenshots/37946/app-hero-20260129-153829.png"
@@ -180,6 +180,9 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
             <meta property="twitter:image:height" content={imageHeight} />
 
             <link rel="icon" href="/favicon.svg" />
+            <link rel="preconnect" href="https://fonts.googleapis.com" />
+            <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+            <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
           </Head>
 
           <ErrorBoundary>
@@ -198,4 +201,4 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   )
 }
 
-export default appWithTranslation(MyApp);
+export default appWithTranslation(MyApp);

frontend/src/pages/index.tsx

@@ -1,166 +1,46 @@
+import React from 'react'
+import type { ReactElement } from 'react'
+import Head from 'next/head'
+import LayoutGuest from '../layouts/Guest'
+import Header from '../components/Landing/Header'
+import Hero from '../components/Landing/Hero'
+import AboutUs from '../components/Landing/AboutUs'
+import Projects from '../components/Landing/Projects'
+import Achievements from '../components/Landing/Achievements'
+import News from '../components/Landing/News'
+import Reels from '../components/Landing/Reels'
+import Partners from '../components/Landing/Partners'
+import Contact from '../components/Landing/Contact'
+import Footer from '../components/Landing/Footer'
 
-import React, { useEffect, useState } from 'react';
-import type { ReactElement } from 'react';
-import Head from 'next/head';
-import Link from 'next/link';
-import BaseButton from '../components/BaseButton';
-import CardBox from '../components/CardBox';
-import SectionFullScreen from '../components/SectionFullScreen';
-import LayoutGuest from '../layouts/Guest';
-import BaseDivider from '../components/BaseDivider';
-import BaseButtons from '../components/BaseButtons';
-import { getPageTitle } from '../config';
-import { useAppSelector } from '../stores/hooks';
-import CardBoxComponentTitle from "../components/CardBoxComponentTitle";
-import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
-
-
-export default function Starter() {
-    const [illustrationImage, setIllustrationImage] = useState({
-        src: undefined,
-        photographer: undefined,
-        photographer_url: undefined,
-    })
-    const [illustrationVideo, setIllustrationVideo] = useState({video_files: []})
-    const [contentType, setContentType] = useState('video');
-    const [contentPosition, setContentPosition] = useState('left');
-    const textColor = useAppSelector((state) => state.style.linkColor);
-
-    const title = 'App Draft'
-
-    // Fetch Pexels image/video
-    useEffect(() => {
-        async function fetchData() {
-            const image = await getPexelsImage();
-            const video = await getPexelsVideo();
-            setIllustrationImage(image);
-            setIllustrationVideo(video);
-        }
-        fetchData();
-    }, []);
-
-    const imageBlock = (image) => (
-        <div
-            className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
-            style={{
-                backgroundImage: `${
-                    image
-                        ? `url(${image?.src?.original})`
-                        : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                }`,
-                backgroundSize: 'cover',
-                backgroundPosition: 'left center',
-                backgroundRepeat: 'no-repeat',
-            }}
-        >
-            <div className='flex justify-center w-full bg-blue-300/20'>
-                <a
-                    className='text-[8px]'
-                    href={image?.photographer_url}
-                    target='_blank'
-                    rel='noreferrer'
-                >
-                    Photo by {image?.photographer} on Pexels
-                </a>
-            </div>
-        </div>
-    );
-
-    const videoBlock = (video) => {
-        if (video?.video_files?.length > 0) {
-            return (
-                <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
-                    <video
-                        className='absolute top-0 left-0 w-full h-full object-cover'
-                        autoPlay
-                        loop
-                        muted
-                    >
-                        <source src={video?.video_files[0]?.link} type='video/mp4'/>
-                        Your browser does not support the video tag.
-                    </video>
-                    <div className='flex justify-center w-full bg-blue-300/20 z-10'>
-                        <a
-                            className='text-[8px]'
-                            href={video?.user?.url}
-                            target='_blank'
-                            rel='noreferrer'
-                        >
-                            Video by {video.user.name} on Pexels
-                        </a>
-                    </div>
-                </div>)
-        }
-    };
-
+export default function LandingPage() {
   return (
-      <div
-          style={
-              contentPosition === 'background'
-                  ? {
-                      backgroundImage: `${
-                          illustrationImage
-                              ? `url(${illustrationImage.src?.original})`
-                              : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
-                      }`,
-                      backgroundSize: 'cover',
-                      backgroundPosition: 'left center',
-                      backgroundRepeat: 'no-repeat',
-                  }
-                  : {}
-          }
-      >
+    <div className="min-h-screen bg-white">
       <Head>
-        <title>{getPageTitle('Starter Page')}</title>
+        <title>مؤسسة دار الشفاء الطبية | حضرموت - سيئون</title>
+        <meta name="description" content="مؤسسة دار الشفاء الطبية هي مؤسسة خيرية صحية اجتماعية غير ربحية في حضرموت، تسعى لتطوير القطاع الصحي وتقديم الخدمات الطبية للفئات المحتاجة." />
       </Head>
 
-      <SectionFullScreen bg='violet'>
-      <div
-          className={`flex ${
-              contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
-          } min-h-screen w-full`}
-      >
-          {contentType === 'image' && contentPosition !== 'background'
-              ? imageBlock(illustrationImage)
-              : null}
-          {contentType === 'video' && contentPosition !== 'background'
-              ? videoBlock(illustrationVideo)
-              : null}
-          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
-        <CardBox className='w-full md:w-3/5 lg:w-2/3'>
-            <CardBoxComponentTitle title="Welcome to your App Draft app!"/>
-        
-            <div className="space-y-3">
-                <p className='text-center '>This is a React.js/Node.js app generated by the <a className={`${textColor}`} href="https://flatlogic.com/generator">Flatlogic Web App Generator</a></p>
-                <p className='text-center '>For guides and documentation please check
-                    your local README.md and the <a className={`${textColor}`} href="https://flatlogic.com/documentation">Flatlogic documentation</a></p>
-            </div>
-        
-            <BaseButtons>
-                <BaseButton
-                    href='/login'
-                    label='Login'
-                    color='info'
-                    className='w-full'
-                />
-
-            </BaseButtons>
-        </CardBox>
+      <Header />
+      
+      <main>
+        <div className="pt-16"> {/* Spacer for fixed header */}
+          <Hero />
+          <AboutUs />
+          <Projects />
+          <Achievements />
+          <News />
+          <Reels />
+          <Partners />
+          <Contact />
         </div>
-      </div>
-      </SectionFullScreen>
-      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
-        <p className='py-6 text-sm'>© 2026 <span>{title}</span>. All rights reserved</p>
-        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
-            Privacy Policy
-        </Link>
-      </div>
+      </main>
 
+      <Footer />
     </div>
-  );
+  )
 }
 
-Starter.getLayout = function getLayout(page: ReactElement) {
-  return <LayoutGuest>{page}</LayoutGuest>;
-};
-
+LandingPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>
+}

frontend/tailwind.config.js

@@ -52,6 +52,19 @@ module.exports = {
         green:{
           text: '#45B26B',
         },
+        medicalGreen: {
+          50: '#f0fdf4',
+          100: '#dcfce7',
+          200: '#bbf7d0',
+          300: '#86efac',
+          400: '#4ade80',
+          500: '#22c55e',
+          600: '#16a34a',
+          700: '#15803d',
+          800: '#166534',
+          900: '#14532d',
+          950: '#052e16',
+        },
         'pavitra': {
           'blue': '#0162FD',
           'green': '#00B448',
@@ -86,8 +99,8 @@ module.exports = {
         primaryText: '#FFFFFF',
       },
       fontFamily: {
-        sans: ['Nunito Sans', 'sans-serif'],
-        
+        sans: ['Cairo', 'Nunito Sans', 'sans-serif'],
+        cairo: ['Cairo', 'sans-serif'],
         },
          borderRadius: {
         '3xl': '2rem', 
@@ -128,4 +141,4 @@ module.exports = {
       );
     }),
   ],
-}
+}