diff --git a/.gitea/workflows/build.yaml b/.gitea/workflows/build.yaml index 82dddb0..9c31713 100644 --- a/.gitea/workflows/build.yaml +++ b/.gitea/workflows/build.yaml @@ -1,31 +1,78 @@ -name: Build -run-name: CI/CD website +name: Build and Test +run-name: Website build validation + on: - #push: - # branches: - # - main - # - dev + push: + branches: [main, dev] pull_request: - types: [opened, synchronize, reopened] - branches: - - main - - dev + branches: [main, dev] jobs: - build-check: + build-classic: runs-on: ubuntu-latest + name: Classic Build steps: - - name: Check out repository code - uses: actions/checkout@v4 - - name: Use Node.js - uses: actions/setup-node@v4 + - uses: actions/checkout@v4 + + - uses: actions/setup-node@v4 with: - node-version: '24.x' - - name: Install dependencies + node-version: '20' + + - uses: pnpm/action-setup@v4 + with: + version: 8 + + - name: Install and build run: | cd banquise-website - npm ci - - name: Building + pnpm install --frozen-lockfile + pnpm build + + - name: Lint check run: | cd banquise-website - npm run build + pnpm lint + + build-docker: + runs-on: ubuntu-latest + name: Docker Build + needs: build-classic + steps: + - uses: actions/checkout@v4 + + - uses: docker/setup-buildx-action@v3 + + - name: Create Dockerfile if missing + run: | + cd banquise-website + if [ ! -f "Dockerfile" ]; then + cat > Dockerfile << 'EOF' + FROM node:20-alpine AS builder + RUN npm install -g pnpm + WORKDIR /app + COPY package.json pnpm-lock.yaml ./ + RUN pnpm install --frozen-lockfile + COPY . . + RUN pnpm build + + FROM node:20-alpine AS runner + RUN npm install -g pnpm + WORKDIR /app + COPY package.json pnpm-lock.yaml ./ + RUN pnpm install --frozen-lockfile --prod + COPY --from=builder /app/.next ./.next + COPY --from=builder /app/public ./public + EXPOSE 3000 + CMD ["pnpm", "start"] + EOF + fi + + - name: Build and test Docker image + run: | + cd banquise-website + docker build -t banquise-website:test . + docker run -d --name test-container -p 3000:3000 banquise-website:test + sleep 5 + docker ps | grep test-container + docker stop test-container + docker rm test-container diff --git a/banquise-website/.dockerignore b/banquise-website/.dockerignore deleted file mode 100644 index 16e0e5a..0000000 --- a/banquise-website/.dockerignore +++ /dev/null @@ -1,18 +0,0 @@ -node_modules -.next -dist -build -pnpm-debug.log -.env -.env.local -.env.development -.git -*.log -.DS_Store -.vscode -.idea -README.md -.gitignore -.eslintrc.json -*.sh -shell.nix diff --git a/banquise-website/.eslintrc.json b/banquise-website/.eslintrc.json deleted file mode 100644 index 957cd15..0000000 --- a/banquise-website/.eslintrc.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "extends": ["next/core-web-vitals"] -} diff --git a/banquise-website/.gitignore b/banquise-website/.gitignore index a547bf3..047da3c 100644 --- a/banquise-website/.gitignore +++ b/banquise-website/.gitignore @@ -1,3 +1,159 @@ +# Dependencies +node_modules/ +.pnp +.pnp.js + +# Testing +coverage/ +.nyc_output + +# Next.js +.next/ +out/ +build/ +dist/ + +# Production builds +*.tgz +*.tar.gz + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage/ +*.lcov + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage +.grunt + +# node-waf configuration +.lock-wscript + +# Compiled binary addons +build/Release + +# Dependency directories +jspm_packages/ + +# Snowpack dependency directory +web_modules/ + +# TypeScript cache +*.tsbuildinfo + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional stylelint cache +.stylelintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variable files +.env +.env.development.local +.env.test.local +.env.production.local +.env.local + +# parcel-bundler cache +.cache +.parcel-cache + +# Next.js build output +.next +out + +# Nuxt.js build / generate output +.nuxt +dist + +# Gatsby files +.cache/ +public + +# Vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* + +# IntelliJ based IDEs +.idea + +# Finder (MacOS) +.DS_Store + +# Windows +Thumbs.db +ehthumbs.db +Desktop.ini + +# VS Code +.vscode/* +!.vscode/settings.json +!.vscode/tasks.json +!.vscode/launch.json +!.vscode/extensions.json +!.vscode/*.code-snippets + +# Local History for Visual Studio Code +.history/ + +# Built Visual Studio Code Extensions +*.vsix + +# ESLint cache +.eslintcache + +# Prettier cache +.prettiercache + +# Stylelint cache +.stylelintcache + # Logs logs *.log @@ -7,18 +163,79 @@ yarn-error.log* pnpm-debug.log* lerna-debug.log* -node_modules -dist -dist-ssr -*.local +# Diagnostic reports +report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json -# Editor directories and files -.vscode/* -!.vscode/extensions.json -.idea +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# Dependency directories +node_modules/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# TernJS port file +.tern-port + +# Temporary folders +tmp/ +temp/ + +# Editor backup files +*~ +*.swp +*.swo + +# OS generated files .DS_Store -*.suo -*.ntvs* -*.njsproj -*.sln -*.sw? +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Local environment files +.env*.local diff --git a/banquise-website/app/globals-test.css b/banquise-website/app/globals-test.css deleted file mode 100644 index 5cc7b2e..0000000 --- a/banquise-website/app/globals-test.css +++ /dev/null @@ -1,9 +0,0 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; - -/* Minimal test CSS */ -body { - margin: 0; - padding: 0; -} \ No newline at end of file diff --git a/banquise-website/app/globals.css b/banquise-website/app/globals.css index 5b69cd9..851c876 100644 --- a/banquise-website/app/globals.css +++ b/banquise-website/app/globals.css @@ -1,13 +1,14 @@ @import "tailwindcss"; -/* Configuration Tailwind v4 via CSS custom properties */ +/* Configuration Tailwind v4 via CSS custom properties - Variables globales */ @layer base { :root { + /* Polices */ --font-heading: 'Dela Gothic One', sans-serif; --font-body: 'Roboto', sans-serif; /* Couleurs personnalisées La Banquise */ - --color-banquise-blue: 64, 180, 255; /* RGB for reuse in rgba() */ + --color-banquise-blue: 64, 180, 255; --color-banquise-blue-hex: #40B4FF; --color-banquise-blue-dark: 31, 93, 137; --color-banquise-blue-dark-hex: #1F5D89; @@ -16,27 +17,17 @@ --color-banquise-blue-lightest: 165, 240, 255; --color-banquise-blue-lightest-hex: #A5F0FF; --color-banquise-gray: #F6F6F6; + + /* Transitions communes */ + --transition-default: all 0.3s ease-in-out; + --transition-fast: all 0.2s ease-in-out; + + /* Spacing commun */ + --spacing-navbar: 4rem; } } -/* Variables CSS pour les polices et couleurs personnalisées */ -:root { - --font-heading: 'Dela Gothic One', sans-serif; - --font-body: 'Roboto', sans-serif; - - /* Couleurs personnalisées La Banquise */ - --color-banquise-blue: 64, 180, 255; /* RGB for reuse in rgba() */ - --color-banquise-blue-hex: #40B4FF; - --color-banquise-blue-dark: 31, 93, 137; - --color-banquise-blue-dark-hex: #1F5D89; - --color-banquise-blue-light: 105, 183, 226; - --color-banquise-blue-light-hex: #69B7E2; - --color-banquise-blue-lightest: 165, 240, 255; - --color-banquise-blue-lightest-hex: #A5F0FF; - --color-banquise-gray: #F6F6F6; -} - -/* Minimal, valid utility helpers that rely on CSS variables and rgba() */ +/* Minimal, valid utility helpers avec variables optimisées */ @layer utilities { /* Text colors */ .text-banquise-blue { color: var(--color-banquise-blue-hex); } @@ -52,7 +43,7 @@ .bg-banquise-blue-lightest { background-color: var(--color-banquise-blue-lightest-hex); } .bg-banquise-gray { background-color: var(--color-banquise-gray); } - /* Opacity helpers using rgba() and the stored RGB variables */ + /* Opacity helpers using rgba() */ .bg-banquise-blue-5 { background-color: rgba(var(--color-banquise-blue), 0.05); } .bg-banquise-blue-10 { background-color: rgba(var(--color-banquise-blue), 0.10); } .bg-banquise-blue-20 { background-color: rgba(var(--color-banquise-blue), 0.20); } @@ -62,28 +53,35 @@ .border-banquise-blue { border-color: var(--color-banquise-blue-hex); } .border-banquise-blue-lightest-30 { border-color: rgba(var(--color-banquise-blue-lightest), 0.3); } - /* Gradients shortcuts (use with existing Tailwind gradient utilities) */ + /* Gradients shortcuts */ .from-banquise-blue { --tw-gradient-from: var(--color-banquise-blue-hex); } .from-banquise-blue-dark { --tw-gradient-from: var(--color-banquise-blue-dark-hex); } .via-banquise-blue { --tw-gradient-via: var(--color-banquise-blue-hex); } .to-banquise-blue { --tw-gradient-to: var(--color-banquise-blue-hex); } - /* Simple shadow helpers */ + /* Shadow helpers */ .shadow-banquise-blue-20 { box-shadow: 0 4px 6px -1px rgba(var(--color-banquise-blue), 0.20); } + + /* Transitions communes */ + .transition-default { transition: var(--transition-default); } + .transition-fast { transition: var(--transition-fast); } } -/* Animations kept as valid keyframes */ +/* Animations optimisées */ @keyframes gentle-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-15px) rotate(1deg); } } -.animate-gentle-float { animation: gentle-float 6s ease-in-out infinite; } +@keyframes bounce-up { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-4px); } +} -@keyframes bounce-up { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } +.animate-gentle-float { animation: gentle-float 6s ease-in-out infinite; } .scroll-to-top:hover { animation: bounce-up 0.6s ease-in-out; } -/* Accessibility: respect reduced motion */ +/* Configuration globale optimisée */ @media (prefers-reduced-motion: reduce) { .animate-gentle-float, .animate-ping, @@ -92,13 +90,29 @@ } } -/* Global improvements */ html { scroll-behavior: smooth; } body { overflow-x: hidden; } -/* Scrollbar styles for popup content */ -.popup-content { scrollbar-width: thin; scrollbar-color: rgba(31,93,137,0.3) transparent; } +/* Scrollbar unifié pour tous les éléments */ +.custom-scrollbar, +.popup-content { + scrollbar-width: thin; + scrollbar-color: rgba(31,93,137,0.3) transparent; +} + +.custom-scrollbar::-webkit-scrollbar, .popup-content::-webkit-scrollbar { width: 6px; } + +.custom-scrollbar::-webkit-scrollbar-track, .popup-content::-webkit-scrollbar-track { background: transparent; } -.popup-content::-webkit-scrollbar-thumb { background: rgba(31,93,137,0.3); border-radius: 3px; } -.popup-content::-webkit-scrollbar-thumb:hover { background: rgba(31,93,137,0.5); } + +.custom-scrollbar::-webkit-scrollbar-thumb, +.popup-content::-webkit-scrollbar-thumb { + background: rgba(31,93,137,0.3); + border-radius: 3px; +} + +.custom-scrollbar::-webkit-scrollbar-thumb:hover, +.popup-content::-webkit-scrollbar-thumb:hover { + background: rgba(31,93,137,0.5); +} diff --git a/banquise-website/app/test-colors/page.tsx b/banquise-website/app/test-colors/page.tsx deleted file mode 100644 index 7419b1d..0000000 --- a/banquise-website/app/test-colors/page.tsx +++ /dev/null @@ -1,135 +0,0 @@ -import Link from 'next/link'; - -export default function TestColors() { - return ( -
- {/* Header avec gradient moderne */} -
-

