feat:added the privacy page with clean ui

src/components/BlogSection.tsx

@@ -1,8 +1,8 @@
-import { motion } from 'framer-motion';
-import { Calendar, Clock, ArrowRight, User } from 'lucide-react';
-import { Link } from 'react-router-dom';
-import { Button } from '@/components/ui/button';
-import { useBlogs } from '@/hooks/queires/useBlogs';
+import { Button } from "@/components/ui/button";
+import { useBlogs } from "@/hooks/queires/useBlogs";
+import { motion } from "framer-motion";
+import { ArrowRight, Calendar, Clock, User } from "lucide-react";
+import { Link } from "react-router-dom";
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -19,21 +19,19 @@ const itemVariants = {
   visible: {
     opacity: 1,
     y: 0,
-    transition: { duration: 0.6, ease: 'easeOut' as const },
+    transition: { duration: 0.6, ease: "easeOut" as const },
   },
 };
 
 export default function BlogSection() {
-
-  const {data} = useBlogs()
+  const { data } = useBlogs();
   const blogPosts = data?.data.result;
 
-
   return (
-    <section id="blog" className="py-24 relative overflow-hidden">
+    <section id="blog" className=" pt-20 relative overflow-hidden">
       {/* Background elements */}
       <div className="absolute inset-0 bg-gradient-to-b from-transparent via-primary/5 to-transparent" />
-      
+
       <div className="container mx-auto px-4 relative z-10">
         {/* Section Header */}
         <motion.div
@@ -50,7 +48,8 @@ export default function BlogSection() {
             News & <span className="text-primary neon-text-glow">Blog</span>
           </h2>
           <p className="text-muted-foreground max-w-2xl mx-auto text-lg">
-            Stay updated with the latest trends, insights, and thought leadership from our team of experts.
+            Stay updated with the latest trends, insights, and thought
+            leadership from our team of experts.
           </p>
         </motion.div>
 
@@ -98,7 +97,10 @@ export default function BlogSection() {
                   </span>
                   <span className="flex items-center gap-1">
                     <Calendar className="w-3 h-3" />
-                    {new Date(post.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
+                    {new Date(post.date).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                    })}
                   </span>
                   <span className="flex items-center gap-1">
                     <Clock className="w-3 h-3" />
@@ -130,7 +132,7 @@ export default function BlogSection() {
           <Link to="/blog">
             <Button
               variant="outline"
-              className="rounded-full px-8 py-6 glass border-primary/30 hover:neon-glow group"
+              className="font-semibold px-8 py-6 text-lg rounded-full border-primary bg-primary/10 transition-all"
             >
               View All Articles
               <ArrowRight className="w-4 h-4 ml-2 transition-transform group-hover:translate-x-1" />