Small changes

Author: hedocode

src/app/equipe/page.tsx

@@ -1,3 +1,4 @@
+import Button from "@/components/Button/Button";
 import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
@@ -34,9 +35,7 @@ export default function Equipe() {
                         </a>.
                         <br/>Ou alors...
                         <Link className="block mt-6" href="/contact">
-                            <button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
-                                Contactez-moi !
-                            </button>
+                            <Button>Contactez-moi !</Button>
                         </Link>
                     </p>
                 </article>

src/app/realisations/page.tsx

@@ -1,3 +1,4 @@
+import Button from "@/components/Button/Button";
 import Carousel from "@/components/Global/Carousel/component";
 import Link from "next/link";
 
@@ -24,13 +25,22 @@ const discoStarImages = [
 
 export default function Realisations() {
     return (
-        <section className="flex flex-col items-center justify-center bg-white dark:bg-black text-gray-900 dark:text-white p-6 min-h-screen">
+        <section className="flex flex-col items-center justify-center p-6">
             <div className="max-w-3xl w-full">
                 <h1 className="text-4xl md:text-5xl font-bold mb-6 text-center">Nos réalisations</h1>
                 <p className="text-lg max-w-xl text-center mb-16 mx-auto leading-relaxed">
                     Découvrez nos projets récents et comment nous avons aidé nos clients à atteindre leurs objectifs grâce à des solutions informatiques sur mesure.
                 </p>
 
+                <div className="mb-16">
+                    <div className="text-center mb-8">
+                        <h2 className="text-3xl font-bold mb-4 text-blue-600 dark:text-blue-400">Client confidentiel</h2>
+                        <p className="text-lg max-w-md mx-auto mb-6 text-gray-700 dark:text-gray-300">
+                            Après avoir passé un accord de confidentialité, nous avons réalisé un cadrage de projet composé de schémas UML et d&apos;un cahier des charges techniques.
+                        </p>
+                    </div>
+                </div>
+
                 {/* Disco Star Project */}
                 <div className="mb-16">
                     <div className="text-center mb-8">
@@ -46,9 +56,7 @@ export default function Realisations() {
                         />
 
                         <a className="block mt-6" href="https://discostar.game" target="_blank" rel="noopener noreferrer">
-                            <button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
-                                Visiter le site
-                            </button>
+                            <Button>Visiter le site</Button>
                         </a>
                     </div>
                 </div>
@@ -65,9 +73,7 @@ export default function Realisations() {
                     <p className="text-gray-600 dark:text-gray-400">
                         Plus de réalisations à venir... <br/>Peut-être avec vous ?
                         <Link className="block mt-6" href="/contact">
-                            <button className="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg">
-                                Contactez-nous !
-                            </button>
+                            <Button>Contactez-nous !</Button>
                         </Link>
                     </p>
                 </div>

src/components/AnimatedTitleVariableMorphing.tsx

@@ -345,19 +345,16 @@ export default function AnimatedTitleVariableMorphing() {
         <div className="w-full relative flex flex-col items-center">
             {/* Container avec le filtre SVG */}
             <div 
-                className="relative w-full"
+                className="relative flex justify-center items-center w-full"
                 style={{
-                filter: 'url(#threshold) blur(0.6px)',
-                minHeight: '120px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center'
+                    filter: 'url(#threshold) blur(0.6px)',
+                    minHeight: '120px',
                 }}
             >
                 {/* Premier texte */}
                 <span
                     ref={text1Ref}
-                    className="absolute text-6xl md:text-8xl font-bold text-black dark:text-white tracking-tight select-none"
+                    className="absolute text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-8xl font-bold text-black dark:text-white tracking-tight select-none"
                     style={{
                         fontFamily: `"${currentFont.name}", sans-serif`,
                         width: '100%',
@@ -375,7 +372,7 @@ export default function AnimatedTitleVariableMorphing() {
                 {/* Deuxième texte */}
                 <span
                     ref={text2Ref}
-                    className="absolute text-6xl md:text-8xl font-bold text-black dark:text-white tracking-tight select-none"
+                    className="absolute text-3xl sm:text-4xl md:text-5xl lg:text-6xl xl:text-8xl font-bold text-black dark:text-white tracking-tight select-none"
                     style={{
                         fontFamily: `"${nextFont.name}", sans-serif`,
                         width: '100%',

src/components/Button/Button.tsx

@@ -0,0 +1,16 @@
+
+
+
+export default function Button(
+    { children, className, ...props }
+    : React.ButtonHTMLAttributes<HTMLButtonElement>
+) {
+    return (
+        <button
+            className={`bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg ${className}`}
+            {...props}
+        >
+            {children}
+        </button>
+    );
+}

src/components/Global/Header/styles.css

@@ -19,16 +19,16 @@
     @apply text-lg font-bold text-gray-900 dark:text-white hover:text-blue-950 dark:hover:text-blue-100 transition-colors;
 
     &.active {
-        background: linear-gradient(to right, hsl(0, 100%, 30%), hsl(60, 100%, 30%), hsl(120, 100%, 30%), hsl(180, 100%, 30%), hsl(240, 100%, 30%), hsl(300, 100%, 30%), hsl(0, 100%, 30%), hsl(60, 100%, 30%), hsl(120, 100%, 30%), hsl(180, 100%, 30%)) 0 0 / 1000%;
+        background: linear-gradient(to right, hsl(300, 100%, 30%), hsl(0, 100%, 30%), hsl(60, 100%, 30%), hsl(120, 100%, 30%), hsl(180, 100%, 30%), hsl(240, 100%, 30%), hsl(300, 100%, 30%), hsl(0, 100%, 30%), hsl(60, 100%, 30%)) 0 0 / 1000%;
         color: transparent;
         -webkit-background-clip: text;
         background-clip: text;
-        animation: shimmer 5s linear infinite;
+        animation: shimmer 5s linear infinite alternate;
     }
 }
 @media (prefers-color-scheme: dark) {
     .header .link.active {
-        background: linear-gradient(to right, hsl(0, 100%, 70%), hsl(60, 100%, 70%), hsl(120, 100%, 70%), hsl(180, 100%, 70%), hsl(240, 100%, 70%), hsl(300, 100%, 70%), hsl(0, 100%, 70%), hsl(60, 100%, 70%), hsl(120, 100%, 70%), hsl(180, 100%, 70%)) 0 0 / 1000%;
+        background: linear-gradient(to right, hsl(300, 100%, 70%), hsl(0, 100%, 70%), hsl(60, 100%, 70%), hsl(120, 100%, 70%), hsl(180, 100%, 70%), hsl(240, 100%, 70%), hsl(300, 100%, 70%), hsl(0, 100%, 70%), hsl(60, 100%, 70%)) 0 0 / 1000%;
         -webkit-background-clip: text;
         background-clip: text;
     }

src/components/PageSpecific/Home/Sections/Hero.tsx

@@ -3,17 +3,17 @@ import AnimatedTitleVariableMorphing from "@/components/AnimatedTitleVariableMor
 
 export default function Hero() {
     return (
-        <section className="flex items-center justify-center h-full px-4">
-          <div className="flex flex-col items-center w-full max-w-10xl mx-auto text-center space-y-10">
+        <section className="flex items-center justify-center h-full w-full px-4">
+          <div className="flex flex-col items-center w-full mx-auto text-center space-y-10">
             {/* Hero Title */}
             <AnimatedTitleVariableMorphing/>
 
             {/* Subtitle */}
             <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-400 font-medium">
               Parce que coder est un sacerdoce.
             </p>
-            <p className="text-sm md:text-md text-gray-600 dark:text-gray-400 font-medium max-w-md">
-              Sacerdoce (nom masculin), sens figuré : Fonction qui présente un caractère quasi religieux en raison du dévouement qu&apos;elle exige.
+            <p className="text-sm md:text-md text-gray-600 dark:text-gray-400 font-medium max-w-lg">
+              Sacerdoce (nom masculin), sens figuré : Activité qui présente un caractère quasi religieux en raison du dévouement qu&apos;elle exige.
             </p>
 
             {/* Email Input Section */}