Lou/test
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initialize Next.js project with essential configurations and components

Browse Source 
- 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.
This commit is contained in:
SarTron-NorthBlue
2025-11-14 16:15:21 +04:00
commit bed824059a
24 changed files with 4229 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

164
components/sections/Pricing.tsx Normal file
View File

@@ -0,0 +1,164 @@
'use client'
import { motion } from 'framer-motion'
import { useInView } from 'framer-motion'
import { useRef } from 'react'
import { Cloud, Server, HardDrive, CheckCircle, ArrowRight, Star } from 'lucide-react'
import BackgroundAnimations from '@/components/BackgroundAnimations'
const plans = [
{
icon: Cloud,
name: 'Cloud Hébergé',
subtitle: 'Hébergement sécurisé chez nous',
price: '20',
period: '/ mois par utilisateur',
badge: null,
features: [
'5 à 100 utilisateurs',
'Stockage 10 à 100 Go',
'Sauvegardes quotidiennes',
'SSL/TLS inclus',
'Support email',
'Mises à jour automatiques',
],
cta: 'Demander un devis',
gradient: 'from-blue-500 to-cyan-500',
},
{
icon: HardDrive,
name: 'Installation Mini PC',
subtitle: 'Solution clé en main',
price: '500',
period: ' installation',
badge: 'Recommandé',
features: [
'Matériel inclus',
'Installation complète',
'Configuration réseau',
'Formation sur site',
'Support 60 jours inclus',
'Garantie matériel 1 an',
],
cta: 'Demander un devis',
gradient: 'from-security-accent to-green-500',
},
{
icon: Server,
name: 'Installation NAS',
subtitle: 'Sur votre infrastructure',
price: '350',
period: ' installation',
badge: null,
features: [
'Configuration complète',
'Formation personnalisée',
'Documentation détaillée',
'Certificat SSL',
'Support 30 jours inclus',
'Support optionnel dispo',
],
cta: 'Demander un devis',
gradient: 'from-purple-500 to-pink-500',
},
]
export default function Pricing() {
const ref = useRef(null)
const isInView = useInView(ref, { once: true, margin: '-100px' })
return (
<section id="tarifs" className="section-padding bg-security-darker relative overflow-hidden">
<BackgroundAnimations variant="default" />
<div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
{/* Section Header - Centered */}
<motion.div
initial={{ opacity: 0, y: 30 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
<div className="inline-block px-4 py-2 bg-security-accent/10 border border-security-accent/30 rounded-full mb-6">
<span className="text-security-accent text-sm font-semibold">Nos Offres</span>
</div>
<h2 className="text-5xl md:text-6xl font-black mb-6 text-white">
Nos <span className="gradient-text">Tarifs</span>
</h2>
<p className="text-xl text-gray-400 leading-relaxed max-w-2xl mx-auto">
Des offres transparentes pour tous les budgets, de l'hébergement cloud aux installations sur site
</p>
</motion.div>
{/* Pricing Cards - Centered Grid Layout */}
<div ref={ref} className="flex justify-center">
<div className="grid md:grid-cols-3 gap-8 max-w-7xl">
{plans.map((plan, index) => (
<motion.div
key={index}
initial={{ opacity: 0, y: 50 }}
animate={isInView ? { opacity: 1, y: 0 } : {}}
transition={{ duration: 0.6, delay: index * 0.2 }}
className={`relative ${plan.badge ? 'neon-border' : 'card-dark'} p-10 rounded-3xl card-hover flex flex-col`}
>
{plan.badge && (
<div className="absolute -top-3 left-8 z-10">
<span className="px-4 py-1 bg-gradient-to-r from-security-accent to-green-500 text-black text-sm font-bold rounded-full shadow-lg flex items-center space-x-1">
<Star className="w-3 h-3" />
<span>{plan.badge}</span>
</span>
</div>
)}
{/* Icon and Price */}
<div className="text-center mb-8">
<div className={`w-24 h-24 bg-gradient-to-br ${plan.gradient} rounded-2xl flex items-center justify-center mb-6 shadow-2xl mx-auto`}>
<plan.icon className="w-12 h-12 text-white" />
</div>
<div className="mb-3">
<div className="text-sm text-gray-400 mb-2">À partir de</div>
<div className="flex items-baseline justify-center">
<span className="text-5xl font-black gradient-text">{plan.price}€</span>
<span className="text-gray-400 ml-2 text-base">{plan.period}</span>
</div>
</div>
</div>
{/* Title and Description */}
<div className="text-center mb-8 flex-grow">
<h3 className="text-2xl font-bold text-white mb-3">{plan.name}</h3>
<p className="text-gray-400 text-base mb-8">{plan.subtitle}</p>
{/* Features */}
<ul className="space-y-4 text-left">
{plan.features.map((feature, idx) => (
<li key={idx} className="flex items-center space-x-3 text-gray-300">
<CheckCircle className="w-5 h-5 text-security-accent flex-shrink-0" />
<span className="text-base">{feature}</span>
</li>
))}
</ul>
</div>
{/* CTA Button */}
<motion.a
href="#contact"
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
className={`w-full py-4 px-6 rounded-xl font-bold text-center transition-all duration-300 flex items-center justify-center space-x-2 ${
plan.badge
? 'bg-gradient-to-r from-security-accent to-green-500 text-black shadow-lg shadow-security-accent/50 hover:shadow-xl'
: 'bg-security-card border-2 border-security-border text-white hover:border-security-accent'
}`}
>
<span>{plan.cta}</span>
<ArrowRight className="w-5 h-5" />
</motion.a>
</motion.div>
))}
</div>
</div>
</div>
</section>
)
}