leadstocompany/ATS-HRMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Ui cahnges and button linking

Browse Source
This commit is contained in:
Sandip Chowdhury
2026-04-18 21:53:42 +05:30
parent 174faf5ccd
commit 7cd9585c8f
21 changed files with 292 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
app/(public)/contact/_components/BookDemo.tsx
View File

@@ -3,6 +3,8 @@ import React from "react";
import { motion } from "framer-motion";
import { CalendarCheck, Send, CheckCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import DemoModal from "../../_homeComponents/DemoModal";
import { useRouter } from "next/navigation";
const features = [
"Personalized walkthrough of ATS, HRMS & CRM",
@@ -12,6 +14,7 @@ const features = [
];
const BookDemoSection = () => {
const router = useRouter();
return (
<section className="relative py-24 px-6 bg-white overflow-hidden">
{/* Background Glow */}
@@ -19,9 +22,7 @@ const BookDemoSection = () => {
className="absolute inset-0 opacity-30 pointer-events-none"
animate={{ scale: [1, 1.05, 1] }}
transition={{ duration: 14, repeat: Infinity }}
>
</motion.div>
></motion.div>
<div className="relative z-10 max-w-5xl mx-auto text-center">
<motion.h2
@@ -38,7 +39,8 @@ const BookDemoSection = () => {
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.
management? Get your free 1-on-1 demo — our team responds within 12
hours.
</motion.p>
{/* Feature List */}
@@ -61,17 +63,22 @@ const BookDemoSection = () => {
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-[#2563eb] hover:bg-blue-700 hover:scale-105 transition-transform"
>
<CalendarCheck className="mr-2 w-5 h-5" />
Book My Demo
</Button>
<DemoModal
trigger={
<Button
size="lg"
className="px-9 py-6 text-lg rounded-xl font-bold shadow-xl bg-[#2563eb] hover:bg-blue-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-blue-700 hover:bg-purple-100 transition-all"
onClick={()=> router.push("#contact-form")}
>
<Send className="mr-2 w-5 h-5" />
Contact Sales
@@ -82,4 +89,4 @@ const BookDemoSection = () => {
);
};
export default BookDemoSection;
export default BookDemoSection;

36
app/(public)/contact/_components/ChooseWinixco.tsx
View File

@@ -1,8 +1,17 @@
"use client";
import React from "react";
import { motion } from "framer-motion";
import { CheckCircle, Rocket, Shield, Zap, MessageCircle, Calendar, Clock } from "lucide-react";
import {
CheckCircle,
Rocket,
Shield,
Zap,
MessageCircle,
Calendar,
Clock,
} from "lucide-react";
import Link from "next/link";
import DemoModal from "../../_homeComponents/DemoModal";
// Feature data
const features = [
@@ -14,7 +23,6 @@ const features = [
{ text: "Real-time analytics and reporting", icon: Clock }, // New feature added
];
const ChooseWinixco = () => {
return (
<section className="py-24 px-6 bg-white">
@@ -50,7 +58,6 @@ const ChooseWinixco = () => {
);
};
// Contact CTA Section
const WeLoveToHearFromYou = () => {
return (
@@ -67,8 +74,9 @@ const WeLoveToHearFromYou = () => {
</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.
Your message helps us understand your business better — and deliver
the right solution. Let’s build something powerful for your
organisation.
</p>
{/* CTA Buttons */}
@@ -80,16 +88,20 @@ const WeLoveToHearFromYou = () => {
👉 Send Message
</Link>
<Link
href="#book-demo"
className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-blue-600 text-[#2563eb] hover:bg-purple-50 transition-all hover:scale-105"
>
👉 Book a Demo
</Link>
<DemoModal
trigger={
<Link
href=""
className="px-8 py-4 text-lg font-semibold rounded-xl border-2 border-blue-600 text-[#2563eb] hover:bg-purple-50 transition-all hover:scale-105"
>
👉 Book a Demo
</Link>
}
/>
</div>
</motion.div>
</section>
);
};
export { ChooseWinixco, WeLoveToHearFromYou };
export { ChooseWinixco, WeLoveToHearFromYou };

1
app/(public)/contact/_components/ContactForm.tsx
View File

@@ -99,6 +99,7 @@ const ContactForm: React.FC = () => {
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
className="max-w-3xl mx-auto mb-20"
id="contact-form"
>
<Card className="bg-white border-gray-200 shadow-xl">
<CardContent className="p-8 md:p-12">

54
app/(public)/contact/_components/HappyCustomers.tsx
View File

@@ -1,14 +1,11 @@
"use client"
import React from 'react';
import { motion } from 'framer-motion';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
Users,
Star
} from 'lucide-react';
import { CONTACT_DATA } from '@/services/Constants';
"use client";
import React from "react";
import { motion } from "framer-motion";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Users, Star } from "lucide-react";
import { CONTACT_DATA } from "@/services/Constants";
import DemoModal from "../../_homeComponents/DemoModal";
// Happy Customers Component
const HappyCustomers: React.FC = () => (
@@ -27,14 +24,21 @@ const HappyCustomers: React.FC = () => (
</Badge>
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-gray-900 mb-6">
{CONTACT_DATA.customers.title}
<span className="text-orange-600">{CONTACT_DATA.customers.highlight}</span>
<span className="text-orange-600">
{CONTACT_DATA.customers.highlight}
</span>
</h2>
<Button
size="lg"
className="bg-[#2563eb] hover:from-purple-700 hover:to-blue-700 text-white"
>
Try for FREE
</Button>
<DemoModal
trigger={
<Button
size="lg"
className="bg-[#2563eb] hover:from-purple-700 hover:to-blue-700 text-white"
>
Try for FREE
</Button>
}
/>
</div>
<div>
@@ -42,8 +46,12 @@ const HappyCustomers: React.FC = () => (
<div className="flex items-center gap-2">
<Users className="w-8 h-8 text-[#2563eb]" />
<div>
<p className="text-3xl font-bold text-gray-900">{CONTACT_DATA.customers.count}</p>
<p className="text-sm text-gray-600">{CONTACT_DATA.customers.label}</p>
<p className="text-3xl font-bold text-gray-900">
{CONTACT_DATA.customers.count}
</p>
<p className="text-sm text-gray-600">
{CONTACT_DATA.customers.label}
</p>
</div>
</div>
</div>
@@ -59,7 +67,9 @@ const HappyCustomers: React.FC = () => (
whileHover={{ scale: 1.1 }}
>
<div className="bg-white rounded-xl p-4 shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center h-20">
<span className={`font-bold text-lg ${logo.color}`}>{logo.name}</span>
<span className={`font-bold text-lg ${logo.color}`}>
{logo.name}
</span>
</div>
</motion.div>
))}
@@ -70,4 +80,4 @@ const HappyCustomers: React.FC = () => (
</motion.div>
);
export default HappyCustomers
export default HappyCustomers;

4
app/(public)/contact/_components/PartnerWithUs.tsx
View File

@@ -3,6 +3,7 @@ import React from "react";
import { motion } from "framer-motion";
import { BadgeCheck, Handshake, Globe, Layers } from "lucide-react";
import { Button } from "@/components/ui/button";
import { useRouter } from "next/navigation";
const partnerships = [
"White-label & reseller partnership",
@@ -12,6 +13,7 @@ const partnerships = [
];
const PartnerWithUsSection = () => {
const router = useRouter();
return (
<section className="relative py-24 px-6 bg-white overflow-hidden">
<motion.div
@@ -57,7 +59,7 @@ const PartnerWithUsSection = () => {
animate={{ opacity: 1, scale: 1 }}
className="mt-12"
>
<Button className="px-10 py-5 text-lg bg-[#2563eb] text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 hover:scale-105 transition-all">
<Button className="px-10 py-5 text-lg bg-[#2563eb] text-white font-bold rounded-xl shadow-lg hover:bg-blue-700 hover:scale-105 transition-all" onClick={()=>router.push("#contact-form")}>
Become a Partner
</Button>
</motion.div>

18
app/(public)/contact/_components/TechnicalSupport.tsx
View File

@@ -19,8 +19,7 @@ const TechnicalSupportSection = () => {
className="absolute inset-0 opacity-25 pointer-events-none"
animate={{ scale: [1, 1.05, 1] }}
transition={{ duration: 14, repeat: Infinity }}
>
</motion.div>
></motion.div>
<div className="relative z-10 max-w-6xl mx-auto">
<div className="text-center">
@@ -33,8 +32,8 @@ const TechnicalSupportSection = () => {
</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.
Already using Winixco? We’re here to ensure everything works
seamlessly — fast responses & expert support guaranteed.
</p>
</div>
@@ -53,18 +52,9 @@ const TechnicalSupportSection = () => {
</motion.div>
))}
</div>
<div className="text-center mt-12">
<Button
variant="outline"
className="px-10 py-5 text-lg font-bold text-blue-700 border-2 rounded-xl hover:bg-purple-100 transition-all"
>
Contact Support
</Button>
</div>
</div>
</section>
);
};
export default TechnicalSupportSection;
export default TechnicalSupportSection;