Services Language 4 card content updated

This commit is contained in:
akash 2025-08-18 19:55:19 +05:30
commit 031de328c9
13 changed files with 348 additions and 102 deletions

View File

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

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;

View File

@ -3,8 +3,11 @@ import React, { useState, useRef } from "react";
import SimpleReactValidator from "simple-react-validator";
import ReCAPTCHA from "react-google-recaptcha";
import axios from "axios";
import { useTranslation } from 'next-i18next';
const ContactForm = () => {
const { t } = useTranslation("contact");
const subjectOptions = t("form.subjectOptions", { returnObjects: true });
const [forms, setForms] = useState({
name: "",
email: "",
@ -64,7 +67,7 @@ const ContactForm = () => {
{ headers: { "Content-Type": "application/json" } }
);
alert(response?.data?.message || "Message sent successfully!");
alert(t("form.successMessage"));
setForms({
name: "",
@ -84,7 +87,7 @@ const ContactForm = () => {
}
setRecaptchaToken(null);
} catch (err) {
alert("Failed to send message. Please try again later.");
alert(t("form.failedMessage"));
}
} else {
validator.showMessages();
@ -103,9 +106,14 @@ const ContactForm = () => {
name="name"
onBlur={changeHandler}
onChange={changeHandler}
placeholder="Your Name"
placeholder={t("form.namePlaceholder")}
/>
{validator.message("name", forms.name, "required|alpha_space")}
{validator.message(
"name",
forms.name,
"required|alpha_space",
{ messages: { required: t("form.requiredMessages.name") } }
)}
</div>
</div>
@ -117,9 +125,14 @@ const ContactForm = () => {
name="email"
onBlur={changeHandler}
onChange={changeHandler}
placeholder="Your Email"
placeholder={t("form.emailPlaceholder")}
/>
{validator.message("email", forms.email, "required|email")}
{validator.message(
"email",
forms.email,
"required|email",
{ messages: { required: t("form.requiredMessages.email") } }
)}
</div>
</div>
@ -131,9 +144,14 @@ const ContactForm = () => {
name="phone"
onBlur={changeHandler}
onChange={changeHandler}
placeholder="Your phone"
placeholder={t("form.phonePlaceholder")}
/>
{validator.message("phone", forms.phone, "required|phone")}
{validator.message(
"phone",
forms.phone,
"required|phone",
{ messages: { required: t("form.requiredMessages.phone") } }
)}
</div>
</div>
@ -145,26 +163,37 @@ const ContactForm = () => {
value={forms.subject}
name="subject"
>
<option value="">Select Subject</option>
<option>River Development</option>
<option>Village Development</option>
<option>Road Development</option>
<option>Town Development</option>
<option>Social Development</option>
<option value="">{t("form.subjectPlaceholder")}</option>
{Array.isArray(subjectOptions) &&
subjectOptions.map((opt, idx) => (
<option key={idx}>{opt}</option>
))}
</select>
{validator.message("subject", forms.subject, "required")}
{validator.message(
"subject",
forms.subject,
"required",
{ messages: { required: t("form.requiredMessages.subject") } }
)}
</div>
</div>
<div className="col col-lg-12 col-12">
<textarea
onBlur={changeHandler}
onChange={changeHandler}
value={forms.message}
name="message"
placeholder="Message"
placeholder={t("form.messagePlaceholder")}
></textarea>
{validator.message("message", forms.message, "required")}
{validator.message(
"message",
forms.message,
"required",
{ messages: { required: t("form.requiredMessages.message") } }
)}
</div>
<div className="col col-lg-12 col-12" style={{ marginTop: 12 }}>
@ -178,7 +207,7 @@ const ContactForm = () => {
<div className="submit-area" style={{ marginTop: 12 }}>
<button type="submit" className="theme-btn">
Submit Now
{t("form.submitButton")}
</button>
</div>
</form>

View File

@ -1,10 +1,11 @@
import React from 'react';
import ContactForm from '../ContactFrom/ContactForm'
import { useTranslation } from 'next-i18next';
const Contactpage = () => {
return(
const { t } = useTranslation("contact");
return (
<section className="wpo-contact-pg-section section-padding">
<div className="container">
<div className="row">
@ -32,12 +33,11 @@ const Contactpage = () => {
</div>
</div>
<div className="office-info-text">
<h2>Email Us</h2>
<p>info@janahanlaw.com</p>
{/* <p>helloyou@gmail.com</p> */}
<h2>{t("contactInfo.emailTitle")}</h2>
<p>{t("contactInfo.email")}</p>
</div>
</div>
</div>
</div>
<div className="col col-xl-6 col-lg-6 col-md-6 col-12">
<div className="office-info-item">
<div className="office-info-icon">
@ -46,32 +46,31 @@ const Contactpage = () => {
</div>
</div>
<div className="office-info-text">
<h2>Call Now</h2>
<p>+1 (305) 330-7413</p>
{/* <p>+1 800 123 654 987</p> */}
<h2>{t("contactInfo.callTitle")}</h2>
<p>{t("contactInfo.phone")}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="wpo-contact-title">
<h2>Have Any Question?</h2>
<p>Were here to help with all your U.S. immigration and legal needs contact Janahan Law for trusted guidance today.</p>
<h2>{t('contactInfo.questionTitle')}</h2>
<p>{t('contactInfo.questionDesc')}</p>
</div>
<div className="wpo-contact-form-area">
<ContactForm/>
<ContactForm />
</div>
</div>
</div>
</div>
</div>
</div>
{/* <section className="wpo-contact-map-section">
<div className="wpo-contact-map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.9147703055!2d-74.11976314309273!3d40.69740344223377!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2sbd!4v1547528325671"></iframe>
</div>
</section> */}
</section>
)
)
}
export default Contactpage;

View File

@ -11,13 +11,13 @@ module.exports = {
// localePath: './public/locales',
};
// aakash - 'ourMission', 'racialJustice', 'services'
// aakash - ourMission, racialJustice
// Selvi - 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor'
// Selvi - 'ourStory', 'aboutService', 'aboutMission', 'aboutRacial', 'aboutDonor', 'contact',
// Vidhya
// OurApproach
// 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'

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;

View File

@ -24,7 +24,7 @@ export default ContactPage;
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'menu'])), // Add 'home', 'footer', etc. if needed
...(await serverSideTranslations(locale, ['common', 'menu', 'contact'])), // Add 'home', 'footer', etc. if needed
},
};
}

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
},
};
}

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 ..."
}
}
}

