Hugging Face's logo

Spaces:
Bilquar
/
livresmaroc
Running

App Files Community
livresmaroc
File size: 6,878 Bytes 
b43c03a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trésors du Maroc - Livres Anciens</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500&display=swap');
        
        body {
            font-family: 'Montserrat', sans-serif;
            background-color: #f8f5f0;
        }
        
        .title-font {
            font-family: 'Playfair Display', serif;
        }
        
        .book-card:hover .book-overlay {
            opacity: 1;
        }
        
        .book-overlay {
            transition: all 0.3s ease;
        }
        
        .hero-pattern {
            background-image: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80');
            background-size: cover;
            background-position: center;
            background-blend-mode: overlay;
        }
        
        .nav-link::after {
            content: '';
            display: block;
            width: 0;
            height: 2px;
            background: #8b5a2b;
            transition: width .3s;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .cart-count {
            top: -8px;
            right: -8px;
        }
    </style>
</head>
<body class="text-gray-800">
    <!-- Header -->
    <header class="bg-white shadow-sm">
        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
            <div class="flex items-center space-x-2">
                <i class="fas fa-book-open text-2xl text-amber-800"></i>
                <h1 class="title-font text-2xl font-bold text-amber-900">Trésors du Maroc</h1>
            </div>
            
            <nav class="hidden md:flex space-x-8">
                <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Accueil</a>
                <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Collection</a>
                <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Raretés</a>
                <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Histoire</a>
                <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Contact</a>
            </nav>
            
            <div class="flex items-center space-x-4">
                <div class="relative">
                    <button id="cart-btn" class="text-gray-700 hover:text-amber-800">
                        <i class="fas fa-shopping-cart text-xl"></i>
                        <span id="cart-count" class="cart-count absolute bg-amber-700 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span>
                    </button>
                </div>
                <button class="md:hidden text-gray-700">
                    <i class="fas fa-bars text-xl"></i>
                </button>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero-pattern bg-amber-900 bg-opacity-70 py-20">
        <div class="container mx-auto px-4 text-center">
            <h2 class="title-font text-4xl md:text-5xl font-bold text-white mb-6">Découvrez les Trésors Littéraires du Maroc</h2>
            <p class="text-xl text-white max-w-2xl mx-auto mb-8">Une collection exclusive de livres anciens racontant l'histoire, la culture et les traditions du Royaume</p>
            <button class="bg-amber-700 hover:bg-amber-800 text-white font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105">
                Explorer la Collection
            </button>
        </div>
    </section>

    <!-- Featured Books -->
    <section class="py-16 bg-white">
        <div class="container mx-auto px-4">
            <div class="text-center mb-12">
                <h2 class="title-font text-3xl font-bold text-amber-900 mb-4">Nos Raretés</h2>
                <p class="max-w-2xl mx-auto text-gray-600">Des ouvrages uniques datant du 18ème au 20ème siècle, témoins de l'histoire riche du Maroc</p>
            </div>
            
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Book 1 -->
                <div class="book-card bg-white rounded-lg shadow-md overflow-hidden relative group">
                    <div class="relative overflow-hidden h-64">
                        <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Livre ancien sur le Maroc" class="w-full h-full object-cover">
                        <div class="book-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0">
                            <button class="add-to-cart bg-amber-700 hover:bg-amber-800 text-white py-2 px-6 rounded-full transition" data-id="1">
                                Ajouter au panier
                            </button>
                        </div>
                    </div>
                    <div class="p-4">
                        <h3 class="title-font font-bold text-lg mb-1">Maroc Impérial</h3>
                        <p class="text-sm text-gray-500 mb-2">Édouard Michaux-Bellaire, 1912</p>
                        <div class="flex justify-between items-center">
                            <span class="font-bold text-amber-800">€450</span>
                            <span class="text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded">Édition originale</span>
                        </div>
                    </div>
                </div>
                
                <!-- Book 2 -->
                <div class="book-card bg-white rounded-lg shadow-md overflow-hidden relative group">
                    <div class="relative overflow-hidden h-64">
                        <img src="https://images.unsplash.com/photo-1589998059171-988d322dfe03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Livre ancien sur le Maroc" class="w-full h-full object-cover">
                        <div class="book-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0">
                            <button class="add-to-cart bg-amber-700 hover:bg-amber-800 text-white py-2 px-6 rounded-full transition" data-id="2">
                                Ajouter au panier
</html>