src⁄App.js

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import { Routes } from './config/routes';
import './App.css';


class App extends Component {
  render() {
    return (
      <section>
        <Switch>
          {Routes.map((route, index) => [
            <Route
              key={index}
              path={route.path}
              exact={route.exact}
              component={route.component}
            />
          ])}
        </Switch>
      </section>
    );
  }
}

export default App;

src⁄components⁄About.js

import React, { Component } from 'react';
import logo from '../logo.svg';

class About extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">About Page</h1>
        </header>
        <p className="App-intro">
          Welcome to the about page :)
        </p>
      </div>
    );
  }
}

export default About;

src⁄components⁄Home.js

import React, { Component } from 'react';
import logo from '../logo.svg';

class Home extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Home Page</h1>
        </header>
        <p className="App-intro">
          Welcome to the home page :)
        </p>
      </div>
    );
  }
}

export default Home;

src⁄config⁄routes.js

import Home from '../components/Home';
import About from '../components/About';


export const Routes = [
  {
    path: '/',
    exact: true,
    component: Home
  },
  {
    path: '/about-us',
    exact: false,
    component: About
  },
];

src⁄index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'));
registerServiceWorker();

import React, { useState, useEffect } from 'react';

const App = () => {
const [activeTab, setActiveTab] = useState('quran');
const [darkMode, setDarkMode] = useState(() => {
const saved = localStorage.getItem('darkMode');
return saved ? JSON.parse(saved) : false;
});
const [fontSize, setFontSize] = useState(() => {
const saved = localStorage.getItem('fontSize');
return saved ? Number(saved) : 16;
});
const [currentSurah, setCurrentSurah] = useState(null);
const [currentVerseIndex, setCurrentVerseIndex] = useState(0);
const [bookmarks, setBookmarks] = useState(() => {
const saved = localStorage.getItem('bookmarks');
return saved ? JSON.parse(saved) : [];
});
const [prayerTimes, setPrayerTimes] = useState({
fajr: '05:30',
dhuhr: '12:15',
asr: '15:45',
maghrib: '18:20',
isha: '19:50'
});
const [currentPrayer, setCurrentPrayer] = useState('fajr');
const [searchTerm, setSearchTerm] = useState('');
const [selectedJuz, setSelectedJuz] = useState(null);
const [selectedCategory, setSelectedCategory] = useState('الصباح');

// --- بيانات السور ---
const surahs = [
{ id: 1, name: 'الفاتحة', arabicName: 'الْفَاتِحَة', verses: 7, type: 'مكية', juz: 1 },
{ id: 2, name: 'البقرة', arabicName: 'الْبَقَرَة', verses: 286, type: 'مدنية', juz: 1 },
{ id: 3, name: 'آل عمران', arabicName: 'آلِ عِمْرَان', verses: 200, type: 'مدنية', juz: 3 },
{ id: 4, name: 'النساء', arabicName: 'النِّسَاء', verses: 176, type: 'مدنية', juz: 4 },
{ id: 5, name: 'المائدة', arabicName: 'الْمَائِدَة', verses: 120, type: 'مدنية', juz: 6 },
{ id: 6, name: 'الأنعام', arabicName: 'الْأَنْعَام', verses: 165, type: 'مكية', juz: 7 },
{ id: 7, name: 'الأعراف', arabicName: 'الْأَعْرَاف', verses: 206, type: 'مكية', juz: 8 },
{ id: 8, name: 'الأنفال', arabicName: 'الْأَنْفَال', verses: 75, type: 'مدنية', juz: 9 },
{ id: 9, name: 'التوبة', arabicName: 'التَّوْبَة', verses: 129, type: 'مدنية', juz: 10 },
{ id: 10, name: 'يونس', arabicName: 'يُونُس', verses: 109, type: 'مكية', juz: 11 },
// ... (يمكنك إكمال باقي السور)
{ id: 114, name: 'الناس', arabicName: 'النَّاس', verses: 6, type: 'مكية', juz: 30 }
];

// --- بيانات الآيات (مثال: الفاتحة فقط) ---
const versesData = {
1: [
'بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ',
'الْحَمْدُ لِلَّهِ رَبِّ الْعَالَمِينَ',
'الرَّحْمَٰنِ الرَّحِيمِ',
'مَالِكِ يَوْمِ الدِّينِ',
'إِيَّاكَ نَعْبُدُ وَإِيَّاكَ نَسْتَعِينُ',
'اهْدِنَا الصِّرَاطَ الْمُسْتَقِيمَ',
'صِرَاطَ الَّذِينَ أَنْعَمْتَ عَلَيْهِمْ غَيْرِ الْمَغْضُوبِ عَلَيْهِمْ وَلَا الضَّالِّينَ'
]
// يمكنك إضافة السور الأخرى لاحقًا
};

// --- بيانات الأذكار ---
const duas = [
{ id: 1, category: 'الصباح', arabic: 'رَضِيتُ بِاللَّهِ رَبًّا، وَبِالْإِسْلَامِ دِينًا، وَبِمُحَمَّدٍ نَبِيًّا' },
{ id: 2, category: 'الصباح', arabic: 'أَصْبَحْنَا وَأَصْبَحَ الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ' },
{ id: 3, category: 'المساء', arabic: 'أَمْسَيْنَا وَأَمْسَى الْمُلْكُ لِلَّهِ، وَالْحَمْدُ لِلَّهِ' },
{ id: 4, category: 'النوم', arabic: 'بِاسْمِكَ رَبِّي وَضَعْتُ جَنْبِي...' },
{ id: 5, category: 'عام', arabic: 'سُبْحَانَ اللَّهِ وَبِحَمْدِهِ عَدَدَ خَلْقِهِ...' }
];

// --- بيانات الأحاديث ---
const hadiths = [
{ id: 1, arabic: 'مَنْ صَامَ رَمَضَانَ إِيمَانًا وَاحْتِسَابًا غُفِرَ لَهُ مَا تَقَدَّمَ مِنْ ذَنْبِهِ', category: 'صيام' }
];

// --- حفظ الإعدادات ---
useEffect(() => {
localStorage.setItem('darkMode', JSON.stringify(darkMode));
}, [darkMode]);

useEffect(() => {
localStorage.setItem('fontSize', fontSize.toString());
}, [fontSize]);

useEffect(() => {
localStorage.setItem('bookmarks', JSON.stringify(bookmarks));
}, [bookmarks]);

// --- تحديد الصلاة القادمة ---
const nextPrayer = () => {
const now = new Date();
const currentTime = now.getHours() * 60 + now.getMinutes();
const times = {
fajr: 330,
dhuhr: 735,
asr: 945,
maghrib: 1100,
isha: 1190
};
for (let [key, time] of Object.entries(times)) {
if (currentTime < time) return key;
}
return 'fajr';
};

// --- تحديد الموقع وجلب مواقيت الصلاة ---
useEffect(() => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const { latitude, longitude } = position.coords;
fetch(https://api.aladhan.com/v1/timings?latitude=${latitude}&longitude=${longitude}&method=2)
.then(res => res.json())
.then(data => {
const { Fajr, Dhuhr, Asr, Maghrib, Isha } = data.data.timings;
setPrayerTimes({
fajr: Fajr.substring(0, 5),
dhuhr: Dhuhr.substring(0, 5),
asr: Asr.substring(0, 5),
maghrib: Maghrib.substring(0, 5),
isha: Isha.substring(0, 5)
});
})
.catch(err => console.warn("فشل في جلب الأوقات", err));
});
}
}, []);

