MetatroncubeSoftwareSolutions/janahan-law
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home page blog section updated

Browse Source
This commit is contained in:
Alaguraj0361 2025-08-18 19:11:03 +05:30
parent fac979fa1b
commit 773f9648b2
8 changed files with 209 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
api/blogs.js
View File

@ -180,3 +180,7 @@ This article provides general information only. Consult qualified immigration co
];
export default blogs;

96
components/BlogSection/BlogSection.js
View File

@ -1,48 +1,64 @@
import React from "react";
import blogs from '../../api/blogs'
import blogs from '../../api/blogs';
import Link from "next/link";
import SectionTitle from "../SectionTitle/SectionTitle";
import Image from "next/image";
import { useTranslation } from 'next-i18next';
import blog from "../../utils/constant.utils";
const ClickHandler = () => {
window.scrollTo(10, 0);
}
const ClickHandler = () => window.scrollTo(10, 0);
const BlogSection = () => {
return (
<section className="wpo-blog-section section-padding" id="blog">
<div className="container">
<SectionTitle subTitle={'Our Blog'} Title={'Latest News & Press'} />
<div className="wpo-blog-items">
<div className="row">
{blogs.map((blog, bl) => (
<div className="col col-lg-4 col-md-6 col-12" key={bl}>
<div className="wpo-blog-item">
<div className="wpo-blog-img">
<Image src={blog.screens} alt="" />
</div>
<div className="wpo-blog-content">
{/* <ul>
<li><a href="blog-single.html">{blog.create_at}</a></li>
<li>by: <Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>{blog.authorTitle}</Link></li>
</ul> */}
<h2><Link onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>{blog.title}</Link></h2>
<div className="entry-details">
<p>
{blog.para}
</p>
<Link className="more" onClick={ClickHandler} href={'/blog-single/[slug]'} as={`/blog-single/${blog.slug}`}>Know More</Link>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</section>
);
}
const { t } = useTranslation('blog');
export default BlogSection;
return (
<section className="wpo-blog-section section-padding" id="blog">
<div className="container">
<SectionTitle
subTitle={t('sectionSubTitle')}
Title={t('sectionTitle')}
/>
<div className="wpo-blog-items">
<div className="row">
{blog.map((blog) => {
const blogTexts = t(`posts.${blog.slug}`, { returnObjects: true });
return (
<div className="col col-lg-4 col-md-6 col-12" key={blog.id}>
<div className="wpo-blog-item">
<div className="wpo-blog-img">
<Image src={blog.screens} alt={blogTexts.title} />
</div>
<div className="wpo-blog-content">
<h2>
<Link
onClick={ClickHandler}
href={'/blog-single/[slug]'}
as={`/blog-single/${blog.slug}`}
>
{blogTexts.title}
</Link>
</h2>
<div className="entry-details">
<p>{blogTexts.para}</p>
<Link
className="more"
onClick={ClickHandler}
href={'/blog-single/[slug]'}
as={`/blog-single/${blog.slug}`}
>
{t('knowMore')}
</Link>
</div>
</div>
</div>
</div>
);
})}
</div>
</div>
</div>
</section>
);
};
export default BlogSection;

3
next-i18next.config.js
View File

@ -1,4 +1,3 @@
const { default: OurApproach } = require("./pages/our-approach");
module.exports = {
i18n: {
@ -19,5 +18,5 @@ module.exports = {
// Vidhya - OurApproach
// Alagu Raj - 'common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction'
// Alagu Raj - 'common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog'

70
pages/blog/[slug].js
View File

@ -1,6 +1,9 @@
// pages/blog/[slug].js
import React, { Fragment } from 'react';
import { useRouter } from 'next/router';
import blogs from '../../api/blogs';
import { useTranslation } from 'next-i18next';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import blogs from '../../api/blogs'; // Static metadata like images, author, etc.
import Link from 'next/link';
import PageTitle from '../../components/pagetitle/PageTitle';
import Navbar2 from '../../components/Navbar2/Navbar2';
@ -8,17 +11,25 @@ import Footer from '../../components/footer/Footer';
import Scrollbar from '../../components/scrollbar/scrollbar';
import Image from 'next/image';
const BlogSingle = (props) => {
const BlogSingle = () => {
const router = useRouter();
const { slug } = router.query;
const BlogDetails = blogs.find(blog => blog.slug === slug);
const { t } = useTranslation('blog');
if (!BlogDetails) {
if (!slug) return null; // Avoid hydration mismatch on first load
// Localized content from blog.json
const blogContent = t(`posts.${slug}`, { returnObjects: true });
// Static metadata (images, date, author)
const blogMeta = blogs.find(blog => blog.slug === slug);
if (!blogMeta || !blogContent?.title) {
return (
<div className="container text-center py-5">
<h2>Blog not found!</h2>
<Link href="/blog">Back to Blog</Link>
<Link href="/blog">← Back to Blog</Link>
</div>
);
}
@ -26,37 +37,34 @@ const BlogSingle = (props) => {
return (
<Fragment>
<Navbar2 />
<PageTitle pageTitle={BlogDetails.title} pagesub={'Blog'} />
<PageTitle pageTitle={blogContent.title} pagesub="Blog" />
<section className="wpo-blog-single-section section-padding">
<div className="container">
<div className="row">
<div className={`col col-lg-12 col-12 ${props.blRight}`}>
<div className="col col-lg-12 col-12">
<div className="wpo-blog-content">
<div className={`post ${BlogDetails.blClass}`}>
<div className={`post ${blogMeta.blClass}`}>
<div className="entry-media">
<div style={{ width: "100%", height: "400px", position: "relative" }}>
<div style={{ width: '100%', height: '400px', position: 'relative' }}>
<Image
src={BlogDetails.blogSingleImg}
alt={BlogDetails.title}
src={blogMeta.blogSingleImg}
alt={blogContent.title}
fill
style={{ objectFit: "cover" }}
style={{ objectFit: 'cover' }}
/>
</div>
</div>
<div className="entry-meta">
<ul>
<li><i className="fi flaticon-calendar"></i> {BlogDetails.create_at}</li>
<li>
<i className="fi ti-user"></i> By{' '}
<Link href="/blog">{BlogDetails.authorTitle}</Link>
</li>
<li><i className="fi flaticon-calendar"></i> {blogMeta.create_at}</li>
<li><i className="fi ti-user"></i> By <Link href="/blog">{blogMeta.authorTitle}</Link></li>
</ul>
</div>
<h2>{BlogDetails.title}</h2>
<div dangerouslySetInnerHTML={{ __html: BlogDetails.description }}></div>
<h2>{blogContent.title}</h2>
<div dangerouslySetInnerHTML={{ __html: blogContent.description }} />
</div>
</div>
</div>
@ -70,4 +78,28 @@ const BlogSingle = (props) => {
);
};
export async function getStaticPaths() {
const locales = ['en', 'es'];
const paths = locales.flatMap(locale =>
blogs.map(blog => ({
params: { slug: blog.slug },
locale,
}))
);
return {
paths,
fallback: false,
};
}
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'menu', 'blog'])),
},
};
}
export default BlogSingle;

2
pages/index.js
View File

@ -40,7 +40,7 @@ export default HomePage;
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction'])), // Add 'home', 'footer', etc. if needed
...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero', 'home4Card', '(home)/homeAbout', '(home)/homeFeature', '(home)/testimonial', '(home)/homeCalltoAction', 'blog'])), // Add 'home', 'footer', etc. if needed
},
};
}

