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();

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>

);
}