bed824059a
- Added .gitignore to exclude unnecessary files and directories. - Created next.config.js for Next.js configuration. - Set up package.json and package-lock.json with dependencies including Next.js, React, and TypeScript. - Implemented Tailwind CSS for styling with a dedicated tailwind.config.ts. - Developed core application structure including layout, pages, and components for header, footer, and various sections (Hero, Services, Pricing, etc.). - Integrated contact form functionality using nodemailer for email handling. - Established global styles in globals.css and added animations with Framer Motion. - Included README.md for project documentation and setup instructions.
115 lines
2.2 KiB
CSS
115 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
@layer base {
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
@apply bg-security-darker text-gray-100 antialiased;
|
|
}
|
|
}
|
|
|
|
@layer components {
|
|
.gradient-text {
|
|
@apply bg-gradient-to-r from-security-accent via-green-400 to-emerald-400 bg-clip-text text-transparent;
|
|
}
|
|
|
|
.gradient-bg {
|
|
@apply bg-gradient-to-br from-security-darker via-security-dark to-security-darker;
|
|
}
|
|
|
|
.security-glow {
|
|
box-shadow: 0 0 30px rgba(0, 255, 136, 0.3), 0 0 60px rgba(0, 255, 136, 0.1);
|
|
}
|
|
|
|
.card-hover {
|
|
@apply transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:shadow-security-accent/20;
|
|
}
|
|
|
|
.section-padding {
|
|
@apply py-24 px-4 sm:px-6 lg:px-8;
|
|
}
|
|
|
|
.glass-effect {
|
|
@apply bg-security-card/80 backdrop-blur-lg border border-security-border/50;
|
|
}
|
|
|
|
.neon-border {
|
|
@apply border-2 border-security-accent/40 shadow-lg shadow-security-accent/20;
|
|
}
|
|
|
|
.card-dark {
|
|
@apply bg-security-card border border-security-border rounded-2xl;
|
|
}
|
|
|
|
/* Animations de fond */
|
|
.animated-grid {
|
|
background-image:
|
|
linear-gradient(to right, rgba(26, 26, 36, 0.3) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(26, 26, 36, 0.3) 1px, transparent 1px);
|
|
background-size: 4rem 4rem;
|
|
animation: gridMove 20s linear infinite;
|
|
}
|
|
|
|
.floating-blob {
|
|
animation: float 20s ease-in-out infinite;
|
|
}
|
|
|
|
.pulse-glow {
|
|
animation: pulseGlow 4s ease-in-out infinite;
|
|
}
|
|
|
|
.gradient-shift {
|
|
animation: gradientShift 8s ease infinite;
|
|
background-size: 200% 200%;
|
|
}
|
|
}
|
|
|
|
@keyframes gridMove {
|
|
0% {
|
|
background-position: 0 0;
|
|
}
|
|
100% {
|
|
background-position: 4rem 4rem;
|
|
}
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) translateX(0px);
|
|
}
|
|
33% {
|
|
transform: translateY(-30px) translateX(20px);
|
|
}
|
|
66% {
|
|
transform: translateY(20px) translateX(-20px);
|
|
}
|
|
}
|
|
|
|
@keyframes pulseGlow {
|
|
0%, 100% {
|
|
opacity: 0.5;
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
opacity: 0.8;
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
@keyframes gradientShift {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|