Upgrade Blog Section with Modern Responsive UI & Animated Laser Background

cpsquad/app/Blog-section/page.jsx

@@ -0,0 +1,42 @@
+"use client";
+
+import Link  from "next/link";
+import { Button } from "../component/ui/button";
+
+const BlogSection = () => {
+  return (
+    <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-[#0b0b0b]">
+      {/* 🔹 Animated Laser Background */}
+      <div className="absolute inset-0 z-0">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_rgba(0,255,102,0.08),_transparent_70%)] animate-pulse"></div>
+        <div className="absolute inset-0 bg-[repeating-linear-gradient(45deg,_rgba(0,255,102,0.05)_0px,_rgba(0,255,102,0.05)_1px,_transparent_1px,_transparent_20px)] blur-[2px] opacity-70 animate-slowPulse"></div>
+        <div className="absolute inset-0 bg-[url('/images/blog-bg.jpg')] bg-cover bg-center opacity-10 mix-blend-overlay"></div>
+      </div>
+
+      {/* 🔹 Content */}
+      <div className="relative z-10 text-center space-y-6 px-6 animate-fadeUp">
+        <h1 className="text-5xl sm:text-6xl md:text-7xl font-bold text-white drop-shadow-[0_0_10px_rgba(0,255,102,0.3)]">
+          Explore Our <span className="text-[#00ff66]">Blog</span>
+        </h1>
+        <p className="text-xl text-gray-300 max-w-2xl mx-auto">
+          Discover insightful articles on web development, design, and technology
+        </p>
+        <Link href="/blogs">
+          <Button
+            className="bg-[#00A63E] hover:bg-[#00ff66] text-white px-8 py-6 text-lg rounded-lg shadow-lg 
+            hover:shadow-[0_0_25px_rgba(0,255,102,0.4)] transition-all duration-300"
+          >
+            View All Blogs
+          </Button>
+        </Link>
+      </div>
+
+      {/* 🔹 Optional Floating Lights */}
+      <div className="absolute w-[300px] h-[300px] bg-[#00ff66]/10 rounded-full blur-3xl top-10 left-10 animate-pulse"></div>
+      <div className="absolute w-[250px] h-[250px] bg-[#00A63E]/10 rounded-full blur-3xl bottom-10 right-10 animate-pulse"></div>
+    </div>
+  );
+};
+
+export default BlogSection;
+

cpsquad/app/blogs/page.jsx

@@ -0,0 +1,32 @@
+"use client";
+import BlogCard from "../component/BlogCard/BlogCard";
+import blogdata from "../lib/data/blogdata"; // adjust path if your data file is elsewhere
+
+export default function BlogsPage() {
+  return (
+    <section className="relative min-h-screen flex flex-col justify-center items-center overflow-hidden px-[25px] sm:px-6 lg:px-8">
+      {/* 🔹 Foreground content */}
+      <div className="relative z-10 w-full max-w-[1200px] text-center text-white">
+        <h2 className="text-4xl md:text-6xl font-bold tracking-tight mb-8 drop-shadow-[0_0_12px_#00ff88]">
+          ALL BLOGS_
+        </h2>
+
+        <div className="grid gap-6 sm:gap-8 lg:gap-10 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-5 mb-12">
+          {blogdata.map((item) => (
+            <BlogCard
+              key={item.id}
+              title={item.title}
+              excerpt={item.excerpt}
+              image={item.image}
+              slug={item.slug}
+              category={item.category}
+              date={item.date}
+              author={item.author}
+              readTime={item.readTime}
+            />
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

cpsquad/app/component/Navbar/MobileMenu/MobileMenu.jsx

@@ -25,7 +25,7 @@ const MobileMenu = ({ pathname, closeMenu }) => {
     { href: "/", label: "Home" },
     { href: "/events", label: "Events" },
     { href: "/members", label: "Members" },
-    { href: "/blogs", label: "Blogs" },
+    { href: "/Blog-section", label: "Blogs" },
   ];
 
   const containerVariants = {

cpsquad/app/component/Navbar/NavLinks.jsx

@@ -20,7 +20,7 @@ const NavLinks = ({ pathname }) => {
   const links = [
     { href: "/events", label: "Events" },
     { href: "/members", label: "Members" },
-    { href: "/blogs", label: "Blogs" },
+    { href: "/Blog-section", label: "Blogs" },
   ];
 
   return (

cpsquad/app/component/ui/button.jsx

@@ -0,0 +1,37 @@
+import React from "react";
+
+const Button = ({
+  children,
+  onClick,
+  className = "",
+  variant = "default",
+  size = "md",
+  ...props
+}) => {
+  const base =
+    "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50";
+
+  const variants = {
+    default: "bg-green-500 text-white hover:bg-green-600",
+    outline: "border border-gray-400 text-gray-700 hover:bg-gray-100",
+    ghost: "text-gray-700 hover:bg-gray-100",
+  };
+
+  const sizes = {
+    sm: "px-3 py-1 text-sm",
+    md: "px-4 py-2 text-base",
+    lg: "px-5 py-3 text-lg",
+  };
+
+  const styles = `${base} ${variants[variant] || ""} ${
+    sizes[size] || ""
+  } ${className}`;
+
+  return (
+    <button onClick={onClick} className={styles} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export { Button };

cpsquad/app/page.js

@@ -3,6 +3,7 @@ import Image from "next/image";
 import React, { useState, useRef } from "react";
 import BlogCard from "./component/BlogCard/BlogCard";
 import blogdata from "./lib/data/blogdata.js";
+import BlogSection from "./Blog-section/page";
 import Link from "next/link";
 
 export default function Home() {
@@ -103,37 +104,7 @@ export default function Home() {
       </section>
 
       {/* Blogs Section */}
-      <section id="blogs" className="px-[25px] sm:px-6 lg:px-8 max-w-[1200px] mx-auto ">
-        <div className="flex justify-center  ">
-          <h2 className="text-4xl md:text-6xl font-bold tracking-tight">
-            OUR BLOGS_
-          </h2>
-        </div>
-
-        <div className="grid gap-6 sm:gap-8 lg:gap-10 
-                sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-5 mb-12">
-          {blogdata.slice(0, 3).map((item, id) => (
-            <BlogCard
-              key={item.id}
-              title={item.title}
-              excerpt={item.excerpt}
-              image={item.image}
-              slug={item.slug}
-              category={item.category}
-              date={item.date}
-              author={item.author}
-              readTime={item.readTime}
-            />
-          ))}
-        </div>
-        <Link href="/blogs">
-          <div className="flex justify-center items-center mb-[80px] ">
-            <button className="bg-gray-700 w-[150px] py-3 hover:bg-gray-800 transition-all duration-300">
-              View more
-            </button>
-          </div>
-        </Link>
-      </section>
+      <BlogSection />
     </div>
   );
 }

cpsquad/package.json

@@ -9,18 +9,18 @@
     "lint": "eslint"
   },
   "dependencies": {
-    "next": "15.5.5",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-icons": "^5.5.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "framer-motion": "^12.23.24",
     "next": "15.5.5",
     "react": "19.1.0",
-    "react-dom": "19.1.0"
+    "react-dom": "19.1.0",
+    "react-icons": "^5.5.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3",
     "@tailwindcss/postcss": "^4",
+    "@types/node": "24.9.2",
+    "@types/react": "^19.2.2",
     "eslint": "^9",
     "eslint-config-next": "15.5.5",
     "tailwindcss": "^4"

cpsquad/tsconfig.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}