365DevNet/Tiber365
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance site configuration and layout with modern styling, improved font usage, and updated service components. Refactor navigation and footer for better accessibility and user experience, while ensuring inline definitions to resolve import issues.

Browse Source
This commit is contained in:
Richard Bergsma
2025-07-24 20:59:34 +02:00
parent 32301a18e9
commit f3ccd766fa
14 changed files with 2387 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
tailwind.config.mjs
View File

@@ -7,15 +7,25 @@ export default {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
display: ['Poppins', 'system-ui', 'sans-serif'],
sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'sans-serif'],
display: ['Space Grotesk', 'Inter', 'system-ui', 'sans-serif'],
mono: ['JetBrains Mono', 'Monaco', 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', 'monospace'],
},
colors: {
// Modern color system
background: 'rgb(var(--color-background) / <alpha-value>)',
foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
surface: 'rgb(var(--color-surface) / <alpha-value>)',
muted: 'rgb(var(--color-muted) / <alpha-value>)',
subtle: 'rgb(var(--color-subtle) / <alpha-value>)',
primary: {
DEFAULT: 'rgb(var(--color-primary) / <alpha-value>)',
hover: 'rgb(var(--color-primary-hover) / <alpha-value>)',
subtle: 'rgb(var(--color-primary-subtle) / <alpha-value>)',
foreground: 'rgb(var(--color-primary-foreground) / <alpha-value>)',
50: '#eff6ff',
100: '#dbeafe',
100: '#dbeafe',
200: '#bfdbfe',
300: '#93c5fd',
400: '#60a5fa',
@@ -24,57 +34,452 @@ export default {
700: '#1d4ed8',
800: '#1e40af',
900: '#1e3a8a',
950: '#172554',
},
secondary: {
DEFAULT: 'rgb(var(--color-secondary) / <alpha-value>)',
foreground: 'rgb(var(--color-secondary-foreground) / <alpha-value>)',
50: '#f8fafc',
100: '#f1f5f9',
200: '#e2e8f0',
300: '#cbd5e1',
400: '#94a3b8',
500: '#64748b',
600: '#475569',
700: '#334155',
800: '#1e293b',
900: '#0f172a',
},
background: 'rgb(var(--color-background) / <alpha-value>)',
foreground: 'rgb(var(--color-foreground) / <alpha-value>)',
muted: {
DEFAULT: 'rgb(var(--color-muted) / <alpha-value>)',
foreground: 'rgb(var(--color-muted-foreground) / <alpha-value>)',
},
border: 'rgb(var(--color-border) / <alpha-value>)',
accent: {
DEFAULT: 'rgb(var(--color-accent) / <alpha-value>)',
foreground: 'rgb(var(--color-accent-foreground) / <alpha-value>)',
hover: 'rgb(var(--color-accent-hover) / <alpha-value>)',
subtle: 'rgb(var(--color-accent-subtle) / <alpha-value>)',
50: '#faf5ff',
100: '#f3e8ff',
200: '#e9d5ff',
300: '#d8b4fe',
400: '#c084fc',
500: '#a855f7',
600: '#9333ea',
700: '#7c3aed',
800: '#6b21a8',
900: '#581c87',
950: '#3b0764',
},
success: {
DEFAULT: 'rgb(var(--color-success) / <alpha-value>)',
subtle: 'rgb(var(--color-success-subtle) / <alpha-value>)',
50: '#f0fdf4',
100: '#dcfce7',
200: '#bbf7d0',
300: '#86efac',
400: '#4ade80',
500: '#22c55e',
600: '#16a34a',
700: '#15803d',
800: '#166534',
900: '#14532d',
950: '#052e16',
},
warning: {
DEFAULT: 'rgb(var(--color-warning) / <alpha-value>)',
subtle: 'rgb(var(--color-warning-subtle) / <alpha-value>)',
50: '#fffbeb',
100: '#fef3c7',
200: '#fde68a',
300: '#fcd34d',
400: '#fbbf24',
500: '#f59e0b',
600: '#d97706',
700: '#b45309',
800: '#92400e',
900: '#78350f',
950: '#451a03',
},
error: {
DEFAULT: 'rgb(var(--color-error) / <alpha-value>)',
subtle: 'rgb(var(--color-error-subtle) / <alpha-value>)',
50: '#fef2f2',
100: '#fee2e2',
200: '#fecaca',
300: '#fca5a5',
400: '#f87171',
500: '#ef4444',
600: '#dc2626',
700: '#b91c1c',
800: '#991b1b',
900: '#7f1d1d',
950: '#450a0a',
},
border: 'rgb(var(--color-border) / <alpha-value>)',
'border-subtle': 'rgb(var(--color-border-subtle) / <alpha-value>)',
},
spacing: {
'18': '4.5rem',
'88': '22rem',
'128': '32rem',
'144': '36rem',
},
borderRadius: {
'4xl': '2rem',
'5xl': '2.5rem',
'6xl': '3rem',
},
boxShadow: {
'glass': '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
'glass-inset': 'inset 0 2px 4px 0 rgba(255, 255, 255, 0.06)',
'glow-sm': '0 0 20px -5px var(--tw-shadow-color)',
'glow': '0 0 40px -10px var(--tw-shadow-color)',
'glow-lg': '0 0 60px -15px var(--tw-shadow-color)',
'inner-border': 'inset 0 1px 0 0 rgba(255, 255, 255, 0.1)',
},
backdropBlur: {
xs: '2px',
},
animation: {
'fade-in': 'fadeIn 0.5s ease-in-out',
'slide-up': 'slideUp 0.5s ease-out',
'bounce-subtle': 'bounceSubtle 3s ease-in-out infinite',
// Enhanced animations
'fade-in': 'fadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
'fade-in-up': 'fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
'fade-in-down': 'fadeInDown 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
'slide-up': 'slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
'slide-down': 'slideDown 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
'slide-left': 'slideLeft 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
'slide-right': 'slideRight 0.6s cubic-bezier(0.4, 0, 0.2, 1)',
'scale-in': 'scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
'scale-in-bounce': 'scaleInBounce 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
'float': 'float 6s ease-in-out infinite',
'float-delayed': 'float 6s ease-in-out infinite 2s',
'pulse-subtle': 'pulseSubtle 4s ease-in-out infinite',
'glow': 'glow 2s ease-in-out infinite alternate',
'shimmer': 'shimmer 2s linear infinite',
'bounce-gentle': 'bounceGentle 3s ease-in-out infinite',
'gradient-x': 'gradientX 15s ease infinite',
'gradient-y': 'gradientY 15s ease infinite',
'gradient-xy': 'gradientXY 20s ease infinite',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0', transform: 'translateY(10px)' },
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
fadeInUp: {
'0%': { opacity: '0', transform: 'translateY(20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
fadeInDown: {
'0%': { opacity: '0', transform: 'translateY(-20px)' },
'100%': { opacity: '1', transform: 'translateY(0)' },
},
slideUp: {
'0%': { transform: 'translateY(20px)', opacity: '0' },
'0%': { transform: 'translateY(30px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
bounceSubtle: {
'0%, 100%': {
transform: 'translateY(0)',
},
'50%': {
transform: 'translateY(-5px)',
slideDown: {
'0%': { transform: 'translateY(-30px)', opacity: '0' },
'100%': { transform: 'translateY(0)', opacity: '1' },
},
slideLeft: {
'0%': { transform: 'translateX(30px)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
slideRight: {
'0%': { transform: 'translateX(-30px)', opacity: '0' },
'100%': { transform: 'translateX(0)', opacity: '1' },
},
scaleIn: {
'0%': { transform: 'scale(0.9)', opacity: '0' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
scaleInBounce: {
'0%': { transform: 'scale(0.3)', opacity: '0' },
'50%': { transform: 'scale(1.05)', opacity: '0.8' },
'70%': { transform: 'scale(0.9)', opacity: '1' },
'100%': { transform: 'scale(1)', opacity: '1' },
},
float: {
'0%, 100%': { transform: 'translateY(0px) rotate(0deg)' },
'33%': { transform: 'translateY(-10px) rotate(1deg)' },
'66%': { transform: 'translateY(-5px) rotate(-1deg)' },
},
pulseSubtle: {
'0%, 100%': { opacity: '1' },
'50%': { opacity: '0.8' },
},
glow: {
'0%': { boxShadow: '0 0 20px -5px currentColor' },
'100%': { boxShadow: '0 0 40px -5px currentColor' },
},
shimmer: {
'0%': { backgroundPosition: '-200% 0' },
'100%': { backgroundPosition: '200% 0' },
},
bounceGentle: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-5px)' },
},
gradientX: {
'0%, 100%': { 'background-size': '200% 200%', 'background-position': 'left center' },
'50%': { 'background-size': '200% 200%', 'background-position': 'right center' },
},
gradientY: {
'0%, 100%': { 'background-size': '200% 200%', 'background-position': 'center top' },
'50%': { 'background-size': '200% 200%', 'background-position': 'center bottom' },
},
gradientXY: {
'0%, 100%': { 'background-size': '400% 400%', 'background-position': 'left center' },
'25%': { 'background-size': '400% 400%', 'background-position': 'center top' },
'50%': { 'background-size': '400% 400%', 'background-position': 'right center' },
'75%': { 'background-size': '400% 400%', 'background-position': 'center bottom' },
},
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'gradient-shimmer': 'linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)',
'noise': 'url("data:image/svg+xml,%3Csvg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noiseFilter"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noiseFilter)" opacity="0.4"/%3E%3C/svg%3E")',
},
gradientColorStops: {
'glass-white': 'rgba(255, 255, 255, 0.1)',
'glass-black': 'rgba(0, 0, 0, 0.1)',
},
typography: ({ theme }) => ({
DEFAULT: {
css: {
'--tw-prose-body': theme('colors.foreground'),
'--tw-prose-headings': theme('colors.foreground'),
'--tw-prose-lead': theme('colors.muted'),
'--tw-prose-links': theme('colors.primary.DEFAULT'),
'--tw-prose-bold': theme('colors.foreground'),
'--tw-prose-counters': theme('colors.muted'),
'--tw-prose-bullets': theme('colors.subtle'),
'--tw-prose-hr': theme('colors.border'),
'--tw-prose-quotes': theme('colors.foreground'),
'--tw-prose-quote-borders': theme('colors.border'),
'--tw-prose-captions': theme('colors.muted'),
'--tw-prose-kbd': theme('colors.foreground'),
'--tw-prose-kbd-shadows': theme('colors.primary.DEFAULT'),
'--tw-prose-code': theme('colors.accent.DEFAULT'),
'--tw-prose-pre-code': theme('colors.foreground'),
'--tw-prose-pre-bg': theme('colors.surface'),
'--tw-prose-th-borders': theme('colors.border'),
'--tw-prose-td-borders': theme('colors.border-subtle'),
maxWidth: 'none',
fontSize: '1.125rem',
lineHeight: '1.75',
h1: {
fontFamily: theme('fontFamily.display').join(', '),
fontWeight: '700',
letterSpacing: '-0.025em',
},
h2: {
fontFamily: theme('fontFamily.display').join(', '),
fontWeight: '600',
letterSpacing: '-0.025em',
},
h3: {
fontFamily: theme('fontFamily.display').join(', '),
fontWeight: '600',
letterSpacing: '-0.025em',
},
h4: {
fontFamily: theme('fontFamily.display').join(', '),
fontWeight: '600',
},
code: {
backgroundColor: theme('colors.surface'),
padding: '0.25rem 0.5rem',
borderRadius: '0.375rem',
fontWeight: '500',
},
'code::before': {
content: '""',
},
'code::after': {
content: '""',
},
blockquote: {
borderLeftColor: theme('colors.primary.DEFAULT'),
backgroundColor: theme('colors.surface'),
padding: '1rem 1.5rem',
borderRadius: '0.5rem',
},
},
},
lg: {
css: {
fontSize: '1.25rem',
lineHeight: '1.8',
},
},
xl: {
css: {
fontSize: '1.375rem',
lineHeight: '1.8',
},
},
}),
screens: {
'xs': '475px',
'3xl': '1920px',
},
zIndex: {
'60': '60',
'70': '70',
'80': '80',
'90': '90',
'100': '100',
},
transitionDuration: {
'400': '400ms',
'600': '600ms',
'800': '800ms',
'900': '900ms',
},
transitionTimingFunction: {
'bounce-in': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'bounce-out': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
'ease-in-expo': 'cubic-bezier(0.95, 0.05, 0.795, 0.035)',
'ease-out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
},
scale: {
'102': '1.02',
'103': '1.03',
'115': '1.15',
'120': '1.2',
},
rotate: {
'1': '1deg',
'2': '2deg',
'3': '3deg',
},
blur: {
'4xl': '72px',
'5xl': '96px',
},
brightness: {
'25': '.25',
'175': '1.75',
},
saturate: {
'25': '.25',
'175': '1.75',
},
aspectRatio: {
'4/3': '4 / 3',
'3/2': '3 / 2',
'2/3': '2 / 3',
'9/16': '9 / 16',
},
},
},
plugins: [typography],
}
plugins: [
typography,
// Custom plugin for modern utilities
function({ addUtilities, addComponents, theme }) {
// Glass morphism utilities
addUtilities({
'.glass': {
background: 'rgba(255, 255, 255, 0.1)',
backdropFilter: 'blur(20px)',
borderRadius: '16px',
border: '1px solid rgba(255, 255, 255, 0.2)',
boxShadow: '0 8px 32px 0 rgba(31, 38, 135, 0.37)',
},
'.glass-dark': {
background: 'rgba(0, 0, 0, 0.1)',
backdropFilter: 'blur(20px)',
borderRadius: '16px',
border: '1px solid rgba(255, 255, 255, 0.1)',
boxShadow: '0 8px 32px 0 rgba(0, 0, 0, 0.37)',
},
'.text-balance': {
textWrap: 'balance',
},
'.text-pretty': {
textWrap: 'pretty',
},
});
// Modern components
addComponents({
'.btn-glass': {
background: 'rgba(255, 255, 255, 0.1)',
backdropFilter: 'blur(20px)',
border: '1px solid rgba(255, 255, 255, 0.2)',
borderRadius: '12px',
padding: '12px 24px',
fontWeight: '500',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
background: 'rgba(255, 255, 255, 0.2)',
transform: 'translateY(-2px)',
boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
},
'&:active': {
transform: 'translateY(0)',
},
},
'.card-modern': {
background: theme('colors.surface'),
borderRadius: '20px',
padding: '24px',
border: `1px solid ${theme('colors.border')}`,
boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:hover': {
transform: 'translateY(-4px)',
boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)',
borderColor: theme('colors.primary.DEFAULT'),
},
},
'.input-modern': {
background: `${theme('colors.surface')}`,
border: `2px solid ${theme('colors.border')}`,
borderRadius: '12px',
padding: '12px 16px',
fontSize: '16px',
transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
'&:focus': {
outline: 'none',
borderColor: theme('colors.primary.DEFAULT'),
boxShadow: `0 0 0 4px ${theme('colors.primary.DEFAULT')}20`,
transform: 'translateY(-1px)',
},
'&::placeholder': {
color: theme('colors.subtle'),
},
},
'.gradient-text': {
background: `linear-gradient(135deg, ${theme('colors.primary.DEFAULT')}, ${theme('colors.accent.DEFAULT')})`,
backgroundClip: 'text',
color: 'transparent',
display: 'inline-block',
},
'.gradient-border': {
position: 'relative',
background: theme('colors.surface'),
borderRadius: '16px',
'&::before': {
content: '""',
position: 'absolute',
inset: '0',
padding: '2px',
background: `linear-gradient(135deg, ${theme('colors.primary.DEFAULT')}, ${theme('colors.accent.DEFAULT')})`,
borderRadius: 'inherit',
mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)',
maskComposite: 'xor',
},
},
'.section-modern': {
paddingTop: '80px',
paddingBottom: '80px',
'@screen lg': {
paddingTop: '120px',
paddingBottom: '120px',
},
},
'.container-modern': {
marginLeft: 'auto',
marginRight: 'auto',
maxWidth: '1200px',
paddingLeft: '24px',
paddingRight: '24px',
'@screen sm': {
paddingLeft: '32px',
paddingRight: '32px',
},
'@screen lg': {
paddingLeft: '48px',
paddingRight: '48px',
},
},
});
},
],
};