home page colour changed
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
"use client"
|
||||
import React, { useState } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -13,8 +12,6 @@ import {
|
||||
} from "@/services/Constants";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
|
||||
|
||||
const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
const [isHovered, setIsHovered] = useState<boolean>(false);
|
||||
const router = useRouter();
|
||||
@@ -33,7 +30,7 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
onMouseLeave={() => setIsHovered(false)}
|
||||
>
|
||||
<Card
|
||||
className={`bg-gradient-to-br ${module.bgColor} border-2 border-transparent hover:border-gray-200 transition-all duration-500 cursor-pointer group h-full ${module.hoverColor} overflow-hidden relative`}
|
||||
className="bg-white border border-[#c3dbe0] hover:shadow-xl transition-all duration-500 cursor-pointer group h-full overflow-hidden relative"
|
||||
onClick={handleClick}
|
||||
>
|
||||
<CardContent className="p-8 md:p-10 relative z-10">
|
||||
@@ -45,20 +42,14 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
rotate: isHovered ? 5 : 0,
|
||||
}}
|
||||
transition={{ duration: 0.3 }}
|
||||
className={`w-20 h-20 bg-gradient-to-br ${module.color} rounded-2xl flex items-center justify-center shadow-lg`}
|
||||
className="w-20 h-20 bg-gradient-to-br from-[#13afdc] to-[#c3dbe0] rounded-2xl flex items-center justify-center shadow-lg"
|
||||
>
|
||||
<module.icon className="w-10 h-10 text-white" />
|
||||
</motion.div>
|
||||
|
||||
<motion.div
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: index * 0.2 + 0.3 }}
|
||||
>
|
||||
<Badge className={`${module.accentColor} bg-white border-2`}>
|
||||
New
|
||||
</Badge>
|
||||
</motion.div>
|
||||
<Badge className="bg-[#13afdc]/10 text-[#13afdc] border-[#13afdc]/20">
|
||||
New
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
{/* Image */}
|
||||
@@ -75,26 +66,19 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
alt={module.title}
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
<div
|
||||
className={`absolute inset-0 bg-gradient-to-t ${module.color} opacity-20 group-hover:opacity-30 transition-opacity`}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-[#13afdc]/20 to-transparent" />
|
||||
</motion.div>
|
||||
|
||||
{/* Title */}
|
||||
<h3
|
||||
className="text-2xl md:text-3xl font-bold text-gray-900 mb-4 group-hover:text-transparent group-hover:bg-gradient-to-r group-hover:bg-clip-text"
|
||||
style={{
|
||||
backgroundImage: `linear-gradient(to right, var(--tw-gradient-stops))`,
|
||||
}}
|
||||
>
|
||||
<h3 className="text-2xl md:text-3xl font-bold text-[#0d0d0d] mb-4 group-hover:text-[#13afdc] transition-colors">
|
||||
{module.title}
|
||||
</h3>
|
||||
|
||||
{/* Description */}
|
||||
<p className="text-gray-700 mb-3 leading-relaxed">
|
||||
<p className="text-[#0d0d0d] mb-3 leading-relaxed">
|
||||
{module.description}
|
||||
</p>
|
||||
<p className="text-gray-600 text-sm mb-6 leading-relaxed">
|
||||
<p className="text-[#7c7a7c] text-sm mb-6 leading-relaxed">
|
||||
{module.subDescription}
|
||||
</p>
|
||||
|
||||
@@ -107,10 +91,10 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
whileInView={{ opacity: 1, x: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.2 + idx * 0.1 }}
|
||||
className="flex items-center gap-2 bg-white/60 backdrop-blur-sm rounded-lg p-3"
|
||||
className="flex items-center gap-2 bg-[#c3dbe0]/30 rounded-lg p-3"
|
||||
>
|
||||
<feature.icon className={`w-4 h-4 ${module.accentColor}`} />
|
||||
<span className="text-sm font-medium text-gray-700">
|
||||
<feature.icon className="w-4 h-4 text-[#13afdc]" />
|
||||
<span className="text-sm font-medium text-[#0d0d0d]">
|
||||
{feature.label}
|
||||
</span>
|
||||
</motion.div>
|
||||
@@ -120,34 +104,28 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
{/* CTA Button */}
|
||||
<motion.div whileHover={{ x: 5 }} transition={{ duration: 0.2 }}>
|
||||
<Button
|
||||
className={`w-full bg-gradient-to-r ${module.color} hover:shadow-xl text-white font-semibold group-hover:scale-105 transition-transform`}
|
||||
className="w-full bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] text-white font-semibold hover:shadow-xl"
|
||||
size="lg"
|
||||
>
|
||||
Learn More
|
||||
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
</Button>
|
||||
</motion.div>
|
||||
|
||||
{/* Checkmark for Completeness */}
|
||||
<motion.div
|
||||
initial={{ scale: 0, rotate: -180 }}
|
||||
whileInView={{ scale: 1, rotate: 0 }}
|
||||
viewport={{ once: true }}
|
||||
transition={{ delay: index * 0.2 + 0.5, type: "spring" }}
|
||||
className="absolute top-4 right-4 w-8 h-8 bg-green-500 rounded-full flex items-center justify-center shadow-lg"
|
||||
>
|
||||
{/* Checkmark */}
|
||||
<div className="absolute top-4 right-4 w-8 h-8 bg-[#13afdc] rounded-full flex items-center justify-center shadow-lg">
|
||||
<CheckCircle className="w-5 h-5 text-white" />
|
||||
</motion.div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
{/* Decorative Elements */}
|
||||
{/* Decorative Blur */}
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: isHovered ? 1.5 : 1,
|
||||
opacity: isHovered ? 0.3 : 0.1,
|
||||
opacity: isHovered ? 0.25 : 0.1,
|
||||
}}
|
||||
transition={{ duration: 0.5 }}
|
||||
className={`absolute -bottom-10 -right-10 w-40 h-40 bg-gradient-to-br ${module.color} rounded-full blur-3xl`}
|
||||
className="absolute -bottom-10 -right-10 w-40 h-40 bg-[#13afdc] rounded-full blur-3xl"
|
||||
/>
|
||||
</Card>
|
||||
</motion.div>
|
||||
@@ -156,24 +134,13 @@ const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||
|
||||
const ModulesSection: React.FC = () => {
|
||||
return (
|
||||
<section className="py-16 md:py-24 bg-gradient-to-b from-white via-gray-50 to-white relative overflow-hidden">
|
||||
{/* Background Decorative Elements */}
|
||||
<section className="py-16 md:py-24 bg-gradient-to-b from-white via-[#c3dbe0]/30 to-white relative overflow-hidden">
|
||||
{/* Decorative background */}
|
||||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1, 1.2, 1],
|
||||
rotate: [0, 90, 0],
|
||||
}}
|
||||
animate={{ scale: [1, 1.2, 1], rotate: [0, 90, 0] }}
|
||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute top-1/4 left-0 w-96 h-96 bg-blue-100 rounded-full blur-3xl opacity-20"
|
||||
/>
|
||||
<motion.div
|
||||
animate={{
|
||||
scale: [1.2, 1, 1.2],
|
||||
rotate: [90, 0, 90],
|
||||
}}
|
||||
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute bottom-1/4 right-0 w-96 h-96 bg-purple-100 rounded-full blur-3xl opacity-20"
|
||||
className="absolute top-1/4 left-0 w-96 h-96 bg-[#13afdc]/20 rounded-full blur-3xl"
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -185,19 +152,19 @@ const ModulesSection: React.FC = () => {
|
||||
viewport={{ once: true }}
|
||||
className="text-center mb-16"
|
||||
>
|
||||
<Badge className="mb-4 px-6 py-2 bg-purple-100 text-purple-700 border-0">
|
||||
<Badge className="mb-4 px-6 py-2 bg-[#13afdc]/10 text-[#13afdc] border-0">
|
||||
<Sparkles className="w-4 h-4 mr-2 inline" />
|
||||
{home.module.badge}
|
||||
</Badge>
|
||||
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
|
||||
<h2 className="text-4xl md:text-5xl lg:text-6xl font-bold text-[#0d0d0d] mb-6">
|
||||
{home.module.title}{" "}
|
||||
<span className="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||
<span className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] bg-clip-text text-transparent">
|
||||
Offers
|
||||
</span>{" "}
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
<p className="text-lg md:text-xl text-[#7c7a7c] max-w-3xl mx-auto">
|
||||
{home.module.subtitle}
|
||||
</p>
|
||||
</motion.div>
|
||||
@@ -209,7 +176,7 @@ const ModulesSection: React.FC = () => {
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Bottom CTA Section */}
|
||||
{/* Bottom CTA */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 30 }}
|
||||
whileInView={{ opacity: 1, y: 0 }}
|
||||
@@ -217,19 +184,18 @@ const ModulesSection: React.FC = () => {
|
||||
transition={{ delay: 0.6 }}
|
||||
className="mt-16 text-center"
|
||||
>
|
||||
<Card className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 border-0 max-w-4xl mx-auto">
|
||||
<Card className="bg-gradient-to-r from-[#13afdc] to-[#c3dbe0] border-0 max-w-4xl mx-auto">
|
||||
<CardContent className="p-8 md:p-12">
|
||||
<h3 className="text-3xl md:text-4xl font-bold text-white mb-4">
|
||||
Ready to Transform Your Business?
|
||||
</h3>
|
||||
<p className="text-lg text-blue-100 mb-8">
|
||||
Get started with all three modules and experience seamless
|
||||
integration
|
||||
<p className="text-white/90 mb-8">
|
||||
Get started with all modules and experience seamless integration
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||
<Button
|
||||
size="lg"
|
||||
className="bg-white text-blue-600 hover:bg-gray-100 font-semibold"
|
||||
className="bg-white text-[#13afdc] hover:bg-gray-100 font-semibold"
|
||||
>
|
||||
Start Free Trial
|
||||
<Sparkles className="ml-2 w-5 h-5" />
|
||||
@@ -237,7 +203,7 @@ const ModulesSection: React.FC = () => {
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-2 border-white bg-white hover:bg-white/10"
|
||||
className="border-2 border-white text-slate-600 hover:bg-white/10"
|
||||
>
|
||||
Schedule Demo
|
||||
<ArrowRight className="ml-2 w-5 h-5" />
|
||||
@@ -251,4 +217,4 @@ const ModulesSection: React.FC = () => {
|
||||
);
|
||||
};
|
||||
|
||||
export default ModulesSection;
|
||||
export default ModulesSection;
|
||||
Reference in New Issue
Block a user