Service Page added

app/(public)/_homeComponents/CTA.tsx

@@ -3,9 +3,11 @@ import React from "react";
 import { motion } from "framer-motion";
 import { ArrowRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 // CTA Section
 const CTA = () => {
+  const router = useRouter();
   return (
     <section className="py-24 bg-[#2563eb] text-white text-center relative overflow-hidden">
       <motion.div
@@ -29,7 +31,8 @@ const CTA = () => {
         <div className="flex flex-col sm:flex-row gap-4 justify-center">
           <Button
             size="lg"
-            className="px-10 py-6 text-lg bg-white text-[#2563eb] font-medium rounded-xl shadow-lg hover:bg-[#0ea5b7] hover:text-white hover:shadow-2xl hover:scale-105 transition-transform"
+            className="px-10 py-6 text-lg bg-white text-[#2563eb] font-medium rounded-xl shadow-lg hover:bg-white hover:text-[#2563eb] hover:shadow-2xl hover:scale-105 transition-transform"
+            onClick={()=>router.push("#pricing")}
           >
             Start Your Free Trial Today<ArrowRight className="ml-2 w-5 h-5" />
           </Button>

app/(public)/_homeComponents/Header.tsx

@@ -5,10 +5,12 @@ import Link from "next/link";
 import { Menu, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { home } from "@/services/Constants";
+import { useRouter } from "next/navigation";
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
   const [scrolled, setScrolled] = useState(false);
+  const router = useRouter();
 
   useEffect(() => {
     const handleScroll = () => setScrolled(window.scrollY > 10);
@@ -58,11 +60,9 @@ const Header = () => {
           </nav>
 
           <div className="hidden md:flex items-center space-x-4">
-            <Button variant="ghost" className="font-medium">
-              Sign In
-            </Button>
             <Button
               className="text-white font-medium bg-[#2563eb]"
+              onClick={()=>router.push("#pricing")}
             >
               Start Free Trial
             </Button>
@@ -96,11 +96,9 @@ const Header = () => {
                   {item.name}
                 </Link>
               ))}
-              <Button variant="outline" className="w-full">
-                Sign In
-              </Button>
               <Button
                 className="w-full text-white bg-[#2563eb]"
+                onClick={()=>router.push("#pricing")}
                 
               >
                 Start Free Trial

app/(public)/_homeComponents/HeroSection.tsx

@@ -2,12 +2,13 @@
 
 import { motion } from "framer-motion";
 import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
 
 export default function HeroSection() {
+  const router = useRouter();
   return (
     <section className="w-full bg-[linear-gradient(135deg,_#FFFFFF_0%,_#F9FAFB_50%,_#DBEAFE_100%)] py-26 md:py-20 lg:py-28">
       <div className="max-w-7xl mx-auto px-6 grid lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-
         {/* LEFT CONTENT */}
         <motion.div
           initial={{ opacity: 0, x: -40 }}
@@ -26,7 +27,10 @@ export default function HeroSection() {
 
           {/* Buttons */}
           <div className="flex flex-col sm:flex-row items-center lg:items-start justify-center lg:justify-start gap-4 mt-8">
-            <Button className="w-full sm:w-auto bg-[#2563eb] hover:bg-[#1d4ed8] text-white px-8 py-6 text-base rounded-xl">
+            <Button
+              className="w-full sm:w-auto bg-[#2563eb] hover:bg-[#1d4ed8] text-white px-8 py-6 text-base rounded-xl"
+              onClick={() => router.push("#pricing")}
+            >
               Start Free Trial
             </Button>
 
@@ -63,7 +67,6 @@ export default function HeroSection() {
             </div>
           </div>
         </motion.div>
-
       </div>
     </section>
   );
@@ -73,7 +76,9 @@ function StatCard({ title, value }: { title: string; value: string }) {
   return (
     <div className="border-l-4 border-[#2563eb] bg-gray-50 rounded-xl p-4 sm:p-5">
       <p className="text-xs sm:text-sm text-gray-500">{title}</p>
-      <p className="text-lg sm:text-xl font-bold text-[#2563eb] mt-1">{value}</p>
+      <p className="text-lg sm:text-xl font-bold text-[#2563eb] mt-1">
+        {value}
+      </p>
     </div>
   );
-}
+}

app/(public)/_homeComponents/Pricing.tsx

@@ -114,7 +114,7 @@ const MainPricingCard = () => {
   );
 
   return (
-    <section className="py-16 bg-white">
+    <section id="pricing" className="py-16 bg-white">
       <div className="max-w-5xl mx-auto px-4">
         <Card className="rounded-3xl shadow-xl border border-[#c3dbe0] overflow-hidden">
           <CardContent className="p-10 text-center">
@@ -247,7 +247,7 @@ const CtaSection = () => {
   const router = useRouter();
 
   return (
-    <section className="py-20 bg-white">
+    <section  className="py-20 bg-white">
       <div className="max-w-4xl mx-auto text-center px-4">
         <h2 className="text-4xl font-bold text-[#0d0d0d] mb-6">
           Need Bulk Pricing or a Demo?