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.
76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
export default function BackgroundAnimations({ variant = 'default' }: { variant?: 'default' | 'grid' | 'particles' | 'gradient' }) {
|
|
if (variant === 'grid') {
|
|
return (
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div className="animated-grid absolute inset-0 opacity-30" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (variant === 'particles') {
|
|
return (
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div className="animated-grid absolute inset-0 opacity-20" />
|
|
{/* Particules flottantes */}
|
|
{[...Array(6)].map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="floating-blob absolute rounded-full"
|
|
style={{
|
|
width: `${20 + i * 10}px`,
|
|
height: `${20 + i * 10}px`,
|
|
background: `radial-gradient(circle, rgba(0, 255, 136, ${0.1 + i * 0.05}) 0%, transparent 70%)`,
|
|
left: `${10 + i * 15}%`,
|
|
top: `${10 + i * 12}%`,
|
|
animationDelay: `${i * 0.5}s`,
|
|
animationDuration: `${15 + i * 3}s`,
|
|
}}
|
|
/>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (variant === 'gradient') {
|
|
return (
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div className="animated-grid absolute inset-0 opacity-25" />
|
|
<div
|
|
className="absolute top-1/4 right-1/4 w-96 h-96 bg-security-accent/5 rounded-full blur-3xl pulse-glow"
|
|
style={{ animationDelay: '0s' }}
|
|
/>
|
|
<div
|
|
className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-green-500/5 rounded-full blur-3xl pulse-glow"
|
|
style={{ animationDelay: '2s' }}
|
|
/>
|
|
<div
|
|
className="absolute top-1/2 left-1/2 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl pulse-glow"
|
|
style={{ animationDelay: '4s', transform: 'translate(-50%, -50%)' }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
// Default variant
|
|
return (
|
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
|
<div className="animated-grid absolute inset-0 opacity-20" />
|
|
<div
|
|
className="floating-blob absolute top-1/4 right-1/4 w-96 h-96 bg-security-accent/5 rounded-full blur-3xl"
|
|
style={{ animationDelay: '0s' }}
|
|
/>
|
|
<div
|
|
className="floating-blob absolute bottom-1/4 left-1/4 w-96 h-96 bg-green-500/5 rounded-full blur-3xl"
|
|
style={{ animationDelay: '1s' }}
|
|
/>
|
|
<div
|
|
className="floating-blob absolute top-1/2 right-1/3 w-80 h-80 bg-emerald-500/5 rounded-full blur-3xl"
|
|
style={{ animationDelay: '2s' }}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|