Nouvelle Palette Banquise

-

Design professionnel et harmonieux

-
- -
- - {/* Palette Bleus */} -
-

Palette Bleus Principaux

-
-
-
900
-
#0f2a3d
-
Headers foncés
-
-
-
800
-
#1f5078
-
Navigation
-
-
-
600
-
#34a6fc
-
Boutons primaires
-
-
-
400
-
#76beee
-
Liens
-
-
-
200
-
#a0ecf9
-
Accents clairs
-
-
-
- - {/* Palette Gris */} -
-

Palette Gris Harmonieux

-
-
-
Slate 900
-
#0f172a
-
Texte principal
-
-
-
Slate 700
-
#334155
-
Texte secondaire
-
-
-
Slate 300
-
#cbd5e1
-
Bordures
-
-
-
Slate 100
-
#f1f5f9
-
Fonds clairs
-
-
-
Slate 50
-
#f8fafc
-
Fonds de page
-
-
-
- - {/* Exemples d'application */} -
-

Exemples d'Application

- -
- {/* Card moderne */} -
-
- B -
-

Service Moderne

-

Description avec contraste optimal pour la lisibilité.

- -
- - {/* Card subtile */} -
-
- S -
-

Service Subtil

-

Design épuré avec couleurs harmonieuses.

- -
-
-
- - {/* Navigation exemple */} -
-