// --- إشعارات الصلاة ---
useEffect(() => {
if ('Notification' in window) Notification.requestPermission();

const checkTime = () => {
  const now = new Date();
  const minutes = now.getHours() * 60 + now.getMinutes();
  const times = { fajr: 330, dhuhr: 735, asr: 945, maghrib: 1100, isha: 1190 };

  Object.entries(times).forEach(([prayer, time]) => {
    if (Math.abs(minutes - time) <= 1) {
      if (Notification.permission === 'granted') {
        new Notification('وقت الصلاة!', {
          body: `حان وقت صلاة ${{
            fajr: 'الفجر',
            dhuhr: 'الظهر',
            asr: 'العصر',
            maghrib: 'المغرب',
            isha: 'العشاء'
          }[prayer]}`,
          icon: '/icon.png'
        });
      }
    }
  });
};

const interval = setInterval(checkTime, 60000);
return () => clearInterval(interval);

}, []);

// --- حجم الخط ---
const increaseFontSize = () => setFontSize(prev => Math.min(prev + 2, 28));
const decreaseFontSize = () => setFontSize(prev => Math.max(prev - 2, 12));

// --- الوضع الليلي ---
const toggleDarkMode = () => setDarkMode(prev => !prev);

// --- العلامات المرجعية ---
const toggleBookmark = (surahId) => {
setBookmarks(prev => prev.includes(surahId) ? prev.filter(id => id !== surahId) : [...prev, surahId]);
};

