Ajout d'effets de transition et de transformations au survol pour plusieurs composants de l'interface utilisateur

front/app/page.tsx

@@ -4,15 +4,28 @@ import { Podcast } from "@/components/podcast";
 import { CalendarWidget } from "@/components/calendar-widget";
 import { News } from "@/components/news";
 import { Todo } from "@/components/todo";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "./api/auth/[...nextauth]/route";
+import { Clock } from "@/components/ui/Clock";
 
 export const metadata = {
   title: "Enkun - Dashboard",
 };
 
-export default function Page() {
+export default async function Page() {
+  const session = await getServerSession(authOptions);
+
   return (
     <div>
       <div className='container mx-auto p-4'>
+        <div className='flex justify-between items-center align-middle mb-6 alig'>
+          {session?.user && (
+            <h1 className='text-2xl font-bold'>
+              Bienvenue, {session.user.first_name} !
+            </h1>
+          )}
+          <Clock />
+        </div>
         <div className='grid grid-cols-12 gap-4'>
           <div className='col-span-3'>
             <QuoteCard />

front/components/calendar-widget.tsx

@@ -1,19 +1,18 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 
 export function CalendarWidget() {
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
-        <div className="text-sm font-medium">JEUDI</div>
-        <div className="text-4xl font-bold">24</div>
+        <div className='text-sm font-medium'>JEUDI</div>
+        <div className='text-4xl font-bold'>24</div>
       </CardHeader>
       <CardContent>
-        <div className="space-y-2">
-          <h3 className="font-medium">Classe UX Design en visio conférence</h3>
-          <p className="text-sm text-gray-500">Rappel : Examen dans 2 jours</p>
+        <div className='space-y-2'>
+          <h3 className='font-medium'>Classe UX Design en visio conférence</h3>
+          <p className='text-sm text-gray-500'>Rappel : Examen dans 2 jours</p>
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-

front/components/messages.tsx

@@ -1,15 +1,14 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export function Messages() {
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
         <CardTitle>Messages - Non Lu</CardTitle>
       </CardHeader>
-      <CardContent className="p-6 text-center text-gray-500">
+      <CardContent className='p-6 text-center text-gray-500'>
         Aucun nouveau messages
       </CardContent>
     </Card>
-  )
+  );
 }
-

front/components/news.tsx

@@ -1,37 +1,38 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export function News() {
   const newsItems = [
     {
-      title: "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest",
+      title:
+        "Children trapped 900 feet in air when chairlift cable snaps in Pakistan's northwest",
       source: "CNN",
     },
     {
-      title: "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?",
+      title:
+        "Jonathan Taylor landing spots: Colts give All-Pro RB permission to seek trade; Dolphins interested?",
       source: "CBS Sports",
     },
     {
       title: "China's Baidu reports 15% revenue growth, beating expectations",
       source: "CNBC",
     },
-  ]
+  ];
 
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
         <CardTitle>News</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="space-y-4">
+        <div className='space-y-4'>
           {newsItems.map((item, i) => (
-            <div key={i} className="space-y-1">
-              <h3 className="font-medium">{item.title}</h3>
-              <p className="text-sm text-gray-500">{item.source}</p>
+            <div key={i} className='space-y-1'>
+              <h3 className='font-medium'>{item.title}</h3>
+              <p className='text-sm text-gray-500'>{item.source}</p>
             </div>
           ))}
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-

front/components/podcast.tsx

@@ -1,30 +1,33 @@
-import { Card, CardContent, CardHeader } from "@/components/ui/card"
-import Image from "next/image"
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import Image from "next/image";
 
 export function Podcast() {
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
-        <div className="text-sm font-medium text-red-500">PODCAST</div>
-        <div className="text-lg font-bold">DU JOUR</div>
+        <div className='text-sm font-medium text-red-500'>PODCAST</div>
+        <div className='text-lg font-bold'>DU JOUR</div>
       </CardHeader>
-      <CardContent className="space-y-4">
-        <div className="flex space-x-4">
+      <CardContent className='space-y-4'>
+        <div className='flex space-x-4'>
           <Image
-            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-1-1%20Calendar%20-%20monthwew-cE0LJkqgUVPz4mpTeZ9Ldk4GbXd9Ck.png"
-            alt="Podcast cover"
+            src='https://hebbkx1anhila5yf.public.blob.vercel-storage.com/7-1-1%20Calendar%20-%20monthwew-cE0LJkqgUVPz4mpTeZ9Ldk4GbXd9Ck.png'
+            alt='Podcast cover'
             width={80}
             height={80}
-            className="rounded-lg"
+            className='rounded-lg'
           />
-          <div className="space-y-1">
-            <h3 className="font-medium">Raphaël Glucksmann, Député Européen et Essayiste</h3>
-            <p className="text-sm text-gray-500">Une vie au service de l'engagement</p>
-            <p className="text-xs text-gray-400">InPower par Louise Aubery</p>
+          <div className='space-y-1'>
+            <h3 className='font-medium'>
+              Raphaël Glucksmann, Député Européen et Essayiste
+            </h3>
+            <p className='text-sm text-gray-500'>
+              Une vie au service de l'engagement
+            </p>
+            <p className='text-xs text-gray-400'>InPower par Louise Aubery</p>
           </div>
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-

front/components/quote-card.tsx

@@ -30,7 +30,7 @@ export function QuoteCard() {
   };
 
   return (
-    <Card className='relative'>
+    <Card className='relative transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardContent className='p-6'>
         <blockquote className='space-y-2'>
           <p className='text-lg'>{quote ? quote.quote : "Loading..."}</p>

front/components/todo.tsx

@@ -1,35 +1,37 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
-import { Button } from "@/components/ui/button"
-import { Checkbox } from "@/components/ui/checkbox"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
 
 export function Todo() {
   const todos = [
     { text: "send e-mails", done: false },
     { text: "do the visuals", done: false },
     { text: "write the contract", done: false },
-  ]
+  ];
 
   return (
-    <Card>
+    <Card className='transition-transform duration-500 ease-in-out transform hover:scale-105'>
       <CardHeader>
         <CardTitle>Todo</CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="space-y-4">
+        <div className='space-y-4'>
           {todos.map((todo, i) => (
-            <div key={i} className="flex items-center space-x-2">
+            <div key={i} className='flex items-center space-x-2'>
               <Checkbox id={`todo-${i}`} />
-              <label htmlFor={`todo-${i}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+              <label
+                htmlFor={`todo-${i}`}
+                className='text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
+              >
                 {todo.text}
               </label>
             </div>
           ))}
-          <Button className="w-full mt-4" variant="secondary">
+          <Button className='w-full mt-4' variant='secondary'>
             Add Todo
           </Button>
         </div>
       </CardContent>
     </Card>
-  )
+  );
 }
-

front/components/ui/Clock.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+export function Clock() {
+  const [time, setTime] = useState(new Date());
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTime(new Date());
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className='text-4xl text-white'>
+      {time.toLocaleTimeString("fr-FR", {
+        hour: "2-digit",
+        minute: "2-digit",
+        second: "2-digit",
+      })}
+    </div>
+  );
+}