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

Home page hero banner language updated

Browse Source
This commit is contained in:
Alaguraj0361 2025-08-18 13:02:14 +05:30
parent e22446e764
commit 1494e376c2
7 changed files with 130 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
components/hero/hero.js
View File

@ -1,6 +1,9 @@
'use client'; // If this component is client-side only
import React from "react"; import React from "react";
import Slider from "react-slick"; import Slider from "react-slick";
import Link from 'next/link' import Link from 'next/link';
import { useTranslation } from 'next-i18next';
import "slick-carousel/slick/slick.css"; import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick-theme.css";
@ -16,24 +19,26 @@ const settings = {
}; };
const Hero = () => { const Hero = () => {
const { t } = useTranslation('homeHero'); // Use 'home' namespace
return ( return (
<section className="wpo-hero-slider"> <section className="wpo-hero-slider">
<div className="hero-container"> <div className="hero-container">
<div className="hero-wrapper"> <div className="hero-wrapper">
<Slider {...settings}> <Slider {...settings}>
<div className="hero-slide"> <div className="hero-slide">
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-1.webp'})` }}> <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-1.webp)` }}>
<div className="container-fluid"> <div className="container-fluid">
<div className="slide-content"> <div className="slide-content">
<div data-swiper-parallax="300" className="slide-title"> <div data-swiper-parallax="300" className="slide-title">
<h2>Family Immigration Assistance</h2> <h2>{t('hero.slide1.title')}</h2>
</div> </div>
<div data-swiper-parallax="400" className="slide-text"> <div data-swiper-parallax="400" className="slide-text">
<p>Reuniting loved ones, one case at a time.</p> <p>{t('hero.slide1.text')}</p>
</div> </div>
<div className="clearfix"></div> <div className="clearfix"></div>
<div className="slide-btns"> <div className="slide-btns">
<Link href="/about" className="theme-btn">About</Link> <Link href="/about" className="theme-btn">{t('hero.slide1.button')}</Link>
</div> </div>
</div> </div>
</div> </div>
@ -41,54 +46,56 @@ const Hero = () => {
</div> </div>
<div className="hero-slide"> <div className="hero-slide">
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-2.webp'})` }}> <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-2.webp)` }}>
<div className="container-fluid"> <div className="container-fluid">
<div className="slide-content"> <div className="slide-content">
<div data-swiper-parallax="300" className="slide-title"> <div data-swiper-parallax="300" className="slide-title">
<h2>Employment & Work Visa Solutions</h2> <h2>{t('hero.slide2.title')}</h2>
</div> </div>
<div data-swiper-parallax="400" className="slide-text"> <div data-swiper-parallax="400" className="slide-text">
<p>Your career deserves a global gateway.</p> <p>{t('hero.slide2.text')}</p>
</div> </div>
<div className="clearfix"></div> <div className="clearfix"></div>
<div className="slide-btns"> <div className="slide-btns">
<Link href="/our-approach" className="theme-btn">Our Approach</Link> <Link href="/our-approach" className="theme-btn">{t('hero.slide2.button')}</Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="hero-slide"> <div className="hero-slide">
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-3.webp'})` }}> <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-3.webp)` }}>
<div className="container-fluid"> <div className="container-fluid">
<div className="slide-content"> <div className="slide-content">
<div data-swiper-parallax="300" className="slide-title"> <div data-swiper-parallax="300" className="slide-title">
<h2>Investor & Business Immigration</h2> <h2>{t('hero.slide3.title')}</h2>
</div> </div>
<div data-swiper-parallax="400" className="slide-text"> <div data-swiper-parallax="400" className="slide-text">
<p>Building futures through business opportunities.</p> <p>{t('hero.slide3.text')}</p>
</div> </div>
<div className="clearfix"></div> <div className="clearfix"></div>
<div className="slide-btns"> <div className="slide-btns">
<Link href="/services" className="theme-btn">Services</Link> <Link href="/services" className="theme-btn">{t('hero.slide3.button')}</Link>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="hero-slide"> <div className="hero-slide">
<div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(${'images/home/banner/banner-4.webp'})` }}> <div className="slide-inner slide-bg-image" style={{ backgroundImage: `url(/images/home/banner/banner-4.webp)` }}>
<div className="container-fluid"> <div className="container-fluid">
<div className="slide-content"> <div className="slide-content">
<div data-swiper-parallax="300" className="slide-title"> <div data-swiper-parallax="300" className="slide-title">
<h2>Deportation Defense & Legal Representation</h2> <h2>{t('hero.slide4.title')}</h2>
</div> </div>
<div data-swiper-parallax="400" className="slide-text"> <div data-swiper-parallax="400" className="slide-text">
<p>Fighting for your right to stay.</p> <p>{t('hero.slide4.text')}</p>
</div> </div>
<div className="clearfix"></div> <div className="clearfix"></div>
<div className="slide-btns"> <div className="slide-btns">
<Link href="/contact" className="theme-btn">Contact</Link> <Link href="/contact" className="theme-btn">{t('hero.slide4.button')}</Link>
</div> </div>
</div> </div>
</div> </div>
@ -103,7 +110,7 @@ const Hero = () => {
</svg> </svg>
</div> </div>
</section> </section>
) );
} };
export default Hero; export default Hero;

14
next-i18next.config.js
View File

@ -4,7 +4,19 @@ module.exports = {
locales: ['en', 'es'], locales: ['en', 'es'],
localeDetection: false, localeDetection: false,
}, },
ns: ['common', 'menu'], ns: ['common', 'menu', 'homeHero'],
defaultNS: 'common', defaultNS: 'common',
// localePath: './public/locales', // localePath: './public/locales',
}; };
// aakash
// Selvi
// Vidhya
// Alagu Raj

11
pages/about/index.js
View File

@ -21,6 +21,7 @@ import TestimonialSection from '../../components/aboutPage/TestimonialSection';
import TestimonialSection2 from '../../components/aboutPage/TestimonialSection2'; import TestimonialSection2 from '../../components/aboutPage/TestimonialSection2';
import bg from '/public/images/about/about-banner.webp' import bg from '/public/images/about/about-banner.webp'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const AboutPage = () => { const AboutPage = () => {
return ( return (
<Fragment> <Fragment>
@ -42,3 +43,13 @@ const AboutPage = () => {
) )
}; };
export default AboutPage; export default AboutPage;
// ✅ This enables translations (menu, and more if you add other namespaces)
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'menu'])), // Add 'home', 'footer', etc. if needed
},
};
}

10
pages/contact/index.js
View File

@ -5,6 +5,7 @@ import Contactpage from '../../components/Contactpage/Contactpage'
import Scrollbar from '../../components/scrollbar/scrollbar' import Scrollbar from '../../components/scrollbar/scrollbar'
import Footer from '../../components/footer/Footer'; import Footer from '../../components/footer/Footer';
import contact from '/public/images/contact/contact-banner.webp'; import contact from '/public/images/contact/contact-banner.webp';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const ContactPage =() => { const ContactPage =() => {
return( return(
@ -19,3 +20,12 @@ const ContactPage =() => {
}; };
export default ContactPage; export default ContactPage;
// ✅ This enables translations (menu, and more if you add other namespaces)
export async function getStaticProps({ locale }) {
return {
props: {
...(await serverSideTranslations(locale, ['common', 'menu'])), // Add 'home', 'footer', etc. if needed
},
};
}

42
pages/index.js
View File

@ -16,31 +16,31 @@ import introImg from '/public/images/home/expert-immigration-guidance.webp';
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'; import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
const HomePage = () => { const HomePage = () => {
return ( return (
<Fragment> <Fragment>
<Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} /> <Navbar hclass={'wpo-site-header-s1'} topbarNone={'topbar-none'} Logo={'/images/logo.svg'} />
<Hero /> <Hero />
<Features sClass={'wpo-service-section-s2'} /> <Features sClass={'wpo-service-section-s2'} />
<About introImg={introImg} abClass={'wpo-about-section-s2'} /> <About introImg={introImg} abClass={'wpo-about-section-s2'} />
<ServiceSection /> <ServiceSection />
<FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} /> <FunFact fnTpClass={'funfact-wrap-sec'} fnClass={'wpo-fun-fact-section-s3'} />
<ServiceSectionS2 /> <ServiceSectionS2 />
<Testimonial /> <Testimonial />
<Donors /> <Donors />
<BlogSection /> <BlogSection />
<Footer /> <Footer />
<Scrollbar /> <Scrollbar />
</Fragment> </Fragment>
); );
}; };
export default HomePage; export default HomePage;
// ✅ This enables translations (menu, and more if you add other namespaces) // ✅ This enables translations (menu, and more if you add other namespaces)
export async function getStaticProps({ locale }) { export async function getStaticProps({ locale }) {
return { return {
props: { props: {
...(await serverSideTranslations(locale, ['common','menu'])), // Add 'home', 'footer', etc. if needed ...(await serverSideTranslations(locale, ['common', 'menu', 'homeHero'])), // Add 'home', 'footer', etc. if needed
}, },
}; };
} }

24
public/locales/en/homeHero.json Normal file
View File

@ -0,0 +1,24 @@
{
"hero": {
"slide1": {
"title": "Family Immigration Assistance",
"text": "Reuniting loved ones, one case at a time.",
"button": "About"
},
"slide2": {
"title": "Employment & Work Visa Solutions",
"text": "Your career deserves a global gateway.",
"button": "Our Approach"
},
"slide3": {
"title": "Investor & Business Immigration",
"text": "Building futures through business opportunities.",
"button": "Services"
},
"slide4": {
"title": "Deportation Defense & Legal Representation",
"text": "Fighting for your right to stay.",
"button": "Contact"
}
}
}

24
public/locales/es/homeHero.json Normal file
View File

@ -0,0 +1,24 @@
{
"hero": {
"slide1": {
"title": "Asistencia de Inmigración Familiar",
"text": "Reuniendo a seres queridos, un caso a la vez.",
"button": "Acerca de"
},
"slide2": {
"title": "Soluciones de Visa de Trabajo y Empleo",
"text": "Tu carrera merece una puerta al mundo.",
"button": "Nuestro Enfoque"
},
"slide3": {
"title": "Inmigración para Inversores y Negocios",
"text": "Construyendo futuros a través de oportunidades empresariales.",
"button": "Servicios"
},
"slide4": {
"title": "Defensa Contra Deportación y Representación Legal",
"text": "Luchando por tu derecho a permanecer.",
"button": "Contacto"
}
}
}