new pages created

app/(public)/crm/_components/Advantages.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import {
+  Card,
+  CardContent,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { crm } from "@/services/Constants";
+
+
+
+const CRMAdvantages: React.FC = () => {
+  return (
+    <section className="py-20 px-4 bg-gradient-to-br from-blue-50 via-purple-50 to-pink-50">
+      <div className="container mx-auto max-w-7xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <Badge className="mb-4 bg-blue-100 text-blue-700 border-blue-200">
+            Why Choose Us
+          </Badge>
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            Why Companies Choose{" "}
+            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              Our CRM
+            </span>
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Boost sales performance, strengthen customer relationships, and grow faster with a modern CRM solution.
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {crm.CRM_ADVANTAGES.map((advantage, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, scale: 0.9 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: idx * 0.1 }}
+            >
+              <Card className="bg-white border-2 border-gray-100 hover:border-purple-300 hover:shadow-2xl transition-all duration-300 h-full group">
+                <CardContent className="pt-8">
+                  <div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-md">
+                    <div className="text-white">{advantage.icon}</div>
+                  </div>
+                  <h3 className="text-xl font-bold text-gray-900 mb-3 group-hover:text-blue-600 transition-colors">
+                    {advantage.title}
+                  </h3>
+                  <p className="text-gray-600 leading-relaxed">
+                    {advantage.description}
+                  </p>
+                </CardContent>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CRMAdvantages

app/(public)/crm/_components/CRMAnalytics.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { BarChart3 } from "lucide-react";
+import { crm } from "@/services/Constants";
+
+const CRMAnalytics: React.FC = () => {
+  return (
+    <section className="py-20 px-4 bg-gradient-to-br from-purple-600 to-pink-600 text-white relative overflow-hidden">
+      <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-30"></div>
+
+      <div className="container mx-auto max-w-7xl relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <div className="w-16 h-16 mx-auto mb-6 rounded-2xl bg-gradient-to-br from-blue-400 to-purple-500 flex items-center justify-center shadow-2xl">
+            <BarChart3 className="w-8 h-8 text-white" />
+          </div>
+
+          <h2 className="text-4xl md:text-5xl font-bold mb-4">
+            CRM Analytics & Insights
+          </h2>
+
+          <p className="text-xl text-blue-100 max-w-3xl mx-auto">
+            Real-time customer and sales intelligence that helps you close more
+            deals and grow faster
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {crm.ANALYTICS_STATS.map((stat, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, scale: 0.5 }}
+              whileInView={{ opacity: 1, scale: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: idx * 0.1, type: "spring" }}
+              className="text-center"
+            >
+              <div className="bg-white/10 backdrop-blur-lg rounded-2xl p-8 border border-white/20 hover:bg-white/20 transition-all duration-300 hover:scale-105">
+                <div className="text-6xl font-extrabold mb-3 bg-gradient-to-r from-blue-300 to-purple-300 text-blue-100 bg-clip-text ">
+                  {stat.value}
+                </div>
+                <div className="text-blue-100 text-lg font-medium">
+                  {stat.label}
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="mt-12 text-center"
+        >
+          <Button
+            size="lg"
+            className="bg-white text-blue-700 hover:bg-blue-50 text-lg px-8 py-6 shadow-xl"
+          >
+            <BarChart3 className="mr-2" /> View Full Analytics Dashboard
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default CRMAnalytics;

app/(public)/crm/_components/FAQ.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { Badge } from "@/components/ui/badge";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import { crm, hrms } from "@/services/Constants";
+
+
+const FAQSection: React.FC = () => {
+  return (
+    <section className="py-20 px-4 bg-gradient-to-br from-gray-50 to-blue-50">
+      <div className="container mx-auto max-w-4xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
+            FAQ
+          </Badge>
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            Frequently Asked{" "}
+            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              Questions
+            </span>
+          </h2>
+          <p className="text-xl text-gray-600">
+            Everything you need to know about our CRM Software
+          </p>
+        </motion.div>
+
+        <Accordion type="single" collapsible className="space-y-4">
+          {crm.CRM_FAQ.map((faq, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: idx * 0.1 }}
+            >
+              <AccordionItem
+                value={`item-${idx}`}
+                className="bg-white border-2 border-gray-100 rounded-xl px-6 hover:border-blue-300 transition-all shadow-sm hover:shadow-md"
+              >
+                <AccordionTrigger className="text-left hover:text-blue-600 text-lg font-semibold py-6">
+                  {faq.question}
+                </AccordionTrigger>
+                <AccordionContent className="text-gray-600 text-base leading-relaxed pb-6">
+                  {faq.answer}
+                </AccordionContent>
+              </AccordionItem>
+            </motion.div>
+          ))}
+        </Accordion>
+      </div>
+    </section>
+  );
+};
+
+export default FAQSection

app/(public)/crm/_components/FinalCTA.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { crm } from "@/services/Constants";
+
+
+
+
+const FinalCTA: React.FC = () => {
+  return (
+    <section className="relative py-24 px-6 bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 text-white overflow-hidden">
+      {/* Animated Background Pattern */}
+      <motion.div
+        aria-hidden
+        className="absolute inset-0 opacity-20 pointer-events-none"
+        animate={{ scale: [1, 1.05, 1], opacity: [0.2, 0.35, 0.2] }}
+        transition={{ duration: 10, repeat: Infinity }}
+        style={{
+          backgroundImage:
+            "radial-gradient(circle at center, rgba(255,255,255,0.25) 0, transparent 60%)",
+        }}
+      />
+
+      <div className="relative z-10 max-w-4xl mx-auto text-center">
+        {/* Title */}
+        <motion.h2
+          initial={{ opacity: 0, y: 25 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.7 }}
+          viewport={{ once: true }}
+          className="text-3xl md:text-4xl font-extrabold"
+        >
+          {crm.FINAL_CTA.title}
+        </motion.h2>
+
+        {/* Subtitle */}
+        <motion.p
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.2 }}
+          viewport={{ once: true }}
+          className="text-lg mt-4 text-white/90 max-w-2xl mx-auto"
+        >
+          {crm.FINAL_CTA.subtitle}
+        </motion.p>
+
+        {/* CTA Button */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6, delay: 0.3 }}
+          viewport={{ once: true }}
+          className="mt-10"
+        >
+          <Button
+            size="lg"
+            className="px-10 py-6 text-lg font-semibold bg-white text-blue-700 hover:bg-gray-100 hover:scale-105 transition-all rounded-xl shadow-lg"
+          >
+            {crm.FINAL_CTA.ctaText}
+          </Button>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default FinalCTA

app/(public)/crm/_components/Hero.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  CheckCircle,
+  Download,
+  ArrowRight,
+  Sparkles,
+  UserCheck,
+} from "lucide-react";
+import { crm } from "@/services/Constants";
+
+
+// Components
+const CRMHero: React.FC = () => {
+  return (
+    <section className="relative py-24 px-4 overflow-hidden">
+      <div className="absolute inset-0 bg-gradient-to-br from-blue-50 via-white to-purple-50"></div>
+      <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiM4YjViZjYiIGZpbGwtb3BhY2l0eT0iMC4wMyI+PHBhdGggZD0iTTM2IDE4YzAtOS45NC04LjA2LTE4LTE4LTE4UzAgOC4wNiAwIDE4czguMDYgMTggMTggMTggMTgtOC4wNiAxOC0xOCIvPjwvZz48L2c+PC9zdmc+')] opacity-40"></div>
+
+      <div className="container mx-auto max-w-7xl relative z-10">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          <motion.div
+            initial={{ opacity: 0, x: -30 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8 }}
+          >
+            <Badge className="mb-6 bg-blue-100 text-blue-700 border-blue-200 px-4 py-2 hover:bg-blue-200">
+              <Sparkles className="w-4 h-4 inline mr-2" />
+              Next-Generation crm Platform
+            </Badge>
+
+            <h1 className="text-5xl md:text-6xl lg:text-6xl font-extrabold leading-tight text-gray-900 mb-6">
+              <span className="bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent">
+                A Powerful CRM
+              </span>
+              <br />
+              <span className="text-gray-900">to Manage Leads, Customers & Sales Growth</span>
+            </h1>
+
+            <p className="text-xl text-gray-600 mb-8 leading-relaxed">
+              {crm.hero.subtitle}
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4">
+              <Button
+                size="lg"
+                className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-lg px-8 py-6 shadow-lg hover:shadow-xl transition-all"
+              >
+                {crm.hero.ctaPrimary} <ArrowRight className="ml-2 w-5 h-5" />
+              </Button>
+              <Button
+                size="lg"
+                variant="outline"
+                className="border-2 border-gray-300 hover:border-blue-600 hover:bg-blue-50 text-gray-700 text-lg px-8 py-6"
+              >
+                <Download className="mr-2 w-5 h-5" /> {crm.hero.ctaSecondary}
+              </Button>
+            </div>
+
+            <div className="mt-8 flex items-center gap-6 text-sm text-gray-600">
+              <div className="flex items-center gap-2">
+                <CheckCircle className="w-5 h-5 text-green-600" />
+                <span>Free 14-day trial</span>
+              </div>
+              <div className="flex items-center gap-2">
+                <CheckCircle className="w-5 h-5 text-green-600" />
+                <span>No credit card required</span>
+              </div>
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 30 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            className="relative"
+          >
+            <div className="relative">
+              <div className="absolute inset-0 bg-gradient-to-br from-blue-400 to-purple-600 rounded-3xl blur-2xl opacity-20"></div>
+              <img
+                src={crm.hero.heroImage}
+                alt="crm Dashboard"
+                className="relative rounded-3xl shadow-2xl w-full h-auto transform hover:scale-105 transition-transform duration-500"
+              />
+              <div className="absolute -bottom-6 -right-6 bg-white rounded-2xl shadow-xl p-6 max-w-xs">
+                <div className="flex items-center gap-3">
+                  <div className="w-12 h-12 bg-gradient-to-br from-green-400 to-emerald-600 rounded-xl flex items-center justify-center">
+                    <UserCheck className="w-7 h-7 text-white" />
+                  </div>
+                  <div>
+                    <div className="text-2xl font-bold text-gray-900">16K+</div>
+                    <div className="text-sm text-gray-600">Active Users</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default CRMHero

app/(public)/crm/_components/Modules.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { crm } from "@/services/Constants";
+
+const ModulesOverview: React.FC = () => {
+  return (
+    <section className="py-20 px-4 bg-white">
+      <div className="container mx-auto max-w-7xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <Badge className="mb-4 bg-purple-100 text-purple-700 border-purple-200">
+            Core CRM Features
+          </Badge>
+
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            CRM{" "}
+            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              Modules Overview
+            </span>
+          </h2>
+
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Smart tools to manage leads, improve customer relationships, and
+            accelerate sales growth.
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {crm.CRM_MODULES.map((module, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: idx * 0.1 }}
+            >
+              <Card className="bg-gradient-to-br from-white to-gray-50 border-2 border-gray-100 hover:border-blue-300 hover:shadow-xl transition-all duration-300 h-full group">
+                <CardHeader>
+                  <div
+                    className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${module.color} flex items-center justify-center mb-4 group-hover:scale-110 transition-transform shadow-lg`}
+                  >
+                    <div className="text-white">{module.icon}</div>
+                  </div>
+                  <CardTitle className="text-2xl mb-3 text-gray-900 group-hover:text-blue-600 transition-colors">
+                    {module.title}
+                  </CardTitle>
+                  <CardDescription className="text-gray-600 text-base leading-relaxed">
+                    {module.description}
+                  </CardDescription>
+                </CardHeader>
+              </Card>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default ModulesOverview;

app/(public)/crm/_components/Value.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import { crm, hrms } from "@/services/Constants";
+
+
+const ValueProposition: React.FC = () => {
+  return (
+    <section className="py-20 px-4 bg-gradient-to-br from-gray-50 to-blue-50">
+      <div className="container mx-auto max-w-6xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center"
+        >
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
+            {crm.VALUE_PROPOSITION.title}
+          </h2>
+          <p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
+            {crm.VALUE_PROPOSITION.description}
+          </p>
+        </motion.div>
+      </div>
+    </section>
+  );
+};
+
+export default ValueProposition

app/(public)/crm/_components/WorkFlow.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React from "react";
+import { motion } from "framer-motion";
+import {
+  Card,
+  CardContent,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import {
+  ArrowRight,
+} from "lucide-react";
+import { crm } from "@/services/Constants";
+
+
+
+const WorkflowProcess: React.FC = () => {
+  return (
+    <section className="py-24 px-4 bg-white">
+      <div className="container mx-auto max-w-7xl">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          className="text-center mb-16"
+        >
+          <Badge className="mb-4 bg-green-100 text-green-700 border-green-200">
+            Simple Process
+          </Badge>
+          <h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
+            How{" "}
+            <span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              CRM Works
+            </span>
+          </h2>
+          <p className="text-xl text-gray-600 max-w-3xl mx-auto">
+            Four simple steps to revolutionize your CRM Software
+          </p>
+        </motion.div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+          {crm.WORKFLOW_STEPS.map((step, idx) => (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: idx * 0.15 }}
+              className="relative"
+            >
+              <Card className="bg-gradient-to-br from-gray-50 to-white border-2 border-gray-100 hover:border-blue-300 hover:shadow-xl transition-all duration-300 h-full">
+                <CardContent className="pt-8 text-center">
+                  <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-gradient-to-br from-blue-600 to-purple-600 flex items-center justify-center text-white text-2xl font-bold shadow-lg">
+                    {step.step}
+                  </div>
+                  <h3 className="text-2xl font-bold text-gray-900 mb-3">
+                    {step.title}
+                  </h3>
+                  <p className="text-gray-600 leading-relaxed">
+                    {step.description}
+                  </p>
+                </CardContent>
+              </Card>
+              {idx < crm.WORKFLOW_STEPS.length - 1 && (
+                <div className="hidden lg:block absolute top-1/2 -right-3 transform -translate-y-1/2 z-10">
+                  <ArrowRight className="w-6 h-6 text-blue-400" />
+                </div>
+              )}
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default WorkflowProcess

app/(public)/crm/page.tsx

@@ -0,0 +1,26 @@
+import CRMAdvantages from "./_components/Advantages";
+import FAQSection from "./_components/FAQ";
+import FinalCTA from "./_components/FinalCTA";
+import CRMHero from "./_components/Hero";
+import CRMAnalytics from "./_components/CRMAnalytics";
+import ModulesOverview from "./_components/Modules";
+import ValueProposition from "./_components/Value";
+import WorkflowProcess from "./_components/WorkFlow";
+
+// Main ATS Page Component
+const CRMPage: React.FC = () => {
+  return (
+    <div className="min-h-screen bg-white">
+      <CRMHero />
+      <ValueProposition />
+      <ModulesOverview />
+      <CRMAdvantages />
+      <WorkflowProcess />
+      <CRMAnalytics />
+      <FAQSection />
+      <FinalCTA />
+    </div>
+  );
+};
+
+export default CRMPage;