new pages created

app/(public)/contact/_components/HeroSection.tsx

@@ -2,30 +2,46 @@
 import React from "react";
 import { motion } from "framer-motion";
 import { Badge } from "@/components/ui/badge";
-import { CONTACT_DATA } from "@/services/Constants";
 
 const HeroSection: React.FC = () => (
-  <motion.div
-    initial={{ opacity: 0, y: 20 }}
-    animate={{ opacity: 1, y: 0 }}
-    className="text-center mb-16 mt-10"
-  >
-    <Badge className="mb-4 px-4 py-2 bg-purple-100 text-purple-700">
-      {CONTACT_DATA.hero.badge}
-    </Badge>
-    <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6">
-      {CONTACT_DATA.hero.title}{" "}
-      <span className="bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
-        us
-      </span>
-    </h1>
-    <p className="text-lg md:text-xl text-gray-600 mb-2 max-w-3xl mx-auto">
-      {CONTACT_DATA.hero.description}
-    </p>
-    <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto">
-      {CONTACT_DATA.hero.subtitle}
-    </p>
-  </motion.div>
+  <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;