Merge branch 'main' of github.com:Charles40130/Projet-Dev-Web-Ing1
This commit is contained in:
Charles Mendiburu
commit
0cfd237f07
@ -1,129 +1,852 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Search, MapPin, Calendar, Bus, ArrowRight, LogIn, UserPlus } from 'lucide-react';
|
||||
import React, { useState, useEffect } from "react";
|
||||
import {
|
||||
UserPlus,
|
||||
LogIn,
|
||||
BadgePlus,
|
||||
RadioTower,
|
||||
Search,
|
||||
Cloud,
|
||||
CloudRain,
|
||||
Droplets,
|
||||
Wind,
|
||||
Thermometer,
|
||||
Sun,
|
||||
Moon,
|
||||
MapPin,
|
||||
CalendarClock,
|
||||
ArrowRight,
|
||||
BellRing,
|
||||
LayoutDashboard,
|
||||
TowerControl,
|
||||
} from "lucide-react";
|
||||
import { useAuth } from "../AuthContext";
|
||||
|
||||
function EnhancedWeatherHome() {
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
const [activeFilter, setActiveFilter] = useState("all");
|
||||
const [currentTime, setCurrentTime] = useState(new Date());
|
||||
const { user, token } = useAuth();
|
||||
|
||||
function Home() {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [activeFilter, setActiveFilter] = useState('all');
|
||||
const [name, setName] = useState([]);
|
||||
const { token, logout } = useAuth();
|
||||
const { user } = useAuth();
|
||||
const isDayTime = currentTime.getHours() > 6 && currentTime.getHours() < 20;
|
||||
|
||||
useEffect(() => {
|
||||
const timer = setInterval(() => {
|
||||
setCurrentTime(new Date());
|
||||
}, 60000);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}, []);
|
||||
|
||||
const formatDate = (date) => {
|
||||
const options = { weekday: "long", day: "numeric", month: "long" };
|
||||
return date.toLocaleDateString("fr-FR", options);
|
||||
};
|
||||
|
||||
const hourlyForecast = [
|
||||
{
|
||||
time: "Maintenant",
|
||||
temp: "21°",
|
||||
icon: <Cloud className="text-indigo-500" size={24} />,
|
||||
},
|
||||
{
|
||||
time: "14:00",
|
||||
temp: "22°",
|
||||
icon: <Cloud className="text-indigo-500" size={24} />,
|
||||
},
|
||||
{
|
||||
time: "15:00",
|
||||
temp: "22°",
|
||||
icon: <Sun className="text-yellow-500" size={24} />,
|
||||
},
|
||||
{
|
||||
time: "16:00",
|
||||
temp: "21°",
|
||||
icon: <Sun className="text-yellow-500" size={24} />,
|
||||
},
|
||||
{
|
||||
time: "17:00",
|
||||
temp: "20°",
|
||||
icon: <CloudRain className="text-blue-500" size={24} />,
|
||||
},
|
||||
{
|
||||
time: "18:00",
|
||||
temp: "19°",
|
||||
icon: <CloudRain className="text-blue-500" size={24} />,
|
||||
},
|
||||
];
|
||||
|
||||
const dailyForecast = [
|
||||
{
|
||||
day: "Lun",
|
||||
temp: "21°/15°",
|
||||
icon: <Cloud className="text-indigo-400" size={32} />,
|
||||
},
|
||||
{
|
||||
day: "Mar",
|
||||
temp: "23°/16°",
|
||||
icon: <Sun className="text-yellow-500" size={32} />,
|
||||
},
|
||||
{
|
||||
day: "Mer",
|
||||
temp: "24°/17°",
|
||||
icon: <Sun className="text-yellow-500" size={32} />,
|
||||
},
|
||||
{
|
||||
day: "Jeu",
|
||||
temp: "22°/16°",
|
||||
icon: <CloudRain className="text-blue-400" size={32} />,
|
||||
},
|
||||
{
|
||||
day: "Ven",
|
||||
temp: "20°/14°",
|
||||
icon: <CloudRain className="text-blue-400" size={32} />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-50">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
||||
Bienvenue dans ta ville intelligente.</h2>
|
||||
{user ? (
|
||||
<>
|
||||
<h1>Bienvenue, {user.name} {user.surname}!</h1>
|
||||
<p>Email : {user.sub}</p>
|
||||
<p>Rôle : {user.role}</p>
|
||||
<p>Rôle : {user.id}</p>
|
||||
<div
|
||||
className={`min-h-screen ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-br from-blue-100 to-sky-200"
|
||||
: "bg-gradient-to-br from-blue-900 to-indigo-900 text-white"
|
||||
}`}
|
||||
>
|
||||
{" "}
|
||||
<div className="relative overflow-hidden">
|
||||
<div className="absolute inset-0 z-0">
|
||||
<div
|
||||
className={`absolute inset-0 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-yellow-200/20 to-blue-300/30"
|
||||
: "bg-gradient-to-r from-blue-900/50 to-purple-900/60"
|
||||
}`}
|
||||
></div>
|
||||
{isDayTime ? (
|
||||
<>
|
||||
<div className="absolute top-10 right-10 w-32 h-32 rounded-full bg-yellow-300 blur-xl opacity-70 animate-pulse"></div>
|
||||
<div className="absolute -top-10 left-1/4 w-16 h-16 rounded-full bg-white blur-md opacity-30"></div>
|
||||
<div className="absolute top-1/3 left-1/3 w-12 h-12 rounded-full bg-white blur-md opacity-30"></div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="absolute top-10 right-14 w-20 h-20 rounded-full bg-gray-200 blur-lg opacity-70"></div>
|
||||
<div className="absolute top-14 right-10 w-14 h-14 rounded-full bg-gray-900 blur-sm"></div>
|
||||
<div className="absolute top-20 left-1/4 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
|
||||
<div className="absolute top-40 left-1/3 w-1 h-1 rounded-full bg-white blur-none opacity-90"></div>
|
||||
<div className="absolute top-14 left-1/2 w-2 h-2 rounded-full bg-white blur-none opacity-90"></div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</>
|
||||
):(
|
||||
<h2>Non connecté</h2>
|
||||
)}
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
Découvrez tout ce que votre ville a à offrir - des événements locaux aux horaires de transport, le tout en un seul endroit.
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
|
||||
<div className="text-center relative">
|
||||
<h1
|
||||
className={`text-5xl font-bold mb-6 ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
} animate-fade-in`}
|
||||
>
|
||||
La météo en temps réel
|
||||
</h1>
|
||||
<p
|
||||
className={`text-xl ${
|
||||
isDayTime ? "text-gray-700" : "text-gray-200"
|
||||
} max-w-3xl mx-auto mb-10`}
|
||||
>
|
||||
Prévisions précises et personnalisées pour vous aider à planifier
|
||||
votre journée en toute sérénité.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="max-w-3xl mx-auto mb-12">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={24} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search for locations, events, or transport..."
|
||||
className="w-full pl-12 pr-4 py-4 rounded-xl border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex gap-4 mt-4 justify-center">
|
||||
<button
|
||||
onClick={() => setActiveFilter('all')}
|
||||
className={`px-4 py-2 rounded-lg ${
|
||||
activeFilter === 'all' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
||||
}`}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveFilter('locations')}
|
||||
className={`px-4 py-2 rounded-lg ${
|
||||
activeFilter === 'locations' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
||||
}`}
|
||||
>
|
||||
Locations
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveFilter('events')}
|
||||
className={`px-4 py-2 rounded-lg ${
|
||||
activeFilter === 'events' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
||||
}`}
|
||||
>
|
||||
Events
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setActiveFilter('transport')}
|
||||
className={`px-4 py-2 rounded-lg ${
|
||||
activeFilter === 'transport' ? 'bg-indigo-600 text-white' : 'bg-white text-gray-600'
|
||||
}`}
|
||||
>
|
||||
Transport
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Features Grid */}
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<MapPin className="text-indigo-600" size={24} />
|
||||
|
||||
<div className="max-w-3xl mx-auto relative z-10 mb-16 transition-all duration-300 hover:transform hover:-translate-y-1">
|
||||
<div className="relative">
|
||||
<Search
|
||||
className={`absolute left-4 top-1/2 transform -translate-y-1/2 ${
|
||||
isDayTime ? "text-gray-400" : "text-gray-500"
|
||||
}`}
|
||||
size={24}
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Rechercher une ville ou un code postal..."
|
||||
className={`w-full pl-12 pr-4 py-4 rounded-xl border ${
|
||||
isDayTime
|
||||
? "border-gray-200 bg-white"
|
||||
: "border-gray-700 bg-gray-800 text-white"
|
||||
} focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-lg`}
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
<button className="absolute right-2 top-1/2 transform -translate-y-1/2 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">
|
||||
Rechercher
|
||||
</button>
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Points d'intérêt</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Découvrez les meilleurs endroits de votre ville, qu'il s'agisse de restaurants, de parcs ou de lieux culturels.
|
||||
</p>
|
||||
<a href="#" className="flex items-center text-indigo-600 hover:text-indigo-700">
|
||||
Explorer les lieux <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<Calendar className="text-indigo-600" size={24} />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Evenements locaux</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Restez informé des derniers événements, festivals et rassemblements communautaires dans votre région.
|
||||
</p>
|
||||
<a href="#" className="flex items-center text-indigo-600 hover:text-indigo-700">
|
||||
Voir les événements <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md transition-shadow">
|
||||
<div className="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-4">
|
||||
<Bus className="text-indigo-600" size={24} />
|
||||
</div>
|
||||
<h3 className="text-xl font-semibold mb-2">Transports publics</h3>
|
||||
<p className="text-gray-600 mb-4">
|
||||
Accédez en temps réel aux horaires et aux itinéraires des bus, des trains et des autres transports publics.
|
||||
</p>
|
||||
<a href="#" className="flex items-center text-indigo-600 hover:text-indigo-700">
|
||||
Vérifier les horaires <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 relative z-10">
|
||||
<div
|
||||
className={`rounded-2xl shadow-xl mb-10 overflow-hidden transition-all duration-300 hover:shadow-2xl ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
}`}
|
||||
>
|
||||
<div className="p-8">
|
||||
<div className="flex flex-col lg:flex-row justify-between">
|
||||
<div className="mb-6 lg:mb-0">
|
||||
<div className="flex items-center">
|
||||
<MapPin
|
||||
className={`${
|
||||
isDayTime ? "text-indigo-600" : "text-indigo-400"
|
||||
} mr-2`}
|
||||
size={20}
|
||||
/>
|
||||
<h3
|
||||
className={`text-xl font-medium ${
|
||||
isDayTime ? "text-gray-700" : "text-gray-200"
|
||||
}`}
|
||||
>
|
||||
Paris, France
|
||||
</h3>
|
||||
</div>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||
} mb-6`}
|
||||
>
|
||||
{formatDate(currentTime)}
|
||||
</p>
|
||||
<div className="flex items-center">
|
||||
{isDayTime ? (
|
||||
<Cloud className="text-indigo-500 mr-6" size={64} />
|
||||
) : (
|
||||
<Moon className="text-indigo-300 mr-6" size={64} />
|
||||
)}
|
||||
<div>
|
||||
<h2
|
||||
className={`text-6xl font-bold ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
21°C
|
||||
</h2>
|
||||
<p
|
||||
className={`text-lg ${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
}`}
|
||||
>
|
||||
Partiellement nuageux
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
|
||||
<div
|
||||
className={`rounded-xl p-4 ${
|
||||
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
Ressenti
|
||||
</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<Thermometer
|
||||
className={`${
|
||||
isDayTime ? "text-red-500" : "text-red-400"
|
||||
} mr-2`}
|
||||
size={18}
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-medium ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
23°C
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-xl p-4 ${
|
||||
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
Humidité
|
||||
</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<Droplets
|
||||
className={`${
|
||||
isDayTime ? "text-blue-500" : "text-blue-400"
|
||||
} mr-2`}
|
||||
size={18}
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-medium ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
68%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-xl p-4 ${
|
||||
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
Vent
|
||||
</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<Wind
|
||||
className={`${
|
||||
isDayTime ? "text-blue-500" : "text-blue-400"
|
||||
} mr-2`}
|
||||
size={18}
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-medium ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
12 km/h
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-xl p-4 ${
|
||||
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
Précipitations
|
||||
</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<CloudRain
|
||||
className={`${
|
||||
isDayTime ? "text-blue-500" : "text-blue-400"
|
||||
} mr-2`}
|
||||
size={18}
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-medium ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
30%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-xl p-4 ${
|
||||
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
Lever du soleil
|
||||
</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<Sun
|
||||
className={`${
|
||||
isDayTime ? "text-yellow-500" : "text-yellow-400"
|
||||
} mr-2`}
|
||||
size={18}
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-medium ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
06:42
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-xl p-4 ${
|
||||
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
||||
}`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-500" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
Coucher du soleil
|
||||
</p>
|
||||
<div className="flex items-center mt-1">
|
||||
<Moon
|
||||
className={`${
|
||||
isDayTime ? "text-indigo-500" : "text-indigo-400"
|
||||
} mr-2`}
|
||||
size={18}
|
||||
/>
|
||||
<span
|
||||
className={`text-lg font-medium ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
20:51
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`px-8 py-6 ${isDayTime ? "bg-gray-50" : "bg-gray-900"}`}
|
||||
>
|
||||
<h3
|
||||
className={`text-lg font-semibold mb-4 ${
|
||||
isDayTime ? "text-gray-800" : "text-gray-200"
|
||||
}`}
|
||||
>
|
||||
Prévisions horaires
|
||||
</h3>
|
||||
<div className="flex overflow-x-auto pb-4 gap-6">
|
||||
{hourlyForecast.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex-shrink-0 flex flex-col items-center p-4 rounded-lg ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} shadow-sm`}
|
||||
>
|
||||
<p
|
||||
className={`text-sm font-medium ${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{item.time}
|
||||
</p>
|
||||
{item.icon}
|
||||
<p
|
||||
className={`text-lg font-bold mt-1 ${
|
||||
isDayTime ? "text-gray-900" : "text-white"
|
||||
}`}
|
||||
>
|
||||
{item.temp}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`rounded-2xl shadow-xl mb-10 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
}`}
|
||||
>
|
||||
<div className="p-8">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-6 ${
|
||||
isDayTime ? "text-gray-800" : "text-gray-200"
|
||||
}`}
|
||||
>
|
||||
Prévisions 5 jours
|
||||
</h3>
|
||||
<div className="space-y-6">
|
||||
{dailyForecast.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center justify-between p-4 rounded-lg ${
|
||||
isDayTime ? "hover:bg-gray-50" : "hover:bg-gray-700"
|
||||
} transition-colors`}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<span
|
||||
className={`text-lg font-medium w-12 ${
|
||||
isDayTime ? "text-gray-700" : "text-gray-300"
|
||||
}`}
|
||||
>
|
||||
{item.day}
|
||||
</span>
|
||||
{item.icon}
|
||||
</div>
|
||||
<span
|
||||
className={`text-lg font-bold ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
{item.temp}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3
|
||||
className={`text-2xl font-bold mb-6 ${
|
||||
isDayTime ? "text-gray-800" : "text-gray-200"
|
||||
}`}
|
||||
>
|
||||
Services météo
|
||||
</h3>
|
||||
{user?.role === "user" && (
|
||||
<div
|
||||
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} transform hover:-translate-y-1`}
|
||||
>
|
||||
<div
|
||||
className={`h-32 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-blue-400 to-indigo-500"
|
||||
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<CalendarClock className="text-white" size={48} />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-2 ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
Visualisation des objets connectés météorologiques
|
||||
</h3>
|
||||
<p
|
||||
className={`${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
} mb-4`}
|
||||
>
|
||||
Consultez l'ensemble des objets connectés ainsi que leurs
|
||||
données dans l'ensemble de la France
|
||||
</p>
|
||||
<a
|
||||
href="/gestionObjets"
|
||||
className={`flex items-center ${
|
||||
isDayTime
|
||||
? "text-indigo-600 hover:text-indigo-700"
|
||||
: "text-indigo-400 hover:text-indigo-300"
|
||||
}`}
|
||||
>
|
||||
Voir les objets <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!token && (
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<div
|
||||
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} transform hover:-translate-y-1`}
|
||||
>
|
||||
<div
|
||||
className={`h-32 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-blue-400 to-indigo-500"
|
||||
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<UserPlus className="text-white" size={48} />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-2 ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
Inscrivez-vous !{" "}
|
||||
</h3>
|
||||
<p
|
||||
className={`${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
} mb-4`}
|
||||
>
|
||||
Avoir un compte sur notre site permet de consulter
|
||||
l'intégralité des objets connectés météorologiques dans
|
||||
l'ensemble de la France
|
||||
</p>
|
||||
<a
|
||||
href="/signup"
|
||||
className={`flex items-center ${
|
||||
isDayTime
|
||||
? "text-indigo-600 hover:text-indigo-700"
|
||||
: "text-indigo-400 hover:text-indigo-300"
|
||||
}`}
|
||||
>
|
||||
S'inscrire <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} transform hover:-translate-y-1`}
|
||||
>
|
||||
<div
|
||||
className={`h-32 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-yellow-300 to-orange-400"
|
||||
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<LogIn className="text-white" size={48} />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-2 ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
Connectez-vous !
|
||||
</h3>
|
||||
<p
|
||||
className={`${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
} mb-4`}
|
||||
>
|
||||
Heureux de vous retrouver ! Retrouvez votre compte tel que
|
||||
vous l'avez laissez !
|
||||
</p>
|
||||
<a
|
||||
href="/login"
|
||||
className={`flex items-center ${
|
||||
isDayTime
|
||||
? "text-indigo-600 hover:text-indigo-700"
|
||||
: "text-indigo-400 hover:text-indigo-300"
|
||||
}`}
|
||||
>
|
||||
Se connecter <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{user?.role === "complexe" && (
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<div
|
||||
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} transform hover:-translate-y-1`}
|
||||
>
|
||||
<div
|
||||
className={`h-32 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-green-400 to-teal-500"
|
||||
: "bg-gradient-to-r from-green-700 to-teal-800"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<RadioTower className="text-white" size={48} />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-2 ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
Consulter les objets connectés météorologiques
|
||||
</h3>
|
||||
<p
|
||||
className={`${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
} mb-4`}
|
||||
>
|
||||
Accédez aux données en temps réel des objets connectés
|
||||
météorologiques, modifiez leurs paramètres et consultez
|
||||
l'historique des mesures.{" "}
|
||||
</p>
|
||||
<a
|
||||
href="/gestionObjets"
|
||||
className={`flex items-center ${
|
||||
isDayTime
|
||||
? "text-indigo-600 hover:text-indigo-700"
|
||||
: "text-indigo-400 hover:text-indigo-300"
|
||||
}`}
|
||||
>
|
||||
Explorer les objets <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} transform hover:-translate-y-1`}
|
||||
>
|
||||
<div
|
||||
className={`h-32 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-red-400 to-orange-500"
|
||||
: "bg-gradient-to-r from-red-700 to-orange-800"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<BadgePlus className="text-white" size={48} />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-2 ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
Ajouter un nouvel objet connecté
|
||||
</h3>
|
||||
<p
|
||||
className={`${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
} mb-4`}
|
||||
>
|
||||
Intégrez facilement un nouvel objet connecté en renseignant
|
||||
ses informations et en configurant ses paramètres pour une
|
||||
gestion optimale.
|
||||
</p>
|
||||
<a
|
||||
href="/ajouterObjet"
|
||||
className={`flex items-center ${
|
||||
isDayTime
|
||||
? "text-indigo-600 hover:text-indigo-700"
|
||||
: "text-indigo-400 hover:text-indigo-300"
|
||||
}`}
|
||||
>
|
||||
Ajouter un objet{" "}
|
||||
<ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{user?.role === "admin" && (
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
||||
<div
|
||||
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} transform hover:-translate-y-1`}
|
||||
>
|
||||
<div
|
||||
className={`h-32 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-green-400 to-teal-500"
|
||||
: "bg-gradient-to-r from-green-700 to-teal-800"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<TowerControl className="text-white" size={48} />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-2 ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
Accéder au tableau d'Administration
|
||||
</h3>
|
||||
<p
|
||||
className={`${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
} mb-4`}
|
||||
>
|
||||
Vous pourrez gérer les utilisateurs du site mais aussi les objets connectés
|
||||
</p>
|
||||
<a
|
||||
href="/dashboard"
|
||||
className={`flex items-center ${
|
||||
isDayTime
|
||||
? "text-indigo-600 hover:text-indigo-700"
|
||||
: "text-indigo-400 hover:text-indigo-300"
|
||||
}`}
|
||||
>
|
||||
Tableau d'Administration <ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
||||
isDayTime ? "bg-white" : "bg-gray-800"
|
||||
} transform hover:-translate-y-1`}
|
||||
>
|
||||
<div
|
||||
className={`h-32 ${
|
||||
isDayTime
|
||||
? "bg-gradient-to-r from-red-400 to-orange-500"
|
||||
: "bg-gradient-to-r from-red-700 to-orange-800"
|
||||
} flex items-center justify-center`}
|
||||
>
|
||||
<RadioTower className="text-white" size={48} />
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<h3
|
||||
className={`text-xl font-semibold mb-2 ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
Gestion des objets connectés
|
||||
</h3>
|
||||
<p
|
||||
className={`${
|
||||
isDayTime ? "text-gray-600" : "text-gray-300"
|
||||
} mb-4`}
|
||||
>
|
||||
Ce module vous permet de gérer les capteurs et stations connectés de France de manière simple et efficace.
|
||||
</p>
|
||||
<a
|
||||
href="/gestion"
|
||||
className={`flex items-center ${
|
||||
isDayTime
|
||||
? "text-indigo-600 hover:text-indigo-700"
|
||||
: "text-indigo-400 hover:text-indigo-300"
|
||||
}`}
|
||||
>
|
||||
Gestion des objets{" "}
|
||||
<ArrowRight size={16} className="ml-2" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<footer className={`py-12 ${isDayTime ? "bg-gray-100" : "bg-gray-900"}`}>
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||
<div className="flex items-center mb-6 md:mb-0">
|
||||
<Cloud
|
||||
className={`${
|
||||
isDayTime ? "text-indigo-600" : "text-indigo-400"
|
||||
} mr-2`}
|
||||
size={24}
|
||||
/>
|
||||
<span
|
||||
className={`text-xl font-bold ${
|
||||
isDayTime ? "text-gray-800" : "text-white"
|
||||
}`}
|
||||
>
|
||||
VigiMétéo
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
className={`text-sm ${
|
||||
isDayTime ? "text-gray-600" : "text-gray-400"
|
||||
}`}
|
||||
>
|
||||
© 2025 VigiMétéo. Tous droits réservés.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
export default EnhancedWeatherHome;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user