View File

@ -0,0 +1,35 @@
{
"contactInfo": {
"emailTitle": "Email Us",
"email": "info@janahanlaw.com",
"callTitle": "Call Now",
"phone": "+1 (305) 330-7413",
"questionTitle": "Have Any Question?",
"questionDesc": "Were here to help with all your U.S. immigration and legal needs — contact Janahan Law for trusted guidance today."
},
"form": {
"namePlaceholder": "Your Name",
"emailPlaceholder": "Your Email",
"phonePlaceholder": "Your Phone",
"subjectPlaceholder": "Select Subject",
"subjectOptions": [
"River Development",
"Village Development",
"Road Development",
"Town Development",
"Social Development"
],
"messagePlaceholder": "Message",
"submitButton": "Submit Now",
"successMessage": "Message sent successfully!",
"failedMessage": "Failed to send message. Please try again later.",
"requiredMessages": {
"name": "Name is required",
"email": "Valid email is required",
"phone": "Phone number is required",
"subject": "Please select a subject",
"message": "Message is required",
"recaptcha": "Please complete the ReCAPTCHA"
}
}
}

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í ..."
}
}
}

View File

@ -0,0 +1,35 @@
{
"contactInfo": {
"emailTitle": "Envíanos un correo",
"email": "info@janahanlaw.com",
"callTitle": "Llama ahora",
"phone": "+1 (305) 330-7413",
"questionTitle": "¿Tienes alguna pregunta?",
"questionDesc": "Estamos aquí para ayudarte con todas tus necesidades legales y de inmigración en EE. UU. — contacta a Janahan Law para obtener orientación confiable hoy."
},
"form": {
"namePlaceholder": "Tu Nombre",
"emailPlaceholder": "Tu Correo Electrónico",
"phonePlaceholder": "Tu Teléfono",
"subjectPlaceholder": "Selecciona Asunto",
"subjectOptions": [
"Desarrollo de Ríos",
"Desarrollo de Aldeas",
"Desarrollo de Carreteras",
"Desarrollo de Ciudades",
"Desarrollo Social"
],
"messagePlaceholder": "Mensaje",
"submitButton": "Enviar Ahora",
"successMessage": "¡Mensaje enviado con éxito!",
"failedMessage": "Error al enviar el mensaje. Por favor, inténtalo de nuevo más tarde.",
"requiredMessages": {
"name": "El nombre es obligatorio",
"email": "Correo electrónico válido es obligatorio",
"phone": "El teléfono es obligatorio",
"subject": "Por favor selecciona un asunto",
"message": "El mensaje es obligatorio",
"recaptcha": "Por favor completa el ReCAPTCHA"
}
}
}

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;