├── README.md
├── .eslintrc.json
├── public
    ├── 5G.png
    ├── gut-health.png
    ├── migration.png
    ├── under-dev.webp
    ├── gig-economy.png
    ├── nextwavebymsh.png
    ├── quantum-computing.png
    ├── nextwavebymsh-page.png
    └── mental-health-in-the-workplace.png
├── app
    ├── fonts
    │   ├── GeistVF.woff
    │   └── GeistMonoVF.woff
    ├── contact
    │   └── page.tsx
    ├── about
    │   └── page.tsx
    ├── blog
    │   ├── page.tsx
    │   └── [slug]
    │   │   └── page.tsx
    ├── layout.tsx
    ├── components
    │   ├── Card.tsx
    │   ├── CardsAll.tsx
    │   ├── Footer.tsx
    │   ├── CommentSection.tsx
    │   └── Navbar.tsx
    ├── globals.css
    └── page.tsx
├── postcss.config.mjs
├── next.config.mjs
├── next-env.d.ts
├── tailwind.config.ts
├── .gitignore
├── tsconfig.json
├── package.json
└── Data
    ├── displayData.ts
    └── detailedData.ts


/README.md:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "next/typescript"]
3 | }
4 | 


--------------------------------------------------------------------------------
/public/5G.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/5G.png


--------------------------------------------------------------------------------
/public/gut-health.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/gut-health.png


--------------------------------------------------------------------------------
/public/migration.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/migration.png


--------------------------------------------------------------------------------
/public/under-dev.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/under-dev.webp


--------------------------------------------------------------------------------
/app/fonts/GeistVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/app/fonts/GeistVF.woff


--------------------------------------------------------------------------------
/public/gig-economy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/gig-economy.png


--------------------------------------------------------------------------------
/app/fonts/GeistMonoVF.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/app/fonts/GeistMonoVF.woff


--------------------------------------------------------------------------------
/public/nextwavebymsh.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/nextwavebymsh.png


--------------------------------------------------------------------------------
/public/quantum-computing.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/quantum-computing.png


--------------------------------------------------------------------------------
/public/nextwavebymsh-page.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/nextwavebymsh-page.png


--------------------------------------------------------------------------------
/public/mental-health-in-the-workplace.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mshsheikh/NextWave-by-MSH/HEAD/public/mental-health-in-the-workplace.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('postcss-load-config').Config} */
2 | const config = {
3 |   plugins: {
4 |     tailwindcss: {},
5 |   },
6 | };
7 | 
8 | export default config;
9 | 


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   images: {
4 |     domains: ["preview.colorlib.com", "images.unsplash.com", "plus.unsplash.com"], // Multiple hostnames
5 |   },
6 | };
7 | 
8 | export default nextConfig;
9 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | import type { Config } from "tailwindcss";
 2 | 
 3 | const config: Config = {
 4 |   content: [
 5 |     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,mdx}",
 7 |     "./app/**/*.{js,ts,jsx,tsx,mdx}",
 8 |   ],
 9 |   theme: {
10 |     extend: {
11 |       colors: {
12 |         background: "var(--background)",
13 |         foreground: "var(--foreground)",
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | };
19 | export default config;
20 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": ["dom", "dom.iterable", "esnext"],
 4 |     "allowJs": true,
 5 |     "skipLibCheck": true,
 6 |     "strict": true,
 7 |     "noEmit": true,
 8 |     "esModuleInterop": true,
 9 |     "module": "esnext",
10 |     "moduleResolution": "bundler",
11 |     "resolveJsonModule": true,
12 |     "isolatedModules": true,
13 |     "jsx": "preserve",
14 |     "incremental": true,
15 |     "plugins": [
16 |       {
17 |         "name": "next"
18 |       }
19 |     ],
20 |     "paths": {
21 |       "@/*": ["./*"]
22 |     }
23 |   },
24 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 |   "exclude": ["node_modules"]
26 | }
27 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "mshsheikh-dynamic-blog",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@heroicons/react": "^2.2.0",
13 |     "next": "14.2.15",
14 |     "react": "^18",
15 |     "react-dom": "^18",
16 |     "react-icons": "^5.4.0",
17 |     "swiper": "^11.1.15"
18 |   },
19 |   "devDependencies": {
20 |     "@types/node": "^20",
21 |     "@types/react": "^18",
22 |     "@types/react-dom": "^18",
23 |     "eslint": "^8",
24 |     "eslint-config-next": "14.2.15",
25 |     "postcss": "^8",
26 |     "tailwindcss": "^3.4.1",
27 |     "typescript": "^5"
28 |   }
29 | }
30 | 