// --- تبويب القرآن ---
const QuranTab = () => {
const [quranView, setQuranView] = useState('list');
const currentVerses = currentSurah ? versesData[currentSurah.id] || [] : [];

const goToNextVerse = () => {
  if (currentVerseIndex < currentVerses.length - 1) {
    setCurrentVerseIndex(prev => prev + 1);
  }
};

const goToPrevVerse = () => {
  if (currentVerseIndex > 0) {
    setCurrentVerseIndex(prev => prev - 1);
  }
};

useEffect(() => {
  if (currentSurah) {
    localStorage.setItem(`surah_${currentSurah.id}_verse`, currentVerseIndex);
  }
}, [currentSurah, currentVerseIndex]);

const filteredSurahs = surahs.filter(surah =>
  surah.name.includes(searchTerm) || surah.arabicName.includes(searchTerm)
).filter(surah => selectedJuz ? surah.juz === selectedJuz : true);

if (quranView === 'reading' && currentSurah) {
  return (
    <div style={{ fontSize: `${fontSize}px` }} className="min-h-screen bg-gradient-to-br from-emerald-50 to-green-100 dark:from-emerald-900 dark:to-green-900 p-6 transition-colors duration-300">
      <div className="max-w-4xl mx-auto">
        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 mb-6 text-center">
          <h2 className="text-2xl font-bold text-gray-800 dark:text-white">{currentSurah.name}</h2>
          <p className="text-sm text-gray-600 dark:text-gray-400">سورة {currentSurah.type} • الآية {currentVerseIndex + 1} من {currentVerses.length}</p>
        </div>

        <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 text-2xl font-arabic leading-relaxed text-gray-800 dark:text-white text-center">
          {currentVerses[currentVerseIndex]}
        </div>

        <div className="flex justify-between mt-8">
          <button onClick={goToPrevVerse} disabled={currentVerseIndex === 0} className="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl disabled:opacity-50">السابق</button>
          <button onClick={goToNextVerse} disabled={currentVerseIndex === currentVerses.length - 1} className="px-6 py-3 bg-emerald-500 text-white rounded-xl disabled:opacity-50">التالي</button>
        </div>

        <div className="mt-6 text-center">
          <button onClick={() => setQuranView('list')} className="text-emerald-600 dark:text-emerald-400">العودة إلى القائمة</button>
        </div>
      </div>
    </div>
  );
}

return (
  <div className="min-h-screen bg-gradient-to-br from-emerald-50 to-green-100 dark:from-emerald-900 dark:to-green-900 p-4 transition-colors duration-300">
    <div className="max-w-4xl mx-auto">
      <div className="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-4 mb-4">
        <h1 className="text-xl font-bold text-gray-800 dark:text-white mb-3">القرآن الكريم</h1>
        <input
          type="text"
          placeholder="ابحث عن سورة..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-xl bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-white focus:outline-none"
        />
      </div>

      <div className="flex flex-wrap gap-2 mb-4">
        <button onClick={() => setSelectedJuz(null)} className={`px-3 py-1 rounded-full text-sm ${!selectedJuz ? 'bg-emerald-500 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}>الكل</button>
        {Array.from({ length: 30 }, (_, i) => i + 1).map(juz => (
          <button key={juz} onClick={() => setSelectedJuz(juz)} className={`px-3 py-1 rounded-full text-sm ${selectedJuz === juz ? 'bg-emerald-500 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}>جزء {juz}</button>
        ))}
      </div>

      <div className="space-y-3">
        {filteredSurahs.map(surah => (
          <div
            key={surah.id}
            onClick={() => {
              setCurrentSurah(surah);
              const saved = localStorage.getItem(`surah_${surah.id}_verse`);
              setCurrentVerseIndex(saved ? Number(saved) : 0);
              setQuranView('reading');
            }}
            className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow border-l-4 border-emerald-500"
          >
            <div className="flex justify-between items-center">
              <div className="flex items-center space-x-3 space-x-reverse">
                <span className="text-2xl font-bold text-emerald-600">{surah.id}</span>
                <div>
                  <h3 className="font-bold text-gray-800 dark:text-white">{surah.name}</h3>
                  <p className="text-sm text-gray-600 dark:text-gray-400">{surah.arabicName} • {surah.verses} آية</p>
                </div>
              </div>
              <button
                onClick={(e) => { e.stopPropagation(); toggleBookmark(surah.id); }}
                className="text-amber-500"
              >
                <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z" /></svg>
              </button>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);

};

// --- تبويب الصلاة ---
const PrayerTab = () => (

مواقيت الصلاة

    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 mb-6">
      <h3 className="text-lg font-bold text-gray-800 dark:text-white mb-4">الصلاة القادمة</h3>
      <div className="flex justify-between items-center">
        <span className="text-xl">{{
          fajr: 'الفجر',
          dhuhr: 'الظهر',
          asr: 'العصر',
          maghrib: 'المغرب',
          isha: 'العشاء'
        }[nextPrayer()]}</span>
        <span className="text-2xl font-bold text-blue-600">{prayerTimes[nextPrayer()]}</span>
      </div>
    </div>

    <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
      <h3 className="text-lg font-bold text-gray-800 dark:text-white mb-4">جميع الأوقات</h3>
      <div className="space-y-3">
        {Object.entries(prayerTimes).map(([key, time]) => (
          <div key={key} className="flex justify-between p-3 border-b border-gray-200 dark:border-gray-700">
            <span>{{
              fajr: 'الفجر',
              dhuhr: 'الظهر',
              asr: 'العصر',
              maghrib: 'المغرب',
              isha: 'العشاء'
            }[key]}</span>
            <span className="font-bold">{time}</span>
          </div>
        ))}
      </div>
    </div>
  </div>
</div>

);

// --- تبويب الأذكار ---
const DuaTab = () => {
const categories = ['الصباح', 'المساء', 'النوم', 'الاستيقاظ', 'عام'];
const filteredDuas = duas.filter(d => d.category === selectedCategory);

return (
  <div className="min-h-screen bg-gradient-to-br from-green-50 to-teal-100 dark:from-green-900 dark:to-teal-900 p-4">
    <div className="max-w-4xl mx-auto">
      <div className="bg-white dark:bg-gray-800 shadow-lg rounded-2xl p-6 mb-4">
        <h1 className="text-xl font-bold text-gray-800 dark:text-white text-center">الأذكار</h1>
        <div className="flex space-x-2 space-x-reverse overflow-x-auto py-2">
          {categories.map(cat => (
            <button
              key={cat}
              onClick={() => setSelectedCategory(cat)}
              className={`px-4 py-1 rounded-full text-sm ${selectedCategory === cat ? 'bg-green-500 text-white' : 'bg-gray-200 dark:bg-gray-700'}`}
            >
              {cat}
            </button>
          ))}
        </div>
      </div>

      <div className="space-y-3">
        {filteredDuas.map(dua => (
          <div key={dua.id} className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow text-right text-lg">
            {dua.arabic}
          </div>
        ))}
      </div>
    </div>
  </div>
);

};

// --- تبويب المقالات والأحاديث ---
const ArticlesTab = () => {
const [activeSubTab, setActiveSubTab] = useState('articles');
return (

المقالات والأحاديث

<button onClick={() => setActiveSubTab('articles')} className={px-4 py-2 ${activeSubTab === 'articles' ? 'border-b-2 border-amber-500' : ''}}>مقالات
<button onClick={() => setActiveSubTab('hadiths')} className={px-4 py-2 ${activeSubTab === 'hadiths' ? 'border-b-2 border-amber-500' : ''}}>أحاديث

      {activeSubTab === 'articles' ? (
        <div className="space-y-4">
          <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow">
            <h3 className="text-lg font-bold">فضل قراءة القرآن</h3>
            <p className="text-gray-600 dark:text-gray-300 mt-2">القرآن نور وهدى...</p>
          </div>
        </div>
      ) : (
        <div className="space-y-4">
          {hadiths.map(h => (
            <div key={h.id} className="bg-white dark:bg-gray-800 rounded-2xl p-6 shadow text-right">
              <p className="text-lg">{h.arabic}</p>
              <p className="text-sm text-gray-500 mt-2">{h.category}</p>
            </div>
          ))}
        </div>
      )}
    </div>
  </div>
);

};

// --- تبويب الإعدادات ---
const SettingsTab = () => (

الإعدادات

الوضع الليلي
<button onClick={toggleDarkMode} className={w-12 h-6 rounded-full p-1 ${darkMode ? 'bg-indigo-500' : 'bg-gray-300'}}>
<div className={w-4 h-4 bg-white rounded-full ${darkMode ? 'translate-x-6' : 'translate-x-0'}}>

حجم الخط

A-
{fontSize}px
A+

);

return (
<div className={darkMode ? 'dark' : ''}>
{/* المحتوى */}

{activeTab === 'quran' && }
{activeTab === 'prayer' && }
{activeTab === 'dua' && }
{activeTab === 'articles' && }
{activeTab === 'settings' && }

  {/* شريط التصفح */}
  <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
    <div className="max-w-4xl mx-auto flex">
      {['quran', 'prayer', 'dua', 'articles', 'settings'].map(tab => (
        <button
          key={tab}
          onClick={() => setActiveTab(tab)}
          className="flex-1 py-3 text-center text-sm"
        >
          <div className="text-xl mb-1">
            {tab === 'quran' && <span>📖</span>}
            {tab === 'prayer' && <span>🕋</span>}
            {tab === 'dua' && <span>🤲</span>}
            {tab === 'articles' && <span>📚</span>}
            {tab === 'settings' && <span>⚙️</span>}
          </div>
          <div>{{
            quran: 'القرآن',
            prayer: 'الصلاة',
            dua: 'الأذكار',
            articles: 'مقالات',
            settings: 'الإعدادات'
          }[tab]}</div>
        </button>
      ))}
    </div>
  </div>
</div>

);
};

export default App;

npx create-react-app crypto-slot-ui
cd crypto-slot-ui
npm install framer-motion ethers
npm install -D tailwindcss
npx tailwindcss init -p

import React, { useState } from "react";
import { ShoppingCart, Menu, Globe } from "lucide-react";
import { motion } from "framer-motion";

export default function App() {
const [language, setLanguage] = useState("fr");

const texts = {
ar: {
topBanner: "✨ عطور أصلية 100% - ضمان الأصالة 🌹",
freeShipping: "🚚 توصيل مجاني للطلبات فوق 600 درهم مغربي",
discover: "اكتشف عطورنا الجديدة",
btn: "اكتشف الكل",
best: "الأكثر مبيعاً",
},
fr: {
topBanner: "✨ Parfums 100% originaux – Authenticité garantie 🌹",
freeShipping: "🚚 Livraison gratuite à partir de 600 MAD d’achats",
discover: "Découvrez nos nouveaux parfums",
btn: "Découvrir tout",
best: "Best Sellers",
},
};

const t = texts[language];

const products = [
{ name: "Dior Sauvage", img: "https://i.imgur.com/vOqI4yG.png", price: "1200 MAD" },
{ name: "Bleu de Chanel", img: "https://i.imgur.com/ncWj4Yo.png", price: "1300 MAD" },
{ name: "Versace Eros", img: "https://i.imgur.com/8JbYZt2.png", price: "950 MAD" },
];

return (
<div
dir={language === "ar" ? "rtl" : "ltr"}
className="min-h-screen bg-white text-gray-800"
>
{/* 🔵 Top banner */}

{t.topBanner}

  <div className="bg-gray-800 text-white text-sm py-2 text-center">
    {t.freeShipping}
  </div>

  {/* 🧭 Navbar */}
  <header className="flex justify-between items-center px-6 py-4 shadow-md bg-white sticky top-0 z-10">
    <div className="flex items-center gap-2">
      <Menu size={22} className="text-gray-700 cursor-pointer" />
      <h1 className="text-2xl font-bold text-blue-600">Vordex</h1>
    </div>

    <div className="flex items-center gap-4">
      <button
        onClick={() => setLanguage(language === "ar" ? "fr" : "ar")}
        className="flex items-center gap-1 text-gray-600 hover:text-blue-600"
      >
        <Globe size={18} />
        {language === "ar" ? "Français" : "العربية"}
      </button>
      <ShoppingCart className="text-gray-700 hover:text-blue-600 cursor-pointer" />
    </div>
  </header>

  {/* 🌸 Hero Section */}
  <section className="relative">
    <img
      src="https://images.unsplash.com/photo-1585123334904-37aaab2c8c31?auto=format&fit=crop&w=900&q=80"
      alt="perfume"
      className="w-full h-[400px] object-cover"
    />
    <div className="absolute inset-0 bg-black/40 flex flex-col justify-center items-center text-center text-white">
      <motion.h2
        className="text-3xl md:text-4xl font-semibold mb-4"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
      >
        {t.discover}
      </motion.h2>
      <motion.button
        whileHover={{ scale: 1.05 }}
        className="border border-white px-6 py-2 rounded-full hover:bg-white hover:text-black transition"
      >
        {t.btn}
      </motion.button>
    </div>
  </section>

  {/* 🛍️ Products Section */}
  <section className="py-12 px-6 text-center">
    <h3 className="text-2xl font-semibold mb-8">{t.best}</h3>

    <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
      {products.map((p, i) => (
        <motion.div
          key={i}
          whileHover={{ scale: 1.05 }}
          className="bg-white rounded-2xl shadow-lg p-4"
        >
          <img
            src={p.img}
            alt={p.name}
            className="w-full h-56 object-contain mb-4"
          />
          <h4 className="font-medium text-lg">{p.name}</h4>
          <p className="text-blue-600 font-semibold">{p.price}</p>
        </motion.div>
      ))}
    </div>
  </section>

  {/* ⚪ Footer */}
  <footer className="bg-gray-100 text-center text-sm text-gray-500 py-4">
    © 2025 Vordex Fragrance. All rights reserved.
  </footer>
</div>

);
}