22
public/locales/en/blog.json Normal file
View File

@ -0,0 +1,22 @@
{
"sectionSubTitle": "Our Blog",
"sectionTitle": "Latest News & Press",
"knowMore": "Know More",
"posts": {
"new-tps-designations-what-you-need-to-know": {
"title": "New TPS Designations: What You Need to Know",
"summary": "Recent policy changes affect thousands of immigrants. Learn how temporary protected status updates may impact your case and what actions to take.",
"description": "<p>Recent policy changes affect thousands of immigrants. Learn how temporary protected status updates...</p> ... full content here ..."
},
"h1b-season-2025-preparation-strategies": {
"title": "H-1B Season 2025: Preparation Strategies",
"summary": "The annual H-1B lottery approaches. Our comprehensive guide helps employers and workers navigate the process.",
"description": "<p>The H-1B registration period for the fiscal year 2026 closed recently...</p> ... full content here ..."
},
"family-immigration-backlogs-alternative-options": {
"title": "Family Immigration Backlogs: Alternative Options",
"summary": "While family preference categories face delays, discover alternative pathways to reunite with loved ones.",
"description": "<p>While family preference categories face delays...</p> ... full content here ..."
}
}
}

22
public/locales/es/blog.json Normal file
View File

@ -0,0 +1,22 @@
{
"sectionSubTitle": "Nuestro Blog",
"sectionTitle": "Últimas Noticias y Comunicados",
"knowMore": "Saber Más",
"posts": {
"new-tps-designations-what-you-need-to-know": {
"title": "Nuevas Designaciones de TPS: Lo Que Necesitas Saber",
"summary": "Cambios recientes en la política afectan a miles de inmigrantes. Descubre cómo las actualizaciones de TPS pueden impactar tu caso y qué acciones tomar.",
"description": "<p>Los cambios recientes en la política afectan a miles de inmigrantes. Aprende cómo las actualizaciones del Estatus de Protección Temporal (TPS) pueden impactar tu caso y qué pasos debes seguir...</p> ... contenido completo aquí ..."
},
"h1b-season-2025-preparation-strategies": {
"title": "Temporada H-1B 2025: Estrategias de Preparación",
"summary": "Se acerca la lotería anual de visas H-1B. Nuestra guía integral ayuda a empleadores y trabajadores a navegar el proceso y mejorar sus posibilidades.",
"description": "<p>El período de registro para la visa H-1B del año fiscal 2026 se cerró recientemente...</p> ... contenido completo aquí ..."
},
"family-immigration-backlogs-alternative-options": {
"title": "Retrasos en la Inmigración Familiar: Opciones Alternativas",
"summary": "Mientras las categorías de preferencia familiar enfrentan demoras, descubre vías alternativas para reunirte con tus seres queridos.",
"description": "<p>Mientras las categorías de inmigración familiar enfrentan retrasos significativos...</p> ... contenido completo aquí ..."
}
}
}

