SZUT/casino
5
1
Fork 0
Code Issues Pull requests 1 Releases 65 Wiki Activity Actions

feat(landing): add landing component with animations and services

Browse source
This commit is contained in:
Jan-Marlon Leibl 2025-02-05 14:33:31 +01:00 • committed by jank1619
parent 35bfa3be7f
commit e6e7d65602
13 changed files with 1805 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

218
frontend/tailwind.config.js Normal file
View file

@ -0,0 +1,218 @@
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{html,ts}",
],
theme: {
extend: {
animation: {
'fadeIn': 'fadeIn 0.3s ease-out',
'backdropBlur': 'backdropBlur 0.4s ease-out',
'modalSlideIn': 'modalSlideIn 0.5s cubic-bezier(0.16,1,0.3,1)',
'slideDown': 'slideDown 0.6s ease-out',
'slideUp': 'slideUp 0.6s ease-out',
'scaleIn': 'scaleIn 0.8s cubic-bezier(0.16,1,0.3,1)',
'spinAndBounce': 'spinAndBounce 3s ease-in-out infinite',
'glow': 'glow 4s ease-in-out infinite',
'marquee': 'marquee 30s linear infinite',
'float': 'float 6s ease-in-out infinite',
'tiltAndGlow': 'tiltAndGlow 3s ease-in-out infinite',
'shimmer': 'shimmer 2s linear infinite',
'morphBackground': 'morphBackground 10s ease-in-out infinite',
'elasticScale': 'elasticScale 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'bounceAndFade': 'bounceAndFade 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'rotateAndScale': 'rotateAndScale 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'pulseGlow': 'pulseGlow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
fadeIn: {
'from': { opacity: '0' },
'to': { opacity: '1' }
},
backdropBlur: {
'from': {
'backdrop-filter': 'blur(0px)',
'background-color': 'rgba(0,0,0,0)'
},
'to': {
'backdrop-filter': 'blur(16px)',
'background-color': 'rgba(0,0,0,0.95)'
}
},
modalSlideIn: {
'from': {
opacity: '0',
transform: 'scale(0.95) translateY(10px)'
},
'to': {
opacity: '1',
transform: 'scale(1) translateY(0)'
}
},
slideDown: {
'from': {
opacity: '0',
transform: 'translateY(-20px)'
},
'to': {
opacity: '1',
transform: 'translateY(0)'
}
},
slideUp: {
'from': {
opacity: '0',
transform: 'translateY(20px)'
},
'to': {
opacity: '1',
transform: 'translateY(0)'
}
},
scaleIn: {
'from': {
opacity: '0',
transform: 'scale(0.9)'
},
'to': {
opacity: '1',
transform: 'scale(1)'
}
},
spinAndBounce: {
'0%': {
transform: 'scale(1) rotate(0deg)'
},
'50%': {
transform: 'scale(1.2) rotate(180deg)'
},
'100%': {
transform: 'scale(1) rotate(360deg)'
}
},
glow: {
'0%, 100%': {
opacity: '0.3',
transform: 'scale(1)'
},
'50%': {
opacity: '0.5',
transform: 'scale(1.05)'
}
},
marquee: {
'0%': { transform: 'translateX(0)' },
'100%': { transform: 'translateX(-100%)' }
},
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' }
},
tiltAndGlow: {
'0%, 100%': {
transform: 'perspective(1000px) rotateX(0deg) rotateY(0deg)',
'box-shadow': '0 0 20px rgba(34,197,94,0.2)'
},
'50%': {
transform: 'perspective(1000px) rotateX(2deg) rotateY(5deg)',
'box-shadow': '0 0 40px rgba(34,197,94,0.4)'
}
},
shimmer: {
'0%': {
'background-position': '-1000px 0'
},
'100%': {
'background-position': '1000px 0'
}
},
morphBackground: {
'0%, 100%': {
'border-radius': '60% 40% 30% 70%/60% 30% 70% 40%'
},
'50%': {
'border-radius': '30% 60% 70% 40%/50% 60% 30% 60%'
}
},
elasticScale: {
'0%': {
transform: 'scale(0)'
},
'60%': {
transform: 'scale(1.1)'
},
'100%': {
transform: 'scale(1)'
}
},
bounceAndFade: {
'0%': {
transform: 'scale(0.3)',
opacity: '0'
},
'50%': {
transform: 'scale(1.05)',
opacity: '0.8'
},
'100%': {
transform: 'scale(1)',
opacity: '1'
}
},
rotateAndScale: {
'0%': {
transform: 'rotate(-180deg) scale(0)'
},
'100%': {
transform: 'rotate(0) scale(1)'
}
},
pulseGlow: {
'0%, 100%': {
opacity: '1',
transform: 'scale(1)',
filter: 'brightness(1)'
},
'50%': {
opacity: '0.8',
transform: 'scale(1.05)',
filter: 'brightness(1.2)'
}
}
},
transitionDelay: {
'100': '100ms',
'200': '200ms',
'300': '300ms',
'400': '400ms',
'500': '500ms',
},
transitionTimingFunction: {
'bounce': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'smooth': 'cubic-bezier(0.4, 0, 0.2, 1)',
'elastic': 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
'spring': 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',
},
backdropBlur: {
'xs': '2px',
'4xl': '72px',
'5xl': '96px',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
'shimmer': 'linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent)',
}
},
},
plugins: [
require('@tailwindcss/aspect-ratio'),
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('tailwindcss-animated'),
require('tailwindcss-gradients'),
require('tailwindcss-transforms'),
require('tailwindcss-filters'),
require('tailwind-scrollbar-hide'),
],
}