Exemple Navigation

-
-
-
La Banquise
- - -
-
-
- -
- - ← Voir le site avec la nouvelle palette - -
-
-
- ); -} \ No newline at end of file diff --git a/banquise-website/app/test-tailwind/page.tsx b/banquise-website/app/test-tailwind/page.tsx deleted file mode 100644 index 3eefa31..0000000 --- a/banquise-website/app/test-tailwind/page.tsx +++ /dev/null @@ -1,55 +0,0 @@ -"use client" - -export default function TestTailwind() { - return ( -
-
-

Test Tailwind CSS v4

- -
- {/* Test des couleurs de base */} -
-

Couleurs de base

-
-
Red
-
Blue
-
Green
-
Yellow
-
-
- - {/* Test des espacements */} -
-

Espacements

-
-
p-2
-
p-4
-
p-6
-
-
- - {/* Test des couleurs personnalisées */} -
-

Couleurs personnalisées Banquise

-
-
Texte banquise-blue
-
Background banquise-blue
-
Texte banquise-blue-dark
-
Background banquise-blue-dark
-
-
- - {/* Test des animations */} -
-

Animations

-
-
Pulse animation
-
Bounce animation
-
Custom gentle float
-
-
-
-
-
- ); -} \ No newline at end of file diff --git a/banquise-website/components/common/Button.tsx b/banquise-website/components/common/Button.tsx index 3025088..dc1c8fb 100644 --- a/banquise-website/components/common/Button.tsx +++ b/banquise-website/components/common/Button.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import { cn, commonClasses } from '@/lib/utils'; interface ButtonProps extends React.ButtonHTMLAttributes { variant?: 'primary' | 'discord' | 'auth' | 'secondary' | 'ghost' | 'outline'; @@ -10,11 +11,12 @@ interface ButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; } +// Factorisation des classes de taille et de variante const sizeClasses = { sm: 'px-4 py-2 text-sm', md: 'px-6 py-3 text-base', lg: 'px-8 py-4 text-lg', -}; +} as const; 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', @@ -23,7 +25,15 @@ const variantClasses = { 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', ghost: 'bg-transparent text-gray-700 hover:bg-gray-100', -}; +} as const; + +// Composant loading spinner réutilisable +const LoadingSpinner = () => ( + + + + +); export const Button: React.FC = ({ variant = 'primary', @@ -37,28 +47,25 @@ export const Button: React.FC = ({ disabled, ...props }) => { - const baseClasses = [ - 'inline-flex items-center justify-center font-semibold rounded-xl transition-all duration-300 transform', - 'hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300', - sizeClasses[size], - variantClasses[variant], - fullWidth ? 'w-full' : '', - (disabled || loading) ? 'opacity-50 cursor-not-allowed transform-none' : '', - className - ].filter(Boolean).join(' '); + const isDisabled = disabled || loading; return ( - - - \ No newline at end of file diff --git a/banquise-website/types/index.ts b/banquise-website/types/index.ts index b23dd75..5c74b7c 100644 --- a/banquise-website/types/index.ts +++ b/banquise-website/types/index.ts @@ -1,9 +1,48 @@ // Re-export types from their specific modules export type { Service } from './service'; +export type { Language, Translation } from './i18n'; +// Types communs pour les composants UI export interface AccordionItemProps { title: React.ReactNode; children: React.ReactNode; isOpen: boolean; onToggle: () => void; } + +// Types pour les hooks communs +export interface UseModalReturn { + data: T | null; + open: (data: T) => void; + close: () => void; + isOpen: boolean; +} + +export interface UseToggleReturn { + state: boolean; + toggle: () => void; + setTrue: () => void; + setFalse: () => void; + setState: (state: boolean) => void; +} + +// Types pour les composants de navigation +export interface NavigationHandler { + (sectionId: string): void; +} + +// Classes CSS communes +export type CommonClassKey = + | 'transition' + | 'transitionFast' + | 'hoverLift' + | 'hoverScale' + | 'buttonBase' + | 'navLink' + | 'cardBase' + | 'cardHover' + | 'mobileMenuItem'; + +// Variants pour les boutons optimisés +export type ButtonVariant = 'primary' | 'discord' | 'auth' | 'secondary' | 'ghost' | 'outline'; +export type ButtonSize = 'sm' | 'md' | 'lg';