--------------------------------------------------------------------------------
/app/contact/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | const Contact = () => {
 4 |   return (
 5 |     <div className="max-w-[1000px] mx-auto md:py-24 py-12">
 6 |       <h1 className="md:text-5xl text-4xl font-bold Heading text-center pb-7">
 7 |         Page Under Development!
 8 |       </h1>
 9 |       <p className="text-2xl text-center tracking-widest leading-10 mb-10">
10 |         We’re working on this page to serve you better.<br/>Thank you for your patience!
11 |       </p>
12 | 
13 |       <div className="w-full">
14 |         <Image
15 |           src={"/under-dev.webp"}
16 |           alt="Under Development Image"
17 |           height={1000}
18 |           width={1000}
19 |         />
20 |       </div>
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default Contact;
26 | 


--------------------------------------------------------------------------------
/app/about/page.tsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import React from 'react'
 3 | 
 4 | const About = () => {
 5 |   return (
 6 |     <div className='max-w-[1000px] mx-auto md:py-24 py-12'>
 7 |       <h1 className='md:text-5xl text-4xl font-bold Heading text-center pb-7'>
 8 |         Page Under Development!
 9 |       </h1>
10 |       <p className='text-2xl text-center tracking-widest leading-10 mb-10'>
11 |         We are working hard to bring you an amazing experience.<br/>Thank you for your patience!
12 |       </p>
13 | 
14 |       <div className='w-full'>
15 |         <Image 
16 |           src={"/under-dev.webp"} 
17 |           alt="Under Development Image" 
18 |           height={1000} 
19 |           width={1000} 
20 |         />
21 |       </div>
22 |     </div>
23 |   )
24 | }
25 | 
26 | export default About
27 | 


--------------------------------------------------------------------------------
/app/blog/page.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import CardsAll from "../components/CardsAll";
 3 | import { displayData2 } from "@/Data/displayData";
 4 | 
 5 | const Blog = () => {
 6 |   return (
 7 |     <div className="md:py-24 py-12">
 8 |       <h1 className="md:text-5xl text-4xl font-bold text-center Heading mb-20">
 9 |         Latest Blogs
10 |       </h1>
11 |       <div className="grid xl:grid-cols-4 lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-5 mx-auto px-4">
12 |         {displayData2.map((data, index) => (
13 |           <CardsAll
14 |             key={index}
15 |             image={data.image}
16 |             title={data.title}
17 |             category={data.category}
18 |             date={data.date}
19 |           />
20 |         ))}
21 |       </div>
22 |     </div>
23 |   );
24 | };
25 | 
26 | export default Blog;
27 | 


--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | import type { Metadata } from "next";
 2 | import { Nunito_Sans } from "next/font/google";
 3 | import "./globals.css";
 4 | import Navbar from "./components/Navbar";
 5 | import Footer from "./components/Footer";
 6 | 
 7 | const font = Nunito_Sans({
 8 |   weight: ["200", "300", "400", "500", "600", "700", "800"],
 9 |   subsets: ["latin"],
10 | });
11 | 
12 | export const metadata: Metadata = {
13 |   title: "Create Next App",
14 |   description: "Generated by create next app",
15 | };
16 | 
17 | export default function RootLayout({
18 |   children,
19 | }: Readonly<{
20 |   children: React.ReactNode;
21 | }>) {
22 |   return (
23 |     <html lang="en">
24 |       <body style={{backgroundColor: "#f2f2f2"}} className={`${font.className} ${font.className} antialiased`}>
25 |         <Navbar/>
26 |         <div className="max-w-[1500px] mx-auto md:px-10 px-5">
27 |         {children}
28 |         </div>
29 |         <Footer/>
30 |       </body>
31 |     </html>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/app/components/Card.tsx:
--------------------------------------------------------------------------------
 1 | import { PropsDisplay } from "@/Data/displayData"
 2 | import Image from "next/image"
 3 | import Link from "next/link"
 4 | 
 5 | 
 6 | const Card = ({title, category, date, image}:PropsDisplay) => {
 7 |   return (
 8 |     <div className='max-w-[330px] overflow-hidden shadow-md  mx-auto'>
 9 |       <div className="w-full overflow-hidden ">
10 |       <Link href={`/blog/${title.toLowerCase().replace(/ /g, "-")}`}>
11 |       <Image src={image} alt="" height={2000} width={2000} className="hover:scale-110 transition ease-in duration-200 hover:opacity-50 cursor-pointer"/>
12 |         </Link>
13 |       </div>
14 |       <div className="bg-white p-5">
15 |         <h2 className="text-center font-[600] tracking-widest text-blue-800 mb-4">{category}</h2>
16 |         <h3 className="Heading md:text-4xl  text-2xl font-[500] text-center">{title}</h3>
17 |         
18 |         <p className="text-center text-sm tracking-widest mt-10 mb-5 text-black/60">{date}</p>
19 |         
20 |       </div>
21 |     </div>
22 |   )
23 | }
24 | 
25 | export default Card


--------------------------------------------------------------------------------
/app/components/CardsAll.tsx:
--------------------------------------------------------------------------------
 1 | import { PropsDisplay } from "@/Data/displayData";
 2 | import Image from "next/image";
 3 | import Link from "next/link";
 4 | 
 5 | const CardsAll = ({ title, category, date, image }: PropsDisplay) => {
 6 |   return (
 7 |     <div className="max-w-[330px] overflow-hidden shadow-md  mx-auto">
 8 |       <div className="w-full overflow-hidden ">
 9 |         <Link href={`/blog/${title.toLowerCase().replace(/ /g, "-")}`}>
10 |           <Image
11 |             src={image}
12 |             alt=""
13 |             height={2000}
14 |             width={2000}
15 |             className="hover:scale-110 transition ease-in duration-200 hover:opacity-50 cursor-pointer"
16 |           />
17 |         </Link>
18 |       </div>
19 |       <div className="bg-white p-5">
20 |         <h2 className="text-center font-[600] tracking-widest text-blue-800 mb-4">
21 |           {category}
22 |         </h2>
23 |         <h3 className="Heading md:text-4xl  text-2xl font-[500] text-center">
24 |           {title}
25 |         </h3>
26 | 
27 |         <p className="text-center text-sm tracking-widest mt-10 mb-5 text-black/60">
28 |           {date}
29 |         </p>
30 |       </div>
31 |     </div>
32 |   );
33 | };
34 | 
35 | export default CardsAll;
36 | 


--------------------------------------------------------------------------------
/app/components/Footer.tsx:
--------------------------------------------------------------------------------
 1 | import { FaFacebook, FaGithub, FaLinkedin, FaYoutube } from "react-icons/fa";
 2 | 
 3 | const Footer = () => {
 4 |   return (
 5 |     <footer className="bg-[#040d35] text-white py-6 px-5">
 6 |       <div className="flex justify-between lg:flex-row flex-col items-center mt-5 max-w-[1200px] lg:mx-auto gap-4">
 7 |         
 8 |         <div className="flex gap-4">
 9 |           <a
10 |             href="https://github.com/mshsheikh"
11 |             target="_blank"
12 |             rel="noopener noreferrer"
13 |             className="hover:text-[#0784ef] transition duration-100"
14 |           >
15 |             <FaGithub size={24} />
16 |           </a>
17 |           <a
18 |             href="https://linkedin.com/in/mshsheikh"
19 |             target="_blank"
20 |             rel="noopener noreferrer"
21 |             className="hover:text-[#0784ef] transition duration-100"
22 |           >
23 |             <FaLinkedin size={24} />
24 |           </a>
25 |           <a
26 |             href="https://facebook.com/magiciansheikh"
27 |             target="_blank"
28 |             rel="noopener noreferrer"
29 |             className="hover:text-[#0784ef] transition duration-100"
30 |           >
31 |             <FaFacebook size={24} />
32 |           </a>
33 |           <a
34 |             href="https://youtube.com/@SalmanSheikhOfficial"
35 |             target="_blank"
36 |             rel="noopener noreferrer"
37 |             className="hover:text-[#0784ef] transition duration-100"
38 |           >
39 |             <FaYoutube size={24} />
40 |           </a>
41 |         </div>
42 | 
43 |         <div className="text-center lg:text-right">
44 |           <p className="text-[#888CB0] leading-5 text-sm">
45 |             &copy;2024 All Rights Reserved
46 |           </p>
47 |           <h2 className="font-[600] text-sm">NextWave by MSH</h2>
48 |         </div>
49 |       </div>
50 |     </footer>
51 |   );
52 | };
53 | 
54 | export default Footer;
55 | 


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Great+Vibes&family=Heebo:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oleo+Script:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
 2 | 
 3 | @import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Great+Vibes&family=Heebo:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Oleo+Script:wght@400;700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=Ysabeau+SC:wght@1..1000&display=swap');
 4 | 
 5 | 
 6 | @tailwind base;
 7 | @tailwind components;
 8 | @tailwind utilities;
 9 | 
10 | 
11 | .Heading{
12 |     font-family: Playfair_Display;
13 | }


--------------------------------------------------------------------------------
/Data/displayData.ts:
--------------------------------------------------------------------------------
 1 | export type PropsDisplay = {
 2 |   title: string;
 3 |   category: string;
 4 |   date: string;
 5 |   image: string;
 6 | };
 7 | 
 8 | export const displayData: PropsDisplay[] = [
 9 |   {
10 |     title: "Journey of Quantum Computing",
11 |     category: "Tech",
12 |     date: "September 16, 2024",
13 |     image: "/quantum-computing.png",
14 |   },
15 | 
16 |   {
17 |     title: "Prioritize Mental Health at Workplace",
18 |     category: "Health",
19 |     date: "April 15, 2024",
20 |     image: "/mental-health-in-the-workplace.png",
21 |   },
22 | 
23 |   {
24 |     title: "The Gig Economy and Financial Stability",
25 |     category: "Finance",
26 |     date: "June 28, 2024",
27 |     image: "/gig-economy.png",
28 |   },
29 | 
30 |   {
31 |     title: "Impact of Animal Migration Patterns on Climate",
32 |     category: "Animals",
33 |     date: "November 19, 2024",
34 |     image: "/migration.png",
35 |   },
36 | ];
37 | 
38 | export const displayData2: PropsDisplay[] = [
39 |   {
40 |     title: "Journey of Quantum Computing",
41 |     category: "Tech",
42 |     date: "September 16, 2024",
43 |     image: "/quantum-computing.png",
44 |   },
45 | 
46 |   {
47 |     title: "Prioritize Mental Health at Workplace",
48 |     category: "Health",
49 |     date: "April 15, 2024",
50 |     image: "/mental-health-in-the-workplace.png",
51 |   },
52 | 
53 |   {
54 |     title: "The Gig Economy and Financial Stability",
55 |     category: "Finance",
56 |     date: "June 28, 2024",
57 |     image: "/gig-economy.png",
58 |   },
59 | 
60 |   {
61 |     title: "Impact of Animal Migration Patterns on Climate",
62 |     category: "Animals",
63 |     date: "November 19, 2024",
64 |     image: "/migration.png",
65 |   },
66 | 
67 |   {
68 |     title: "How 5G is Transforming Smart Cities and IoT",
69 |     category: "Tech",
70 |     date: "August 31, 2024",
71 |     image: "/5G.png",
72 |   },
73 | 
74 |   {
75 |     title: "The Importance of Gut Health for Your Body Overall Wellness",
76 |     category: "Health",
77 |     date: "February 2, 2024",
78 |     image: "/gut-health.png",
79 |   },
80 | ];
81 | 


--------------------------------------------------------------------------------
/app/blog/[slug]/page.tsx:
--------------------------------------------------------------------------------
 1 | import CommentSection from "@/app/components/CommentSection";
 2 | import { detailedData } from "@/Data/detailedData";
 3 | import Image from "next/image";
 4 | import React from "react";
 5 | 
 6 | interface Post {
 7 |   title: string;
 8 |   image2: string;
 9 |   heading: string;
10 |   date: string;
11 |   author: string;
12 |   description1: string;
13 |   description2: string;
14 | }
15 | 
16 | const Slug = ({ params }: { params: { slug: string } }) => {
17 |   const paramsId = params.slug;
18 | 
19 |   const post = detailedData.find(
20 |     (p: Post) =>
21 |       p.title.toLowerCase().replace(/ /g, "-") === paramsId.toLowerCase()
22 |   );
23 | 
24 |   if (!post) {
25 |     return (
26 |       <div className="flex justify-center h-screen items-center">
27 |         <h1 className="text-center text-5xl font-bold">Post Not Found!</h1>
28 |       </div>
29 |     );
30 |   }
31 | 
32 |   return (
33 |     <div className="max-w-[1000px] mx-auto md:py-24 py-12">
34 |       <div className="w-full mb-10">
35 |         <Image
36 |           src={post.image2}
37 |           alt={post.title}
38 |           height={2000}
39 |           width={2000}
40 |           className="rounded-lg"
41 |           loading="lazy"
42 |         />
43 |       </div>
44 | 
45 |       <h1 className="Heading md:text-5xl text-3xl text-center font-bold">
46 |         {post.heading}
47 |       </h1>
48 | 
49 |       <div className="flex justify-center items-center gap-8 mt-4 mb-14 tracking-widest">
50 |         <p className="text-gray-500 text-sm md:text-base">{post.date}</p>
51 |         <p className="text-sm md:text-base">{post.author}</p>
52 |       </div>
53 | 
54 |       <p className="text-2xl tracking-widest leading-10 mb-10">
55 |         {post.description1}
56 |       </p>
57 |       <p className="text-lg tracking-wide text-[#525151] leading-8">
58 |         {post.description2}
59 |       </p>
60 | 
61 |       <h2 className="text-center Heading py-10 font-bold md:text-3xl text-2xl">
62 |         Add Comment
63 |       </h2>
64 |       <CommentSection id={post.title} />
65 |     </div>
66 |   );
67 | };
68 | 
69 | export default Slug;
70 | 


--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Image from "next/image";
 4 | import Card from "./components/Card";
 5 | import { displayData } from "@/Data/displayData";
 6 | import { Swiper, SwiperSlide } from "swiper/react";
 7 | import "swiper/css";
 8 | import "swiper/css/navigation";
 9 | import "swiper/css/pagination";
10 | import { Navigation, Pagination } from "swiper/modules";
11 | 
12 | export default function HomePage() {
13 |   return (
14 |     <div className="md:py-24 py-12">
15 |       <div className="flex justify-center mb-8">
16 |         <Image
17 |           src="/nextwavebymsh-page.png"
18 |           alt="NextWave Logo"
19 |           width={450}
20 |           height={450}
21 |           className="rounded-md"
22 |         />
23 |       </div>
24 | 
25 |       <h2 className="md:text-5xl text-4xl font-bold text-center mb-6 bg-clip-text text-transparent bg-gradient-to-r from-[#191f37] via-[#0459ba] to-[#0784ef]">
26 |         Your Trusted Partner in Reading and Discovery!
27 |       </h2>
28 | 
29 |       <p className="text-lg text-center text-gray-700 mb-4">
30 |         This is a place where we share simple ideas, helpful tips, and fun
31 |         stories.
32 |         <br /> Whether you’re here to learn, get inspired, or just enjoy a good
33 |         read, you’re in the right spot.
34 |       </p>
35 |       <p className="text-lg text-center text-gray-700">
36 |         Take a look around, and check out some posts.
37 |         <br />
38 |         Let’s explore together!
39 |       </p>
40 | 
41 |       <br />
42 |       <Swiper
43 |         spaceBetween={30}
44 |         slidesPerView={1}
45 |         breakpoints={{
46 |           640: { slidesPerView: 2 },
47 |           768: { slidesPerView: 3 },
48 |           1024: { slidesPerView: 4 },
49 |         }}
50 |         navigation
51 |         pagination={{ clickable: true }}
52 |         modules={[Navigation, Pagination]}
53 |         className="px-4"
54 |       >
55 |         {displayData.map((data, index) => (
56 |           <SwiperSlide key={index}>
57 |             <Card
58 |               image={data.image}
59 |               title={data.title}
60 |               category={data.category}
61 |               date={data.date}
62 |             />
63 |           </SwiperSlide>
64 |         ))}
65 |       </Swiper>
66 |     </div>
67 |   );
68 | }
69 | 


--------------------------------------------------------------------------------
/app/components/CommentSection.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useEffect, useState } from "react";
 3 | 
 4 | const CommentSection = ({ id }: { id: string }) => {
 5 |   const [comments, setComments] = useState<string[]>([]);
 6 | 
 7 |   const [newComment, setNewComment] = useState("");
 8 | 
 9 |   useEffect(() => {
10 |     const storedComments = localStorage.getItem(`comments-${id}`);
11 |     if (storedComments) {
12 |       try {
13 |         setComments(JSON.parse(storedComments));
14 |       } catch (error) {
15 |         console.error("Error parsing stored comments:", error);
16 |         setComments([]);
17 |       }
18 |     }
19 |   }, [id]);
20 | 
21 |   // Handle adding new comment
22 |   const handleAddComment = () => {
23 |     if (newComment.trim() !== "") {
24 |       const updatedComments = [...comments, newComment];
25 |       setComments(updatedComments);
26 |       setNewComment("");
27 |       localStorage.setItem(`comments-${id}`, JSON.stringify(updatedComments));
28 |     }
29 |   };
30 | 
31 |   // Handle deleting a comment
32 |   const handleDeleteComment = (index: number) => {
33 |     const updatedComments = comments.filter((_, i) => i !== index); // Remove the comment at the specified index
34 |     setComments(updatedComments); // Update state
35 |     localStorage.setItem(`comments-${id}`, JSON.stringify(updatedComments)); // Update localStorage
36 |   };
37 | 
38 |   return (
39 |     <div className="">
40 | 
41 |       {/* Comments List */}
42 |       <div className="">
43 |         {comments.length > 0 ? (
44 |           comments.map((comment, index) => (
45 |             <div
46 |               key={index}
47 |               className="flex justify-between items-center border-b-[1px] border-gray-300"
48 |             >
49 |               <p className="text-bold text-lg py-3">{comment}</p>
50 |               <button
51 |                 onClick={() => handleDeleteComment(index)}
52 |                 className=" bg-red-700 px-3 py-1 rounded-sm text-white"
53 |               >
54 |                 Delete
55 |               </button>
56 |             </div>
57 |           ))
58 |         ) : (
59 |           <p className="text-center">Recent comments will show here</p>
60 |         )}
61 |       </div>
62 | 
63 |       {/* Input for new comment */}
64 |       <div className="flex flex-col mt-5 gap-3">
65 |         <textarea
66 |           value={newComment}
67 |           onChange={(e) => setNewComment(e.target.value)}
68 |           placeholder="Write a comment"
69 |           className="outline-none px-4 pt-3"
70 |           required
71 |         />
72 |         <button className="bg-[#040d35] transition 1s duration-200 hover:bg-[#0784ef] text-white text-sm py-5 tracking-widest" onClick={handleAddComment}>Post Comment</button>
73 |       </div>
74 |     </div>
75 |   );
76 | };
77 | 
78 | export default CommentSection;


--------------------------------------------------------------------------------
/app/components/Navbar.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import Link from "next/link";
 4 | import { Bars3Icon } from "@heroicons/react/24/outline";
 5 | import { CgClose } from "react-icons/cg";
 6 | import { useState } from "react";
 7 | import Image from "next/image";
 8 | 
 9 | const Navbar = () => {
10 |   const [showNav, setShowNav] = useState(false);
11 | 
12 |   const showNavHandler = () => setShowNav(true);
13 |   const closeNavHandler = () => setShowNav(false);
14 | 
15 |   const navOpen = showNav ? "translate-x-0" : "translate-x-[-100%]";
16 | 
17 |   return (
18 |     <nav className="w-full bg-[#040d35]">
19 |       <div className="max-w-[90%] w-full mx-auto flex items-center justify-between h-[70px]">
20 |         <Image
21 |           src="/nextwavebymsh.png"
22 |           alt="NextWave by MSH"
23 |           width={150}
24 |           height={50}
25 |           className="cursor-pointer"
26 |         />
27 | 
28 |         <ul className="md:flex hidden items-center gap-4 text-white text-[12px] font-[600] tracking-widest">
29 |           <li className="hover:text-[#0784ef] transition duration-100 cursor-pointer">
30 |             <Link href={"/"} className="p-3">
31 |               Home
32 |             </Link>
33 |           </li>
34 |           <li className="hover:text-[#0784ef] transition duration-100 cursor-pointer">
35 |             <Link href={"/blog"} className="p-3">
36 |               Blogs
37 |             </Link>
38 |           </li>
39 |           <li className="hover:text-[#0784ef] transition duration-100 cursor-pointer">
40 |             <Link href={"/about"} className="p-3">
41 |               About
42 |             </Link>
43 |           </li>
44 |           <li className="hover:text-[#0784ef] transition duration-100 cursor-pointer">
45 |             <Link href={"/contact"} className="p-3">
46 |               Contact
47 |             </Link>
48 |           </li>
49 |         </ul>
50 | 
51 |         <div className="md:hidden">
52 |           <div onClick={showNavHandler} className="w-7 cursor-pointer">
53 |             <Bars3Icon className="text-white" />
54 |           </div>
55 |         </div>
56 |       </div>
57 | 
58 |       <div
59 |         className={`fixed ${navOpen} transform transition-all duration-500 inset-0 z-[1000] bg-black opacity-70 w-full h-screen`}
60 |         onClick={closeNavHandler}
61 |       ></div>
62 | 
63 |       <div
64 |         className={`top-0 fixed ${navOpen} transform transition-all duration-500 flex justify-start flex-col h-screen w-[80%] pt-24 sm:w-[60%] bg-[#ffffff] z-[10000] space-y-6`}
65 |       >
66 |         <ul className="flex flex-col items-center gap-8 text-black/60 text-lg font-[600] tracking-widest">
67 |           <li className="hover:text-black transition duration-100 cursor-pointer ">
68 |             <Link onClick={closeNavHandler} className="p-3" href={"/"}>
69 |               Home
70 |             </Link>
71 |           </li>
72 |           <li className="hover:text-black transition duration-100 cursor-pointer ">
73 |             <Link onClick={closeNavHandler} className="p-3" href={"/blog"}>
74 |               Blogs
75 |             </Link>
76 |           </li>
77 |           <li className="hover:text-black transition duration-100 cursor-pointer ">
78 |             <Link onClick={closeNavHandler} className="p-3" href={"/about"}>
79 |               About
80 |             </Link>
81 |           </li>
82 |           <li className="hover:text-black transition duration-100 cursor-pointer ">
83 |             <Link onClick={closeNavHandler} className="p-3" href={"/contact"}>
84 |               Contact
85 |             </Link>
86 |           </li>
87 |         </ul>
88 |         <CgClose
89 |           onClick={closeNavHandler}
90 |           className="absolute top-[0.7rem] right-[1.4rem] w-6 h-6 sm:w-8 sm:h-8 text-black"
91 |         />
92 |       </div>
93 |     </nav>
94 |   );
95 | };
96 | 
97 | export default Navbar;
98 | 


--------------------------------------------------------------------------------
/Data/detailedData.ts:
--------------------------------------------------------------------------------
  1 | export type PropsDetailedData = {
  2 |   title: string;
  3 |   category: string;
  4 |   date: string;
  5 |   image: string;
  6 |   image2: string;
  7 |   description1: string;
  8 |   description2: string;
  9 |   heading: string;
 10 |   author: string;
 11 | };
 12 | 
 13 | export const detailedData: PropsDetailedData[] = [
 14 |   {
 15 |     title: "Prioritize Mental Health at Workplace",
 16 |     category: "Health",
 17 |     date: "April 15, 2024",
 18 |     image: "/mental-health-in-the-workplace.png",
 19 | 
 20 |     heading: "Supporting Mental Health in the Workplace",
 21 |     description1:
 22 |       "Work profoundly affects mental health, with managers often influencing workers’ mental well-being more than doctors, according to studies. The U.S. Surgeon General highlights the workplace's role in shaping overall health, as full-time workers spend half their waking lives at work. Factors like job stress, mismatched roles, and poor working conditions can harm mental health. Research shows that supportive work cultures and managers significantly improve psychological safety and employee satisfaction. Workers prioritize organizations that respect work-life boundaries and offer mental health support. By addressing systemic workplace stressors and creating healthier environments, employers can enhance both employee well-being and organizational success.",
 23 | 
 24 |     description2:
 25 |       "Work is a major determinant of mental health, impacting employees more than many realize. The Workforce Institute’s Mental Health at Work study reveals that managers influence workers' mental health more than doctors or therapists. With full-time U.S. workers spending about half their waking hours at work, the workplace significantly shapes mental and physical well-being. Stress, poor working conditions, and mismatched job requirements often contribute to mental health issues. Long-term exposure to occupational stress worsens mental health and can even affect health outside work. Employees increasingly value organizations that support mental health. Surveys reveal that 95% of workers prioritize work-life boundaries, and 92% value organizations that support mental well-being. Healthy workplace cultures, where managerial support fosters psychological safety, are more effective than self-care perks in addressing mental health concerns. Employers can adopt strategies like NIOSH’s Total Worker Health approach to create healthier environments by addressing organizational-level issues, training supervisors to reduce stress, and providing resilience-building programs. Tools like the NIOSH WellBQ questionnaire and Impact Wellbeing™ Guide offer frameworks for assessing and improving workplace mental health. By investing in supportive policies and cultivating healthy environments, workplaces can become engines of well-being, enhancing employee mental health and boosting organizational success.",
 26 |     author: "Emily Kirby",
 27 |     image2: "/mental-health-in-the-workplace.png",
 28 |   },
 29 | 
 30 |   {
 31 |     title: "Journey of Quantum Computing",
 32 |     category: "Tech",
 33 |     date: "September 16, 2024",
 34 |     image: "/quantum-computing.png",
 35 |     heading: "Quantum Computing: Between Hope and Hype",
 36 |     description1:
 37 |       "When Rafi asked me to open this event, he seemed more interested in big ideas than detailed results, which suits me fine—I’ve been reflecting more lately. After a two-year AI safety stint at OpenAI, I’ve returned to quantum computing, and the field feels like it’s finally in a race, not just warming up. Recent breakthroughs, like Google’s logical qubit experiments and Microsoft-Quantinuum’s work with trapped ions, show real progress toward fault-tolerant quantum computing. With error-correction improving and two-qubit gates nearing the critical threshold, this decade could bring scalable quantum machines. It’s an exciting time for both quantum computing and AI.",
 38 |     description2:
 39 |       "Rafi’s invitation to open this event brought an opportunity to reflect on the current state of quantum computing—a field I’ve returned to after a two-year focus on AI safety at OpenAI. In quantum computing, the race to build fault-tolerant machines has truly begun. No longer just theoretical, groups like Google and Microsoft-Quantinuum have demonstrated critical milestones, such as encoding logical qubits and applying error-corrected operations with measurable gains. This progress stems from steady advancements in two-qubit gate fidelities, now nearing the ~99.99% threshold required for sustainable quantum error correction. When I started in the late 1990s, such fidelity was unthinkable, but today’s pace suggests scalable quantum machines within a decade. Quantum computing remains misunderstood by many, often mistaken for a universal problem-solver. The reality is more nuanced: its strengths lie in chemistry simulation, cryptography, and specialized optimization. While exponential speedups are rare, practical applications are emerging, from cryptographically certified randomness to quantum chemistry simulations.<br/><br/> The air of unreality surrounding quantum computing is dissipating as it edges closer to practical deployment. Combined with AI’s rapid advancements, it’s clear we’re witnessing a transformative era in science and technology, where imagination and experimentation are pushing boundaries like never before.",
 40 |     author: "by Scott Aaronson",
 41 |     image2: "/quantum-computing.png",
 42 |   },
 43 | 
 44 |   {
 45 |     title: "The Gig Economy and Financial Stability",
 46 |     category: "Finance",
 47 |     date: "June 28, 2024",
 48 |     image: "/gig-economy.png",
 49 |     heading: "The Gig Economy: A New Era of Work",
 50 |     description1:
 51 |       "Flexible work arrangements, remote jobs, and side hustles are transforming the workforce, driven by technology and changing cultural values. Tools like AI, instant messaging, and remote collaboration platforms have made work accessible globally, while shifting attitudes prioritize flexibility, independence, and life balance over rigid 9-to-5 jobs. The gig economy empowers workers to explore diverse income streams, fit work around personal commitments, and prioritize autonomy. However, irregular paychecks and survival-mode challenges, especially for marginalized groups, highlight areas for improvement.",
 52 |     description2:
 53 |       "For businesses, the gig economy offers scalability, cost-effectiveness, and access to a global talent pool. Companies can adapt quickly to project demands, reduce operational costs by hiring freelancers, and access specialized skills without geographical limits. This agile approach boosts efficiency, enabling businesses to focus on core priorities. The gig economy is redefining work, benefiting both individuals and organizations with flexibility and innovation.",
 54 |     author: "by Pedro Barros",
 55 |     image2: "/gig-economy.png",
 56 |   },
 57 | 
 58 |   {
 59 |     title: "Impact of Animal Migration Patterns on Climate",
 60 |     category: "Animals",
 61 |     date: "November 19, 2024",
 62 |     image: "/migration.png",
 63 |     heading: "Animal Migration: Nature’s Remarkable Journey",
 64 |     description1:
 65 |       "Animal migration, a breathtaking phenomenon, involves countless species traveling across land, air, and sea to find food, breed, and adapt to changing environments. Driven by survival, migration patterns vary, including seasonal moves (e.g., birds escaping cold winters), reproductive migrations (e.g., salmon returning to spawn), nomadic journeys (e.g., caribou seeking resources), and altitudinal shifts (e.g., mountain goats moving to lower elevations in winter). These migrations ensure access to resources, safer breeding grounds, and genetic diversity, all while navigating through techniques like sensing Earth’s magnetic field, celestial navigation, and familiar landmarks.",
 66 |     description2:
 67 |       "However, climate change, habitat loss, and human-made barriers threaten these crucial journeys. Conservation efforts are essential to protect migratory paths, ensuring species continue their life-sustaining travels. By safeguarding animal migration patterns, we contribute to biodiversity and the planet’s ecological balance.",
 68 |     author: "by Adrian",
 69 |     image2: "/migration.png",
 70 |   },
 71 | 
 72 |   {
 73 |     title: "How 5G is Transforming Smart Cities and IoT",
 74 |     category: "Tech",
 75 |     date: "August 31, 2024",
 76 |     image: "/5G.png",
 77 |     heading: "The Impact of 5G on IoT and Smart Cities",
 78 |     description1:
 79 |       "The advent of 5G technology has ushered in an era of high-speed, low-latency, and highly connected networks, redefining the possibilities for the Internet of Things (IoT) and smart cities. By enabling seamless communication between devices, real-time data processing, and enhanced reliability, 5G amplifies IoT’s potential. In smart cities, this translates into smarter infrastructure, optimized public services, and intelligent transportation systems, paving the way for sustainable urban living.",
 80 |     description2:
 81 |       "From advancing healthcare through telemedicine and remote surgeries to improving energy management and environmental monitoring, 5G is driving transformative change. Despite privacy and security challenges, robust measures can ensure data protection and network integrity. As global adoption expands, 5G will continue to shape urban landscapes, fostering innovation and elevating the quality of life for residents.",
 82 |     author: "by Rohit Mehta",
 83 |     image2: "/5G.png",
 84 |   },
 85 | 
 86 |   {
 87 |     title: "The Importance of Gut Health for Your Body Overall Wellness",
 88 |     category: "Health",
 89 |     date: "February 2, 2024",
 90 |     image: "/gut-health.png",
 91 |     heading: "Understanding Gut Health for Overall Well-being",
 92 |     description1:
 93 |       "Gut health plays a vital role in overall well-being, influencing everything from digestion to mental health and immunity. Often called the body's second brain, the gut microbiome, a complex ecosystem of bacteria, viruses, and fungi, impacts inflammation, nutrient absorption, and defense against harmful pathogens. An imbalance in the microbiome, or dysbiosis, can lead to issues like obesity, type 2 diabetes, and mental health disorders. A balanced diet rich in fiber and diverse foods fosters a healthy gut, underscoring the importance of mindful lifestyle choices in maintaining optimal health.",
 94 |     description2:
 95 |       "Navigating the wealth of information on gut health can be overwhelming. Trusted sources, from blogs to podcasts, offer valuable insights for enthusiasts and professionals alike. Blogs like The Gut Stuff and Love Your Gut simplify complex topics, while podcasts such as Butts & Guts and The Gut Health Gurus provide engaging discussions led by experts. These resources, combining scientific accuracy with accessibility, empower readers to make informed decisions and better care for their gut health.",
 96 |     author: "By Sasha Aparicio",
 97 |     image2: "/gut-health.png",
 98 |   },
 99 | ];
100 | 


--------------------------------------------------------------------------------