52
utils/constant.utils.js
View File

@ -30,6 +30,18 @@ import iconImg1 from '/public/images/home/icons/strategic-planning.webp'
import iconImg2 from '/public/images/home/icons/expert-preparation.webp'
import iconImg3 from '/public/images/home/icons/ongoing-support.webp'
import blogImg1 from "/public/images/blog/blog-1.webp";
import blogImg2 from "/public/images/blog/blog-2.webp";
import blogImg3 from "/public/images/blog/blog-3.webp";
import blogSingleImg1 from "/public/images/blog/blog-detail-1.webp";
import blogSingleImg2 from "/public/images/blog/blog-detail-2.webp";
import blogSingleImg3 from "/public/images/blog/blog-detail-3.webp";
import bannerImg1 from "/public/images/blog/banner-1.webp";
import bannerImg2 from "/public/images/blog/banner-2.webp";
import bannerImg3 from "/public/images/blog/banner-3.webp";
export const featuresData = [
{
img: iconImg1,
@ -205,3 +217,43 @@ export const MissionVision = [
},
]
const blog = [
{
id: '1',
slug: 'new-tps-designations-what-you-need-to-know',
bannerImg: bannerImg1,
screens: blogImg1,
blogSingleImg: blogSingleImg1,
author: 'Anne William',
authorTitle: 'Admin',
create_at: '25 Sep 2022',
comment: '35',
blClass: 'format-standard-image'
},
{
id: '2',
slug: 'h1b-season-2025-preparation-strategies',
bannerImg: bannerImg2,
screens: blogImg2,
blogSingleImg: blogSingleImg2,
author: 'Robert Fox',
authorTitle: 'Admin',
create_at: '12 Jun 2023',
comment: '80',
blClass: 'format-standard-image'
},
{
id: '3',
slug: 'family-immigration-backlogs-alternative-options',
bannerImg: bannerImg3,
screens: blogImg3,
blogSingleImg: blogSingleImg3,
author: 'Devon Lane',
authorTitle: 'Admin',
create_at: '03 Dec 2024',
comment: '95',
blClass: 'format-video'
}
];
export default blog;