new pages created
This commit is contained in:
231
HRMS.html
Normal file
231
HRMS.html
Normal file
@@ -0,0 +1,231 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>HRMS - Winixco</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-gray-50 text-gray-800">
|
||||||
|
|
||||||
|
<!-- HERO SECTION -->
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="bg-white py-24">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight text-gray-900">
|
||||||
|
Modern HRMS Designed for the Workplace of Tomorrow
|
||||||
|
</h1>
|
||||||
|
<p class="mt-6 text-lg text-gray-600">
|
||||||
|
Manage your entire workforce — hiring, onboarding, attendance, payroll, performance & HR automation — all in one unified platform.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mt-10 flex gap-4">
|
||||||
|
<a href="#" class="bg-blue-600 text-white px-8 py-3 rounded-xl text-lg font-semibold hover:bg-blue-700">
|
||||||
|
Book a Demo
|
||||||
|
</a>
|
||||||
|
<a href="#" class="border border-gray-400 px-8 py-3 rounded-xl text-lg font-semibold hover:border-black">
|
||||||
|
Download Brochure
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<img src="https://images.unsplash.com/photo-1551836022-4c4c79ecde51"
|
||||||
|
class="rounded-2xl shadow-xl">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- VALUE PROPOSITION -->
|
||||||
|
<section class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold text-gray-900">A Central HR Hub for Your Entire Organization</h2>
|
||||||
|
<p class="mt-4 text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Streamline HR operations, automate repetitive tasks, enhance employee experience and stay compliant — with a secure, scalable HRMS built for fast-growing companies.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- MODULES OVERVIEW -->
|
||||||
|
<section class="py-20 bg-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h3 class="text-2xl md:text-3xl font-bold text-gray-900 mb-10">HRMS Modules Overview</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Employee Database</h4>
|
||||||
|
<p class="text-gray-600">Centralized staff records, documents, job history & reporting structure.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Attendance & Leaves</h4>
|
||||||
|
<p class="text-gray-600">Biometric/Geo attendance, leave requests, shift scheduling & approvals.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Payroll Management</h4>
|
||||||
|
<p class="text-gray-600">Auto salary generation, ESI/PF/Professional Tax, payslips & compliance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Performance Reviews</h4>
|
||||||
|
<p class="text-gray-600">Goal setting, KRAs, feedback cycles, review workflows & appraisals.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Recruitment & Onboarding</h4>
|
||||||
|
<p class="text-gray-600">Track applicants, generate offer letters, digital onboarding & document verification.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Expense Claims</h4>
|
||||||
|
<p class="text-gray-600">Employee reimbursements, approvals, workflows & tracking.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HR AUTOMATION ADVANTAGES -->
|
||||||
|
<section class="py-20 bg-blue-50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h3 class="text-center text-3xl font-bold text-gray-900 mb-12">Why Companies Choose Our HRMS</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Reduce Manual Work</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Automate payroll, attendance, appraisal cycles + reminders.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Improve Employee Engagement</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Self-service portal for attendance, leaves, announcements & payslips.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Transparent HR Policies</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Define leave policies, approvals & workflows with clarity.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Accurate Payroll Every Month</h4>
|
||||||
|
<p class="mt-2 text-gray-600">No errors, no delays. 100% compliant payroll.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Better Decision Making</h4>
|
||||||
|
<p class="mt-2 text-gray-600">HR dashboards for attrition, performance, productivity & attendance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Secure, Scalable & Cloud-Based</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Encrypted data, role-based access, audit logs & backups.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PROCESS WORKFLOW -->
|
||||||
|
<section class="py-24 bg-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h3 class="text-3xl font-bold text-center mb-14">How HRMS Works</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-4 gap-6 text-center">
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">1. Hire</h4>
|
||||||
|
<p class="text-gray-600">Recruit talent, screen resumes & generate offer letters.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">2. Onboard</h4>
|
||||||
|
<p class="text-gray-600">Paperless joining, document upload & role assignment.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">3. Manage</h4>
|
||||||
|
<p class="text-gray-600">Attendance, leaves, payroll, shifts & employee lifecycle.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">4. Evaluate</h4>
|
||||||
|
<p class="text-gray-600">Review performance, track goals & run appraisal cycles.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HR ANALYTICS -->
|
||||||
|
<section class="py-20 bg-gray-900 text-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
|
||||||
|
<h3 class="text-3xl font-bold text-center mb-12">HR Analytics & Insights</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-4 gap-8 text-center">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">98%</h4>
|
||||||
|
<p class="text-gray-300 mt-1">Payroll Accuracy</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">45%</h4>
|
||||||
|
<p class="text-gray-300 mt-1">Less Manual HR Work</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">80%</h4>
|
||||||
|
<p class="text-gray-300 mt-1">Faster Hiring</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">60%</h4>
|
||||||
|
<p class="text-gray-300 mt-1">Improved Productivity</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<h3 class="text-3xl font-bold text-center mb-10">Frequently Asked Questions</h3>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<details class="p-6 bg-white rounded-xl shadow">
|
||||||
|
<summary class="text-lg font-semibold cursor-pointer">Is this HRMS suitable for small companies?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes. It supports startups, SMEs, agencies and large enterprises.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="p-6 bg-white rounded-xl shadow">
|
||||||
|
<summary class="text-lg font-semibold cursor-pointer">Can employees access their own portal?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes, via web and mobile — for attendance, leaves, payslips & updates.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="p-6 bg-white rounded-xl shadow">
|
||||||
|
<summary class="text-lg font-semibold cursor-pointer">Does it integrate with biometric devices?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes. Fingerprint, RFID, QR and geo-attendance are supported.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FINAL CTA -->
|
||||||
|
<section class="py-20 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-center">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Upgrade Your HR Operations?</h2>
|
||||||
|
<p class="text-blue-100 text-lg mb-10">Automate, simplify and scale your HR with a powerful, cloud-based HRMS.</p>
|
||||||
|
<a href="#" class="bg-white text-blue-700 px-10 py-3 rounded-xl font-semibold shadow hover:shadow-lg">Book a Demo</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
@@ -1,40 +1,45 @@
|
|||||||
import React from 'react';
|
import React from "react";
|
||||||
import { motion, Variants } from 'framer-motion';
|
import { motion, Variants } from "framer-motion";
|
||||||
import { Button } from '@/components/ui/button';
|
import { Button } from "@/components/ui/button";
|
||||||
import { Badge } from '@/components/ui/badge';
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { ArrowRight, CheckCircle, Users, Target, Award, Sparkles } from 'lucide-react';
|
import {
|
||||||
import { home } from '@/services/Constants';
|
ArrowRight,
|
||||||
|
CheckCircle,
|
||||||
|
Users,
|
||||||
|
Target,
|
||||||
|
Award,
|
||||||
|
Sparkles,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { home } from "@/services/Constants";
|
||||||
|
|
||||||
const AboutUs: React.FC = () => {
|
const AboutUs: React.FC = () => {
|
||||||
|
const containerVariants: Variants = {
|
||||||
const containerVariants:Variants = {
|
|
||||||
hidden: { opacity: 0 },
|
hidden: { opacity: 0 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
transition: {
|
transition: {
|
||||||
staggerChildren: 0.2,
|
staggerChildren: 0.2,
|
||||||
delayChildren: 0.3
|
delayChildren: 0.3,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const itemVariants:Variants = {
|
const itemVariants: Variants = {
|
||||||
hidden: { opacity: 0, y: 20 },
|
hidden: { opacity: 0, y: 20 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
y: 0,
|
y: 0,
|
||||||
transition: { duration: 0.6, ease: "easeOut" }
|
transition: { duration: 0.6, ease: "easeOut" },
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
const imageVariants:Variants = {
|
const imageVariants: Variants = {
|
||||||
hidden: { opacity: 0, scale: 0.8 },
|
hidden: { opacity: 0, scale: 0.8 },
|
||||||
visible: {
|
visible: {
|
||||||
opacity: 1,
|
opacity: 1,
|
||||||
scale: 1,
|
scale: 1,
|
||||||
transition: { duration: 0.8, ease: "easeOut" }
|
transition: { duration: 0.8, ease: "easeOut" },
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -59,7 +64,9 @@ const AboutUs: React.FC = () => {
|
|||||||
<div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
|
<div className="w-24 h-24 mx-auto mb-4 bg-gradient-to-br from-blue-500 to-purple-600 rounded-2xl flex items-center justify-center">
|
||||||
<Users className="w-12 h-12 text-white" />
|
<Users className="w-12 h-12 text-white" />
|
||||||
</div>
|
</div>
|
||||||
<p className="text-gray-600 font-medium">Team Collaboration</p>
|
<p className="text-gray-600 font-medium">
|
||||||
|
Team Collaboration
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@@ -107,7 +114,7 @@ const AboutUs: React.FC = () => {
|
|||||||
<motion.div
|
<motion.div
|
||||||
animate={{
|
animate={{
|
||||||
scale: [1, 1.2, 1],
|
scale: [1, 1.2, 1],
|
||||||
rotate: [0, 90, 0]
|
rotate: [0, 90, 0],
|
||||||
}}
|
}}
|
||||||
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||||
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-blue-100 rounded-full blur-3xl opacity-30 -z-10"
|
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-blue-100 rounded-full blur-3xl opacity-30 -z-10"
|
||||||
@@ -162,7 +169,9 @@ const AboutUs: React.FC = () => {
|
|||||||
className="text-center p-4 rounded-xl bg-gradient-to-br from-gray-50 to-blue-50 border border-gray-100"
|
className="text-center p-4 rounded-xl bg-gradient-to-br from-gray-50 to-blue-50 border border-gray-100"
|
||||||
>
|
>
|
||||||
<stat.icon className="w-8 h-8 mx-auto mb-2 text-blue-600" />
|
<stat.icon className="w-8 h-8 mx-auto mb-2 text-blue-600" />
|
||||||
<p className="text-2xl font-bold text-gray-900">{stat.value}</p>
|
<p className="text-2xl font-bold text-gray-900">
|
||||||
|
{stat.value}
|
||||||
|
</p>
|
||||||
<p className="text-xs text-gray-600 mt-1">{stat.label}</p>
|
<p className="text-xs text-gray-600 mt-1">{stat.label}</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import React, { } from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import AnimatedSection from "./Animated";
|
import AnimatedSection from "./Animated";
|
||||||
import { home } from "@/services/Constants";
|
import { home } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Benefits Section
|
|
||||||
const Benefits = () => {
|
const Benefits = () => {
|
||||||
return (
|
return (
|
||||||
<section
|
<section
|
||||||
@@ -19,27 +16,31 @@ const Benefits = () => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-w-7xl mx-auto px-4 relative z-10">
|
<div className="max-w-7xl mx-auto px-4 relative z-10">
|
||||||
|
{/* Heading */}
|
||||||
<AnimatedSection className="text-center mb-16">
|
<AnimatedSection className="text-center mb-16">
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||||
Why Choose TalentFlow?
|
Why Choose Winixco?
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-purple-100 max-w-3xl mx-auto">
|
<p className="text-xl text-purple-100 max-w-3xl mx-auto">
|
||||||
Experience the future of recruitment with our innovative platform
|
Winixco helps companies stay efficient, connected, and future-ready.
|
||||||
|
With automation, accuracy, and real-time syncing, every department works smarter — not harder.
|
||||||
</p>
|
</p>
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|
||||||
|
{/* Feature Cards */}
|
||||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
{home.benefits.map((benefit, index) => (
|
{home.benefits.map((feature, index) => (
|
||||||
<AnimatedSection key={index}>
|
<AnimatedSection key={index}>
|
||||||
<motion.div
|
<motion.div
|
||||||
whileHover={{ scale: 1.05 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
className="text-center p-8 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 hover:bg-white/20 transition-all"
|
className="text-center p-8 rounded-2xl bg-white/10 backdrop-blur-lg border border-white/20 hover:bg-white/20 transition-all"
|
||||||
>
|
>
|
||||||
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-white/20 flex items-center justify-center">
|
<div className="w-16 h-16 mx-auto mb-6 rounded-full bg-white/20 flex items-center justify-center">
|
||||||
<div className="text-white">{benefit.icon}</div>
|
<span className="text-white">{feature.icon}</span>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold mb-3">{benefit.title}</h3>
|
|
||||||
<p className="text-purple-100">{benefit.description}</p>
|
<h3 className="text-xl font-bold mb-3">{feature.title}</h3>
|
||||||
|
<p className="text-purple-100">{feature.description}</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
))}
|
))}
|
||||||
@@ -49,4 +50,4 @@ const Benefits = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Benefits
|
export default Benefits;
|
||||||
|
|||||||
@@ -1,12 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import React, { } from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import {
|
import { ArrowRight } from "lucide-react";
|
||||||
ArrowRight,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
|
||||||
// CTA Section
|
// CTA Section
|
||||||
const CTA = () => {
|
const CTA = () => {
|
||||||
return (
|
return (
|
||||||
@@ -21,10 +18,16 @@ const CTA = () => {
|
|||||||
|
|
||||||
<div className="relative z-10 max-w-4xl mx-auto px-4">
|
<div className="relative z-10 max-w-4xl mx-auto px-4">
|
||||||
<h2 className="text-4xl md:text-6xl font-bold mb-6">
|
<h2 className="text-4xl md:text-6xl font-bold mb-6">
|
||||||
Ready to Transform Your Hiring?
|
Transform the way your business
|
||||||
|
<span className="bg-gradient-to-r from-pink-400 to-yellow-300 bg-clip-text text-transparent">
|
||||||
|
{" "}
|
||||||
|
hires, manages & grows
|
||||||
|
</span>
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p className="text-lg md:text-xl text-purple-100 mb-10">
|
<p className="text-lg md:text-xl text-purple-100 mb-10">
|
||||||
Join 10,000+ HR teams using TalentFlow to hire smarter and faster
|
Winixco brings HRMS, ATS & CRM together — so your teams stay aligned,
|
||||||
|
productive and future-ready.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
@@ -32,19 +35,25 @@ const CTA = () => {
|
|||||||
size="lg"
|
size="lg"
|
||||||
className="px-10 py-6 text-lg bg-white text-purple-700 font-bold rounded-xl shadow-lg hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
|
className="px-10 py-6 text-lg bg-white text-purple-700 font-bold rounded-xl shadow-lg hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
|
||||||
>
|
>
|
||||||
Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />
|
{" "}
|
||||||
</Button>
|
Start Free Trial <ArrowRight className="ml-2 w-5 h-5" />{" "}
|
||||||
|
</Button>{" "}
|
||||||
<Button
|
<Button
|
||||||
size="lg"
|
size="lg"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
className="border-2 text-purple-700 px-10 py-6 text-lg font-bold rounded-xl hover:bg-white/10 transition-all"
|
className="border-2 text-purple-700 px-10 py-6 text-lg font-bold rounded-xl hover:bg-white/10 transition-all"
|
||||||
>
|
>
|
||||||
Book a Demo
|
{" "}
|
||||||
|
Book a Demo{" "}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p className="mt-6 text-sm text-purple-200">
|
||||||
|
No credit card required · Quick setup · Cancel anytime
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default CTA
|
export default CTA;
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import React, { } from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { Card, CardContent } from "@/components/ui/card";
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
import AnimatedSection from "./Animated";
|
import AnimatedSection from "./Animated";
|
||||||
@@ -18,14 +18,14 @@ const Features = () => {
|
|||||||
POWERFUL FEATURES
|
POWERFUL FEATURES
|
||||||
</span>
|
</span>
|
||||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||||
Everything You Need to{" "}
|
All-in-One ATS, HRMS & CRP{" "}
|
||||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
Hire Smarter
|
Solutions
|
||||||
</span>
|
</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
Our comprehensive ATS platform combines cutting-edge AI with
|
Explore features across all our products designed to scale your
|
||||||
intuitive design to revolutionize your recruitment process.
|
hiring success.
|
||||||
</p>
|
</p>
|
||||||
</AnimatedSection>
|
</AnimatedSection>
|
||||||
|
|
||||||
@@ -60,4 +60,4 @@ const Features = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Features
|
export default Features;
|
||||||
|
|||||||
@@ -1,79 +1,69 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import React, { } from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import {
|
import { Check, ArrowRight, PlayCircle, Users, UserCog, Briefcase } from "lucide-react";
|
||||||
Check,
|
|
||||||
ArrowRight,
|
|
||||||
PlayCircle,
|
|
||||||
} from "lucide-react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import { home } from "@/services/Constants";
|
import { home } from "@/services/Constants";
|
||||||
|
|
||||||
const Hero = () => {
|
const Hero = () => {
|
||||||
return (
|
return (
|
||||||
<section className="relative pt-32 pb-20 px-4 overflow-hidden bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
|
<section className="relative pt-32 pb-24 px-4 overflow-hidden bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
|
||||||
{/* Animated Background Elements */}
|
{/* Background Animation */}
|
||||||
<div className="absolute inset-0 overflow-hidden">
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
<motion.div
|
<motion.div
|
||||||
animate={{
|
animate={{ scale: [1, 1.2, 1], rotate: [0, 90, 0] }}
|
||||||
scale: [1, 1.2, 1],
|
|
||||||
rotate: [0, 90, 0],
|
|
||||||
}}
|
|
||||||
transition={{ duration: 20, repeat: Infinity }}
|
transition={{ duration: 20, repeat: Infinity }}
|
||||||
className="absolute -top-20 -left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30"
|
className="absolute -top-20 -left-20 w-72 h-72 bg-purple-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
|
||||||
/>
|
/>
|
||||||
<motion.div
|
<motion.div
|
||||||
animate={{
|
animate={{ scale: [1.2, 1, 1.2], rotate: [90, 0, 90] }}
|
||||||
scale: [1.2, 1, 1.2],
|
|
||||||
rotate: [90, 0, 90],
|
|
||||||
}}
|
|
||||||
transition={{ duration: 25, repeat: Infinity }}
|
transition={{ duration: 25, repeat: Infinity }}
|
||||||
className="absolute top-40 -right-20 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30"
|
className="absolute top-40 -right-20 w-96 h-96 bg-pink-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
|
||||||
/>
|
/>
|
||||||
<motion.div
|
<motion.div
|
||||||
animate={{
|
animate={{ scale: [1, 1.3, 1], rotate: [0, -90, 0] }}
|
||||||
scale: [1, 1.3, 1],
|
|
||||||
rotate: [0, -90, 0],
|
|
||||||
}}
|
|
||||||
transition={{ duration: 30, repeat: Infinity }}
|
transition={{ duration: 30, repeat: Infinity }}
|
||||||
className="absolute -bottom-20 left-1/2 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply filter blur-3xl opacity-30"
|
className="absolute -bottom-20 left-1/2 w-96 h-96 bg-blue-300 rounded-full mix-blend-multiply blur-3xl opacity-30"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="max-w-7xl mx-auto relative z-10">
|
<div className="max-w-7xl mx-auto relative z-10 text-center">
|
||||||
<div className="text-center max-w-4xl mx-auto">
|
{/* Badge */}
|
||||||
<motion.div
|
<motion.span
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6 }}
|
transition={{ duration: 0.6 }}
|
||||||
|
className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-6"
|
||||||
>
|
>
|
||||||
<span className="inline-block px-4 py-2 bg-purple-100 text-purple-700 rounded-full text-sm font-semibold mb-6">
|
🚀 All-In-One Talent & Workforce Platform
|
||||||
✨ AI-Powered Recruitment Platform
|
</motion.span>
|
||||||
</span>
|
|
||||||
</motion.div>
|
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
<motion.h1
|
<motion.h1
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, delay: 0.1 }}
|
transition={{ duration: 0.6, delay: 0.1 }}
|
||||||
className="text-5xl md:text-7xl font-bold mb-6 leading-tight"
|
className="text-4xl md:text-6xl font-extrabold mb-6 leading-tight"
|
||||||
>
|
>
|
||||||
Hire Top Talent{" "}
|
Build Powerful{" "}
|
||||||
<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-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||||
10x Faster
|
ATS, HRMS & CRM
|
||||||
</span>
|
</span>{" "}
|
||||||
|
Solutions
|
||||||
</motion.h1>
|
</motion.h1>
|
||||||
|
|
||||||
|
{/* Subtext */}
|
||||||
<motion.p
|
<motion.p
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.6, delay: 0.2 }}
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
className="text-xl md:text-2xl text-gray-600 mb-10 leading-relaxed"
|
className="text-xl md:text-2xl text-gray-600 mb-10 max-w-3xl mx-auto"
|
||||||
>
|
>
|
||||||
The world's most intelligent ATS that automates screening,
|
Winixco helps organizations simplify hiring, manage employees,
|
||||||
scheduling, and hiring. Join 10,000+ companies who trust TalentFlow.
|
and enhance client relationships — all in one platform.
|
||||||
</motion.p>
|
</motion.p>
|
||||||
|
|
||||||
|
{/* CTA Buttons */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
@@ -82,10 +72,9 @@ const Hero = () => {
|
|||||||
>
|
>
|
||||||
<Button
|
<Button
|
||||||
size="lg"
|
size="lg"
|
||||||
className="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white px-8 py-6 text-lg font-semibold rounded-xl shadow-xl hover:shadow-2xl transform hover:scale-105 transition-all"
|
className="bg-gradient-to-r from-purple-600 to-pink-600 text-white px-8 py-6 text-lg font-semibold rounded-xl shadow-xl hover:scale-105 transition-all"
|
||||||
>
|
>
|
||||||
Start Free Trial
|
Book a Demo <ArrowRight className="ml-2 w-5 h-5" />
|
||||||
<ArrowRight className="ml-2 w-5 h-5" />
|
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
size="lg"
|
size="lg"
|
||||||
@@ -93,41 +82,63 @@ const Hero = () => {
|
|||||||
className="px-8 py-6 text-lg font-semibold rounded-xl border-2 hover:bg-gray-50"
|
className="px-8 py-6 text-lg font-semibold rounded-xl border-2 hover:bg-gray-50"
|
||||||
>
|
>
|
||||||
<PlayCircle className="mr-2 w-5 h-5" />
|
<PlayCircle className="mr-2 w-5 h-5" />
|
||||||
Watch Demo
|
Watch Overview
|
||||||
</Button>
|
</Button>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Trust checklist */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0 }}
|
initial={{ opacity: 0 }}
|
||||||
animate={{ opacity: 1 }}
|
animate={{ opacity: 1 }}
|
||||||
transition={{ duration: 0.6, delay: 0.4 }}
|
transition={{ duration: 0.6, delay: 0.4 }}
|
||||||
className="mt-8 flex items-center justify-center gap-2 text-sm text-gray-600"
|
className="mt-8 flex justify-center gap-4 text-gray-600 text-sm"
|
||||||
>
|
>
|
||||||
<Check className="w-5 h-5 text-green-500" />
|
<Check className="w-5 h-5 text-green-500" /> No credit card required
|
||||||
<span>No credit card required</span>
|
|
||||||
<span className="mx-2">•</span>
|
<span className="mx-2">•</span>
|
||||||
<Check className="w-5 h-5 text-green-500" />
|
<Check className="w-5 h-5 text-green-500" /> 14-day free trial
|
||||||
<span>14-day free trial</span>
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Product Highlight Cards */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.7, delay: 0.45 }}
|
||||||
|
className="mt-20 grid grid-cols-1 md:grid-cols-3 gap-6"
|
||||||
|
>
|
||||||
|
{[
|
||||||
|
{ icon: Users, title: "ATS", desc: "Automate hiring, AI screening & smoother interviews." },
|
||||||
|
{ icon: UserCog, title: "HRMS", desc: "Employee onboarding, payroll & performance." },
|
||||||
|
{ icon: Briefcase, title: "CRM", desc: "Manage clients & strengthen candidate relationships." },
|
||||||
|
].map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
className="bg-white p-6 rounded-2xl shadow-lg border border-purple-100"
|
||||||
|
>
|
||||||
|
<item.icon className="w-10 h-10 text-purple-600 mx-auto mb-4" />
|
||||||
|
<h3 className="text-xl font-bold mb-2">{item.title}</h3>
|
||||||
|
<p className="text-gray-600 text-sm">{item.desc}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Stats Section */}
|
{/* Stats Section */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 40 }}
|
initial={{ opacity: 0, y: 40 }}
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ opacity: 1, y: 0 }}
|
||||||
transition={{ duration: 0.8, delay: 0.5 }}
|
transition={{ duration: 0.8, delay: 0.55 }}
|
||||||
className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8"
|
className="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8"
|
||||||
>
|
>
|
||||||
{home.stats.map((stat, index) => (
|
{home.stats.map((stat, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={index}
|
key={index}
|
||||||
whileHover={{ scale: 1.05 }}
|
whileHover={{ scale: 1.05 }}
|
||||||
className="text-center p-6 rounded-2xl bg-white/80 backdrop-blur-sm shadow-lg"
|
className="text-center p-6 bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg"
|
||||||
>
|
>
|
||||||
<div className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-2">
|
<div className="text-4xl font-bold bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent mb-2">
|
||||||
{stat.value}
|
{stat.value}
|
||||||
</div>
|
</div>
|
||||||
<div className="text-gray-600 font-medium">{stat.label}</div>
|
<div className="text-gray-700 font-medium">{stat.label}</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</motion.div>
|
</motion.div>
|
||||||
@@ -136,4 +147,4 @@ const Hero = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Hero
|
export default Hero;
|
||||||
107
app/(public)/_homeComponents/HowItWorks.tsx
Normal file
107
app/(public)/_homeComponents/HowItWorks.tsx
Normal file
@@ -0,0 +1,107 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Briefcase, Users, ClipboardCheck, UserPlus, DollarSign, Handshake } from "lucide-react";
|
||||||
|
|
||||||
|
const steps = [
|
||||||
|
{
|
||||||
|
icon: <Briefcase className="w-10 h-10" />,
|
||||||
|
title: "Post Jobs in 1 Click",
|
||||||
|
desc: "Publish roles across multiple job boards instantly.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Users className="w-10 h-10" />,
|
||||||
|
title: "Track Applications",
|
||||||
|
desc: "View, filter & collaborate on candidates with smart ATS.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <ClipboardCheck className="w-10 h-10" />,
|
||||||
|
title: "Hire Smarter",
|
||||||
|
desc: "Shortlist, schedule interviews & make quick decisions.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <UserPlus className="w-10 h-10" />,
|
||||||
|
title: "Onboard to Employee",
|
||||||
|
desc: "Convert hires seamlessly into HRMS — no data re-entry!",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <DollarSign className="w-10 h-10" />,
|
||||||
|
title: "Manage HR & Payroll",
|
||||||
|
desc: "Attendance, payroll & performance in one place.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Handshake className="w-10 h-10" />,
|
||||||
|
title: "Nurture Clients & Grow",
|
||||||
|
desc: "Built-in CRM to boost retention, sales & business scale.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const HowItWorks = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-32 bg-gradient-to-br from-purple-600 to-pink-600 text-white text-center relative overflow-hidden">
|
||||||
|
<motion.div
|
||||||
|
animate={{ opacity: [0.4, 0.6, 0.4], scale: [1, 1.1, 1] }}
|
||||||
|
transition={{ duration: 10, repeat: Infinity }}
|
||||||
|
className="absolute bg-white rounded-full blur-3xl opacity-20 w-[28rem] h-[28rem] -top-20 -right-20"
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
animate={{ opacity: [0.4, 0.6, 0.4], scale: [1, 1.05, 1] }}
|
||||||
|
transition={{ duration: 12, repeat: Infinity }}
|
||||||
|
className="absolute bg-pink-300 rounded-full blur-3xl opacity-20 w-[26rem] h-[26rem] -bottom-20 -left-20"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="relative max-w-6xl mx-auto px-6 z-10">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-4xl md:text-6xl font-extrabold mb-6"
|
||||||
|
>
|
||||||
|
How It <span className="text-yellow-300">Works</span>
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6, delay: 0.2 }}
|
||||||
|
className="max-w-3xl mx-auto text-lg md:text-xl text-purple-200 mb-16"
|
||||||
|
>
|
||||||
|
Winixco connects your hiring, HR and CRM workflows into one powerful operating system — from job posting to payroll & business growth.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
{/* Steps */}
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||||
|
{steps.map((step, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 40 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: i * 0.15 }}
|
||||||
|
className="bg-white/10 backdrop-blur-xl p-6 rounded-2xl shadow-lg hover:scale-105 transition transform"
|
||||||
|
>
|
||||||
|
<div className="flex justify-center mb-4 text-yellow-300">
|
||||||
|
{step.icon}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-bold mb-2">{step.title}</h3>
|
||||||
|
<p className="text-sm text-purple-200">{step.desc}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
transition={{ delay: 0.9 }}
|
||||||
|
className="mt-12 text-sm text-purple-200"
|
||||||
|
>
|
||||||
|
Complete the loop. Grow endlessly. 💼✨
|
||||||
|
</motion.p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HowItWorks;
|
||||||
254
app/(public)/_homeComponents/Modules.tsx
Normal file
254
app/(public)/_homeComponents/Modules.tsx
Normal file
@@ -0,0 +1,254 @@
|
|||||||
|
"use client"
|
||||||
|
import React, { useState } from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { ArrowRight, CheckCircle, Sparkles } from "lucide-react";
|
||||||
|
import {
|
||||||
|
home,
|
||||||
|
Module,
|
||||||
|
ModuleCardProps,
|
||||||
|
ModuleFeature,
|
||||||
|
} from "@/services/Constants";
|
||||||
|
import { useRouter } from "next/navigation";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const ModuleCard: React.FC<ModuleCardProps> = ({ module, index }) => {
|
||||||
|
const [isHovered, setIsHovered] = useState<boolean>(false);
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const handleClick = (): void => {
|
||||||
|
router.push(module.route);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.2, duration: 0.6 }}
|
||||||
|
onMouseEnter={() => setIsHovered(true)}
|
||||||
|
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`}
|
||||||
|
onClick={handleClick}
|
||||||
|
>
|
||||||
|
<CardContent className="p-8 md:p-10 relative z-10">
|
||||||
|
{/* Icon and Badge */}
|
||||||
|
<div className="flex items-start justify-between mb-6">
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
scale: isHovered ? 1.1 : 1,
|
||||||
|
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`}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Image */}
|
||||||
|
<motion.div
|
||||||
|
className="mb-6 rounded-2xl overflow-hidden shadow-lg h-48 relative"
|
||||||
|
animate={{
|
||||||
|
y: isHovered ? -10 : 0,
|
||||||
|
scale: isHovered ? 1.05 : 1,
|
||||||
|
}}
|
||||||
|
transition={{ duration: 0.4 }}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={module.imageUrl}
|
||||||
|
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`}
|
||||||
|
/>
|
||||||
|
</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))`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{module.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
{/* Description */}
|
||||||
|
<p className="text-gray-700 mb-3 leading-relaxed">
|
||||||
|
{module.description}
|
||||||
|
</p>
|
||||||
|
<p className="text-gray-600 text-sm mb-6 leading-relaxed">
|
||||||
|
{module.subDescription}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* Features Grid */}
|
||||||
|
<div className="grid grid-cols-2 gap-3 mb-6">
|
||||||
|
{module.features.map((feature: ModuleFeature, idx: number) => (
|
||||||
|
<motion.div
|
||||||
|
key={idx}
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
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"
|
||||||
|
>
|
||||||
|
<feature.icon className={`w-4 h-4 ${module.accentColor}`} />
|
||||||
|
<span className="text-sm font-medium text-gray-700">
|
||||||
|
{feature.label}
|
||||||
|
</span>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 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`}
|
||||||
|
size="lg"
|
||||||
|
>
|
||||||
|
Learn More
|
||||||
|
<ArrowRight className="ml-2 w-5 h-5 group-hover:translate-x-1 transition-transform" />
|
||||||
|
</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"
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-5 h-5 text-white" />
|
||||||
|
</motion.div>
|
||||||
|
</CardContent>
|
||||||
|
|
||||||
|
{/* Decorative Elements */}
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
scale: isHovered ? 1.5 : 1,
|
||||||
|
opacity: isHovered ? 0.3 : 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`}
|
||||||
|
/>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
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 */}
|
||||||
|
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||||||
|
<motion.div
|
||||||
|
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"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
||||||
|
{/* Header */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-center mb-16"
|
||||||
|
>
|
||||||
|
<Badge className="mb-4 px-6 py-2 bg-purple-100 text-purple-700 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">
|
||||||
|
{home.module.title}{" "}
|
||||||
|
<span className="bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||||
|
Offers
|
||||||
|
</span>{" "}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
|
{home.module.subtitle}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Modules Grid */}
|
||||||
|
<div className="grid lg:grid-cols-3 gap-8">
|
||||||
|
{home.module.modules.map((module: Module, index: number) => (
|
||||||
|
<ModuleCard key={module.id} module={module} index={index} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bottom CTA Section */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
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">
|
||||||
|
<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>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
Start Free Trial
|
||||||
|
<Sparkles className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="border-2 border-white bg-white hover:bg-white/10"
|
||||||
|
>
|
||||||
|
Schedule Demo
|
||||||
|
<ArrowRight className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModulesSection;
|
||||||
@@ -30,7 +30,7 @@ const Testimonials = () => {
|
|||||||
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
<h2 className="text-4xl md:text-5xl font-bold mb-6">
|
||||||
Loved by{" "}
|
Loved by{" "}
|
||||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
Hiring Teams
|
Our Clients
|
||||||
</span>
|
</span>
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
|
|||||||
170
app/(public)/about/page.tsx
Normal file
170
app/(public)/about/page.tsx
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
"use client";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Users, Target, Lightbulb, ShieldCheck, Linkedin } from "lucide-react";
|
||||||
|
import Image from "next/image";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const leaders = [
|
||||||
|
{
|
||||||
|
name: "Amit Sharma",
|
||||||
|
role: "Founder & CEO",
|
||||||
|
image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
|
||||||
|
linkedin: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Neha Verma",
|
||||||
|
role: "Head of Product",
|
||||||
|
image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
|
||||||
|
linkedin: "#",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Rahul Mehta",
|
||||||
|
role: "CTO",
|
||||||
|
image: "https://images.unsplash.com/photo-1595152772835-219674b2a8a6?crop=faces&fit=crop&w=400&q=80",
|
||||||
|
linkedin: "#",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export default function AboutUs() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 text-gray-900">
|
||||||
|
|
||||||
|
{/* HERO */}
|
||||||
|
<section className="py-28 bg-gradient-to-r from-blue-600 to-purple-600 text-white text-center">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-5xl font-bold mb-6"
|
||||||
|
>
|
||||||
|
Empowering Businesses with Smart CRM Innovation
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-xl max-w-3xl mx-auto"
|
||||||
|
>
|
||||||
|
We help companies build stronger customer relationships through intelligent automation and seamless workflows.
|
||||||
|
</motion.p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* OUR MISSION / VISION */}
|
||||||
|
<section className="py-20 max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="bg-white p-10 rounded-3xl shadow-xl border"
|
||||||
|
>
|
||||||
|
<Target className="w-12 h-12 text-blue-600 mb-4" />
|
||||||
|
<h3 className="text-3xl font-semibold mb-3">Our Mission</h3>
|
||||||
|
<p className="text-gray-600 text-lg leading-relaxed">
|
||||||
|
To simplify customer management through powerful yet user-friendly CRM tools,
|
||||||
|
enabling businesses of every size to scale faster and smarter.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="bg-white p-10 rounded-3xl shadow-xl border"
|
||||||
|
>
|
||||||
|
<Lightbulb className="w-12 h-12 text-purple-600 mb-4" />
|
||||||
|
<h3 className="text-3xl font-semibold mb-3">Our Vision</h3>
|
||||||
|
<p className="text-gray-600 text-lg leading-relaxed">
|
||||||
|
To be a global leader in CRM innovation — transforming how teams connect,
|
||||||
|
collaborate and grow with their customers.
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* COMPANY STORY TIMELINE */}
|
||||||
|
<section className="py-24 bg-white">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">Our Journey</h2>
|
||||||
|
<p className="text-gray-600 text-lg max-w-3xl mx-auto">
|
||||||
|
From a small team with a big dream to a growing global technology partner.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative max-w-5xl mx-auto px-6">
|
||||||
|
<div className="absolute left-1/2 -ml-0.5 h-full border-l-2 border-blue-300"></div>
|
||||||
|
|
||||||
|
{[
|
||||||
|
{ year: "2021", text: "Founded with a mission to reinvent CRM efficiency." },
|
||||||
|
{ year: "2022", text: "Launched our first CRM suite for SMEs." },
|
||||||
|
{ year: "2023", text: "Expanded to enterprise CRM solutions across industries." },
|
||||||
|
{ year: "2024", text: "Serving customers globally with AI-powered CRM intelligence." },
|
||||||
|
].map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className={`mb-16 flex items-center gap-8 ${
|
||||||
|
i % 2 === 0 ? "flex-row" : "flex-row-reverse"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="bg-blue-600 text-white rounded-full w-16 h-16 flex items-center justify-center font-semibold text-xl shadow-2xl">
|
||||||
|
{item.year}
|
||||||
|
</div>
|
||||||
|
<p className="bg-gray-100 rounded-2xl p-6 shadow-md text-lg text-gray-700 max-w-md">
|
||||||
|
{item.text}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* LEADERSHIP SECTION */}
|
||||||
|
<section className="py-24 max-w-7xl mx-auto px-6">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<h2 className="text-4xl font-bold mb-3">Leadership Team</h2>
|
||||||
|
<p className="text-gray-600 text-lg">
|
||||||
|
Guiding our mission with innovation and excellence.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-12">
|
||||||
|
{leaders.map((leader, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={idx}
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
className="text-center bg-white p-6 rounded-2xl shadow-lg"
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
src={leader.image}
|
||||||
|
width={200}
|
||||||
|
height={200}
|
||||||
|
alt={leader.name}
|
||||||
|
className="rounded-full mx-auto mb-4 object-cover"
|
||||||
|
/>
|
||||||
|
<h3 className="text-xl font-semibold">{leader.name}</h3>
|
||||||
|
<p className="text-gray-500 mb-3">{leader.role}</p>
|
||||||
|
<Link
|
||||||
|
href={leader.linkedin}
|
||||||
|
className="inline-flex items-center gap-2 text-blue-600 hover:text-blue-800"
|
||||||
|
>
|
||||||
|
<Linkedin size={18} /> Connect
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<section className="py-24 bg-gradient-to-r from-purple-600 to-blue-600 text-center text-white">
|
||||||
|
<h2 className="text-4xl font-bold mb-4">We Grow Together</h2>
|
||||||
|
<p className="text-lg max-w-2xl mx-auto mb-8">
|
||||||
|
Become part of a story that’s transforming the future of CRM.
|
||||||
|
</p>
|
||||||
|
<Link
|
||||||
|
href="/careers"
|
||||||
|
className="bg-white text-blue-700 px-8 py-3 rounded-full text-lg font-semibold hover:shadow-xl transition"
|
||||||
|
>
|
||||||
|
Explore Careers
|
||||||
|
</Link>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
65
app/(public)/ats/_components/Benefits.tsx
Normal file
65
app/(public)/ats/_components/Benefits.tsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
CheckCircle,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { atsPageData } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Benefits Section Component
|
||||||
|
const BenefitsSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||||
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-12"
|
||||||
|
>
|
||||||
|
{atsPageData.benefits.title}
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-10">
|
||||||
|
<div className="space-y-6">
|
||||||
|
{atsPageData.benefits.leftColumn.map((benefit, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||||||
|
className="flex gap-4 items-start"
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" />
|
||||||
|
<p className="text-gray-700 text-lg">{benefit.text}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-6">
|
||||||
|
{atsPageData.benefits.rightColumn.map((benefit, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
whileInView={{ opacity: 1, x: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||||||
|
className="flex gap-4 items-start"
|
||||||
|
>
|
||||||
|
<CheckCircle className="w-6 h-6 text-blue-600 flex-shrink-0 mt-1" />
|
||||||
|
<p className="text-gray-700 text-lg">{benefit.text}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BenefitsSection
|
||||||
54
app/(public)/ats/_components/CTA.tsx
Normal file
54
app/(public)/ats/_components/CTA.tsx
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
ArrowRight,
|
||||||
|
Sparkles,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { atsPageData } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
// CTA Section Component
|
||||||
|
const CtaSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-gradient-to-br from-blue-600 via-purple-600 to-pink-600">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-white mb-6">
|
||||||
|
{atsPageData.cta.title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg md:text-xl text-white/90 mb-10 max-w-2xl mx-auto">
|
||||||
|
{atsPageData.cta.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="bg-white text-blue-700 hover:bg-gray-100 font-semibold px-8 py-6 text-lg shadow-xl"
|
||||||
|
>
|
||||||
|
{atsPageData.cta.primaryButton}
|
||||||
|
<Sparkles className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="border-2 border-white hover:bg-white/10 font-semibold px-8 py-6 text-lg"
|
||||||
|
>
|
||||||
|
{atsPageData.cta.secondaryButton}
|
||||||
|
<ArrowRight className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CtaSection
|
||||||
57
app/(public)/ats/_components/FAQ.tsx
Normal file
57
app/(public)/ats/_components/FAQ.tsx
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "@/components/ui/accordion";
|
||||||
|
import { atsPageData } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// FAQ Section Component
|
||||||
|
const FaqSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-white">
|
||||||
|
<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-12"
|
||||||
|
>
|
||||||
|
{atsPageData.faqs.title}
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: 0.2 }}
|
||||||
|
>
|
||||||
|
<Accordion type="single" collapsible className="space-y-4">
|
||||||
|
{atsPageData.faqs.items.map((faq, index) => (
|
||||||
|
<AccordionItem
|
||||||
|
key={index}
|
||||||
|
value={`item-${index}`}
|
||||||
|
className="bg-white border border-gray-200 rounded-xl px-6 shadow-sm hover:shadow-md transition-shadow"
|
||||||
|
>
|
||||||
|
<AccordionTrigger className="text-lg font-semibold text-gray-900 hover:text-blue-600 py-6">
|
||||||
|
{faq.question}
|
||||||
|
</AccordionTrigger>
|
||||||
|
<AccordionContent className="text-gray-600 pb-6">
|
||||||
|
{faq.answer}
|
||||||
|
</AccordionContent>
|
||||||
|
</AccordionItem>
|
||||||
|
))}
|
||||||
|
</Accordion>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FaqSection
|
||||||
51
app/(public)/ats/_components/Features.tsx
Normal file
51
app/(public)/ats/_components/Features.tsx
Normal file
@@ -0,0 +1,51 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { atsPageData } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Features Section Component
|
||||||
|
const FeaturesSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-white">
|
||||||
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-14"
|
||||||
|
>
|
||||||
|
{atsPageData.features.title}
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{atsPageData.features.items.map((feature, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.1, duration: 0.6 }}
|
||||||
|
whileHover={{ y: -8, scale: 1.02 }}
|
||||||
|
>
|
||||||
|
<Card className="h-full hover:shadow-xl transition-all duration-300 border-0 shadow-lg">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<div className="text-5xl mb-4">{feature.icon}</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-3 text-gray-900">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600">{feature.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FeaturesSection
|
||||||
81
app/(public)/ats/_components/Hero.tsx
Normal file
81
app/(public)/ats/_components/Hero.tsx
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import {
|
||||||
|
PlayCircle,
|
||||||
|
ArrowRight,
|
||||||
|
Sparkles,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { atsPageData } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const HeroSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-24 md:py-32 bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50 overflow-hidden">
|
||||||
|
{/* Background Animation */}
|
||||||
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
scale: [1, 1.2, 1],
|
||||||
|
rotate: [0, 90, 0],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 20, repeat: Infinity, ease: "linear" }}
|
||||||
|
className="absolute -top-1/2 -left-1/2 w-full h-full bg-blue-500/20 rounded-full blur-3xl"
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
animate={{
|
||||||
|
scale: [1.2, 1, 1.2],
|
||||||
|
rotate: [90, 0, 90],
|
||||||
|
}}
|
||||||
|
transition={{ duration: 25, repeat: Infinity, ease: "linear" }}
|
||||||
|
className="absolute -bottom-1/2 -right-1/2 w-full h-full bg-purple-500/20 rounded-full blur-3xl"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<Badge className="mb-6 px-6 py-2 bg-purple-100 text-purple-700 border-white/30 backdrop-blur-sm text-sm font-semibold">
|
||||||
|
<Sparkles className="w-4 h-4 mr-2 inline" />
|
||||||
|
{atsPageData.hero.badge}
|
||||||
|
</Badge>
|
||||||
|
|
||||||
|
<h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight mb-6 bg-gradient-to-r from-purple-600 via-pink-600 to-blue-600 bg-clip-text text-transparent">
|
||||||
|
{atsPageData.hero.title}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-lg md:text-xl opacity-90 max-w-3xl mx-auto mb-10">
|
||||||
|
{atsPageData.hero.subtitle}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="bg-white text-blue-700 hover:bg-gray-100 font-semibold px-8 py-6 text-lg shadow-xl"
|
||||||
|
>
|
||||||
|
{atsPageData.hero.primaryCta}
|
||||||
|
<ArrowRight className="ml-2 w-5 h-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
className="border-2 border-white hover:bg-white/10 font-semibold px-8 py-6 text-lg"
|
||||||
|
>
|
||||||
|
<PlayCircle className="mr-2 w-5 h-5" />
|
||||||
|
{atsPageData.hero.secondaryCta}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HeroSection
|
||||||
62
app/(public)/ats/_components/Overview.tsx
Normal file
62
app/(public)/ats/_components/Overview.tsx
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
Sparkles,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { atsPageData } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// Overview Section Component
|
||||||
|
const OverviewSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-white">
|
||||||
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ duration: 0.6 }}
|
||||||
|
className="text-center mb-12"
|
||||||
|
>
|
||||||
|
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
||||||
|
{atsPageData.overview.title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-lg text-gray-600 max-w-3xl mx-auto">
|
||||||
|
{atsPageData.overview.description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
{atsPageData.overview.items.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.2, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<Card className="h-full hover:shadow-xl transition-shadow duration-300 border-0 shadow-lg">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mb-6">
|
||||||
|
<Sparkles className="w-8 h-8 text-white" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-3 text-gray-900">
|
||||||
|
{item.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600">{item.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default OverviewSection
|
||||||
49
app/(public)/ats/_components/WorkFlow.tsx
Normal file
49
app/(public)/ats/_components/WorkFlow.tsx
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Card, CardContent } from "@/components/ui/card";
|
||||||
|
import { atsPageData } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
// Workflow Section Component
|
||||||
|
const WorkflowSection: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-20 bg-gradient-to-b from-gray-50 to-white">
|
||||||
|
<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-3xl md:text-4xl font-bold text-gray-900 text-center mb-14"
|
||||||
|
>
|
||||||
|
{atsPageData.workflow.title}
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{atsPageData.workflow.steps.map((step, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
transition={{ delay: index * 0.15, duration: 0.6 }}
|
||||||
|
>
|
||||||
|
<Card className="h-full hover:shadow-xl transition-shadow duration-300 border-0 shadow-lg text-center">
|
||||||
|
<CardContent className="p-8">
|
||||||
|
<div className="text-6xl mb-4">{step.emoji}</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-3 text-gray-900">
|
||||||
|
{step.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600">{step.description}</p>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default WorkflowSection
|
||||||
25
app/(public)/ats/page.tsx
Normal file
25
app/(public)/ats/page.tsx
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
import BenefitsSection from "./_components/Benefits";
|
||||||
|
import CtaSection from "./_components/CTA";
|
||||||
|
import FaqSection from "./_components/FAQ";
|
||||||
|
import FeaturesSection from "./_components/Features";
|
||||||
|
import HeroSection from "./_components/Hero";
|
||||||
|
import OverviewSection from "./_components/Overview";
|
||||||
|
import WorkflowSection from "./_components/WorkFlow";
|
||||||
|
|
||||||
|
|
||||||
|
// Main ATS Page Component
|
||||||
|
const ATSPage: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white">
|
||||||
|
<HeroSection />
|
||||||
|
<OverviewSection />
|
||||||
|
<BenefitsSection />
|
||||||
|
<FeaturesSection />
|
||||||
|
<WorkflowSection />
|
||||||
|
<FaqSection />
|
||||||
|
<CtaSection />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ATSPage;
|
||||||
133
app/(public)/blogs/page.tsx
Normal file
133
app/(public)/blogs/page.tsx
Normal file
@@ -0,0 +1,133 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Calendar, ArrowRight, User } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
const BLOGS = [
|
||||||
|
{
|
||||||
|
title: "Why CRM is Essential for Scaling Modern Businesses",
|
||||||
|
description:
|
||||||
|
"Discover how CRM solutions boost growth, streamline communication & maximise revenue.",
|
||||||
|
author: "Sandip Chowdhury",
|
||||||
|
date: "Dec 05, 2025",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1556155092-8707de31f9c4?w=800&q=80",
|
||||||
|
readTime: "5 min read",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "How Automation Improves Sales Team Productivity",
|
||||||
|
description:
|
||||||
|
"Learn why automation is becoming a must-have feature for sales operations.",
|
||||||
|
author: "Priya Sharma",
|
||||||
|
date: "Nov 28, 2025",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1581091226825-a6a2a5aee158?w=800&q=80",
|
||||||
|
readTime: "4 min read",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Top CRM Trends to Watch Out in 2026",
|
||||||
|
description:
|
||||||
|
"AI-driven CRMs, predictive analytics & more – see what the future holds.",
|
||||||
|
author: "Arjun Patel",
|
||||||
|
date: "Oct 15, 2025",
|
||||||
|
image:
|
||||||
|
"https://images.unsplash.com/photo-1533750349088-cd871a92f312?w=800&q=80",
|
||||||
|
readTime: "6 min read",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function BlogPage() {
|
||||||
|
return (
|
||||||
|
<main className="bg-white">
|
||||||
|
{/* HERO */}
|
||||||
|
<section className="py-24 px-6 text-center bg-gradient-to-b from-purple-600 via-blue-600 to-indigo-700 text-white">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-4xl md:text-6xl font-extrabold"
|
||||||
|
>
|
||||||
|
Insights & Resources for Your Growth
|
||||||
|
</motion.h1>
|
||||||
|
<p className="mt-4 text-lg opacity-90 max-w-2xl mx-auto">
|
||||||
|
Explore the latest blogs, guides, and articles to help your business scale smarter.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* Blog List */}
|
||||||
|
<section className="py-20 px-6 max-w-7xl mx-auto">
|
||||||
|
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||||
|
{BLOGS.map((blog, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="rounded-2xl overflow-hidden bg-white shadow-md hover:shadow-2xl transition-all duration-300 hover:-translate-y-2"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
src={blog.image}
|
||||||
|
alt={blog.title}
|
||||||
|
className="w-full h-52 object-cover"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="p-6">
|
||||||
|
<h3 className="text-lg font-bold text-gray-900">
|
||||||
|
{blog.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600 text-sm mt-2 line-clamp-2">
|
||||||
|
{blog.description}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 text-gray-500 text-xs mt-4">
|
||||||
|
<User className="w-4 h-4" />
|
||||||
|
<span>{blog.author}</span>
|
||||||
|
<span>•</span>
|
||||||
|
<Calendar className="w-4 h-4" />
|
||||||
|
<span>{blog.date}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-6 flex justify-between items-center">
|
||||||
|
<span className="text-xs text-purple-600 font-medium">
|
||||||
|
{blog.readTime}
|
||||||
|
</span>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="sm"
|
||||||
|
className="text-purple-700 border-purple-200 hover:bg-purple-100"
|
||||||
|
>
|
||||||
|
Read More
|
||||||
|
<ArrowRight className="ml-2 w-4 h-4" />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA */}
|
||||||
|
<section className="py-20 text-center bg-gray-50 px-6">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
className="text-3xl md:text-4xl font-bold text-gray-900"
|
||||||
|
>
|
||||||
|
Want More Industry Insights?
|
||||||
|
</motion.h2>
|
||||||
|
<p className="text-gray-600 max-w-2xl mx-auto mt-4">
|
||||||
|
Subscribe to our newsletter and stay updated with the latest trends.
|
||||||
|
</p>
|
||||||
|
<div className="mt-8">
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="bg-purple-600 hover:bg-purple-700 text-white text-lg px-10"
|
||||||
|
>
|
||||||
|
Subscribe Now
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
149
app/(public)/careers/page.tsx
Normal file
149
app/(public)/careers/page.tsx
Normal file
@@ -0,0 +1,149 @@
|
|||||||
|
"use client";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Briefcase, Users, Target, HeartHandshake, ArrowRight } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
const openRoles = [
|
||||||
|
{
|
||||||
|
title: "Frontend Developer",
|
||||||
|
department: "Engineering",
|
||||||
|
type: "Full Time",
|
||||||
|
location: "Remote / India",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Backend Developer",
|
||||||
|
department: "Engineering",
|
||||||
|
type: "Full Time",
|
||||||
|
location: "Remote",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Sales Executive",
|
||||||
|
department: "Sales & Marketing",
|
||||||
|
type: "Full Time",
|
||||||
|
location: "Kolkata, India",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "UI/UX Designer",
|
||||||
|
department: "Design",
|
||||||
|
type: "Full Time",
|
||||||
|
location: "Remote",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function Careers() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 text-gray-900">
|
||||||
|
|
||||||
|
{/* HERO */}
|
||||||
|
<section className="py-24 text-center bg-gradient-to-r from-blue-600 to-purple-600 text-white">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-5xl font-bold mb-6"
|
||||||
|
>
|
||||||
|
Build Your Future With Us
|
||||||
|
</motion.h1>
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-xl max-w-2xl mx-auto"
|
||||||
|
>
|
||||||
|
Join a passionate team shaping the future of CRM solutions across the globe.
|
||||||
|
</motion.p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CULTURE SECTION */}
|
||||||
|
<section className="py-20 max-w-7xl mx-auto px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold mb-4">Life at Our Company</h2>
|
||||||
|
<p className="text-gray-600 text-lg max-w-3xl mx-auto">
|
||||||
|
A culture built to encourage creativity, innovation, and collaboration.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-10">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
icon: <Users className="w-10 h-10 text-blue-600" />,
|
||||||
|
title: "Collaborative Team",
|
||||||
|
desc: "Work with talented individuals who uplift each other every day.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Target className="w-10 h-10 text-purple-600" />,
|
||||||
|
title: "Performance Driven",
|
||||||
|
desc: "We believe in rewarding effort, creativity & dedication.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <HeartHandshake className="w-10 h-10 text-pink-600" />,
|
||||||
|
title: "People First",
|
||||||
|
desc: "We focus on employee happiness, growth, and well-being.",
|
||||||
|
},
|
||||||
|
].map((item, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="bg-white p-8 rounded-2xl shadow-lg text-center"
|
||||||
|
>
|
||||||
|
<div className="mb-4 flex justify-center">{item.icon}</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2">{item.title}</h3>
|
||||||
|
<p className="text-gray-600">{item.desc}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* OPEN ROLES */}
|
||||||
|
<section className="py-20 bg-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-6">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold mb-3">Open Positions</h2>
|
||||||
|
<p className="text-gray-600 text-lg">
|
||||||
|
We’re looking for dreamers, doers & problem solvers.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-10">
|
||||||
|
{openRoles.map((role, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="p-6 rounded-xl shadow-md border bg-gray-50 hover:shadow-xl transition"
|
||||||
|
>
|
||||||
|
<h3 className="text-2xl font-semibold mb-2">{role.title}</h3>
|
||||||
|
<p className="text-gray-600 mb-4">{role.department}</p>
|
||||||
|
<div className="flex justify-between items-center text-sm text-gray-500 mb-6">
|
||||||
|
<span>{role.type}</span>
|
||||||
|
<span>{role.location}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/apply"
|
||||||
|
className="text-blue-600 font-medium flex items-center gap-2 hover:gap-3 transition-all"
|
||||||
|
>
|
||||||
|
Apply Now <ArrowRight className="w-4 h-4" />
|
||||||
|
</Link>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA SECTION */}
|
||||||
|
<section className="py-24 text-center bg-gradient-to-r from-purple-600 to-blue-600 text-white">
|
||||||
|
<h2 className="text-4xl font-bold mb-6">Didn’t find a suitable role?</h2>
|
||||||
|
<p className="text-xl max-w-2xl mx-auto mb-8">
|
||||||
|
We are always looking for great talent. Send us your resume!
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/contact"
|
||||||
|
className="bg-white text-purple-700 hover:text-purple-900 px-8 py-3 rounded-full text-lg font-semibold shadow-lg hover:shadow-xl transition"
|
||||||
|
>
|
||||||
|
Contact Us
|
||||||
|
</Link>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
88
app/(public)/contact/_components/BookDemo.tsx
Normal file
88
app/(public)/contact/_components/BookDemo.tsx
Normal file
@@ -0,0 +1,88 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { CalendarCheck, Send, CheckCircle } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
const features = [
|
||||||
|
"Personalized walkthrough of ATS, HRMS & CRM",
|
||||||
|
"Explore dashboards, workflows & automation",
|
||||||
|
"Pricing, setup & integration guidance",
|
||||||
|
"Ask anything tailored to your business needs",
|
||||||
|
];
|
||||||
|
|
||||||
|
const BookDemoSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-24 px-6 bg-white overflow-hidden">
|
||||||
|
{/* Background Glow */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 opacity-30 pointer-events-none"
|
||||||
|
animate={{ scale: [1, 1.05, 1] }}
|
||||||
|
transition={{ duration: 14, repeat: Infinity }}
|
||||||
|
>
|
||||||
|
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-5xl mx-auto text-center">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-4xl md:text-6xl font-extrabold text-gray-900"
|
||||||
|
>
|
||||||
|
🗓️ Book a Demo or{" "}
|
||||||
|
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
|
Consultation
|
||||||
|
</span>
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 10 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="mt-6 text-lg md:text-xl text-gray-600 max-w-3xl mx-auto"
|
||||||
|
>
|
||||||
|
Want to see how Winixco can improve hiring, HR operations or client
|
||||||
|
management? Get your free 1-on-1 demo — our team responds within 12 hours.
|
||||||
|
</motion.p>
|
||||||
|
|
||||||
|
{/* Feature List */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="grid gap-4 md:grid-cols-2 max-w-2xl mx-auto mt-10 text-left"
|
||||||
|
>
|
||||||
|
{features.map((item, index) => (
|
||||||
|
<div key={index} className="flex items-center gap-3">
|
||||||
|
<CheckCircle className="text-purple-600 w-6 h-6" />
|
||||||
|
<p className="text-gray-700 font-medium">{item}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* CTA Buttons */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="flex flex-col sm:flex-row gap-5 justify-center mt-12"
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-purple-600 text-white hover:bg-purple-700 hover:scale-105 transition-transform"
|
||||||
|
>
|
||||||
|
<CalendarCheck className="mr-2 w-5 h-5" />
|
||||||
|
Book My Demo
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
size="lg"
|
||||||
|
className="px-9 py-6 text-lg rounded-xl font-bold border-2 text-purple-700 hover:bg-purple-100 transition-all"
|
||||||
|
>
|
||||||
|
<Send className="mr-2 w-5 h-5" />
|
||||||
|
Contact Sales
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default BookDemoSection;
|
||||||
98
app/(public)/contact/_components/ChooseWinixco.tsx
Normal file
98
app/(public)/contact/_components/ChooseWinixco.tsx
Normal file
@@ -0,0 +1,98 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { CheckCircle, Rocket, Shield, Zap, MessageCircle, Calendar, Clock } from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
|
||||||
|
// Feature data
|
||||||
|
const features = [
|
||||||
|
{ text: "Fast and transparent customer support", icon: Rocket },
|
||||||
|
{ text: "Simple onboarding and quick implementation", icon: Zap },
|
||||||
|
{ text: "Scalable modules for startups to enterprises", icon: CheckCircle },
|
||||||
|
{ text: "Custom features built on request", icon: MessageCircle },
|
||||||
|
{ text: "Secure, cloud-based infrastructure", icon: Shield },
|
||||||
|
{ text: "Real-time analytics and reporting", icon: Clock }, // New feature added
|
||||||
|
];
|
||||||
|
|
||||||
|
|
||||||
|
const ChooseWinixco = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 px-6 bg-white">
|
||||||
|
<div className="max-w-6xl mx-auto text-center">
|
||||||
|
{/* Title */}
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 25 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="text-4xl md:text-5xl font-bold text-gray-900"
|
||||||
|
>
|
||||||
|
⭐ Why Businesses{" "}
|
||||||
|
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
|
Choose Winixco
|
||||||
|
</span>
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
{/* Feature Grid */}
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-14 justify-center">
|
||||||
|
{features.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="bg-white border border-gray-200 p-6 rounded-2xl shadow-sm hover:shadow-lg transition-all duration-300 flex items-center gap-4"
|
||||||
|
>
|
||||||
|
<item.icon className="w-8 h-8 text-purple-600" />
|
||||||
|
<p className="text-lg text-gray-700 font-medium">{item.text}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
// Contact CTA Section
|
||||||
|
const WeLoveToHearFromYou = () => {
|
||||||
|
return (
|
||||||
|
<section className="py-24 px-6 bg-white">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 25 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="max-w-4xl mx-auto text-center bg-white p-12 rounded-3xl shadow-xl"
|
||||||
|
>
|
||||||
|
{/* Title */}
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900">
|
||||||
|
📣 We’d Love to Hear From You
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p className="text-gray-600 mt-6 text-lg">
|
||||||
|
Your message helps us understand your business better — and deliver the right solution.
|
||||||
|
Let’s build something powerful for your organisation.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
{/* CTA Buttons */}
|
||||||
|
<div className="mt-10 flex flex-wrap justify-center gap-6">
|
||||||
|
<Link
|
||||||
|
href="#contact"
|
||||||
|
className="px-8 py-4 text-lg font-semibold rounded-xl bg-purple-600 hover:bg-purple-700 text-white transition-all hover:scale-105"
|
||||||
|
>
|
||||||
|
👉 Send Message
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="#book-demo"
|
||||||
|
className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-purple-600 text-purple-700 hover:bg-purple-50 transition-all hover:scale-105"
|
||||||
|
>
|
||||||
|
👉 Book a Demo
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export { ChooseWinixco, WeLoveToHearFromYou };
|
||||||
@@ -1,46 +1,77 @@
|
|||||||
"use client"
|
"use client";
|
||||||
import React from 'react';
|
import React from "react";
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from "framer-motion";
|
||||||
import { CONTACT_DATA } from '@/services/Constants';
|
import { CONTACT_DATA } from "@/services/Constants";
|
||||||
|
|
||||||
|
const GetInTouch: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-24 px-6 overflow-hidden">
|
||||||
|
|
||||||
|
{/* Background Gradient Blobs */}
|
||||||
// Get In Touch Component
|
|
||||||
const GetInTouch: React.FC = () => (
|
|
||||||
<motion.div
|
<motion.div
|
||||||
|
className="absolute inset-0 pointer-events-none opacity-30"
|
||||||
|
animate={{ scale: [1, 1.08, 1] }}
|
||||||
|
transition={{ duration: 18, repeat: Infinity }}
|
||||||
|
>
|
||||||
|
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-6xl mx-auto text-center">
|
||||||
|
{/* Title */}
|
||||||
|
<motion.h2
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 20 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
className="bg-gray-50 rounded-3xl p-8 md:p-12 mb-20"
|
className="text-4xl md:text-5xl font-extrabold text-gray-900"
|
||||||
>
|
>
|
||||||
<div className="text-center mb-12">
|
|
||||||
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
|
|
||||||
{CONTACT_DATA.getInTouch.title}
|
{CONTACT_DATA.getInTouch.title}
|
||||||
</h2>
|
<span className="block mt-2 bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
Let’s Connect
|
||||||
|
</span>
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<motion.p
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
viewport={{ once: true }}
|
||||||
|
className="mt-6 text-lg text-gray-600 max-w-2xl mx-auto"
|
||||||
|
>
|
||||||
{CONTACT_DATA.getInTouch.description}
|
{CONTACT_DATA.getInTouch.description}
|
||||||
</p>
|
</motion.p>
|
||||||
</div>
|
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
{/* Contact Methods */}
|
||||||
|
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-8 mt-16">
|
||||||
{CONTACT_DATA.getInTouch.methods.map((method, index) => (
|
{CONTACT_DATA.getInTouch.methods.map((method, index) => (
|
||||||
<motion.div
|
<motion.div
|
||||||
key={index}
|
key={index}
|
||||||
initial={{ opacity: 0, y: 20 }}
|
initial={{ opacity: 0, y: 25 }}
|
||||||
whileInView={{ opacity: 1, y: 0 }}
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
viewport={{ once: true }}
|
viewport={{ once: true }}
|
||||||
transition={{ delay: index * 0.1 }}
|
transition={{ delay: index * 0.15 }}
|
||||||
className="text-center"
|
whileHover={{ scale: 1.05 }}
|
||||||
|
className="p-8 bg-white/70 backdrop-blur-lg rounded-2xl shadow-lg hover:shadow-2xl transition-all cursor-pointer"
|
||||||
>
|
>
|
||||||
<div className={`w-16 h-16 mx-auto mb-4 bg-white rounded-2xl shadow-md flex items-center justify-center ${method.color}`}>
|
{/* Icon */}
|
||||||
<method.icon className="w-8 h-8" />
|
<div
|
||||||
|
className={`w-14 h-14 mx-auto mb-5 rounded-xl flex items-center justify-center shadow-md ${method.color} `}
|
||||||
|
>
|
||||||
|
<method.icon className="w-7 h-7" />
|
||||||
</div>
|
</div>
|
||||||
<h3 className="text-xl font-bold text-gray-900 mb-2">{method.title}</h3>
|
|
||||||
|
<h3 className="text-xl font-bold text-gray-900 mb-2">
|
||||||
|
{method.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
<p className="text-gray-600 text-sm mb-2">{method.description}</p>
|
<p className="text-gray-600 text-sm mb-2">{method.description}</p>
|
||||||
<p className={`font-semibold ${method.color}`}>{method.contact}</p>
|
|
||||||
|
<p className="font-semibold text-purple-700">{method.contact}</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default GetInTouch
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GetInTouch;
|
||||||
@@ -2,30 +2,46 @@
|
|||||||
import React from "react";
|
import React from "react";
|
||||||
import { motion } from "framer-motion";
|
import { motion } from "framer-motion";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { Badge } from "@/components/ui/badge";
|
||||||
import { CONTACT_DATA } from "@/services/Constants";
|
|
||||||
|
|
||||||
const HeroSection: React.FC = () => (
|
const HeroSection: React.FC = () => (
|
||||||
|
<section className="relative overflow-hidden py-24">
|
||||||
|
{/* Animated Background Glow */}
|
||||||
<motion.div
|
<motion.div
|
||||||
initial={{ opacity: 0, y: 20 }}
|
className="absolute inset-0 opacity-20 pointer-events-none"
|
||||||
animate={{ opacity: 1, y: 0 }}
|
animate={{ scale: [1, 1.05, 1] }}
|
||||||
className="text-center mb-16 mt-10"
|
transition={{ duration: 10, repeat: Infinity }}
|
||||||
>
|
>
|
||||||
<Badge className="mb-4 px-4 py-2 bg-purple-100 text-purple-700">
|
<div className="absolute w-96 h-96 bg-purple-400 blur-3xl rounded-full -top-10 -left-10"></div>
|
||||||
{CONTACT_DATA.hero.badge}
|
<div className="absolute w-80 h-80 bg-pink-400 blur-3xl rounded-full bottom-0 right-0"></div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="relative z-10 text-center px-6 max-w-4xl mx-auto"
|
||||||
|
>
|
||||||
|
<Badge className="mb-5 px-6 py-3 bg-purple-100 text-purple-700 tracking-wide">
|
||||||
|
#1 CUSTOMER SUPPORT
|
||||||
</Badge>
|
</Badge>
|
||||||
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
|
|
||||||
{CONTACT_DATA.hero.title}{" "}
|
<h1 className="text-4xl md:text-6xl font-extrabold text-gray-900 leading-tight">
|
||||||
|
We’re Here to Help You{" "}
|
||||||
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
us
|
Transform Your Business
|
||||||
</span>
|
</span>
|
||||||
</h1>
|
</h1>
|
||||||
<p className="text-lg md:text-xl text-gray-600 mb-2 max-w-3xl mx-auto">
|
|
||||||
{CONTACT_DATA.hero.description}
|
<p className="text-lg md:text-xl mt-6 text-gray-600 max-w-3xl mx-auto leading-relaxed">
|
||||||
|
Whether you're exploring our ATS, HRMS, or CRM solutions — or need
|
||||||
|
support for your existing account — our team is ready with fast, expert guidance.
|
||||||
</p>
|
</p>
|
||||||
<p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
|
|
||||||
{CONTACT_DATA.hero.subtitle}
|
<p className="text-lg md:text-xl mt-3 text-gray-700 max-w-3xl mx-auto font-medium">
|
||||||
|
Let’s Connect & Grow Together.
|
||||||
</p>
|
</p>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
</section>
|
||||||
);
|
);
|
||||||
|
|
||||||
export default HeroSection;
|
export default HeroSection;
|
||||||
|
|||||||
72
app/(public)/contact/_components/PartnerWithUs.tsx
Normal file
72
app/(public)/contact/_components/PartnerWithUs.tsx
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { BadgeCheck, Handshake, Globe, Layers } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
const partnerships = [
|
||||||
|
"White-label & reseller partnership",
|
||||||
|
"Revenue-sharing models",
|
||||||
|
"API-based integrations",
|
||||||
|
"Custom enterprise solutions",
|
||||||
|
];
|
||||||
|
|
||||||
|
const PartnerWithUsSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-24 px-6 bg-white overflow-hidden">
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 opacity-20 pointer-events-none"
|
||||||
|
animate={{ scale: [1, 1.08, 1] }}
|
||||||
|
transition={{ duration: 14, repeat: Infinity }}
|
||||||
|
>
|
||||||
|
<div className="absolute w-96 h-96 bg-purple-300 blur-[120px] rounded-full -top-10 -left-10"></div>
|
||||||
|
<div className="absolute w-80 h-80 bg-pink-400 blur-[130px] rounded-full bottom-0 right-0"></div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-6xl mx-auto text-center">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 25 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-4xl md:text-5xl font-extrabold text-gray-900"
|
||||||
|
>
|
||||||
|
🤝 Partner With{" "}
|
||||||
|
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
|
Winixco
|
||||||
|
</span>
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Winixco empowers recruitment agencies, IT firms, HR consultants and
|
||||||
|
SaaS resellers to expand their service offerings & grow revenue.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto mt-10 text-left">
|
||||||
|
{partnerships.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, x: 20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="flex items-center gap-3"
|
||||||
|
>
|
||||||
|
<BadgeCheck className="text-purple-600 w-6 h-6" />
|
||||||
|
<p className="text-gray-700 font-medium">{item}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
className="mt-12"
|
||||||
|
>
|
||||||
|
<Button className="px-10 py-5 text-lg bg-purple-600 text-white font-bold rounded-xl shadow-lg hover:bg-purple-700 hover:scale-105 transition-all">
|
||||||
|
Become a Partner
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PartnerWithUsSection;
|
||||||
73
app/(public)/contact/_components/TechnicalSupport.tsx
Normal file
73
app/(public)/contact/_components/TechnicalSupport.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
"use client";
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Wrench, Clock, Zap, HelpCircle } from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
const supportPoints = [
|
||||||
|
"ATS, HRMS & CRM module setup guidance",
|
||||||
|
"Integrations including email, SSO & APIs",
|
||||||
|
"Troubleshooting & bug resolution",
|
||||||
|
"Custom workflow or feature implementation",
|
||||||
|
];
|
||||||
|
|
||||||
|
const TechnicalSupportSection = () => {
|
||||||
|
return (
|
||||||
|
<section className="relative py-24 px-6 bg-white overflow-hidden">
|
||||||
|
{/* Glow */}
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 opacity-25 pointer-events-none"
|
||||||
|
animate={{ scale: [1, 1.05, 1] }}
|
||||||
|
transition={{ duration: 14, repeat: Infinity }}
|
||||||
|
>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="relative z-10 max-w-6xl mx-auto">
|
||||||
|
<div className="text-center">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, y: 25 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-4xl md:text-5xl font-extrabold text-gray-900"
|
||||||
|
>
|
||||||
|
🛠️ Technical Support &{" "}
|
||||||
|
<span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
|
||||||
|
Assistance
|
||||||
|
</span>
|
||||||
|
</motion.h2>
|
||||||
|
|
||||||
|
<p className="mt-6 text-lg text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Already using Winixco? We’re here to ensure everything works seamlessly
|
||||||
|
— fast responses & expert support guaranteed.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Support Features */}
|
||||||
|
<div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto mt-12">
|
||||||
|
{supportPoints.map((item, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
initial={{ opacity: 0, x: -20 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: index * 0.1 }}
|
||||||
|
className="flex items-center gap-3"
|
||||||
|
>
|
||||||
|
<HelpCircle className="text-purple-600 w-6 h-6" />
|
||||||
|
<p className="text-gray-700 font-medium">{item}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="text-center mt-12">
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="px-10 py-5 text-lg font-bold text-purple-700 border-2 rounded-xl hover:bg-purple-100 transition-all"
|
||||||
|
>
|
||||||
|
Contact Support
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TechnicalSupportSection;
|
||||||
@@ -1,29 +1,15 @@
|
|||||||
"use client"
|
"use client"
|
||||||
import React, { useState } from 'react';
|
import React from 'react';
|
||||||
import { motion } from 'framer-motion';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Card, CardContent } from '@/components/ui/card';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Textarea } from '@/components/ui/textarea';
|
|
||||||
import {
|
|
||||||
Headphones,
|
|
||||||
LifeBuoy,
|
|
||||||
Mail,
|
|
||||||
MessageSquare,
|
|
||||||
Phone,
|
|
||||||
MapPin,
|
|
||||||
Send,
|
|
||||||
CheckCircle,
|
|
||||||
Users,
|
|
||||||
Star
|
|
||||||
} from 'lucide-react';
|
|
||||||
import HeroSection from './_components/HeroSection';
|
import HeroSection from './_components/HeroSection';
|
||||||
import QuickActions from './_components/QuickActions';
|
import QuickActions from './_components/QuickActions';
|
||||||
import GetInTouch from './_components/GetInTouch';
|
import GetInTouch from './_components/GetInTouch';
|
||||||
import GlobalOffices from './_components/GlobalOffices';
|
import GlobalOffices from './_components/GlobalOffices';
|
||||||
import ContactForm from './_components/ContactForm';
|
import ContactForm from './_components/ContactForm';
|
||||||
import HappyCustomers from './_components/HappyCustomers';
|
import HappyCustomers from './_components/HappyCustomers';
|
||||||
|
import BookDemoSection from './_components/BookDemo';
|
||||||
|
import PartnerWithUsSection from './_components/PartnerWithUs';
|
||||||
|
import TechnicalSupportSection from './_components/TechnicalSupport';
|
||||||
|
import { ChooseWinixco, WeLoveToHearFromYou } from './_components/ChooseWinixco';
|
||||||
|
|
||||||
// Main Contact Page Component
|
// Main Contact Page Component
|
||||||
export default function ContactUsPage() {
|
export default function ContactUsPage() {
|
||||||
@@ -31,10 +17,13 @@ export default function ContactUsPage() {
|
|||||||
<div className="min-h-screen bg-white">
|
<div className="min-h-screen bg-white">
|
||||||
<div className="px-4 sm:px-4 lg:px-10 py-16 md:py-24">
|
<div className="px-4 sm:px-4 lg:px-10 py-16 md:py-24">
|
||||||
<HeroSection />
|
<HeroSection />
|
||||||
<QuickActions />
|
|
||||||
<GetInTouch />
|
<GetInTouch />
|
||||||
<GlobalOffices />
|
<BookDemoSection />
|
||||||
|
<PartnerWithUsSection />
|
||||||
|
<TechnicalSupportSection />
|
||||||
<ContactForm />
|
<ContactForm />
|
||||||
|
<ChooseWinixco />
|
||||||
|
<WeLoveToHearFromYou />
|
||||||
<HappyCustomers />
|
<HappyCustomers />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
68
app/(public)/crm/_components/Advantages.tsx
Normal file
68
app/(public)/crm/_components/Advantages.tsx
Normal file
@@ -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
|
||||||
75
app/(public)/crm/_components/CRMAnalytics.tsx
Normal file
75
app/(public)/crm/_components/CRMAnalytics.tsx
Normal file
@@ -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;
|
||||||
67
app/(public)/crm/_components/FAQ.tsx
Normal file
67
app/(public)/crm/_components/FAQ.tsx
Normal file
@@ -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
|
||||||
69
app/(public)/crm/_components/FinalCTA.tsx
Normal file
69
app/(public)/crm/_components/FinalCTA.tsx
Normal file
@@ -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
|
||||||
108
app/(public)/crm/_components/Hero.tsx
Normal file
108
app/(public)/crm/_components/Hero.tsx
Normal file
@@ -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
|
||||||
73
app/(public)/crm/_components/Modules.tsx
Normal file
73
app/(public)/crm/_components/Modules.tsx
Normal file
@@ -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;
|
||||||
30
app/(public)/crm/_components/Value.tsx
Normal file
30
app/(public)/crm/_components/Value.tsx
Normal file
@@ -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
|
||||||
77
app/(public)/crm/_components/WorkFlow.tsx
Normal file
77
app/(public)/crm/_components/WorkFlow.tsx
Normal file
@@ -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
|
||||||
26
app/(public)/crm/page.tsx
Normal file
26
app/(public)/crm/page.tsx
Normal file
@@ -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;
|
||||||
122
app/(public)/features/page.tsx
Normal file
122
app/(public)/features/page.tsx
Normal file
@@ -0,0 +1,122 @@
|
|||||||
|
"use client";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import {
|
||||||
|
Sparkles,
|
||||||
|
Layers,
|
||||||
|
BarChart3,
|
||||||
|
Users,
|
||||||
|
CheckCircle2,
|
||||||
|
ShieldCheck,
|
||||||
|
Workflow,
|
||||||
|
LineChart,
|
||||||
|
WorkflowIcon,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
const FEATURES_DATA = [
|
||||||
|
{
|
||||||
|
icon: Users,
|
||||||
|
title: "Smart Candidate Management",
|
||||||
|
description:
|
||||||
|
"Track candidates effortlessly with pipeline stages, auto tagging & resume parsing.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: Layers,
|
||||||
|
title: "Unified ATS + CRM Platform",
|
||||||
|
description:
|
||||||
|
"Manage hiring, leads & clients under one powerful and connected workspace.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: CheckCircle2,
|
||||||
|
title: "Automated Workflows",
|
||||||
|
description:
|
||||||
|
"Reduce manual tasks with automated approvals, reminders & email triggers.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: WorkflowIcon,
|
||||||
|
title: "Task & Team Collaboration",
|
||||||
|
description:
|
||||||
|
"Assign tasks, manage roles, and collaborate with real-time updates.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: ShieldCheck,
|
||||||
|
title: "Role-Based Access",
|
||||||
|
description:
|
||||||
|
"Secure & compliant access controls to protect sensitive data.",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: BarChart3,
|
||||||
|
title: "Analytics & Insights",
|
||||||
|
description:
|
||||||
|
"Get real-time dashboards for hiring performance and revenue growth.",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function FeaturesPage() {
|
||||||
|
return (
|
||||||
|
<main className="bg-white">
|
||||||
|
{/* HERO */}
|
||||||
|
<section className="py-24 text-center px-6 bg-gradient-to-b from-white to-blue-50">
|
||||||
|
<motion.h1
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
className="text-4xl md:text-6xl font-extrabold text-gray-900"
|
||||||
|
>
|
||||||
|
Powerful Features to Turbocharge Your{" "}
|
||||||
|
<span className="bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
|
||||||
|
Hiring & CRM
|
||||||
|
</span>
|
||||||
|
</motion.h1>
|
||||||
|
<p className="mt-4 text-lg text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Everything you need to streamline recruitment, manage clients and
|
||||||
|
scale your business — all in one platform.
|
||||||
|
</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* FEATURE GRID */}
|
||||||
|
<section className="py-20 px-6 max-w-7xl mx-auto">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
whileInView={{ opacity: 1 }}
|
||||||
|
className="grid sm:grid-cols-2 lg:grid-cols-3 gap-10"
|
||||||
|
>
|
||||||
|
{FEATURES_DATA.map((feature, i) => (
|
||||||
|
<motion.div
|
||||||
|
key={i}
|
||||||
|
initial={{ opacity: 0, y: 30 }}
|
||||||
|
whileInView={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ delay: i * 0.1 }}
|
||||||
|
className="p-8 bg-white rounded-3xl border shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-2"
|
||||||
|
>
|
||||||
|
<div className="w-14 h-14 rounded-xl bg-gradient-to-br from-blue-500 to-purple-600 text-white flex items-center justify-center shadow-md mb-5">
|
||||||
|
<feature.icon className="w-7 h-7" />
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
||||||
|
{feature.title}
|
||||||
|
</h3>
|
||||||
|
<p className="text-gray-600">{feature.description}</p>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</motion.div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{/* CTA STRIP */}
|
||||||
|
<section className="py-20 bg-gradient-to-r from-blue-700 to-purple-700 text-white text-center px-6">
|
||||||
|
<motion.h2
|
||||||
|
initial={{ opacity: 0, scale: 0.95 }}
|
||||||
|
whileInView={{ opacity: 1, scale: 1 }}
|
||||||
|
className="text-3xl md:text-4xl font-bold mb-4"
|
||||||
|
>
|
||||||
|
Experience The Future of Hiring & Client Management
|
||||||
|
</motion.h2>
|
||||||
|
<p className="text-lg max-w-2xl mx-auto opacity-90 mb-8">
|
||||||
|
Try Winixco now and transform the way your business grows.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<Button size="lg" className="text-lg bg-white text-blue-700 hover:bg-blue-100">
|
||||||
|
Book a Live Demo
|
||||||
|
</Button>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
}
|
||||||
69
app/(public)/hrms/_components/Advantages.tsx
Normal file
69
app/(public)/hrms/_components/Advantages.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
"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 { hrms } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const HRMSAdvantages: 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 HRMS
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Transform your HR operations with cutting-edge automation and
|
||||||
|
intelligence
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{hrms.HRMS_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 HRMSAdvantages
|
||||||
67
app/(public)/hrms/_components/FAQ.tsx
Normal file
67
app/(public)/hrms/_components/FAQ.tsx
Normal file
@@ -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 { 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 HRMS platform
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<Accordion type="single" collapsible className="space-y-4">
|
||||||
|
{hrms.HRMS_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
|
||||||
69
app/(public)/hrms/_components/FinalCTA.tsx
Normal file
69
app/(public)/hrms/_components/FinalCTA.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { hrms } 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"
|
||||||
|
>
|
||||||
|
{hrms.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"
|
||||||
|
>
|
||||||
|
{hrms.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"
|
||||||
|
>
|
||||||
|
{hrms.FINAL_CTA.ctaText}
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FinalCTA
|
||||||
77
app/(public)/hrms/_components/HRAnalytics.tsx
Normal file
77
app/(public)/hrms/_components/HRAnalytics.tsx
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import {
|
||||||
|
BarChart3,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { hrms } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const HRAnalytics: 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">
|
||||||
|
HR Analytics & Insights
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-blue-100 max-w-3xl mx-auto">
|
||||||
|
Real-time data that drives better HR decisions
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||||
|
{hrms.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 HRAnalytics
|
||||||
108
app/(public)/hrms/_components/Hero.tsx
Normal file
108
app/(public)/hrms/_components/Hero.tsx
Normal file
@@ -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 { hrms } from "@/services/Constants";
|
||||||
|
|
||||||
|
|
||||||
|
// Components
|
||||||
|
const HRMSHero: 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 HRMS Platform
|
||||||
|
</Badge>
|
||||||
|
|
||||||
|
<h1 className="text-5xl md:text-6xl lg:text-7xl 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">
|
||||||
|
Modern HRMS
|
||||||
|
</span>
|
||||||
|
<br />
|
||||||
|
<span className="text-gray-900">Designed for Tomorrow</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<p className="text-xl text-gray-600 mb-8 leading-relaxed">
|
||||||
|
{hrms.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"
|
||||||
|
>
|
||||||
|
{hrms.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" /> {hrms.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={hrms.hero.heroImage}
|
||||||
|
alt="HRMS 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">10K+</div>
|
||||||
|
<div className="text-sm text-gray-600">Active Users</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HRMSHero
|
||||||
73
app/(public)/hrms/_components/Modules.tsx
Normal file
73
app/(public)/hrms/_components/Modules.tsx
Normal file
@@ -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 { hrms } 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 Modules
|
||||||
|
</Badge>
|
||||||
|
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||||||
|
HRMS{" "}
|
||||||
|
<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">
|
||||||
|
Comprehensive HR management tools to streamline every aspect of your
|
||||||
|
workforce operations
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
|
{hrms.HRMS_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
|
||||||
30
app/(public)/hrms/_components/Value.tsx
Normal file
30
app/(public)/hrms/_components/Value.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { 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">
|
||||||
|
{hrms.VALUE_PROPOSITION.title}
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
|
||||||
|
{hrms.VALUE_PROPOSITION.description}
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ValueProposition
|
||||||
77
app/(public)/hrms/_components/WorkFlow.tsx
Normal file
77
app/(public)/hrms/_components/WorkFlow.tsx
Normal file
@@ -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 { hrms } 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">
|
||||||
|
HRMS Works
|
||||||
|
</span>
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Four simple steps to revolutionize your HR management
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||||
|
{hrms.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 < hrms.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
|
||||||
26
app/(public)/hrms/page.tsx
Normal file
26
app/(public)/hrms/page.tsx
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
import HRMSAdvantages from "./_components/Advantages";
|
||||||
|
import FAQSection from "./_components/FAQ";
|
||||||
|
import FinalCTA from "./_components/FinalCTA";
|
||||||
|
import HRMSHero from "./_components/Hero";
|
||||||
|
import HRAnalytics from "./_components/HRAnalytics";
|
||||||
|
import ModulesOverview from "./_components/Modules";
|
||||||
|
import ValueProposition from "./_components/Value";
|
||||||
|
import WorkflowProcess from "./_components/WorkFlow";
|
||||||
|
|
||||||
|
// Main ATS Page Component
|
||||||
|
const HRMSPage: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-white">
|
||||||
|
<HRMSHero />
|
||||||
|
<ValueProposition />
|
||||||
|
<ModulesOverview />
|
||||||
|
<HRMSAdvantages />
|
||||||
|
<WorkflowProcess />
|
||||||
|
<HRAnalytics />
|
||||||
|
<FAQSection />
|
||||||
|
<FinalCTA />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HRMSPage;
|
||||||
@@ -10,6 +10,8 @@ import Pricing from "./_homeComponents/Pricing";
|
|||||||
import FAQ from "./_homeComponents/FAQ";
|
import FAQ from "./_homeComponents/FAQ";
|
||||||
import CTA from "./_homeComponents/CTA";
|
import CTA from "./_homeComponents/CTA";
|
||||||
import AboutUs from "./_homeComponents/About";
|
import AboutUs from "./_homeComponents/About";
|
||||||
|
import ModulesSection from "./_homeComponents/Modules";
|
||||||
|
import HowItWorks from "./_homeComponents/HowItWorks";
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
@@ -18,9 +20,11 @@ export default function Page() {
|
|||||||
<CompanySlider />
|
<CompanySlider />
|
||||||
<Features />
|
<Features />
|
||||||
<AboutUs />
|
<AboutUs />
|
||||||
|
<ModulesSection />
|
||||||
<Benefits />
|
<Benefits />
|
||||||
<Testimonials />
|
<Testimonials />
|
||||||
<Pricing />
|
<Pricing />
|
||||||
|
<HowItWorks />
|
||||||
<FAQ />
|
<FAQ />
|
||||||
<CTA />
|
<CTA />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
202
ats.html
Normal file
202
ats.html
Normal file
@@ -0,0 +1,202 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Applicant Tracking System - Winixco</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-gray-50 text-gray-800">
|
||||||
|
|
||||||
|
<!-- HERO SECTION -->
|
||||||
|
<section class="py-24 bg-gradient-to-br from-blue-600 to-blue-800 text-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center">
|
||||||
|
<h1 class="text-5xl font-extrabold leading-tight">Modern Applicant Tracking System</h1>
|
||||||
|
<p class="mt-4 text-lg opacity-90">
|
||||||
|
Streamline hiring, automate workflows, and find qualified candidates faster with our AI-powered ATS.
|
||||||
|
</p>
|
||||||
|
<a href="#demo"
|
||||||
|
class="mt-6 inline-block bg-white text-blue-700 font-semibold px-8 py-3 rounded-full shadow hover:bg-gray-100 transition">
|
||||||
|
Book a Free Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- MODULE OVERVIEW -->
|
||||||
|
<section class="py-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center">What This ATS Gives You</h2>
|
||||||
|
<p class="mt-4 text-center text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Winixco ATS helps recruiters and HR teams manage job openings, track applicants,
|
||||||
|
collaborate with hiring managers, and automate end-to-end hiring workflows.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8 mt-12">
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">AI-Powered Hiring</h3>
|
||||||
|
<p class="mt-2 text-gray-600">Save time with automated resume parsing and smart matching.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">Centralized Database</h3>
|
||||||
|
<p class="mt-2 text-gray-600">Store, manage, and search candidates effortlessly.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">Real-time Collaboration</h3>
|
||||||
|
<p class="mt-2 text-gray-600">Share feedback and updates across your recruitment team.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- KEY POINTS -->
|
||||||
|
<section class="py-20 bg-gray-100">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center">Why Companies Choose Winixco ATS</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 gap-10 mt-12">
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<span class="text-blue-600 text-2xl">✔</span>
|
||||||
|
<p>Reduce manual hiring work by up to 70% with automation.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<span class="text-blue-600 text-2xl">✔</span>
|
||||||
|
<p>Get highly accurate candidate matches using AI.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<span class="text-blue-600 text-2xl">✔</span>
|
||||||
|
<p>Collaborate effectively using notes, stages, and scoring.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="space-y-4">
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<span class="text-blue-600 text-2xl">✔</span>
|
||||||
|
<p>Built for teams, agencies, and growing companies.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<span class="text-blue-600 text-2xl">✔</span>
|
||||||
|
<p>Fast, clean, secure, and mobile-friendly UI.</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-4 items-start">
|
||||||
|
<span class="text-blue-600 text-2xl">✔</span>
|
||||||
|
<p>Powerful reporting & analytics dashboards.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CORE FEATURES -->
|
||||||
|
<section class="py-20">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center">Core Features & Benefits</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-10 mt-14">
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">🤖 AI Resume Parsing</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Extract skills, experience, job titles & contact details automatically.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">📂 Pipeline Stages</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Move candidates across New → Shortlisted → Interview → Selected.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">👥 Team Collaboration</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Share candidate updates, feedback, notes, and evaluations.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">⚙️ Workflow Automation</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Automate follow-ups, reminders, and status updates.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">📩 Email + WhatsApp</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Send messages directly to candidates from one dashboard.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white shadow rounded-3xl">
|
||||||
|
<h3 class="font-semibold text-xl">📊 Analytics & Reports</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Track hiring performance, job efficiency, and recruiter KPIs.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- HOW IT WORKS -->
|
||||||
|
<section class="py-20 bg-gray-100">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center">How It Works</h2>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-4 gap-8 mt-14">
|
||||||
|
|
||||||
|
<div class="text-center p-6 bg-white shadow rounded-3xl">
|
||||||
|
<div class="text-4xl">1️⃣</div>
|
||||||
|
<h3 class="font-semibold mt-3">Create Job</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Post job with required skills & description.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center p-6 bg-white shadow rounded-3xl">
|
||||||
|
<div class="text-4xl">2️⃣</div>
|
||||||
|
<h3 class="font-semibold mt-3">Collect Candidates</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Upload CVs or get direct applications.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center p-6 bg-white shadow rounded-3xl">
|
||||||
|
<div class="text-4xl">3️⃣</div>
|
||||||
|
<h3 class="font-semibold mt-3">Shortlist & Interview</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Move through stages and collect feedback.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="text-center p-6 bg-white shadow rounded-3xl">
|
||||||
|
<div class="text-4xl">4️⃣</div>
|
||||||
|
<h3 class="font-semibold mt-3">Hire & Close</h3>
|
||||||
|
<p class="text-gray-600 mt-2">Select the best candidate and close the job.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section class="py-20">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl font-bold text-gray-900 text-center">Frequently Asked Questions</h2>
|
||||||
|
|
||||||
|
<div class="mt-12 space-y-6">
|
||||||
|
|
||||||
|
<details class="p-6 bg-white shadow rounded-xl">
|
||||||
|
<summary class="font-semibold text-lg cursor-pointer">What is an ATS?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">An Applicant Tracking System helps organizations manage hiring end-to-end.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="p-6 bg-white shadow rounded-xl">
|
||||||
|
<summary class="font-semibold text-lg cursor-pointer">Can I use this ATS for multiple companies?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes, if you enable multi-company access for agencies or franchises.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="p-6 bg-white shadow rounded-xl">
|
||||||
|
<summary class="font-semibold text-lg cursor-pointer">Does it support email and WhatsApp?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes, you can communicate directly with candidates from the dashboard.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="p-6 bg-white shadow rounded-xl">
|
||||||
|
<summary class="font-semibold text-lg cursor-pointer">Is resume parsing automatic?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes, uploaded CVs are auto-scanned and structured into candidate profiles.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
236
crp.html
Normal file
236
crp.html
Normal file
@@ -0,0 +1,236 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>CRM – Winixco</title>
|
||||||
|
<script src="https://cdn.tailwindcss.com"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-gray-50 text-gray-900">
|
||||||
|
|
||||||
|
<!-- HERO -->
|
||||||
|
<section class="py-24 bg-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
|
||||||
|
A Powerful CRM to Manage Leads, Customers & Sales Growth
|
||||||
|
</h1>
|
||||||
|
<p class="mt-6 text-lg text-gray-600">
|
||||||
|
Track leads, manage pipelines, automate follow-ups, handle customer communication and close deals faster — all from one smart CRM system.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="mt-10 flex gap-4">
|
||||||
|
<a href="#" class="bg-blue-600 text-white px-8 py-3 rounded-xl text-lg font-semibold hover:bg-blue-700">
|
||||||
|
Book a Demo
|
||||||
|
</a>
|
||||||
|
<a href="#" class="border border-gray-400 px-8 py-3 rounded-xl text-lg font-semibold hover:border-black">
|
||||||
|
View Pricing
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<img src="https://images.unsplash.com/photo-1560264280-88b68371db39"
|
||||||
|
class="rounded-2xl shadow-xl">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- VALUE PROPOSITION -->
|
||||||
|
<section class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6 text-center">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold">Your Entire Customer Journey in One Dashboard</h2>
|
||||||
|
<p class="mt-4 text-gray-600 max-w-3xl mx-auto">
|
||||||
|
Automate lead capturing, follow-ups, sales tracking, and team collaboration with a CRM designed to scale with your business.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- MODULES OVERVIEW -->
|
||||||
|
<section class="py-20 bg-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
|
||||||
|
<h3 class="text-2xl md:text-3xl font-bold mb-12">CRM Modules Overview</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-3 gap-8">
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Lead Management</h4>
|
||||||
|
<p class="text-gray-600">Capture, tag, assign and track leads from multiple sources.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Sales Pipeline</h4>
|
||||||
|
<p class="text-gray-600">Move leads through deal stages like New, Follow-up, Meeting, Closed.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Customer Database</h4>
|
||||||
|
<p class="text-gray-600">Store all client profiles, communication history, files & notes.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Task & Follow-ups</h4>
|
||||||
|
<p class="text-gray-600">Automated reminders for calls, meetings and follow-ups.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Quotation & Invoicing</h4>
|
||||||
|
<p class="text-gray-600">Generate proposals, estimates, and invoices instantly.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-8 bg-gray-50 rounded-2xl hover:bg-gray-100 transition">
|
||||||
|
<h4 class="text-xl font-semibold mb-2">Reports & Analytics</h4>
|
||||||
|
<p class="text-gray-600">Sales performance, lead sources, activity logs & revenue forecasting.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ADVANTAGES -->
|
||||||
|
<section class="py-20 bg-blue-50">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
|
||||||
|
<h3 class="text-center text-3xl font-bold mb-12">Why Businesses Choose Our CRM</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Close Deals Faster</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Structured pipelines ensure no lead is lost or ignored.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Better Customer Engagement</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Track every call, meeting, email & WhatsApp message.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Improve Team Productivity</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Assign tasks and monitor sales team performance.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">360° Customer View</h4>
|
||||||
|
<p class="mt-2 text-gray-600">One place for deals, notes, documents & communication.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Reduce Manual Work</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Auto reminders, follow-ups, email sending & workflow automation.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-white rounded-2xl shadow">
|
||||||
|
<h4 class="text-xl font-semibold">Data-Driven Sales Decisions</h4>
|
||||||
|
<p class="mt-2 text-gray-600">Track KPIs, conversion rates & revenue progress.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- PROCESS / FLOW -->
|
||||||
|
<section class="py-24 bg-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
|
||||||
|
<h3 class="text-3xl font-bold text-center mb-14">How CRM Helps You Manage Customers</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-4 gap-6 text-center">
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">1. Capture</h4>
|
||||||
|
<p class="text-gray-600">Collect leads from website, WhatsApp, social media, calls & ads.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">2. Qualify</h4>
|
||||||
|
<p class="text-gray-600">Assign leads, add tags, score and filter prospects.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">3. Engage</h4>
|
||||||
|
<p class="text-gray-600">Send proposals, schedule meetings & track follow-ups.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="p-6 bg-gray-50 rounded-xl">
|
||||||
|
<h4 class="font-bold text-xl mb-2">4. Close</h4>
|
||||||
|
<p class="text-gray-600">Close deals, generate invoices & manage customers.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- ANALYTICS -->
|
||||||
|
<section class="py-20 bg-gray-900 text-white">
|
||||||
|
<div class="max-w-6xl mx-auto px-6">
|
||||||
|
|
||||||
|
<h3 class="text-3xl font-bold text-center mb-12">CRM Performance Insights</h3>
|
||||||
|
|
||||||
|
<div class="grid md:grid-cols-4 gap-8 text-center">
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">70%</h4>
|
||||||
|
<p class="text-gray-300 mt-1">Faster Lead Response</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">50%</h4>
|
||||||
|
<p class="text-gray-300 mt-1">Increase in Productivity</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">2x</h4>
|
||||||
|
<p class="text-gray-300 mt-1">More Deal Closures</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h4 class="text-4xl font-bold">90%</h4>
|
||||||
|
<p class="text-gray-300 mt-1">Better Customer Retention</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- FAQ -->
|
||||||
|
<section class="py-20 bg-gray-50">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<h3 class="text-3xl font-bold text-center mb-10">FAQs About Our CRM</h3>
|
||||||
|
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<details class="p-6 bg-white rounded-xl shadow">
|
||||||
|
<summary class="text-lg font-semibold cursor-pointer">Who is this CRM built for?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Agencies, software companies, real estate, education, medical, retail & service businesses.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="p-6 bg-white rounded-xl shadow">
|
||||||
|
<summary class="text-lg font-semibold cursor-pointer">Can I integrate WhatsApp & Email?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes, automated follow-ups, email templates & WhatsApp API supported.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
<details class="p-6 bg-white rounded-xl shadow">
|
||||||
|
<summary class="text-lg font-semibold cursor-pointer">Can I track sales team performance?</summary>
|
||||||
|
<p class="mt-3 text-gray-600">Yes, with activity logs, deal tracking & team reporting.</p>
|
||||||
|
</details>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<!-- CTA -->
|
||||||
|
<section class="py-20 bg-gradient-to-r from-blue-600 to-blue-700 text-white text-center">
|
||||||
|
<div class="max-w-4xl mx-auto px-6">
|
||||||
|
<h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Grow Your Business with CRM?</h2>
|
||||||
|
<p class="text-blue-100 text-lg mb-10">Start managing your customers and sales pipeline like a pro.</p>
|
||||||
|
<a href="#" class="bg-white text-blue-700 px-10 py-3 rounded-xl font-semibold shadow hover:shadow-lg">
|
||||||
|
Book a Demo
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@@ -7,6 +7,10 @@ const nextConfig: NextConfig = {
|
|||||||
protocol: "https",
|
protocol: "https",
|
||||||
hostname: "www.alucoildesign.com",
|
hostname: "www.alucoildesign.com",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
protocol: "https",
|
||||||
|
hostname: "images.unsplash.com",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
protocol: "https",
|
protocol: "https",
|
||||||
hostname: "lh3.googleusercontent.com",
|
hostname: "lh3.googleusercontent.com",
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,4 +0,0 @@
|
|||||||
// utils/slugify.ts
|
|
||||||
export const slugifyJob = (id: string, title: string) => {
|
|
||||||
return `${id}-${title.toLowerCase().replace(/\s+/g, "-").replace(/\//g, "-")}`;
|
|
||||||
};
|
|
||||||
Reference in New Issue
Block a user