diff --git a/banquise-website/app/globals.css b/banquise-website/app/globals.css index 851c876..2f9eebd 100644 --- a/banquise-website/app/globals.css +++ b/banquise-website/app/globals.css @@ -18,6 +18,12 @@ --color-banquise-blue-lightest-hex: #A5F0FF; --color-banquise-gray: #F6F6F6; + /* Couleurs Discord officielles */ + --color-discord-blurple: #5865F2; + --color-discord-dark: #4752C4; + --color-discord-old-blurple: #7289DA; + --color-discord-old-dark: #5B6EAE; + /* Transitions communes */ --transition-default: all 0.3s ease-in-out; --transition-fast: all 0.2s ease-in-out; @@ -35,6 +41,7 @@ .text-banquise-blue-light { color: var(--color-banquise-blue-light-hex); } .text-banquise-blue-lightest { color: var(--color-banquise-blue-lightest-hex); } .text-banquise-gray { color: var(--color-banquise-gray); } + .text-discord { color: var(--color-discord-blurple); } /* Background colors */ .bg-banquise-blue { background-color: var(--color-banquise-blue-hex); } @@ -42,6 +49,7 @@ .bg-banquise-blue-light { background-color: var(--color-banquise-blue-light-hex); } .bg-banquise-blue-lightest { background-color: var(--color-banquise-blue-lightest-hex); } .bg-banquise-gray { background-color: var(--color-banquise-gray); } + .bg-discord { background-color: var(--color-discord-blurple); } /* Opacity helpers using rgba() */ .bg-banquise-blue-5 { background-color: rgba(var(--color-banquise-blue), 0.05); } diff --git a/banquise-website/components/common/Button.tsx b/banquise-website/components/common/Button.tsx index dc1c8fb..26db144 100644 --- a/banquise-website/components/common/Button.tsx +++ b/banquise-website/components/common/Button.tsx @@ -20,7 +20,7 @@ const sizeClasses = { const variantClasses = { primary: 'bg-gradient-to-r from-blue-600 to-blue-500 text-white shadow-lg hover:shadow-xl hover:from-blue-700 hover:to-blue-600 border-2 border-blue-600/20', - discord: 'bg-gradient-to-r from-indigo-600 to-purple-600 text-white shadow-lg hover:shadow-xl hover:from-indigo-700 hover:to-purple-700 border-2 border-indigo-600/20', + discord: 'bg-gradient-to-r from-[#5865F2] to-[#7289DA] text-white shadow-lg hover:shadow-xl hover:from-[#4752C4] hover:to-[#5B6EAE] border-2 border-[#5865F2]/20', auth: 'bg-gradient-to-r from-blue-500 to-blue-400 text-white shadow-lg hover:shadow-xl hover:from-blue-600 hover:to-blue-500 border-2 border-blue-500/20', secondary: 'bg-white text-blue-700 border-2 border-blue-600 shadow-md hover:shadow-lg hover:bg-blue-50', outline: 'bg-transparent text-gray-700 border-2 border-gray-300 hover:bg-gray-50 hover:border-gray-400', diff --git a/banquise-website/components/layout/Footer.tsx b/banquise-website/components/layout/Footer.tsx index a3e173b..7567ddc 100644 --- a/banquise-website/components/layout/Footer.tsx +++ b/banquise-website/components/layout/Footer.tsx @@ -3,13 +3,7 @@ import { URLS, SITE_CONFIG } from '@/lib/config/constants'; import { BookOpen, GitBranch, Gamepad2, Cloud, Rocket, Heart } from 'lucide-react'; import { useTranslation } from '@/lib/hooks/useTranslation'; import { cn, commonClasses } from '@/lib/utils'; - -// Factorisation des icônes SVG -const DiscordIcon = () => ( - - - -); +import { DiscordIcon } from '@/components/ui/DiscordLogo'; const EmailIcon = () => ( diff --git a/banquise-website/components/layout/MobileMenu.tsx b/banquise-website/components/layout/MobileMenu.tsx index 909d41c..49f07dd 100644 --- a/banquise-website/components/layout/MobileMenu.tsx +++ b/banquise-website/components/layout/MobileMenu.tsx @@ -1,9 +1,12 @@ import React, { useEffect } from 'react'; +import Link from 'next/link'; import { Button } from '@/components/common/Button'; import { Logo } from './navbar/Logo'; -import { URLS } from '@/lib/config/constants'; +import { X, Menu, Globe, Home, Info, Package, Phone, User } from 'lucide-react'; import { useTranslation } from '@/lib/hooks/useTranslation'; -import { cn, createNavClickHandler, commonClasses } from '@/lib/utils'; +import { URLS } from '@/lib/config/constants'; +import { cn, commonClasses, createNavClickHandler } from '@/lib/utils'; +import { DiscordLogo } from '@/components/ui/DiscordLogo'; import type { Translation } from '@/types/i18n'; interface MobileMenuProps { @@ -125,9 +128,7 @@ export const MobileMenu: React.FC = ({ isOpen, onClose, transla ), discord: ( - - - + ), user: ( diff --git a/banquise-website/components/layout/navbar/ActionButtons.tsx b/banquise-website/components/layout/navbar/ActionButtons.tsx index 15eb6b9..561d4f1 100644 --- a/banquise-website/components/layout/navbar/ActionButtons.tsx +++ b/banquise-website/components/layout/navbar/ActionButtons.tsx @@ -1,72 +1,278 @@ -import React from 'react'; -import { Button } from '../../common/Button'; -import { URLS } from '@/lib/config/constants'; +import React from 'react';import React from 'react';import React from 'react';import React from 'react'; + +import { DiscordLogo } from '@/components/ui/DiscordLogo'; + +import { URLS } from '@/lib/config/constants';import { Button } from '../../common/Button'; + + + +// Fonction utilitaire simple pour combiner les classesimport { URLS } from '@/lib/config/constants';import { Button } from '../../common/Button';import { Button } from '../../common/ > -// Fonction utilitaire simple pour combiner les classes const mergeClasses = (...classes: (string | undefined | null | false)[]): string => { - return classes.filter(Boolean).join(' '); + + return classes.filter(Boolean).join(' ');import { DiscordLogo } from '@/components/ui/DiscordLogo'; + }; +import { URLS } from '@/lib/config/constants'; + interface ActionButtonsProps { - scrolled?: boolean; + + scrolled?: boolean;// Fonction utilitaire simple pour combiner les classes + languageSwitcher: React.ReactElement; - className?: string; + + className?: string;const mergeClasses = (...classes: (string | undefined | null | false)[]): string => {import { DiscordLogo } from '@/components/ui/DiscordLogo'; n'; + } -export const ActionButtons: React.FC = ({ - scrolled = false, - languageSwitcher, - className -}) => { - return ( -
- {/* Sélecteur de langue moderne */} -
- {languageSwitcher} -
- - {/* Bouton Discord moderne */} - + return classes.filter(Boolean).join(' '); + +export const ActionButtons: React.FC = ({ + + scrolled = false, };import { URLS } from '@/lib/config/constants'; + + languageSwitcher, + + className + +}) => { + + return (interface ActionButtonsProps {// Fonction utilitaire simple pour combiner les classesimport { DiscordLogo } from '@/components/ui/DiscordLogo'; + +
languageSwitcher: React.ReactElement;const mergeClasses = (...classes: (string | undefined | null | false)[]): string => { + + {/* Sélecteur de langue moderne */} + +
className?: string; + + {languageSwitcher} + +
} return classes.filter(Boolean).join(' ');// Fonction utilitaire simple pour combiner les classes + + + + {/* Bouton Discord moderne */} - {/* Version icon seulement pour les écrans moyens */} className languageSwitcher: React.ReactElement;interface ActionButtonsProps { + + + + {/* Version icon seulement pour les écrans moyens */} )}> + + = ({ } + +
+ + ); onClick={() => window.open(URLS.social.discord, '_blank')} + +}; + className={mergeClasses( scrolled = false, + + // Base styles + + 'inline-flex items-center px-4 py-2.5 text-sm font-medium', languageSwitcher, export const ActionButtons: React.FC = ({ + + 'bg-[#5865F2] text-white rounded-xl border border-[#5865F2]/20', + + 'transition-all duration-200 ease-in-out', className scrolled = false, + + 'hover:bg-[#4752C4] hover:scale-[1.02] hover:shadow-lg hover:shadow-[#5865F2]/25', + + 'focus:outline-none focus:ring-2 focus:ring-[#5865F2]/50',}) => { languageSwitcher, + + 'active:scale-[0.98]', + + return ( className + + // Mobile adaptation + + 'hidden lg:flex'
{ + + )} + + aria-label="Rejoindre notre Discord" 'hidden md:flex items-center space-x-3', return ( + + > + + className
)}> 'hidden md:flex items-center space-x-3', + + + + {/* Version icon seulement pour les écrans moyens */} {/* Sélecteur de langue moderne */} className + + onClick={() => window.open(URLS.social.discord, '_blank')} {/* Bouton Discord moderne */} + +
+ + ); className={mergeClasses( + + Discord + + {/* Version icon seulement pour les écrans moyens */} + + > + +
+ + ); + +};
); diff --git a/banquise-website/components/ui/DiscordButton.tsx b/banquise-website/components/ui/DiscordButton.tsx new file mode 100644 index 0000000..a9ae25a --- /dev/null +++ b/banquise-website/components/ui/DiscordButton.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { Button } from '@/components/common/Button'; +import { DiscordLogo } from './DiscordLogo'; +import { URLS } from '@/lib/config/constants'; + +interface DiscordButtonProps { + children: React.ReactNode; + href?: string; + onClick?: () => void; + size?: 'sm' | 'md' | 'lg'; + className?: string; + showIcon?: boolean; +} + +export const DiscordButton: React.FC = ({ + children, + href = URLS.social.discord, + onClick, + size = 'md', + className = '', + showIcon = true +}) => { + const content = ( + <> + {showIcon && } + {children} + + ); + + if (href) { + return ( + + + + ); + } + + return ( + + ); +}; + +export default DiscordButton; \ No newline at end of file diff --git a/banquise-website/components/ui/DiscordLogo.tsx b/banquise-website/components/ui/DiscordLogo.tsx new file mode 100644 index 0000000..1659fc5 --- /dev/null +++ b/banquise-website/components/ui/DiscordLogo.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import Image from 'next/image'; + +interface DiscordLogoProps { + size?: 'sm' | 'md' | 'lg' | 'xl'; + variant?: 'svg' | 'png'; + className?: string; + alt?: string; +} + +const sizeClasses = { + sm: 'w-4 h-4', + md: 'w-6 h-6', + lg: 'w-8 h-8', + xl: 'w-12 h-12' +}; + +// Logo Discord officiel en SVG +const DiscordSVG: React.FC<{ className?: string }> = ({ className }) => ( + + + +); + +export const DiscordLogo: React.FC = ({ + size = 'md', + variant = 'svg', + className = '', + alt = 'Discord' +}) => { + const baseClasses = sizeClasses[size]; + const finalClassName = `${baseClasses} ${className}`; + + if (variant === 'png') { + return ( + {alt} + ); + } + + return ; +}; + +// Export du composant SVG pour usage direct +export const DiscordIcon = () => ( + +); + +export default DiscordLogo; \ No newline at end of file diff --git a/banquise-website/lib/styles/designSystem.ts b/banquise-website/lib/styles/designSystem.ts index 808dff4..246efe4 100644 --- a/banquise-website/lib/styles/designSystem.ts +++ b/banquise-website/lib/styles/designSystem.ts @@ -6,8 +6,8 @@ export const designSystem = { primaryBr: "bg-gradient-to-br from-banquise-blue to-banquise-blue-light", card: "bg-gradient-to-br from-banquise-blue-dark/10 to-banquise-blue-dark/5", cardHover: "hover:from-banquise-blue-dark/15 hover:to-banquise-blue-dark/8", - discord: "bg-gradient-to-r from-indigo-600 to-purple-600", - discordHover: "hover:from-indigo-500 hover:to-purple-500", + discord: "bg-gradient-to-r from-[#5865F2] to-[#7289DA]", // Couleurs officielles Discord + discordHover: "hover:from-[#4752C4] hover:to-[#5B6EAE]", // Couleurs Discord hover officielles hero: "bg-gradient-to-br from-banquise-blue to-banquise-blue-dark", section: "bg-gradient-to-b from-white/95 to-white" }, @@ -18,7 +18,7 @@ export const designSystem = { effects: "hover:shadow-xl hover:-translate-y-1 hover:scale-105", variants: { primary: "text-white", - discord: "group relative overflow-hidden text-white font-semibold rounded-xl hover:shadow-indigo-500/25", + discord: "group relative overflow-hidden text-white font-semibold rounded-xl hover:shadow-[#5865F2]/25", // Ombre officielle Discord auth: "group relative overflow-hidden text-white font-semibold rounded-xl", secondary: "bg-white/10 backdrop-blur-sm text-white border border-white/20", outline: "bg-transparent border-2 border-banquise-blue text-banquise-blue hover:bg-banquise-blue hover:text-white"