48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
"use client";
|
||
import React from "react";
|
||
import { motion } from "framer-motion";
|
||
import { Badge } from "@/components/ui/badge";
|
||
|
||
const HeroSection: React.FC = () => (
|
||
<section className="relative overflow-hidden py-24">
|
||
{/* Animated Background Glow */}
|
||
<motion.div
|
||
className="absolute inset-0 opacity-20 pointer-events-none"
|
||
animate={{ scale: [1, 1.05, 1] }}
|
||
transition={{ duration: 10, repeat: Infinity }}
|
||
>
|
||
<div className="absolute w-96 h-96 bg-purple-400 blur-3xl rounded-full -top-10 -left-10"></div>
|
||
<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>
|
||
|
||
<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">
|
||
Transform Your Business
|
||
</span>
|
||
</h1>
|
||
|
||
<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 className="text-lg md:text-xl mt-3 text-gray-700 max-w-3xl mx-auto font-medium">
|
||
Let’s Connect & Grow Together.
|
||
</p>
|
||
</motion.div>
|
||
</section>
|
||
);
|
||
|
||
export default HeroSection;
|